]> BookStack Code Mirror - bookstack/blobdiff - resources/js/markdown/codemirror.ts
MD Editor: Added plaintext input implementation
[bookstack] / resources / js / markdown / codemirror.ts
index 1b54c58196b4372fa27ded2b70098bb088c4aa0a..82aeb11418f3c3141e947e6ae25227d0c1c42488 100644 (file)
@@ -1,72 +1,19 @@
 import {provideKeyBindings} from './shortcuts';
-import {debounce} from '../services/util';
-import {Clipboard} from '../services/clipboard';
 import {EditorView, ViewUpdate} from "@codemirror/view";
 import {MarkdownEditor} from "./index.mjs";
 import {CodeModule} from "../global";
+import {MarkdownEditorEventMap} from "./dom-handlers";
 
 /**
- * Initiate the codemirror instance for the MarkDown editor.
+ * Initiate the codemirror instance for the Markdown editor.
  */
-export function init(editor: MarkdownEditor, Code: CodeModule): EditorView {
+export function init(editor: MarkdownEditor, Code: CodeModule, domEventHandlers: MarkdownEditorEventMap): EditorView {
     function onViewUpdate(v: ViewUpdate) {
         if (v.docChanged) {
             editor.actions.updateAndRender();
         }
     }
 
-    const onScrollDebounced = debounce(editor.actions.syncDisplayPosition.bind(editor.actions), 100, false);
-    let syncActive = editor.settings.get('scrollSync');
-    editor.settings.onChange('scrollSync', val => {
-        syncActive = val;
-    });
-
-    const domEventHandlers = {
-        // Handle scroll to sync display view
-        scroll: (event: Event) => syncActive && onScrollDebounced(event),
-        // Handle image & content drag n drop
-        drop: (event: DragEvent) => {
-            if (!event.dataTransfer) {
-                return;
-            }
-
-            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: DragEvent) => {
-            event.preventDefault();
-        },
-        // Handle image paste
-        paste: (event: ClipboardEvent) => {
-            if (!event.clipboardData) {
-                return;
-            }
-
-            const clipboard = new Clipboard(event.clipboardData);
-
-            // 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,