diff --git a/core/static/webpack/easymde-index.js b/core/static/webpack/easymde-index.js index d3495269..1200df14 100644 --- a/core/static/webpack/easymde-index.js +++ b/core/static/webpack/easymde-index.js @@ -9,181 +9,181 @@ import EasyMDE from 'easymde' * @param {HTMLTextAreaElement} textarea to use * @param {string} link to the markdown api **/ -function easymde_factory (textarea, markdown_api_url) { +export function easymdeFactory (textarea, markdownApiURL) { const easymde = new EasyMDE({ element: textarea, spellChecker: false, autoDownloadFontAwesome: false, previewRender: Alpine.debounce(async (plainText, preview) => { - const res = await fetch(markdown_api_url, { - method: "POST", - body: JSON.stringify({ text: plainText }), - }); - preview.innerHTML = await res.text(); - return null; + const res = await fetch(markdownApiURL, { + method: 'POST', + body: JSON.stringify({ text: plainText }) + }) + preview.innerHTML = await res.text() + return null }, 300), forceSync: true, // Avoid validation error on generic create view toolbar: [ { - name: "heading-smaller", + name: 'heading-smaller', action: EasyMDE.toggleHeadingSmaller, - className: "fa fa-header", - title: gettext("Heading"), + className: 'fa fa-header', + title: gettext('Heading') }, { - name: "italic", + name: 'italic', action: EasyMDE.toggleItalic, - className: "fa fa-italic", - title: gettext("Italic"), + className: 'fa fa-italic', + title: gettext('Italic') }, { - name: "bold", + name: 'bold', action: EasyMDE.toggleBold, - className: "fa fa-bold", - title: gettext("Bold"), + className: 'fa fa-bold', + title: gettext('Bold') }, { - name: "strikethrough", + name: 'strikethrough', action: EasyMDE.toggleStrikethrough, - className: "fa fa-strikethrough", - title: gettext("Strikethrough"), + className: 'fa fa-strikethrough', + title: gettext('Strikethrough') }, { - name: "underline", - action: function customFunction(editor) { - let cm = editor.codemirror; - cm.replaceSelection("__" + cm.getSelection() + "__"); + name: 'underline', + action: function customFunction (editor) { + const cm = editor.codemirror + cm.replaceSelection('__' + cm.getSelection() + '__') }, - className: "fa fa-underline", - title: gettext("Underline"), + className: 'fa fa-underline', + title: gettext('Underline') }, { - name: "superscript", - action: function customFunction(editor) { - let cm = editor.codemirror; - cm.replaceSelection("^" + cm.getSelection() + "^"); + name: 'superscript', + action: function customFunction (editor) { + const cm = editor.codemirror + cm.replaceSelection('^' + cm.getSelection() + '^') }, - className: "fa fa-superscript", - title: gettext("Superscript"), + className: 'fa fa-superscript', + title: gettext('Superscript') }, { - name: "subscript", - action: function customFunction(editor) { - let cm = editor.codemirror; - cm.replaceSelection("~" + cm.getSelection() + "~"); + name: 'subscript', + action: function customFunction (editor) { + const cm = editor.codemirror + cm.replaceSelection('~' + cm.getSelection() + '~') }, - className: "fa fa-subscript", - title: gettext("Subscript"), + className: 'fa fa-subscript', + title: gettext('Subscript') }, { - name: "code", + name: 'code', action: EasyMDE.toggleCodeBlock, - className: "fa fa-code", - title: gettext("Code"), + className: 'fa fa-code', + title: gettext('Code') }, - "|", + '|', { - name: "quote", + name: 'quote', action: EasyMDE.toggleBlockquote, - className: "fa fa-quote-left", - title: gettext("Quote"), + className: 'fa fa-quote-left', + title: gettext('Quote') }, { - name: "unordered-list", + name: 'unordered-list', action: EasyMDE.toggleUnorderedList, - className: "fa fa-list-ul", - title: gettext("Unordered list"), + className: 'fa fa-list-ul', + title: gettext('Unordered list') }, { - name: "ordered-list", + name: 'ordered-list', action: EasyMDE.toggleOrderedList, - className: "fa fa-list-ol", - title: gettext("Ordered list"), + className: 'fa fa-list-ol', + title: gettext('Ordered list') }, - "|", + '|', { - name: "link", + name: 'link', action: EasyMDE.drawLink, - className: "fa fa-link", - title: gettext("Insert link"), + className: 'fa fa-link', + title: gettext('Insert link') }, { - name: "image", + name: 'image', action: EasyMDE.drawImage, - className: "fa-regular fa-image", - title: gettext("Insert image"), + className: 'fa-regular fa-image', + title: gettext('Insert image') }, { - name: "table", + name: 'table', action: EasyMDE.drawTable, - className: "fa fa-table", - title: gettext("Insert table"), + className: 'fa fa-table', + title: gettext('Insert table') }, - "|", + '|', { - name: "clean-block", + name: 'clean-block', action: EasyMDE.cleanBlock, - className: "fa fa-eraser fa-clean-block", - title: gettext("Clean block"), + className: 'fa fa-eraser fa-clean-block', + title: gettext('Clean block') }, - "|", + '|', { - name: "preview", + name: 'preview', action: EasyMDE.togglePreview, - className: "fa fa-eye no-disable", - title: gettext("Toggle preview"), + className: 'fa fa-eye no-disable', + title: gettext('Toggle preview') }, { - name: "side-by-side", + name: 'side-by-side', action: EasyMDE.toggleSideBySide, - className: "fa fa-columns no-disable no-mobile", - title: gettext("Toggle side by side"), + className: 'fa fa-columns no-disable no-mobile', + title: gettext('Toggle side by side') }, { - name: "fullscreen", + name: 'fullscreen', action: EasyMDE.toggleFullScreen, - className: "fa fa-arrows-alt no-disable no-mobile", - title: gettext("Toggle fullscreen"), + className: 'fa fa-expand no-mobile', + title: gettext('Toggle fullscreen') }, - "|", + '|', { - name: "guide", - action: "/page/Aide_sur_la_syntaxe", - className: "fa fa-question-circle", - title: gettext("Markdown guide"), - }, - ], - }); + name: 'guide', + action: '/page/Aide_sur_la_syntaxe', + className: 'fa fa-question-circle', + title: gettext('Markdown guide') + } + ] + }) const submits = textarea - .closest("form") - .querySelectorAll('input[type="submit"]'); - const parentDiv = textarea.parentElement; - let submitPressed = false; + .closest('form') + .querySelectorAll('input[type="submit"]') + const parentDiv = textarea.parentElement + let submitPressed = false - function checkMarkdownInput(e) { + function checkMarkdownInput (e) { // an attribute is null if it does not exist, else a string - const required = textarea.getAttribute("required") != null; - const length = textarea.value.trim().length; + const required = textarea.getAttribute('required') != null + const length = textarea.value.trim().length - if (required && length == 0) { - parentDiv.style.boxShadow = "red 0px 0px 1.5px 1px"; + if (required && length === 0) { + parentDiv.style.boxShadow = 'red 0px 0px 1.5px 1px' } else { - parentDiv.style.boxShadow = ""; + parentDiv.style.boxShadow = '' } } - function onSubmitClick(e) { + function onSubmitClick (e) { if (!submitPressed) { - easymde.codemirror.on("change", checkMarkdownInput); + easymde.codemirror.on('change', checkMarkdownInput) } - submitPressed = true; - checkMarkdownInput(e); + submitPressed = true + checkMarkdownInput(e) } submits.forEach((submit) => { - submit.addEventListener("click", onSubmitClick); - }); + submit.addEventListener('click', onSubmitClick) + }) }; -window.easymde_factory = easymde_factory; +window.easymdeFactory = easymdeFactory diff --git a/core/templates/core/widgets/markdown_textarea.jinja b/core/templates/core/widgets/markdown_textarea.jinja index ea73b197..1a35056d 100644 --- a/core/templates/core/widgets/markdown_textarea.jinja +++ b/core/templates/core/widgets/markdown_textarea.jinja @@ -6,7 +6,7 @@