From 0f92664d4a5481541f9881dd841cfb7e01bd5665 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 6 Aug 2021 16:52:34 +0200
Subject: [PATCH] First implementation of MathjaxHandleEditor

+ use manual focus highlighting on editing-area
---
 ts/editable/editable-base.scss       |  4 ++
 ts/editable/mathjax-component.ts     | 13 +++++--
 ts/editor/BUILD.bazel                |  3 +-
 ts/editor/MathjaxHandle.svelte       | 40 ++++++++++++-------
 ts/editor/MathjaxHandleEditor.svelte | 57 ++++++++++++++++++++++++++++
 ts/editor/codable.ts                 |  1 -
 ts/editor/editor-field.ts            |  2 +-
 ts/editor/fields.scss                | 14 +++++++
 ts/sass/button-mixins.scss           |  2 +-
 9 files changed, 115 insertions(+), 21 deletions(-)
 create mode 100644 ts/editor/MathjaxHandleEditor.svelte

diff --git a/ts/editable/editable-base.scss b/ts/editable/editable-base.scss
index 360c9d83c..2c1323d6b 100644
--- a/ts/editable/editable-base.scss
+++ b/ts/editable/editable-base.scss
@@ -10,6 +10,10 @@ anki-editable {
         outline: none;
     }
 
+    &:focus {
+        outline: none;
+    }
+
     * {
         max-width: 100%;
     }
diff --git a/ts/editable/mathjax-component.ts b/ts/editable/mathjax-component.ts
index cb4af2b74..f3d137ceb 100644
--- a/ts/editable/mathjax-component.ts
+++ b/ts/editable/mathjax-component.ts
@@ -87,7 +87,7 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax
     }
 
     static get observedAttributes(): string[] {
-        return ["block"];
+        return ["block", "data-mathjax"];
     }
 
     connectedCallback(): void {
@@ -99,9 +99,14 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax
         this.disconnect();
     }
 
