Added cm6 strategy for splitting and dyn. loading langs

[bookstack] / resources / js / code / index.mjs

diff --git a/resources/js/code/index.mjs b/resources/js/code/index.mjs
index 6ef6599949811c5e3b16c5c7f2a65121fc8a6c1f..1a3429d588c8f6062eaff97b141ad02f3311b4c8 100644 (file)
--- a/resources/js/code/index.mjs
+++ b/resources/js/code/index.mjs
@@ -1,8 +1,8 @@
-import {EditorView} from "@codemirror/view"
-import Clipboard from "clipboard/dist/clipboard.min";
+import {EditorView, keymap} from "@codemirror/view";
+import {copyTextToClipboard} from "../services/clipboard.js"
 
 // Modes
-import {viewer} from "./setups.js";
+import {viewer, editor} from "./setups.js";
 import {createView, updateViewLanguage} from "./views.js";
 
 /**
@@ -57,28 +57,23 @@ function highlightElem(elem) {
 
 /**
  * Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
- * @param cmInstance
+ * @param {EditorView} editorView
  */
-function addCopyIcon(cmInstance) {
-    // TODO
-    // const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
-    // const copyButton = document.createElement('div');
-    // copyButton.classList.add('CodeMirror-copy');
-    // copyButton.innerHTML = copyIcon;
-    // cmInstance.display.wrapper.appendChild(copyButton);
-    //
-    // const clipboard = new Clipboard(copyButton, {
-    //     text: function(trigger) {
-    //         return cmInstance.getValue()
-    //     }
-    // });
-    //
-    // clipboard.on('success', event => {
-    //     copyButton.classList.add('success');
-    //     setTimeout(() => {
-    //         copyButton.classList.remove('success');
-    //     }, 240);
-    // });
+function addCopyIcon(editorView) {
+    const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
+    const copyButton = document.createElement('button');
+    copyButton.setAttribute('type', 'button')
+    copyButton.classList.add('cm-copy-button');
+    copyButton.innerHTML = copyIcon;
+    editorView.dom.appendChild(copyButton);
+
+    copyButton.addEventListener('click', event => {
+        copyTextToClipboard(editorView.state.doc.toString());
+        copyButton.classList.add('success');
+        setTimeout(() => {
+            copyButton.classList.remove('success');
+        }, 240);
+    });
 }
 
 /**
@@ -180,32 +175,33 @@ export function updateLayout(cmInstance) {
 /**
  * Get a CodeMirror instance to use for the markdown editor.
  * @param {HTMLElement} elem
+ * @param {function} onChange
+ * @param {object} domEventHandlers
+ * @param {Array} keyBindings
  * @returns {*}
  */
-export function markdownEditor(elem) {
+export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
     const content = elem.textContent;
     const config = {
-        value: content,
-        mode: "markdown",
-        lineNumbers: true,
-        lineWrapping: true,
-        theme: getTheme(),
-        scrollPastEnd: true,
+        parent: elem.parentNode,
+        doc: content,
+        extensions: [
+            ...editor('markdown'),
+            EditorView.updateListener.of((v) => {
+                onChange(v);
+            }),
+            EditorView.domEventHandlers(domEventHandlers),
+            keymap.of(keyBindings),
+        ],
     };
 
-    window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
+    // Emit a pre-event public event to allow tweaking of the configure before view creation.
+    window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {cmEditorViewConfig: config});
 
-    return CodeMirror(function (elt) {
-        elem.parentNode.insertBefore(elt, elem);
-        elem.style.display = 'none';
-    }, config);
-}
+    // Create editor view, hide original input
+    const ev = createView(config);
+    setMode(ev, 'markdown', '');
+    elem.style.display = 'none';
 
-/**
- * Get the 'meta' key dependent on the user's system.
- * @returns {string}
- */
-export function getMetaKey() {
-    let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
-    return mac ? "Cmd" : "Ctrl";
+    return ev;
 }
\ No newline at end of file