New translations entities.php (French)

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

diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index e41ab15f622ad1386c19f416679a01da1377d8ce..21cf37bb4438d745a3dbbf7225773cf8474a6c83 100644 (file)
--- a/resources/js/components/markdown-editor.js
+++ b/resources/js/components/markdown-editor.js
@@ -1,9 +1,8 @@
 import MarkdownIt from "markdown-it";
 import mdTasksLists from 'markdown-it-task-lists';
 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";
 import Clipboard from "../services/clipboard";
 import {debounce} from "../services/util";

-
+import {patchDomFromHtmlString} from "../services/vdom";

 import DrawIO from "../services/drawio";
 
 class MarkdownEditor {
 import DrawIO from "../services/drawio";
 
 class MarkdownEditor {


@@ -23,13 +22,20 @@ class MarkdownEditor {
 
         this.displayStylesLoaded = false;
         this.input = this.elem.querySelector('textarea');
 
         this.displayStylesLoaded = false;
         this.input = this.elem.querySelector('textarea');

-        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.onMarkdownScroll = this.onMarkdownScroll.bind(this);
 
         const displayLoad = () => {
             this.displayDoc = this.display.contentDocument;

-            this.init();
+            this.init(cmLoadPromise);

         };
 
         if (this.display.contentDocument.readyState === 'complete') {
         };
 
         if (this.display.contentDocument.readyState === 'complete') {


@@ -45,7 +51,7 @@ class MarkdownEditor {
         });
     }
 
         });
     }
 

-    init() {
+    init(cmLoadPromise) {

 
         let lastClick = 0;
 
 
         let lastClick = 0;
 


@@ -98,7 +104,15 @@ class MarkdownEditor {
             toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
         });
 
             toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
         });
 

-        this.codeMirrorSetup();
+        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.listenForBookStackEditorEvents();
 
         // Scroll to text if needed.
         this.listenForBookStackEditorEvents();
 
         // Scroll to text if needed.


@@ -107,29 +121,37 @@ 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.
     updateAndRender() {
         const content = this.cm.getValue();
         this.input.value = content;
     }
 
     // Update the input content and render the display.
     updateAndRender() {
         const content = this.cm.getValue();
         this.input.value = content;

+

         const html = this.markdown.render(content);
         window.$events.emit('editor-html-change', html);
         window.$events.emit('editor-markdown-change', content);
 
         // Set body content
         const html = this.markdown.render(content);
         window.$events.emit('editor-html-change', html);
         window.$events.emit('editor-markdown-change', content);
 
         // Set body content

+        const target = this.getDisplayTarget();

         this.displayDoc.body.className = 'page-content';
         this.displayDoc.body.className = 'page-content';

-        this.displayDoc.body.innerHTML = html;
+        patchDomFromHtmlString(target, html);

 
         // Copy styles from page head and set custom styles for editor
         this.loadStylesIntoDisplay();
     }
 
 
         // Copy styles from page head and set custom styles for editor
         this.loadStylesIntoDisplay();
     }
 

+    getDisplayTarget() {
+        const body = this.displayDoc.body;
+
+        if (body.children.length === 0) {
+            const wrap = document.createElement('div');
+            this.displayDoc.body.append(wrap);
+        }
+
+        return body.children[0];
+    }
+

     loadStylesIntoDisplay() {
         if (this.displayStylesLoaded) return;
         this.displayDoc.documentElement.classList.add('markdown-editor-display');
     loadStylesIntoDisplay() {
         if (this.displayStylesLoaded) return;
         this.displayDoc.documentElement.classList.add('markdown-editor-display');


@@ -158,15 +180,14 @@ class MarkdownEditor {
         topElem.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth'});
     }
 
         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
         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) {
         const extraKeys = {};
         // Insert Image shortcut
         extraKeys[`${metaKey}-Alt-I`] = function(cm) {