CM6: Aligned styling with existing, improved theme handling

resources/js/code/index.mjs

@@ -1,7 +1,6 @@
 import {EditorView, keymap} from "@codemirror/view";
-import {copyTextToClipboard} from "../services/clipboard.js"
 
-// Modes
+import {copyTextToClipboard} from "../services/clipboard.js"
 import {viewer, editor} from "./setups.js";
 import {createView, updateViewLanguage} from "./views.js";
 
@@ -46,13 +45,11 @@ function highlightElem(elem) {
     const ev = createView({
         parent: wrapper,
         doc: content,
-        extensions: viewer(),
+        extensions: viewer(wrapper),
     });
+
     setMode(ev, langName, content);
-    window.cm = ev;
-
     elem.remove();
-
     addCopyIcon(ev);
 }
 
@@ -61,19 +58,31 @@ function highlightElem(elem) {
  * @param {EditorView} editorView
  */
 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 copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><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 checkIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`;
     const copyButton = document.createElement('button');
     copyButton.setAttribute('type', 'button')
     copyButton.classList.add('cm-copy-button');
     copyButton.innerHTML = copyIcon;
     editorView.dom.appendChild(copyButton);
 
+    const notifyTime = 620;
+    const transitionTime = 60;
     copyButton.addEventListener('click', event => {
         copyTextToClipboard(editorView.state.doc.toString());
         copyButton.classList.add('success');
+
+        setTimeout(() => {
+            copyButton.innerHTML = checkIcon;
+        }, transitionTime / 2);
+
         setTimeout(() => {
             copyButton.classList.remove('success');
-        }, 240);
+        }, notifyTime);
+
+        setTimeout(() => {
+            copyButton.innerHTML = copyIcon;
+        }, notifyTime + (transitionTime / 2));
     });
 }
 
@@ -93,17 +102,18 @@ function getTheme() {
  * @param {HTMLElement} cmContainer
  * @param {String} content
  * @param {String} language
- * @returns {{wrap: Element, editor: *}}
+ * @returns {EditorView}
  */
 export function wysiwygView(cmContainer, content, language) {
-    return CodeMirror(cmContainer, {
-        value: content,
-        mode: getMode(language, content),
-        lineNumbers: true,
-        lineWrapping: false,
-        theme: getTheme(),
-        readOnly: true
+    const ev = createView({
+        parent: cmContainer,
+        doc: content,
+        extensions: viewer(cmContainer),
     });
+
+    setMode(ev, language, content);
+
+    return ev;
 }
 
 
@@ -132,15 +142,29 @@ export function popupEditor(elem, modeSuggestion) {
  * Create an inline editor to replace the given textarea.
  * @param {HTMLTextAreaElement} textArea
  * @param {String} mode
- * @returns {CodeMirror3}
+ * @returns {EditorView}
  */
 export function inlineEditor(textArea, mode) {
-    return CodeMirror.fromTextArea(textArea, {
-        mode: getMode(mode, textArea.value),
-        lineNumbers: true,
-        lineWrapping: false,
-        theme: getTheme(),
-    });
+    const content = textArea.value;
+    const config = {
+        parent: textArea.parentNode,
+        doc: content,
+        extensions: [
+            ...editor(textArea.parentElement),
+            EditorView.updateListener.of((v) => {
+                if (v.docChanged) {
+                    textArea.value = v.state.doc.toString();
+                }
+            }),
+        ],
+    };
+
+    // Create editor view, hide original input
+    const ev = createView(config);
+    setMode(ev, mode, content);
+    textArea.style.display = 'none';
+
+    return ev;
 }
 
 /**
@@ -188,7 +212,7 @@ export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
         parent: elem.parentNode,
         doc: content,
         extensions: [
-            ...editor('markdown'),
+            ...editor(elem.parentElement),
             EditorView.updateListener.of((v) => {
                 onChange(v);
             }),

resources/js/code/languages.js

@@ -3,9 +3,11 @@ import {StreamLanguage} from "@codemirror/language"
 import {css} from '@codemirror/lang-css';
 import {json} from '@codemirror/lang-json';
 import {javascript} from '@codemirror/lang-javascript';
+import {html} from "@codemirror/lang-html";
 import {markdown} from '@codemirror/lang-markdown';
 import {php} from '@codemirror/lang-php';
-export {twig} from "@ssddanbrown/codemirror-lang-twig";
+import {twig} from "@ssddanbrown/codemirror-lang-twig";
+import {xml} from "@codemirror/lang-xml";
 
 const legacyLoad = async (mode) => {
     const modes = await window.importVersioned('legacy-modes');
@@ -32,7 +34,7 @@ const modeMap = {
     go: () => legacyLoad('go'),
     haskell: () => legacyLoad('haskell'),
     hs: () => legacyLoad('haskell'),
-    html: () => legacyLoad('html'),
+    html: async () => html(),
     ini: () => legacyLoad('properties'),
     java: () => legacyLoad('java'),
     javascript: async () => javascript(),
@@ -89,7 +91,7 @@ const modeMap = {
     vbscript: () => legacyLoad('vbScript'),
     'vb.net': () => legacyLoad('vb'),
     vbnet: () => legacyLoad('vb'),
-    xml: () => legacyLoad('xml'),
+    xml: async () => xml(),
     yaml: () => legacyLoad('yaml'),
     yml: () => legacyLoad('yaml'),
 };

resources/js/code/legacy-modes.mjs

@@ -23,6 +23,5 @@ export {swift} from "@codemirror/legacy-modes/mode/swift";
 export {toml} from '@codemirror/legacy-modes/mode/toml';
 export {vb} from '@codemirror/legacy-modes/mode/vb';
 export {vbScript} from '@codemirror/legacy-modes/mode/vbscript';
-export {xml, html} from '@codemirror/legacy-modes/mode/xml';
 export {yaml} from '@codemirror/legacy-modes/mode/yaml';
 export {smarty} from "@ssddanbrown/codemirror-lang-smarty";

resources/js/code/setups.js

@@ -1,22 +1,34 @@
-
 import {EditorView, keymap, drawSelection, highlightActiveLine, dropCursor,
     rectangularSelection, lineNumbers, highlightActiveLineGutter} from "@codemirror/view"
-import {syntaxHighlighting, bracketMatching} from "@codemirror/language"
+import {bracketMatching} from "@codemirror/language"
 import {defaultKeymap, history, historyKeymap} from "@codemirror/commands"
 import {EditorState} from "@codemirror/state"
+import {getTheme} from "./themes";
 
-import {defaultLight} from "./themes";
-
-export function viewer() {
+/**
+ * @param {Element} parentEl
+ * @return {(Extension[]|{extension: Extension}|readonly Extension[])[]}
+ */
+function common(parentEl) {
     return [
+        getTheme(parentEl),
         lineNumbers(),
         highlightActiveLineGutter(),
         drawSelection(),
         dropCursor(),
-        // syntaxHighlighting(defaultLight, {fallback: false}),
         bracketMatching(),
         rectangularSelection(),
         highlightActiveLine(),
+    ];
+}
+
+/**
+ * @param {Element} parentEl
+ * @return {*[]}
+ */
+export function viewer(parentEl) {
+    return [
+        ...common(parentEl),
         keymap.of([
             ...defaultKeymap,
         ]),
@@ -24,17 +36,14 @@ export function viewer() {
     ];
 }
 
-export function editor(language) {
+/**
+ * @param {Element} parentEl
+ * @return {*[]}
+ */
+export function editor(parentEl) {
     return [
-        lineNumbers(),
-        highlightActiveLineGutter(),
+        ...common(parentEl),
         history(),
-        drawSelection(),
-        dropCursor(),
-        syntaxHighlighting(defaultLight, {fallback: true}),
-        bracketMatching(),
-        rectangularSelection(),
-        highlightActiveLine(),
         keymap.of([
             ...defaultKeymap,
             ...historyKeymap,

resources/js/code/themes.js

@@ -1,7 +1,9 @@
 import {tags} from "@lezer/highlight";
-import {HighlightStyle} from "@codemirror/language";
+import {HighlightStyle, syntaxHighlighting} from "@codemirror/language";
+import {EditorView} from "@codemirror/view";
+import {oneDarkHighlightStyle, oneDarkTheme} from "@codemirror/theme-one-dark";
 
-export const defaultLight = HighlightStyle.define([
+const defaultLightHighlightStyle = HighlightStyle.define([
     { tag: tags.meta,
         color: "#388938" },
     { tag: tags.link,
@@ -43,4 +45,46 @@ export const defaultLight = HighlightStyle.define([
         color: "#940" },
     { tag: tags.invalid,
         color: "#f00" }
-]);
+]);
+
+const defaultThemeSpec = {
+    "&": {
+        color: "#000",
+    },
+    "&.cm-focused": {
+        outline: "none",
+    },
+    ".cm-line": {
+        lineHeight: "1.6",
+    },
+};
+
+/**
+ * Get the theme extension to use for editor view instance.
+ * @returns {Extension[]}
+ */
+export function getTheme(viewParentEl) {
+    const darkMode = document.documentElement.classList.contains('dark-mode');
+    let viewTheme = darkMode ? oneDarkTheme : EditorView.theme(defaultThemeSpec);
+    let highlightStyle = darkMode ? oneDarkHighlightStyle : defaultLightHighlightStyle;
+
+    const eventData = {
+        darkModeActive: darkMode,
+        registerViewTheme(builder) {
+            const spec = builder();
+            if (spec) {
+                viewTheme = EditorView.theme(spec);
+            }
+        },
+        registerHighlightStyle(builder) {
+            const tagStyles = builder(tags) || [];
+            if (tagStyles.length) {
+                highlightStyle = HighlightStyle.define(tagStyles);
+            }
+        }
+    };
+
+    window.$events.emitPublic(viewParentEl, 'library-cm6::configure-theme', eventData);
+
+    return [viewTheme, syntaxHighlighting(highlightStyle)];
+}

resources/js/code/views.js

@@ -1,9 +1,6 @@
-import {getLanguageExtension} from "./languages"
-import {HighlightStyle, syntaxHighlighting} from "@codemirror/language";
-import {Compartment} from "@codemirror/state"
-import {EditorView} from "@codemirror/view"
-import {oneDarkTheme, oneDarkHighlightStyle} from "@codemirror/theme-one-dark"
-import {tags} from "@lezer/highlight"
+import {Compartment} from "@codemirror/state";
+import {EditorView} from "@codemirror/view";
+import {getLanguageExtension} from "./languages";
 
 const viewLangCompartments = new WeakMap();
 
@@ -16,7 +13,6 @@ const viewLangCompartments = new WeakMap();
 export function createView(config) {
     const langCompartment = new Compartment();
     config.extensions.push(langCompartment.of([]));
-    config.extensions.push(getTheme(config.parent));
 
     const ev = new EditorView(config);
 
@@ -25,37 +21,6 @@ export function createView(config) {
     return ev;
 }
 
-/**
- * Get the theme extension to use for editor view instance.
- * @returns {Extension[]}
- */
-function getTheme(viewParentEl) {
-    const darkMode = document.documentElement.classList.contains('dark-mode');
-    let viewTheme = darkMode ? oneDarkTheme : [];
-    let highlightStyle = darkMode ? oneDarkHighlightStyle : null;
-
-    const eventData = {
-        darkModeActive: darkMode,
-        registerViewTheme(builder) {
-            const spec = builder();
-            if (spec) {
-                viewTheme = EditorView.theme(spec);
-            }
-        },
-        registerHighlightStyle(builder) {
-            const tagStyles = builder(tags) || [];
-            console.log('called', tagStyles);
-            if (tagStyles.length) {
-                highlightStyle = HighlightStyle.define(tagStyles);
-            }
-        }
-    };
-
-    window.$events.emitPublic(viewParentEl, 'library-cm6::configure-theme', eventData);
-
-    return [viewTheme, highlightStyle ? syntaxHighlighting(highlightStyle) : []];
-}
-
 /**
  * Set the language mode of an EditorView.
  *
@@ -69,5 +34,5 @@ export async function updateViewLanguage(ev, modeSuggestion, content) {
 
     ev.dispatch({
         effects: compartment.reconfigure(language ? language : [])
-    })
+    });
 }