Got markdown editor barely functional

Updated content sync and preview scoll sync to work.
Many features commented out until they can be updated.

diff --git a/package.json b/package.json
index 6b6dbbe46b43aedc689b280c89fcc3628ee6e7ba..9ee57afa5fa5ea9f421bf5d62a0db79271f4377a 100644 (file)
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "build:css:watch": "sass ./resources/sass:./public/dist --watch --embed-sources",
     "build:css:production": "sass ./resources/sass:./public/dist -s compressed",
     "build:js:dev": "node dev/build/esbuild.js",
     "build:css:watch": "sass ./resources/sass:./public/dist --watch --embed-sources",
     "build:css:production": "sass ./resources/sass:./public/dist -s compressed",
     "build:js:dev": "node dev/build/esbuild.js",

-    "build:js:watch": "chokidar --initial \"./resources/**/*.js\" -c \"npm run build:js:dev\"",
+    "build:js:watch": "chokidar --initial \"./resources/**/*.js\" \"./resources/**/*.mjs\" -c \"npm run build:js:dev\"",

     "build:js:production": "node dev/build/esbuild.js production",
     "build": "npm-run-all --parallel build:*:dev",
     "production": "npm-run-all --parallel build:*:production",
     "build:js:production": "node dev/build/esbuild.js production",
     "build": "npm-run-all --parallel build:*:dev",
     "production": "npm-run-all --parallel build:*:production",

diff --git a/resources/js/code/index.mjs b/resources/js/code/index.mjs
index 6ef6599949811c5e3b16c5c7f2a65121fc8a6c1f..6cad052f42583cab397b72d3086a67e69d60f4ca 100644 (file)
--- a/resources/js/code/index.mjs
+++ b/resources/js/code/index.mjs
@@ -2,7 +2,7 @@ import {EditorView} from "@codemirror/view"
 import Clipboard from "clipboard/dist/clipboard.min";
 
 // Modes
 import Clipboard from "clipboard/dist/clipboard.min";
 
 // Modes

-import {viewer} from "./setups.js";
+import {viewer, editor} from "./setups.js";

 import {createView, updateViewLanguage} from "./views.js";
 
 /**
 import {createView, updateViewLanguage} from "./views.js";
 
 /**


@@ -180,25 +180,31 @@ export function updateLayout(cmInstance) {
 /**
  * Get a CodeMirror instance to use for the markdown editor.
  * @param {HTMLElement} elem
 /**
  * Get a CodeMirror instance to use for the markdown editor.
  * @param {HTMLElement} elem

+ * @param {function} onChange
+ * @param {object} domEventHandlers

  * @returns {*}
  */
  * @returns {*}
  */

