CM6: Updated for popup editor, added new interface

New simple interface added for abstraction of CM editor in simple
use-cases, just to provide common actions like get/set content, focus
and set mode.

resources/js/code/index.mjs

@@ -1,8 +1,9 @@
 import {EditorView, keymap} from "@codemirror/view";
 
 import {copyTextToClipboard} from "../services/clipboard.js"
-import {viewer, editor} from "./setups.js";
-import {createView, updateViewLanguage} from "./views.js";
+import {viewerExtensions, editorExtensions} from "./setups.js";
+import {createView} from "./views.js";
+import {SimpleEditorInterface} from "./simple-editor-interface.js";
 
 /**
  * Highlight pre elements on a page
@@ -45,10 +46,12 @@ function highlightElem(elem) {
     const ev = createView({
         parent: wrapper,
         doc: content,
-        extensions: viewer(wrapper),
+        extensions: viewerExtensions(wrapper),
     });
 
-    setMode(ev, langName, content);
+    const editor = new SimpleEditorInterface(ev);
+    editor.setMode(langName, content);
+
     elem.remove();
     addCopyIcon(ev);
 }
@@ -88,31 +91,25 @@ function addCopyIcon(editorView) {
 
 /**
  * Create a CodeMirror instance for showing inside the WYSIWYG editor.
- *  Manages a textarea element to hold code content.
+ * Manages a textarea element to hold code content.
  * @param {HTMLElement} cmContainer
  * @param {ShadowRoot} shadowRoot
  * @param {String} content
  * @param {String} language
- * @returns {EditorView}
+ * @returns {SimpleEditorInterface}
  */
 export function wysiwygView(cmContainer, shadowRoot, content, language) {
-    // Monkey-patch so that the container document window "CSSStyleSheet" is used instead of the outer window document.
-    // Needed otherwise codemirror fails to apply styles due to a window mismatch when creating a new "CSSStyleSheet" instance.
-    // Opened: https://github.com/codemirror/dev/issues/1133
-    const originalCSSStyleSheetReference = window.CSSStyleSheet;
-    window.CSSStyleSheet = cmContainer.ownerDocument.defaultView.CSSStyleSheet;
-
     const ev = createView({
         parent: cmContainer,
         doc: content,
-        extensions: viewer(cmContainer),
+        extensions: viewerExtensions(cmContainer),
         root: shadowRoot,
     });
 
-    window.CSSStyleSheet = originalCSSStyleSheetReference;
-    setMode(ev, language, content);
+    const editor = new SimpleEditorInterface(ev);
+    editor.setMode(language, content);
 
-    return ev;
+    return editor;
 }
 
 
