Revised role index list to align with user list

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

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


@@ -127,18 +127,31 @@ class MarkdownEditor {
     updateAndRender() {
         const content = this.cm.getValue();
         this.input.value = content;
     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');


@@ -198,13 +211,15 @@ class MarkdownEditor {
         extraKeys[`${metaKey}-3`] = cm => {replaceLineStart('####');};
         extraKeys[`${metaKey}-4`] = cm => {replaceLineStart('#####');};
         extraKeys[`${metaKey}-5`] = cm => {replaceLineStart('');};
         extraKeys[`${metaKey}-3`] = cm => {replaceLineStart('####');};
         extraKeys[`${metaKey}-4`] = cm => {replaceLineStart('#####');};
         extraKeys[`${metaKey}-5`] = cm => {replaceLineStart('');};

-        extraKeys[`${metaKey}-d`] = cm => {replaceLineStart('');};
+        extraKeys[`${metaKey}-D`] = cm => {replaceLineStart('');};

         extraKeys[`${metaKey}-6`] = cm => {replaceLineStart('>');};
         extraKeys[`${metaKey}-6`] = cm => {replaceLineStart('>');};

-        extraKeys[`${metaKey}-q`] = cm => {replaceLineStart('>');};
+        extraKeys[`${metaKey}-Q`] = cm => {replaceLineStart('>');};

         extraKeys[`${metaKey}-7`] = cm => {wrapSelection('\n```\n', '\n```');};
         extraKeys[`${metaKey}-8`] = cm => {wrapSelection('`', '`');};
         extraKeys[`Shift-${metaKey}-E`] = cm => {wrapSelection('`', '`');};
         extraKeys[`${metaKey}-9`] = cm => {wrapSelection('<p class="callout info">', '</p>');};
         extraKeys[`${metaKey}-7`] = cm => {wrapSelection('\n```\n', '\n```');};
         extraKeys[`${metaKey}-8`] = cm => {wrapSelection('`', '`');};
         extraKeys[`Shift-${metaKey}-E`] = cm => {wrapSelection('`', '`');};
         extraKeys[`${metaKey}-9`] = cm => {wrapSelection('<p class="callout info">', '</p>');};

+        extraKeys[`${metaKey}-P`] = cm => {replaceLineStart('-')}
+        extraKeys[`${metaKey}-O`] = cm => {replaceLineStartForOrderedList()}

         cm.setOption('extraKeys', extraKeys);
 
         // Update data on content change
         cm.setOption('extraKeys', extraKeys);
 
         // Update data on content change


@@ -353,6 +368,19 @@ class MarkdownEditor {
             cm.setSelections([selections]);
         }
 
             cm.setSelections([selections]);
         }
 

+        function replaceLineStartForOrderedList() {
+            const cursor = cm.getCursor();
+            const prevLineContent = cm.getLine(cursor.line - 1) || '';
+            const listMatch = prevLineContent.match(/^(\s*)(\d)([).])\s/) || [];
+
+            const number = (Number(listMatch[2]) || 0) + 1;
+            const whiteSpace = listMatch[1] || '';
+            const listMark = listMatch[3] || '.'
+
+            const prefix = `${whiteSpace}${number}${listMark}`;
+            return replaceLineStart(prefix);
+        }
+

         // Handle image upload and add image into markdown content
         function uploadImage(file) {
             if (file === null || file.type.indexOf('image') !== 0) return;
         // Handle image upload and add image into markdown content
         function uploadImage(file) {
             if (file === null || file.type.indexOf('image') !== 0) return;