X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/a6633642232efd164d4708967ab59e498fbff896..refs/pull/3452/head:/resources/js/components/markdown-editor.js

diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index bd107f2bf..3f9dbeb69 100644
--- a/resources/js/components/markdown-editor.js
+++ b/resources/js/components/markdown-editor.js
@@ -1,6 +1,5 @@
 import MarkdownIt from "markdown-it";
 import mdTasksLists from 'markdown-it-task-lists';
-import code from '../services/code';
 import Clipboard from "../services/clipboard";
 import {debounce} from "../services/util";
 
@@ -14,53 +13,48 @@ class MarkdownEditor {
         this.pageId = this.$opts.pageId;
         this.textDirection = this.$opts.textDirection;
         this.imageUploadErrorText = this.$opts.imageUploadErrorText;
+        this.serverUploadLimitText = this.$opts.serverUploadLimitText;
 
         this.markdown = new MarkdownIt({html: true});
         this.markdown.use(mdTasksLists, {label: true});
 
-        this.display = this.elem.querySelector('.markdown-display');
+        this.display = this.$refs.display;
+        this.input = this.$refs.input;
 
-        this.displayStylesLoaded = false;
-        this.input = this.elem.querySelector('textarea');
-        this.htmlInput = this.elem.querySelector('input[name=html]');
-        this.cm = code.markdownEditor(this.input);
+        this.cm = null;
+        this.Code = null;
+        const cmLoadPromise = window.importVersioned('code').then(Code => {
+            this.cm = Code.markdownEditor(this.input);
+            this.Code = Code;
+            return this.cm;
+        });
 
         this.onMarkdownScroll = this.onMarkdownScroll.bind(this);
-
-        const displayLoad = () => {
-            this.displayDoc = this.display.contentDocument;
-            this.init();
-        };
-
-        if (this.display.contentDocument.readyState === 'complete') {
-            displayLoad();
-        } else {
-            this.display.addEventListener('load', displayLoad.bind(this));
-        }
-
         window.$events.emitPublic(this.elem, 'editor-markdown::setup', {
             markdownIt: this.markdown,
             displayEl: this.display,
             codeMirrorInstance: this.cm,
         });
+
+        this.init(cmLoadPromise);
     }
 