-export function markdownEditor(elem) {
+export function markdownEditor(elem, onChange, domEventHandlers) {

     const content = elem.textContent;
     const content = elem.textContent;

-    const config = {
-        value: content,
-        mode: "markdown",
-        lineNumbers: true,
-        lineWrapping: true,
-        theme: getTheme(),
-        scrollPastEnd: true,
-    };

 
 

-    window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
+    // TODO - Change to pass something else that's useful, probably extension array?
+    // window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});

 
 

-    return CodeMirror(function (elt) {
-        elem.parentNode.insertBefore(elt, elem);
-        elem.style.display = 'none';
-    }, config);
+    const ev = createView({
+        parent: elem.parentNode,
+        doc: content,
+        extensions: [
+            ...editor('markdown'),
+            EditorView.updateListener.of((v) => {
+                onChange(v);
+            }),
+            EditorView.domEventHandlers(domEventHandlers),
+        ],
+    });
+
+    elem.style.display = 'none';
+
+    return ev;

 }
 
 /**
 }
 
 /**


@@ -206,6 +212,7 @@ export function markdownEditor(elem) {
  * @returns {string}
  */
 export function getMetaKey() {
  * @returns {string}
  */
 export function getMetaKey() {

-    let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
+    // TODO - Redo, Is needed? No CodeMirror instance to use.
+    const mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;

     return mac ? "Cmd" : "Ctrl";
 }
\ No newline at end of file
     return mac ? "Cmd" : "Ctrl";
 }
\ No newline at end of file

diff --git a/resources/js/code/setups.js b/resources/js/code/setups.js
index e1a150856f8236f4d6200db44888737d86a5770d..00366ee5eaaf599b648fbc0b5ba73ec511f6dfb0 100644 (file)
--- a/resources/js/code/setups.js
+++ b/resources/js/code/setups.js
@@ -1,12 +1,12 @@
 
 

-import {keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor,
+import {EditorView, keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor,

     rectangularSelection, lineNumbers, highlightActiveLineGutter} from "@codemirror/view"
     rectangularSelection, lineNumbers, highlightActiveLineGutter} from "@codemirror/view"

-import {defaultHighlightStyle, syntaxHighlighting, bracketMatching,
-     foldKeymap} from "@codemirror/language"
+import {syntaxHighlighting, bracketMatching} from "@codemirror/language"

 import {defaultKeymap, history, historyKeymap} from "@codemirror/commands"
 import {EditorState} from "@codemirror/state"
 
 import {defaultLight} from "./themes";
 import {defaultKeymap, history, historyKeymap} from "@codemirror/commands"
 import {EditorState} from "@codemirror/state"
 
 import {defaultLight} from "./themes";

+import {getLanguageExtension} from "./languages";

 
 export function viewer() {
     return [
 
 export function viewer() {
     return [


@@ -23,8 +23,27 @@ export function viewer() {
         keymap.of([
             ...defaultKeymap,
             ...historyKeymap,
         keymap.of([
             ...defaultKeymap,
             ...historyKeymap,

-            ...foldKeymap,

         ]),
         EditorState.readOnly.of(true),
     ];
         ]),
         EditorState.readOnly.of(true),
     ];

+}
+
+export function editor(language) {
+    return [
+        lineNumbers(),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        history(),
+        drawSelection(),
+        dropCursor(),
+        syntaxHighlighting(defaultLight, {fallback: true}),
+        bracketMatching(),
+        rectangularSelection(),
+        highlightActiveLine(),
+        keymap.of([
+            ...defaultKeymap,
+            ...historyKeymap,
+        ]),
+        getLanguageExtension(language, ''),
+    ];

 }
\ No newline at end of file
 }
\ No newline at end of file

diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index 5cd92cae2bf1b7c556b2f947d5b0f2f360be3ba6..6b4682d1e5fbe65c8c472cb2e32d5703ee26c95d 100644 (file)
--- a/resources/js/components/markdown-editor.js
+++ b/resources/js/components/markdown-editor.js
@@ -45,7 +45,8 @@ export class MarkdownEditor extends Component {
         window.$events.emitPublic(this.elem, 'editor-markdown::setup', {
             markdownIt: this.editor.markdown.getRenderer(),
             displayEl: this.display,
         window.$events.emitPublic(this.elem, 'editor-markdown::setup', {
             markdownIt: this.editor.markdown.getRenderer(),
             displayEl: this.display,

-            codeMirrorInstance: this.editor.cm,
+            // TODO
+            // codeMirrorInstance: this.editor.cm,

         });
     }
 
         });
     }
 


@@ -81,9 +82,10 @@ export class MarkdownEditor extends Component {
         });
 
         // Refresh CodeMirror on container resize
         });
 
         // Refresh CodeMirror on container resize

-        const resizeDebounced = debounce(() => this.editor.cm.refresh(), 100, false);
-        const observer = new ResizeObserver(resizeDebounced);
-        observer.observe(this.elem);
+        // TODO
+        // const resizeDebounced = debounce(() => this.editor.cm.refresh(), 100, false);
+        // const observer = new ResizeObserver(resizeDebounced);
+        // observer.observe(this.elem);

 
         this.handleDividerDrag();
     }
 
         this.handleDividerDrag();
     }


@@ -102,7 +104,8 @@ export class MarkdownEditor extends Component {
                 window.removeEventListener('pointerup', upListener);
                 this.display.style.pointerEvents = null;
                 document.body.style.userSelect = null;
                 window.removeEventListener('pointerup', upListener);
                 this.display.style.pointerEvents = null;
                 document.body.style.userSelect = null;

-                this.editor.cm.refresh();
+                // TODO
+                // this.editor.cm.refresh();

             };
 
             this.display.style.pointerEvents = 'none';
             };
 
             this.display.style.pointerEvents = 'none';

