Replace CodeFlask code editor with CodeMirror on the UI.

Unfortunately, the tiny CodeFlask lib stopped getting updates 5+ years ago and
is buggy. The attempt to replace it with CodeInput (which itself seems to have
several open bugs) failed.

So, biting the bullet with CodeMirror, which is a robust, battle tested, albeit
large (~300KB) code editor library.

This patch replaces all code editor UIs (Campaign, Templates, Settings) with
CodeMirror.

Author: knadh

frontend/cypress/e2e/campaigns.cy.js

@@ -271,11 +271,19 @@ describe('Campaigns', () => {
           });
           cy.wait(500);
         } else if (c === 'html') {
-          cy.get('code-flask').shadow().find('.codeflask textarea').invoke('val', htmlBody)
-            .trigger('input');
+          cy.get('[contenteditable="true"]').then(($el) => {
+            cy.window().then((win) => {
+              $el.focus();
+              win.document.execCommand('insertText', false, htmlBody);
+            });
+          });
         } else if (c === 'markdown') {
-          cy.get('code-flask').shadow().find('.codeflask textarea').invoke('val', markdownBody)
-            .trigger('input');
+          cy.get('[contenteditable="true"]').then(($el) => {
+            cy.window().then((win) => {
+              $el.focus();
+              win.document.execCommand('insertText', false, markdownBody);
+            });
+          });
         } else if (c === 'plain') {
           cy.get('textarea[name=content]').invoke('val', plainBody).trigger('input');
         } else if (c === 'visual') {

frontend/package.json

@@ -10,12 +10,23 @@
     "prebuild": "eslint --ext .js,.vue --ignore-path .gitignore src"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.3",
+    "@codemirror/lang-markdown": "^6.3.2",
+    "@codemirror/language": "^6.11.0",
+    "@codemirror/language-data": "^6.5.1",
+    "@codemirror/search": "^6.5.10",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.36.5",
+    "@lezer/highlight": "^1.2.1",
     "@tinymce/tinymce-vue": "^3",
     "axios": "^1.8.2",
     "buefy": "^0.9.25",
     "bulma": "^0.9.4",
     "chart.js": "^4.4.1",
-    "codeflask": "^1.4.1",
+    "codemirror": "^6.0.0",
     "dayjs": "^1.11.10",
     "indent.js": "^0.3.5",
     "js-beautify": "^1.15.1",

frontend/src/assets/style.scss

@@ -296,13 +296,28 @@ body.is-noscroll {
 }
 
 /* WYSIWYG / HTML code editor */
-.html-editor, .plain-editor textarea, .markdown-editor {
+.plain-editor textarea, .code-editor {
   position: relative;
   width: 100%;
   min-height: 250px;
   height: 65vh;
   border: 1px solid $grey-lighter;
   border-radius: 2px;
+
+  .cm-editor {
+    height: 100%;
+  }
+}
+
+.code-editor {
+  .cm-lineNumbers .cm-gutterElement{
+    color: #aaa;
+    font-size: 0.875rem;
+    padding-right: 10px;
+  }
+  .cm-gutters {
+    margin-right: 10px;
+  }
 }
 
 .alt-body textarea {
@@ -977,8 +992,8 @@ section.analytics {
   .box {
     margin-bottom: 30px;
   }
-  .html-editor {
-    height: auto;
+  .code-editor {
+    height: 20vh;
     min-height: 350px;
   }
 }

frontend/src/components/CodeEditor.vue

@@ -0,0 +1,131 @@
+<template>
+  <div ref="editor" class="code-editor" />
+</template>
+
+<script>
+import { EditorState } from '@codemirror/state';
+import {
+  EditorView, keymap, highlightActiveLine, lineNumbers, highlightActiveLineGutter,
+} from '@codemirror/view';
+import { markdown } from '@codemirror/lang-markdown';
+import { javascript } from '@codemirror/lang-javascript';
+import { css } from '@codemirror/lang-css';
+import { html } from '@codemirror/lang-html';
+import {
+  defaultKeymap, history, historyKeymap, indentWithTab,
+} from '@codemirror/commands';
+import { defaultHighlightStyle, syntaxHighlighting, bracketMatching } from '@codemirror/language';
+import { search, searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import { vsCodeLight } from './editor-theme';
+
+export default {
+  props: {
+    value: { type: String, default: '' },
+    lang: { type: String, default: 'html' },
+    disabled: Boolean,
+  },
+
+  data() {
+    return {
+      data: '',
+      editor: null,
+      internalUpdate: false,
+    };
+  },
+
+  methods: {
+  },
+
+  mounted() {
+    const onUpdate = EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        this.internalUpdate = true;
+        this.$emit('input', update.state.doc.toString());
+      }
+    });
+
+    // Set the chosen language.
+    let langs = [];
+    switch (this.lang) {
+      case 'html':
+        langs = [html()];
+        break;
+      case 'css':
+        langs = [css()];
+        break;
+      case 'javascript':
+        langs = [javascript()];
+        break;
+      case 'markdown':
+        langs = [markdown()];
+        break;
+      default:
+        langs = [html()];
+    }
+
+    // Prepare the full config.
+    const stateCfg = EditorState.create({
+      // Initial value.
+      doc: this.value,
+
+      extensions: [
+        EditorView.baseTheme({}),
+        ...langs,
+        history(),
+        highlightActiveLine(),
+        bracketMatching(),
+        highlightSelectionMatches(),
+        lineNumbers(),
+        highlightActiveLineGutter(),
+        keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap, indentWithTab]),
+
+        // Readonly?
+        EditorState.readOnly.of(this.disabled),
+        EditorView.editable.of(!this.disabled),
+
+        // Syntax highlighting and theme.
+        syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+        EditorView.lineWrapping,
+
+        vsCodeLight,
+
+        search({
+          top: true, // Places the search panel at the top of the editor
+        }),
+
+        // On content change.
+        onUpdate,
+      ],
+    });
+
+    // Create the editor.
+    this.editor = new EditorView({
+      state: stateCfg,
+      parent: this.$refs.editor,
+    });
+
+    this.$nextTick(() => {
+      window.setTimeout(() => {
+        this.editor.focus();
+      }, 100);
+    });
+  },
+
+  beforeDestroy() {
+    if (this.editor) {
+      this.editor.destroy();
+    }
+  },
+
+  watch: {
+    value(val) {
+      if (!this.internalUpdate) {
+        this.editor.dispatch({
+          changes: { from: 0, to: this.editor.state.doc.length, insert: val },
+        });
+        this.internalUpdate = false;
+      }
+    },
+  },
+};
+</script>

