Apply standard to easymde

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",
+        name: 'underline',
         action: function customFunction (editor) {
-          let cm = editor.codemirror;
-          cm.replaceSelection("__" + cm.getSelection() + "__");
+          const cm = editor.codemirror
+          cm.replaceSelection('__' + cm.getSelection() + '__')
         },
-        className: "fa fa-underline",
-        title: gettext("Underline"),
+        className: 'fa fa-underline',
+        title: gettext('Underline')
       },
       {
-        name: "superscript",
+        name: 'superscript',
         action: function customFunction (editor) {
-          let cm = editor.codemirror;
-          cm.replaceSelection("^" + cm.getSelection() + "^");
+          const cm = editor.codemirror
+          cm.replaceSelection('^' + cm.getSelection() + '^')
         },
-        className: "fa fa-superscript",
-        title: gettext("Superscript"),
+        className: 'fa fa-superscript',
+        title: gettext('Superscript')
       },
       {
-        name: "subscript",
+        name: 'subscript',
         action: function customFunction (editor) {
-          let cm = editor.codemirror;
-          cm.replaceSelection("~" + cm.getSelection() + "~");
+          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) {
     // 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) {
     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

core/templates/core/widgets/markdown_textarea.jinja

@@ -6,7 +6,7 @@
   <link rel="stylesheet" type="text/css" href="{{ statics.css }}" defer>
   <script type="text/javascript">
     addEventListener("DOMContentLoaded", (event) => {
-      easymde_factory(
+      easymdeFactory(
         document.getElementById("{{ widget.attrs.id }}"),
         "{{ markdown_api_url }}",
       );