Merge branch 'fix-code-block-linefeed' into development

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

diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js
index bae70ad14e97c20beef6bab0990a2ba58ee0aa56..2dd5da410873829a36060659892138597d47fec1 100644 (file)
--- a/resources/js/components/wysiwyg-editor.js
+++ b/resources/js/components/wysiwyg-editor.js
@@ -136,24 +136,20 @@ function codePlugin() {
         const selectedNode = editor.selection.getNode();
 
         if (!elemIsCodeBlock(selectedNode)) {
         const selectedNode = editor.selection.getNode();
 
         if (!elemIsCodeBlock(selectedNode)) {

-            const providedCode = editor.selection.getNode().textContent;
+            const providedCode = editor.selection.getContent({format: 'text'});

             window.components.first('code-editor').open(providedCode, '', (code, lang) => {
                 const wrap = document.createElement('div');
                 wrap.innerHTML = `<pre><code class="language-${lang}"></code></pre>`;
                 wrap.querySelector('code').innerText = code;
 
             window.components.first('code-editor').open(providedCode, '', (code, lang) => {
                 const wrap = document.createElement('div');
                 wrap.innerHTML = `<pre><code class="language-${lang}"></code></pre>`;
                 wrap.querySelector('code').innerText = code;
 

-                editor.formatter.toggle('pre');
-                const node = editor.selection.getNode();
-                editor.dom.setHTML(node, wrap.querySelector('pre').innerHTML);
-                editor.fire('SetContent');
-
-                editor.focus()
+                editor.insertContent(wrap.innerHTML);
+                editor.focus();

             });
             return;
         }
 
             });
             return;
         }
 

-        let lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : '';
-        let currentCode = selectedNode.querySelector('textarea').textContent;
+        const lang = selectedNode.hasAttribute('data-lang') ? selectedNode.getAttribute('data-lang') : '';
+        const currentCode = selectedNode.querySelector('textarea').textContent;

 
         window.components.first('code-editor').open(currentCode, lang, (code, lang) => {
             const editorElem = selectedNode.querySelector('.CodeMirror');
 
         window.components.first('code-editor').open(currentCode, lang, (code, lang) => {
             const editorElem = selectedNode.querySelector('.CodeMirror');


@@ -212,7 +208,7 @@ function codePlugin() {
             showPopup(editor);
         });
 
             showPopup(editor);
         });
 

-        editor.on('SetContent', function () {
+        function parseCodeMirrorInstances() {

 
             // Recover broken codemirror instances
             $('.CodeMirrorContainer').filter((index ,elem) => {
 
             // Recover broken codemirror instances
             $('.CodeMirrorContainer').filter((index ,elem) => {


@@ -225,12 +221,24 @@ function codePlugin() {
                 return elem.contentEditable !== "false";
             });
 
                 return elem.contentEditable !== "false";
             });
 

-            if (!codeSamples.length) return;
+            codeSamples.each((index, elem) => {
+                Code.wysiwygView(elem);
+            });
+        }
+
+        editor.on('init', function() {
+            // Parse code mirror instances on init, but delay a little so this runs after
+            // initial styles are fetched into the editor.

             editor.undoManager.transact(function () {
             editor.undoManager.transact(function () {

-                codeSamples.each((index, elem) => {
-                    Code.wysiwygView(elem);
-                });
+                parseCodeMirrorInstances();

             });
             });

+            // Parsed code mirror blocks when content is set but wait before setting this handler
+            // to avoid any init 'SetContent' events.
+            setTimeout(() => {
+                editor.on('SetContent', () => {
+                    setTimeout(parseCodeMirrorInstances, 100);
+                });
+            }, 200);

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


@@ -271,6 +279,15 @@ function drawIoPlugin(drawioUrl, isDarkMode, pageId, wysiwygComponent) {
         const id = "image-" + Math.random().toString(16).slice(2);
         const loadingImage = window.baseUrl('/loading.gif');
 
         const id = "image-" + Math.random().toString(16).slice(2);
         const loadingImage = window.baseUrl('/loading.gif');
 

+        const handleUploadError = (error) => {
+            if (error.status === 413) {
+                window.$events.emit('error', wysiwygComponent.serverUploadLimitText);
+            } else {
+                window.$events.emit('error', wysiwygComponent.imageUploadErrorText);
+            }
+            console.log(error);
+        };
+

         // Handle updating an existing image
         if (currentNode) {
             DrawIO.close();
         // Handle updating an existing image
         if (currentNode) {
             DrawIO.close();


@@ -280,8 +297,7 @@ function drawIoPlugin(drawioUrl, isDarkMode, pageId, wysiwygComponent) {
                 pageEditor.dom.setAttrib(imgElem, 'src', img.url);
                 pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id);
             } catch (err) {
                 pageEditor.dom.setAttrib(imgElem, 'src', img.url);
                 pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', img.id);
             } catch (err) {

-                window.$events.emit('error', wysiwygComponent.imageUploadErrorText);
-                console.log(err);
+                handleUploadError(err);

             }
             return;
         }
             }
             return;
         }


@@ -295,8 +311,7 @@ function drawIoPlugin(drawioUrl, isDarkMode, pageId, wysiwygComponent) {
                 pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id);
             } catch (err) {
                 pageEditor.dom.remove(id);
                 pageEditor.dom.get(id).parentNode.setAttribute('drawio-diagram', img.id);
             } catch (err) {
                 pageEditor.dom.remove(id);

-                window.$events.emit('error', wysiwygComponent.imageUploadErrorText);
-                console.log(err);
+                handleUploadError(err);

             }
         }, 5);
     }
             }
         }, 5);
     }


@@ -420,9 +435,10 @@ class WysiwygEditor {
         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.isDarkMode = document.documentElement.classList.contains('dark-mode');
 
         this.isDarkMode = document.documentElement.classList.contains('dark-mode');
 

-        this.plugins = "image table textcolor paste link autolink fullscreen code customhr autosave lists codeeditor media";
+        this.plugins = "image imagetools table textcolor paste link autolink fullscreen code customhr autosave lists codeeditor media";

         this.loadPlugins();
 
         this.tinyMceConfig = this.getTinyMceConfig();
         this.loadPlugins();
 
         this.tinyMceConfig = this.getTinyMceConfig();


@@ -543,8 +559,9 @@ class WysiwygEditor {
                         }
 
                         // Replace the actively selected content with the linked image
                         }
 
                         // Replace the actively selected content with the linked image

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

                         let html = `<a href="${image.url}" target="_blank">`;
                         let html = `<a href="${image.url}" target="_blank">`;

-                        html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
+                        html += `<img src="${imageUrl}" alt="${image.name}">`;

                         html += '</a>';
                         win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
                     }, 'gallery');
                         html += '</a>';
                         win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
                     }, 'gallery');


@@ -703,8 +720,9 @@ class WysiwygEditor {
                     tooltip: 'Insert an image',
                     onclick: function () {
                         window.ImageManager.show(function (image) {
                     tooltip: 'Insert an image',
                     onclick: function () {
                         window.ImageManager.show(function (image) {

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

                             let html = `<a href="${image.url}" target="_blank">`;
                             let html = `<a href="${image.url}" target="_blank">`;

-                            html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
+                            html += `<img src="${imageUrl}" alt="${image.name}">`;

                             html += '</a>';
                             editor.execCommand('mceInsertContent', false, html);
                         }, 'gallery');
                             html += '</a>';
                             editor.execCommand('mceInsertContent', false, html);
                         }, 'gallery');