X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/572037ef1fd1e778c33c609ef295c50de33a0652..refs/heads/development:/resources/js/markdown/codemirror.js

diff --git a/resources/js/markdown/codemirror.js b/resources/js/markdown/codemirror.js
index dad999e7a..664767605 100644
--- 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.
@@ -21,59 +21,59 @@ export async function init(editor) {
 
     const onScrollDebounced = debounce(editor.actions.syncDisplayPosition.bind(editor.actions), 100, false);
     let syncActive = editor.settings.get('scrollSync');
-    editor.settings.onChange('scrollSync', val => syncActive = val);
+    editor.settings.onChange('scrollSync', val => {
+        syncActive = val;
+    });
 
     const domEventHandlers = {
         // Handle scroll to sync display view
-        scroll: (event) => syncActive && onScrollDebounced(event)
-    }
+        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 cm = Code.markdownEditor(editor.config.inputEl, onViewUpdate, domEventHandlers);
-    window.cm = cm;
+            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);
 
-    // 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()));
+            // 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 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);
-    //     }
-    // });
+    const cm = Code.markdownEditor(
+        editor.config.inputEl,
+        onViewUpdate,
+        domEventHandlers,
+        provideKeyBindings(editor),
+    );
 
-    // 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);
-    //     }
-    //
-    // });
+    // Add editor view to window for easy access/debugging.
+    // Not part of official API/Docs
+    window.mdEditorView = cm;
 
     return cm;
-}
\ No newline at end of file
+}