Merge branch 'development' of github.com:BookStackApp/BookStack into development

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

diff --git a/resources/js/markdown/codemirror.js b/resources/js/markdown/codemirror.js
index cd620137d5accf6103d7384b9390f876f6d0cf02..664767605b8a91b33125512efc96476068da4c32 100644 (file)
--- a/resources/js/markdown/codemirror.js
+++ b/resources/js/markdown/codemirror.js
@@ -1,6 +1,6 @@
-import {provideKeyBindings} 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.


@@ -21,12 +21,48 @@ export async function init(editor) {
 
     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);
+    editor.settings.onChange('scrollSync', val => {
+        syncActive = val;
+    });

 
     const domEventHandlers = {
         // Handle scroll to sync display view
 
     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 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);
+
+            // 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,
 
     const cm = Code.markdownEditor(
         editor.config.inputEl,


@@ -34,48 +70,10 @@ export async function init(editor) {
         domEventHandlers,
         provideKeyBindings(editor),
     );
         domEventHandlers,
         provideKeyBindings(editor),
     );

-    window.cm = cm;
-
-    // Will force to remain as ltr for now due to issues when HTML is in editor.
-    // TODO
-    // cm.setOption('direction', 'ltr');
-
-
-    // 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);
-    //     }
-    //
-    // });
+    // 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
+}