BookStack Code Mirror - bookstack/blob - resources/js/components/markdown-editor.js

   1 import {debounce} from "../services/util";
   2 import {Component} from "./component";
   3 import {init as initEditor} from "../markdown/editor";
   4
   5 export class MarkdownEditor extends Component {
   6
   7     setup() {
   8         this.elem = this.$el;
   9
  10         this.pageId = this.$opts.pageId;
  11         this.textDirection = this.$opts.textDirection;
  12         this.imageUploadErrorText = this.$opts.imageUploadErrorText;
  13         this.serverUploadLimitText = this.$opts.serverUploadLimitText;
  14
  15         this.display = this.$refs.display;
  16         this.input = this.$refs.input;
  17         this.settingContainer = this.$refs.settingContainer;
  18
  19         this.editor = null;
  20         initEditor({
  21             pageId: this.pageId,
  22             container: this.elem,
  23             displayEl: this.display,
  24             inputEl: this.input,
  25             drawioUrl: this.getDrawioUrl(),
  26             text: {
  27                 serverUploadLimit: this.serverUploadLimitText,
  28                 imageUploadError: this.imageUploadErrorText,
  29             }
  30         }).then(editor => {
  31             this.editor = editor;
  32             this.setupListeners();
  33             this.emitEditorEvents();
  34             this.scrollToTextIfNeeded();
  35             this.editor.actions.updateAndRender();
  36         });
  37     }
  38
  39     emitEditorEvents() {
  40         window.$events.emitPublic(this.elem, 'editor-markdown::setup', {
  41             markdownIt: this.editor.markdown.getRenderer(),
  42             displayEl: this.display,
  43             codeMirrorInstance: this.editor.cm,
  44         });
  45     }
  46
  47     setupListeners() {
  48
  49         // Button actions
  50         this.elem.addEventListener('click', event => {
  51             let button = event.target.closest('button[data-action]');
  52             if (button === null) return;
  53
  54             const action = button.getAttribute('data-action');
  55             if (action === 'insertImage') this.editor.actions.insertImage();
  56             if (action === 'insertLink') this.editor.actions.showLinkSelector();
  57             if (action === 'insertDrawing' && (event.ctrlKey || event.metaKey)) {
  58                 this.editor.actions.showImageManager();
  59                 return;
  60             }
  61             if (action === 'insertDrawing') this.editor.actions.startDrawing();
  62             if (action === 'fullscreen') this.editor.actions.fullScreen();
  63         });
  64
  65         // Mobile section toggling
  66         this.elem.addEventListener('click', event => {
  67             const toolbarLabel = event.target.closest('.editor-toolbar-label');
  68             if (!toolbarLabel) return;
  69
  70             const currentActiveSections = this.elem.querySelectorAll('.markdown-editor-wrap');
  71             for (const activeElem of currentActiveSections) {
  72                 activeElem.classList.remove('active');
  73             }
  74
  75             toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
  76         });
  77
  78         // Setting changes
  79         this.settingContainer.addEventListener('change', e => {
  80             const actualInput = e.target.parentNode.querySelector('input[type="hidden"]');
  81             const name = actualInput.getAttribute('name');
  82             const value = actualInput.getAttribute('value');
  83             window.$http.patch('/preferences/update-boolean', {name, value});
  84             // TODO - Update state locally
  85         });
  86
  87         // Refresh CodeMirror on container resize
  88         const resizeDebounced = debounce(() => this.editor.cm.refresh(), 100, false);
  89         const observer = new ResizeObserver(resizeDebounced);
  90         observer.observe(this.elem);
  91     }
  92
  93     scrollToTextIfNeeded() {
  94         const queryParams = (new URL(window.location)).searchParams;
  95         const scrollText = queryParams.get('content-text');
  96         if (scrollText) {
  97             this.editor.actions.scrollToText(scrollText);
  98         }
  99     }
 100
 101     /**
 102      * Get the URL for the configured drawio instance.
 103      * @returns {String}
 104      */
 105     getDrawioUrl() {
 106         const drawioAttrEl = document.querySelector('[drawio-url]');
 107         if (!drawioAttrEl) {
 108             return '';
 109         }
 110
 111         return drawioAttrEl.getAttribute('drawio-url') || '';
 112     }
 113
 114 }