diff --git a/resources/js/markdown/actions.js b/resources/js/markdown/actions.js
index 9faf43de34143a69933e2aeeea5a2dbb333e2fb4..666998723ef16236b5f462bef293a244112d6fe0 100644 (file)
--- a/resources/js/markdown/actions.js
+++ b/resources/js/markdown/actions.js
@@ -13,7 +13,7 @@ export class Actions {
     }
 
     updateAndRender() {
     }
 
     updateAndRender() {

-        const content = this.editor.cm.getValue();
+        const content = this.editor.cm.state.doc.toString();

         this.editor.config.inputEl.value = content;
 
         const html = this.editor.markdown.render(content);
         this.editor.config.inputEl.value = content;
 
         const html = this.editor.markdown.render(content);


@@ -411,17 +411,17 @@ export class Actions {
         });
     }
 
         });
     }
 

-    syncDisplayPosition() {
+    syncDisplayPosition(event) {

         // Thanks to http://liuhao.im/english/2015/11/10/the-sync-scroll-of-markdown-editor-in-javascript.html
         // Thanks to http://liuhao.im/english/2015/11/10/the-sync-scroll-of-markdown-editor-in-javascript.html

-        const scroll = this.editor.cm.getScrollInfo();
-        const atEnd = scroll.top + scroll.clientHeight === scroll.height;
+        const scrollEl = event.target;
+        const atEnd = Math.abs(scrollEl.scrollHeight - scrollEl.clientHeight - scrollEl.scrollTop) < 1;

         if (atEnd) {
             this.editor.display.scrollToIndex(-1);
             return;
         }
 
         if (atEnd) {
             this.editor.display.scrollToIndex(-1);
             return;
         }
 

-        const lineNum = this.editor.cm.lineAtHeight(scroll.top, 'local');
-        const range = this.editor.cm.getRange({line: 0, ch: null}, {line: lineNum, ch: null});
+        const blockInfo = this.editor.cm.lineBlockAtHeight(scrollEl.scrollTop);
+        const range = this.editor.cm.state.sliceDoc(0, blockInfo.from);

         const parser = new DOMParser();
         const doc = parser.parseFromString(this.editor.markdown.render(range), 'text/html');
         const totalLines = doc.documentElement.querySelectorAll('body > *');
         const parser = new DOMParser();
         const doc = parser.parseFromString(this.editor.markdown.render(range), 'text/html');
         const totalLines = doc.documentElement.querySelectorAll('body > *');

diff --git a/resources/js/markdown/codemirror.js b/resources/js/markdown/codemirror.js
index 8724a23c89e33a04b8e0b700dd6395eeb9beaad0..dad999e7a64e4d8be764abc57cb4faa67828123b 100644 (file)
--- a/resources/js/markdown/codemirror.js
+++ b/resources/js/markdown/codemirror.js
@@ -9,62 +9,71 @@ import Clipboard from "../services/clipboard";
  */
 export async function init(editor) {
     const Code = await window.importVersioned('code');
  */
 export async function init(editor) {
     const Code = await window.importVersioned('code');

-    const cm = Code.markdownEditor(editor.config.inputEl);

 
 

-    // Will force to remain as ltr for now due to issues when HTML is in editor.
-    cm.setOption('direction', 'ltr');
-    // Register shortcuts
-    cm.setOption('extraKeys', provideShortcuts(editor, Code.getMetaKey()));
-
-
-    // Register codemirror events
-
-    // Update data on content change
-    cm.on('change', (instance, changeObj) => editor.actions.updateAndRender());
+    /**
+     * @param {ViewUpdate} v
+     */
+    function onViewUpdate(v) {
+        if (v.docChanged) {
+            editor.actions.updateAndRender();
+        }
+    }

 
 

-    // Handle scroll to sync display view

     const onScrollDebounced = debounce(editor.actions.syncDisplayPosition.bind(editor.actions), 100, false);
     let syncActive = editor.settings.get('scrollSync');
     editor.settings.onChange('scrollSync', val => syncActive = val);
     const onScrollDebounced = debounce(editor.actions.syncDisplayPosition.bind(editor.actions), 100, false);
     let syncActive = editor.settings.get('scrollSync');
     editor.settings.onChange('scrollSync', val => syncActive = val);

-    cm.on('scroll', instance => {
-        if (syncActive) {
-            onScrollDebounced(instance);
-        }
-    });
-
-    // Handle image paste
-    cm.on('paste', (cm, event) => {
-        const clipboard = new Clipboard(event.clipboardData || event.dataTransfer);

 
 

-        // Don't handle the event ourselves if no items exist of contains table-looking data
-        if (!clipboard.hasItems() || clipboard.containsTabularData()) {
-            return;
-        }
+    const domEventHandlers = {
+        // Handle scroll to sync display view
+        scroll: (event) => syncActive && onScrollDebounced(event)
+    }

 
 

-        const images = clipboard.getImages();
-        for (const image of images) {
-            editor.actions.uploadImage(image);
-        }
-    });
+    const cm = Code.markdownEditor(editor.config.inputEl, onViewUpdate, domEventHandlers);
+    window.cm = cm;

 
 

-    // Handle image & content drag n drop
-    cm.on('drop', (cm, event) => {
+    // Will force to remain as ltr for now due to issues when HTML is in editor.
+    // TODO
+    // cm.setOption('direction', 'ltr');
+    // Register shortcuts
+    // TODO
+    // cm.setOption('extraKeys', provideShortcuts(editor, Code.getMetaKey()));

 
 

-        const templateId = event.dataTransfer.getData('bookstack/template');
-        if (templateId) {
-            event.preventDefault();
-            editor.actions.insertTemplate(templateId, event.pageX, event.pageY);
-        }

 
 

-        const clipboard = new Clipboard(event.dataTransfer);
-        const clipboardImages = clipboard.getImages();
-        if (clipboardImages.length > 0) {
-            event.stopPropagation();
-            event.preventDefault();
-            editor.actions.insertClipboardImages(clipboardImages);
-        }
+    // Handle image paste
+    // TODO
+    // cm.on('paste', (cm, event) => {
+    //     const clipboard = new Clipboard(event.clipboardData || event.dataTransfer);
+    //
+    //     // Don't handle the event ourselves if no items exist of contains table-looking data
+    //     if (!clipboard.hasItems() || clipboard.containsTabularData()) {
+    //         return;
+    //     }
+    //
+    //     const images = clipboard.getImages();
+    //     for (const image of images) {
+    //         editor.actions.uploadImage(image);
+    //     }
+    // });

 
 

-    });
+    // Handle image & content drag n drop
+    // TODO
+    // cm.on('drop', (cm, event) => {
+    //
+    //     const templateId = event.dataTransfer.getData('bookstack/template');
+    //     if (templateId) {
+    //         event.preventDefault();
+    //         editor.actions.insertTemplate(templateId, event.pageX, event.pageY);
+    //     }
+    //
+    //     const clipboard = new Clipboard(event.dataTransfer);
+    //     const clipboardImages = clipboard.getImages();
+    //     if (clipboardImages.length > 0) {
+    //         event.stopPropagation();
+    //         event.preventDefault();
+    //         editor.actions.insertClipboardImages(clipboardImages);
+    //     }
+    //
+    // });

 
     return cm;
 }
\ No newline at end of file
 
     return cm;
 }
\ No newline at end of file

diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index b7fc52f7dbdc38793505469653c61293359bdbf8..b7b1b6d4d2be87da0949745c0b0368d931c9269c 100644 (file)
--- a/resources/sass/_forms.scss
+++ b/resources/sass/_forms.scss
@@ -82,6 +82,10 @@
   flex-grow: 0;
 }
 
   flex-grow: 0;
 }
 

+.markdown-editor-wrap .cm-editor {
+  flex: 1;
+}
+

 .markdown-panel-divider {
   width: 2px;
   @include lightDark(background-color, #ddd, #000);
 .markdown-panel-divider {
   width: 2px;
   @include lightDark(background-color, #ddd, #000);