Update CodeMirror to v6 & drop Browserify (#907)

.bobconfigrc

@@ -1,6 +1,5 @@
 {
     "baseDir": "./docs/",
-    "bundleConfig": "../bundles.json",
     "destCssDir": "./docs/css/",
     "destJsDir": "./docs/js/",
     "examplesFontsRoot": "./live-examples/fonts",

editor/css/editable-js-and-wat.css

@@ -56,17 +56,17 @@
   min-height: 280px;
 }
 
-.CodeMirror {
+.cm-editor {
   height: 280px;
 }
 
 .js .editor.taller,
-.js .editor.taller .CodeMirror {
+.js .editor.taller .cm-editor {
   height: 490px;
 }
 
 .js .editor.shorter,
-.js .editor.shorter .CodeMirror {
+.js .editor.shorter .cm-editor {
   height: 200px;
   min-height: 200px;
 }
@@ -76,19 +76,19 @@
 }
 
 .wat .editor.taller,
-.wat .editor.taller .CodeMirror {
+.wat .editor.taller .cm-editor {
   height: 420px;
   min-height: 420px;
 }
 
 .wat .editor.standard,
-.wat .editor.standard .CodeMirror {
+.wat .editor.standard .cm-editor {
   height: 210px;
   min-height: 210px;
 }
 
 .wat .editor.shorter,
-.wat .editor.shorter .CodeMirror {
+.wat .editor.shorter .cm-editor {
   height: 140px;
   min-height: 140px;
 }

editor/css/editor-libs/codemirror-override.css

@@ -1,40 +1,82 @@
-.CodeMirror-linenumber {
+/* Code Mirror editor rules */
+.cm-editor {
+  border: 1px solid var(--border-primary);
+}
+
+.cm-editor .cm-lineNumbers {
   color: var(--text-secondary);
 }
 
-.cm-s-default,
-.cm-s-default .cm-def,
-.cm-s-default .cm-operator,
-.cm-s-default .cm-variable {
+.cm-editor .cm-lineNumbers .cm-gutterElement {
+  padding: 0 3px 0 11px;
+  min-width: 30px;
+}
+
+.cm-editor .cm-gutters {
+  background: var(--background-secondary);
+  border-right: 1px solid var(--border-primary);
+}
+
+.cm-editor .cm-scroller {
+  line-height: inherit;
+}
+
+.cm-editor .cm-cursor {
+  border-color: var(--text-primary);
+}
+
+/* Language specific rules */
+.cm-operator,
+.cm-variable {
   color: var(--code-token-default);
 }
 
-.cm-s-default .cm-tag.cm-bracket {
+.cm-variable-2 {
+  color: #05a;
+}
+
+.cm-variable-3 {
+  color: #085;
+}
+
+.cm-bracket {
   color: var(--code-token-punctuation);
 }
-.cm-s-default .cm-comment {
+.cm-comment {
   color: var(--code-token-comment);
 }
 
-.cm-s-default .cm-keyword,
-.cm-s-default .cm-tag {
+.cm-keyword,
+.cm-tag {
   color: var(--code-token-tag);
 }
 
-.cm-s-default .cm-attribute {
+.cm-attribute {
   color: var(--code-token-attribute-name);
 }
 
-.cm-s-default .cm-string,
-.cm-s-default .cm-number,
-.cm-s-default .cm-atom {
+.cm-string,
+.cm-number,
+.cm-atom {
   color: var(--code-token-attribute-value);
 }
 
-.cm-s-default .cm-string-2 {
+.cm-string-2 {
   color: var(--code-token-selector);
 }
 
-.cm-s-default .cm-property {
+.cm-property {
   color: var(--code-token-attribute-name);
 }
+
+.cm-qualifier {
+  color: #555
+}
+
+.cm-builtin {
+  color: #30a;
+}
+
+.cm-meta {
+  color: #555;
+}

editor/css/editor-libs/common.css

@@ -473,22 +473,6 @@ body {
   background-color: var(--button-secondary-hover);
 }
 
-.CodeMirror {
-  border: 1px solid var(--border-primary);
-  height: 280px;
-  background: var(--background-primary);
-}
-
-.CodeMirror-gutters {
-  background: var(--background-secondary);
-  border-right: 1px solid var(--border-primary);
-}
-
-.CodeMirror-cursor {
-  border-left: 1px solid white;
-  border-right: 1px solid black;
-}
-
 .user-message {
   display: none;
   position: absolute;

editor/css/tabbed-editor.css

@@ -5,21 +5,21 @@
 }
 
 /* sizing utility classes */
-.tabbed-shorter .CodeMirror {
+.tabbed-shorter .cm-editor {
   height: 252px;
 }
 
-.tabbed-standard .CodeMirror {
+.tabbed-standard .cm-editor {
   height: 322px;
 }
 
-.tabbed-taller .CodeMirror {
+.tabbed-taller .cm-editor {
   height: 532px;
 }
 
-.tabbed-taller .CodeMirror,
-.tabbed-standard .CodeMirror,
-.tabbed-shorter .CodeMirror {
+.tabbed-taller .cm-editor,
+.tabbed-standard .cm-editor,
+.tabbed-shorter .cm-editor {
   border-right: 0 none;
   border-left: 0 none;
   border-bottom: 1px solid var(--border-primary);
@@ -138,9 +138,9 @@
     border-left: 1px solid var(--border-primary);
   }
 
-  .tabbed-taller .CodeMirror,
-  .tabbed-standard .CodeMirror,
-  .tabbed-shorter .CodeMirror {
+  .tabbed-taller .cm-editor,
+  .tabbed-standard .cm-editor,
+  .tabbed-shorter .cm-editor {
     border-bottom: 0 none;
   }
 }

editor/js/editable-js.js

@@ -6,6 +6,7 @@ import * as mceUtils from "./editor-libs/mce-utils.js";
 import "../css/editor-libs/ui-fonts.css";
 import "../css/editor-libs/common.css";
 import "../css/editable-js-and-wat.css";
+import {initCodeEditor, getEditorContent, languageJavaScript} from "./editor-libs/codemirror-editor.js";
 
 (function () {
   var codeBlock = document.getElementById("static-js");
@@ -24,24 +25,17 @@ import "../css/editable-js-and-wat.css";
    * output container
    */
   function applyCode() {
-    var codeMirrorDoc = codeMirror.getDoc();
-    updateOutput(codeMirrorDoc.getValue());
+    var currentValue = getEditorContent(codeMirror);
+    updateOutput(currentValue);
   }
 
   /**
    * Initialize CodeMirror
    */
   function initCodeMirror() {
     var editorContainer = document.getElementById("editor");
-    // eslint-disable-next-line new-cap
-    codeMirror = CodeMirror(editorContainer, {
-      inputStyle: "contenteditable",
-      lineNumbers: true,
-      mode: "javascript",
-      undoDepth: 5,
-      tabindex: 0,
-      value: codeBlock.textContent,
-    });
+
+    codeMirror = initCodeEditor(editorContainer, codeBlock.textContent, languageJavaScript());
   }
 
   /**

editor/js/editable-wat.js

@@ -8,6 +8,7 @@ import "../css/editor-libs/ui-fonts.css";
 import "../css/editor-libs/common.css";
 import "../css/editable-js-and-wat.css";
 import "../css/editor-libs/tabby.css";
+import {getEditorContent, initCodeEditor, languageJavaScript, languages, languageWAST} from "./editor-libs/codemirror-editor.js";
 
 (function () {
   var watCodeBlock = document.getElementById("static-wat");
@@ -61,11 +62,6 @@ import "../css/editor-libs/tabby.css";
         // now show the selected tabpanel
         selectedPanel.classList.remove("hidden");
         selectedPanel.setAttribute("aria-hidden", false);
-        // refresh the CodeMirror UI for this view
-        // editors[eventTarget.id].editor.refresh();
-
-        watCodeMirror.refresh();
-        jsCodeMirror.refresh();
       }
     });
 
@@ -152,40 +148,20 @@ import "../css/editor-libs/tabby.css";
    * output container
    */
   function applyCode() {
-    var wat = watCodeMirror.getDoc().getValue();
-    var js = jsCodeMirror.getDoc().getValue();
+    var wat = getEditorContent(watCodeMirror);
+    var js = getEditorContent(jsCodeMirror);
     updateOutput(wat, js);
   }
 
   /**
    * Initialize CodeMirror
    */
   function initCodeMirror() {
-    var editorContainer = document.getElementById("wat-editor");
-    // eslint-disable-next-line new-cap
-    watCodeMirror = CodeMirror(editorContainer, {
-      autofocus: true,
-      inputStyle: "contenteditable",
-      lineNumbers: true,
-      lineWrapping: true,
-      mode: "wast",
-      undoDepth: 5,
-      tabindex: 0,
-      value: watCodeBlock.textContent,
-    });
+    var watContainer = document.getElementById("wat-editor");
+    watCodeMirror = initCodeEditor(watContainer, watCodeBlock.textContent, languageWAST());
 
-    var editorContainer = document.getElementById("js-editor");
-    // eslint-disable-next-line new-cap
-    jsCodeMirror = CodeMirror(editorContainer, {
-      autofocus: true,
-      inputStyle: "contenteditable",
-      lineNumbers: true,
-      lineWrapping: true,
-      mode: "javascript",
-      undoDepth: 5,
-      tabindex: 0,
-      value: jsCodeBlock.textContent,
-    });
+    var jsContainer = document.getElementById("js-editor");
+    jsCodeMirror = initCodeEditor(jsContainer, jsCodeBlock.textContent, languageJavaScript());
   }
 
   /**