Use default colors for CodeMirror in light theme Anki (#1578)

Refactor PlainTextInput

Put CodeMirror themes into variables

ts/editor/CodeMirror.svelte

@@ -15,6 +15,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Writable } from "svelte/store";
     import storeSubscribe from "../sveltelib/store-subscribe";
     import { directionKey } from "../lib/context-keys";
+    import { lightCodeMirrorTheme, darkCodeMirrorTheme } from "./code-mirror";
+    import { pageTheme } from "../sveltelib/theme";
 
     export let configuration: CodeMirror.EditorConfiguration;
     export let code: Writable<string>;
@@ -71,6 +73,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         subscribe();
     }
 
+    $: codeMirror?.setOption(
+        "theme",
+        $pageTheme.isDark ? darkCodeMirrorTheme : lightCodeMirrorTheme,
+    );
+
     export const api = Object.create(
         {},
         {
@@ -86,6 +93,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .code-mirror :global(.CodeMirror) {
         height: auto;
-        padding: 6px 0;
     }
 </style>

ts/editor/PlainTextInput.svelte

@@ -20,6 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { CodeMirrorAPI } from "./CodeMirror.svelte";
     import { tick, onMount } from "svelte";
     import { writable } from "svelte/store";
+    import { pageTheme } from "../sveltelib/theme";
     import { getDecoratedElements } from "./DecoratedElements.svelte";
     import { getEditingArea } from "./EditingArea.svelte";
     import { htmlanki, baseOptions, gutterOptions } from "./code-mirror";
@@ -46,6 +47,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const parser = new DOMParser();
 
+    function removeTag(element: HTMLElement, tagName: string): void {
+        for (const elem of element.getElementsByTagName(tagName)) {
+            elem.remove();
+        }
+    }
+
     function parseAsHTML(html: string): string {
         const doc = parser.parseFromString(
             parsingInstructions.join("") + html,
@@ -53,17 +60,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         );
         const body = doc.body;
 
-        for (const script of body.getElementsByTagName("script")) {
+        removeTag(body, "script");
-            script.remove();
+        removeTag(body, "link");
-        }
+        removeTag(body, "style");
-
-        for (const script of body.getElementsByTagName("link")) {
-            script.remove();
-        }
-
-        for (const style of body.getElementsByTagName("style")) {
-            style.remove();
-        }
 
         return doc.body.innerHTML;
     }
@@ -146,7 +145,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     });
 </script>
 
-<div class="plain-text-input" class:hidden on:focusin on:focusout>
+<div
+    class="plain-text-input"
+    class:light-theme={!$pageTheme.isDark}
+    class:hidden
+    on:focusin
+    on:focusout
+>
     <CodeMirror
         {configuration}
         {code}
@@ -163,8 +168,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             border-radius: 0 0 5px 5px;
         }
 
+        :global(.CodeMirror-lines) {
+            padding: 6px 0;
+        }
+
         &.hidden {
             display: none;
         }
     }
+
+    .light-theme :global(.CodeMirror) {
+        border-top: 1px solid #ddd;
+    }
 </style>

ts/editor/code-mirror.ts

@@ -2,8 +2,8 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 import "codemirror/lib/codemirror.css";
-import "codemirror/theme/monokai.css";
 import "codemirror/addon/fold/foldgutter.css";
+import "codemirror/theme/monokai.css";
 
 import CodeMirror from "codemirror";
 import "codemirror/mode/htmlmixed/htmlmixed";
@@ -29,8 +29,11 @@ export const htmlanki = {
     },
 };
 
+export const lightCodeMirrorTheme = "default";
+export const darkCodeMirrorTheme = "monokai";
+
 export const baseOptions: CodeMirror.EditorConfiguration = {
-    theme: "monokai",
+    theme: lightCodeMirrorTheme,
     lineWrapping: true,
     matchTags: { bothTags: true },
     autoCloseTags: true,

ts/editor/mathjax-overlay/MathjaxMenu.svelte

@@ -10,6 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Writable } from "svelte/store";
     import { createEventDispatcher } from "svelte";
     import { placeCaretAfter } from "../../domlib/place-caret";
+    import { pageTheme } from "../../sveltelib/theme";
 
     export let element: Element;
     export let code: Writable<string>;
@@ -33,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher();
 </script>
 
-<div class="mathjax-menu">
+<div class="mathjax-menu" class:light-theme={!$pageTheme.isDark}>
     <slot />
 
     <DropdownMenu>
@@ -68,4 +69,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .mathjax-menu :global(.dropdown-menu) {
         border-color: var(--border);
     }
+
+    .light-theme {
+        :global(.dropdown-menu) {
+            background-color: var(--window-bg);
+        }
+
+        :global(.CodeMirror) {
+            border-width: 1px 0;
+            border-style: solid;
+            border-color: var(--border);
+        }
+    }
 </style>