From e71aed7146cde31bfb695c431e7fe7325c08a764 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sun, 8 Aug 2021 00:13:16 +0200
Subject: [PATCH] Correctly import CodeMirror

---
 ts/editor/BUILD.bazel                |  2 ++
 ts/editor/MathjaxHandleEditor.svelte | 10 +++++++---
 ts/editor/codable.ts                 | 28 ++++++++++++++++++----------
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index 7e9644f92..1b49fdefe 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -191,5 +191,7 @@ svelte_check(
         "//ts/sass/bootstrap",
         "@npm//@types/bootstrap",
         "//ts/components",
+        "@npm//@types/codemirror",
+        "@npm//codemirror",
     ],
 )
diff --git a/ts/editor/MathjaxHandleEditor.svelte b/ts/editor/MathjaxHandleEditor.svelte
index 1068eaa39..38778c518 100644
--- a/ts/editor/MathjaxHandleEditor.svelte
+++ b/ts/editor/MathjaxHandleEditor.svelte
@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { onMount, createEventDispatcher } from "svelte";
     import { ChangeTimer } from "./change-timer";
 
-    import * as CodeMirror from "codemirror/lib/codemirror";
+    import CodeMirror from "codemirror";
     import "codemirror/mode/stex/stex";
     import "codemirror/addon/fold/foldcode";
     import "codemirror/addon/fold/foldgutter";
@@ -21,18 +21,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         inMathMode: true,
     };
 
+    const noop = () => {
+        /* noop */
+    };
+
     const codeMirrorOptions = {
         mode: latex,
         theme: "monokai",
         lineWrapping: true,
         matchTags: { bothTags: true },
-        extraKeys: { Tab: false, "Shift-Tab": false },
+        extraKeys: { Tab: noop, "Shift-Tab": noop },
         viewportMargin: Infinity,
         lineWiseCopyCut: false,
         autofocus: true,
     };
 
-    let codeMirror: CodeMirror;
+    let codeMirror: CodeMirror.EditorFromTextArea;
     const changeTimer = new ChangeTimer();
 
     function onInput() {
diff --git a/ts/editor/codable.ts b/ts/editor/codable.ts
index c4213c2be..a4336b2a5 100644
--- a/ts/editor/codable.ts
+++ b/ts/editor/codable.ts
@@ -1,7 +1,11 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import * as CodeMirror from "codemirror/lib/codemirror";
+/* eslint
+@typescript-eslint/no-non-null-assertion: "off",
+*/
+
+import CodeMirror from "codemirror";
 import "codemirror/mode/htmlmixed/htmlmixed";
 import "codemirror/mode/stex/stex";
 import "codemirror/addon/fold/foldcode";
@@ -24,6 +28,10 @@ const htmlanki = {
     },
 };
 
+const noop = () => {
+    /* noop */
+};
+
 const codeMirrorOptions = {
     mode: htmlanki,
     theme: "monokai",
@@ -33,7 +41,7 @@ const codeMirrorOptions = {
     gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
     matchTags: { bothTags: true },
     autoCloseTags: true,
-    extraKeys: { Tab: false, "Shift-Tab": false },
+    extraKeys: { Tab: noop, "Shift-Tab": noop },
     viewportMargin: Infinity,
     lineWiseCopyCut: false,
 };
@@ -47,7 +55,7 @@ function parseHTML(html: string): string {
 }
 
 export class Codable extends HTMLTextAreaElement {
-    codeMirror: CodeMirror | undefined;
+    codeMirror: CodeMirror.EditorFromTextArea | undefined;
 
     get active(): boolean {
         return Boolean(this.codeMirror);
@@ -55,14 +63,14 @@ export class Codable extends HTMLTextAreaElement {
 
     set fieldHTML(content: string) {
         if (this.active) {
-            this.codeMirror.setValue(content);
+            this.codeMirror?.setValue(content);
         } else {
             this.value = content;
         }
     }
 
     get fieldHTML(): string {
-        return parseHTML(this.active ? this.codeMirror.getValue() : this.value);
+        return parseHTML(this.active ? this.codeMirror!.getValue() : this.value);
     }
 
     connectedCallback(): void {
@@ -76,23 +84,23 @@ export class Codable extends HTMLTextAreaElement {
     }
 
     teardown(): string {
-        this.codeMirror.toTextArea();
+        this.codeMirror!.toTextArea();
         this.codeMirror = undefined;
         return this.fieldHTML;
     }
 
     focus(): void {
-        this.codeMirror.focus();
+        this.codeMirror!.focus();
         inCodable.set(true);
     }
 
     caretToEnd(): void {
-        this.codeMirror.setCursor(this.codeMirror.lineCount(), 0);
+        this.codeMirror!.setCursor(this.codeMirror!.lineCount(), 0);
     }
 
     surroundSelection(before: string, after: string): void {
-        const selection = this.codeMirror.getSelection();
-        this.codeMirror.replaceSelection(before + selection + after);
+        const selection = this.codeMirror!.getSelection();
+        this.codeMirror!.replaceSelection(before + selection + after);
     }
 
     onEnter(): void {