Display CodeMirror in editingArea

ts/editor/BUILD.bazel

@@ -73,6 +73,8 @@ ts_library(
         "//ts/html-filter",
         "//ts:image_module_support",
         "@npm//svelte",
+        "@npm//@types/codemirror",
+        "@npm//codemirror",
     ] + svelte_names,
 )
 

ts/editor/codable.ts

@@ -1,6 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import CodeMirror from "codemirror/src/codemirror"
+
 export class Codable extends HTMLTextAreaElement {
-    connectedCallback(): void {}
+    connectedCallback(): void {
+        CodeMirror.fromTextArea(this);
+    }
 }

ts/editor/editable.scss

@@ -1,3 +1,5 @@
+@import 'ts/sass/codemirror/codemirror';
+
 @use 'ts/sass/scrollbar';
 
 anki-editable {

ts/licenses.json

@@ -147,6 +147,15 @@
         "path": "node_modules/bootstrap",
         "licenseFile": "node_modules/bootstrap/LICENSE"
     },
+    "codemirror@5.61.1": {
+        "licenses": "MIT",
+        "repository": "https://github.com/codemirror/CodeMirror",
+        "publisher": "Marijn Haverbeke",
+        "email": "marijnh@gmail.com",
+        "url": "http://marijnhaverbeke.nl",
+        "path": "node_modules/codemirror",
+        "licenseFile": "node_modules/codemirror/LICENSE"
+    },
     "commander@7.2.0": {
         "licenses": "MIT",
         "repository": "https://github.com/tj/commander.js",

ts/package.json

@@ -12,6 +12,7 @@
         "@sqltools/formatter": "^1.2.2",
         "@tsconfig/svelte": "^1.0.10",
         "@types/bootstrap": "^5.0.12",
+        "@types/codemirror": "^5.60.0",
         "@types/d3": "^6.3.0",
         "@types/diff": "^5.0.0",
         "@types/jest": "^26.0.22",
@@ -60,6 +61,7 @@
         "@types/marked": "^2.0.2",
         "bootstrap": "=5.0.0-beta3",
         "bootstrap-icons": "^1.4.0",
+        "codemirror": "^5.61.1",
         "css-browser-selector": "^0.6.5",
         "d3": "^7.0.0",
         "intl-pluralrules": "^1.2.2",

ts/sass/BUILD.bazel

@@ -8,7 +8,7 @@ sass_library(
         "bootstrap-dark.scss",
     ],
     visibility = ["//visibility:public"],
-    deps = ["//ts/sass/bootstrap"],
+    deps = ["//ts/sass/bootstrap", "//ts/sass/codemirror"],
 )
 
 sass_library(

ts/sass/codemirror/BUILD.bazel

@@ -0,0 +1,23 @@
+load("//ts:vendor.bzl", "pkg_from_name", "vendor_js_lib")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_library")
+
+# copy codemirror sass files in
+vendor_js_lib(
+    name = "sass-sources",
+    include = [
+        "lib/codemirror.css",
+    ],
+    base = "external/npm/node_modules/codemirror/",
+    pkg = pkg_from_name("codemirror"),
+    strip_prefix = "lib/",
+    visibility = ["//visibility:private"],
+)
+
+# wrap them in a library
+sass_library(
+    name = "codemirror",
+    srcs = [
+        ":sass-sources",
+    ],
+    visibility = ["//visibility:public"],
+)

ts/yarn.lock

@@ -701,6 +701,13 @@
     "@popperjs/core" "^2.9.2"
     "@types/jquery" "*"
 
+"@types/codemirror@^5.60.0":
+  version "5.60.0"
+  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.0.tgz#bf14b728449ebd355c17054262a083639a995710"
+  integrity sha512-xgzXZyCzedLRNC67/Nn8rpBtTFnAsX2C+Q/LGoH6zgcpF/LqdNHJMHEOhqT1bwUcSp6kQdOIuKzRbeW9DYhEhg==
+  dependencies:
+    "@types/tern" "*"
+
 "@types/d3-array@*":
   version "2.12.1"
   resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-2.12.1.tgz#bee6857b812f1ecfd5e6832fd67f617b667dd024"
@@ -921,6 +928,11 @@
   resolved "https://registry.yarnpkg.com/@types/diff/-/diff-5.0.0.tgz#eb71e94feae62548282c4889308a3dfb57e36020"
   integrity sha512-jrm2K65CokCCX4NmowtA+MfXyuprZC13jbRuwprs6/04z/EcFg/MCwYdsHn+zgV4CQBiATiI7AEq7y1sZCtWKA==
 
+"@types/estree@*":
+  version "0.0.48"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.48.tgz#18dc8091b285df90db2f25aa7d906cfc394b7f74"
+  integrity sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==
+
 "@types/geojson@*":
   version "7946.0.7"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.7.tgz#c8fa532b60a0042219cdf173ca21a975ef0666ad"
@@ -1069,6 +1081,13 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
   integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
+"@types/tern@*":
+  version "0.23.3"
+  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.3.tgz#4b54538f04a88c9ff79de1f6f94f575a7f339460"
+  integrity sha512-imDtS4TAoTcXk0g7u4kkWqedB3E4qpjXzCpD2LU5M5NAXHzCDsypyvXSaG7mM8DKYkCRa7tFp4tS/lp/Wo7Q3w==
+  dependencies:
+    "@types/estree" "*"
+
 "@types/yargs-parser@*":
   version "20.2.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.0.tgz#dd3e6699ba3237f0348cd085e4698780204842f9"
@@ -1516,6 +1535,11 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
 
+codemirror@^5.61.1:
+  version "5.61.1"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.61.1.tgz#ccfc8a43b8fcfb8b12e8e75b5ffde48d541406e0"
+  integrity sha512-+D1NZjAucuzE93vJGbAaXzvoBHwp9nJZWWWF9utjv25+5AZUiah6CIlfb4ikG4MoDsFsCG8niiJH5++OO2LgIQ==
+
 collect-v8-coverage@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"