-    init() {
+    init(cmLoadPromise) {
 
         let lastClick = 0;
 
         // Prevent markdown display link click redirect
-        this.displayDoc.addEventListener('click', event => {
-            let isDblClick = Date.now() - lastClick < 300;
+        this.display.addEventListener('click', event => {
+            const isDblClick = Date.now() - lastClick < 300;
 
-            let link = event.target.closest('a');
+            const link = event.target.closest('a');
             if (link !== null) {
                 event.preventDefault();
                 window.open(link.getAttribute('href'));
                 return;
             }
 
-            let drawing = event.target.closest('[drawio-diagram]');
+            const drawing = event.target.closest('[drawio-diagram]');
             if (drawing !== null && isDblClick) {
                 this.actionEditDrawing(drawing);
                 return;
@@ -71,10 +65,10 @@ class MarkdownEditor {
 
         // Button actions
         this.elem.addEventListener('click', event => {
-            let button = event.target.closest('button[data-action]');
+            const button = event.target.closest('button[data-action]');
             if (button === null) return;
 
-            let action = button.getAttribute('data-action');
+            const action = button.getAttribute('data-action');
             if (action === 'insertImage') this.actionInsertImage();
             if (action === 'insertLink') this.actionShowLinkSelector();
             if (action === 'insertDrawing' && (event.ctrlKey || event.metaKey)) {
@@ -98,12 +92,15 @@ class MarkdownEditor {
             toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
         });
 
-        window.$events.listen('editor-markdown-update', value => {
-            this.cm.setValue(value);
-            this.updateAndRender();
+        cmLoadPromise.then(cm => {
+            this.codeMirrorSetup(cm);
+
+            // Refresh CodeMirror on container resize
+            const resizeDebounced = debounce(() => this.Code.updateLayout(cm), 100, false);
+            const observer = new ResizeObserver(resizeDebounced);
+            observer.observe(this.elem);
         });
 
-        this.codeMirrorSetup();
         this.listenForBookStackEditorEvents();
 
         // Scroll to text if needed.
@@ -123,51 +120,25 @@ class MarkdownEditor {
         window.$events.emit('editor-markdown-change', content);
 
         // Set body content
-        this.displayDoc.body.className = 'page-content';
-        this.displayDoc.body.innerHTML = html;
-        this.htmlInput.value = html;
-
-        // Copy styles from page head and set custom styles for editor
-        this.loadStylesIntoDisplay();
-    }
-
-    loadStylesIntoDisplay() {
-        if (this.displayStylesLoaded) return;
-        this.displayDoc.documentElement.classList.add('markdown-editor-display');
-        // Set display to be dark mode if parent is
-
-        if (document.documentElement.classList.contains('dark-mode')) {
-            this.displayDoc.documentElement.style.backgroundColor = '#222';
-            this.displayDoc.documentElement.classList.add('dark-mode');
-        }
-
-        this.displayDoc.head.innerHTML = '';
-        const styles = document.head.querySelectorAll('style,link[rel=stylesheet]');
-        for (let style of styles) {
-            const copy = style.cloneNode(true);
-            this.displayDoc.head.appendChild(copy);
-        }
-
-        this.displayStylesLoaded = true;
+        this.display.innerHTML = html;
     }
 
     onMarkdownScroll(lineCount) {
-        const elems = this.displayDoc.body.children;
+        const elems = this.display.children;
         if (elems.length <= lineCount) return;
 
         const topElem = (lineCount === -1) ? elems[elems.length-1] : elems[lineCount];
         topElem.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth'});
     }
 
-    codeMirrorSetup() {
-        const cm = this.cm;
+    codeMirrorSetup(cm) {
         const context = this;
 
         // Text direction
         // cm.setOption('direction', this.textDirection);
         cm.setOption('direction', 'ltr'); // Will force to remain as ltr for now due to issues when HTML is in editor.
         // Custom key commands
-        let metaKey = code.getMetaKey();
+        let metaKey = this.Code.getMetaKey();
         const extraKeys = {};
         // Insert Image shortcut
         extraKeys[`${metaKey}-Alt-I`] = function(cm) {
@@ -310,7 +281,7 @@ class MarkdownEditor {
             let cursor = cm.getCursor();
             let lineContent = cm.getLine(cursor.line);
             let lineLen = lineContent.length;
-            let newLineContent = lineContent;
+            let newLineContent;
 
             if (lineContent.indexOf(start) === 0 && lineContent.slice(-end.length) === end) {
                 newLineContent = lineContent.slice(start.length, lineContent.length - end.length);
@@ -326,9 +297,9 @@ class MarkdownEditor {
             let selection = cm.getSelection();
             if (selection === '') return wrapLine(start, end);
 
-            let newSelection = selection;
+            let newSelection;
             let frontDiff = 0;
-            let endDiff = 0;
+            let endDiff;
 
             if (selection.indexOf(start) === 0 && selection.slice(-end.length) === end) {
                 newSelection = selection.slice(start.length, selection.length - end.length);
@@ -396,8 +367,9 @@ class MarkdownEditor {
     actionInsertImage() {
         const cursorPos = this.cm.getCursor('from');
         window.ImageManager.show(image => {
+            const imageUrl = image.thumbs.display || image.url;
             let selectedText = this.cm.getSelection();
-            let newText = "[![" + (selectedText || image.name) + "](" + image.thumbs.display + ")](" + image.url + ")";
+            let newText = "[![" + (selectedText || image.name) + "](" + imageUrl + ")](" + image.url + ")";
             this.cm.focus();
             this.cm.replaceSelection(newText);
             this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);
@@ -437,10 +409,10 @@ class MarkdownEditor {
 
         DrawIO.show(url,() => {
             return Promise.resolve('');
-        }, (pngData) => {
+        }, (drawingData) => {
 
             const data = {
-                image: pngData,
+                image: drawingData,
                 uploaded_to: Number(this.pageId),
             };
 
@@ -448,14 +420,13 @@ class MarkdownEditor {
                 this.insertDrawing(resp.data, cursorPos);
                 DrawIO.close();
             }).catch(err => {
-                window.$events.emit('error', trans('errors.image_upload_error'));
-                console.log(err);
+                this.handleDrawingUploadError(err);
             });
         });
     }
 
     insertDrawing(image, originalCursor) {
-        const newText = `<div drawio-diagram="${image.id}"><img src="${image.url}"></div>`;
+        const newText = DrawIO.buildDrawingContentHtml(image);
         this.cm.focus();
         this.cm.replaceSelection(newText);
         this.cm.setCursor(originalCursor.line, originalCursor.ch + newText.length);
@@ -473,32 +444,41 @@ class MarkdownEditor {
 
         DrawIO.show(drawioUrl, () => {
             return DrawIO.load(drawingId);
-        }, (pngData) => {
+        }, (drawingData) => {
 
             let data = {
-                image: pngData,
+                image: drawingData,
                 uploaded_to: Number(this.pageId),
             };
 
             window.$http.post("/images/drawio", data).then(resp => {
-                let newText = `<div drawio-diagram="${resp.data.id}"><img src="${resp.data.url}"></div>`;
-                let newContent = this.cm.getValue().split('\n').map(line => {
-                    if (line.indexOf(`drawio-diagram="${drawingId}"`) !== -1) {
-                        return newText;
-                    }
-                    return line;
+                const image = resp.data;
+                const newText = DrawIO.buildDrawingContentHtml(image);
+
+                const newContent = this.cm.getValue().split('\n').map(line => {
+                    const isDrawing = line.includes(`drawio-diagram="${drawingId}"`);
+                    return isDrawing ? newText : line;
                 }).join('\n');
+
                 this.cm.setValue(newContent);
                 this.cm.setCursor(cursorPos);
                 this.cm.focus();
                 DrawIO.close();
             }).catch(err => {
-                window.$events.emit('error', this.imageUploadErrorText);
-                console.log(err);
+                this.handleDrawingUploadError(err);
             });
         });
     }
 
+    handleDrawingUploadError(error) {
+        if (error.status === 413) {
+            window.$events.emit('error', this.serverUploadLimitText);
+        } else {
+            window.$events.emit('error', this.imageUploadErrorText);
+        }
+        console.log(error);
+    }
+
     // Make the editor full screen
     actionFullScreen() {
         const alreadyFullscreen = this.elem.classList.contains('fullscreen');