feat: replace Ace with CodeMirror 6 (#46)

* feat: replace Ace editor with CodeMirror 6 (WIP) * feat: keep 10 MB as safe max for code mode * fix: get indentation unit working * fix: implement `setSelection` for CodeMirror * fix: update dependencies and devDependencies * feat: implement linting (validation and parse errors) in CodeMirror editor * fix: quickkeys for format/compact in code mode
josdejong · Mar 8, 2022 · 71cc856 · 71cc856
1 parent 7353320
commit 71cc856
Show file tree

Hide file tree

Showing 20 changed files with 1,793 additions and 1,085 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,13 +23,24 @@
     "lint": "prettier --check --plugin-search-dir=. .",
     "__lint": "prettier --check --plugin-search-dir=. . && eslint --cache --ignore-path .gitignore .",
     "format": "prettier --write --plugin-search-dir=. .",
-    "prepare": "husky install && cd tools && node generateEmbeddedAceJsonWorker.js && node generateDiffSequenceEsm.js && cd ..",
+    "prepare": "husky install && cd tools && node generateDiffSequenceEsm.js && cd ..",
     "release": "npm run lint && npm test && standard-version && npm run package && git push && git push --tag && npm publish package/"
   },
   "dependencies": {
+    "@codemirror/basic-setup": "0.19.1",
+    "@codemirror/commands": "0.19.8",
+    "@codemirror/gutter": "0.19.9",
+    "@codemirror/highlight": "0.19.7",
+    "@codemirror/history": "0.19.2",
+    "@codemirror/lang-json": "0.19.2",
+    "@codemirror/language": "0.19.8",
+    "@codemirror/lint": "0.19.6",
+    "@codemirror/search": "0.19.9",
+    "@codemirror/state": "0.19.9",
+    "@codemirror/view": "0.19.46",
+    "@fontsource/fira-mono": "4.5.3",
     "@fortawesome/free-regular-svg-icons": "^6.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
-    "ace-builds": "^1.4.14",
     "ajv": "^8.10.0",
     "classnames": "^2.3.1",
     "diff-sequences": "^27.5.1",
@@ -39,42 +50,42 @@
     "jsonrepair": "^2.2.1",
     "lodash-es": "^4.17.21",
     "natural-compare-lite": "^1.4.0",
-    "sass": "^1.49.7",
+    "sass": "^1.49.9",
     "svelte-awesome": "^2.4.4",
     "svelte-select": "^4.4.7",
-    "svelte-simple-modal": "^1.3.0",
+    "svelte-simple-modal": "^1.3.1",
     "vanilla-picker": "^2.12.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "16.1.0",
-    "@commitlint/config-conventional": "16.0.0",
-    "@rollup/plugin-commonjs": "21.0.1",
+    "@commitlint/cli": "16.2.1",
+    "@commitlint/config-conventional": "16.2.1",
+    "@rollup/plugin-commonjs": "21.0.2",
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "13.1.3",
-    "@rollup/plugin-typescript": "8.3.0",
-    "@sveltejs/kit": "1.0.0-next.260",
+    "@rollup/plugin-typescript": "8.3.1",
+    "@sveltejs/kit": "1.0.0-next.294",
     "@types/cookie": "0.4.1",
     "@types/lodash-es": "4.17.6",
     "@types/mocha": "9.1.0",
-    "@typescript-eslint/eslint-plugin": "5.11.0",
-    "@typescript-eslint/parser": "5.11.0",
-    "eslint": "8.8.0",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-svelte3": "3.4.0",
+    "@typescript-eslint/eslint-plugin": "5.13.0",
+    "@typescript-eslint/parser": "5.13.0",
+    "eslint": "8.10.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-svelte3": "3.4.1",
     "husky": "7.0.4",
-    "mocha": "9.2.0",
+    "mocha": "9.2.1",
     "prettier": "2.5.1",
     "prettier-plugin-svelte": "2.6.0",
-    "rollup": "2.67.1",
+    "rollup": "2.70.0",
     "rollup-plugin-svelte": "7.1.0",
     "rollup-plugin-terser": "7.0.2",
     "standard-version": "9.3.2",
     "svelte": "3.46.4",
-    "svelte-check": "2.4.3",
-    "svelte-preprocess": "4.10.2",
-    "svelte2tsx": "0.5.3",
-    "ts-node": "10.5.0",
+    "svelte-check": "2.4.5",
+    "svelte-preprocess": "4.10.4",
+    "svelte2tsx": "0.5.5",
+    "ts-node": "10.7.0",
     "tslib": "2.3.1",
-    "typescript": "4.5.5"
+    "typescript": "4.6.2"
   }
 }
