Apply the Monokai theme

ts/editor/TemplateButtons.svelte

@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function onHtmlEdit() {
         forEditorField([], (field) => {
             field.editingArea.toggleHtmlEdit();
-        })
+        });
     }
 </script>
 
@@ -170,7 +170,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut={"Control+Shift+X"} let:createShortcut let:shortcutLabel>
             <WithState
                 key="htmledit"
-                update={(event) => { console.log(event); return true }}
+                update={(event) => {
+                    console.log(event);
+                    return true;
+                }}
                 let:state={active}
                 let:updateState
             >

ts/editor/codable.ts

@@ -1,12 +1,14 @@
 // 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"
+import CodeMirror from "codemirror/src/codemirror";
 
 const codeMirrorOptions = {
     lineNumbers: true,
+    lineWrapping: true,
     mode: "htmlmixed",
-}
+    theme: "monokai",
+};
 
 export class Codable extends HTMLTextAreaElement {
     codeMirror: any;
@@ -16,7 +18,7 @@ export class Codable extends HTMLTextAreaElement {
     }
 
     toggle(html: string): string {
-        return this.codeMirror ?  this.teardown() : this.setup(html);
+        return this.codeMirror ? this.teardown() : this.setup(html);
     }
 
     setup(html: string): string {
@@ -28,7 +30,7 @@ export class Codable extends HTMLTextAreaElement {
     teardown(): string {
         this.codeMirror.toTextArea();
         this.codeMirror = undefined;
-        console.log(this.innerHTML)
+        console.log(this.innerHTML);
         return this.innerHTML;
     }
 }

ts/editor/editable.scss

@@ -1,6 +1,7 @@
 @use 'ts/sass/scrollbar';
 
-@import 'ts/sass/codemirror/codemirror';
+@import "ts/sass/codemirror/lib/codemirror";
+@import "ts/sass/codemirror/theme/monokai";
 
 anki-editable {
     display: block;

ts/editor/editingArea.ts

@@ -44,7 +44,9 @@ export class EditingArea extends HTMLDivElement {
         this.editable = document.createElement("anki-editable") as Editable;
         this.shadowRoot!.appendChild(this.editable);
 
-        this.codable = document.createElement("textarea", { is: "anki-codable" }) as Codable;
+        this.codable = document.createElement("textarea", {
+            is: "anki-codable",
+        }) as Codable;
         this.shadowRoot!.appendChild(this.codable);
     }
 

ts/sass/codemirror/BUILD.bazel

@@ -6,10 +6,10 @@ vendor_js_lib(
     name = "sass-sources",
     include = [
         "lib/codemirror.css",
+        "theme",
     ],
     base = "external/npm/node_modules/codemirror/",
     pkg = pkg_from_name("codemirror"),
-    strip_prefix = "lib/",
     visibility = ["//visibility:private"],
 )