BookStack Code Mirror - bookstack/blob - resources/js/markdown/codemirror.js

   1 import {provide as provideShortcuts} from "./shortcuts";
   2 import {debounce} from "../services/util";
   3 import Clipboard from "../services/clipboard";
   4
   5 /**
   6  * Initiate the codemirror instance for the markdown editor.
   7  * @param {MarkdownEditor} editor
   8  * @returns {Promise<void>}
   9  */
  10 export async function init(editor) {
  11     const Code = await window.importVersioned('code');
  12
  13     /**
  14      * @param {ViewUpdate} v
  15      */
  16     function onViewUpdate(v) {
  17         if (v.docChanged) {
  18             editor.actions.updateAndRender();
  19         }
  20     }
  21
  22     const onScrollDebounced = debounce(editor.actions.syncDisplayPosition.bind(editor.actions), 100, false);
  23     let syncActive = editor.settings.get('scrollSync');
  24     editor.settings.onChange('scrollSync', val => syncActive = val);
  25
  26     const domEventHandlers = {
  27         // Handle scroll to sync display view
  28         scroll: (event) => syncActive && onScrollDebounced(event)
  29     }
  30
  31     const cm = Code.markdownEditor(editor.config.inputEl, onViewUpdate, domEventHandlers);
  32     window.cm = cm;
  33
  34     // Will force to remain as ltr for now due to issues when HTML is in editor.
  35     // TODO
  36     // cm.setOption('direction', 'ltr');
  37     // Register shortcuts
  38     // TODO
  39     // cm.setOption('extraKeys', provideShortcuts(editor, Code.getMetaKey()));
  40
  41
  42     // Handle image paste
  43     // TODO
  44     // cm.on('paste', (cm, event) => {
  45     //     const clipboard = new Clipboard(event.clipboardData || event.dataTransfer);
  46     //
  47     //     // Don't handle the event ourselves if no items exist of contains table-looking data
  48     //     if (!clipboard.hasItems() || clipboard.containsTabularData()) {
  49     //         return;
  50     //     }
  51     //
  52     //     const images = clipboard.getImages();
  53     //     for (const image of images) {
  54     //         editor.actions.uploadImage(image);
  55     //     }
  56     // });
  57
  58     // Handle image & content drag n drop
  59     // TODO
  60     // cm.on('drop', (cm, event) => {
  61     //
  62     //     const templateId = event.dataTransfer.getData('bookstack/template');
  63     //     if (templateId) {
  64     //         event.preventDefault();
  65     //         editor.actions.insertTemplate(templateId, event.pageX, event.pageY);
  66     //     }
  67     //
  68     //     const clipboard = new Clipboard(event.dataTransfer);
  69     //     const clipboardImages = clipboard.getImages();
  70     //     if (clipboardImages.length > 0) {
  71     //         event.stopPropagation();
  72     //         event.preventDefault();
  73     //         editor.actions.insertClipboardImages(clipboardImages);
  74     //     }
  75     //
  76     // });
  77
  78     return cm;
  79 }