feat: turning on a native browser spell-checker

According to Ionaru/easy-markdown-editor#143

Signed-off-by: Dmytro Borysovskyi 🦁

frontend/static/js/App.js

@@ -23,10 +23,10 @@ const imageUploadOptions = {
         "image/jpg",
         "image/gif",
         "video/mp4",
-        "video/quicktime" // .mov (macOS' default record format)
+        "video/quicktime", // .mov (macOS' default record format)
     ],
     extraHeaders: {
-        "Accept": "application/json",
+        Accept: "application/json",
     },
     extraParams: {
         code: imageUploadCode,
@@ -36,10 +36,11 @@ const imageUploadOptions = {
 const defaultMarkdownEditorOptions = {
     autoDownloadFontAwesome: false,
     spellChecker: false,
+    nativeSpellcheck: true,
     forceSync: true,
     status: false,
-    inputStyle: "textarea",
-    tabSize: 4
+    inputStyle: "contenteditable",
+    tabSize: 4,
 };
 
 /**
@@ -58,18 +59,18 @@ function createMarkdownEditor(element, options) {
 
     // overriding default CodeMirror shortcuts
     editor.codemirror.addKeyMap({
-        'Home': 'goLineLeft', // move the cursor to the left side of the visual line it is on
-        'End': 'goLineRight', // move the cursor to the right side of the visual line it is on
+        Home: "goLineLeft", // move the cursor to the left side of the visual line it is on
+        End: "goLineRight", // move the cursor to the right side of the visual line it is on
     });
 
     // adding ability to fire events on the hidden element
     if (element.dataset.listen) {
-        const events = element.dataset.listen.split(' ')
-        events.forEach(event => {
+        const events = element.dataset.listen.split(" ");
+        events.forEach((event) => {
             try {
-                editor.codemirror.on(event, e => e.getTextArea().dispatchEvent(new Event(event)))
+                editor.codemirror.on(event, (e) => e.getTextArea().dispatchEvent(new Event(event)));
             } catch (e) {
-                console.warn('Invalid event provided', event)
+                console.warn("Invalid event provided", event);
             }
         });
     }
@@ -190,7 +191,7 @@ const App = {
                             title: "Insert code",
                         },
                     ],
-                })
+                });
 
                 return [...editors, editor];
             },
@@ -200,7 +201,7 @@ const App = {
         const invisibleMarkdownEditors = [...document.querySelectorAll(".markdown-editor-invisible")].reduce(
             (editors, element) => {
                 const editor = createMarkdownEditor(element, {
-                    toolbar: false
+                    toolbar: false,
                 });
 
                 return [...editors, editor];