Got markdown editor barely functional

[bookstack] / resources / js / markdown / codemirror.js

diff --git a/resources/js/markdown/codemirror.js b/resources/js/markdown/codemirror.js
index 06860b929cddb3c5a73bb888af4dc2e91689aed7..dad999e7a64e4d8be764abc57cb4faa67828123b 100644 (file)
--- a/resources/js/markdown/codemirror.js
+++ b/resources/js/markdown/codemirror.js
@@ -9,56 +9,71 @@ import Clipboard from "../services/clipboard";
  */
 export async function init(editor) {
     const Code = await window.importVersioned('code');
-    const cm = Code.markdownEditor(editor.config.inputEl);
 
-    // Will force to remain as ltr for now due to issues when HTML is in editor.
-    cm.setOption('direction', 'ltr');
-    // Register shortcuts
-    cm.setOption('extraKeys', provideShortcuts(editor, Code.getMetaKey()));
-
-
-    // Register codemirror events
-
-    // Update data on content change
-    cm.on('change', (instance, changeObj) => editor.actions.updateAndRender());
+    /**
+     * @param {ViewUpdate} v
+     */
+    function onViewUpdate(v) {
+        if (v.docChanged) {
+            editor.actions.updateAndRender();
+        }
+    }
 
-    // Handle scroll to sync display view
     const onScrollDebounced = debounce(editor.actions.syncDisplayPosition.bind(editor.actions), 100, false);
-    cm.on('scroll', instance => onScrollDebounced(instance));
+    let syncActive = editor.settings.get('scrollSync');
+    editor.settings.onChange('scrollSync', val => syncActive = val);
 
-    // Handle image paste
-    cm.on('paste', (cm, event) => {
-        const clipboard = new Clipboard(event.clipboardData || event.dataTransfer);
+    const domEventHandlers = {
+        // Handle scroll to sync display view
+        scroll: (event) => syncActive && onScrollDebounced(event)
+    }
 
-        // Don't handle the event ourselves if no items exist of contains table-looking data
-        if (!clipboard.hasItems() || clipboard.containsTabularData()) {
-            return;
-        }
+    const cm = Code.markdownEditor(editor.config.inputEl, onViewUpdate, domEventHandlers);
+    window.cm = cm;
 
-        const images = clipboard.getImages();
-        for (const image of images) {
-            editor.actions.uploadImage(image);
-        }
-    });
-
-    // Handle image & content drag n drop
-    cm.on('drop', (cm, event) => {
+    // Will force to remain as ltr for now due to issues when HTML is in editor.
+    // TODO
+    // cm.setOption('direction', 'ltr');
+    // Register shortcuts
+    // TODO
+    // cm.setOption('extraKeys', provideShortcuts(editor, Code.getMetaKey()));
 
-        const templateId = event.dataTransfer.getData('bookstack/template');
-        if (templateId) {
-            event.preventDefault();
-            editor.actions.insertTemplate(templateId, event.pageX, event.pageY);
-        }
 
-        const clipboard = new Clipboard(event.dataTransfer);
-        const clipboardImages = clipboard.getImages();
-        if (clipboardImages.length > 0) {
-            event.stopPropagation();
-            event.preventDefault();
-            editor.actions.insertClipboardImages(clipboardImages);
-        }
+    // Handle image paste
+    // TODO
+    // cm.on('paste', (cm, event) => {
+    //     const clipboard = new Clipboard(event.clipboardData || event.dataTransfer);
+    //
+    //     // Don't handle the event ourselves if no items exist of contains table-looking data
+    //     if (!clipboard.hasItems() || clipboard.containsTabularData()) {
+    //         return;
+    //     }
+    //
+    //     const images = clipboard.getImages();
+    //     for (const image of images) {
+    //         editor.actions.uploadImage(image);
+    //     }
+    // });
 
-    });
+    // Handle image & content drag n drop
+    // TODO
+    // cm.on('drop', (cm, event) => {
+    //
+    //     const templateId = event.dataTransfer.getData('bookstack/template');
+    //     if (templateId) {
+    //         event.preventDefault();
+    //         editor.actions.insertTemplate(templateId, event.pageX, event.pageY);
+    //     }
+    //
+    //     const clipboard = new Clipboard(event.dataTransfer);
+    //     const clipboardImages = clipboard.getImages();
+    //     if (clipboardImages.length > 0) {
+    //         event.stopPropagation();
+    //         event.preventDefault();
+    //         editor.actions.insertClipboardImages(clipboardImages);
+    //     }
+    //
+    // });
 
     return cm;
 }
\ No newline at end of file