Layout: Added scroll fade to the sidebars

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

diff --git a/resources/js/markdown/codemirror.js b/resources/js/markdown/codemirror.js
index 8724a23c89e33a04b8e0b700dd6395eeb9beaad0..664767605b8a91b33125512efc96476068da4c32 100644 (file)
--- a/resources/js/markdown/codemirror.js
+++ b/resources/js/markdown/codemirror.js
@@ -1,6 +1,6 @@
-import {provide as provideShortcuts} from "./shortcuts";
-import {debounce} from "../services/util";
-import Clipboard from "../services/clipboard";
+import {provideKeyBindings} from './shortcuts';
+import {debounce} from '../services/util.ts';
+import {Clipboard} from '../services/clipboard.ts';

 
 /**
  * Initiate the codemirror instance for the markdown editor.
 
 /**
  * Initiate the codemirror instance for the markdown editor.


@@ -9,62 +9,71 @@ import Clipboard from "../services/clipboard";
  */
 export async function init(editor) {
     const Code = await window.importVersioned('code');
  */
 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);
     let syncActive = editor.settings.get('scrollSync');
     const onScrollDebounced = debounce(editor.actions.syncDisplayPosition.bind(editor.actions), 100, false);
     let syncActive = editor.settings.get('scrollSync');

-    editor.settings.onChange('scrollSync', val => syncActive = val);
-    cm.on('scroll', instance => {
-        if (syncActive) {
-            onScrollDebounced(instance);
-        }
+    editor.settings.onChange('scrollSync', val => {
+        syncActive = val;

     });
 
     });
 

-    // Handle image paste
-    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 domEventHandlers = {
+        // Handle scroll to sync display view
+        scroll: event => syncActive && onScrollDebounced(event),
+        // Handle image & content drag n drop
+        drop: event => {
+            const templateId = event.dataTransfer.getData('bookstack/template');
+            if (templateId) {
+                event.preventDefault();
+                editor.actions.insertTemplate(templateId, event.pageX, event.pageY);
+            }

 
 

-        const images = clipboard.getImages();
-        for (const image of images) {
-            editor.actions.uploadImage(image);
-        }
-    });
+            const clipboard = new Clipboard(event.dataTransfer);
+            const clipboardImages = clipboard.getImages();
+            if (clipboardImages.length > 0) {
+                event.stopPropagation();
+                event.preventDefault();
+                editor.actions.insertClipboardImages(clipboardImages, event.pageX, event.pageY);
+            }
+        },
+        // Handle dragover event to allow as drop-target in chrome
+        dragover: event => {
+            event.preventDefault();
+        },
+        // Handle image paste
+        paste: event => {
+            const clipboard = new Clipboard(event.clipboardData || event.dataTransfer);

 
 

-    // Handle image & content drag n drop
-    cm.on('drop', (cm, event) => {
+            // Don't handle the event ourselves if no items exist of contains table-looking data
+            if (!clipboard.hasItems() || clipboard.containsTabularData()) {
+                return;
+            }

 
 

-        const templateId = event.dataTransfer.getData('bookstack/template');
-        if (templateId) {
-            event.preventDefault();
-            editor.actions.insertTemplate(templateId, event.pageX, event.pageY);
-        }
+            const images = clipboard.getImages();
+            for (const image of images) {
+                editor.actions.uploadImage(image);
+            }
+        },
+    };

 
 

-        const clipboard = new Clipboard(event.dataTransfer);
-        const clipboardImages = clipboard.getImages();
-        if (clipboardImages.length > 0) {
-            event.stopPropagation();
-            event.preventDefault();
-            editor.actions.insertClipboardImages(clipboardImages);
-        }
+    const cm = Code.markdownEditor(
+        editor.config.inputEl,
+        onViewUpdate,
+        domEventHandlers,
+        provideKeyBindings(editor),
+    );

 
 

-    });
+    // Add editor view to window for easy access/debugging.
+    // Not part of official API/Docs
+    window.mdEditorView = cm;

 
     return cm;
 
     return cm;

-}
\ No newline at end of file
+}