-    attributeChangedCallback(_name: string, _old: string, newValue: string): void {
-        this.block = newValue !== "false";
-        this.component?.$set({ block: this.block });
+    attributeChangedCallback(name: string, _old: string, newValue: string): void {
+        switch (name) {
+            case "block":
+                this.block = newValue !== "false";
+                this.component?.$set({ block: this.block });
+            case "data-mathjax":
+                this.component?.$set({ mathjax: newValue });
+        }
     }
 
     decorate(): void {
diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index 58091e799..aa5d1d298 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -33,8 +33,9 @@ compile_sass(
     visibility = ["//visibility:public"],
     deps = [
         "//ts/sass:base_lib",
-        "//ts/sass:buttons_lib",
         "//ts/sass:scrollbar_lib",
+        "//ts/sass:buttons_lib",
+        "//ts/sass:button_mixins_lib",
     ],
 )
 
diff --git a/ts/editor/MathjaxHandle.svelte b/ts/editor/MathjaxHandle.svelte
index bdbcda1b4..e6dd3d626 100644
--- a/ts/editor/MathjaxHandle.svelte
+++ b/ts/editor/MathjaxHandle.svelte
@@ -5,18 +5,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import WithDropdown from "components/WithDropdown.svelte";
     import ButtonDropdown from "components/ButtonDropdown.svelte";
+    import DropdownMenu from "components/DropdownMenu.svelte";
     import Item from "components/Item.svelte";
 
     import HandleSelection from "./HandleSelection.svelte";
     import HandleBackground from "./HandleBackground.svelte";
     import HandleControl from "./HandleControl.svelte";
     import MathjaxHandleInlineBlock from "./MathjaxHandleInlineBlock.svelte";
+    import MathjaxHandleEditor from "./MathjaxHandleEditor.svelte";
 
     export let activeImage: HTMLImageElement | null = null;
     export let container: HTMLElement;
     export let isRtl: boolean;
 
     let updateSelection: () => void;
+    let edit = false;
 </script>
 
 <WithDropdown
@@ -35,22 +38,33 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             bind:updateSelection
             on:mount={(event) => createDropdown(event.detail.selection)}
         >
-            <HandleBackground on:click={(event) => event.stopPropagation()} />
+            <HandleBackground
+                on:click={(event) => event.stopPropagation()}
+                on:dblclick={() => (edit = true)}
+            />
 
             <HandleControl offsetX={1} offsetY={1} />
         </HandleSelection>
 
-        <ButtonDropdown>
-            <div
-                on:click={() => {
-                    updateSelection();
-                    dropdownObject.update();
-                }}
-            >
-                <Item>
-                    <MathjaxHandleInlineBlock {activeImage} {isRtl} />
-                </Item>
-            </div>
-        </ButtonDropdown>
+        {#if !edit}
+            <DropdownMenu>
+                <MathjaxHandleEditor
+                    initialValue={activeImage.parentElement?.dataset.mathjax ?? ""}
+                />
+            </DropdownMenu>
+        {:else}
+            <ButtonDropdown>
+                <div
+                    on:click={() => {
+                        updateSelection();
+                        dropdownObject.update();
+                    }}
+                >
+                    <Item>
+                        <MathjaxHandleInlineBlock {activeImage} {isRtl} />
+                    </Item>
+                </div>
+            </ButtonDropdown>
+        {/if}
     {/if}
 </WithDropdown>
diff --git a/ts/editor/MathjaxHandleEditor.svelte b/ts/editor/MathjaxHandleEditor.svelte
new file mode 100644
index 000000000..fc996d89e
--- /dev/null
+++ b/ts/editor/MathjaxHandleEditor.svelte
@@ -0,0 +1,57 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import * as CodeMirror from "codemirror/lib/codemirror";
+    import "codemirror/mode/stex/stex";
+    import "codemirror/addon/fold/foldcode";
+    import "codemirror/addon/fold/foldgutter";
+    import "codemirror/addon/fold/xml-fold";
+    import "codemirror/addon/edit/matchtags.js";
+    import "codemirror/addon/edit/closetag.js";
+
+    export let initialValue: string;
+
+    const latex = {
+        name: "stex",
+        inMathMode: true,
+    };
+
+    const codeMirrorOptions = {
+        mode: latex,
+        theme: "monokai",
+        /* lineNumbers: true, */
+        /* lineWrapping: true, */
+        /* foldGutter: true, */
+        /* gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], */
+        /* matchTags: { bothTags: true }, */
+        /* extraKeys: { Tab: false, "Shift-Tab": false }, */
+        /* viewportMargin: Infinity, */
+        /* lineWiseCopyCut: false, */
+        /* autofocus: true, */
+    };
+
+    let codeMirror: CodeMirror;
+
+    function openCodemirror(textarea: HTMLTextAreaElement): void {
+        codeMirror = CodeMirror.fromTextArea(textarea, codeMirrorOptions);
+        codeMirror.setCursor(codeMirror.lineCount(), 0);
+    }
+
+    function autofocus(textarea: HTMLTextAreaElement): void {
+        textarea.focus();
+    }
+</script>
+
+<!-- <textarea bind:value use:openCodemirror /> -->
+<div on:click|stopPropagation on:focus|stopPropagation on:keydown|stopPropagation>
+    <textarea
+        value={initialValue}
+        on:mouseup|preventDefault|stopPropagation
+        on:click|stopPropagation
+        on:focusin|stopPropagation
+        on:focusout|stopPropagation
+        use:autofocus
+    />
+</div>
diff --git a/ts/editor/codable.ts b/ts/editor/codable.ts
index 3839c9551..88e0477fc 100644
--- a/ts/editor/codable.ts
+++ b/ts/editor/codable.ts
@@ -2,7 +2,6 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 import * as CodeMirror from "codemirror/lib/codemirror";
-import "codemirror/mode/python/python";
 import "codemirror/mode/htmlmixed/htmlmixed";
 import "codemirror/mode/stex/stex";
 import "codemirror/addon/fold/foldcode";
diff --git a/ts/editor/editor-field.ts b/ts/editor/editor-field.ts
index 01ff6f6e0..dd62c6a48 100644
--- a/ts/editor/editor-field.ts
+++ b/ts/editor/editor-field.ts
@@ -10,7 +10,7 @@ export class EditorField extends HTMLDivElement {
 
     constructor() {
         super();
-        this.classList.add("editor-field");
+        this.className = "editorfield";
 
         this.labelContainer = document.createElement("div", {
             is: "anki-label-container",
diff --git a/ts/editor/fields.scss b/ts/editor/fields.scss
index 51009af22..88e91285a 100644
--- a/ts/editor/fields.scss
+++ b/ts/editor/fields.scss
@@ -3,6 +3,7 @@
 
 @use 'base';
 @use 'scrollbar';
+@use 'button-mixins';
 
 .nightMode {
     @include scrollbar.night-mode;
@@ -29,6 +30,11 @@
     }
 }
 
+.editorfield {
+    margin: 0 2px;
+}
+
+/* editing-area */
 .field {
     position: relative;
 
@@ -40,6 +46,14 @@
         // (https://github.com/ankitects/anki/pull/1278)
         background-image: linear-gradient(var(--flag1-bg), var(--flag1-bg));
     }
+
+    &:focus-within {
+        outline: 2px solid button-mixins.$focus-color;
+    }
+
+    &:focus {
+        outline: none;
+    }
 }
 
 .fname {
diff --git a/ts/sass/button-mixins.scss b/ts/sass/button-mixins.scss
index c46c1e451..f39f37e9a 100644
--- a/ts/sass/button-mixins.scss
+++ b/ts/sass/button-mixins.scss
@@ -112,7 +112,7 @@ $btn-base-color-night: #666;
 }
 
 // should be similar to -webkit-focus-ring-color
-$focus-color: $blue;
+$focus-color: rgba(21 97 174);
 
 @mixin impressed-shadow($intensity) {
     box-shadow: inset 0 calc(var(--buttons-size) / 15) calc(var(--buttons-size) / 5)