fix(wysiwyg): preserves line feeds in code block mode

[bookstack] / resources / js / components / markdown-editor.js

diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index 78581ec447f5cf099d64d681c976295d3c6875af..a14047d2f430155083b614773abe1a05f246bb38 100644 (file)
--- a/resources/js/components/markdown-editor.js
+++ b/resources/js/components/markdown-editor.js
@@ -14,6 +14,7 @@ class MarkdownEditor {
         this.pageId = this.$opts.pageId;
         this.textDirection = this.$opts.textDirection;
         this.imageUploadErrorText = this.$opts.imageUploadErrorText;
         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.markdown = new MarkdownIt({html: true});
         this.markdown.use(mdTasksLists, {label: true});


@@ -111,6 +112,11 @@ class MarkdownEditor {
         if (scrollText) {
             this.scrollToText(scrollText);
         }
         if (scrollText) {
             this.scrollToText(scrollText);
         }

+
+        // Refresh CodeMirror on container resize
+        const resizeDebounced = debounce(() => code.updateLayout(this.cm), 100, false);
+        const observer = new ResizeObserver(resizeDebounced);
+        observer.observe(this.elem);

     }
 
     // Update the input content and render the display.
     }
 
     // Update the input content and render the display.


@@ -394,8 +400,9 @@ class MarkdownEditor {
     actionInsertImage() {
         const cursorPos = this.cm.getCursor('from');
         window.ImageManager.show(image => {
     actionInsertImage() {
         const cursorPos = this.cm.getCursor('from');
         window.ImageManager.show(image => {

+            const imageUrl = image.thumbs.display || image.url;

             let selectedText = this.cm.getSelection();
             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);
             this.cm.focus();
             this.cm.replaceSelection(newText);
             this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length);


@@ -446,8 +453,7 @@ class MarkdownEditor {
                 this.insertDrawing(resp.data, cursorPos);
                 DrawIO.close();
             }).catch(err => {
                 this.insertDrawing(resp.data, cursorPos);
                 DrawIO.close();
             }).catch(err => {

-                window.$events.emit('error', trans('errors.image_upload_error'));
-                console.log(err);
+                this.handleDrawingUploadError(err);

             });
         });
     }
             });
         });
     }


@@ -491,12 +497,20 @@ class MarkdownEditor {
                 this.cm.focus();
                 DrawIO.close();
             }).catch(err => {
                 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');
     // Make the editor full screen
     actionFullScreen() {
         const alreadyFullscreen = this.elem.classList.contains('fullscreen');