diff --git a/src/lib/components/controls/Message.scss b/src/lib/components/controls/Message.scss
@@ -18,6 +18,14 @@
   .text {
     flex: 1;
     min-width: 60%;
+
+    &.clickable {
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
   }
 
   &.error {

diff --git a/src/lib/components/controls/Message.svelte b/src/lib/components/controls/Message.svelte
@@ -7,10 +7,17 @@
   export let icon = null
   export let message = null
   export let actions = []
+  export let onClick = null
+
+  function handleClick() {
+    if (onClick) {
+      onClick()
+    }
+  }
 </script>
 
 <div class="message {type}">
-  <div class="text">
+  <div class="text" class:clickable={onClick !== null} on:click={handleClick}>
     {#if icon}
       <Icon data={icon} />
     {/if}

diff --git a/src/lib/components/controls/ValidationErrorsOverview.svelte b/src/lib/components/controls/ValidationErrorsOverview.svelte
@@ -13,7 +13,7 @@
   /**
    * @type {ValidationError[]}
    **/
-  export let validationErrorsList
+  export let validationErrors
 
   /**
    * @type {function(error: ValidationError)}
@@ -29,16 +29,14 @@
   function expand() {
     expanded = true
   }
-
-  $: filteredValidationErrors = validationErrorsList.filter((error) => !error.isChildError)
 </script>
 
-{#if !isEmpty(validationErrorsList)}
+{#if !isEmpty(validationErrors)}
   <div class="validation-errors-overview">
-    {#if expanded || validationErrorsList.length === 1}
+    {#if expanded || validationErrors.length === 1}
       <table>
         <tbody>
-          {#each validationErrorsList as validationError, index}
+          {#each validationErrors as validationError, index}
             <tr
               class="validation-error"
               on:click={() => {
@@ -56,7 +54,7 @@
                 {validationError.message}
               </td>
               <td class="validation-error-action">
-                {#if index === 0 && validationErrorsList.length > 1}
+                {#if index === 0 && validationErrors.length > 1}
                   <button
                     type="button"
                     class="validation-errors-collapse"
@@ -79,7 +77,7 @@
               <Icon data={faExclamationTriangle} />
             </td>
             <td>
-              {validationErrorsList.length} validation errors
+              {validationErrors.length} validation errors
               <div class="validation-errors-expand">
                 <Icon data={faAngleRight} />
               </div>

diff --git a/src/lib/components/modes/codemode/CodeMode.scss b/src/lib/components/modes/codemode/CodeMode.scss
@@ -10,12 +10,26 @@
   .contents {
     flex: 1;
     display: flex;
-    flex-direction: column;
+    overflow: hidden;
+    min-width: 0;
+    min-height: 0;
 
     &:not(.visible) {
       visibility: hidden;
     }
 
+    :global(.cm-editor) {
+      flex: 1;
+      overflow: hidden;
+
+      :global(.cm-scroller) {
+        font-family: $font-family-mono;
+        font-size: $font-size-mono;
+        line-height: 1.3em;
+        color: $black;
+      }
+    }
+
     .loading-space {
       flex: 1;
     }