@@ -120,36 +117,44 @@ export function wysiwygView(cmContainer, shadowRoot, content, language) {
  * Create a CodeMirror instance to show in the WYSIWYG pop-up editor
  * @param {HTMLElement} elem
  * @param {String} modeSuggestion
- * @returns {*}
+ * @returns {SimpleEditorInterface}
  */
 export function popupEditor(elem, modeSuggestion) {
     const content = elem.textContent;
+    const config = {
+        parent: elem.parentElement,
+        doc: content,
+        extensions: [
+            ...editorExtensions(elem.parentElement),
+            EditorView.updateListener.of((v) => {
+                if (v.docChanged) {
+                    // textArea.value = v.state.doc.toString();
+                }
+            }),
+        ],
+    };
 
-    return CodeMirror(function(elt) {
-        elem.parentNode.insertBefore(elt, elem);
-        elem.style.display = 'none';
-    }, {
-        value: content,
-        mode:  getMode(modeSuggestion, content),
-        lineNumbers: true,
-        lineWrapping: false,
-        theme: getTheme()
-    });
+    // Create editor, hide original input
+    const editor = new SimpleEditorInterface(createView(config));
+    editor.setMode(modeSuggestion, content);
+    elem.style.display = 'none';
+
+    return editor;
 }
 
 /**
  * Create an inline editor to replace the given textarea.
  * @param {HTMLTextAreaElement} textArea
  * @param {String} mode
- * @returns {EditorView}
+ * @returns {SimpleEditorInterface}
  */
 export function inlineEditor(textArea, mode) {
     const content = textArea.value;
     const config = {
-        parent: textArea.parentNode,
+        parent: textArea.parentElement,
         doc: content,
         extensions: [
-            ...editor(textArea.parentElement),
+            ...editorExtensions(textArea.parentElement),
             EditorView.updateListener.of((v) => {
                 if (v.docChanged) {
                     textArea.value = v.state.doc.toString();
@@ -160,31 +165,11 @@ export function inlineEditor(textArea, mode) {
 
     // Create editor view, hide original input
     const ev = createView(config);
-    setMode(ev, mode, content);
+    const editor = new SimpleEditorInterface(ev);
+    editor.setMode(mode, content);
     textArea.style.display = 'none';
 
-    return ev;
-}
-
-/**
- * Set the language mode of a codemirror EditorView.
- *
- * @param {EditorView} ev
- * @param {string} modeSuggestion
- * @param {string} content
- */
-export function setMode(ev, modeSuggestion, content) {
-    updateViewLanguage(ev, modeSuggestion, content);
-}
-
-/**
- * Set the content of a cm instance.
- * @param {EditorView} ev
- * @param codeContent
- */
-export function setContent(ev, codeContent) {
-    const doc = ev.state.doc;
-    doc.replace(0, doc.length, codeContent);
+    return editor;
 }
 
 /**
@@ -193,15 +178,15 @@ export function setContent(ev, codeContent) {
  * @param {function} onChange
  * @param {object} domEventHandlers
  * @param {Array} keyBindings
- * @returns {*}
+ * @returns {EditorView}
  */
 export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
     const content = elem.textContent;
     const config = {
-        parent: elem.parentNode,
+        parent: elem.parentElement,
         doc: content,
         extensions: [
-            ...editor(elem.parentElement),
+            ...editorExtensions(elem.parentElement),
             EditorView.updateListener.of((v) => {
                 onChange(v);
             }),
@@ -215,7 +200,7 @@ export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
 
     // Create editor view, hide original input
     const ev = createView(config);
-    setMode(ev, 'markdown', '');
+    (new SimpleEditorInterface(ev)).setMode('markdown', '');
     elem.style.display = 'none';
 
     return ev;

resources/js/code/setups.js

@@ -26,7 +26,7 @@ function common(parentEl) {
  * @param {Element} parentEl
  * @return {*[]}
  */
-export function viewer(parentEl) {
+export function viewerExtensions(parentEl) {
     return [
         ...common(parentEl),
         keymap.of([
@@ -40,7 +40,7 @@ export function viewer(parentEl) {
  * @param {Element} parentEl
  * @return {*[]}
  */
-export function editor(parentEl) {
+export function editorExtensions(parentEl) {
     return [
         ...common(parentEl),
         history(),

resources/js/code/simple-editor-interface.js

@@ -0,0 +1,46 @@
+import {updateViewLanguage} from "./views";
+
+
+export class SimpleEditorInterface {
+    /**
+     * @param {EditorView} editorView
+     */
+    constructor(editorView) {
+        this.ev = editorView;
+    }
+
+    /**
+     * Get the contents of an editor instance.
+     * @return {string}
+     */
+    getContent() {
+        return this.ev.state.doc.toString();
+    }
+
+    /**
+     * Set the contents of an editor instance.
+     * @param content
+     */
+    setContent(content) {
+        const doc = this.ev.state.doc;
+        this.ev.dispatch({
+            changes: {from: 0, to: doc.length, insert: content}
+        });
+    }
+
+    /**
+     * Return focus to the editor instance.
+     */
+    focus() {
+        this.ev.focus();
+    }
+
+    /**
+     * Set the language mode of the editor instance.
+     * @param {String} mode
+     * @param {String} content
+     */
+    setMode(mode, content = '') {
+        updateViewLanguage(this.ev, mode, content);
+    }
+}

resources/js/components/code-editor.js

@@ -4,6 +4,15 @@ import {Component} from "./component";
 
 export class CodeEditor extends Component {
 
+    /**
+     * @type {null|SimpleEditorInterface}
+     */
+    editor = null;
+
+    callback = null;
+    history = {};
+    historyKey = 'code_history';
+
     setup() {
         this.container = this.$refs.container;
         this.popup = this.$el;
@@ -16,10 +25,6 @@ export class CodeEditor extends Component {
         this.historyList = this.$refs.historyList;
         this.favourites = new Set(this.$opts.favourites.split(','));
 
-        this.callback = null;
-        this.editor = null;
-        this.history = {};
-        this.historyKey = 'code_history';
         this.setupListeners();
         this.setupFavourites();
     }
@@ -45,7 +50,7 @@ export class CodeEditor extends Component {
             event.preventDefault();
             const historyTime = elem.dataset.time;
             if (this.editor) {
-                this.editor.setValue(this.history[historyTime]);
+                this.editor.setContent(this.history[historyTime]);
             }
         });
     }
@@ -104,19 +109,18 @@ export class CodeEditor extends Component {
 
     save() {
         if (this.callback) {
-            this.callback(this.editor.getValue(), this.languageInput.value);
+            this.callback(this.editor.getContent(), this.languageInput.value);
         }
         this.hide();
     }
 
-    open(code, language, callback) {
+    async open(code, language, callback) {
         this.languageInput.value = language;
         this.callback = callback;
 
-        this.show()
-            .then(() => this.languageInputChange(language))
-            .then(() => window.importVersioned('code'))
-            .then(Code => Code.setContent(this.editor, code));
+        await this.show();
+        this.languageInputChange(language);
+        this.editor.setContent(code);
     }
 
     async show() {
@@ -146,8 +150,7 @@ export class CodeEditor extends Component {
     }
 
     async updateEditorMode(language) {
-        const Code = await window.importVersioned('code');
-        Code.setMode(this.editor, language, this.editor.getValue());
+        this.editor.setMode(language, this.editor.getContent());
     }
 
     languageInputChange(language) {
@@ -176,7 +179,7 @@ export class CodeEditor extends Component {
 
     addHistory() {
         if (!this.editor) return;
-        const code = this.editor.getValue();
+        const code = this.editor.getContent();
         if (!code) return;
 
         // Stop if we'd be storing the same as the last item

resources/js/wysiwyg/plugin-codeeditor.js

@@ -36,6 +36,12 @@ function defineCodeBlockCustomElement(editor) {
     const win = doc.defaultView;
 
     class CodeBlockElement extends win.HTMLElement {
+
+        /**
+         * @type {?SimpleEditorInterface}
+         */
+        editor = null;
+
         constructor() {
             super();
             this.attachShadow({mode: 'open'});
@@ -63,11 +69,9 @@ function defineCodeBlockCustomElement(editor) {
         }
 
         setContent(content, language) {
-            if (this.cm) {
-                importVersioned('code').then(Code => {
-                    Code.setContent(this.cm, content);
-                    Code.setMode(this.cm, language, content);
-                });
+            if (this.editor) {
+                this.editor.setContent(content);
+                this.editor.setMode(language, content);
             }
 
             let pre = this.querySelector('pre');
@@ -98,7 +102,7 @@ function defineCodeBlockCustomElement(editor) {
 
         connectedCallback() {
             const connectedTime = Date.now();
-            if (this.cm) {
+            if (this.editor) {
                 return;
             }
 
@@ -109,14 +113,14 @@ function defineCodeBlockCustomElement(editor) {
             this.style.height = `${height}px`;
 
             const container = this.shadowRoot.querySelector('.CodeMirrorContainer');
-            const renderCodeMirror = (Code) => {
-                this.cm = Code.wysiwygView(container, this.shadowRoot, content, this.getLanguage());
+            const renderEditor = (Code) => {
+                this.editor = Code.wysiwygView(container, this.shadowRoot, content, this.getLanguage());
                 setTimeout(() => this.style.height = null, 12);
             };
 
             window.importVersioned('code').then((Code) => {
                 const timeout = (Date.now() - connectedTime < 20) ? 20 : 0;
-                setTimeout(() => renderCodeMirror(Code), timeout);
+                setTimeout(() => renderEditor(Code), timeout);
             });
         }