frontend/src/components/Editor.vue

@@ -65,10 +65,10 @@
       height="65vh" ref="visualEditor" />
 
     <!-- raw html editor //-->
-    <html-editor v-if="self.contentType === 'html'" v-model="self.body" />
+    <code-editor lang="html" v-if="self.contentType === 'html'" v-model="self.body" key="editor-html" />
 
     <!-- markdown editor //-->
-    <markdown-editor v-if="self.contentType === 'markdown'" v-model="self.body" />
+    <code-editor lang="markdown" v-if="self.contentType === 'markdown'" v-model="self.body" key="editor-markdown" />
 
     <!-- plain text //-->
     <b-input v-if="self.contentType === 'plain'" v-model="self.body" type="textarea" name="content" ref="plainEditor"
@@ -86,19 +86,17 @@ import TurndownService from 'turndown';
 import { mapState } from 'vuex';
 
 import CampaignPreview from './CampaignPreview.vue';
-import HTMLEditor from './HTMLEditor.vue';
-import MarkdownEditor from './MarkdownEditor.vue';
 import VisualEditor from './VisualEditor.vue';
 import RichtextEditor from './RichtextEditor.vue';
 import markdownToVisualBlock from './editor';
+import CodeEditor from './CodeEditor.vue';
 
 const turndown = new TurndownService();
 
 export default {
   components: {
     CampaignPreview,
-    'html-editor': HTMLEditor,
-    'markdown-editor': MarkdownEditor,
+    'code-editor': CodeEditor,
     'visual-editor': VisualEditor,
     'richtext-editor': RichtextEditor,
   },