From de77e40e4d4d179cf3c0037c0b4e017dda453cd5 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 25 Mar 2021 21:11:40 +0100
Subject: [PATCH 01/97] Add ts/editor-toolbar

---
 qt/aqt/data/web/css/BUILD.bazel        |  9 +++
 qt/aqt/data/web/js/BUILD.bazel         |  9 +++
 ts/editor-toolbar/BUILD.bazel          | 92 ++++++++++++++++++++++++++
 ts/editor-toolbar/EditorToolbar.svelte | 10 +++
 ts/editor-toolbar/LeftButton.svelte    |  0
 ts/editor-toolbar/RightButton.svelte   |  0
 ts/editor-toolbar/index.ts             | 23 +++++++
 ts/sveltelib/WithBase.svelte           | 13 ++++
 8 files changed, 156 insertions(+)
 create mode 100644 ts/editor-toolbar/BUILD.bazel
 create mode 100644 ts/editor-toolbar/EditorToolbar.svelte
 create mode 100644 ts/editor-toolbar/LeftButton.svelte
 create mode 100644 ts/editor-toolbar/RightButton.svelte
 create mode 100644 ts/editor-toolbar/index.ts
 create mode 100644 ts/sveltelib/WithBase.svelte

diff --git a/qt/aqt/data/web/css/BUILD.bazel b/qt/aqt/data/web/css/BUILD.bazel
index e29acf7ed..cb92658a0 100644
--- a/qt/aqt/data/web/css/BUILD.bazel
+++ b/qt/aqt/data/web/css/BUILD.bazel
@@ -26,11 +26,20 @@ copy_files_into_group(
     package = "//ts/editor",
 )
 
+copy_files_into_group(
+    name = "editor-toolbar",
+    srcs = [
+        "editor-toolbar.css",
+    ],
+    package = "//ts/editor-toolbar",
+)
+
 filegroup(
     name = "css",
     srcs = [
         "css_local",
         "editor",
+        "editor-toolbar",
     ],
     visibility = ["//qt:__subpackages__"],
 )
diff --git a/qt/aqt/data/web/js/BUILD.bazel b/qt/aqt/data/web/js/BUILD.bazel
index b138bd31b..83f4718fc 100644
--- a/qt/aqt/data/web/js/BUILD.bazel
+++ b/qt/aqt/data/web/js/BUILD.bazel
@@ -37,11 +37,20 @@ copy_files_into_group(
     package = "//ts/editor",
 )
 
+copy_files_into_group(
+    name = "editor-toolbar",
+    srcs = [
+        "editor-toolbar.js",
+    ],
+    package = "//ts/editor-toolbar",
+)
+
 filegroup(
     name = "js",
     srcs = [
         "aqt_es5",
         "editor",
+        "editor-toolbar",
         "mathjax.js",
         "//qt/aqt/data/web/js/vendor",
     ],
diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
new file mode 100644
index 000000000..e86d08974
--- /dev/null
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -0,0 +1,92 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
+load("//ts:prettier.bzl", "prettier_test")
+load("//ts:eslint.bzl", "eslint_test")
+load("//ts:esbuild.bzl", "esbuild")
+
+svelte_files = glob(["*.svelte"])
+
+svelte_names = [f.replace(".svelte", "") for f in svelte_files]
+
+compile_svelte(
+    name = "svelte",
+    srcs = svelte_files,
+)
+
+ts_library(
+    name = "index",
+    srcs = ["index.ts"],
+    deps = [
+        "EditorToolbar",
+        "lib",
+        "//ts/lib",
+        "@npm//svelte",
+        "@npm//svelte2tsx",
+    ],
+)
+
+ts_library(
+    name = "lib",
+    srcs = glob(
+        ["*.ts"],
+        exclude = ["index.ts"],
+    ),
+    deps = [
+        "//ts/lib",
+        "//ts/lib:backend_proto",
+        "@npm//svelte",
+    ],
+)
+
+esbuild(
+    name = "editor-toolbar",
+    srcs = [
+        "//ts:protobuf-shim.js",
+    ],
+    args = [
+        "--global-name=anki",
+        "--inject:ts/protobuf-shim.js",
+    ],
+    entry_point = "index.ts",
+    external = [
+        "protobufjs/light",
+    ],
+    output_css = True,
+    visibility = ["//visibility:public"],
+    deps = [
+        "//ts/lib",
+        "//ts/lib:backend_proto",
+        "//ts/lib:fluent_proto",
+        ":index",
+        "//ts/sass:core_css",
+    ] + svelte_names,
+)
+
+# Tests
+################
+
+prettier_test(
+    name = "format_check",
+    srcs = glob([
+        "*.ts",
+        "*.svelte",
+    ]),
+)
+
+eslint_test(
+    name = "eslint",
+    srcs = glob(
+        [
+            "*.ts",
+        ],
+    ),
+)
+
+svelte_check(
+    name = "svelte_check",
+    srcs = glob([
+        "*.ts",
+        "*.svelte",
+    ]),
+)
+
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
new file mode 100644
index 000000000..b433dc59f
--- /dev/null
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -0,0 +1,10 @@
+<script>
+</script>
+
+<style lang="scss">
+    p {
+        color: red;
+        }
+</style>
+
+<p>Test</p>
diff --git a/ts/editor-toolbar/LeftButton.svelte b/ts/editor-toolbar/LeftButton.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/ts/editor-toolbar/RightButton.svelte b/ts/editor-toolbar/RightButton.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
new file mode 100644
index 000000000..2cf8f5122
--- /dev/null
+++ b/ts/editor-toolbar/index.ts
@@ -0,0 +1,23 @@
+import type { SvelteComponent } from "svelte";
+import { setupI18n } from "anki/i18n";
+import { checkNightMode } from "anki/nightmode";
+import EditorToolbarSvelte from "./EditorToolbar.svelte";
+
+class EditorToolbar extends HTMLElement {
+    component?: SvelteComponent;
+
+    async connectedCallback(): Promise<void> {
+        const nightMode = checkNightMode();
+        const i18n = await setupI18n();
+
+        this.component = new EditorToolbarSvelte({
+            target: this,
+            props: {
+                i18n,
+                nightMode,
+            },
+        });
+    }
+}
+
+customElements.define("anki-editor-toolbar", EditorToolbar);
diff --git a/ts/sveltelib/WithBase.svelte b/ts/sveltelib/WithBase.svelte
new file mode 100644
index 000000000..9b9156843
--- /dev/null
+++ b/ts/sveltelib/WithBase.svelte
@@ -0,0 +1,13 @@
+<script lang="typescript">
+    import useAsync from "sveltelib/async";
+    import { setupI18n } from "anki/i18n";
+    import { checkNightMode } from "anki/nightmode";
+
+    const nightMode = checkNightMode();
+
+    const { loading, value: i18n } = useAsync(() => setupI18n());
+</script>
+
+{#if !$loading}
+    <slot i18n={$i18n} {nightMode} />
+{/if}

From 7787a7827fe9cffe5ed08478bbc775e2aebd6c65 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 25 Mar 2021 23:32:23 +0100
Subject: [PATCH 02/97] First implementation

---
 qt/aqt/editor.py                        |  7 +-
 ts/editor-toolbar/ButtonBar.svelte      | 20 ++++++
 ts/editor-toolbar/ButtonBarOuter.svelte | 17 +++++
 ts/editor-toolbar/ButtonItem.svelte     |  7 ++
 ts/editor-toolbar/EditorToolbar.svelte  | 31 +++++++--
 ts/editor-toolbar/LeftButton.svelte     | 20 ++++++
 ts/editor-toolbar/RightButton.svelte    | 15 ++++
 ts/editor-toolbar/_buttons.scss         | 51 ++++++++++++++
 ts/editor-toolbar/index.ts              |  5 +-
 ts/editor/editor.scss                   | 91 -------------------------
 10 files changed, 159 insertions(+), 105 deletions(-)
 create mode 100644 ts/editor-toolbar/ButtonBar.svelte
 create mode 100644 ts/editor-toolbar/ButtonBarOuter.svelte
 create mode 100644 ts/editor-toolbar/ButtonItem.svelte
 create mode 100644 ts/editor-toolbar/_buttons.scss

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index e6db3b05f..f98e60d24 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -82,9 +82,7 @@ _html = """
 }
 </style>
 <div>
-    <div id="topbutsOuter">
-        %s
-    </div>
+    <anki-editor-toolbar></anki-editor-toolbar>
     <div id="fields">
     </div>
     <div id="dupes" class="is-inactive">
@@ -233,10 +231,13 @@ class Editor:
             _html % (bgcol, topbuts, tr.editing_show_duplicates()),
             css=[
                 "css/editor.css",
+                "css/editor-toolbar.css",
             ],
             js=[
                 "js/vendor/jquery.min.js",
+                "js/vendor/protobuf.min.js",
                 "js/editor.js",
+                "js/editor-toolbar.js",
             ],
             context=self,
             default_css=False,
diff --git a/ts/editor-toolbar/ButtonBar.svelte b/ts/editor-toolbar/ButtonBar.svelte
new file mode 100644
index 000000000..fa8d980cb
--- /dev/null
+++ b/ts/editor-toolbar/ButtonBar.svelte
@@ -0,0 +1,20 @@
+<style lang="scss">
+    ul {
+        padding-left: 0;
+        margin-bottom: 2px;
+
+        & > :global(*) {
+            margin: 0 4px;
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+</style>
+
+<ul><slot/></ul>
diff --git a/ts/editor-toolbar/ButtonBarOuter.svelte b/ts/editor-toolbar/ButtonBarOuter.svelte
new file mode 100644
index 000000000..064d60c4c
--- /dev/null
+++ b/ts/editor-toolbar/ButtonBarOuter.svelte
@@ -0,0 +1,17 @@
+<style lang="scss">
+    div {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        position: sticky;
+        top: 0;
+        left: 0;
+        z-index: 5;
+        padding: 2px;
+
+        background: var(--bg-color);
+    }
+</style>
+
+<div><slot /></div>
diff --git a/ts/editor-toolbar/ButtonItem.svelte b/ts/editor-toolbar/ButtonItem.svelte
new file mode 100644
index 000000000..88b9f924b
--- /dev/null
+++ b/ts/editor-toolbar/ButtonItem.svelte
@@ -0,0 +1,7 @@
+<style lang="scss">
+    li {
+        display: inline;
+    }
+</style>
+
+<li><slot/></li>
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index b433dc59f..e2231c458 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,10 +1,27 @@
-<script>
+<script lang="typescript">
+    import ButtonBarOuter from "./ButtonBarOuter.svelte";
+    import ButtonBar from "./ButtonBar.svelte";
+
+    import LeftButton from "./LeftButton.svelte";
+    import RightButton from "./RightButton.svelte";
+
+    export let leftButtons = ["Fields...", "Cards..."];
+    export let rightButtons = ["bi bi-type-bold", "bi bi-pin-angle"];
+    export let nightMode: boolean;
+
+    console.log(nightMode);
 </script>
 
-<style lang="scss">
-    p {
-        color: red;
-        }
-</style>
+<ButtonBarOuter>
+    <ButtonBar>
+        {#each leftButtons as leftButton}
+            <LeftButton>{leftButton}</LeftButton>
+        {/each}
+    </ButtonBar>
 
-<p>Test</p>
+    <ButtonBar>
+        {#each rightButtons as rightButton}
+            <RightButton className={rightButton} />
+        {/each}
+    </ButtonBar>
+</ButtonBarOuter>
diff --git a/ts/editor-toolbar/LeftButton.svelte b/ts/editor-toolbar/LeftButton.svelte
index e69de29bb..c2b9388d5 100644
--- a/ts/editor-toolbar/LeftButton.svelte
+++ b/ts/editor-toolbar/LeftButton.svelte
@@ -0,0 +1,20 @@
+<script lang="typescript">
+    import ButtonItem from "./ButtonItem.svelte";
+</script>
+<style lang="scss">
+    button {
+        padding: 3px 10px;
+        /* fit RightButton */
+        vertical-align: -.425em;
+    }
+
+    button:focus {
+        0 0 0 0.05rem rgba(255, 255, 255, 0.5);
+    }
+</style>
+
+<ButtonItem>
+    <button type="button" class="btn btn-secondary" on:click>
+        <slot />
+    </button>
+</ButtonItem>
diff --git a/ts/editor-toolbar/RightButton.svelte b/ts/editor-toolbar/RightButton.svelte
index e69de29bb..cf0803e39 100644
--- a/ts/editor-toolbar/RightButton.svelte
+++ b/ts/editor-toolbar/RightButton.svelte
@@ -0,0 +1,15 @@
+<script lang="typescript">
+    import ButtonItem from "./ButtonItem.svelte";
+
+    export let className: string;
+</script>
+
+<style>
+    span {
+        font-size: x-large;
+    }
+</style>
+
+<ButtonItem>
+    <span class={className}></span>
+</ButtonItem>
diff --git a/ts/editor-toolbar/_buttons.scss b/ts/editor-toolbar/_buttons.scss
new file mode 100644
index 000000000..0ad2baf32
--- /dev/null
+++ b/ts/editor-toolbar/_buttons.scss
@@ -0,0 +1,51 @@
+.rainbow {
+    background-image: -webkit-gradient(
+        linear,
+        left top,
+        left bottom,
+        color-stop(0, #f77),
+        color-stop(50%, #7f7),
+        color-stop(100%, #77f)
+    );
+}
+
+button.linkb {
+    -webkit-appearance: none;
+    margin-bottom: -3px;
+    border: 0;
+    box-shadow: none;
+    padding: 0px 2px;
+    background: transparent;
+
+    &:disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+    }
+
+    .nightMode & > img {
+        filter: invert(180);
+    }
+}
+
+button:focus {
+    outline: none;
+}
+
+button.highlighted {
+    #topbutsleft & {
+        background-color: lightgrey;
+
+        .nightMode & {
+            background: linear-gradient(0deg, #333333 0%, #434343 100%);
+        }
+    }
+
+    #topbutsright & {
+        border-bottom: 3px solid black;
+        border-radius: 3px;
+
+        .nightMode & {
+            border-bottom-color: white;
+        }
+    }
+}
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 2cf8f5122..20c838afb 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -1,19 +1,16 @@
 import type { SvelteComponent } from "svelte";
-import { setupI18n } from "anki/i18n";
 import { checkNightMode } from "anki/nightmode";
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;
 
-    async connectedCallback(): Promise<void> {
+    connectedCallback(): void {
         const nightMode = checkNightMode();
-        const i18n = await setupI18n();
 
         this.component = new EditorToolbarSvelte({
             target: this,
             props: {
-                i18n,
                 nightMode,
             },
         });
diff --git a/ts/editor/editor.scss b/ts/editor/editor.scss
index a23c4bbfe..ce7081d47 100644
--- a/ts/editor/editor.scss
+++ b/ts/editor/editor.scss
@@ -29,97 +29,6 @@
     padding: 0;
 }
 
-#topbutsOuter {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 5;
-    padding: 2px;
-
-    background: var(--bg-color);
-    font-size: 13px;
-}
-
-.topbuts {
-    margin-bottom: 2px;
-
-    & > * {
-        margin: 0 1px;
-
-        &:first-child {
-            margin-left: 0;
-        }
-
-        &:last-child {
-            margin-right: 0;
-        }
-    }
-}
-
-.topbut {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin-top: 4px;
-    vertical-align: -0.125em;
-}
-
-.rainbow {
-    background-image: -webkit-gradient(
-        linear,
-        left top,
-        left bottom,
-        color-stop(0, #f77),
-        color-stop(50%, #7f7),
-        color-stop(100%, #77f)
-    );
-}
-
-button.linkb {
-    -webkit-appearance: none;
-    margin-bottom: -3px;
-    border: 0;
-    box-shadow: none;
-    padding: 0px 2px;
-    background: transparent;
-
-    &:disabled {
-        opacity: 0.3;
-        cursor: not-allowed;
-    }
-
-    .nightMode & > img {
-        filter: invert(180);
-    }
-}
-
-button:focus {
-    outline: none;
-}
-
-button.highlighted {
-    #topbutsleft & {
-        background-color: lightgrey;
-
-        .nightMode & {
-            background: linear-gradient(0deg, #333333 0%, #434343 100%);
-        }
-    }
-
-    #topbutsright & {
-        border-bottom: 3px solid black;
-        border-radius: 3px;
-
-        .nightMode & {
-            border-bottom-color: white;
-        }
-    }
-}
-
 #dupes {
     position: sticky;
     bottom: 0;

From a0a961972211929212c751d94248c75d634be0db Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 14:54:10 +0200
Subject: [PATCH 03/97] Include icons directly in ts lib

---
 qt/aqt/data/web/imgs/vendor/BUILD.bazel       | 19 +++++++++++++++
 qt/aqt/editor.py                              |  2 +-
 ts/editor-toolbar/BUILD.bazel                 | 14 ++++++++++-
 ts/editor-toolbar/ButtonBar.svelte            | 12 ----------
 ts/editor-toolbar/EditorToolbar.svelte        | 24 ++++++++++++++-----
 ts/editor-toolbar/IconButton.svelte           | 24 +++++++++++++++++++
 .../{LeftButton.svelte => LabelButton.svelte} | 13 ++++++----
 ts/editor-toolbar/RightButton.svelte          | 15 ------------
 ts/licenses.json                              |  9 +++++++
 ts/package.json                               |  1 +
 ts/vendor.bzl                                 | 19 +++++++++++++--
 ts/yarn.lock                                  |  4 ++++
 12 files changed, 114 insertions(+), 42 deletions(-)
 create mode 100644 qt/aqt/data/web/imgs/vendor/BUILD.bazel
 create mode 100644 ts/editor-toolbar/IconButton.svelte
 rename ts/editor-toolbar/{LeftButton.svelte => LabelButton.svelte} (64%)
 delete mode 100644 ts/editor-toolbar/RightButton.svelte

diff --git a/qt/aqt/data/web/imgs/vendor/BUILD.bazel b/qt/aqt/data/web/imgs/vendor/BUILD.bazel
new file mode 100644
index 000000000..f316948a7
--- /dev/null
+++ b/qt/aqt/data/web/imgs/vendor/BUILD.bazel
@@ -0,0 +1,19 @@
+load("//ts:vendor.bzl", "copy_bootstrap_icons", "copy_fontawesome_icons")
+
+copy_bootstrap_icons(name = "bootstrap-icons")
+
+copy_fontawesome_icons(name = "fontawesome-icons")
+
+files = [
+    "bootstrap-icons",
+    "fontawesome-icons",
+]
+
+directories = []
+
+filegroup(
+    name = "vendor",
+    srcs = ["//qt/aqt/data/web/imgs/vendor:{}".format(file) for file in files] +
+           ["//qt/aqt/data/web/imgs/vendor/{}".format(dir) for dir in directories],
+    visibility = ["//qt:__subpackages__"],
+)
diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index f98e60d24..c20c8f4be 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -228,7 +228,7 @@ class Editor:
         bgcol = self.mw.app.palette().window().color().name()  # type: ignore
         # then load page
         self.web.stdHtml(
-            _html % (bgcol, topbuts, tr.editing_show_duplicates()),
+            _html % (bgcol, tr.editing_show_duplicates()),
             css=[
                 "css/editor.css",
                 "css/editor-toolbar.css",
diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index e86d08974..3d92ec0c5 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -3,6 +3,7 @@ load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts:esbuild.bzl", "esbuild")
+load("//ts:vendor.bzl", "copy_bootstrap_icons")
 
 svelte_files = glob(["*.svelte"])
 
@@ -38,6 +39,15 @@ ts_library(
     ],
 )
 
+copy_bootstrap_icons(
+    name = "bootstrap-icons",
+    icons = [
+        "type-bold.svg",
+        "type-italic.svg",
+        "type-underline.svg",
+    ],
+)
+
 esbuild(
     name = "editor-toolbar",
     srcs = [
@@ -46,6 +56,7 @@ esbuild(
     args = [
         "--global-name=anki",
         "--inject:ts/protobuf-shim.js",
+        "--loader:.svg=text",
     ],
     entry_point = "index.ts",
     external = [
@@ -56,9 +67,10 @@ esbuild(
     deps = [
         "//ts/lib",
         "//ts/lib:backend_proto",
-        "//ts/lib:fluent_proto",
         ":index",
         "//ts/sass:core_css",
+        "//ts:image_module_support",
+        "bootstrap-icons",
     ] + svelte_names,
 )
 
diff --git a/ts/editor-toolbar/ButtonBar.svelte b/ts/editor-toolbar/ButtonBar.svelte
index fa8d980cb..0842a70ba 100644
--- a/ts/editor-toolbar/ButtonBar.svelte
+++ b/ts/editor-toolbar/ButtonBar.svelte
@@ -2,18 +2,6 @@
     ul {
         padding-left: 0;
         margin-bottom: 2px;
-
-        & > :global(*) {
-            margin: 0 4px;
-
-            &:first-child {
-                margin-left: 0;
-            }
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
     }
 </style>
 
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index e2231c458..de2bfb3fb 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -2,11 +2,23 @@
     import ButtonBarOuter from "./ButtonBarOuter.svelte";
     import ButtonBar from "./ButtonBar.svelte";
 
-    import LeftButton from "./LeftButton.svelte";
-    import RightButton from "./RightButton.svelte";
+    import LabelButton from "./LabelButton.svelte";
+    import IconButton from "./IconButton.svelte";
 
-    export let leftButtons = ["Fields...", "Cards..."];
-    export let rightButtons = ["bi bi-type-bold", "bi bi-pin-angle"];
+    import boldIcon from "./type-bold.svg";
+    import italicIcon from "./type-italic.svg";
+    import underlineIcon from "./type-underline.svg";
+
+    export let leftButtons = [
+        { component: LabelButton, label: "Fields..." },
+        { component: LabelButton, label: "Cards..." },
+    ];
+
+    export let rightButtons = [
+        { component: IconButton, icon: boldIcon },
+        { component: IconButton, icon: italicIcon },
+        { component: IconButton, icon: underlineIcon },
+    ];
     export let nightMode: boolean;
 
     console.log(nightMode);
@@ -15,13 +27,13 @@
 <ButtonBarOuter>
     <ButtonBar>
         {#each leftButtons as leftButton}
-            <LeftButton>{leftButton}</LeftButton>
+            <svelte:component this={leftButton.component} {...leftButton} />
         {/each}
     </ButtonBar>
 
     <ButtonBar>
         {#each rightButtons as rightButton}
-            <RightButton className={rightButton} />
+            <svelte:component this={rightButton.component} {...rightButton} />
         {/each}
     </ButtonBar>
 </ButtonBarOuter>
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
new file mode 100644
index 000000000..a98934be4
--- /dev/null
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -0,0 +1,24 @@
+<script lang="typescript">
+    import ButtonItem from "./ButtonItem.svelte";
+
+    export let className: string;
+    export let icon: string;
+</script>
+
+<style lang="scss">
+    span {
+        display: inline-block;
+        width: 28px;
+        height: 28px;
+        vertical-align: -webkit-baseline-middle;
+
+        & > :global(svg) {
+            width: 100%;
+            height: 100%;
+        }
+    }
+</style>
+
+<ButtonItem>
+    <span class={className}>{@html icon}</span>
+</ButtonItem>
diff --git a/ts/editor-toolbar/LeftButton.svelte b/ts/editor-toolbar/LabelButton.svelte
similarity index 64%
rename from ts/editor-toolbar/LeftButton.svelte
rename to ts/editor-toolbar/LabelButton.svelte
index c2b9388d5..b158383a7 100644
--- a/ts/editor-toolbar/LeftButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -1,20 +1,23 @@
 <script lang="typescript">
     import ButtonItem from "./ButtonItem.svelte";
+
+    export let label: string;
 </script>
+
 <style lang="scss">
     button {
         padding: 3px 10px;
-        /* fit RightButton */
         vertical-align: -.425em;
-    }
+        margin-right: 3px;
 
-    button:focus {
-        0 0 0 0.05rem rgba(255, 255, 255, 0.5);
+        &:focus {
+            box-shadow: 0 0 0 .05rem rgba(255, 255, 255, 0.5);
+        }
     }
 </style>
 
 <ButtonItem>
     <button type="button" class="btn btn-secondary" on:click>
-        <slot />
+        {label}
     </button>
 </ButtonItem>
diff --git a/ts/editor-toolbar/RightButton.svelte b/ts/editor-toolbar/RightButton.svelte
deleted file mode 100644
index cf0803e39..000000000
--- a/ts/editor-toolbar/RightButton.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
-
-    export let className: string;
-</script>
-
-<style>
-    span {
-        font-size: x-large;
-    }
-</style>
-
-<ButtonItem>
-    <span class={className}></span>
-</ButtonItem>
diff --git a/ts/licenses.json b/ts/licenses.json
index f6c72a5c6..90aa38b59 100644
--- a/ts/licenses.json
+++ b/ts/licenses.json
@@ -7,6 +7,15 @@
         "path": "node_modules/@fluent/bundle",
         "licenseFile": "node_modules/@fluent/bundle/README.md"
     },
+    "@fortawesome/fontawesome-free@5.15.3": {
+        "licenses": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+        "repository": "https://github.com/FortAwesome/Font-Awesome",
+        "publisher": "Dave Gandy",
+        "email": "dave@fontawesome.com",
+        "url": "http://twitter.com/davegandy",
+        "path": "node_modules/@fortawesome/fontawesome-free",
+        "licenseFile": "node_modules/@fortawesome/fontawesome-free/LICENSE.txt"
+    },
     "@protobufjs/aspromise@1.1.2": {
         "licenses": "BSD-3-Clause",
         "repository": "https://github.com/dcodeIO/protobuf.js",
diff --git a/ts/package.json b/ts/package.json
index 4dd50d40d..6e6addf2a 100644
--- a/ts/package.json
+++ b/ts/package.json
@@ -54,6 +54,7 @@
     },
     "dependencies": {
         "@fluent/bundle": "^0.15.1",
+        "@fortawesome/fontawesome-free": "^5.15.3",
         "bootstrap": "^5.0.0-beta2",
         "bootstrap-icons": "^1.4.0",
         "css-browser-selector": "^0.6.5",
diff --git a/ts/vendor.bzl b/ts/vendor.bzl
index 9eb4dcde6..265c5b912 100644
--- a/ts/vendor.bzl
+++ b/ts/vendor.bzl
@@ -4,8 +4,11 @@ Helpers to copy runtime dependencies from node_modules.
 
 load("//ts:copy.bzl", "copy_select_files")
 
+def _npm_base_from_name(name):
+    return "external/npm/node_modules/{}/".format(name)
+
 def _vendor_js_lib_impl(ctx):
-    base = ctx.attr.base or "external/npm/node_modules/{}/".format(ctx.attr.name)
+    base = ctx.attr.base or _npm_base_from_name(ctx.attr.name)
     return copy_select_files(
         ctx = ctx,
         files = ctx.attr.pkg.files,
@@ -27,7 +30,8 @@ vendor_js_lib = rule(
 )
 
 def pkg_from_name(name):
-    return "@npm//{0}:{0}__files".format(name)
+    tail = name.split("/")[-1]
+    return "@npm//{0}:{1}__files".format(name, tail)
 
 #
 # These could be defined directly in BUILD files, but defining them as
@@ -126,3 +130,14 @@ def copy_bootstrap_icons(name = "bootstrap-icons", icons = [], visibility = ["//
         strip_prefix = "icons/",
         visibility = visibility,
     )
+
+    
+def copy_fontawesome_icons(name = "fontawesome-icons", icons = [], visibility = ["//visibility:public"]):
+    vendor_js_lib(
+        name = name,
+        pkg = _pkg_from_name("@fortawesome/fontawesome-free"),
+        base = _npm_base_from_name("@fortawesome/fontawesome-free"),
+        include = ["svgs/{}".format(icon) for icon in icons],
+        strip_prefix = "svgs/solid/",
+        visibility = visibility,
+    )
diff --git a/ts/yarn.lock b/ts/yarn.lock
index 5d928e4de..2b5ed0fa5 100644
--- a/ts/yarn.lock
+++ b/ts/yarn.lock
@@ -502,6 +502,10 @@
     "@types/node" "*"
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
+"@fortawesome/fontawesome-free@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz#c36ffa64a2a239bf948541a97b6ae8d729e09a9a"
+  integrity sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==
 
 "@jest/types@^27.0.0-next.8":
   version "27.0.0-next.8"

From fee78d25706cd22e0c055f8be35a4f83a99a15a8 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 15:27:42 +0200
Subject: [PATCH 04/97] Add remaining icons for toolbar

---
 ts/editor-toolbar/BUILD.bazel          | 17 ++++++++++++++++-
 ts/editor-toolbar/EditorToolbar.svelte | 22 ++++++++++++++++++++++
 ts/licenses.json                       | 14 ++++++--------
 ts/package.json                        |  2 +-
 ts/vendor.bzl                          | 12 ++++++------
 ts/yarn.lock                           |  9 +++++----
 6 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 3d92ec0c5..8b1962116 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -3,7 +3,7 @@ load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts:esbuild.bzl", "esbuild")
-load("//ts:vendor.bzl", "copy_bootstrap_icons")
+load("//ts:vendor.bzl", "copy_bootstrap_icons", "copy_mdi_icons")
 
 svelte_files = glob(["*.svelte"])
 
@@ -45,6 +45,20 @@ copy_bootstrap_icons(
         "type-bold.svg",
         "type-italic.svg",
         "type-underline.svg",
+        "eraser.svg",
+        "square-fill.svg",
+        "paperclip.svg",
+        "mic.svg",
+        "three-dots.svg",
+    ],
+)
+
+copy_mdi_icons(
+    name = "mdi-icons",
+    icons = [
+        "format-superscript.svg",
+        "format-subscript.svg",
+        "code-brackets.svg",
     ],
 )
 
@@ -71,6 +85,7 @@ esbuild(
         "//ts/sass:core_css",
         "//ts:image_module_support",
         "bootstrap-icons",
+        "mdi-icons",
     ] + svelte_names,
 )
 
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index de2bfb3fb..f355e9e4e 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -9,6 +9,16 @@
     import italicIcon from "./type-italic.svg";
     import underlineIcon from "./type-underline.svg";
 
+    import superscriptIcon from "./format-superscript.svg";
+    import subscriptIcon from "./format-subscript.svg";
+    import bracketsIcon from "./code-brackets.svg";
+
+    import eraserIcon from "./eraser.svg";
+    import squareFillIcon from "./square-fill.svg";
+    import paperclipIcon from "./paperclip.svg";
+    import micIcon from "./mic.svg";
+    import threeDotsIcon from "./three-dots.svg";
+
     export let leftButtons = [
         { component: LabelButton, label: "Fields..." },
         { component: LabelButton, label: "Cards..." },
@@ -18,6 +28,18 @@
         { component: IconButton, icon: boldIcon },
         { component: IconButton, icon: italicIcon },
         { component: IconButton, icon: underlineIcon },
+
+        { component: IconButton, icon: superscriptIcon },
+        { component: IconButton, icon: subscriptIcon },
+
+        { component: IconButton, icon: eraserIcon },
+        { component: IconButton, icon: squareFillIcon },
+        { component: IconButton, icon: squareFillIcon },
+
+        { component: IconButton, icon: bracketsIcon },
+        { component: IconButton, icon: paperclipIcon },
+        { component: IconButton, icon: micIcon },
+        { component: IconButton, icon: threeDotsIcon },
     ];
     export let nightMode: boolean;
 
diff --git a/ts/licenses.json b/ts/licenses.json
index 90aa38b59..3c74d8774 100644
--- a/ts/licenses.json
+++ b/ts/licenses.json
@@ -7,14 +7,12 @@
         "path": "node_modules/@fluent/bundle",
         "licenseFile": "node_modules/@fluent/bundle/README.md"
     },
-    "@fortawesome/fontawesome-free@5.15.3": {
-        "licenses": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
-        "repository": "https://github.com/FortAwesome/Font-Awesome",
-        "publisher": "Dave Gandy",
-        "email": "dave@fontawesome.com",
-        "url": "http://twitter.com/davegandy",
-        "path": "node_modules/@fortawesome/fontawesome-free",
-        "licenseFile": "node_modules/@fortawesome/fontawesome-free/LICENSE.txt"
+    "@mdi/svg@5.9.55": {
+        "licenses": "Apache-2.0",
+        "repository": "https://github.com/Templarian/MaterialDesign-SVG",
+        "publisher": "Austin Andrews",
+        "path": "node_modules/@mdi/svg",
+        "licenseFile": "node_modules/@mdi/svg/LICENSE"
     },
     "@protobufjs/aspromise@1.1.2": {
         "licenses": "BSD-3-Clause",
diff --git a/ts/package.json b/ts/package.json
index 6e6addf2a..7df6203cc 100644
--- a/ts/package.json
+++ b/ts/package.json
@@ -54,7 +54,7 @@
     },
     "dependencies": {
         "@fluent/bundle": "^0.15.1",
-        "@fortawesome/fontawesome-free": "^5.15.3",
+        "@mdi/svg": "^5.9.55",
         "bootstrap": "^5.0.0-beta2",
         "bootstrap-icons": "^1.4.0",
         "css-browser-selector": "^0.6.5",
diff --git a/ts/vendor.bzl b/ts/vendor.bzl
index 265c5b912..b2b3972c8 100644
--- a/ts/vendor.bzl
+++ b/ts/vendor.bzl
@@ -131,13 +131,13 @@ def copy_bootstrap_icons(name = "bootstrap-icons", icons = [], visibility = ["//
         visibility = visibility,
     )
 
-    
-def copy_fontawesome_icons(name = "fontawesome-icons", icons = [], visibility = ["//visibility:public"]):
+def copy_mdi_icons(name = "mdi-icons", icons = [], visibility = ["//visibility:public"]):
     vendor_js_lib(
         name = name,
-        pkg = _pkg_from_name("@fortawesome/fontawesome-free"),
-        base = _npm_base_from_name("@fortawesome/fontawesome-free"),
-        include = ["svgs/{}".format(icon) for icon in icons],
-        strip_prefix = "svgs/solid/",
+        pkg = _pkg_from_name("@mdi/svg"),
+        base = _npm_base_from_name("@mdi/svg"),
+        include = ["svg/{}".format(icon) for icon in icons],
+        strip_prefix = "svg/",
         visibility = visibility,
     )
+
diff --git a/ts/yarn.lock b/ts/yarn.lock
index 2b5ed0fa5..69c07b3b3 100644
--- a/ts/yarn.lock
+++ b/ts/yarn.lock
@@ -502,10 +502,11 @@
     "@types/node" "*"
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
-"@fortawesome/fontawesome-free@^5.15.3":
-  version "5.15.3"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz#c36ffa64a2a239bf948541a97b6ae8d729e09a9a"
-  integrity sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==
+
+"@mdi/svg@^5.9.55":
+  version "5.9.55"
+  resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-5.9.55.tgz#7cba058135afd5d8a3da977f51b71ffc6a3a3699"
+  integrity sha512-gO0ZpKIeCn9vFg46QduK9MM+n1fuCNwSdcdlBTtbafnnuvwLveK2uj+byhdLtg/8VJGXDhp+DJ35QUMbeWeULA==
 
 "@jest/types@^27.0.0-next.8":
   version "27.0.0-next.8"

From 0963d53e0c26bbc6f62ce1efe1dbe64dcafa7191 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 17:32:43 +0200
Subject: [PATCH 05/97] Add color.ts for foreground color and color picker

---
 ts/editor-toolbar/BUILD.bazel           |  9 +++++++
 ts/editor-toolbar/ButtonBar.svelte      |  4 +++-
 ts/editor-toolbar/ButtonBarOuter.svelte |  4 +++-
 ts/editor-toolbar/ButtonItem.svelte     |  4 +++-
 ts/editor-toolbar/ColorPicker.svelte    | 25 ++++++++++++++++++++
 ts/editor-toolbar/EditorToolbar.svelte  |  8 ++++---
 ts/editor-toolbar/IconButton.svelte     | 11 +++++++--
 ts/editor-toolbar/LabelButton.svelte    |  8 +++----
 ts/editor-toolbar/_buttons.scss         | 11 ---------
 ts/editor-toolbar/color.scss            | 17 ++++++++++++++
 ts/editor-toolbar/color.ts              | 31 +++++++++++++++++++++++++
 11 files changed, 108 insertions(+), 24 deletions(-)
 create mode 100644 ts/editor-toolbar/ColorPicker.svelte
 create mode 100644 ts/editor-toolbar/color.scss
 create mode 100644 ts/editor-toolbar/color.ts

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 8b1962116..b27308da8 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -3,6 +3,7 @@ load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts:esbuild.bzl", "esbuild")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("//ts:vendor.bzl", "copy_bootstrap_icons", "copy_mdi_icons")
 
 svelte_files = glob(["*.svelte"])
@@ -14,6 +15,12 @@ compile_svelte(
     srcs = svelte_files,
 )
 
+sass_binary(
+    name = "color_css",
+    src = "color.scss",
+    visibility = ["//visibility:public"],
+)
+
 ts_library(
     name = "index",
     srcs = ["index.ts"],
@@ -35,6 +42,7 @@ ts_library(
     deps = [
         "//ts/lib",
         "//ts/lib:backend_proto",
+        "//ts:image_module_support",
         "@npm//svelte",
     ],
 )
@@ -86,6 +94,7 @@ esbuild(
         "//ts:image_module_support",
         "bootstrap-icons",
         "mdi-icons",
+        ":color_css",
     ] + svelte_names,
 )
 
diff --git a/ts/editor-toolbar/ButtonBar.svelte b/ts/editor-toolbar/ButtonBar.svelte
index 0842a70ba..8dc94e964 100644
--- a/ts/editor-toolbar/ButtonBar.svelte
+++ b/ts/editor-toolbar/ButtonBar.svelte
@@ -5,4 +5,6 @@
     }
 </style>
 
-<ul><slot/></ul>
+<ul>
+    <slot />
+</ul>
diff --git a/ts/editor-toolbar/ButtonBarOuter.svelte b/ts/editor-toolbar/ButtonBarOuter.svelte
index 064d60c4c..48231e41f 100644
--- a/ts/editor-toolbar/ButtonBarOuter.svelte
+++ b/ts/editor-toolbar/ButtonBarOuter.svelte
@@ -14,4 +14,6 @@
     }
 </style>
 
-<div><slot /></div>
+<div>
+    <slot />
+</div>
diff --git a/ts/editor-toolbar/ButtonItem.svelte b/ts/editor-toolbar/ButtonItem.svelte
index 88b9f924b..e3894af49 100644
--- a/ts/editor-toolbar/ButtonItem.svelte
+++ b/ts/editor-toolbar/ButtonItem.svelte
@@ -4,4 +4,6 @@
     }
 </style>
 
-<li><slot/></li>
+<li>
+    <slot />
+</li>
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
new file mode 100644
index 000000000..c4a950225
--- /dev/null
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -0,0 +1,25 @@
+<script lang="typescript">
+    import ButtonItem from "./ButtonItem.svelte";
+
+    export let className: string;
+    export let onChange: (event: ChangeEvent) => void;
+</script>
+
+<style lang="scss">
+    span {
+        display: inline-block;
+        width: 28px;
+        height: 28px;
+        vertical-align: -webkit-baseline-middle;
+    }
+
+    input {
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+    }
+</style>
+
+<ButtonItem>
+    <span class={className}> <input type="color" on:change={onChange} /> </span>
+</ButtonItem>
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index f355e9e4e..e6e802d48 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -14,11 +14,12 @@
     import bracketsIcon from "./code-brackets.svg";
 
     import eraserIcon from "./eraser.svg";
-    import squareFillIcon from "./square-fill.svg";
     import paperclipIcon from "./paperclip.svg";
     import micIcon from "./mic.svg";
     import threeDotsIcon from "./three-dots.svg";
 
+    import { forecolorButton, colorpickerButton } from "./color";
+
     export let leftButtons = [
         { component: LabelButton, label: "Fields..." },
         { component: LabelButton, label: "Cards..." },
@@ -33,8 +34,9 @@
         { component: IconButton, icon: subscriptIcon },
 
         { component: IconButton, icon: eraserIcon },
-        { component: IconButton, icon: squareFillIcon },
-        { component: IconButton, icon: squareFillIcon },
+
+        forecolorButton,
+        colorpickerButton,
 
         { component: IconButton, icon: bracketsIcon },
         { component: IconButton, icon: paperclipIcon },
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index a98934be4..133128a3d 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -3,6 +3,7 @@
 
     export let className: string;
     export let icon: string;
+    export let onClick: (event: ClickEvent) => void;
 </script>
 
 <style lang="scss">
@@ -12,7 +13,9 @@
         height: 28px;
         vertical-align: -webkit-baseline-middle;
 
-        & > :global(svg) {
+        & > :global(svg),
+        & > :global(img) {
+            vertical-align: unset;
             width: 100%;
             height: 100%;
         }
@@ -20,5 +23,9 @@
 </style>
 
 <ButtonItem>
-    <span class={className}>{@html icon}</span>
+    <span class={className} on:click={onClick} on:mousedown|preventDefault>
+        {#if icon}
+            {@html icon}
+        {/if}
+    </span>
 </ButtonItem>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index b158383a7..5271eb8ba 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -7,17 +7,15 @@
 <style lang="scss">
     button {
         padding: 3px 10px;
-        vertical-align: -.425em;
+        vertical-align: -0.425em;
         margin-right: 3px;
 
         &:focus {
-            box-shadow: 0 0 0 .05rem rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0.05rem rgba(255, 255, 255, 0.5);
         }
     }
 </style>
 
 <ButtonItem>
-    <button type="button" class="btn btn-secondary" on:click>
-        {label}
-    </button>
+    <button type="button" class="btn btn-secondary" on:click> {label} </button>
 </ButtonItem>
diff --git a/ts/editor-toolbar/_buttons.scss b/ts/editor-toolbar/_buttons.scss
index 0ad2baf32..bdb515e5b 100644
--- a/ts/editor-toolbar/_buttons.scss
+++ b/ts/editor-toolbar/_buttons.scss
@@ -1,14 +1,3 @@
-.rainbow {
-    background-image: -webkit-gradient(
-        linear,
-        left top,
-        left bottom,
-        color-stop(0, #f77),
-        color-stop(50%, #7f7),
-        color-stop(100%, #77f)
-    );
-}
-
 button.linkb {
     -webkit-appearance: none;
     margin-bottom: -3px;
diff --git a/ts/editor-toolbar/color.scss b/ts/editor-toolbar/color.scss
new file mode 100644
index 000000000..f9d459eea
--- /dev/null
+++ b/ts/editor-toolbar/color.scss
@@ -0,0 +1,17 @@
+:root {
+    --foreground-color: black;
+}
+
+.forecolor {
+    color: var(--foreground-color);
+}
+
+.rainbow {
+    background: linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
+        linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+        linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
+
+    background-clip: content-box;
+    /* Boostrap .rounded has .25rem */
+    border-radius: 0.375rem;
+}
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
new file mode 100644
index 000000000..c03ce380c
--- /dev/null
+++ b/ts/editor-toolbar/color.ts
@@ -0,0 +1,31 @@
+import IconButton from "./IconButton.svelte";
+import ColorPicker from "./ColorPicker.svelte";
+import squareFillIcon from "./square-fill.svg";
+import "./color.css";
+
+const foregroundColorKeyword = "--foreground-color";
+
+function setForegroundColor(color: string): void {
+    document.documentElement.style.setProperty(foregroundColorKeyword, color);
+}
+
+function getForecolor(): string {
+    return document.documentElement.style.getPropertyValue(foregroundColorKeyword);
+}
+
+function wrapWithForecolor(color: string): void {
+    document.execCommand("forecolor", false, color);
+}
+
+export const forecolorButton = {
+    component: IconButton,
+    icon: squareFillIcon,
+    className: "forecolor p-1",
+    onClick: () => wrapWithForecolor(getForecolor()),
+};
+
+export const colorpickerButton = {
+    component: ColorPicker,
+    className: "rainbow p-1",
+    onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
+};

From ccb7c5d68a839c67797e21e6cceba797b990bea9 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 21:05:30 +0200
Subject: [PATCH 06/97] Add CommandIconButton functionality

---
 ts/editor-toolbar/ColorPicker.svelte       | 14 +++++-
 ts/editor-toolbar/CommandIconButton.svelte | 57 ++++++++++++++++++++++
 ts/editor-toolbar/EditorToolbar.svelte     | 29 ++++++-----
 ts/editor-toolbar/IconButton.svelte        | 29 +++--------
 ts/editor-toolbar/IconButtonInner.svelte   | 36 ++++++++++++++
 ts/editor-toolbar/_buttons.scss            | 13 -----
 ts/editor-toolbar/format.ts                | 48 ++++++++++++++++++
 7 files changed, 173 insertions(+), 53 deletions(-)
 create mode 100644 ts/editor-toolbar/CommandIconButton.svelte
 create mode 100644 ts/editor-toolbar/IconButtonInner.svelte
 create mode 100644 ts/editor-toolbar/format.ts

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index c4a950225..38b78965e 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -6,11 +6,19 @@
 </script>
 
 <style lang="scss">
-    span {
+    button {
         display: inline-block;
         width: 28px;
         height: 28px;
+
         vertical-align: -webkit-baseline-middle;
+        padding: 0;
+    }
+
+    span {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
     }
 
     input {
@@ -21,5 +29,7 @@
 </style>
 
 <ButtonItem>
-    <span class={className}> <input type="color" on:change={onChange} /> </span>
+    <button>
+        <span class={className}> <input type="color" on:change={onChange} /> </span>
+    </button>
 </ButtonItem>
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
new file mode 100644
index 000000000..e5f19189b
--- /dev/null
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -0,0 +1,57 @@
+<script lang="typescript" context="module">
+    import { writable } from "svelte/store";
+
+    export const commandMap = writable(new Map<string, boolean>());
+
+    function updateButton(key: string): void {
+        commandMap.update(
+            (map: Map<string, boolean>): Map<string, boolean> =>
+                new Map([...map, [key, document.queryCommandState(key)]])
+        );
+    }
+
+    export function updateButtons() {
+        commandMap.update(
+            (map: Map<string, boolean>): Map<string, boolean> => {
+                const newMap = new Map<string, boolean>();
+
+                for (const key of map.keys()) {
+                    newMap.set(key, document.queryCommandState(key));
+                }
+
+                return newMap;
+            }
+        );
+    }
+</script>
+
+<script lang="typescript">
+    import ButtonItem from "./ButtonItem.svelte";
+    import IconButtonInner from "./IconButtonInner.svelte";
+
+    export let className = "";
+    export let icon = "";
+    export let command: string;
+    export let activatable = true;
+
+    let active = false;
+
+    if (activatable) {
+        updateButton(command);
+
+        commandMap.subscribe((map: Record<string, boolean>): void => {
+            active = map.get(command);
+            return () => map.delete(command);
+        });
+    }
+
+    function onClick(event: ClickEvent): void {
+        document.execCommand(command);
+    }
+</script>
+
+<ButtonItem>
+    <IconButtonInner {className} {active} {onClick}>
+        {@html icon}
+    </IconButtonInner>
+</ButtonItem>
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index e6e802d48..7de984a03 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -5,19 +5,20 @@
     import LabelButton from "./LabelButton.svelte";
     import IconButton from "./IconButton.svelte";
 
-    import boldIcon from "./type-bold.svg";
-    import italicIcon from "./type-italic.svg";
-    import underlineIcon from "./type-underline.svg";
-
-    import superscriptIcon from "./format-superscript.svg";
-    import subscriptIcon from "./format-subscript.svg";
     import bracketsIcon from "./code-brackets.svg";
 
-    import eraserIcon from "./eraser.svg";
     import paperclipIcon from "./paperclip.svg";
     import micIcon from "./mic.svg";
     import threeDotsIcon from "./three-dots.svg";
 
+    import {
+        boldButton,
+        italicButton,
+        underlineButton,
+        superscriptButton,
+        subscriptButton,
+        eraserButton,
+    } from "./format";
     import { forecolorButton, colorpickerButton } from "./color";
 
     export let leftButtons = [
@@ -26,14 +27,12 @@
     ];
 
     export let rightButtons = [
-        { component: IconButton, icon: boldIcon },
-        { component: IconButton, icon: italicIcon },
-        { component: IconButton, icon: underlineIcon },
-
-        { component: IconButton, icon: superscriptIcon },
-        { component: IconButton, icon: subscriptIcon },
-
-        { component: IconButton, icon: eraserIcon },
+        boldButton,
+        italicButton,
+        underlineButton,
+        superscriptButton,
+        subscriptButton,
+        eraserButton,
 
         forecolorButton,
         colorpickerButton,
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index 133128a3d..443ad0055 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -1,31 +1,14 @@
 <script lang="typescript">
     import ButtonItem from "./ButtonItem.svelte";
+    import IconButtonInner from "./IconButtonInner.svelte";
 
-    export let className: string;
-    export let icon: string;
+    export let className = "";
+    export let icon = "";
     export let onClick: (event: ClickEvent) => void;
 </script>
 
-<style lang="scss">
-    span {
-        display: inline-block;
-        width: 28px;
-        height: 28px;
-        vertical-align: -webkit-baseline-middle;
-
-        & > :global(svg),
-        & > :global(img) {
-            vertical-align: unset;
-            width: 100%;
-            height: 100%;
-        }
-    }
-</style>
-
 <ButtonItem>
-    <span class={className} on:click={onClick} on:mousedown|preventDefault>
-        {#if icon}
-            {@html icon}
-        {/if}
-    </span>
+    <IconButtonInner {className} active={false} {onClick}>
+        {@html icon}
+    </IconButtonInner>
 </ButtonItem>
diff --git a/ts/editor-toolbar/IconButtonInner.svelte b/ts/editor-toolbar/IconButtonInner.svelte
new file mode 100644
index 000000000..f98b0ccef
--- /dev/null
+++ b/ts/editor-toolbar/IconButtonInner.svelte
@@ -0,0 +1,36 @@
+<script lang="typescript">
+    export let className: string;
+    export let onClick: (event: ClickEvent) => void;
+    export let active: boolean;
+</script>
+
+<style lang="scss">
+    button {
+        display: inline-block;
+        width: 28px;
+        height: 28px;
+
+        vertical-align: -webkit-baseline-middle;
+        padding: 2px;
+
+        & > :global(svg),
+        & > :global(img) {
+            vertical-align: unset;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .active {
+        border-bottom: 3px solid black;
+        border-radius: 3px;
+
+        :global(.nightMode) & {
+            border-bottom-color: white;
+        }
+    }
+</style>
+
+<button class={className} class:active on:click={onClick} on:mousedown|preventDefault>
+    <slot />
+</button>
diff --git a/ts/editor-toolbar/_buttons.scss b/ts/editor-toolbar/_buttons.scss
index bdb515e5b..42250394a 100644
--- a/ts/editor-toolbar/_buttons.scss
+++ b/ts/editor-toolbar/_buttons.scss
@@ -10,10 +10,6 @@ button.linkb {
         opacity: 0.3;
         cursor: not-allowed;
     }
-
-    .nightMode & > img {
-        filter: invert(180);
-    }
 }
 
 button:focus {
@@ -28,13 +24,4 @@ button.highlighted {
             background: linear-gradient(0deg, #333333 0%, #434343 100%);
         }
     }
-
-    #topbutsright & {
-        border-bottom: 3px solid black;
-        border-radius: 3px;
-
-        .nightMode & {
-            border-bottom-color: white;
-        }
-    }
 }
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
new file mode 100644
index 000000000..ddf656fca
--- /dev/null
+++ b/ts/editor-toolbar/format.ts
@@ -0,0 +1,48 @@
+// @ts-ignore
+import CommandIconButton, { updateButtons } from "./CommandIconButton.svelte";
+import boldIcon from "./type-bold.svg";
+import italicIcon from "./type-italic.svg";
+import underlineIcon from "./type-underline.svg";
+import superscriptIcon from "./format-superscript.svg";
+import subscriptIcon from "./format-subscript.svg";
+import eraserIcon from "./eraser.svg";
+
+export const boldButton = {
+    component: CommandIconButton,
+    icon: boldIcon,
+    command: "bold",
+};
+
+export const italicButton = {
+    component: CommandIconButton,
+    icon: italicIcon,
+    command: "italic",
+};
+
+export const underlineButton = {
+    component: CommandIconButton,
+    icon: underlineIcon,
+    command: "underline",
+};
+
+export const superscriptButton = {
+    component: CommandIconButton,
+    icon: superscriptIcon,
+    command: "superscript",
+};
+
+export const subscriptButton = {
+    component: CommandIconButton,
+    icon: subscriptIcon,
+    command: "subscript",
+};
+
+export const eraserButton = {
+    component: CommandIconButton,
+    icon: eraserIcon,
+    command: "removeFormat",
+    highlightable: false,
+};
+
+// TODO
+setInterval(updateButtons, 2000);

From 9563da37d3b22ffa659ffe94b69b51e204bcb5ab Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 21:48:31 +0200
Subject: [PATCH 07/97] Add ButtonGroup for grouping of toolbar items

---
 ts/editor-toolbar/ButtonBar.svelte     |  2 +-
 ts/editor-toolbar/ButtonGroup.svelte   | 33 ++++++++++++++++
 ts/editor-toolbar/EditorToolbar.svelte | 52 ++++++++++++++++----------
 3 files changed, 66 insertions(+), 21 deletions(-)
 create mode 100644 ts/editor-toolbar/ButtonGroup.svelte

diff --git a/ts/editor-toolbar/ButtonBar.svelte b/ts/editor-toolbar/ButtonBar.svelte
index 8dc94e964..0a7610475 100644
--- a/ts/editor-toolbar/ButtonBar.svelte
+++ b/ts/editor-toolbar/ButtonBar.svelte
@@ -1,6 +1,6 @@
 <style lang="scss">
     ul {
-        padding-left: 0;
+        padding-inline-start: 0;
         margin-bottom: 2px;
     }
 </style>
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
new file mode 100644
index 000000000..0d9b7f9a2
--- /dev/null
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -0,0 +1,33 @@
+<script lang="typescript">
+    import ButtonItem from "./ButtonItem.svelte";
+</script>
+
+<style lang="scss">
+    ul {
+        padding-inline-start: 0;
+
+        margin-left: 0.25rem;
+        margin-right: 0.25rem;
+
+        & :global(button) {
+            margin-left: -1px;
+        }
+
+        & > :global(li:nth-child(1) button) {
+            margin-left: 0px;
+            border-top-left-radius: 0.35rem;
+            border-bottom-left-radius: 0.35rem;
+        }
+
+        & > :global(li:nth-last-child(1) button) {
+            border-top-right-radius: 0.35rem;
+            border-bottom-right-radius: 0.35rem;
+        }
+    }
+</style>
+
+<ButtonItem>
+    <ul>
+        <slot />
+    </ul>
+</ButtonItem>
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 7de984a03..92b927617 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,6 +1,7 @@
 <script lang="typescript">
     import ButtonBarOuter from "./ButtonBarOuter.svelte";
     import ButtonBar from "./ButtonBar.svelte";
+    import ButtonGroup from "./ButtonGroup.svelte";
 
     import LabelButton from "./LabelButton.svelte";
     import IconButton from "./IconButton.svelte";
@@ -22,25 +23,28 @@
     import { forecolorButton, colorpickerButton } from "./color";
 
     export let leftButtons = [
-        { component: LabelButton, label: "Fields..." },
-        { component: LabelButton, label: "Cards..." },
+        [
+            { component: LabelButton, label: "Fields..." },
+            { component: LabelButton, label: "Cards..." },
+        ],
     ];
 
     export let rightButtons = [
-        boldButton,
-        italicButton,
-        underlineButton,
-        superscriptButton,
-        subscriptButton,
-        eraserButton,
-
-        forecolorButton,
-        colorpickerButton,
-
-        { component: IconButton, icon: bracketsIcon },
-        { component: IconButton, icon: paperclipIcon },
-        { component: IconButton, icon: micIcon },
-        { component: IconButton, icon: threeDotsIcon },
+        [
+            boldButton,
+            italicButton,
+            underlineButton,
+            superscriptButton,
+            subscriptButton,
+            eraserButton,
+        ],
+        [forecolorButton, colorpickerButton],
+        [
+            { component: IconButton, icon: bracketsIcon },
+            { component: IconButton, icon: paperclipIcon },
+            { component: IconButton, icon: micIcon },
+            { component: IconButton, icon: threeDotsIcon },
+        ],
     ];
     export let nightMode: boolean;
 
@@ -49,14 +53,22 @@
 
 <ButtonBarOuter>
     <ButtonBar>
-        {#each leftButtons as leftButton}
-            <svelte:component this={leftButton.component} {...leftButton} />
+        {#each leftButtons as leftGroup}
+            <ButtonGroup>
+                {#each leftGroup as leftButton}
+                    <svelte:component this={leftButton.component} {...leftButton} />
+                {/each}
+            </ButtonGroup>
         {/each}
     </ButtonBar>
 
     <ButtonBar>
-        {#each rightButtons as rightButton}
-            <svelte:component this={rightButton.component} {...rightButton} />
+        {#each rightButtons as rightGroup}
+            <ButtonGroup>
+                {#each rightGroup as rightButton}
+                    <svelte:component this={rightButton.component} {...rightButton} />
+                {/each}
+            </ButtonGroup>
         {/each}
     </ButtonBar>
 </ButtonBarOuter>

From b26c4294ec66681e6ec9d6439ddcfa55db269407 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 22:45:11 +0200
Subject: [PATCH 08/97] Display ButtonGroups inline-block

---
 ts/editor-toolbar/ButtonGroup.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 0d9b7f9a2..2b531f5b1 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -4,6 +4,7 @@
 
 <style lang="scss">
     ul {
+        display: inline-block;
         padding-inline-start: 0;
 
         margin-left: 0.25rem;

From a12e39a15f6b34b1f8c7cb8f432340e828f68c13 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 23:02:20 +0200
Subject: [PATCH 09/97] Add hover and active effects

---
 ts/editor-toolbar/ColorPicker.svelte     |  4 ++--
 ts/editor-toolbar/IconButtonInner.svelte | 15 +++++++--------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 38b78965e..ff02a15fd 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -8,8 +8,8 @@
 <style lang="scss">
     button {
         display: inline-block;
-        width: 28px;
-        height: 28px;
+        width: 30px;
+        height: 30px;
 
         vertical-align: -webkit-baseline-middle;
         padding: 0;
diff --git a/ts/editor-toolbar/IconButtonInner.svelte b/ts/editor-toolbar/IconButtonInner.svelte
index f98b0ccef..23b51c82d 100644
--- a/ts/editor-toolbar/IconButtonInner.svelte
+++ b/ts/editor-toolbar/IconButtonInner.svelte
@@ -7,8 +7,8 @@
 <style lang="scss">
     button {
         display: inline-block;
-        width: 28px;
-        height: 28px;
+        width: 30px;
+        height: 30px;
 
         vertical-align: -webkit-baseline-middle;
         padding: 2px;
@@ -19,14 +19,13 @@
             width: 100%;
             height: 100%;
         }
-    }
 
-    .active {
-        border-bottom: 3px solid black;
-        border-radius: 3px;
+        &:hover {
+            background-color: #eee;
+        }
 
-        :global(.nightMode) & {
-            border-bottom-color: white;
+        &:active, &.active {
+            box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
         }
     }
 </style>

From 0269c97b2e87b083411567ce85aa9d2bef9a89b8 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 23:26:08 +0200
Subject: [PATCH 10/97] Rename IconButtonInner to InnerButton, as it does not
 necessarily contain an Icon

---
 ts/editor-toolbar/CommandIconButton.svelte    |  6 ++--
 ts/editor-toolbar/IconButton.svelte           |  6 ++--
 ...nButtonInner.svelte => InnerButton.svelte} | 28 ++++++++++++++++---
 3 files changed, 30 insertions(+), 10 deletions(-)
 rename ts/editor-toolbar/{IconButtonInner.svelte => InnerButton.svelte} (55%)

diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index e5f19189b..6e417fce3 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -27,7 +27,7 @@
 
 <script lang="typescript">
     import ButtonItem from "./ButtonItem.svelte";
-    import IconButtonInner from "./IconButtonInner.svelte";
+    import InnerButton from "./InnerButton.svelte";
 
     export let className = "";
     export let icon = "";
@@ -51,7 +51,7 @@
 </script>
 
 <ButtonItem>
-    <IconButtonInner {className} {active} {onClick}>
+    <InnerButton {className} {active} {onClick}>
         {@html icon}
-    </IconButtonInner>
+    </InnerButton>
 </ButtonItem>
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index 443ad0055..5588ddbc7 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
     import ButtonItem from "./ButtonItem.svelte";
-    import IconButtonInner from "./IconButtonInner.svelte";
+    import InnerButton from "./InnerButton.svelte";
 
     export let className = "";
     export let icon = "";
@@ -8,7 +8,7 @@
 </script>
 
 <ButtonItem>
-    <IconButtonInner {className} active={false} {onClick}>
+    <InnerButton {className} {onClick}>
         {@html icon}
-    </IconButtonInner>
+    </InnerButton>
 </ButtonItem>
diff --git a/ts/editor-toolbar/IconButtonInner.svelte b/ts/editor-toolbar/InnerButton.svelte
similarity index 55%
rename from ts/editor-toolbar/IconButtonInner.svelte
rename to ts/editor-toolbar/InnerButton.svelte
index 23b51c82d..3df207d4c 100644
--- a/ts/editor-toolbar/IconButtonInner.svelte
+++ b/ts/editor-toolbar/InnerButton.svelte
@@ -1,17 +1,19 @@
 <script lang="typescript">
-    export let className: string;
+    export let className: string = '';
     export let onClick: (event: ClickEvent) => void;
-    export let active: boolean;
+    export let active = false;
+    export let disabled = false;
 </script>
 
 <style lang="scss">
     button {
         display: inline-block;
+
         width: 30px;
         height: 30px;
 
+        background-color: white;
         vertical-align: -webkit-baseline-middle;
-        padding: 2px;
 
         & > :global(svg),
         & > :global(img) {
@@ -27,9 +29,27 @@
         &:active, &.active {
             box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
         }
+
+        &[disabled] {
+            opacity: 0.4;
+
+            &:hover {
+                background-color: white;
+            }
+
+            &:active, &.active {
+                box-shadow: none;
+            }
+        }
     }
 </style>
 
-<button class={className} class:active on:click={onClick} on:mousedown|preventDefault>
+<button
+    class="p-1 {className}"
+    class:active
+    {disabled}
+    on:click={onClick}
+    on:mousedown|preventDefault
+>
     <slot />
 </button>

From 8c931af17c52e649dc8199fa0bc60ea3c61c594c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 23:43:48 +0200
Subject: [PATCH 11/97] Make all Leaf buttons 30px high and give same
 vertical-align

---
 ts/editor-toolbar/ColorPicker.svelte |  2 +-
 ts/editor-toolbar/InnerButton.svelte | 14 +++++++-------
 ts/editor-toolbar/LabelButton.svelte |  6 +++++-
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index ff02a15fd..eec03047f 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -8,10 +8,10 @@
 <style lang="scss">
     button {
         display: inline-block;
+        vertical-align: middle;
         width: 30px;
         height: 30px;
 
-        vertical-align: -webkit-baseline-middle;
         padding: 0;
     }
 
diff --git a/ts/editor-toolbar/InnerButton.svelte b/ts/editor-toolbar/InnerButton.svelte
index 3df207d4c..b1ba1da8b 100644
--- a/ts/editor-toolbar/InnerButton.svelte
+++ b/ts/editor-toolbar/InnerButton.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    export let className: string = '';
+    export let className: string = "";
     export let onClick: (event: ClickEvent) => void;
     export let active = false;
     export let disabled = false;
@@ -8,12 +8,11 @@
 <style lang="scss">
     button {
         display: inline-block;
-
+        vertical-align: middle;
         width: 30px;
         height: 30px;
 
         background-color: white;
-        vertical-align: -webkit-baseline-middle;
 
         & > :global(svg),
         & > :global(img) {
@@ -26,7 +25,8 @@
             background-color: #eee;
         }
 
-        &:active, &.active {
+        &:active,
+        &.active {
             box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
         }
 
@@ -37,7 +37,8 @@
                 background-color: white;
             }
 
-            &:active, &.active {
+            &:active,
+            &.active {
                 box-shadow: none;
             }
         }
@@ -49,7 +50,6 @@
     class:active
     {disabled}
     on:click={onClick}
-    on:mousedown|preventDefault
->
+    on:mousedown|preventDefault>
     <slot />
 </button>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 5271eb8ba..89c3488af 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -6,8 +6,12 @@
 
 <style lang="scss">
     button {
+        display: inline-block;
+        vertical-align: middle;
+        width: auto;
+        height: 30px;
+
         padding: 3px 10px;
-        vertical-align: -0.425em;
         margin-right: 3px;
 
         &:focus {

From 773f431bb8bb6469b3119cec034354a796c1cc61 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 23:58:48 +0200
Subject: [PATCH 12/97] Merge buttons to one OuterButtonGroup

- keeping up the concept of left / right buttons might not be necessary anymore
- This might make it easier to display them on mobile, and simplifies the logic
---
 ts/editor-toolbar/ButtonBar.svelte     |  2 +-
 ts/editor-toolbar/ButtonItem.svelte    |  3 ++-
 ts/editor-toolbar/EditorToolbar.svelte | 21 ++++-----------------
 3 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/ts/editor-toolbar/ButtonBar.svelte b/ts/editor-toolbar/ButtonBar.svelte
index 0a7610475..50e1d9601 100644
--- a/ts/editor-toolbar/ButtonBar.svelte
+++ b/ts/editor-toolbar/ButtonBar.svelte
@@ -1,7 +1,7 @@
 <style lang="scss">
     ul {
         padding-inline-start: 0;
-        margin-bottom: 2px;
+        margin-bottom: 0;
     }
 </style>
 
diff --git a/ts/editor-toolbar/ButtonItem.svelte b/ts/editor-toolbar/ButtonItem.svelte
index e3894af49..82eeda646 100644
--- a/ts/editor-toolbar/ButtonItem.svelte
+++ b/ts/editor-toolbar/ButtonItem.svelte
@@ -1,6 +1,7 @@
 <style lang="scss">
     li {
-        display: inline;
+        display: inline-block;
+        margin-bottom: 2px;
     }
 </style>
 
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 92b927617..2d4d2f758 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -22,14 +22,11 @@
     } from "./format";
     import { forecolorButton, colorpickerButton } from "./color";
 
-    export let leftButtons = [
+    export let buttons = [
         [
             { component: LabelButton, label: "Fields..." },
             { component: LabelButton, label: "Cards..." },
         ],
-    ];
-
-    export let rightButtons = [
         [
             boldButton,
             italicButton,
@@ -53,20 +50,10 @@
 
 <ButtonBarOuter>
     <ButtonBar>
-        {#each leftButtons as leftGroup}
+        {#each buttons as group}
             <ButtonGroup>
-                {#each leftGroup as leftButton}
-                    <svelte:component this={leftButton.component} {...leftButton} />
-                {/each}
-            </ButtonGroup>
-        {/each}
-    </ButtonBar>
-
-    <ButtonBar>
-        {#each rightButtons as rightGroup}
-            <ButtonGroup>
-                {#each rightGroup as rightButton}
-                    <svelte:component this={rightButton.component} {...rightButton} />
+                {#each group as button}
+                    <svelte:component this={button.component} {...button} />
                 {/each}
             </ButtonGroup>
         {/each}

From bf433f13be8b2f5d1b0b2ddee25f3e5e6e2f834a Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 00:51:44 +0200
Subject: [PATCH 13/97] Simplify General Toolbar structure

---
 ts/editor-toolbar/ButtonBar.svelte         | 10 ----
 ts/editor-toolbar/ButtonBarOuter.svelte    | 19 --------
 ts/editor-toolbar/ButtonGroup.svelte       | 53 +++++++++++++++-------
 ts/editor-toolbar/ButtonItem.svelte        | 10 ----
 ts/editor-toolbar/ColorPicker.svelte       | 10 ++--
 ts/editor-toolbar/CommandIconButton.svelte |  9 ++--
 ts/editor-toolbar/EditorToolbar.svelte     | 31 +++++++------
 ts/editor-toolbar/IconButton.svelte        |  9 ++--
 ts/editor-toolbar/LabelButton.svelte       |  6 +--
 ts/editor/editable.scss                    |  3 ++
 ts/editor/editingArea.ts                   |  2 +-
 11 files changed, 69 insertions(+), 93 deletions(-)
 delete mode 100644 ts/editor-toolbar/ButtonBar.svelte
 delete mode 100644 ts/editor-toolbar/ButtonBarOuter.svelte
 delete mode 100644 ts/editor-toolbar/ButtonItem.svelte

diff --git a/ts/editor-toolbar/ButtonBar.svelte b/ts/editor-toolbar/ButtonBar.svelte
deleted file mode 100644
index 50e1d9601..000000000
--- a/ts/editor-toolbar/ButtonBar.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<style lang="scss">
-    ul {
-        padding-inline-start: 0;
-        margin-bottom: 0;
-    }
-</style>
-
-<ul>
-    <slot />
-</ul>
diff --git a/ts/editor-toolbar/ButtonBarOuter.svelte b/ts/editor-toolbar/ButtonBarOuter.svelte
deleted file mode 100644
index 48231e41f..000000000
--- a/ts/editor-toolbar/ButtonBarOuter.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<style lang="scss">
-    div {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-
-        position: sticky;
-        top: 0;
-        left: 0;
-        z-index: 5;
-        padding: 2px;
-
-        background: var(--bg-color);
-    }
-</style>
-
-<div>
-    <slot />
-</div>
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 2b531f5b1..4bb2d857a 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,34 +1,55 @@
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
+    type Buttons =
+        | { component: SvelteComponent; [...arg: string]: unknown }
+        | Buttons[];
+
+    export let buttons: Buttons;
 </script>
 
 <style lang="scss">
     ul {
         display: inline-block;
-        padding-inline-start: 0;
 
-        margin-left: 0.25rem;
-        margin-right: 0.25rem;
+        padding-inline-start: 0;
+        margin-bottom: 0;
 
         & :global(button) {
             margin-left: -1px;
         }
+    }
 
-        & > :global(li:nth-child(1) button) {
-            margin-left: 0px;
-            border-top-left-radius: 0.35rem;
-            border-bottom-left-radius: 0.35rem;
+    li {
+        display: inline-block;
+        margin-bottom: 2px;
+
+        &:nth-child(1) {
+            margin-left: 0.25rem;
+
+            & > :global(button) {
+                border-top-left-radius: 0.25rem;
+                border-bottom-left-radius: 0.25rem;
+            }
         }
 
-        & > :global(li:nth-last-child(1) button) {
-            border-top-right-radius: 0.35rem;
-            border-bottom-right-radius: 0.35rem;
+        &:nth-last-child(1) {
+            margin-right: 0.25rem;
+
+            & > :global(button) {
+                border-top-right-radius: 0.25rem;
+                border-bottom-right-radius: 0.25rem;
+            }
         }
     }
 </style>
 
-<ButtonItem>
-    <ul>
-        <slot />
-    </ul>
-</ButtonItem>
+<ul>
+    {#each buttons as button}
+        <li>
+            {#if Array.isArray(button)}
+                <svelte:self buttons={button} />
+            {:else}
+                <svelte:component this={button.component} {...button} />
+            {/if}
+        </li>
+    {/each}
+</ul>
diff --git a/ts/editor-toolbar/ButtonItem.svelte b/ts/editor-toolbar/ButtonItem.svelte
deleted file mode 100644
index 82eeda646..000000000
--- a/ts/editor-toolbar/ButtonItem.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<style lang="scss">
-    li {
-        display: inline-block;
-        margin-bottom: 2px;
-    }
-</style>
-
-<li>
-    <slot />
-</li>
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index eec03047f..6ccc7ca20 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
-
     export let className: string;
     export let onChange: (event: ChangeEvent) => void;
 </script>
@@ -28,8 +26,6 @@
     }
 </style>
 
-<ButtonItem>
-    <button>
-        <span class={className}> <input type="color" on:change={onChange} /> </span>
-    </button>
-</ButtonItem>
+<button>
+    <span class={className}> <input type="color" on:change={onChange} /> </span>
+</button>
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 6e417fce3..2513c04bf 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -26,7 +26,6 @@
 </script>
 
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
     import InnerButton from "./InnerButton.svelte";
 
     export let className = "";
@@ -50,8 +49,6 @@
     }
 </script>
 
-<ButtonItem>
-    <InnerButton {className} {active} {onClick}>
-        {@html icon}
-    </InnerButton>
-</ButtonItem>
+<InnerButton {className} {active} {onClick}>
+    {@html icon}
+</InnerButton>
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 2d4d2f758..ede95cab5 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import ButtonBarOuter from "./ButtonBarOuter.svelte";
-    import ButtonBar from "./ButtonBar.svelte";
     import ButtonGroup from "./ButtonGroup.svelte";
 
     import LabelButton from "./LabelButton.svelte";
@@ -48,14 +46,21 @@
     console.log(nightMode);
 </script>
 
-<ButtonBarOuter>
-    <ButtonBar>
-        {#each buttons as group}
-            <ButtonGroup>
-                {#each group as button}
-                    <svelte:component this={button.component} {...button} />
-                {/each}
-            </ButtonGroup>
-        {/each}
-    </ButtonBar>
-</ButtonBarOuter>
+<style lang="scss">
+    div {
+        display: flex;
+        flex-wrap: wrap;
+
+        position: sticky;
+        top: 0;
+        left: 0;
+        z-index: 5;
+        padding: 2px;
+
+        background: var(--bg-color);
+    }
+</style>
+
+<div>
+    <ButtonGroup {buttons} />
+</div>
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index 5588ddbc7..613a53433 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -1,5 +1,4 @@
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
     import InnerButton from "./InnerButton.svelte";
 
     export let className = "";
@@ -7,8 +6,6 @@
     export let onClick: (event: ClickEvent) => void;
 </script>
 
-<ButtonItem>
-    <InnerButton {className} {onClick}>
-        {@html icon}
-    </InnerButton>
-</ButtonItem>
+<InnerButton {className} {onClick}>
+    {@html icon}
+</InnerButton>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 89c3488af..5e7c34049 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
-
     export let label: string;
 </script>
 
@@ -20,6 +18,4 @@
     }
 </style>
 
-<ButtonItem>
-    <button type="button" class="btn btn-secondary" on:click> {label} </button>
-</ButtonItem>
+<button type="button" class="btn btn-secondary" on:click> {label} </button>
diff --git a/ts/editor/editable.scss b/ts/editor/editable.scss
index 9cd7186f3..8a2e9e374 100644
--- a/ts/editor/editable.scss
+++ b/ts/editor/editable.scss
@@ -6,6 +6,9 @@ anki-editable {
     overflow: auto;
     padding: 6px;
 
+    /* Fit bootstraps .rounded */
+    border-radius: 0.25rem;
+
     &:empty::after {
         content: "\a";
         white-space: pre;
diff --git a/ts/editor/editingArea.ts b/ts/editor/editingArea.ts
index 737493f6b..3db206d6e 100644
--- a/ts/editor/editingArea.ts
+++ b/ts/editor/editingArea.ts
@@ -24,7 +24,7 @@ export class EditingArea extends HTMLDivElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
-        this.className = "field";
+        this.className = "field rounded";
 
         const rootStyle = document.createElement("link");
         rootStyle.setAttribute("rel", "stylesheet");

From 2f808fe60c3a3004af4a0ba60c6194d7100eb2c3 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 01:23:39 +0200
Subject: [PATCH 14/97] Move initialization logic from EditorToolbar to
 index.ts

---
 ts/editor-toolbar/ButtonGroup.svelte   |  6 ++-
 ts/editor-toolbar/EditorToolbar.svelte | 54 +++++++-------------------
 ts/editor-toolbar/extra.ts             | 10 +++++
 ts/editor-toolbar/index.ts             | 33 ++++++++++++++++
 4 files changed, 61 insertions(+), 42 deletions(-)
 create mode 100644 ts/editor-toolbar/extra.ts

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 4bb2d857a..a2b07fa8b 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,8 +1,10 @@
-<script lang="typescript">
-    type Buttons =
+<script lang="typescript" context="module">
+    export type Buttons =
         | { component: SvelteComponent; [...arg: string]: unknown }
         | Buttons[];
+</script>
 
+<script lang="typescript">
     export let buttons: Buttons;
 </script>
 
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index ede95cab5..de2d7a7e5 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,46 +1,8 @@
 <script lang="typescript">
     import ButtonGroup from "./ButtonGroup.svelte";
+    import type { Buttons } from "./ButtonGroup.svelte";
 
-    import LabelButton from "./LabelButton.svelte";
-    import IconButton from "./IconButton.svelte";
-
-    import bracketsIcon from "./code-brackets.svg";
-
-    import paperclipIcon from "./paperclip.svg";
-    import micIcon from "./mic.svg";
-    import threeDotsIcon from "./three-dots.svg";
-
-    import {
-        boldButton,
-        italicButton,
-        underlineButton,
-        superscriptButton,
-        subscriptButton,
-        eraserButton,
-    } from "./format";
-    import { forecolorButton, colorpickerButton } from "./color";
-
-    export let buttons = [
-        [
-            { component: LabelButton, label: "Fields..." },
-            { component: LabelButton, label: "Cards..." },
-        ],
-        [
-            boldButton,
-            italicButton,
-            underlineButton,
-            superscriptButton,
-            subscriptButton,
-            eraserButton,
-        ],
-        [forecolorButton, colorpickerButton],
-        [
-            { component: IconButton, icon: bracketsIcon },
-            { component: IconButton, icon: paperclipIcon },
-            { component: IconButton, icon: micIcon },
-            { component: IconButton, icon: threeDotsIcon },
-        ],
-    ];
+    export let buttons: Buttons = [];
     export let nightMode: boolean;
 
     console.log(nightMode);
@@ -58,6 +20,18 @@
         padding: 2px;
 
         background: var(--bg-color);
+        border-bottom: 1px solid var(--border);
+
+        /* Remove most outer marigns */
+        & > :global(ul) {
+            & > :global(li:nth-child(1)) {
+                margin-left: 0;
+            }
+
+            & > :global(li:nth-last-child(1)) {
+                margin-right: 0;
+            }
+        }
     }
 </style>
 
diff --git a/ts/editor-toolbar/extra.ts b/ts/editor-toolbar/extra.ts
new file mode 100644
index 000000000..ffd3aff43
--- /dev/null
+++ b/ts/editor-toolbar/extra.ts
@@ -0,0 +1,10 @@
+import IconButton from "./IconButton.svelte";
+import bracketsIcon from "./code-brackets.svg";
+import paperclipIcon from "./paperclip.svg";
+import micIcon from "./mic.svg";
+import threeDotsIcon from "./three-dots.svg";
+
+export const clozeButton = { component: IconButton, icon: bracketsIcon };
+export const attachmentButton = { component: IconButton, icon: paperclipIcon };
+export const micButton = { component: IconButton, icon: micIcon };
+export const etcButton = { component: IconButton, icon: threeDotsIcon };
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 20c838afb..e1a9605ed 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -2,6 +2,38 @@ import type { SvelteComponent } from "svelte";
 import { checkNightMode } from "anki/nightmode";
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
+import LabelButton from "./LabelButton.svelte";
+
+import {
+    boldButton,
+    italicButton,
+    underlineButton,
+    superscriptButton,
+    subscriptButton,
+    eraserButton,
+} from "./format";
+
+import { forecolorButton, colorpickerButton } from "./color";
+
+import { clozeButton, attachmentButton, micButton, etcButton } from "./extra";
+
+const defaultButtons = [
+    [
+        { component: LabelButton, label: "Fields..." },
+        { component: LabelButton, label: "Cards..." },
+    ],
+    [
+        boldButton,
+        italicButton,
+        underlineButton,
+        superscriptButton,
+        subscriptButton,
+        eraserButton,
+    ],
+    [forecolorButton, colorpickerButton],
+    [clozeButton, attachmentButton, micButton, etcButton],
+];
+
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;
 
@@ -12,6 +44,7 @@ class EditorToolbar extends HTMLElement {
             target: this,
             props: {
                 nightMode,
+                buttons: defaultButtons,
             },
         });
     }

From 12021228a555587fd8d3e3368a62a66d2714abd6 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 01:53:27 +0200
Subject: [PATCH 15/97] Make all buttons functional

---
 ts/editor-toolbar/extra.ts | 38 ++++++++++++++++++++++++++++++++++----
 ts/editor-toolbar/index.ts |  4 ++--
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/ts/editor-toolbar/extra.ts b/ts/editor-toolbar/extra.ts
index ffd3aff43..8ba09be56 100644
--- a/ts/editor-toolbar/extra.ts
+++ b/ts/editor-toolbar/extra.ts
@@ -1,10 +1,40 @@
+import { bridgeCommand } from "anki/bridgecommand";
+
 import IconButton from "./IconButton.svelte";
 import bracketsIcon from "./code-brackets.svg";
 import paperclipIcon from "./paperclip.svg";
 import micIcon from "./mic.svg";
 import threeDotsIcon from "./three-dots.svg";
 
-export const clozeButton = { component: IconButton, icon: bracketsIcon };
-export const attachmentButton = { component: IconButton, icon: paperclipIcon };
-export const micButton = { component: IconButton, icon: micIcon };
-export const etcButton = { component: IconButton, icon: threeDotsIcon };
+function onCloze(): void {
+    bridgeCommand("cloze");
+}
+
+function onAttachment(): void {
+    bridgeCommand("attach");
+}
+
+function onRecord(): void {
+    bridgeCommand("record");
+}
+
+function onMore(): void {
+    bridgeCommand("more");
+}
+
+export const clozeButton = {
+    component: IconButton,
+    icon: bracketsIcon,
+    onClick: onCloze,
+};
+export const attachmentButton = {
+    component: IconButton,
+    icon: paperclipIcon,
+    onClick: onAttachment,
+};
+export const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
+export const moreButton = {
+    component: IconButton,
+    icon: threeDotsIcon,
+    onClick: onMore,
+};
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index e1a9605ed..ff8acc25d 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -15,7 +15,7 @@ import {
 
 import { forecolorButton, colorpickerButton } from "./color";
 
-import { clozeButton, attachmentButton, micButton, etcButton } from "./extra";
+import { clozeButton, attachmentButton, recordButton, moreButton } from "./extra";
 
 const defaultButtons = [
     [
@@ -31,7 +31,7 @@ const defaultButtons = [
         eraserButton,
     ],
     [forecolorButton, colorpickerButton],
-    [clozeButton, attachmentButton, micButton, etcButton],
+    [clozeButton, attachmentButton, recordButton, moreButton],
 ];
 
 class EditorToolbar extends HTMLElement {

From 77de6c028805a21de8c780adb6a79b700eb07d1e Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 02:39:54 +0200
Subject: [PATCH 16/97] Make icons slightly smaller, so they are the same size
 as before

---
 ts/editor-toolbar/ColorPicker.svelte | 10 ++++++++--
 ts/editor-toolbar/InnerButton.svelte |  4 ++--
 ts/editor-toolbar/LabelButton.svelte |  6 +++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 6ccc7ca20..085f1b351 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -7,22 +7,28 @@
     button {
         display: inline-block;
         vertical-align: middle;
-        width: 30px;
-        height: 30px;
+        width: 28px;
+        height: 28px;
 
         padding: 0;
+
+        &:hover {
+            background-color: #eee;
+        }
     }
 
     span {
         display: inline-block;
         width: 100%;
         height: 100%;
+        cursor: pointer;
     }
 
     input {
         opacity: 0;
         width: 100%;
         height: 100%;
+        cursor: pointer;
     }
 </style>
 
diff --git a/ts/editor-toolbar/InnerButton.svelte b/ts/editor-toolbar/InnerButton.svelte
index b1ba1da8b..a8bc76688 100644
--- a/ts/editor-toolbar/InnerButton.svelte
+++ b/ts/editor-toolbar/InnerButton.svelte
@@ -9,8 +9,8 @@
     button {
         display: inline-block;
         vertical-align: middle;
-        width: 30px;
-        height: 30px;
+        width: 28px;
+        height: 28px;
 
         background-color: white;
 
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 5e7c34049..be50d4c56 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -7,10 +7,10 @@
         display: inline-block;
         vertical-align: middle;
         width: auto;
-        height: 30px;
+        height: 26px;
 
-        padding: 3px 10px;
-        margin-right: 3px;
+        padding: 0 10px;
+        margin: 0 3px;
 
         &:focus {
             box-shadow: 0 0 0 0.05rem rgba(255, 255, 255, 0.5);

From b5b9c79f1ca77741407b4072e3959b71de85c90b Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 02:53:57 +0200
Subject: [PATCH 17/97] Add mathjaxButton and htmlButton instead of more button

---
 ts/editor-toolbar/BUILD.bazel |  3 ++-
 ts/editor-toolbar/extra.ts    | 39 ++++++++++++++++++++++-------------
 ts/editor-toolbar/index.ts    | 10 +++++++--
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index b27308da8..440a1a23f 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -57,7 +57,6 @@ copy_bootstrap_icons(
         "square-fill.svg",
         "paperclip.svg",
         "mic.svg",
-        "three-dots.svg",
     ],
 )
 
@@ -66,7 +65,9 @@ copy_mdi_icons(
     icons = [
         "format-superscript.svg",
         "format-subscript.svg",
+        "function-variant.svg",
         "code-brackets.svg",
+        "xml.svg",
     ],
 )
 
diff --git a/ts/editor-toolbar/extra.ts b/ts/editor-toolbar/extra.ts
index 8ba09be56..e94f20410 100644
--- a/ts/editor-toolbar/extra.ts
+++ b/ts/editor-toolbar/extra.ts
@@ -1,14 +1,12 @@
 import { bridgeCommand } from "anki/bridgecommand";
 
 import IconButton from "./IconButton.svelte";
-import bracketsIcon from "./code-brackets.svg";
+
 import paperclipIcon from "./paperclip.svg";
 import micIcon from "./mic.svg";
-import threeDotsIcon from "./three-dots.svg";
-
-function onCloze(): void {
-    bridgeCommand("cloze");
-}
+import bracketsIcon from "./code-brackets.svg";
+import functionIcon from "./function-variant.svg";
+import xmlIcon from "./xml.svg";
 
 function onAttachment(): void {
     bridgeCommand("attach");
@@ -18,23 +16,36 @@ function onRecord(): void {
     bridgeCommand("record");
 }
 
+function onCloze(): void {
+    bridgeCommand("cloze");
+}
+
 function onMore(): void {
     bridgeCommand("more");
 }
 
+export const attachmentButton = {
+    component: IconButton,
+    icon: paperclipIcon,
+    onClick: onAttachment,
+};
+
+export const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
+
 export const clozeButton = {
     component: IconButton,
     icon: bracketsIcon,
     onClick: onCloze,
 };
-export const attachmentButton = {
+
+export const mathjaxButton = {
     component: IconButton,
-    icon: paperclipIcon,
-    onClick: onAttachment,
-};
-export const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
-export const moreButton = {
-    component: IconButton,
-    icon: threeDotsIcon,
+    icon: functionIcon,
+    onClick: onMore,
+};
+
+export const htmlButton = {
+    component: IconButton,
+    icon: xmlIcon,
     onClick: onMore,
 };
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index ff8acc25d..800822943 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -15,7 +15,13 @@ import {
 
 import { forecolorButton, colorpickerButton } from "./color";
 
-import { clozeButton, attachmentButton, recordButton, moreButton } from "./extra";
+import {
+    attachmentButton,
+    recordButton,
+    clozeButton,
+    mathjaxButton,
+    htmlButton,
+} from "./extra";
 
 const defaultButtons = [
     [
@@ -31,7 +37,7 @@ const defaultButtons = [
         eraserButton,
     ],
     [forecolorButton, colorpickerButton],
-    [clozeButton, attachmentButton, recordButton, moreButton],
+    [attachmentButton, recordButton, clozeButton, mathjaxButton, htmlButton],
 ];
 
 class EditorToolbar extends HTMLElement {

From 7f5e9b1b33ed62f83717da18c08bf83306f90006 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 03:05:21 +0200
Subject: [PATCH 18/97] Add negative tabindex

---
 ts/editor-toolbar/ColorPicker.svelte | 2 +-
 ts/editor-toolbar/InnerButton.svelte | 1 +
 ts/editor-toolbar/LabelButton.svelte | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 085f1b351..699900a6e 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -32,6 +32,6 @@
     }
 </style>
 
-<button>
+<button tabindex="-1">
     <span class={className}> <input type="color" on:change={onChange} /> </span>
 </button>
diff --git a/ts/editor-toolbar/InnerButton.svelte b/ts/editor-toolbar/InnerButton.svelte
index a8bc76688..ca9181fec 100644
--- a/ts/editor-toolbar/InnerButton.svelte
+++ b/ts/editor-toolbar/InnerButton.svelte
@@ -48,6 +48,7 @@
 <button
     class="p-1 {className}"
     class:active
+    tabindex="-1"
     {disabled}
     on:click={onClick}
     on:mousedown|preventDefault>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index be50d4c56..8b429e753 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -18,4 +18,4 @@
     }
 </style>
 
-<button type="button" class="btn btn-secondary" on:click> {label} </button>
+<button class="btn btn-secondary" tabindex="-1" on:click> {label} </button>

From e25583d7ff2308f54e77327ab7f2180114b54789 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 03:11:51 +0200
Subject: [PATCH 19/97] Move display:flex from outer div to ButtonGroup ul

---
 ts/editor-toolbar/ButtonGroup.svelte   | 5 ++++-
 ts/editor-toolbar/EditorToolbar.svelte | 6 +-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index a2b07fa8b..e139adfcd 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -10,7 +10,10 @@
 
 <style lang="scss">
     ul {
-        display: inline-block;
+        display: flex;
+        /* flex-flow: nowrap for a scrollable toolbar */
+        flex-flow: wrap;
+        overflow: scroll;
 
         padding-inline-start: 0;
         margin-bottom: 0;
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index de2d7a7e5..51c101347 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -10,14 +10,10 @@
 
 <style lang="scss">
     div {
-        display: flex;
-        flex-wrap: wrap;
-
         position: sticky;
         top: 0;
         left: 0;
-        z-index: 5;
-        padding: 2px;
+        z-index: 10;
 
         background: var(--bg-color);
         border-bottom: 1px solid var(--border);

From 4280bf28f8404790505fc2e7f935283051919b1d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 03:17:36 +0200
Subject: [PATCH 20/97] Add active shadow on ColorPicker

---
 ts/editor-toolbar/ColorPicker.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 699900a6e..42ac0931e 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -15,6 +15,10 @@
         &:hover {
             background-color: #eee;
         }
+
+        &:active {
+            box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
+        }
     }
 
     span {

From 9340d20c20a7f7db62cde42a57e7840ce5a88bed Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 04:38:02 +0200
Subject: [PATCH 21/97] Display .active:active as :hover buttons

---
 ts/editor-toolbar/ColorPicker.svelte       |  3 ++-
 ts/editor-toolbar/CommandIconButton.svelte | 12 ++++++++++--
 ts/editor-toolbar/InnerButton.svelte       |  8 +++++++-
 ts/editor-toolbar/LabelButton.svelte       |  2 +-
 ts/editor-toolbar/format.ts                |  4 ++--
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 42ac0931e..7e0358574 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -17,7 +17,8 @@
         }
 
         &:active {
-            box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
+            box-shadow: inset 0 0 12px 4px rgb(0 0 0 / 30%);
+            border-color: #aaa;
         }
     }
 
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 2513c04bf..633d824c8 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -10,19 +10,27 @@
         );
     }
 
-    export function updateButtons() {
+    function updateButtons(callback: (key: string) => boolean): void {
         commandMap.update(
             (map: Map<string, boolean>): Map<string, boolean> => {
                 const newMap = new Map<string, boolean>();
 
                 for (const key of map.keys()) {
-                    newMap.set(key, document.queryCommandState(key));
+                    newMap.set(key, callback(key));
                 }
 
                 return newMap;
             }
         );
     }
+
+    export function updateButtonActive() {
+        updateButtons((key: string): boolean => document.queryCommandState(key));
+    }
+
+    export function clearButtonActive() {
+        updateButtons((): boolean => false);
+    }
 </script>
 
 <script lang="typescript">
diff --git a/ts/editor-toolbar/InnerButton.svelte b/ts/editor-toolbar/InnerButton.svelte
index ca9181fec..8848de6f0 100644
--- a/ts/editor-toolbar/InnerButton.svelte
+++ b/ts/editor-toolbar/InnerButton.svelte
@@ -27,7 +27,13 @@
 
         &:active,
         &.active {
-            box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
+            box-shadow: inset 0 0 12px 4px rgb(0 0 0 / 30%);
+            border-color: #aaa;
+        }
+
+        &.active:active {
+            box-shadow: none;
+            border-color: var(--border);
         }
 
         &[disabled] {
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 8b429e753..9428dd568 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -13,7 +13,7 @@
         margin: 0 3px;
 
         &:focus {
-            box-shadow: 0 0 0 0.05rem rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 12px 4px rgb(255 255 255 / 0.5);
         }
     }
 </style>
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index ddf656fca..5205399b0 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -1,5 +1,5 @@
 // @ts-ignore
-import CommandIconButton, { updateButtons } from "./CommandIconButton.svelte";
+import CommandIconButton, { updateButtonActive } from "./CommandIconButton.svelte";
 import boldIcon from "./type-bold.svg";
 import italicIcon from "./type-italic.svg";
 import underlineIcon from "./type-underline.svg";
@@ -45,4 +45,4 @@ export const eraserButton = {
 };
 
 // TODO
-setInterval(updateButtons, 2000);
+setInterval(updateButtonActive, 2000);

From a820059b8feac82c08c4afecc10416a422f9d03e Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 06:14:00 +0200
Subject: [PATCH 22/97] Utilize enableButtons disableButtons from Svelte
 component

---
 qt/aqt/editor.py                           |  3 +-
 ts/editor-toolbar/BUILD.bazel              |  2 +-
 ts/editor-toolbar/CommandIconButton.svelte |  8 +--
 ts/editor-toolbar/EditorToolbar.svelte     |  8 ++-
 ts/editor-toolbar/InnerButton.svelte       | 10 +++-
 ts/editor-toolbar/contextKeys.ts           |  2 +
 ts/editor-toolbar/format.ts                |  5 +-
 ts/editor-toolbar/index.ts                 | 35 ++++++++++---
 ts/editor/editingArea.ts                   |  7 +--
 ts/editor/focusHandlers.ts                 |  7 +--
 ts/editor/index.ts                         | 11 ++--
 ts/editor/inputHandlers.ts                 |  7 +--
 ts/editor/toolbar.ts                       | 61 ----------------------
 13 files changed, 71 insertions(+), 95 deletions(-)
 create mode 100644 ts/editor-toolbar/contextKeys.ts
 delete mode 100644 ts/editor/toolbar.ts

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index c20c8f4be..d76bdc550 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -82,7 +82,7 @@ _html = """
 }
 </style>
 <div>
-    <anki-editor-toolbar></anki-editor-toolbar>
+    <anki-editor-toolbar id="editorToolbar"></anki-editor-toolbar>
     <div id="fields">
     </div>
     <div id="dupes" class="is-inactive">
@@ -1113,6 +1113,7 @@ class Editor:
         dupes=showDupes,
         paste=onPaste,
         cutOrCopy=onCutOrCopy,
+        htmlEdit=onHtmlEdit,
     )
 
 
diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 440a1a23f..74455cf96 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -77,7 +77,7 @@ esbuild(
         "//ts:protobuf-shim.js",
     ],
     args = [
-        "--global-name=anki",
+        "--global-name=editorToolbar",
         "--inject:ts/protobuf-shim.js",
         "--loader:.svg=text",
     ],
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 633d824c8..b5efcaaa0 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -3,7 +3,7 @@
 
     export const commandMap = writable(new Map<string, boolean>());
 
-    function updateButton(key: string): void {
+    function initializeButton(key: string): void {
         commandMap.update(
             (map: Map<string, boolean>): Map<string, boolean> =>
                 new Map([...map, [key, document.queryCommandState(key)]])
@@ -24,11 +24,11 @@
         );
     }
 
-    export function updateButtonActive() {
+    export function updateActiveButtons() {
         updateButtons((key: string): boolean => document.queryCommandState(key));
     }
 
-    export function clearButtonActive() {
+    export function clearActiveButtons() {
         updateButtons((): boolean => false);
     }
 </script>
@@ -44,7 +44,7 @@
     let active = false;
 
     if (activatable) {
-        updateButton(command);
+        initializeButton(command);
 
         commandMap.subscribe((map: Record<string, boolean>): void => {
             active = map.get(command);
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 51c101347..4fef8b702 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,11 +1,17 @@
 <script lang="typescript">
+    import type { Readable } from "svelte/store";
+    import { setContext } from "svelte";
+    import { disabledKey, nightModeKey } from "./contextKeys";
+
     import ButtonGroup from "./ButtonGroup.svelte";
     import type { Buttons } from "./ButtonGroup.svelte";
 
     export let buttons: Buttons = [];
     export let nightMode: boolean;
+    export let disabled: Readable<boolean> = false;
 
-    console.log(nightMode);
+    setContext(disabledKey, disabled);
+    setContext(nightModeKey, nightMode);
 </script>
 
 <style lang="scss">
diff --git a/ts/editor-toolbar/InnerButton.svelte b/ts/editor-toolbar/InnerButton.svelte
index 8848de6f0..43030ce7e 100644
--- a/ts/editor-toolbar/InnerButton.svelte
+++ b/ts/editor-toolbar/InnerButton.svelte
@@ -1,8 +1,14 @@
 <script lang="typescript">
+    import { getContext } from "svelte";
+    import type { Readable } from "svelte/store";
+    import { disabledKey } from "./contextKeys";
+
     export let className: string = "";
     export let onClick: (event: ClickEvent) => void;
     export let active = false;
-    export let disabled = false;
+
+    const disabledStore = getContext(disabledKey)
+    $: disabled = $disabledStore;
 </script>
 
 <style lang="scss">
@@ -16,6 +22,7 @@
 
         & > :global(svg),
         & > :global(img) {
+            fill: currentColor;
             vertical-align: unset;
             width: 100%;
             height: 100%;
@@ -38,6 +45,7 @@
 
         &[disabled] {
             opacity: 0.4;
+            cursor: not-allowed;
 
             &:hover {
                 background-color: white;
diff --git a/ts/editor-toolbar/contextKeys.ts b/ts/editor-toolbar/contextKeys.ts
new file mode 100644
index 000000000..05fd7e0bd
--- /dev/null
+++ b/ts/editor-toolbar/contextKeys.ts
@@ -0,0 +1,2 @@
+export let nightModeKey = Symbol("nightMode");
+export let disabledKey = Symbol("disabled");
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index 5205399b0..e2b19c5e6 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -1,5 +1,5 @@
 // @ts-ignore
-import CommandIconButton, { updateButtonActive } from "./CommandIconButton.svelte";
+import CommandIconButton from "./CommandIconButton.svelte";
 import boldIcon from "./type-bold.svg";
 import italicIcon from "./type-italic.svg";
 import underlineIcon from "./type-underline.svg";
@@ -43,6 +43,3 @@ export const eraserButton = {
     command: "removeFormat",
     highlightable: false,
 };
-
-// TODO
-setInterval(updateButtonActive, 2000);
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 800822943..71f65f0d3 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -1,9 +1,16 @@
 import type { SvelteComponent } from "svelte";
+
 import { checkNightMode } from "anki/nightmode";
+import { setupI18n, ModuleName } from "anki/i18n";
+
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
 import LabelButton from "./LabelButton.svelte";
 
+// @ts-ignore
+export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
+import { Writable, writable } from "svelte/store";
+
 import {
     boldButton,
     italicButton,
@@ -42,17 +49,29 @@ const defaultButtons = [
 
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;
+    disabled?: Writable<boolean>;
 
     connectedCallback(): void {
-        const nightMode = checkNightMode();
+        this.disabled = writable(false);
 
-        this.component = new EditorToolbarSvelte({
-            target: this,
-            props: {
-                nightMode,
-                buttons: defaultButtons,
-            },
-        });
+        setupI18n({ modules: [ModuleName.STATISTICS, ModuleName.SCHEDULING] }).then(() => {
+            this.component = new EditorToolbarSvelte({
+                target: this,
+                props: {
+                    buttons: defaultButtons,
+                    nightMode: checkNightMode(),
+                    disabled: this.disabled,
+                },
+            });
+        })
+    }
+
+    enableButtons(): void {
+        this.disabled?.set(false);
+    }
+
+    disableButtons(): void {
+        this.disabled?.set(true);
     }
 }
 
diff --git a/ts/editor/editingArea.ts b/ts/editor/editingArea.ts
index 3db206d6e..f0ccc0453 100644
--- a/ts/editor/editingArea.ts
+++ b/ts/editor/editingArea.ts
@@ -6,7 +6,6 @@ import type { Editable } from "./editable";
 import { bridgeCommand } from "./lib";
 import { onInput, onKey, onKeyUp } from "./inputHandlers";
 import { onFocus, onBlur } from "./focusHandlers";
-import { updateButtonState } from "./toolbar";
 
 function onPaste(evt: ClipboardEvent): void {
     bridgeCommand("paste");
@@ -60,7 +59,8 @@ export class EditingArea extends HTMLDivElement {
         this.addEventListener("paste", onPaste);
         this.addEventListener("copy", onCutOrCopy);
         this.addEventListener("oncut", onCutOrCopy);
-        this.addEventListener("mouseup", updateButtonState);
+        // @ts-ignore
+        this.addEventListener("mouseup", editorToolbar.updateActiveButtons);
 
         const baseStyleSheet = this.baseStyle.sheet as CSSStyleSheet;
         baseStyleSheet.insertRule("anki-editable {}", 0);
@@ -75,7 +75,8 @@ export class EditingArea extends HTMLDivElement {
         this.removeEventListener("paste", onPaste);
         this.removeEventListener("copy", onCutOrCopy);
         this.removeEventListener("oncut", onCutOrCopy);
-        this.removeEventListener("mouseup", updateButtonState);
+        // @ts-ignore
+        this.removeEventListener("mouseup", editorToolbar.updateActiveButtons);
     }
 
     initialize(color: string, content: string): void {
diff --git a/ts/editor/focusHandlers.ts b/ts/editor/focusHandlers.ts
index 6ca0528dd..d377740a6 100644
--- a/ts/editor/focusHandlers.ts
+++ b/ts/editor/focusHandlers.ts
@@ -5,13 +5,13 @@ import type { EditingArea } from "./editingArea";
 
 import { saveField } from "./changeTimer";
 import { bridgeCommand } from "./lib";
-import { enableButtons, disableButtons } from "./toolbar";
 
 export function onFocus(evt: FocusEvent): void {
     const currentField = evt.currentTarget as EditingArea;
     currentField.focusEditable();
     bridgeCommand(`focus:${currentField.ord}`);
-    enableButtons();
+    // @ts-ignore
+    document.getElementById("editorToolbar").enableButtons();
 }
 
 export function onBlur(evt: FocusEvent): void {
@@ -19,5 +19,6 @@ export function onBlur(evt: FocusEvent): void {
     const currentFieldUnchanged = previousFocus === document.activeElement;
 
     saveField(previousFocus, currentFieldUnchanged ? "key" : "blur");
-    disableButtons();
+    // @ts-ignore
+    document.getElementById("editorToolbar").disableButtons();
 }
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index 44101244d..d07fca635 100644
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@@ -5,7 +5,6 @@ import { filterHTML } from "html-filter";
 
 import { caretToEnd } from "./helpers";
 import { saveField } from "./changeTimer";
-import { updateButtonState, disableButtons } from "./toolbar";
 
 import { EditorField } from "./editorField";
 import { LabelContainer } from "./labelContainer";
@@ -13,7 +12,6 @@ import { EditingArea } from "./editingArea";
 import { Editable } from "./editable";
 
 export { setNoteId, getNoteId } from "./noteId";
-export { preventButtonFocus, toggleEditorButton, setFGButton } from "./toolbar";
 export { saveNow } from "./changeTimer";
 export { wrap, wrapIntoText } from "./wrap";
 
@@ -43,7 +41,8 @@ export function focusField(n: number): void {
     if (field) {
         field.editingArea.focusEditable();
         caretToEnd(field.editingArea);
-        updateButtonState();
+        // @ts-ignore
+        editorToolbar.updateActiveButtons();
     }
 }
 
@@ -123,7 +122,8 @@ export function setFields(fields: [string, string][]): void {
 
     if (!getCurrentField()) {
         // when initial focus of the window is not on editor (e.g. browser)
-        disableButtons();
+        // @ts-ignore
+        document.getElementById("editorToolbar").disableButtons();
     }
 }
 
@@ -158,6 +158,7 @@ export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void
     document.execCommand(cmd, false, arg);
     if (!nosave) {
         saveField(getCurrentField() as EditingArea, "key");
-        updateButtonState();
+        // @ts-ignore
+        editorToolbar.updateActiveButtons();
     }
 }
diff --git a/ts/editor/inputHandlers.ts b/ts/editor/inputHandlers.ts
index afb38bf0f..f4a929763 100644
--- a/ts/editor/inputHandlers.ts
+++ b/ts/editor/inputHandlers.ts
@@ -4,7 +4,6 @@
 import { EditingArea } from "./editingArea";
 import { caretToEnd, nodeIsElement } from "./helpers";
 import { triggerChangeTimer } from "./changeTimer";
-import { updateButtonState } from "./toolbar";
 
 function inListItem(currentField: EditingArea): boolean {
     const anchor = currentField.getSelection()!.anchorNode!;
@@ -22,7 +21,8 @@ function inListItem(currentField: EditingArea): boolean {
 export function onInput(event: Event): void {
     // make sure IME changes get saved
     triggerChangeTimer(event.currentTarget as EditingArea);
-    updateButtonState();
+    // @ts-ignore
+    editorToolbar.updateActiveButtons();
 }
 
 export function onKey(evt: KeyboardEvent): void {
@@ -69,7 +69,8 @@ globalThis.addEventListener("keydown", (evt: KeyboardEvent) => {
                 const newFocusTarget = evt.target;
                 if (newFocusTarget instanceof EditingArea) {
                     caretToEnd(newFocusTarget);
-                    updateButtonState();
+                    // @ts-ignore
+                    editorToolbar.updateActiveButtons();
                 }
             },
             { once: true }
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
deleted file mode 100644
index 1e6cdb274..000000000
--- a/ts/editor/toolbar.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-const highlightButtons = ["bold", "italic", "underline", "superscript", "subscript"];
-
-export function updateButtonState(): void {
-    for (const name of highlightButtons) {
-        const elem = document.querySelector(`#${name}`) as HTMLElement;
-        elem.classList.toggle("highlighted", document.queryCommandState(name));
-    }
-
-    // fixme: forecolor
-    //    'col': document.queryCommandValue("forecolor")
-}
-
-function clearButtonHighlight(): void {
-    for (const name of highlightButtons) {
-        const elem = document.querySelector(`#${name}`) as HTMLElement;
-        elem.classList.remove("highlighted");
-    }
-}
-
-export function preventButtonFocus(): void {
-    for (const element of document.querySelectorAll("button.linkb")) {
-        element.addEventListener("mousedown", (evt: Event) => {
-            evt.preventDefault();
-        });
-    }
-}
-
-export function enableButtons(): void {
-    const buttons = document.querySelectorAll(
-        "button.linkb"
-    ) as NodeListOf<HTMLButtonElement>;
-    buttons.forEach((elem: HTMLButtonElement): void => {
-        elem.disabled = false;
-    });
-    updateButtonState();
-}
-
-export function disableButtons(): void {
-    const buttons = document.querySelectorAll(
-        "button.linkb:not(.perm)"
-    ) as NodeListOf<HTMLButtonElement>;
-    buttons.forEach((elem: HTMLButtonElement): void => {
-        elem.disabled = true;
-    });
-    clearButtonHighlight();
-}
-
-export function setFGButton(col: string): void {
-    document.getElementById("forecolor")!.style.backgroundColor = col;
-}
-
-export function toggleEditorButton(buttonOrId: string | HTMLElement): void {
-    const button =
-        typeof buttonOrId === "string"
-            ? (document.getElementById(buttonOrId) as HTMLElement)
-            : buttonOrId;
-    button.classList.toggle("highlighted");
-}

From 5eb07d3fc780432bab4cf1fce3c7ca376ab64a97 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 15:56:54 +0200
Subject: [PATCH 23/97] WIP: Turn DropdownMenu into a _decorator_ usable with
 all other button types

---
 ts/editor-toolbar/ColorPicker.svelte        |  2 +-
 ts/editor-toolbar/DropdownIconButton.svelte | 25 +++++++++++++++++++++
 ts/editor-toolbar/DropdownItem.svelte       | 14 ++++++++++++
 ts/editor-toolbar/EditorToolbar.svelte      | 16 ++++++++++---
 ts/editor-toolbar/index.ts                  |  3 +++
 5 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 ts/editor-toolbar/DropdownIconButton.svelte
 create mode 100644 ts/editor-toolbar/DropdownItem.svelte

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 7e0358574..c53dbb24b 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -37,6 +37,6 @@
     }
 </style>
 
-<button tabindex="-1">
+<button tabindex="-1" on:mousedown|preventDefault> 
     <span class={className}> <input type="color" on:change={onChange} /> </span>
 </button>
diff --git a/ts/editor-toolbar/DropdownIconButton.svelte b/ts/editor-toolbar/DropdownIconButton.svelte
new file mode 100644
index 000000000..f03a8dce8
--- /dev/null
+++ b/ts/editor-toolbar/DropdownIconButton.svelte
@@ -0,0 +1,25 @@
+<script lang="typescript">
+    import { onMount } from "svelte";
+
+    export let buttonId = `dropdownMenuButton123`;
+
+    // ${Math.random().toString(36).substring(2)}`
+    let dropdownButtonRef: HTMLButtonElement;
+
+    onMount(() => {
+        /* Prevent focus on menu activation */
+        const noop = () => {};
+        Object.defineProperty(dropdownButtonRef, 'focus', { value: noop });
+
+        /* Set custom menu without using .dropdown
+         * Rendering the menu here would cause the menu to
+         * be displayed outside of the visible area
+         */
+        const dropdown = new bootstrap.Dropdown(dropdownButtonRef);
+        dropdown._menu = document.getElementById(buttonId);
+    })
+</script>
+
+<button bind:this={dropdownButtonRef} class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" on:mousedown|preventDefault>
+  Dropdown button
+</button>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
new file mode 100644
index 000000000..4ea91de2f
--- /dev/null
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -0,0 +1,14 @@
+<script lang="typescript">
+    export let onClick: (event: ClickEvent) => void;
+</script>
+
+<li>
+    <button class="dropdown-item" on:click={onClick} on:mousedown|preventDefault>
+        {#if $$slots.default}
+            <slot />
+        {:else}
+            <span class="float-start"><slot name="start" /></span>
+            <span class="float-end"><slot name="end" /></span>
+        {/if}
+    </button>
+</li>
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 4fef8b702..5336136b2 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import DropdownItem from "./DropdownItem.svelte";
     import type { Readable } from "svelte/store";
     import { setContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
@@ -15,7 +16,7 @@
 </script>
 
 <style lang="scss">
-    div {
+    nav {
         position: sticky;
         top: 0;
         left: 0;
@@ -37,6 +38,15 @@
     }
 </style>
 
-<div>
+<ul class="dropdown-menu" id="dropdownMenuButton123" aria-labelledby="dropdownMenuButton123">
+    <DropdownItem>
+        <svelte:fragment slot="start">Action</svelte:fragment>
+        <svelte:fragment slot="end">Shortcut</svelte:fragment>
+    </DropdownItem>
+    <DropdownItem>Action 1</DropdownItem>
+    <DropdownItem>Action 2</DropdownItem>
+</ul>
+
+<nav>
     <ButtonGroup {buttons} />
-</div>
+</nav>
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 71f65f0d3..dff93d5c0 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -6,6 +6,7 @@ import { setupI18n, ModuleName } from "anki/i18n";
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
 import LabelButton from "./LabelButton.svelte";
+import DropdownIconButton from "./DropdownIconButton.svelte";
 
 // @ts-ignore
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
@@ -45,6 +46,8 @@ const defaultButtons = [
     ],
     [forecolorButton, colorpickerButton],
     [attachmentButton, recordButton, clozeButton, mathjaxButton, htmlButton],
+    [ { component: DropdownIconButton }],
+
 ];
 
 class EditorToolbar extends HTMLElement {

From 391f64f64842aab15fd7b8a362861d35683d6d77 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 30 Mar 2021 18:57:50 +0200
Subject: [PATCH 24/97] Make it so you can include DropdownMenus on all kinds
 of buttons

---
 ts/editor-toolbar/ButtonGroup.svelte          |  8 +---
 ts/editor-toolbar/ColorPicker.svelte          | 21 +++++----
 ts/editor-toolbar/CommandIconButton.svelte    |  9 ++--
 ts/editor-toolbar/DropdownIconButton.svelte   | 25 ----------
 ts/editor-toolbar/DropdownMenu.svelte         | 40 ++++++++++++++++
 ts/editor-toolbar/EditorToolbar.svelte        |  4 +-
 ts/editor-toolbar/IconButton.svelte           |  9 ++--
 ts/editor-toolbar/LabelButton.svelte          | 47 +++++++++++++++++--
 ...InnerButton.svelte => SquareButton.svelte} | 47 +++++++++++++------
 ts/editor-toolbar/color.scss                  | 14 +++---
 ts/editor-toolbar/color.ts                    |  4 +-
 ts/editor-toolbar/index.ts                    | 26 +++++-----
 ts/editor-toolbar/types.ts                    | 12 +++++
 13 files changed, 178 insertions(+), 88 deletions(-)
 delete mode 100644 ts/editor-toolbar/DropdownIconButton.svelte
 create mode 100644 ts/editor-toolbar/DropdownMenu.svelte
 rename ts/editor-toolbar/{InnerButton.svelte => SquareButton.svelte} (75%)
 create mode 100644 ts/editor-toolbar/types.ts

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index e139adfcd..9a9d876c6 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,10 +1,6 @@
-<script lang="typescript" context="module">
-    export type Buttons =
-        | { component: SvelteComponent; [...arg: string]: unknown }
-        | Buttons[];
-</script>
-
 <script lang="typescript">
+    import type { Buttons } from "./types";
+
     export let buttons: Buttons;
 </script>
 
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index c53dbb24b..ac2a94d3e 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -1,15 +1,14 @@
 <script lang="typescript">
-    export let className: string;
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+
     export let onChange: (event: ChangeEvent) => void;
 </script>
 
 <style lang="scss">
     button {
         display: inline-block;
-        vertical-align: middle;
-        width: 28px;
-        height: 28px;
-
         padding: 0;
 
         &:hover {
@@ -24,19 +23,23 @@
 
     span {
         display: inline-block;
+        vertical-align: middle;
         width: 100%;
         height: 100%;
+
         cursor: pointer;
     }
 
     input {
+        display: inline-block;
         opacity: 0;
-        width: 100%;
-        height: 100%;
+        width: 28px;
+        height: calc(28px - 4px);
+
         cursor: pointer;
     }
 </style>
 
-<button tabindex="-1" on:mousedown|preventDefault> 
-    <span class={className}> <input type="color" on:change={onChange} /> </span>
+<button tabindex="-1" {id} class={className} {...props} on:mousedown|preventDefault>
+    <span> <input type="color" on:change={onChange} /> </span>
 </button>
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index b5efcaaa0..2d5232191 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -34,9 +34,12 @@
 </script>
 
 <script lang="typescript">
-    import InnerButton from "./InnerButton.svelte";
+    import SquareButton from "./SquareButton.svelte";
 
+    export let id = "";
     export let className = "";
+    export let props: Record<string, string> = {};
+
     export let icon = "";
     export let command: string;
     export let activatable = true;
@@ -57,6 +60,6 @@
     }
 </script>
 
-<InnerButton {className} {active} {onClick}>
+<SquareButton {id} {className} {props} {active} {onClick}>
     {@html icon}
-</InnerButton>
+</SquareButton>
diff --git a/ts/editor-toolbar/DropdownIconButton.svelte b/ts/editor-toolbar/DropdownIconButton.svelte
deleted file mode 100644
index f03a8dce8..000000000
--- a/ts/editor-toolbar/DropdownIconButton.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="typescript">
-    import { onMount } from "svelte";
-
-    export let buttonId = `dropdownMenuButton123`;
-
-    // ${Math.random().toString(36).substring(2)}`
-    let dropdownButtonRef: HTMLButtonElement;
-
-    onMount(() => {
-        /* Prevent focus on menu activation */
-        const noop = () => {};
-        Object.defineProperty(dropdownButtonRef, 'focus', { value: noop });
-
-        /* Set custom menu without using .dropdown
-         * Rendering the menu here would cause the menu to
-         * be displayed outside of the visible area
-         */
-        const dropdown = new bootstrap.Dropdown(dropdownButtonRef);
-        dropdown._menu = document.getElementById(buttonId);
-    })
-</script>
-
-<button bind:this={dropdownButtonRef} class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" on:mousedown|preventDefault>
-  Dropdown button
-</button>
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte
new file mode 100644
index 000000000..d800a240d
--- /dev/null
+++ b/ts/editor-toolbar/DropdownMenu.svelte
@@ -0,0 +1,40 @@
+<script lang="typescript">
+    import { onMount } from "svelte";
+
+    import type { ButtonDefinition } from "./types";
+
+    export let button: ButtonDefinition;
+    export let menuId: string;
+
+    function extend({ className, props, ...rest }: ButtonDefinition): ButtonDefinition {
+        return {
+            className: `${className} dropdown-toggle`,
+            props: {
+                "data-bs-toggle": "dropdown",
+                "aria-expanded": "false",
+                ...props,
+            },
+            ...rest,
+        };
+    }
+
+    function createDropdown({ detail }: CustomEvent): void {
+        const button: HTMLButtonElement = detail.button;
+
+        /* Prevent focus on menu activation */
+        const noop = () => {};
+        Object.defineProperty(button, "focus", { value: noop });
+
+        /* Set custom menu without using .dropdown
+         * Rendering the menu here would cause the menu to
+         * be displayed outside of the visible area
+         */
+        const dropdown = new bootstrap.Dropdown(button);
+        dropdown._menu = button.getRootNode().getElementById(menuId);
+    }
+</script>
+
+<svelte:component
+    this={button.component}
+    {...extend(button)}
+    on:mount={createDropdown} />
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 5336136b2..33b00b8b8 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -5,7 +5,7 @@
     import { disabledKey, nightModeKey } from "./contextKeys";
 
     import ButtonGroup from "./ButtonGroup.svelte";
-    import type { Buttons } from "./ButtonGroup.svelte";
+    import type { Buttons } from "./types";
 
     export let buttons: Buttons = [];
     export let nightMode: boolean;
@@ -25,7 +25,7 @@
         background: var(--bg-color);
         border-bottom: 1px solid var(--border);
 
-        /* Remove most outer marigns */
+        /* Remove outermost marigns */
         & > :global(ul) {
             & > :global(li:nth-child(1)) {
                 margin-left: 0;
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index 613a53433..fc5960f48 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -1,11 +1,14 @@
 <script lang="typescript">
-    import InnerButton from "./InnerButton.svelte";
+    import SquareButton from "./SquareButton.svelte";
 
+    export let id = "";
     export let className = "";
+    export let props: Record<string, string> = {};
+
     export let icon = "";
     export let onClick: (event: ClickEvent) => void;
 </script>
 
-<InnerButton {className} {onClick}>
+<SquareButton {id} {className} {props} {onClick}>
     {@html icon}
-</InnerButton>
+</SquareButton>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 9428dd568..4e366d18b 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -1,5 +1,27 @@
 <script lang="typescript">
+    import { onMount, createEventDispatcher, getContext } from "svelte";
+    import type { Readable } from "svelte/store";
+    import { disabledKey } from "./contextKeys";
+
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+
     export let label: string;
+    export let onClick: (event: ClickEvent) => void;
+
+    let buttonRef: HTMLButtonElement;
+
+    function extendClassName(className: string): string {
+        return `${className} btn btn-secondary`;
+    }
+
+    const dispatch = createEventDispatcher();
+
+    onMount(() => dispatch("mount", { button: buttonRef }));
+
+    const disabledStore = getContext(disabledKey);
+    $: disabled = $disabledStore;
 </script>
 
 <style lang="scss">
@@ -7,15 +29,34 @@
         display: inline-block;
         vertical-align: middle;
         width: auto;
-        height: 26px;
+        height: calc(28px + 2px);
 
         padding: 0 10px;
-        margin: 0 3px;
+
+        border-radius: 0;
+        border-color: var(--faint-border);
 
         &:focus {
             box-shadow: 0 0 12px 4px rgb(255 255 255 / 0.5);
         }
+
+        &[disabled] {
+            opacity: 0.4;
+            cursor: not-allowed;
+
+            border-color: var(--faint-border);
+        }
     }
 </style>
 
-<button class="btn btn-secondary" tabindex="-1" on:click> {label} </button>
+<button
+    bind:this={buttonRef}
+    {disabled}
+    {id}
+    class={extendClassName(className)}
+    {...props}
+    tabindex="-1"
+    on:click={onClick}
+    on:mousedown|preventDefault>
+    {label}
+</button>
diff --git a/ts/editor-toolbar/InnerButton.svelte b/ts/editor-toolbar/SquareButton.svelte
similarity index 75%
rename from ts/editor-toolbar/InnerButton.svelte
rename to ts/editor-toolbar/SquareButton.svelte
index 43030ce7e..041e4548c 100644
--- a/ts/editor-toolbar/InnerButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -3,31 +3,24 @@
     import type { Readable } from "svelte/store";
     import { disabledKey } from "./contextKeys";
 
-    export let className: string = "";
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+
     export let onClick: (event: ClickEvent) => void;
     export let active = false;
 
-    const disabledStore = getContext(disabledKey)
+    const disabledStore = getContext(disabledKey);
     $: disabled = $disabledStore;
 </script>
 
 <style lang="scss">
     button {
         display: inline-block;
-        vertical-align: middle;
-        width: 28px;
-        height: 28px;
+        padding: 0;
 
         background-color: white;
 
-        & > :global(svg),
-        & > :global(img) {
-            fill: currentColor;
-            vertical-align: unset;
-            width: 100%;
-            height: 100%;
-        }
-
         &:hover {
             background-color: #eee;
         }
@@ -57,14 +50,38 @@
             }
         }
     }
+
+    span {
+        display: inline-block;
+        vertical-align: middle;
+
+        /* constrain icon */
+        width: 28px;
+        height: 28px;
+
+        & > :global(svg),
+        & > :global(img) {
+            fill: currentColor;
+            vertical-align: unset;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    /* for DropdownMenu */
+    :global(.dropdown-toggle)::after {
+        margin-right: 0.25rem;
+    }
 </style>
 
 <button
-    class="p-1 {className}"
+    {id}
+    class={className}
+    {...props}
     class:active
     tabindex="-1"
     {disabled}
     on:click={onClick}
     on:mousedown|preventDefault>
-    <slot />
+    <span class="p-1"><slot /></span>
 </button>
diff --git a/ts/editor-toolbar/color.scss b/ts/editor-toolbar/color.scss
index f9d459eea..6e6077eb4 100644
--- a/ts/editor-toolbar/color.scss
+++ b/ts/editor-toolbar/color.scss
@@ -7,11 +7,11 @@
 }
 
 .rainbow {
-    background: linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
-        linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-        linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
-
-    background-clip: content-box;
-    /* Boostrap .rounded has .25rem */
-    border-radius: 0.375rem;
+    background: content-box
+            linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
+        content-box
+            linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+        content-box
+            linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
+        border-box white;
 }
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index c03ce380c..862cb7801 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -20,12 +20,12 @@ function wrapWithForecolor(color: string): void {
 export const forecolorButton = {
     component: IconButton,
     icon: squareFillIcon,
-    className: "forecolor p-1",
+    className: "forecolor",
     onClick: () => wrapWithForecolor(getForecolor()),
 };
 
 export const colorpickerButton = {
     component: ColorPicker,
-    className: "rainbow p-1",
+    className: "rainbow",
     onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
 };
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index dff93d5c0..bee5b626f 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -6,7 +6,7 @@ import { setupI18n, ModuleName } from "anki/i18n";
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
 import LabelButton from "./LabelButton.svelte";
-import DropdownIconButton from "./DropdownIconButton.svelte";
+import DropdownMenu from "./DropdownMenu.svelte";
 
 // @ts-ignore
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
@@ -46,8 +46,6 @@ const defaultButtons = [
     ],
     [forecolorButton, colorpickerButton],
     [attachmentButton, recordButton, clozeButton, mathjaxButton, htmlButton],
-    [ { component: DropdownIconButton }],
-
 ];
 
 class EditorToolbar extends HTMLElement {
@@ -57,16 +55,18 @@ class EditorToolbar extends HTMLElement {
     connectedCallback(): void {
         this.disabled = writable(false);
 
-        setupI18n({ modules: [ModuleName.STATISTICS, ModuleName.SCHEDULING] }).then(() => {
-            this.component = new EditorToolbarSvelte({
-                target: this,
-                props: {
-                    buttons: defaultButtons,
-                    nightMode: checkNightMode(),
-                    disabled: this.disabled,
-                },
-            });
-        })
+        setupI18n({ modules: [ModuleName.STATISTICS, ModuleName.SCHEDULING] }).then(
+            () => {
+                this.component = new EditorToolbarSvelte({
+                    target: this,
+                    props: {
+                        buttons: defaultButtons,
+                        nightMode: checkNightMode(),
+                        disabled: this.disabled,
+                    },
+                });
+            }
+        );
     }
 
     enableButtons(): void {
diff --git a/ts/editor-toolbar/types.ts b/ts/editor-toolbar/types.ts
new file mode 100644
index 000000000..0a47bda9c
--- /dev/null
+++ b/ts/editor-toolbar/types.ts
@@ -0,0 +1,12 @@
+import type { SvelteComponent } from "svelte/internal";
+
+export interface ButtonDefinition {
+    component: SvelteComponent;
+    id?: string;
+    className?: string;
+    props?: Record<string, string>;
+    button: HTMLButtonElement;
+    [arg: string]: unknown;
+}
+
+export type Buttons = ButtonDefinition | Buttons[];

From fa900e15657682b53a1cbe5e3193b401318b0869 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 31 Mar 2021 03:34:08 +0200
Subject: [PATCH 25/97] Add dropdown menu to mathjax button

---
 ts/editor-toolbar/CommandIconButton.svelte |  2 +-
 ts/editor-toolbar/DropdownItem.svelte      | 14 ------
 ts/editor-toolbar/DropdownMenu.svelte      | 56 ++++++++--------------
 ts/editor-toolbar/EditorToolbar.svelte     | 18 ++++---
 ts/editor-toolbar/IconButton.svelte        |  2 +-
 ts/editor-toolbar/LabelButton.svelte       |  3 +-
 ts/editor-toolbar/SquareButton.svelte      |  8 +++-
 ts/editor-toolbar/WithDropdownMenu.svelte  | 46 ++++++++++++++++++
 ts/editor-toolbar/extra.ts                 |  7 ++-
 ts/editor-toolbar/index.ts                 | 26 +++++++---
 ts/editor-toolbar/notetype.ts              | 15 ++++++
 11 files changed, 124 insertions(+), 73 deletions(-)
 delete mode 100644 ts/editor-toolbar/DropdownItem.svelte
 create mode 100644 ts/editor-toolbar/WithDropdownMenu.svelte
 create mode 100644 ts/editor-toolbar/notetype.ts

diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 2d5232191..aed9e863a 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -60,6 +60,6 @@
     }
 </script>
 
-<SquareButton {id} {className} {props} {active} {onClick}>
+<SquareButton {id} {className} {props} {active} {onClick} on:mount>
     {@html icon}
 </SquareButton>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
deleted file mode 100644
index 4ea91de2f..000000000
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="typescript">
-    export let onClick: (event: ClickEvent) => void;
-</script>
-
-<li>
-    <button class="dropdown-item" on:click={onClick} on:mousedown|preventDefault>
-        {#if $$slots.default}
-            <slot />
-        {:else}
-            <span class="float-start"><slot name="start" /></span>
-            <span class="float-end"><slot name="end" /></span>
-        {/if}
-    </button>
-</li>
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte
index d800a240d..6df513cd1 100644
--- a/ts/editor-toolbar/DropdownMenu.svelte
+++ b/ts/editor-toolbar/DropdownMenu.svelte
@@ -1,40 +1,26 @@
 <script lang="typescript">
-    import { onMount } from "svelte";
-
-    import type { ButtonDefinition } from "./types";
-
-    export let button: ButtonDefinition;
-    export let menuId: string;
-
-    function extend({ className, props, ...rest }: ButtonDefinition): ButtonDefinition {
-        return {
-            className: `${className} dropdown-toggle`,
-            props: {
-                "data-bs-toggle": "dropdown",
-                "aria-expanded": "false",
-                ...props,
-            },
-            ...rest,
-        };
+    interface DropdownItem {
+        label: string;
+        endLabel: string;
+        onClick: (event: ClickEvent) => void;
     }
 
-    function createDropdown({ detail }: CustomEvent): void {
-        const button: HTMLButtonElement = detail.button;
-
-        /* Prevent focus on menu activation */
-        const noop = () => {};
-        Object.defineProperty(button, "focus", { value: noop });
-
-        /* Set custom menu without using .dropdown
-         * Rendering the menu here would cause the menu to
-         * be displayed outside of the visible area
-         */
-        const dropdown = new bootstrap.Dropdown(button);
-        dropdown._menu = button.getRootNode().getElementById(menuId);
-    }
+    export let id: string;
+    export let menuItems: DropdownItem[];
 </script>
 
-<svelte:component
-    this={button.component}
-    {...extend(button)}
-    on:mount={createDropdown} />
+<ul class="dropdown-menu" {id}>
+    {#each menuItems as menuItem}
+        <li>
+            <button
+                class="dropdown-item"
+                on:click={menuItem.onClick}
+                on:mousedown|preventDefault>
+                <span class="float-start">{menuItem.label}</span>
+                {#if menuItem.endLabel}
+                    <span class="float-end">{menuItem.endLabel}</span>
+                {/if}
+            </button>
+        </li>
+    {/each}
+</ul>
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 33b00b8b8..35330b03a 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,5 +1,4 @@
 <script lang="typescript">
-    import DropdownItem from "./DropdownItem.svelte";
     import type { Readable } from "svelte/store";
     import { setContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
@@ -8,11 +7,13 @@
     import type { Buttons } from "./types";
 
     export let buttons: Buttons = [];
+    export let menus: SvelteComponent[];
+
     export let nightMode: boolean;
     export let disabled: Readable<boolean> = false;
 
-    setContext(disabledKey, disabled);
     setContext(nightModeKey, nightMode);
+    setContext(disabledKey, disabled);
 </script>
 
 <style lang="scss">
@@ -38,14 +39,11 @@
     }
 </style>
 
-<ul class="dropdown-menu" id="dropdownMenuButton123" aria-labelledby="dropdownMenuButton123">
-    <DropdownItem>
-        <svelte:fragment slot="start">Action</svelte:fragment>
-        <svelte:fragment slot="end">Shortcut</svelte:fragment>
-    </DropdownItem>
-    <DropdownItem>Action 1</DropdownItem>
-    <DropdownItem>Action 2</DropdownItem>
-</ul>
+<div>
+    {#each menus as menu}
+        <svelte:component this={menu.component} {...menu} />
+    {/each}
+</div>
 
 <nav>
     <ButtonGroup {buttons} />
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index fc5960f48..2af116bb7 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -9,6 +9,6 @@
     export let onClick: (event: ClickEvent) => void;
 </script>
 
-<SquareButton {id} {className} {props} {onClick}>
+<SquareButton {id} {className} {props} {onClick} on:mount>
     {@html icon}
 </SquareButton>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 4e366d18b..890e7d455 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -9,6 +9,7 @@
 
     export let label: string;
     export let onClick: (event: ClickEvent) => void;
+    export let disables = true;
 
     let buttonRef: HTMLButtonElement;
 
@@ -21,7 +22,7 @@
     onMount(() => dispatch("mount", { button: buttonRef }));
 
     const disabledStore = getContext(disabledKey);
-    $: disabled = $disabledStore;
+    $: disabled = disables && $disabledStore;
 </script>
 
 <style lang="scss">
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 041e4548c..d885a1012 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { getContext } from "svelte";
+    import { getContext, onMount, createEventDispatcher } from "svelte";
     import type { Readable } from "svelte/store";
     import { disabledKey } from "./contextKeys";
 
@@ -10,8 +10,13 @@
     export let onClick: (event: ClickEvent) => void;
     export let active = false;
 
+    let buttonRef: HTMLButtonElement;
+
     const disabledStore = getContext(disabledKey);
     $: disabled = $disabledStore;
+
+    const dispatch = createEventDispatcher();
+    onMount(() => dispatch("mount", { button: buttonRef }));
 </script>
 
 <style lang="scss">
@@ -75,6 +80,7 @@
 </style>
 
 <button
+    bind:this={buttonRef}
     {id}
     class={className}
     {...props}
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/editor-toolbar/WithDropdownMenu.svelte
new file mode 100644
index 000000000..582afd125
--- /dev/null
+++ b/ts/editor-toolbar/WithDropdownMenu.svelte
@@ -0,0 +1,46 @@
+<script lang="typescript">
+    import { onMount } from "svelte";
+
+    import type { ButtonDefinition } from "./types";
+
+    export let button: ButtonDefinition;
+    export let menuId: string;
+
+    function extend({ className, props, ...rest }: ButtonDefinition): ButtonDefinition {
+        return {
+            className: `${className} dropdown-toggle`,
+            props: {
+                "data-bs-toggle": "dropdown",
+                "aria-expanded": "false",
+                ...props,
+            },
+            ...rest,
+        };
+    }
+
+    function createDropdown({ detail }: CustomEvent): void {
+        const button: HTMLButtonElement = detail.button;
+
+        /* Prevent focus on menu activation */
+        const noop = () => {};
+        Object.defineProperty(button, "focus", { value: noop });
+
+        /* Set custom menu without using .dropdown
+         * Rendering the menu here would cause the menu to
+         * be displayed outside of the visible area
+         */
+        const dropdown = new bootstrap.Dropdown(button);
+        const menu = button.getRootNode().getElementById(menuId);
+
+        if (!menu) {
+            console.log(`Could not find menu "${menuId}" for dropdown menu.`);
+        }
+
+        dropdown._menu = menu;
+    }
+</script>
+
+<svelte:component
+    this={button.component}
+    {...extend(button)}
+    on:mount={createDropdown} />
diff --git a/ts/editor-toolbar/extra.ts b/ts/editor-toolbar/extra.ts
index e94f20410..a41476268 100644
--- a/ts/editor-toolbar/extra.ts
+++ b/ts/editor-toolbar/extra.ts
@@ -20,8 +20,8 @@ function onCloze(): void {
     bridgeCommand("cloze");
 }
 
-function onMore(): void {
-    bridgeCommand("more");
+function onHtmlEdit(): void {
+    bridgeCommand("htmlEdit");
 }
 
 export const attachmentButton = {
@@ -41,11 +41,10 @@ export const clozeButton = {
 export const mathjaxButton = {
     component: IconButton,
     icon: functionIcon,
-    onClick: onMore,
 };
 
 export const htmlButton = {
     component: IconButton,
     icon: xmlIcon,
-    onClick: onMore,
+    onClick: onHtmlEdit,
 };
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index bee5b626f..22641d862 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -5,13 +5,15 @@ import { setupI18n, ModuleName } from "anki/i18n";
 
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
-import LabelButton from "./LabelButton.svelte";
 import DropdownMenu from "./DropdownMenu.svelte";
+import WithDropdownMenu from "./WithDropdownMenu.svelte";
 
 // @ts-ignore
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
 import { Writable, writable } from "svelte/store";
 
+import { fieldsButton, cardsButton } from "./notetype";
+
 import {
     boldButton,
     italicButton,
@@ -31,11 +33,16 @@ import {
     htmlButton,
 } from "./extra";
 
+const defaultMenus = [
+    {
+        component: DropdownMenu,
+        id: "mathjaxMenu",
+        menuItems: [{ label: "Foo", onClick: () => console.log("foo") }],
+    },
+];
+
 const defaultButtons = [
-    [
-        { component: LabelButton, label: "Fields..." },
-        { component: LabelButton, label: "Cards..." },
-    ],
+    [fieldsButton, cardsButton],
     [
         boldButton,
         italicButton,
@@ -45,7 +52,13 @@ const defaultButtons = [
         eraserButton,
     ],
     [forecolorButton, colorpickerButton],
-    [attachmentButton, recordButton, clozeButton, mathjaxButton, htmlButton],
+    [
+        attachmentButton,
+        recordButton,
+        clozeButton,
+        { component: WithDropdownMenu, menuId: "mathjaxMenu", button: mathjaxButton },
+        htmlButton,
+    ],
 ];
 
 class EditorToolbar extends HTMLElement {
@@ -60,6 +73,7 @@ class EditorToolbar extends HTMLElement {
                 this.component = new EditorToolbarSvelte({
                     target: this,
                     props: {
+                        menus: defaultMenus,
                         buttons: defaultButtons,
                         nightMode: checkNightMode(),
                         disabled: this.disabled,
diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts
new file mode 100644
index 000000000..4298cb016
--- /dev/null
+++ b/ts/editor-toolbar/notetype.ts
@@ -0,0 +1,15 @@
+import { bridgeCommand } from "anki/bridgecommand";
+import LabelButton from "./LabelButton.svelte";
+
+export const fieldsButton = {
+    component: LabelButton,
+    label: "Fields...",
+    onClick: () => bridgeCommand("fields"),
+    disables: false,
+};
+export const cardsButton = {
+    component: LabelButton,
+    label: "Cards...",
+    onClick: () => bridgeCommand("cards"),
+    disables: false,
+};

From f526b51ea2afa61e4adce6342b297a5eed426aa2 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 31 Mar 2021 15:40:11 +0200
Subject: [PATCH 26/97] Add SelectButton

---
 ts/editor-toolbar/ButtonGroup.svelte  |  9 +++--
 ts/editor-toolbar/LabelButton.svelte  |  2 --
 ts/editor-toolbar/SelectButton.svelte | 52 +++++++++++++++++++++++++++
 ts/editor-toolbar/SelectOption.svelte |  7 ++++
 ts/editor-toolbar/index.ts            |  2 ++
 5 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 ts/editor-toolbar/SelectButton.svelte
 create mode 100644 ts/editor-toolbar/SelectOption.svelte

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 9a9d876c6..fbb6e3459 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -14,7 +14,8 @@
         padding-inline-start: 0;
         margin-bottom: 0;
 
-        & :global(button) {
+        & :global(button),
+        & :global(select) {
             margin-left: -1px;
         }
     }
@@ -26,7 +27,8 @@
         &:nth-child(1) {
             margin-left: 0.25rem;
 
-            & > :global(button) {
+            & > :global(button),
+            & > :global(select) {
                 border-top-left-radius: 0.25rem;
                 border-bottom-left-radius: 0.25rem;
             }
@@ -35,7 +37,8 @@
         &:nth-last-child(1) {
             margin-right: 0.25rem;
 
-            & > :global(button) {
+            & > :global(button),
+            & > :global(select) {
                 border-top-right-radius: 0.25rem;
                 border-bottom-right-radius: 0.25rem;
             }
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 890e7d455..27c46e3ec 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -1,6 +1,5 @@
 <script lang="typescript">
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import type { Readable } from "svelte/store";
     import { disabledKey } from "./contextKeys";
 
     export let id = "";
@@ -18,7 +17,6 @@
     }
 
     const dispatch = createEventDispatcher();
-
     onMount(() => dispatch("mount", { button: buttonRef }));
 
     const disabledStore = getContext(disabledKey);
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
new file mode 100644
index 000000000..9135a6086
--- /dev/null
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -0,0 +1,52 @@
+<script lang="typescript">
+    import { onMount, createEventDispatcher, getContext } from "svelte";
+    import type { Readable } from "svelte/store";
+    import { disabledKey } from "./contextKeys";
+    import SelectOption from "./SelectOption.svelte";
+
+    interface Option {
+        label: string;
+        value: string;
+        selected: boolean;
+    }
+
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+
+    function extendClassName(classes: string) {
+        return `form-select ${classes}`;
+    }
+
+    export let disables;
+    export let options: Option[];
+
+    let buttonRef: HTMLSelectElement;
+
+    const dispatch = createEventDispatcher();
+    onMount(() => dispatch("mount", { button: buttonRef }));
+
+    const disabledStore = getContext(disabledKey);
+    $: disabled = disables && $disabledStore;
+</script>
+
+<style lang="scss">
+    select {
+        height: 30px;
+        width: auto;
+
+        font-size: smaller;
+        border-radius: 0;
+    }
+</style>
+
+<select
+    bind:this={buttonRef}
+    {disabled}
+    {id}
+    class={extendClassName(className)}
+    {...props}>
+    {#each options as option}
+        <SelectOption {...option} />
+    {/each}
+</select>
diff --git a/ts/editor-toolbar/SelectOption.svelte b/ts/editor-toolbar/SelectOption.svelte
new file mode 100644
index 000000000..6e357d188
--- /dev/null
+++ b/ts/editor-toolbar/SelectOption.svelte
@@ -0,0 +1,7 @@
+<script lang="typescript">
+    export let label: string;
+    export let value: string;
+    export let selected = false;
+</script>
+
+<option {selected} {value}>{label}</option>
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 22641d862..10213412d 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -7,6 +7,7 @@ import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
 import DropdownMenu from "./DropdownMenu.svelte";
 import WithDropdownMenu from "./WithDropdownMenu.svelte";
+import SelectButton from "./SelectButton.svelte";
 
 // @ts-ignore
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
@@ -58,6 +59,7 @@ const defaultButtons = [
         clozeButton,
         { component: WithDropdownMenu, menuId: "mathjaxMenu", button: mathjaxButton },
         htmlButton,
+        { component: SelectButton, options: [{ label: "Test" }, { label: "Test2" }] },
     ],
 ];
 

From fb668c56e6b20a8debfdfe9c80c1455dd7cd9da9 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 31 Mar 2021 16:24:28 +0200
Subject: [PATCH 27/97] Make Toolbar resizable through a single CSS variable
 --toolbar-size

---
 ts/editor-toolbar/ButtonGroup.svelte   | 15 +++++++-------
 ts/editor-toolbar/ColorPicker.svelte   |  7 ++++---
 ts/editor-toolbar/EditorToolbar.svelte | 22 +++++++++++++--------
 ts/editor-toolbar/LabelButton.svelte   | 12 +++++++-----
 ts/editor-toolbar/SelectButton.svelte  | 11 +++++++++--
 ts/editor-toolbar/SquareButton.svelte  |  7 ++++---
 ts/editor-toolbar/_buttons.scss        | 27 --------------------------
 7 files changed, 46 insertions(+), 55 deletions(-)
 delete mode 100644 ts/editor-toolbar/_buttons.scss

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index fbb6e3459..0ae2725b9 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -22,25 +22,26 @@
 
     li {
         display: inline-block;
-        margin-bottom: 2px;
+        margin-bottom: calc(var(--toolbar-size) / 15);
 
         &:nth-child(1) {
-            margin-left: 0.25rem;
+            margin-left: calc(var(--toolbar-size) / 7.5);
 
             & > :global(button),
             & > :global(select) {
-                border-top-left-radius: 0.25rem;
-                border-bottom-left-radius: 0.25rem;
+                /* default 0.25rem */
+                border-top-left-radius: calc(var(--toolbar-size) / 7.5);
+                border-bottom-left-radius: calc(var(--toolbar-size) / 7.5);
             }
         }
 
         &:nth-last-child(1) {
-            margin-right: 0.25rem;
+            margin-right: calc(var(--toolbar-size) / 7.5);
 
             & > :global(button),
             & > :global(select) {
-                border-top-right-radius: 0.25rem;
-                border-bottom-right-radius: 0.25rem;
+                border-top-right-radius: calc(var(--toolbar-size) / 7.5);
+                border-bottom-right-radius: calc(var(--toolbar-size) / 7.5);
             }
         }
     }
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index ac2a94d3e..629f2918a 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -16,7 +16,8 @@
         }
 
         &:active {
-            box-shadow: inset 0 0 12px 4px rgb(0 0 0 / 30%);
+            box-shadow: inset 0 0 calc(var(--toolbar-size) / 2.5)
+                calc(var(--toolbar-size) / 7.5) rgb(0 0 0 / 30%);
             border-color: #aaa;
         }
     }
@@ -33,8 +34,8 @@
     input {
         display: inline-block;
         opacity: 0;
-        width: 28px;
-        height: calc(28px - 4px);
+        width: calc(var(--toolbar-size) - 6px);
+        height: calc(var(--toolbar-size) - 6px);
 
         cursor: pointer;
     }
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 35330b03a..aeea8892c 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -17,6 +17,10 @@
 </script>
 
 <style lang="scss">
+    .base {
+        --toolbar-size: 30px;
+    }
+
     nav {
         position: sticky;
         top: 0;
@@ -39,12 +43,14 @@
     }
 </style>
 
-<div>
-    {#each menus as menu}
-        <svelte:component this={menu.component} {...menu} />
-    {/each}
-</div>
+<div class="base">
+    <div>
+        {#each menus as menu}
+            <svelte:component this={menu.component} {...menu} />
+        {/each}
+    </div>
 
-<nav>
-    <ButtonGroup {buttons} />
-</nav>
+    <nav>
+        <ButtonGroup {buttons} />
+    </nav>
+</div>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 27c46e3ec..6f801a8fc 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -13,7 +13,7 @@
     let buttonRef: HTMLButtonElement;
 
     function extendClassName(className: string): string {
-        return `${className} btn btn-secondary`;
+        return `btn btn-secondary ${className}`;
     }
 
     const dispatch = createEventDispatcher();
@@ -28,15 +28,17 @@
         display: inline-block;
         vertical-align: middle;
         width: auto;
-        height: calc(28px + 2px);
+        height: var(--toolbar-size);
 
-        padding: 0 10px;
+        font-size: calc(var(--toolbar-size) / 2.3);
+        padding: 0 calc(var(--toolbar-size) / 3);
 
         border-radius: 0;
         border-color: var(--faint-border);
 
         &:focus {
-            box-shadow: 0 0 12px 4px rgb(255 255 255 / 0.5);
+            box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
+                calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
         }
 
         &[disabled] {
@@ -49,12 +51,12 @@
 </style>
 
 <button
+    tabindex="-1"
     bind:this={buttonRef}
     {disabled}
     {id}
     class={extendClassName(className)}
     {...props}
-    tabindex="-1"
     on:click={onClick}
     on:mousedown|preventDefault>
     {label}
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index 9135a6086..52b59eaab 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -32,15 +32,22 @@
 
 <style lang="scss">
     select {
-        height: 30px;
+        height: var(--toolbar-size);
         width: auto;
 
-        font-size: smaller;
+        font-size: calc(var(--toolbar-size) / 2.3);
+        user-select: none;
+        box-shadow: none;
         border-radius: 0;
+
+        &:focus {
+            outline: none;
+        }
     }
 </style>
 
 <select
+    tabindex="-1"
     bind:this={buttonRef}
     {disabled}
     {id}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index d885a1012..984e5310d 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -32,7 +32,8 @@
 
         &:active,
         &.active {
-            box-shadow: inset 0 0 12px 4px rgb(0 0 0 / 30%);
+            box-shadow: inset 0 0 calc(var(--toolbar-size) / 2.5)
+                calc(var(--toolbar-size) / 7.5) rgb(0 0 0 / 30%);
             border-color: #aaa;
         }
 
@@ -61,8 +62,8 @@
         vertical-align: middle;
 
         /* constrain icon */
-        width: 28px;
-        height: 28px;
+        width: calc(var(--toolbar-size) - 2px);
+        height: calc(var(--toolbar-size) - 2px);
 
         & > :global(svg),
         & > :global(img) {
diff --git a/ts/editor-toolbar/_buttons.scss b/ts/editor-toolbar/_buttons.scss
deleted file mode 100644
index 42250394a..000000000
--- a/ts/editor-toolbar/_buttons.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-button.linkb {
-    -webkit-appearance: none;
-    margin-bottom: -3px;
-    border: 0;
-    box-shadow: none;
-    padding: 0px 2px;
-    background: transparent;
-
-    &:disabled {
-        opacity: 0.3;
-        cursor: not-allowed;
-    }
-}
-
-button:focus {
-    outline: none;
-}
-
-button.highlighted {
-    #topbutsleft & {
-        background-color: lightgrey;
-
-        .nightMode & {
-            background: linear-gradient(0deg, #333333 0%, #434343 100%);
-        }
-    }
-}

From 5f498e614240bbe1297b5b27aa9f7078048b1884 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 31 Mar 2021 19:19:24 +0200
Subject: [PATCH 28/97] Make select display inline-block

---
 ts/editor-toolbar/SelectButton.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index 52b59eaab..861131910 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -32,6 +32,9 @@
 
 <style lang="scss">
     select {
+        display: inline-block;
+        vertical-align: middle;
+
         height: var(--toolbar-size);
         width: auto;
 

From 9b68a5c2c3b29e4c6f3a89515f0a3bd599adc34f Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 31 Mar 2021 21:09:08 +0200
Subject: [PATCH 29/97] Give select an effect on :hover

---
 ts/editor-toolbar/SelectButton.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index 861131910..fa8ab8657 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -43,6 +43,10 @@
         box-shadow: none;
         border-radius: 0;
 
+        &:hover {
+            background-color: #eee;
+        }
+
         &:focus {
             outline: none;
         }

From 3ddbc1e6c3d804f0476de224a05d2f0041eaf462 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 31 Mar 2021 22:05:24 +0200
Subject: [PATCH 30/97] Add first lazily loaded i18n strings

---
 ts/editor-toolbar/LabelButton.svelte |  4 +++-
 ts/editor-toolbar/index.ts           | 29 ++++++++++++++--------------
 ts/editor-toolbar/notetype.ts        | 15 ++++++++++++--
 ts/lib/lazy.ts                       | 25 ++++++++++++++++++++++++
 4 files changed, 56 insertions(+), 17 deletions(-)
 create mode 100644 ts/lib/lazy.ts

diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 6f801a8fc..8bc6cab64 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -7,6 +7,7 @@
     export let props: Record<string, string> = {};
 
     export let label: string;
+    export let title: string;
     export let onClick: (event: ClickEvent) => void;
     export let disables = true;
 
@@ -58,6 +59,7 @@
     class={extendClassName(className)}
     {...props}
     on:click={onClick}
-    on:mousedown|preventDefault>
+    on:mousedown|preventDefault
+    {title}>
     {label}
 </button>
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 10213412d..dca3b97b5 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -1,7 +1,8 @@
 import type { SvelteComponent } from "svelte";
 
 import { checkNightMode } from "anki/nightmode";
-import { setupI18n, ModuleName } from "anki/i18n";
+import { setupI18n, ModuleName, i18n } from "anki/i18n";
+import * as tr from "anki/i18n";
 
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
@@ -70,19 +71,19 @@ class EditorToolbar extends HTMLElement {
     connectedCallback(): void {
         this.disabled = writable(false);
 
-        setupI18n({ modules: [ModuleName.STATISTICS, ModuleName.SCHEDULING] }).then(
-            () => {
-                this.component = new EditorToolbarSvelte({
-                    target: this,
-                    props: {
-                        menus: defaultMenus,
-                        buttons: defaultButtons,
-                        nightMode: checkNightMode(),
-                        disabled: this.disabled,
-                    },
-                });
-            }
-        );
+        setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
+            console.log(i18n, tr);
+
+            this.component = new EditorToolbarSvelte({
+                target: this,
+                props: {
+                    menus: defaultMenus,
+                    buttons: defaultButtons,
+                    nightMode: checkNightMode(),
+                    disabled: this.disabled,
+                },
+            });
+        });
     }
 
     enableButtons(): void {
diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts
index 4298cb016..815b00568 100644
--- a/ts/editor-toolbar/notetype.ts
+++ b/ts/editor-toolbar/notetype.ts
@@ -1,15 +1,26 @@
 import { bridgeCommand } from "anki/bridgecommand";
+import { lazyLoaded } from "anki/lazy";
+import * as tr from "anki/i18n";
 import LabelButton from "./LabelButton.svelte";
 
 export const fieldsButton = {
     component: LabelButton,
-    label: "Fields...",
     onClick: () => bridgeCommand("fields"),
     disables: false,
 };
+
+lazyLoaded(fieldsButton, {
+    label: () => `${tr.editingFields()}...`,
+    title: tr.editingCustomizeFields,
+});
+
 export const cardsButton = {
     component: LabelButton,
-    label: "Cards...",
     onClick: () => bridgeCommand("cards"),
     disables: false,
 };
+
+lazyLoaded(cardsButton, {
+    label: () => `${tr.editingCards()}...`,
+    title: tr.editingCustomizeCardTemplatesCtrlandl,
+});
diff --git a/ts/lib/lazy.ts b/ts/lib/lazy.ts
new file mode 100644
index 000000000..9dd4b6760
--- /dev/null
+++ b/ts/lib/lazy.ts
@@ -0,0 +1,25 @@
+export function lazyLoaded(
+    object: Record<string, unknown>,
+    properties: Record<string, () => unknown>
+): void {
+    const propertyDescriptorMap = Object.entries(properties)
+        .map(([name, getter]: [string, () => unknown]): [
+            string,
+            PropertyDescriptor
+        ] => [
+            name,
+            {
+                get: getter,
+                enumerable: true,
+            },
+        ])
+        .reduce(
+            (
+                accumulator: PropertyDescriptorMap,
+                [name, property]
+            ): PropertyDescriptorMap => ((accumulator[name] = property), accumulator),
+            {}
+        );
+
+    Object.defineProperties(object, propertyDescriptorMap);
+}

From 4e6d5d9adb10694b77538637258e17288835557c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Apr 2021 00:45:02 +0200
Subject: [PATCH 31/97] Move logic from index.ts to their individual files

---
 ts/editor-toolbar/color.ts                  |  6 ++-
 ts/editor-toolbar/format.ts                 | 21 +++++---
 ts/editor-toolbar/index.ts                  | 57 +++------------------
 ts/editor-toolbar/notetype.ts               | 12 +++--
 ts/editor-toolbar/{extra.ts => template.ts} | 27 ++++++++--
 ts/lib/lazy.ts                              |  2 +-
 6 files changed, 55 insertions(+), 70 deletions(-)
 rename ts/editor-toolbar/{extra.ts => template.ts} (60%)

diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index 862cb7801..e579c4dfd 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -17,15 +17,17 @@ function wrapWithForecolor(color: string): void {
     document.execCommand("forecolor", false, color);
 }
 
-export const forecolorButton = {
+const forecolorButton = {
     component: IconButton,
     icon: squareFillIcon,
     className: "forecolor",
     onClick: () => wrapWithForecolor(getForecolor()),
 };
 
-export const colorpickerButton = {
+const colorpickerButton = {
     component: ColorPicker,
     className: "rainbow",
     onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
 };
+
+export const colorButtons = [forecolorButton, colorpickerButton];
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index e2b19c5e6..cc1dc1bcb 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -7,39 +7,48 @@ import superscriptIcon from "./format-superscript.svg";
 import subscriptIcon from "./format-subscript.svg";
 import eraserIcon from "./eraser.svg";
 
-export const boldButton = {
+const boldButton = {
     component: CommandIconButton,
     icon: boldIcon,
     command: "bold",
 };
 
-export const italicButton = {
+const italicButton = {
     component: CommandIconButton,
     icon: italicIcon,
     command: "italic",
 };
 
-export const underlineButton = {
+const underlineButton = {
     component: CommandIconButton,
     icon: underlineIcon,
     command: "underline",
 };
 
-export const superscriptButton = {
+const superscriptButton = {
     component: CommandIconButton,
     icon: superscriptIcon,
     command: "superscript",
 };
 
-export const subscriptButton = {
+const subscriptButton = {
     component: CommandIconButton,
     icon: subscriptIcon,
     command: "subscript",
 };
 
-export const eraserButton = {
+const eraserButton = {
     component: CommandIconButton,
     icon: eraserIcon,
     command: "removeFormat",
     highlightable: false,
 };
+
+export const formatButtons = [
+    boldButton,
+    italicButton,
+    underlineButton,
+    superscriptButton,
+    subscriptButton,
+    eraserButton,
+];
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index dca3b97b5..22e02daee 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -6,63 +6,18 @@ import * as tr from "anki/i18n";
 
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
-import DropdownMenu from "./DropdownMenu.svelte";
-import WithDropdownMenu from "./WithDropdownMenu.svelte";
-import SelectButton from "./SelectButton.svelte";
-
 // @ts-ignore
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
 import { Writable, writable } from "svelte/store";
 
-import { fieldsButton, cardsButton } from "./notetype";
+import { notetypeButtons } from "./notetype";
+import { formatButtons } from "./format";
+import { colorButtons } from "./color";
+import { templateButtons, templateMenus } from "./template";
 
-import {
-    boldButton,
-    italicButton,
-    underlineButton,
-    superscriptButton,
-    subscriptButton,
-    eraserButton,
-} from "./format";
+const defaultMenus = [...templateMenus];
 
-import { forecolorButton, colorpickerButton } from "./color";
-
-import {
-    attachmentButton,
-    recordButton,
-    clozeButton,
-    mathjaxButton,
-    htmlButton,
-} from "./extra";
-
-const defaultMenus = [
-    {
-        component: DropdownMenu,
-        id: "mathjaxMenu",
-        menuItems: [{ label: "Foo", onClick: () => console.log("foo") }],
-    },
-];
-
-const defaultButtons = [
-    [fieldsButton, cardsButton],
-    [
-        boldButton,
-        italicButton,
-        underlineButton,
-        superscriptButton,
-        subscriptButton,
-        eraserButton,
-    ],
-    [forecolorButton, colorpickerButton],
-    [
-        attachmentButton,
-        recordButton,
-        clozeButton,
-        { component: WithDropdownMenu, menuId: "mathjaxMenu", button: mathjaxButton },
-        htmlButton,
-        { component: SelectButton, options: [{ label: "Test" }, { label: "Test2" }] },
-    ],
-];
+const defaultButtons = [notetypeButtons, formatButtons, colorButtons, templateButtons];
 
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;
diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts
index 815b00568..76d1af001 100644
--- a/ts/editor-toolbar/notetype.ts
+++ b/ts/editor-toolbar/notetype.ts
@@ -1,26 +1,28 @@
 import { bridgeCommand } from "anki/bridgecommand";
-import { lazyLoaded } from "anki/lazy";
+import { lazyProperties } from "anki/lazy";
 import * as tr from "anki/i18n";
 import LabelButton from "./LabelButton.svelte";
 
-export const fieldsButton = {
+const fieldsButton = {
     component: LabelButton,
     onClick: () => bridgeCommand("fields"),
     disables: false,
 };
 
-lazyLoaded(fieldsButton, {
+lazyProperties(fieldsButton, {
     label: () => `${tr.editingFields()}...`,
     title: tr.editingCustomizeFields,
 });
 
-export const cardsButton = {
+const cardsButton = {
     component: LabelButton,
     onClick: () => bridgeCommand("cards"),
     disables: false,
 };
 
-lazyLoaded(cardsButton, {
+lazyProperties(cardsButton, {
     label: () => `${tr.editingCards()}...`,
     title: tr.editingCustomizeCardTemplatesCtrlandl,
 });
+
+export const notetypeButtons = [fieldsButton, cardsButton];
diff --git a/ts/editor-toolbar/extra.ts b/ts/editor-toolbar/template.ts
similarity index 60%
rename from ts/editor-toolbar/extra.ts
rename to ts/editor-toolbar/template.ts
index a41476268..f56216bc1 100644
--- a/ts/editor-toolbar/extra.ts
+++ b/ts/editor-toolbar/template.ts
@@ -1,6 +1,7 @@
 import { bridgeCommand } from "anki/bridgecommand";
 
 import IconButton from "./IconButton.svelte";
+import DropdownMenu from "./DropdownMenu.svelte";
 
 import paperclipIcon from "./paperclip.svg";
 import micIcon from "./mic.svg";
@@ -24,27 +25,43 @@ function onHtmlEdit(): void {
     bridgeCommand("htmlEdit");
 }
 
-export const attachmentButton = {
+const attachmentButton = {
     component: IconButton,
     icon: paperclipIcon,
     onClick: onAttachment,
 };
 
-export const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
+const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
 
-export const clozeButton = {
+const clozeButton = {
     component: IconButton,
     icon: bracketsIcon,
     onClick: onCloze,
 };
 
-export const mathjaxButton = {
+const mathjaxButton = {
     component: IconButton,
     icon: functionIcon,
 };
 
-export const htmlButton = {
+const mathjaxMenu = {
+    component: DropdownMenu,
+    id: "mathjaxMenu",
+    menuItems: [{ label: "Foo", onClick: () => console.log("foo") }],
+};
+
+const htmlButton = {
     component: IconButton,
     icon: xmlIcon,
     onClick: onHtmlEdit,
 };
+
+export const templateButtons = [
+    attachmentButton,
+    recordButton,
+    clozeButton,
+    mathjaxButton,
+    htmlButton,
+];
+
+export const templateMenus = [mathjaxMenu];
diff --git a/ts/lib/lazy.ts b/ts/lib/lazy.ts
index 9dd4b6760..90d0439c5 100644
--- a/ts/lib/lazy.ts
+++ b/ts/lib/lazy.ts
@@ -1,4 +1,4 @@
-export function lazyLoaded(
+export function lazyProperties(
     object: Record<string, unknown>,
     properties: Record<string, () => unknown>
 ): void {

From 216b93c06031cd82599aa79e932975b1e1cae8aa Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Apr 2021 01:22:06 +0200
Subject: [PATCH 32/97] Add titles to buttons with lazyProperties

---
 ts/editor-toolbar/ColorPicker.svelte       |  9 ++++-
 ts/editor-toolbar/CommandIconButton.svelte |  3 +-
 ts/editor-toolbar/DropdownItem.svelte      | 22 ++++++++++++
 ts/editor-toolbar/DropdownMenu.svelte      | 18 ++--------
 ts/editor-toolbar/IconButton.svelte        |  3 +-
 ts/editor-toolbar/SelectButton.svelte      |  4 ++-
 ts/editor-toolbar/SquareButton.svelte      |  2 ++
 ts/editor-toolbar/color.ts                 | 12 +++++++
 ts/editor-toolbar/format.ts                | 35 ++++++++++++++++---
 ts/editor-toolbar/index.ts                 |  5 +--
 ts/editor-toolbar/template.ts              | 40 +++++++++++++++++++---
 ts/editor-toolbar/types.ts                 |  7 ++--
 12 files changed, 126 insertions(+), 34 deletions(-)
 create mode 100644 ts/editor-toolbar/DropdownItem.svelte

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 629f2918a..b9450d617 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -2,6 +2,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
+    export let title: string;
 
     export let onChange: (event: ChangeEvent) => void;
 </script>
@@ -41,6 +42,12 @@
     }
 </style>
 
-<button tabindex="-1" {id} class={className} {...props} on:mousedown|preventDefault>
+<button
+    tabindex="-1"
+    {id}
+    class={className}
+    {...props}
+    {title}
+    on:mousedown|preventDefault>
     <span> <input type="color" on:change={onChange} /> </span>
 </button>
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index aed9e863a..6d098fd97 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -39,6 +39,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
+    export let title: string;
 
     export let icon = "";
     export let command: string;
@@ -60,6 +61,6 @@
     }
 </script>
 
-<SquareButton {id} {className} {props} {active} {onClick} on:mount>
+<SquareButton {id} {className} {props} {title} {active} {onClick} on:mount>
     {@html icon}
 </SquareButton>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
new file mode 100644
index 000000000..cd8e971a9
--- /dev/null
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -0,0 +1,22 @@
+<script lang="typescript">
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+    export let title: string;
+
+    export let onClick: (event: ClickEvent) => void;
+    export let label: string;
+    export let endLabel: string;
+</script>
+
+<button
+    {id}
+    class={`dropdown-item ${className}`}
+    {...props}
+    {title}
+    on:click={onClick}
+    on:mousedown|preventDefault>
+    <span class="float-start">{label}</span>
+
+    {#if endLabel}<span class="float-end">{endLabel}</span>{/if}
+</button>
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte
index 6df513cd1..6fb0c7eb1 100644
--- a/ts/editor-toolbar/DropdownMenu.svelte
+++ b/ts/editor-toolbar/DropdownMenu.svelte
@@ -1,26 +1,14 @@
 <script lang="typescript">
-    interface DropdownItem {
-        label: string;
-        endLabel: string;
-        onClick: (event: ClickEvent) => void;
-    }
+    import type { SvelteComponentDefinition } from "./types";
 
     export let id: string;
-    export let menuItems: DropdownItem[];
+    export let menuItems: SvelteComponentDefinition[];
 </script>
 
 <ul class="dropdown-menu" {id}>
     {#each menuItems as menuItem}
         <li>
-            <button
-                class="dropdown-item"
-                on:click={menuItem.onClick}
-                on:mousedown|preventDefault>
-                <span class="float-start">{menuItem.label}</span>
-                {#if menuItem.endLabel}
-                    <span class="float-end">{menuItem.endLabel}</span>
-                {/if}
-            </button>
+            <svelte:component this={menuItem.component} {...menuItem} />
         </li>
     {/each}
 </ul>
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index 2af116bb7..c75562c64 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -4,11 +4,12 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
+    export let title: string;
 
     export let icon = "";
     export let onClick: (event: ClickEvent) => void;
 </script>
 
-<SquareButton {id} {className} {props} {onClick} on:mount>
+<SquareButton {id} {className} {props} {title} {onClick} on:mount>
     {@html icon}
 </SquareButton>
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index fa8ab8657..0688c99a3 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -13,6 +13,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
+    export let title: string;
 
     function extendClassName(classes: string) {
         return `form-select ${classes}`;
@@ -59,7 +60,8 @@
     {disabled}
     {id}
     class={extendClassName(className)}
-    {...props}>
+    {...props}
+    {title}>
     {#each options as option}
         <SelectOption {...option} />
     {/each}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 984e5310d..af924fc09 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -6,6 +6,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
+    export let title: string;
 
     export let onClick: (event: ClickEvent) => void;
     export let active = false;
@@ -85,6 +86,7 @@
     {id}
     class={className}
     {...props}
+    {title}
     class:active
     tabindex="-1"
     {disabled}
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index e579c4dfd..f0041badd 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -1,5 +1,9 @@
 import IconButton from "./IconButton.svelte";
 import ColorPicker from "./ColorPicker.svelte";
+
+import { lazyProperties } from "anki/lazy";
+import * as tr from "anki/i18n";
+
 import squareFillIcon from "./square-fill.svg";
 import "./color.css";
 
@@ -24,10 +28,18 @@ const forecolorButton = {
     onClick: () => wrapWithForecolor(getForecolor()),
 };
 
+lazyProperties(forecolorButton, {
+    title: tr.editingSetForegroundColourF7,
+});
+
 const colorpickerButton = {
     component: ColorPicker,
     className: "rainbow",
     onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
 };
 
+lazyProperties(colorpickerButton, {
+    title: tr.editingChangeColourF8,
+});
+
 export const colorButtons = [forecolorButton, colorpickerButton];
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index cc1dc1bcb..d95321625 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -1,5 +1,8 @@
-// @ts-ignore
 import CommandIconButton from "./CommandIconButton.svelte";
+
+import { lazyProperties } from "anki/lazy";
+import * as tr from "anki/i18n";
+
 import boldIcon from "./type-bold.svg";
 import italicIcon from "./type-italic.svg";
 import underlineIcon from "./type-underline.svg";
@@ -13,42 +16,66 @@ const boldButton = {
     command: "bold",
 };
 
+lazyProperties(boldButton, {
+    title: tr.editingBoldTextCtrlandb,
+});
+
 const italicButton = {
     component: CommandIconButton,
     icon: italicIcon,
     command: "italic",
 };
 
+lazyProperties(italicButton, {
+    title: tr.editingItalicTextCtrlandi,
+});
+
 const underlineButton = {
     component: CommandIconButton,
     icon: underlineIcon,
     command: "underline",
 };
 
+lazyProperties(underlineButton, {
+    title: tr.editingUnderlineTextCtrlandu,
+});
+
 const superscriptButton = {
     component: CommandIconButton,
     icon: superscriptIcon,
     command: "superscript",
 };
 
+lazyProperties(superscriptButton, {
+    title: tr.editingSuperscriptCtrlandand,
+});
+
 const subscriptButton = {
     component: CommandIconButton,
     icon: subscriptIcon,
     command: "subscript",
 };
 
-const eraserButton = {
+lazyProperties(subscriptButton, {
+    title: tr.editingSubscriptCtrland,
+});
+
+const removeFormatButton = {
     component: CommandIconButton,
     icon: eraserIcon,
     command: "removeFormat",
-    highlightable: false,
+    activatable: false,
 };
 
+lazyProperties(removeFormatButton, {
+    title: tr.editingRemoveFormattingCtrlandr,
+});
+
 export const formatButtons = [
     boldButton,
     italicButton,
     underlineButton,
     superscriptButton,
     subscriptButton,
-    eraserButton,
+    removeFormatButton,
 ];
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 22e02daee..43620b9b7 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -1,8 +1,7 @@
 import type { SvelteComponent } from "svelte";
 
 import { checkNightMode } from "anki/nightmode";
-import { setupI18n, ModuleName, i18n } from "anki/i18n";
-import * as tr from "anki/i18n";
+import { setupI18n, ModuleName } from "anki/i18n";
 
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
@@ -27,8 +26,6 @@ class EditorToolbar extends HTMLElement {
         this.disabled = writable(false);
 
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
-            console.log(i18n, tr);
-
             this.component = new EditorToolbarSvelte({
                 target: this,
                 props: {
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index f56216bc1..6583bd7dc 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -1,7 +1,11 @@
-import { bridgeCommand } from "anki/bridgecommand";
-
 import IconButton from "./IconButton.svelte";
 import DropdownMenu from "./DropdownMenu.svelte";
+import DropdownItem from "./DropdownItem.svelte";
+import WithDropdownMenu from "./WithDropdownMenu.svelte";
+
+import { bridgeCommand } from "anki/bridgecommand";
+import { lazyProperties } from "anki/lazy";
+import * as tr from "anki/i18n";
 
 import paperclipIcon from "./paperclip.svg";
 import micIcon from "./mic.svg";
@@ -31,23 +35,45 @@ const attachmentButton = {
     onClick: onAttachment,
 };
 
+lazyProperties(attachmentButton, {
+    title: tr.editingAttachPicturesaudiovideoF3,
+});
+
 const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
 
+lazyProperties(recordButton, {
+    title: tr.editingRecordAudioF5,
+});
+
 const clozeButton = {
     component: IconButton,
     icon: bracketsIcon,
     onClick: onCloze,
 };
 
+lazyProperties(clozeButton, {
+    title: tr.editingClozeDeletionCtrlandshiftandc,
+});
+
 const mathjaxButton = {
     component: IconButton,
     icon: functionIcon,
 };
 
+const mathjaxMenuId = "mathjaxMenu";
+
 const mathjaxMenu = {
     component: DropdownMenu,
-    id: "mathjaxMenu",
-    menuItems: [{ label: "Foo", onClick: () => console.log("foo") }],
+    id: mathjaxMenuId,
+    menuItems: [
+        { component: DropdownItem, label: "Foo", onClick: () => console.log("foo") },
+    ],
+};
+
+const mathjaxButtonWithMenu = {
+    component: WithDropdownMenu,
+    button: mathjaxButton,
+    menuId: mathjaxMenuId,
 };
 
 const htmlButton = {
@@ -56,11 +82,15 @@ const htmlButton = {
     onClick: onHtmlEdit,
 };
 
+lazyProperties(htmlButton, {
+    title: tr.editingHtmlEditor,
+});
+
 export const templateButtons = [
     attachmentButton,
     recordButton,
     clozeButton,
-    mathjaxButton,
+    mathjaxButtonWithMenu,
     htmlButton,
 ];
 
diff --git a/ts/editor-toolbar/types.ts b/ts/editor-toolbar/types.ts
index 0a47bda9c..347860752 100644
--- a/ts/editor-toolbar/types.ts
+++ b/ts/editor-toolbar/types.ts
@@ -1,12 +1,15 @@
 import type { SvelteComponent } from "svelte/internal";
 
-export interface ButtonDefinition {
+export interface SvelteComponentDefinition {
     component: SvelteComponent;
+    [arg: string]: unknown;
+}
+
+export interface ButtonDefinition extends SvelteComponentDefinition {
     id?: string;
     className?: string;
     props?: Record<string, string>;
     button: HTMLButtonElement;
-    [arg: string]: unknown;
 }
 
 export type Buttons = ButtonDefinition | Buttons[];

From 7f42b38e7ab609d3b924b1aecde7f028f0aeb512 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Apr 2021 01:38:50 +0200
Subject: [PATCH 33/97] Add labels and titles to all buttons

---
 qt/aqt/editor.py              |   3 +
 ts/editor-toolbar/color.ts    |  42 ++++++------
 ts/editor-toolbar/format.ts   | 118 ++++++++++++++++++----------------
 ts/editor-toolbar/notetype.ts |  47 +++++++-------
 ts/editor-toolbar/template.ts |  86 +++++++++++++++----------
 ts/lib/lazy.ts                |  26 ++++++++
 6 files changed, 190 insertions(+), 132 deletions(-)

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index d76bdc550..0cbb8059e 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -1114,6 +1114,9 @@ class Editor:
         paste=onPaste,
         cutOrCopy=onCutOrCopy,
         htmlEdit=onHtmlEdit,
+        mathjaxInline=insertMathjaxInline,
+        mathjaxBlock=insertMathjaxBlock,
+        mathjaxChemistry=insertMathjaxChemistry,
     )
 
 
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index f0041badd..5868c674f 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -1,7 +1,7 @@
 import IconButton from "./IconButton.svelte";
 import ColorPicker from "./ColorPicker.svelte";
 
-import { lazyProperties } from "anki/lazy";
+import { withLazyProperties } from "anki/lazy";
 import * as tr from "anki/i18n";
 
 import squareFillIcon from "./square-fill.svg";
@@ -21,25 +21,27 @@ function wrapWithForecolor(color: string): void {
     document.execCommand("forecolor", false, color);
 }
 
-const forecolorButton = {
-    component: IconButton,
-    icon: squareFillIcon,
-    className: "forecolor",
-    onClick: () => wrapWithForecolor(getForecolor()),
-};
+const forecolorButton = withLazyProperties(
+    {
+        component: IconButton,
+        icon: squareFillIcon,
+        className: "forecolor",
+        onClick: () => wrapWithForecolor(getForecolor()),
+    },
+    {
+        title: tr.editingSetForegroundColourF7,
+    }
+);
 
-lazyProperties(forecolorButton, {
-    title: tr.editingSetForegroundColourF7,
-});
-
-const colorpickerButton = {
-    component: ColorPicker,
-    className: "rainbow",
-    onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
-};
-
-lazyProperties(colorpickerButton, {
-    title: tr.editingChangeColourF8,
-});
+const colorpickerButton = withLazyProperties(
+    {
+        component: ColorPicker,
+        className: "rainbow",
+        onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
+    },
+    {
+        title: tr.editingChangeColourF8,
+    }
+);
 
 export const colorButtons = [forecolorButton, colorpickerButton];
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index d95321625..2f319c048 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -1,6 +1,6 @@
 import CommandIconButton from "./CommandIconButton.svelte";
 
-import { lazyProperties } from "anki/lazy";
+import { withLazyProperties } from "anki/lazy";
 import * as tr from "anki/i18n";
 
 import boldIcon from "./type-bold.svg";
@@ -10,66 +10,72 @@ import superscriptIcon from "./format-superscript.svg";
 import subscriptIcon from "./format-subscript.svg";
 import eraserIcon from "./eraser.svg";
 
-const boldButton = {
-    component: CommandIconButton,
-    icon: boldIcon,
-    command: "bold",
-};
+const boldButton = withLazyProperties(
+    {
+        component: CommandIconButton,
+        icon: boldIcon,
+        command: "bold",
+    },
+    {
+        title: tr.editingBoldTextCtrlandb,
+    }
+);
 
-lazyProperties(boldButton, {
-    title: tr.editingBoldTextCtrlandb,
-});
+const italicButton = withLazyProperties(
+    {
+        component: CommandIconButton,
+        icon: italicIcon,
+        command: "italic",
+    },
+    {
+        title: tr.editingItalicTextCtrlandi,
+    }
+);
 
-const italicButton = {
-    component: CommandIconButton,
-    icon: italicIcon,
-    command: "italic",
-};
+const underlineButton = withLazyProperties(
+    {
+        component: CommandIconButton,
+        icon: underlineIcon,
+        command: "underline",
+    },
+    {
+        title: tr.editingUnderlineTextCtrlandu,
+    }
+);
 
-lazyProperties(italicButton, {
-    title: tr.editingItalicTextCtrlandi,
-});
+const superscriptButton = withLazyProperties(
+    {
+        component: CommandIconButton,
+        icon: superscriptIcon,
+        command: "superscript",
+    },
+    {
+        title: tr.editingSuperscriptCtrlandand,
+    }
+);
 
-const underlineButton = {
-    component: CommandIconButton,
-    icon: underlineIcon,
-    command: "underline",
-};
+const subscriptButton = withLazyProperties(
+    {
+        component: CommandIconButton,
+        icon: subscriptIcon,
+        command: "subscript",
+    },
+    {
+        title: tr.editingSubscriptCtrland,
+    }
+);
 
-lazyProperties(underlineButton, {
-    title: tr.editingUnderlineTextCtrlandu,
-});
-
-const superscriptButton = {
-    component: CommandIconButton,
-    icon: superscriptIcon,
-    command: "superscript",
-};
-
-lazyProperties(superscriptButton, {
-    title: tr.editingSuperscriptCtrlandand,
-});
-
-const subscriptButton = {
-    component: CommandIconButton,
-    icon: subscriptIcon,
-    command: "subscript",
-};
-
-lazyProperties(subscriptButton, {
-    title: tr.editingSubscriptCtrland,
-});
-
-const removeFormatButton = {
-    component: CommandIconButton,
-    icon: eraserIcon,
-    command: "removeFormat",
-    activatable: false,
-};
-
-lazyProperties(removeFormatButton, {
-    title: tr.editingRemoveFormattingCtrlandr,
-});
+const removeFormatButton = withLazyProperties(
+    {
+        component: CommandIconButton,
+        icon: eraserIcon,
+        command: "removeFormat",
+        activatable: false,
+    },
+    {
+        title: tr.editingRemoveFormattingCtrlandr,
+    }
+);
 
 export const formatButtons = [
     boldButton,
diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts
index 76d1af001..f1e6e3600 100644
--- a/ts/editor-toolbar/notetype.ts
+++ b/ts/editor-toolbar/notetype.ts
@@ -1,28 +1,31 @@
-import { bridgeCommand } from "anki/bridgecommand";
-import { lazyProperties } from "anki/lazy";
-import * as tr from "anki/i18n";
 import LabelButton from "./LabelButton.svelte";
 
-const fieldsButton = {
-    component: LabelButton,
-    onClick: () => bridgeCommand("fields"),
-    disables: false,
-};
+import { bridgeCommand } from "anki/bridgecommand";
+import { withLazyProperties } from "anki/lazy";
+import * as tr from "anki/i18n";
 
-lazyProperties(fieldsButton, {
-    label: () => `${tr.editingFields()}...`,
-    title: tr.editingCustomizeFields,
-});
+const fieldsButton = withLazyProperties(
+    {
+        component: LabelButton,
+        onClick: () => bridgeCommand("fields"),
+        disables: false,
+    },
+    {
+        label: () => `${tr.editingFields()}...`,
+        title: tr.editingCustomizeFields,
+    }
+);
 
-const cardsButton = {
-    component: LabelButton,
-    onClick: () => bridgeCommand("cards"),
-    disables: false,
-};
-
-lazyProperties(cardsButton, {
-    label: () => `${tr.editingCards()}...`,
-    title: tr.editingCustomizeCardTemplatesCtrlandl,
-});
+const cardsButton = withLazyProperties(
+    {
+        component: LabelButton,
+        onClick: () => bridgeCommand("cards"),
+        disables: false,
+    },
+    {
+        label: () => `${tr.editingCards()}...`,
+        title: tr.editingCustomizeCardTemplatesCtrlandl,
+    }
+);
 
 export const notetypeButtons = [fieldsButton, cardsButton];
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index 6583bd7dc..c429db0b3 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -4,7 +4,7 @@ import DropdownItem from "./DropdownItem.svelte";
 import WithDropdownMenu from "./WithDropdownMenu.svelte";
 
 import { bridgeCommand } from "anki/bridgecommand";
-import { lazyProperties } from "anki/lazy";
+import { withLazyProperties } from "anki/lazy";
 import * as tr from "anki/i18n";
 
 import paperclipIcon from "./paperclip.svg";
@@ -29,31 +29,34 @@ function onHtmlEdit(): void {
     bridgeCommand("htmlEdit");
 }
 
-const attachmentButton = {
-    component: IconButton,
-    icon: paperclipIcon,
-    onClick: onAttachment,
-};
+const attachmentButton = withLazyProperties(
+    {
+        component: IconButton,
+        icon: paperclipIcon,
+        onClick: onAttachment,
+    },
+    {
+        title: tr.editingAttachPicturesaudiovideoF3,
+    }
+);
 
-lazyProperties(attachmentButton, {
-    title: tr.editingAttachPicturesaudiovideoF3,
-});
+const recordButton = withLazyProperties(
+    { component: IconButton, icon: micIcon, onClick: onRecord },
+    {
+        title: tr.editingRecordAudioF5,
+    }
+);
 
-const recordButton = { component: IconButton, icon: micIcon, onClick: onRecord };
-
-lazyProperties(recordButton, {
-    title: tr.editingRecordAudioF5,
-});
-
-const clozeButton = {
-    component: IconButton,
-    icon: bracketsIcon,
-    onClick: onCloze,
-};
-
-lazyProperties(clozeButton, {
-    title: tr.editingClozeDeletionCtrlandshiftandc,
-});
+const clozeButton = withLazyProperties(
+    {
+        component: IconButton,
+        icon: bracketsIcon,
+        onClick: onCloze,
+    },
+    {
+        title: tr.editingClozeDeletionCtrlandshiftandc,
+    }
+);
 
 const mathjaxButton = {
     component: IconButton,
@@ -66,7 +69,21 @@ const mathjaxMenu = {
     component: DropdownMenu,
     id: mathjaxMenuId,
     menuItems: [
-        { component: DropdownItem, label: "Foo", onClick: () => console.log("foo") },
+        withLazyProperties(
+            { component: DropdownItem, onClick: () => bridgeCommand("mathjaxInline") },
+            { label: tr.editingMathjaxInline }
+        ),
+        withLazyProperties(
+            { component: DropdownItem, onClick: () => bridgeCommand("mathjaxBlock") },
+            { label: tr.editingMathjaxBlock }
+        ),
+        withLazyProperties(
+            {
+                component: DropdownItem,
+                onClick: () => bridgeCommand("mathjaxChemistry"),
+            },
+            { label: tr.editingMathjaxChemistry }
+        ),
     ],
 };
 
@@ -76,15 +93,16 @@ const mathjaxButtonWithMenu = {
     menuId: mathjaxMenuId,
 };
 
-const htmlButton = {
-    component: IconButton,
-    icon: xmlIcon,
-    onClick: onHtmlEdit,
-};
-
-lazyProperties(htmlButton, {
-    title: tr.editingHtmlEditor,
-});
+const htmlButton = withLazyProperties(
+    {
+        component: IconButton,
+        icon: xmlIcon,
+        onClick: onHtmlEdit,
+    },
+    {
+        title: tr.editingHtmlEditor,
+    }
+);
 
 export const templateButtons = [
     attachmentButton,
diff --git a/ts/lib/lazy.ts b/ts/lib/lazy.ts
index 90d0439c5..d0c758e57 100644
--- a/ts/lib/lazy.ts
+++ b/ts/lib/lazy.ts
@@ -23,3 +23,29 @@ export function lazyProperties(
 
     Object.defineProperties(object, propertyDescriptorMap);
 }
+
+export function withLazyProperties(
+    object: Record<string, unknown>,
+    properties: Record<string, () => unknown>
+): Record<string, unknown> {
+    const propertyDescriptorMap = Object.entries(properties)
+        .map(([name, getter]: [string, () => unknown]): [
+            string,
+            PropertyDescriptor
+        ] => [
+            name,
+            {
+                get: getter,
+                enumerable: true,
+            },
+        ])
+        .reduce(
+            (
+                accumulator: PropertyDescriptorMap,
+                [name, property]
+            ): PropertyDescriptorMap => ((accumulator[name] = property), accumulator),
+            {}
+        );
+
+    return Object.defineProperties(object, propertyDescriptorMap);
+}

From 45992b68cdedaf6ad4c9aa157f11feaa967ab216 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Apr 2021 02:18:04 +0200
Subject: [PATCH 34/97] Make it easier to update buttons and menus

---
 ts/editor-toolbar/index.ts | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 43620b9b7..48bafb121 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -7,37 +7,44 @@ import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
 // @ts-ignore
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
-import { Writable, writable } from "svelte/store";
+import { writable } from "svelte/store";
 
 import { notetypeButtons } from "./notetype";
 import { formatButtons } from "./format";
 import { colorButtons } from "./color";
 import { templateButtons, templateMenus } from "./template";
 
-const defaultMenus = [...templateMenus];
-
 const defaultButtons = [notetypeButtons, formatButtons, colorButtons, templateButtons];
+const defaultMenus = [...templateMenus];
 
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;
-    disabled?: Writable<boolean>;
+
+    buttons = defaultButtons;
+    menus = defaultMenus;
+    disabled? = writable(false);
 
     connectedCallback(): void {
-        this.disabled = writable(false);
-
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
             this.component = new EditorToolbarSvelte({
                 target: this,
                 props: {
-                    menus: defaultMenus,
-                    buttons: defaultButtons,
-                    nightMode: checkNightMode(),
+                    buttons: this.buttons,
+                    menus: this.menus,
                     disabled: this.disabled,
+                    nightMode: checkNightMode(),
                 },
             });
         });
     }
 
+    update(): void {
+        this.component?.$set({
+            button: this.buttons,
+            menus: this.menus,
+        });
+    }
+
     enableButtons(): void {
         this.disabled?.set(false);
     }

From 6953389798975263e791279758192beeded65b3f Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Apr 2021 02:26:56 +0200
Subject: [PATCH 35/97] Add exports for add-ons

---
 ts/editor-toolbar/index.ts | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 48bafb121..801510556 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -1,19 +1,19 @@
 import type { SvelteComponent } from "svelte";
-
-import { checkNightMode } from "anki/nightmode";
-import { setupI18n, ModuleName } from "anki/i18n";
+import { writable } from "svelte/store";
 
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
-// @ts-ignore
-export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
-import { writable } from "svelte/store";
+import { checkNightMode } from "anki/nightmode";
+import { setupI18n, ModuleName } from "anki/i18n";
 
 import { notetypeButtons } from "./notetype";
 import { formatButtons } from "./format";
 import { colorButtons } from "./color";
 import { templateButtons, templateMenus } from "./template";
 
+// @ts-ignore
+export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
+
 const defaultButtons = [notetypeButtons, formatButtons, colorButtons, templateButtons];
 const defaultMenus = [...templateMenus];
 
@@ -55,3 +55,13 @@ class EditorToolbar extends HTMLElement {
 }
 
 customElements.define("anki-editor-toolbar", EditorToolbar);
+
+/* Exports for add-ons */
+export { default as LabelButton } from "./LabelButton.svelte";
+export { default as IconButton } from "./IconButton.svelte";
+export { default as CommandIconButton } from "./CommandIconButton.svelte";
+export { default as SelectButton } from "./SelectButton.svelte";
+
+export { default as DropdownMenu } from "./DropdownMenu.svelte";
+export { default as DropdownItem } from "./DropdownItem.svelte";
+export { default as WithDropdownMenu } from "./WithDropdownMenu.svelte";

From 9cbab08b001cbb7b4c32f1d926603ba8f53a7059 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Apr 2021 16:29:24 +0200
Subject: [PATCH 36/97] Add ButtonDropdown for dropdowns like the MathJax
 dropdown on AnkiMobile

---
 ts/editor-toolbar/ButtonDropdown.svelte | 16 ++++++++++++++++
 ts/editor-toolbar/ButtonGroup.svelte    |  6 +++++-
 ts/editor-toolbar/index.ts              |  1 +
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 ts/editor-toolbar/ButtonDropdown.svelte

diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte
new file mode 100644
index 000000000..3f10acec5
--- /dev/null
+++ b/ts/editor-toolbar/ButtonDropdown.svelte
@@ -0,0 +1,16 @@
+<script lang="typescript">
+    import type { Buttons } from "./types";
+    import ButtonGroup from "./ButtonGroup.svelte";
+
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+
+    function extendClassName(className: string): string {
+        return `dropdown-menu bg-transparent border-0 ${className}`;
+    }
+
+    export let buttons: Buttons;
+</script>
+
+<ButtonGroup {id} className={extendClassName(className)} {props} {buttons} />
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 0ae2725b9..96dc42931 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,6 +1,10 @@
 <script lang="typescript">
     import type { Buttons } from "./types";
 
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+
     export let buttons: Buttons;
 </script>
 
@@ -47,7 +51,7 @@
     }
 </style>
 
-<ul>
+<ul {id} class={className} {...props}>
     {#each buttons as button}
         <li>
             {#if Array.isArray(button)}
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 801510556..b30448000 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -64,4 +64,5 @@ export { default as SelectButton } from "./SelectButton.svelte";
 
 export { default as DropdownMenu } from "./DropdownMenu.svelte";
 export { default as DropdownItem } from "./DropdownItem.svelte";
+export { default as ButtonDropdown } from "./DropdownMenu.svelte";
 export { default as WithDropdownMenu } from "./WithDropdownMenu.svelte";

From 8b906100c0eb7666b70e090956f07a0c8b0efd1f Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Apr 2021 17:29:49 +0200
Subject: [PATCH 37/97] Make --toolbar-size a parameter

---
 ts/editor-toolbar/EditorToolbar.svelte | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index aeea8892c..249d152a6 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -11,16 +11,13 @@
 
     export let nightMode: boolean;
     export let disabled: Readable<boolean> = false;
+    export let size: number = 30;
 
     setContext(nightModeKey, nightMode);
     setContext(disabledKey, disabled);
 </script>
 
 <style lang="scss">
-    .base {
-        --toolbar-size: 30px;
-    }
-
     nav {
         position: sticky;
         top: 0;
@@ -43,7 +40,7 @@
     }
 </style>
 
-<div class="base">
+<div style={`--toolbar-size: ${size}px`}>
     <div>
         {#each menus as menu}
             <svelte:component this={menu.component} {...menu} />

From 96feba7a3e874cc326dc67238a67e61658600ddd Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Apr 2021 18:36:03 +0200
Subject: [PATCH 38/97] Pass in buttons and menus directly as stores

---
 ts/editor-toolbar/EditorToolbar.svelte | 13 ++++++++-----
 ts/editor-toolbar/LabelButton.svelte   |  6 +++---
 ts/editor-toolbar/SelectButton.svelte  |  6 +++---
 ts/editor-toolbar/SquareButton.svelte  |  6 +++---
 ts/editor-toolbar/index.ts             | 15 ++++-----------
 5 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 249d152a6..f6c5ac687 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -6,11 +6,14 @@
     import ButtonGroup from "./ButtonGroup.svelte";
     import type { Buttons } from "./types";
 
-    export let buttons: Buttons = [];
-    export let menus: SvelteComponent[];
+    export let buttons: Readable<Buttons>;
+    export let menus: Readable<SvelteComponent[]>;
+    export let disabled: Readable<boolean>;
+
+    $: _buttons = $buttons;
+    $: _menus = $menus;
 
     export let nightMode: boolean;
-    export let disabled: Readable<boolean> = false;
     export let size: number = 30;
 
     setContext(nightModeKey, nightMode);
@@ -42,12 +45,12 @@
 
 <div style={`--toolbar-size: ${size}px`}>
     <div>
-        {#each menus as menu}
+        {#each _menus as menu}
             <svelte:component this={menu.component} {...menu} />
         {/each}
     </div>
 
     <nav>
-        <ButtonGroup {buttons} />
+        <ButtonGroup buttons={_buttons} />
     </nav>
 </div>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 8bc6cab64..c83f4ce16 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -20,8 +20,8 @@
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
 
-    const disabledStore = getContext(disabledKey);
-    $: disabled = disables && $disabledStore;
+    const disabled = getContext(disabledKey);
+    $: _disabled = disables && $disabled;
 </script>
 
 <style lang="scss">
@@ -54,7 +54,7 @@
 <button
     tabindex="-1"
     bind:this={buttonRef}
-    {disabled}
+    disabled={_disabled}
     {id}
     class={extendClassName(className)}
     {...props}
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index 0688c99a3..825b8ff3f 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -27,8 +27,8 @@
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
 
-    const disabledStore = getContext(disabledKey);
-    $: disabled = disables && $disabledStore;
+    const disabled = getContext(disabledKey);
+    $: _disabled = disables && $disabled;
 </script>
 
 <style lang="scss">
@@ -57,7 +57,7 @@
 <select
     tabindex="-1"
     bind:this={buttonRef}
-    {disabled}
+    disabled={_disabled}
     {id}
     class={extendClassName(className)}
     {...props}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index af924fc09..ad963ec2a 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -13,8 +13,8 @@
 
     let buttonRef: HTMLButtonElement;
 
-    const disabledStore = getContext(disabledKey);
-    $: disabled = $disabledStore;
+    const disabled = getContext(disabledKey);
+    $: _disabled = $disabled;
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
@@ -89,7 +89,7 @@
     {title}
     class:active
     tabindex="-1"
-    {disabled}
+    disabled={_disabled}
     on:click={onClick}
     on:mousedown|preventDefault>
     <span class="p-1"><slot /></span>
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index b30448000..ac6a52218 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -20,8 +20,8 @@ const defaultMenus = [...templateMenus];
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;
 
-    buttons = defaultButtons;
-    menus = defaultMenus;
+    buttons = writable(defaultButtons);
+    menus = writable(defaultMenus);
     disabled? = writable(false);
 
     connectedCallback(): void {
@@ -38,19 +38,12 @@ class EditorToolbar extends HTMLElement {
         });
     }
 
-    update(): void {
-        this.component?.$set({
-            button: this.buttons,
-            menus: this.menus,
-        });
-    }
-
     enableButtons(): void {
-        this.disabled?.set(false);
+        this.disabled!.set(false);
     }
 
     disableButtons(): void {
-        this.disabled?.set(true);
+        this.disabled!.set(true);
     }
 }
 

From 37ed3e8209e0065e4de784bcf6214602fabe7706 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Apr 2021 18:55:34 +0200
Subject: [PATCH 39/97] Fix some code quality issues

---
 qt/aqt/data/web/imgs/vendor/BUILD.bazel    | 19 -------------------
 ts/editor-toolbar/ColorPicker.svelte       |  2 +-
 ts/editor-toolbar/CommandIconButton.svelte |  4 ++--
 ts/editor-toolbar/DropdownItem.svelte      |  2 +-
 ts/editor-toolbar/EditorToolbar.svelte     |  1 +
 ts/editor-toolbar/IconButton.svelte        |  2 +-
 ts/editor-toolbar/LabelButton.svelte       |  2 +-
 ts/editor-toolbar/SelectButton.svelte      |  3 +--
 ts/editor-toolbar/SquareButton.svelte      |  2 +-
 ts/editor-toolbar/WithDropdownMenu.svelte  |  2 --
 ts/editor-toolbar/contextKeys.ts           |  4 ++--
 11 files changed, 11 insertions(+), 32 deletions(-)
 delete mode 100644 qt/aqt/data/web/imgs/vendor/BUILD.bazel

diff --git a/qt/aqt/data/web/imgs/vendor/BUILD.bazel b/qt/aqt/data/web/imgs/vendor/BUILD.bazel
deleted file mode 100644
index f316948a7..000000000
--- a/qt/aqt/data/web/imgs/vendor/BUILD.bazel
+++ /dev/null
@@ -1,19 +0,0 @@
-load("//ts:vendor.bzl", "copy_bootstrap_icons", "copy_fontawesome_icons")
-
-copy_bootstrap_icons(name = "bootstrap-icons")
-
-copy_fontawesome_icons(name = "fontawesome-icons")
-
-files = [
-    "bootstrap-icons",
-    "fontawesome-icons",
-]
-
-directories = []
-
-filegroup(
-    name = "vendor",
-    srcs = ["//qt/aqt/data/web/imgs/vendor:{}".format(file) for file in files] +
-           ["//qt/aqt/data/web/imgs/vendor/{}".format(dir) for dir in directories],
-    visibility = ["//qt:__subpackages__"],
-)
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index b9450d617..da979a0a2 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -4,7 +4,7 @@
     export let props: Record<string, string> = {};
     export let title: string;
 
-    export let onChange: (event: ChangeEvent) => void;
+    export let onChange: (event: Event) => void;
 </script>
 
 <style lang="scss">
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 6d098fd97..ed45d23cc 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -50,13 +50,13 @@
     if (activatable) {
         initializeButton(command);
 
-        commandMap.subscribe((map: Record<string, boolean>): void => {
+        commandMap.subscribe((map: Map<string, boolean>): void => {
             active = map.get(command);
             return () => map.delete(command);
         });
     }
 
-    function onClick(event: ClickEvent): void {
+    function onClick(): void {
         document.execCommand(command);
     }
 </script>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index cd8e971a9..1be8dbe25 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -4,7 +4,7 @@
     export let props: Record<string, string> = {};
     export let title: string;
 
-    export let onClick: (event: ClickEvent) => void;
+    export let onClick: (event: MouseEvent) => void;
     export let label: string;
     export let endLabel: string;
 </script>
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index f6c5ac687..3ff55c944 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import type { SvelteComponent } from "svelte";
     import type { Readable } from "svelte/store";
     import { setContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index c75562c64..0e9745e72 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -7,7 +7,7 @@
     export let title: string;
 
     export let icon = "";
-    export let onClick: (event: ClickEvent) => void;
+    export let onClick: (event: MouseEvent) => void;
 </script>
 
 <SquareButton {id} {className} {props} {title} {onClick} on:mount>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index c83f4ce16..583a0190b 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -8,7 +8,7 @@
 
     export let label: string;
     export let title: string;
-    export let onClick: (event: ClickEvent) => void;
+    export let onClick: (event: MouseEvent) => void;
     export let disables = true;
 
     let buttonRef: HTMLButtonElement;
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index 825b8ff3f..13da0b04c 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -1,6 +1,5 @@
 <script lang="typescript">
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import type { Readable } from "svelte/store";
     import { disabledKey } from "./contextKeys";
     import SelectOption from "./SelectOption.svelte";
 
@@ -19,7 +18,7 @@
         return `form-select ${classes}`;
     }
 
-    export let disables;
+    export let disables = true;
     export let options: Option[];
 
     let buttonRef: HTMLSelectElement;
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index ad963ec2a..5f57808a6 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -8,7 +8,7 @@
     export let props: Record<string, string> = {};
     export let title: string;
 
-    export let onClick: (event: ClickEvent) => void;
+    export let onClick: (event: MouseEvent) => void;
     export let active = false;
 
     let buttonRef: HTMLButtonElement;
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/editor-toolbar/WithDropdownMenu.svelte
index 582afd125..3ae27f060 100644
--- a/ts/editor-toolbar/WithDropdownMenu.svelte
+++ b/ts/editor-toolbar/WithDropdownMenu.svelte
@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import { onMount } from "svelte";
-
     import type { ButtonDefinition } from "./types";
 
     export let button: ButtonDefinition;
diff --git a/ts/editor-toolbar/contextKeys.ts b/ts/editor-toolbar/contextKeys.ts
index 05fd7e0bd..09ef3bbc3 100644
--- a/ts/editor-toolbar/contextKeys.ts
+++ b/ts/editor-toolbar/contextKeys.ts
@@ -1,2 +1,2 @@
-export let nightModeKey = Symbol("nightMode");
-export let disabledKey = Symbol("disabled");
+export const nightModeKey = Symbol("nightMode");
+export const disabledKey = Symbol("disabled");

From 10952de3c5fd356a9abe5b3dfb8f73d64379de31 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Apr 2021 22:24:22 +0200
Subject: [PATCH 40/97] Remove lazyProperties -> we use withLazyProperties
 instead

---
 ts/lib/lazy.ts | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/ts/lib/lazy.ts b/ts/lib/lazy.ts
index d0c758e57..6507cefe2 100644
--- a/ts/lib/lazy.ts
+++ b/ts/lib/lazy.ts
@@ -1,29 +1,3 @@
-export function lazyProperties(
-    object: Record<string, unknown>,
-    properties: Record<string, () => unknown>
-): void {
-    const propertyDescriptorMap = Object.entries(properties)
-        .map(([name, getter]: [string, () => unknown]): [
-            string,
-            PropertyDescriptor
-        ] => [
-            name,
-            {
-                get: getter,
-                enumerable: true,
-            },
-        ])
-        .reduce(
-            (
-                accumulator: PropertyDescriptorMap,
-                [name, property]
-            ): PropertyDescriptorMap => ((accumulator[name] = property), accumulator),
-            {}
-        );
-
-    Object.defineProperties(object, propertyDescriptorMap);
-}
-
 export function withLazyProperties(
     object: Record<string, unknown>,
     properties: Record<string, () => unknown>

From bb64f73c1a7c1aba4360465c71f50936d74827bf Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 3 Apr 2021 03:19:30 +0200
Subject: [PATCH 41/97] Support building as external repo

---
 ts/editor-toolbar/BUILD.bazel | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 74455cf96..3ea53173f 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -78,7 +78,7 @@ esbuild(
     ],
     args = [
         "--global-name=editorToolbar",
-        "--inject:ts/protobuf-shim.js",
+        "--inject:$(location //ts:protobuf-shim.js)",
         "--loader:.svg=text",
     ],
     entry_point = "index.ts",

From 2046b00c38476387e4ade648729ee7eaf3591090 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 3 Apr 2021 03:24:22 +0200
Subject: [PATCH 42/97] Fix clicking the bold button immediately showing the
 updated button state

- rather than only after typing
---
 ts/editor-toolbar/CommandIconButton.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index ed45d23cc..ab1a3f6c4 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -1,9 +1,9 @@
 <script lang="typescript" context="module">
     import { writable } from "svelte/store";
 
-    export const commandMap = writable(new Map<string, boolean>());
+    const commandMap = writable(new Map<string, boolean>());
 
-    function initializeButton(key: string): void {
+    function updateButton(key: string): void {
         commandMap.update(
             (map: Map<string, boolean>): Map<string, boolean> =>
                 new Map([...map, [key, document.queryCommandState(key)]])
@@ -48,7 +48,7 @@
     let active = false;
 
     if (activatable) {
-        initializeButton(command);
+        updateButton(command);
 
         commandMap.subscribe((map: Map<string, boolean>): void => {
             active = map.get(command);
@@ -58,6 +58,7 @@
 
     function onClick(): void {
         document.execCommand(command);
+        updateButton(command);
     }
 </script>
 

From 28201670ee74b9041addfa10fc82c071e3e70b4c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 7 Apr 2021 23:53:09 +0200
Subject: [PATCH 43/97] Move enabled/disabled logic to EditorToolbar

---
 ts/editor-toolbar/EditorToolbar.svelte | 15 ++++++++++++++-
 ts/editor-toolbar/index.ts             | 13 ++-----------
 ts/editor/editingArea.ts               |  4 ++--
 ts/editor/focusHandlers.ts             |  8 ++++----
 ts/editor/index.ts                     |  8 ++++----
 5 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 3ff55c944..7bc13d7e6 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,3 +1,17 @@
+<script context="module" lang="typescript">
+    import { writable } from "svelte/store";
+
+    const disabled = writable(false);
+
+    export function enableButtons(): void {
+        disabled.set(false);
+    }
+
+    export function disableButtons(): void {
+        disabled.set(true);
+    }
+</script>
+
 <script lang="typescript">
     import type { SvelteComponent } from "svelte";
     import type { Readable } from "svelte/store";
@@ -9,7 +23,6 @@
 
     export let buttons: Readable<Buttons>;
     export let menus: Readable<SvelteComponent[]>;
-    export let disabled: Readable<boolean>;
 
     $: _buttons = $buttons;
     $: _menus = $menus;
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index ac6a52218..8fec39b42 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -11,8 +11,9 @@ import { formatButtons } from "./format";
 import { colorButtons } from "./color";
 import { templateButtons, templateMenus } from "./template";
 
-// @ts-ignore
+// @ts-expect-error
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
+export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
 
 const defaultButtons = [notetypeButtons, formatButtons, colorButtons, templateButtons];
 const defaultMenus = [...templateMenus];
@@ -22,7 +23,6 @@ class EditorToolbar extends HTMLElement {
 
     buttons = writable(defaultButtons);
     menus = writable(defaultMenus);
-    disabled? = writable(false);
 
     connectedCallback(): void {
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
@@ -31,20 +31,11 @@ class EditorToolbar extends HTMLElement {
                 props: {
                     buttons: this.buttons,
                     menus: this.menus,
-                    disabled: this.disabled,
                     nightMode: checkNightMode(),
                 },
             });
         });
     }
-
-    enableButtons(): void {
-        this.disabled!.set(false);
-    }
-
-    disableButtons(): void {
-        this.disabled!.set(true);
-    }
 }
 
 customElements.define("anki-editor-toolbar", EditorToolbar);
diff --git a/ts/editor/editingArea.ts b/ts/editor/editingArea.ts
index f0ccc0453..e522bb8ef 100644
--- a/ts/editor/editingArea.ts
+++ b/ts/editor/editingArea.ts
@@ -59,7 +59,7 @@ export class EditingArea extends HTMLDivElement {
         this.addEventListener("paste", onPaste);
         this.addEventListener("copy", onCutOrCopy);
         this.addEventListener("oncut", onCutOrCopy);
-        // @ts-ignore
+        // @ts-expect-error
         this.addEventListener("mouseup", editorToolbar.updateActiveButtons);
 
         const baseStyleSheet = this.baseStyle.sheet as CSSStyleSheet;
@@ -75,7 +75,7 @@ export class EditingArea extends HTMLDivElement {
         this.removeEventListener("paste", onPaste);
         this.removeEventListener("copy", onCutOrCopy);
         this.removeEventListener("oncut", onCutOrCopy);
-        // @ts-ignore
+        // @ts-expect-error
         this.removeEventListener("mouseup", editorToolbar.updateActiveButtons);
     }
 
diff --git a/ts/editor/focusHandlers.ts b/ts/editor/focusHandlers.ts
index d377740a6..fb9f44b8c 100644
--- a/ts/editor/focusHandlers.ts
+++ b/ts/editor/focusHandlers.ts
@@ -10,8 +10,8 @@ export function onFocus(evt: FocusEvent): void {
     const currentField = evt.currentTarget as EditingArea;
     currentField.focusEditable();
     bridgeCommand(`focus:${currentField.ord}`);
-    // @ts-ignore
-    document.getElementById("editorToolbar").enableButtons();
+    // @ts-expect-error
+    editorToolbar.enableButtons();
 }
 
 export function onBlur(evt: FocusEvent): void {
@@ -19,6 +19,6 @@ export function onBlur(evt: FocusEvent): void {
     const currentFieldUnchanged = previousFocus === document.activeElement;
 
     saveField(previousFocus, currentFieldUnchanged ? "key" : "blur");
-    // @ts-ignore
-    document.getElementById("editorToolbar").disableButtons();
+    // @ts-expect-error
+    editorToolbar.disableButtons();
 }
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index d07fca635..c7e2121b8 100644
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@@ -41,7 +41,7 @@ export function focusField(n: number): void {
     if (field) {
         field.editingArea.focusEditable();
         caretToEnd(field.editingArea);
-        // @ts-ignore
+        // @ts-expect-error
         editorToolbar.updateActiveButtons();
     }
 }
@@ -122,8 +122,8 @@ export function setFields(fields: [string, string][]): void {
 
     if (!getCurrentField()) {
         // when initial focus of the window is not on editor (e.g. browser)
-        // @ts-ignore
-        document.getElementById("editorToolbar").disableButtons();
+        // @ts-expect-error
+        editorToolbar.disableButtons();
     }
 }
 
@@ -158,7 +158,7 @@ export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void
     document.execCommand(cmd, false, arg);
     if (!nosave) {
         saveField(getCurrentField() as EditingArea, "key");
-        // @ts-ignore
+        // @ts-expect-error
         editorToolbar.updateActiveButtons();
     }
 }

From c7590c8ef1813b7dbb8753274e0c7e5b61a95ce4 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 16:29:28 +0200
Subject: [PATCH 44/97] Use dynamicComponent instead of withLazyProps

---
 ts/editor-toolbar/BUILD.bazel              |   1 +
 ts/editor-toolbar/ColorPicker.d.ts         |   6 ++
 ts/editor-toolbar/CommandIconButton.d.ts   |   8 ++
 ts/editor-toolbar/CommandIconButton.svelte |   2 +-
 ts/editor-toolbar/DropdownItem.d.ts        |   9 ++
 ts/editor-toolbar/DropdownMenu.d.ts        |   6 ++
 ts/editor-toolbar/IconButton.d.ts          |   7 ++
 ts/editor-toolbar/LabelButton.d.ts         |   9 ++
 ts/editor-toolbar/WithDropdownMenu.d.ts    |   6 ++
 ts/editor-toolbar/color.ts                 |  15 +--
 ts/editor-toolbar/format.ts                |  23 ++---
 ts/editor-toolbar/index.ts                 |   1 +
 ts/editor-toolbar/notetype.ts              |  10 +-
 ts/editor-toolbar/template.ts              | 104 +++++++++++++--------
 ts/editor-toolbar/types.ts                 |  11 +--
 ts/lib/lazy.ts                             |  25 -----
 ts/sveltelib/dynamicComponent.ts           |  27 ++++++
 17 files changed, 170 insertions(+), 100 deletions(-)
 create mode 100644 ts/editor-toolbar/ColorPicker.d.ts
 create mode 100644 ts/editor-toolbar/CommandIconButton.d.ts
 create mode 100644 ts/editor-toolbar/DropdownItem.d.ts
 create mode 100644 ts/editor-toolbar/DropdownMenu.d.ts
 create mode 100644 ts/editor-toolbar/IconButton.d.ts
 create mode 100644 ts/editor-toolbar/LabelButton.d.ts
 create mode 100644 ts/editor-toolbar/WithDropdownMenu.d.ts
 delete mode 100644 ts/lib/lazy.ts
 create mode 100644 ts/sveltelib/dynamicComponent.ts

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 3ea53173f..cc85ac419 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -40,6 +40,7 @@ ts_library(
         exclude = ["index.ts"],
     ),
     deps = [
+        "//ts/sveltelib",
         "//ts/lib",
         "//ts/lib:backend_proto",
         "//ts:image_module_support",
diff --git a/ts/editor-toolbar/ColorPicker.d.ts b/ts/editor-toolbar/ColorPicker.d.ts
new file mode 100644
index 000000000..de594367d
--- /dev/null
+++ b/ts/editor-toolbar/ColorPicker.d.ts
@@ -0,0 +1,6 @@
+export interface ColorPickerProps {
+    id?: string;
+    className?: string;
+    title: string;
+    onChange: (event: Event) => void;
+}
diff --git a/ts/editor-toolbar/CommandIconButton.d.ts b/ts/editor-toolbar/CommandIconButton.d.ts
new file mode 100644
index 000000000..6eecebe96
--- /dev/null
+++ b/ts/editor-toolbar/CommandIconButton.d.ts
@@ -0,0 +1,8 @@
+export interface CommandIconButtonProps {
+    id?: string;
+    className?: string;
+    title: string;
+    icon: string;
+    command: string;
+    activatable?: boolean;
+}
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index ab1a3f6c4..58aae8179 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -41,7 +41,7 @@
     export let props: Record<string, string> = {};
     export let title: string;
 
-    export let icon = "";
+    export let icon;
     export let command: string;
     export let activatable = true;
 
diff --git a/ts/editor-toolbar/DropdownItem.d.ts b/ts/editor-toolbar/DropdownItem.d.ts
new file mode 100644
index 000000000..f71f5d83e
--- /dev/null
+++ b/ts/editor-toolbar/DropdownItem.d.ts
@@ -0,0 +1,9 @@
+export interface DropdownItemProps {
+    id?: string;
+    className?: string;
+    title: string;
+
+    onClick: (event: MouseEvent) => void;
+    label: string;
+    endLabel: string;
+}
diff --git a/ts/editor-toolbar/DropdownMenu.d.ts b/ts/editor-toolbar/DropdownMenu.d.ts
new file mode 100644
index 000000000..0961d680a
--- /dev/null
+++ b/ts/editor-toolbar/DropdownMenu.d.ts
@@ -0,0 +1,6 @@
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+
+export interface DropdownMenuProps {
+    id: string;
+    menuItems: DynamicSvelteComponent[];
+}
diff --git a/ts/editor-toolbar/IconButton.d.ts b/ts/editor-toolbar/IconButton.d.ts
new file mode 100644
index 000000000..b2def61da
--- /dev/null
+++ b/ts/editor-toolbar/IconButton.d.ts
@@ -0,0 +1,7 @@
+export interface IconButtonProps {
+    id?: string;
+    className?: string;
+    title: string;
+    icon: string;
+    onClick: (event: MouseEvent) => void;
+}
diff --git a/ts/editor-toolbar/LabelButton.d.ts b/ts/editor-toolbar/LabelButton.d.ts
new file mode 100644
index 000000000..1cab6f08c
--- /dev/null
+++ b/ts/editor-toolbar/LabelButton.d.ts
@@ -0,0 +1,9 @@
+export interface LabelButtonProps {
+    id?: string;
+    className?: string;
+
+    label: string;
+    title: string;
+    onClick: (event: MouseEvent) => void;
+    disables?: boolean;
+}
diff --git a/ts/editor-toolbar/WithDropdownMenu.d.ts b/ts/editor-toolbar/WithDropdownMenu.d.ts
new file mode 100644
index 000000000..44d6adf22
--- /dev/null
+++ b/ts/editor-toolbar/WithDropdownMenu.d.ts
@@ -0,0 +1,6 @@
+import type { ButtonDefinition } from "./types";
+
+export interface WithDropdownMenuProps {
+    button: ButtonDefinition;
+    menuId: string;
+}
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index 5868c674f..7ba8b21ad 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -1,7 +1,9 @@
 import IconButton from "./IconButton.svelte";
+import type { IconButtonProps } from "./IconButton";
 import ColorPicker from "./ColorPicker.svelte";
+import type { ColorPickerProps } from "./ColorPicker";
 
-import { withLazyProperties } from "anki/lazy";
+import { dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
 
 import squareFillIcon from "./square-fill.svg";
@@ -21,9 +23,9 @@ function wrapWithForecolor(color: string): void {
     document.execCommand("forecolor", false, color);
 }
 
-const forecolorButton = withLazyProperties(
+const iconButton = dynamicComponent(IconButton);
+const forecolorButton = iconButton<IconButtonProps, "title">(
     {
-        component: IconButton,
         icon: squareFillIcon,
         className: "forecolor",
         onClick: () => wrapWithForecolor(getForecolor()),
@@ -33,11 +35,12 @@ const forecolorButton = withLazyProperties(
     }
 );
 
-const colorpickerButton = withLazyProperties(
+const colorPicker = dynamicComponent(ColorPicker);
+const colorpickerButton = colorPicker<ColorPickerProps, "title">(
     {
-        component: ColorPicker,
         className: "rainbow",
-        onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
+        onChange: ({ currentTarget }) =>
+            setForegroundColor((currentTarget as HTMLInputElement).value),
     },
     {
         title: tr.editingChangeColourF8,
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index 2f319c048..4b53f2c4a 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -1,6 +1,7 @@
 import CommandIconButton from "./CommandIconButton.svelte";
+import type { CommandIconButtonProps } from "./CommandIconButton";
 
-import { withLazyProperties } from "anki/lazy";
+import { dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
 
 import boldIcon from "./type-bold.svg";
@@ -10,9 +11,10 @@ import superscriptIcon from "./format-superscript.svg";
 import subscriptIcon from "./format-subscript.svg";
 import eraserIcon from "./eraser.svg";
 
-const boldButton = withLazyProperties(
+const commandIconButton = dynamicComponent(CommandIconButton);
+
+const boldButton = commandIconButton<CommandIconButtonProps, "title">(
     {
-        component: CommandIconButton,
         icon: boldIcon,
         command: "bold",
     },
@@ -21,9 +23,8 @@ const boldButton = withLazyProperties(
     }
 );
 
-const italicButton = withLazyProperties(
+const italicButton = commandIconButton<CommandIconButtonProps, "title">(
     {
-        component: CommandIconButton,
         icon: italicIcon,
         command: "italic",
     },
@@ -32,9 +33,8 @@ const italicButton = withLazyProperties(
     }
 );
 
-const underlineButton = withLazyProperties(
+const underlineButton = commandIconButton<CommandIconButtonProps, "title">(
     {
-        component: CommandIconButton,
         icon: underlineIcon,
         command: "underline",
     },
@@ -43,9 +43,8 @@ const underlineButton = withLazyProperties(
     }
 );
 
-const superscriptButton = withLazyProperties(
+const superscriptButton = commandIconButton<CommandIconButtonProps, "title">(
     {
-        component: CommandIconButton,
         icon: superscriptIcon,
         command: "superscript",
     },
@@ -54,9 +53,8 @@ const superscriptButton = withLazyProperties(
     }
 );
 
-const subscriptButton = withLazyProperties(
+const subscriptButton = commandIconButton<CommandIconButtonProps, "title">(
     {
-        component: CommandIconButton,
         icon: subscriptIcon,
         command: "subscript",
     },
@@ -65,9 +63,8 @@ const subscriptButton = withLazyProperties(
     }
 );
 
-const removeFormatButton = withLazyProperties(
+const removeFormatButton = commandIconButton<CommandIconButtonProps, "title">(
     {
-        component: CommandIconButton,
         icon: eraserIcon,
         command: "removeFormat",
         activatable: false,
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 8fec39b42..1dfeeba47 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -26,6 +26,7 @@ class EditorToolbar extends HTMLElement {
 
     connectedCallback(): void {
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
+            console.log(this.buttons);
             this.component = new EditorToolbarSvelte({
                 target: this,
                 props: {
diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts
index f1e6e3600..9c216b024 100644
--- a/ts/editor-toolbar/notetype.ts
+++ b/ts/editor-toolbar/notetype.ts
@@ -1,12 +1,13 @@
 import LabelButton from "./LabelButton.svelte";
+import type { LabelButtonProps } from "./LabelButton";
 
+import { dynamicComponent } from "sveltelib/dynamicComponent";
 import { bridgeCommand } from "anki/bridgecommand";
-import { withLazyProperties } from "anki/lazy";
 import * as tr from "anki/i18n";
 
-const fieldsButton = withLazyProperties(
+const labelButton = dynamicComponent(LabelButton);
+const fieldsButton = labelButton<LabelButtonProps, "label" | "title">(
     {
-        component: LabelButton,
         onClick: () => bridgeCommand("fields"),
         disables: false,
     },
@@ -16,9 +17,8 @@ const fieldsButton = withLazyProperties(
     }
 );
 
-const cardsButton = withLazyProperties(
+const cardsButton = labelButton<LabelButtonProps, "label" | "title">(
     {
-        component: LabelButton,
         onClick: () => bridgeCommand("cards"),
         disables: false,
     },
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index c429db0b3..b4c06e2d4 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -1,10 +1,14 @@
 import IconButton from "./IconButton.svelte";
+import type { IconButtonProps } from "./IconButton";
 import DropdownMenu from "./DropdownMenu.svelte";
+import type { DropdownMenuProps } from "./DropdownMenu";
 import DropdownItem from "./DropdownItem.svelte";
+import type { DropdownItemProps } from "./DropdownItem";
 import WithDropdownMenu from "./WithDropdownMenu.svelte";
+import type { WithDropdownMenuProps } from "./WithDropdownMenu";
 
 import { bridgeCommand } from "anki/bridgecommand";
-import { withLazyProperties } from "anki/lazy";
+import { dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
 
 import paperclipIcon from "./paperclip.svg";
@@ -29,9 +33,14 @@ function onHtmlEdit(): void {
     bridgeCommand("htmlEdit");
 }
 
-const attachmentButton = withLazyProperties(
+const iconButton = dynamicComponent(IconButton);
+
+const withDropdownMenu = dynamicComponent(WithDropdownMenu);
+const dropdownMenu = dynamicComponent(DropdownMenu);
+const dropdownItem = dynamicComponent(DropdownItem);
+
+const attachmentButton = iconButton<IconButtonProps, "title">(
     {
-        component: IconButton,
         icon: paperclipIcon,
         onClick: onAttachment,
     },
@@ -40,16 +49,15 @@ const attachmentButton = withLazyProperties(
     }
 );
 
-const recordButton = withLazyProperties(
-    { component: IconButton, icon: micIcon, onClick: onRecord },
+const recordButton = iconButton(
+    { icon: micIcon, onClick: onRecord },
     {
         title: tr.editingRecordAudioF5,
     }
 );
 
-const clozeButton = withLazyProperties(
+const clozeButton = iconButton<IconButtonProps, "title">(
     {
-        component: IconButton,
         icon: bracketsIcon,
         onClick: onCloze,
     },
@@ -58,44 +66,58 @@ const clozeButton = withLazyProperties(
     }
 );
 
-const mathjaxButton = {
-    component: IconButton,
-    icon: functionIcon,
-};
+const mathjaxButton = iconButton<Omit<IconButtonProps, "onClick" | "title">>(
+    {
+        icon: functionIcon,
+    },
+    {}
+);
 
 const mathjaxMenuId = "mathjaxMenu";
 
-const mathjaxMenu = {
-    component: DropdownMenu,
-    id: mathjaxMenuId,
-    menuItems: [
-        withLazyProperties(
-            { component: DropdownItem, onClick: () => bridgeCommand("mathjaxInline") },
-            { label: tr.editingMathjaxInline }
-        ),
-        withLazyProperties(
-            { component: DropdownItem, onClick: () => bridgeCommand("mathjaxBlock") },
-            { label: tr.editingMathjaxBlock }
-        ),
-        withLazyProperties(
-            {
-                component: DropdownItem,
-                onClick: () => bridgeCommand("mathjaxChemistry"),
-            },
-            { label: tr.editingMathjaxChemistry }
-        ),
-    ],
-};
-
-const mathjaxButtonWithMenu = {
-    component: WithDropdownMenu,
-    button: mathjaxButton,
-    menuId: mathjaxMenuId,
-};
-
-const htmlButton = withLazyProperties(
+const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
+    {
+        id: mathjaxMenuId,
+        menuItems: [
+            dropdownItem<DropdownItemProps, "label">(
+                {
+                    onClick: () => bridgeCommand("mathjaxInline"),
+                    title: "test",
+                    endLabel: "test",
+                },
+                { label: tr.editingMathjaxInline }
+            ),
+            dropdownItem<DropdownItemProps, "label">(
+                {
+                    onClick: () => bridgeCommand("mathjaxBlock"),
+                    title: "test",
+                    endLabel: "test",
+                },
+                { label: tr.editingMathjaxBlock }
+            ),
+            dropdownItem<DropdownItemProps, "label">(
+                {
+                    onClick: () => bridgeCommand("mathjaxChemistry"),
+                    title: "test",
+                    endLabel: "test",
+                },
+                { label: tr.editingMathjaxChemistry }
+            ),
+        ],
+    },
+    {}
+);
+
+const mathjaxButtonWithMenu = withDropdownMenu<WithDropdownMenuProps>(
+    {
+        button: mathjaxButton,
+        menuId: mathjaxMenuId,
+    },
+    {}
+);
+
+const htmlButton = iconButton<IconButtonProps, "title">(
     {
-        component: IconButton,
         icon: xmlIcon,
         onClick: onHtmlEdit,
     },
diff --git a/ts/editor-toolbar/types.ts b/ts/editor-toolbar/types.ts
index 347860752..871b4d461 100644
--- a/ts/editor-toolbar/types.ts
+++ b/ts/editor-toolbar/types.ts
@@ -1,15 +1,8 @@
-import type { SvelteComponent } from "svelte/internal";
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
-export interface SvelteComponentDefinition {
-    component: SvelteComponent;
-    [arg: string]: unknown;
-}
-
-export interface ButtonDefinition extends SvelteComponentDefinition {
+export interface ButtonDefinition extends DynamicSvelteComponent {
     id?: string;
     className?: string;
-    props?: Record<string, string>;
-    button: HTMLButtonElement;
 }
 
 export type Buttons = ButtonDefinition | Buttons[];
diff --git a/ts/lib/lazy.ts b/ts/lib/lazy.ts
deleted file mode 100644
index 6507cefe2..000000000
--- a/ts/lib/lazy.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export function withLazyProperties(
-    object: Record<string, unknown>,
-    properties: Record<string, () => unknown>
-): Record<string, unknown> {
-    const propertyDescriptorMap = Object.entries(properties)
-        .map(([name, getter]: [string, () => unknown]): [
-            string,
-            PropertyDescriptor
-        ] => [
-            name,
-            {
-                get: getter,
-                enumerable: true,
-            },
-        ])
-        .reduce(
-            (
-                accumulator: PropertyDescriptorMap,
-                [name, property]
-            ): PropertyDescriptorMap => ((accumulator[name] = property), accumulator),
-            {}
-        );
-
-    return Object.defineProperties(object, propertyDescriptorMap);
-}
diff --git a/ts/sveltelib/dynamicComponent.ts b/ts/sveltelib/dynamicComponent.ts
new file mode 100644
index 000000000..743f122aa
--- /dev/null
+++ b/ts/sveltelib/dynamicComponent.ts
@@ -0,0 +1,27 @@
+import type { SvelteComponentDev } from "svelte/internal";
+
+export interface DynamicSvelteComponent<
+    T extends typeof SvelteComponentDev = typeof SvelteComponentDev
+> {
+    component: T;
+}
+
+export const dynamicComponent = <T extends typeof SvelteComponentDev>(component: T) => <
+    U extends NonNullable<ConstructorParameters<T>[0]["props"]>,
+    V extends string = never
+>(
+    props: Omit<U, V>,
+    lazyProps: { [Property in keyof Pick<U, V>]: () => Pick<U, V>[Property] }
+): DynamicSvelteComponent<T> & U => {
+    const dynamicComponent = { component, ...props };
+
+    for (const property in lazyProps) {
+        const get = lazyProps[property];
+        const propertyDescriptor: TypedPropertyDescriptor<
+            Pick<U, V>[Extract<keyof Pick<U, V>, string>]
+        > = { get, enumerable: true };
+        Object.defineProperty(dynamicComponent, property, propertyDescriptor);
+    }
+
+    return dynamicComponent as DynamicSvelteComponent<T> & U;
+};

From 120e1452e39ff76e2c95b0575bbf6aa95fcc7aff Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 16:31:41 +0200
Subject: [PATCH 45/97] Change overflow of button groups to overflow-y auto

Avoids erratic creation of scrollbars
---
 ts/editor-toolbar/ButtonGroup.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 96dc42931..4c242f403 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -13,7 +13,7 @@
         display: flex;
         /* flex-flow: nowrap for a scrollable toolbar */
         flex-flow: wrap;
-        overflow: scroll;
+        overflow-y: auto;
 
         padding-inline-start: 0;
         margin-bottom: 0;

From 8e1092d2c4390ab2f5b371c7f04a7150090aba8d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 16:33:25 +0200
Subject: [PATCH 46/97] Rename types.ts to types.d.ts

---
 ts/editor-toolbar/{types.ts => types.d.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename ts/editor-toolbar/{types.ts => types.d.ts} (100%)

diff --git a/ts/editor-toolbar/types.ts b/ts/editor-toolbar/types.d.ts
similarity index 100%
rename from ts/editor-toolbar/types.ts
rename to ts/editor-toolbar/types.d.ts

From a2d37206ea56876d30ec9a9b4f2794f2e6980ca6 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 16:40:42 +0200
Subject: [PATCH 47/97] Rename title to tooltip across editor toolbar
 components

---
 ts/editor-toolbar/ColorPicker.d.ts         |  2 +-
 ts/editor-toolbar/ColorPicker.svelte       |  4 ++--
 ts/editor-toolbar/CommandIconButton.d.ts   |  2 +-
 ts/editor-toolbar/CommandIconButton.svelte |  4 ++--
 ts/editor-toolbar/DropdownItem.d.ts        |  2 +-
 ts/editor-toolbar/DropdownItem.svelte      |  4 ++--
 ts/editor-toolbar/IconButton.d.ts          |  2 +-
 ts/editor-toolbar/IconButton.svelte        |  4 ++--
 ts/editor-toolbar/LabelButton.d.ts         |  2 +-
 ts/editor-toolbar/LabelButton.svelte       |  4 ++--
 ts/editor-toolbar/SelectButton.svelte      |  4 ++--
 ts/editor-toolbar/SquareButton.svelte      |  4 ++--
 ts/editor-toolbar/color.ts                 |  8 ++++----
 ts/editor-toolbar/format.ts                | 24 +++++++++++-----------
 ts/editor-toolbar/notetype.ts              |  8 ++++----
 ts/editor-toolbar/template.ts              | 22 ++++++++++----------
 16 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.d.ts b/ts/editor-toolbar/ColorPicker.d.ts
index de594367d..25ae4a6d8 100644
--- a/ts/editor-toolbar/ColorPicker.d.ts
+++ b/ts/editor-toolbar/ColorPicker.d.ts
@@ -1,6 +1,6 @@
 export interface ColorPickerProps {
     id?: string;
     className?: string;
-    title: string;
+    tooltip: string;
     onChange: (event: Event) => void;
 }
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index da979a0a2..ceae957ac 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -2,7 +2,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
-    export let title: string;
+    export let tooltip: string;
 
     export let onChange: (event: Event) => void;
 </script>
@@ -47,7 +47,7 @@
     {id}
     class={className}
     {...props}
-    {title}
+    title={tooltip}
     on:mousedown|preventDefault>
     <span> <input type="color" on:change={onChange} /> </span>
 </button>
diff --git a/ts/editor-toolbar/CommandIconButton.d.ts b/ts/editor-toolbar/CommandIconButton.d.ts
index 6eecebe96..439a2ea8d 100644
--- a/ts/editor-toolbar/CommandIconButton.d.ts
+++ b/ts/editor-toolbar/CommandIconButton.d.ts
@@ -1,7 +1,7 @@
 export interface CommandIconButtonProps {
     id?: string;
     className?: string;
-    title: string;
+    tooltip: string;
     icon: string;
     command: string;
     activatable?: boolean;
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 58aae8179..6022d40d1 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -39,7 +39,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
-    export let title: string;
+    export let tooltip: string;
 
     export let icon;
     export let command: string;
@@ -62,6 +62,6 @@
     }
 </script>
 
-<SquareButton {id} {className} {props} {title} {active} {onClick} on:mount>
+<SquareButton {id} {className} {props} {tooltip} {active} {onClick} on:mount>
     {@html icon}
 </SquareButton>
diff --git a/ts/editor-toolbar/DropdownItem.d.ts b/ts/editor-toolbar/DropdownItem.d.ts
index f71f5d83e..afdbda955 100644
--- a/ts/editor-toolbar/DropdownItem.d.ts
+++ b/ts/editor-toolbar/DropdownItem.d.ts
@@ -1,7 +1,7 @@
 export interface DropdownItemProps {
     id?: string;
     className?: string;
-    title: string;
+    tooltip: string;
 
     onClick: (event: MouseEvent) => void;
     label: string;
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index 1be8dbe25..7563d3983 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -2,7 +2,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
-    export let title: string;
+    export let tooltip: string;
 
     export let onClick: (event: MouseEvent) => void;
     export let label: string;
@@ -13,7 +13,7 @@
     {id}
     class={`dropdown-item ${className}`}
     {...props}
-    {title}
+    title={tooltip}
     on:click={onClick}
     on:mousedown|preventDefault>
     <span class="float-start">{label}</span>
diff --git a/ts/editor-toolbar/IconButton.d.ts b/ts/editor-toolbar/IconButton.d.ts
index b2def61da..18fe01dc9 100644
--- a/ts/editor-toolbar/IconButton.d.ts
+++ b/ts/editor-toolbar/IconButton.d.ts
@@ -1,7 +1,7 @@
 export interface IconButtonProps {
     id?: string;
     className?: string;
-    title: string;
+    tooltip: string;
     icon: string;
     onClick: (event: MouseEvent) => void;
 }
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index 0e9745e72..5a3b3aa4a 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -4,12 +4,12 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
-    export let title: string;
+    export let tooltip: string;
 
     export let icon = "";
     export let onClick: (event: MouseEvent) => void;
 </script>
 
-<SquareButton {id} {className} {props} {title} {onClick} on:mount>
+<SquareButton {id} {className} {props} {tooltip} {onClick} on:mount>
     {@html icon}
 </SquareButton>
diff --git a/ts/editor-toolbar/LabelButton.d.ts b/ts/editor-toolbar/LabelButton.d.ts
index 1cab6f08c..3ed88b9e0 100644
--- a/ts/editor-toolbar/LabelButton.d.ts
+++ b/ts/editor-toolbar/LabelButton.d.ts
@@ -3,7 +3,7 @@ export interface LabelButtonProps {
     className?: string;
 
     label: string;
-    title: string;
+    tooltip: string;
     onClick: (event: MouseEvent) => void;
     disables?: boolean;
 }
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 583a0190b..862b2c9ba 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -7,7 +7,7 @@
     export let props: Record<string, string> = {};
 
     export let label: string;
-    export let title: string;
+    export let tooltip: string;
     export let onClick: (event: MouseEvent) => void;
     export let disables = true;
 
@@ -60,6 +60,6 @@
     {...props}
     on:click={onClick}
     on:mousedown|preventDefault
-    {title}>
+    title={tooltip}>
     {label}
 </button>
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index 13da0b04c..68b63ef9e 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -12,7 +12,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
-    export let title: string;
+    export let tooltip: string;
 
     function extendClassName(classes: string) {
         return `form-select ${classes}`;
@@ -60,7 +60,7 @@
     {id}
     class={extendClassName(className)}
     {...props}
-    {title}>
+    title={tooltip}>
     {#each options as option}
         <SelectOption {...option} />
     {/each}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 5f57808a6..a7f58896a 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -6,7 +6,7 @@
     export let id = "";
     export let className = "";
     export let props: Record<string, string> = {};
-    export let title: string;
+    export let tooltip: string;
 
     export let onClick: (event: MouseEvent) => void;
     export let active = false;
@@ -86,7 +86,7 @@
     {id}
     class={className}
     {...props}
-    {title}
+    title={tooltip}
     class:active
     tabindex="-1"
     disabled={_disabled}
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index 7ba8b21ad..0c345eecb 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -24,26 +24,26 @@ function wrapWithForecolor(color: string): void {
 }
 
 const iconButton = dynamicComponent(IconButton);
-const forecolorButton = iconButton<IconButtonProps, "title">(
+const forecolorButton = iconButton<IconButtonProps, "tooltip">(
     {
         icon: squareFillIcon,
         className: "forecolor",
         onClick: () => wrapWithForecolor(getForecolor()),
     },
     {
-        title: tr.editingSetForegroundColourF7,
+        tooltip: tr.editingSetForegroundColourF7,
     }
 );
 
 const colorPicker = dynamicComponent(ColorPicker);
-const colorpickerButton = colorPicker<ColorPickerProps, "title">(
+const colorpickerButton = colorPicker<ColorPickerProps, "tooltip">(
     {
         className: "rainbow",
         onChange: ({ currentTarget }) =>
             setForegroundColor((currentTarget as HTMLInputElement).value),
     },
     {
-        title: tr.editingChangeColourF8,
+        tooltip: tr.editingChangeColourF8,
     }
 );
 
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index 4b53f2c4a..40cad8a8a 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -13,64 +13,64 @@ import eraserIcon from "./eraser.svg";
 
 const commandIconButton = dynamicComponent(CommandIconButton);
 
-const boldButton = commandIconButton<CommandIconButtonProps, "title">(
+const boldButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     {
         icon: boldIcon,
         command: "bold",
     },
     {
-        title: tr.editingBoldTextCtrlandb,
+        tooltip: tr.editingBoldTextCtrlandb,
     }
 );
 
-const italicButton = commandIconButton<CommandIconButtonProps, "title">(
+const italicButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     {
         icon: italicIcon,
         command: "italic",
     },
     {
-        title: tr.editingItalicTextCtrlandi,
+        tooltip: tr.editingItalicTextCtrlandi,
     }
 );
 
-const underlineButton = commandIconButton<CommandIconButtonProps, "title">(
+const underlineButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     {
         icon: underlineIcon,
         command: "underline",
     },
     {
-        title: tr.editingUnderlineTextCtrlandu,
+        tooltip: tr.editingUnderlineTextCtrlandu,
     }
 );
 
-const superscriptButton = commandIconButton<CommandIconButtonProps, "title">(
+const superscriptButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     {
         icon: superscriptIcon,
         command: "superscript",
     },
     {
-        title: tr.editingSuperscriptCtrlandand,
+        tooltip: tr.editingSuperscriptCtrlandand,
     }
 );
 
-const subscriptButton = commandIconButton<CommandIconButtonProps, "title">(
+const subscriptButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     {
         icon: subscriptIcon,
         command: "subscript",
     },
     {
-        title: tr.editingSubscriptCtrland,
+        tooltip: tr.editingSubscriptCtrland,
     }
 );
 
-const removeFormatButton = commandIconButton<CommandIconButtonProps, "title">(
+const removeFormatButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     {
         icon: eraserIcon,
         command: "removeFormat",
         activatable: false,
     },
     {
-        title: tr.editingRemoveFormattingCtrlandr,
+        tooltip: tr.editingRemoveFormattingCtrlandr,
     }
 );
 
diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts
index 9c216b024..15ad589b1 100644
--- a/ts/editor-toolbar/notetype.ts
+++ b/ts/editor-toolbar/notetype.ts
@@ -6,25 +6,25 @@ import { bridgeCommand } from "anki/bridgecommand";
 import * as tr from "anki/i18n";
 
 const labelButton = dynamicComponent(LabelButton);
-const fieldsButton = labelButton<LabelButtonProps, "label" | "title">(
+const fieldsButton = labelButton<LabelButtonProps, "label" | "tooltip">(
     {
         onClick: () => bridgeCommand("fields"),
         disables: false,
     },
     {
         label: () => `${tr.editingFields()}...`,
-        title: tr.editingCustomizeFields,
+        tooltip: tr.editingCustomizeFields,
     }
 );
 
-const cardsButton = labelButton<LabelButtonProps, "label" | "title">(
+const cardsButton = labelButton<LabelButtonProps, "label" | "tooltip">(
     {
         onClick: () => bridgeCommand("cards"),
         disables: false,
     },
     {
         label: () => `${tr.editingCards()}...`,
-        title: tr.editingCustomizeCardTemplatesCtrlandl,
+        tooltip: tr.editingCustomizeCardTemplatesCtrlandl,
     }
 );
 
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index b4c06e2d4..772f35fc2 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -39,34 +39,34 @@ const withDropdownMenu = dynamicComponent(WithDropdownMenu);
 const dropdownMenu = dynamicComponent(DropdownMenu);
 const dropdownItem = dynamicComponent(DropdownItem);
 
-const attachmentButton = iconButton<IconButtonProps, "title">(
+const attachmentButton = iconButton<IconButtonProps, "tooltip">(
     {
         icon: paperclipIcon,
         onClick: onAttachment,
     },
     {
-        title: tr.editingAttachPicturesaudiovideoF3,
+        tooltip: tr.editingAttachPicturesaudiovideoF3,
     }
 );
 
 const recordButton = iconButton(
     { icon: micIcon, onClick: onRecord },
     {
-        title: tr.editingRecordAudioF5,
+        tooltip: tr.editingRecordAudioF5,
     }
 );
 
-const clozeButton = iconButton<IconButtonProps, "title">(
+const clozeButton = iconButton<IconButtonProps, "tooltip">(
     {
         icon: bracketsIcon,
         onClick: onCloze,
     },
     {
-        title: tr.editingClozeDeletionCtrlandshiftandc,
+        tooltip: tr.editingClozeDeletionCtrlandshiftandc,
     }
 );
 
-const mathjaxButton = iconButton<Omit<IconButtonProps, "onClick" | "title">>(
+const mathjaxButton = iconButton<Omit<IconButtonProps, "onClick" | "tooltip">>(
     {
         icon: functionIcon,
     },
@@ -82,7 +82,7 @@ const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
             dropdownItem<DropdownItemProps, "label">(
                 {
                     onClick: () => bridgeCommand("mathjaxInline"),
-                    title: "test",
+                    tooltip: "test",
                     endLabel: "test",
                 },
                 { label: tr.editingMathjaxInline }
@@ -90,7 +90,7 @@ const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
             dropdownItem<DropdownItemProps, "label">(
                 {
                     onClick: () => bridgeCommand("mathjaxBlock"),
-                    title: "test",
+                    tooltip: "test",
                     endLabel: "test",
                 },
                 { label: tr.editingMathjaxBlock }
@@ -98,7 +98,7 @@ const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
             dropdownItem<DropdownItemProps, "label">(
                 {
                     onClick: () => bridgeCommand("mathjaxChemistry"),
-                    title: "test",
+                    tooltip: "test",
                     endLabel: "test",
                 },
                 { label: tr.editingMathjaxChemistry }
@@ -116,13 +116,13 @@ const mathjaxButtonWithMenu = withDropdownMenu<WithDropdownMenuProps>(
     {}
 );
 
-const htmlButton = iconButton<IconButtonProps, "title">(
+const htmlButton = iconButton<IconButtonProps, "tooltip">(
     {
         icon: xmlIcon,
         onClick: onHtmlEdit,
     },
     {
-        title: tr.editingHtmlEditor,
+        tooltip: tr.editingHtmlEditor,
     }
 );
 

From bf33397855095411d2759a0ffc251769866b0d97 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 17:07:02 +0200
Subject: [PATCH 48/97] Give clearer type names to dynamicComponent

---
 ts/sveltelib/dynamicComponent.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ts/sveltelib/dynamicComponent.ts b/ts/sveltelib/dynamicComponent.ts
index 743f122aa..90f21a277 100644
--- a/ts/sveltelib/dynamicComponent.ts
+++ b/ts/sveltelib/dynamicComponent.ts
@@ -6,22 +6,22 @@ export interface DynamicSvelteComponent<
     component: T;
 }
 
-export const dynamicComponent = <T extends typeof SvelteComponentDev>(component: T) => <
-    U extends NonNullable<ConstructorParameters<T>[0]["props"]>,
-    V extends string = never
+export const dynamicComponent = <Comp extends typeof SvelteComponentDev>(component: Comp) => <
+    Props extends NonNullable<ConstructorParameters<Comp>[0]["props"]>,
+    Lazy extends string = never
 >(
-    props: Omit<U, V>,
-    lazyProps: { [Property in keyof Pick<U, V>]: () => Pick<U, V>[Property] }
-): DynamicSvelteComponent<T> & U => {
+    props: Omit<Props, Lazy>,
+    lazyProps: { [Property in keyof Pick<Props, Lazy>]: () => Pick<Props, Lazy>[Property] }
+): DynamicSvelteComponent<Comp> & Props => {
     const dynamicComponent = { component, ...props };
 
     for (const property in lazyProps) {
         const get = lazyProps[property];
         const propertyDescriptor: TypedPropertyDescriptor<
-            Pick<U, V>[Extract<keyof Pick<U, V>, string>]
+            Pick<Props, Lazy>[Extract<keyof Pick<Props, Lazy>, string>]
         > = { get, enumerable: true };
         Object.defineProperty(dynamicComponent, property, propertyDescriptor);
     }
 
-    return dynamicComponent as DynamicSvelteComponent<T> & U;
+    return dynamicComponent as DynamicSvelteComponent<Comp> & Props;
 };

From 59884df70b6022ed0a1701a45a0e458e619e6357 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 17:26:30 +0200
Subject: [PATCH 49/97] Make wraps a passable prop to EditorToolbar

Can be set to nowrap via document.getElementByID("editorToolbar").component.$set({ wraps: false })
---
 ts/editor-toolbar/ButtonGroup.svelte   | 11 +++++++----
 ts/editor-toolbar/EditorToolbar.svelte |  3 ++-
 ts/sveltelib/dynamicComponent.ts       |  8 ++++++--
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 4c242f403..aa2f7f743 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -6,13 +6,12 @@
     export let props: Record<string, string> = {};
 
     export let buttons: Buttons;
+    export let wraps: boolean;
 </script>
 
 <style lang="scss">
     ul {
         display: flex;
-        /* flex-flow: nowrap for a scrollable toolbar */
-        flex-flow: wrap;
         overflow-y: auto;
 
         padding-inline-start: 0;
@@ -24,6 +23,10 @@
         }
     }
 
+    .wraps {
+        flex-flow: wrap;
+    }
+
     li {
         display: inline-block;
         margin-bottom: calc(var(--toolbar-size) / 15);
@@ -51,11 +54,11 @@
     }
 </style>
 
-<ul {id} class={className} {...props}>
+<ul {id} class={className} {...props} class:wraps>
     {#each buttons as button}
         <li>
             {#if Array.isArray(button)}
-                <svelte:self buttons={button} />
+                <svelte:self buttons={button} {wraps} />
             {:else}
                 <svelte:component this={button.component} {...button} />
             {/if}
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 7bc13d7e6..e648cd087 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -29,6 +29,7 @@
 
     export let nightMode: boolean;
     export let size: number = 30;
+    export let wraps: boolean = true;
 
     setContext(nightModeKey, nightMode);
     setContext(disabledKey, disabled);
@@ -65,6 +66,6 @@
     </div>
 
     <nav>
-        <ButtonGroup buttons={_buttons} />
+        <ButtonGroup buttons={_buttons} {wraps} />
     </nav>
 </div>
diff --git a/ts/sveltelib/dynamicComponent.ts b/ts/sveltelib/dynamicComponent.ts
index 90f21a277..e3ac9c34f 100644
--- a/ts/sveltelib/dynamicComponent.ts
+++ b/ts/sveltelib/dynamicComponent.ts
@@ -6,12 +6,16 @@ export interface DynamicSvelteComponent<
     component: T;
 }
 
-export const dynamicComponent = <Comp extends typeof SvelteComponentDev>(component: Comp) => <
+export const dynamicComponent = <Comp extends typeof SvelteComponentDev>(
+    component: Comp
+) => <
     Props extends NonNullable<ConstructorParameters<Comp>[0]["props"]>,
     Lazy extends string = never
 >(
     props: Omit<Props, Lazy>,
-    lazyProps: { [Property in keyof Pick<Props, Lazy>]: () => Pick<Props, Lazy>[Property] }
+    lazyProps: {
+        [Property in keyof Pick<Props, Lazy>]: () => Pick<Props, Lazy>[Property];
+    }
 ): DynamicSvelteComponent<Comp> & Props => {
     const dynamicComponent = { component, ...props };
 

From d3e1bfa841876b6e6f0b766aa226038d3c8965c0 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 18:13:50 +0200
Subject: [PATCH 50/97] Pass wraps more similiar to how size is passed via CSS
 variables

---
 ts/editor-toolbar/ButtonGroup.svelte   | 10 +++-------
 ts/editor-toolbar/EditorToolbar.svelte |  4 ++--
 ts/editor-toolbar/index.ts             |  1 -
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index aa2f7f743..a01639fc4 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -6,12 +6,12 @@
     export let props: Record<string, string> = {};
 
     export let buttons: Buttons;
-    export let wraps: boolean;
 </script>
 
 <style lang="scss">
     ul {
         display: flex;
+        flex-wrap: var(--toolbar-wrap);
         overflow-y: auto;
 
         padding-inline-start: 0;
@@ -23,10 +23,6 @@
         }
     }
 
-    .wraps {
-        flex-flow: wrap;
-    }
-
     li {
         display: inline-block;
         margin-bottom: calc(var(--toolbar-size) / 15);
@@ -54,11 +50,11 @@
     }
 </style>
 
-<ul {id} class={className} {...props} class:wraps>
+<ul {id} class={className} {...props}>
     {#each buttons as button}
         <li>
             {#if Array.isArray(button)}
-                <svelte:self buttons={button} {wraps} />
+                <svelte:self buttons={button} />
             {:else}
                 <svelte:component this={button.component} {...button} />
             {/if}
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index e648cd087..ead8912f9 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -58,7 +58,7 @@
     }
 </style>
 
-<div style={`--toolbar-size: ${size}px`}>
+<div style={`--toolbar-size: ${size}px; --toolbar-wrap: ${wraps ? "wrap" : "nowrap"}`}>
     <div>
         {#each _menus as menu}
             <svelte:component this={menu.component} {...menu} />
@@ -66,6 +66,6 @@
     </div>
 
     <nav>
-        <ButtonGroup buttons={_buttons} {wraps} />
+        <ButtonGroup buttons={_buttons} />
     </nav>
 </div>
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 1dfeeba47..8fec39b42 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -26,7 +26,6 @@ class EditorToolbar extends HTMLElement {
 
     connectedCallback(): void {
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
-            console.log(this.buttons);
             this.component = new EditorToolbarSvelte({
                 target: this,
                 props: {

From 86c57d5b759f668e8eddef7dcb30ac093be2eeb4 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 18:28:43 +0200
Subject: [PATCH 51/97] Pass button groups as actual button groups, not arrays

---
 ts/editor-toolbar/ButtonGroup.d.ts     |  7 +++++++
 ts/editor-toolbar/EditorToolbar.svelte |  2 +-
 ts/editor-toolbar/color.ts             | 11 ++++++++++-
 ts/editor-toolbar/format.ts            | 25 +++++++++++++++++--------
 ts/editor-toolbar/index.ts             | 10 +++++-----
 ts/editor-toolbar/notetype.ts          | 11 ++++++++++-
 ts/editor-toolbar/template.ts          | 23 ++++++++++++++++-------
 7 files changed, 66 insertions(+), 23 deletions(-)
 create mode 100644 ts/editor-toolbar/ButtonGroup.d.ts

diff --git a/ts/editor-toolbar/ButtonGroup.d.ts b/ts/editor-toolbar/ButtonGroup.d.ts
new file mode 100644
index 000000000..2e5496f15
--- /dev/null
+++ b/ts/editor-toolbar/ButtonGroup.d.ts
@@ -0,0 +1,7 @@
+import type { Buttons } from "./types";
+
+export interface ButtonGroupProps {
+    id: string;
+    className?: string;
+    buttons: Buttons;
+}
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index ead8912f9..20dac37a7 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -58,7 +58,7 @@
     }
 </style>
 
-<div style={`--toolbar-size: ${size}px; --toolbar-wrap: ${wraps ? "wrap" : "nowrap"}`}>
+<div style={`--toolbar-size: ${size}px; --toolbar-wrap: ${wraps ? 'wrap' : 'nowrap'}`}>
     <div>
         {#each _menus as menu}
             <svelte:component this={menu.component} {...menu} />
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index 0c345eecb..35f52cf0e 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -2,6 +2,8 @@ import IconButton from "./IconButton.svelte";
 import type { IconButtonProps } from "./IconButton";
 import ColorPicker from "./ColorPicker.svelte";
 import type { ColorPickerProps } from "./ColorPicker";
+import ButtonGroup from "./ButtonGroup.svelte";
+import type { ButtonGroupProps } from "./ButtonGroup";
 
 import { dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
@@ -47,4 +49,11 @@ const colorpickerButton = colorPicker<ColorPickerProps, "tooltip">(
     }
 );
 
-export const colorButtons = [forecolorButton, colorpickerButton];
+const buttonGroup = dynamicComponent(ButtonGroup);
+export const colorGroup = buttonGroup<ButtonGroupProps>(
+    {
+        id: "color",
+        buttons: [forecolorButton, colorpickerButton],
+    },
+    {}
+);
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index 40cad8a8a..52a61060a 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -1,5 +1,7 @@
 import CommandIconButton from "./CommandIconButton.svelte";
 import type { CommandIconButtonProps } from "./CommandIconButton";
+import ButtonGroup from "./ButtonGroup.svelte";
+import type { ButtonGroupProps } from "./ButtonGroup";
 
 import { dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
@@ -74,11 +76,18 @@ const removeFormatButton = commandIconButton<CommandIconButtonProps, "tooltip">(
     }
 );
 
-export const formatButtons = [
-    boldButton,
-    italicButton,
-    underlineButton,
-    superscriptButton,
-    subscriptButton,
-    removeFormatButton,
-];
+const buttonGroup = dynamicComponent(ButtonGroup);
+export const formatGroup = buttonGroup<ButtonGroupProps>(
+    {
+        id: "color",
+        buttons: [
+            boldButton,
+            italicButton,
+            underlineButton,
+            superscriptButton,
+            subscriptButton,
+            removeFormatButton,
+        ],
+    },
+    {}
+);
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 8fec39b42..26111f135 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -6,16 +6,16 @@ import EditorToolbarSvelte from "./EditorToolbar.svelte";
 import { checkNightMode } from "anki/nightmode";
 import { setupI18n, ModuleName } from "anki/i18n";
 
-import { notetypeButtons } from "./notetype";
-import { formatButtons } from "./format";
-import { colorButtons } from "./color";
-import { templateButtons, templateMenus } from "./template";
+import { notetypeGroup } from "./notetype";
+import { formatGroup } from "./format";
+import { colorGroup } from "./color";
+import { templateGroup, templateMenus } from "./template";
 
 // @ts-expect-error
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
 export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
 
-const defaultButtons = [notetypeButtons, formatButtons, colorButtons, templateButtons];
+const defaultButtons = [notetypeGroup, formatGroup, colorGroup, templateGroup];
 const defaultMenus = [...templateMenus];
 
 class EditorToolbar extends HTMLElement {
diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts
index 15ad589b1..32a0c5633 100644
--- a/ts/editor-toolbar/notetype.ts
+++ b/ts/editor-toolbar/notetype.ts
@@ -1,5 +1,7 @@
 import LabelButton from "./LabelButton.svelte";
 import type { LabelButtonProps } from "./LabelButton";
+import ButtonGroup from "./ButtonGroup.svelte";
+import type { ButtonGroupProps } from "./ButtonGroup";
 
 import { dynamicComponent } from "sveltelib/dynamicComponent";
 import { bridgeCommand } from "anki/bridgecommand";
@@ -28,4 +30,11 @@ const cardsButton = labelButton<LabelButtonProps, "label" | "tooltip">(
     }
 );
 
-export const notetypeButtons = [fieldsButton, cardsButton];
+const buttonGroup = dynamicComponent(ButtonGroup);
+export const notetypeGroup = buttonGroup<ButtonGroupProps>(
+    {
+        id: "notetype",
+        buttons: [fieldsButton, cardsButton],
+    },
+    {}
+);
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index 772f35fc2..6e0ff81dd 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -6,6 +6,8 @@ import DropdownItem from "./DropdownItem.svelte";
 import type { DropdownItemProps } from "./DropdownItem";
 import WithDropdownMenu from "./WithDropdownMenu.svelte";
 import type { WithDropdownMenuProps } from "./WithDropdownMenu";
+import ButtonGroup from "./ButtonGroup.svelte";
+import type { ButtonGroupProps } from "./ButtonGroup";
 
 import { bridgeCommand } from "anki/bridgecommand";
 import { dynamicComponent } from "sveltelib/dynamicComponent";
@@ -126,12 +128,19 @@ const htmlButton = iconButton<IconButtonProps, "tooltip">(
     }
 );
 
-export const templateButtons = [
-    attachmentButton,
-    recordButton,
-    clozeButton,
-    mathjaxButtonWithMenu,
-    htmlButton,
-];
+const buttonGroup = dynamicComponent(ButtonGroup);
+export const templateGroup = buttonGroup<ButtonGroupProps>(
+    {
+        id: "template",
+        buttons: [
+            attachmentButton,
+            recordButton,
+            clozeButton,
+            mathjaxButtonWithMenu,
+            htmlButton,
+        ],
+    },
+    {}
+);
 
 export const templateMenus = [mathjaxMenu];

From f88b9d64d335c1fae7cb48ef9b62a6ed4f0e229f Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 18:43:15 +0200
Subject: [PATCH 52/97] Get rid of types.d.ts in favor of
 DynamicSvelteComponent

---
 ts/editor-toolbar/ButtonDropdown.svelte   |  4 ++--
 ts/editor-toolbar/ButtonGroup.d.ts        |  4 ++--
 ts/editor-toolbar/ButtonGroup.svelte      | 12 ++++--------
 ts/editor-toolbar/EditorToolbar.svelte    |  7 +++----
 ts/editor-toolbar/WithDropdownMenu.d.ts   |  4 ++--
 ts/editor-toolbar/WithDropdownMenu.svelte |  6 +++---
 ts/editor-toolbar/types.d.ts              |  8 --------
 7 files changed, 16 insertions(+), 29 deletions(-)
 delete mode 100644 ts/editor-toolbar/types.d.ts

diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte
index 3f10acec5..cbae8a69b 100644
--- a/ts/editor-toolbar/ButtonDropdown.svelte
+++ b/ts/editor-toolbar/ButtonDropdown.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import type { Buttons } from "./types";
+    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
     import ButtonGroup from "./ButtonGroup.svelte";
 
     export let id = "";
@@ -10,7 +10,7 @@
         return `dropdown-menu bg-transparent border-0 ${className}`;
     }
 
-    export let buttons: Buttons;
+    export let buttons: DynamicSvelteComponent[];
 </script>
 
 <ButtonGroup {id} className={extendClassName(className)} {props} {buttons} />
diff --git a/ts/editor-toolbar/ButtonGroup.d.ts b/ts/editor-toolbar/ButtonGroup.d.ts
index 2e5496f15..d4131ce9d 100644
--- a/ts/editor-toolbar/ButtonGroup.d.ts
+++ b/ts/editor-toolbar/ButtonGroup.d.ts
@@ -1,7 +1,7 @@
-import type { Buttons } from "./types";
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
 export interface ButtonGroupProps {
     id: string;
     className?: string;
-    buttons: Buttons;
+    buttons: DynamicSvelteComponent[];
 }
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index a01639fc4..73a5d62e5 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,11 +1,11 @@
 <script lang="typescript">
-    import type { Buttons } from "./types";
+    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
-    export let id = "";
+    export let id;
     export let className = "";
     export let props: Record<string, string> = {};
 
-    export let buttons: Buttons;
+    export let buttons: DynamicSvelteComponent[];
 </script>
 
 <style lang="scss">
@@ -53,11 +53,7 @@
 <ul {id} class={className} {...props}>
     {#each buttons as button}
         <li>
-            {#if Array.isArray(button)}
-                <svelte:self buttons={button} />
-            {:else}
-                <svelte:component this={button.component} {...button} />
-            {/if}
+            <svelte:component this={button.component} {...button} />
         </li>
     {/each}
 </ul>
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 20dac37a7..19895d124 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -13,16 +13,15 @@
 </script>
 
 <script lang="typescript">
-    import type { SvelteComponent } from "svelte";
     import type { Readable } from "svelte/store";
+    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
     import { setContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
 
     import ButtonGroup from "./ButtonGroup.svelte";
-    import type { Buttons } from "./types";
 
-    export let buttons: Readable<Buttons>;
-    export let menus: Readable<SvelteComponent[]>;
+    export let buttons: Readable<DynamicSvelteComponent[]>;
+    export let menus: Readable<DynamicSvelteComponent[]>;
 
     $: _buttons = $buttons;
     $: _menus = $menus;
diff --git a/ts/editor-toolbar/WithDropdownMenu.d.ts b/ts/editor-toolbar/WithDropdownMenu.d.ts
index 44d6adf22..ecdb702a7 100644
--- a/ts/editor-toolbar/WithDropdownMenu.d.ts
+++ b/ts/editor-toolbar/WithDropdownMenu.d.ts
@@ -1,6 +1,6 @@
-import type { ButtonDefinition } from "./types";
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
 export interface WithDropdownMenuProps {
-    button: ButtonDefinition;
+    button: DynamicSvelteComponent;
     menuId: string;
 }
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/editor-toolbar/WithDropdownMenu.svelte
index 3ae27f060..caa8b8d90 100644
--- a/ts/editor-toolbar/WithDropdownMenu.svelte
+++ b/ts/editor-toolbar/WithDropdownMenu.svelte
@@ -1,10 +1,10 @@
 <script lang="typescript">
-    import type { ButtonDefinition } from "./types";
+    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
-    export let button: ButtonDefinition;
+    export let button: DynamicSvelteComponent;
     export let menuId: string;
 
-    function extend({ className, props, ...rest }: ButtonDefinition): ButtonDefinition {
+    function extend({ className, props, ...rest }: DynamicSvelteComponent): DynamicSvelteComponent {
         return {
             className: `${className} dropdown-toggle`,
             props: {
diff --git a/ts/editor-toolbar/types.d.ts b/ts/editor-toolbar/types.d.ts
deleted file mode 100644
index 871b4d461..000000000
--- a/ts/editor-toolbar/types.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
-
-export interface ButtonDefinition extends DynamicSvelteComponent {
-    id?: string;
-    className?: string;
-}
-
-export type Buttons = ButtonDefinition | Buttons[];

From 4c273caedbc8a3dc518a1515ee88dee4beebdf40 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 18:57:20 +0200
Subject: [PATCH 53/97] Remove props property in favor of $$restProps

---
 ts/editor-toolbar/ButtonDropdown.svelte    |  3 +--
 ts/editor-toolbar/ButtonGroup.svelte       |  3 +--
 ts/editor-toolbar/ColorPicker.svelte       |  3 +--
 ts/editor-toolbar/CommandIconButton.svelte |  3 +--
 ts/editor-toolbar/DropdownItem.svelte      |  3 +--
 ts/editor-toolbar/IconButton.svelte        |  3 +--
 ts/editor-toolbar/LabelButton.svelte       |  7 +++----
 ts/editor-toolbar/SelectButton.svelte      |  5 ++---
 ts/editor-toolbar/SquareButton.svelte      |  3 +--
 ts/editor-toolbar/WithDropdownMenu.svelte  | 12 ++++++------
 10 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte
index cbae8a69b..0bd366887 100644
--- a/ts/editor-toolbar/ButtonDropdown.svelte
+++ b/ts/editor-toolbar/ButtonDropdown.svelte
@@ -4,7 +4,6 @@
 
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
 
     function extendClassName(className: string): string {
         return `dropdown-menu bg-transparent border-0 ${className}`;
@@ -13,4 +12,4 @@
     export let buttons: DynamicSvelteComponent[];
 </script>
 
-<ButtonGroup {id} className={extendClassName(className)} {props} {buttons} />
+<ButtonGroup {id} className={extendClassName(className)} {buttons} {...$$restProps} />
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 73a5d62e5..a73e2dacc 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -3,7 +3,6 @@
 
     export let id;
     export let className = "";
-    export let props: Record<string, string> = {};
 
     export let buttons: DynamicSvelteComponent[];
 </script>
@@ -50,7 +49,7 @@
     }
 </style>
 
-<ul {id} class={className} {...props}>
+<ul {id} class={className} {...$$restProps}>
     {#each buttons as button}
         <li>
             <svelte:component this={button.component} {...button} />
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index ceae957ac..703a4f160 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -1,7 +1,6 @@
 <script lang="typescript">
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
     export let tooltip: string;
 
     export let onChange: (event: Event) => void;
@@ -46,8 +45,8 @@
     tabindex="-1"
     {id}
     class={className}
-    {...props}
     title={tooltip}
+    {...$$restProps}
     on:mousedown|preventDefault>
     <span> <input type="color" on:change={onChange} /> </span>
 </button>
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 6022d40d1..47294d329 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -38,7 +38,6 @@
 
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
     export let tooltip: string;
 
     export let icon;
@@ -62,6 +61,6 @@
     }
 </script>
 
-<SquareButton {id} {className} {props} {tooltip} {active} {onClick} on:mount>
+<SquareButton {id} {className} {tooltip} {active} {onClick} {...$$restProps} on:mount>
     {@html icon}
 </SquareButton>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index 7563d3983..4ef761234 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -1,7 +1,6 @@
 <script lang="typescript">
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
     export let tooltip: string;
 
     export let onClick: (event: MouseEvent) => void;
@@ -12,8 +11,8 @@
 <button
     {id}
     class={`dropdown-item ${className}`}
-    {...props}
     title={tooltip}
+    {...$$restProps}
     on:click={onClick}
     on:mousedown|preventDefault>
     <span class="float-start">{label}</span>
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index 5a3b3aa4a..db2be921b 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -3,13 +3,12 @@
 
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
     export let tooltip: string;
 
     export let icon = "";
     export let onClick: (event: MouseEvent) => void;
 </script>
 
-<SquareButton {id} {className} {props} {tooltip} {onClick} on:mount>
+<SquareButton {id} {className} {tooltip} {onClick} {...$$restProps} on:mount>
     {@html icon}
 </SquareButton>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 862b2c9ba..c9f1be802 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -4,7 +4,6 @@
 
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
 
     export let label: string;
     export let tooltip: string;
@@ -57,9 +56,9 @@
     disabled={_disabled}
     {id}
     class={extendClassName(className)}
-    {...props}
+    title={tooltip}
+    {...$$restProps}
     on:click={onClick}
-    on:mousedown|preventDefault
-    title={tooltip}>
+    on:mousedown|preventDefault>
     {label}
 </button>
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index 68b63ef9e..8ec4bcbd1 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -11,7 +11,6 @@
 
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
     export let tooltip: string;
 
     function extendClassName(classes: string) {
@@ -59,8 +58,8 @@
     disabled={_disabled}
     {id}
     class={extendClassName(className)}
-    {...props}
-    title={tooltip}>
+    title={tooltip}
+    {...$$restProps}>
     {#each options as option}
         <SelectOption {...option} />
     {/each}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index a7f58896a..94ce9b731 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -5,7 +5,6 @@
 
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
     export let tooltip: string;
 
     export let onClick: (event: MouseEvent) => void;
@@ -85,11 +84,11 @@
     bind:this={buttonRef}
     {id}
     class={className}
-    {...props}
     title={tooltip}
     class:active
     tabindex="-1"
     disabled={_disabled}
+    {...$$restProps}
     on:click={onClick}
     on:mousedown|preventDefault>
     <span class="p-1"><slot /></span>
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/editor-toolbar/WithDropdownMenu.svelte
index caa8b8d90..8e9f7f40f 100644
--- a/ts/editor-toolbar/WithDropdownMenu.svelte
+++ b/ts/editor-toolbar/WithDropdownMenu.svelte
@@ -4,14 +4,14 @@
     export let button: DynamicSvelteComponent;
     export let menuId: string;
 
-    function extend({ className, props, ...rest }: DynamicSvelteComponent): DynamicSvelteComponent {
+    function extend({
+        className,
+        ...rest
+    }: DynamicSvelteComponent): DynamicSvelteComponent {
         return {
             className: `${className} dropdown-toggle`,
-            props: {
-                "data-bs-toggle": "dropdown",
-                "aria-expanded": "false",
-                ...props,
-            },
+            "data-bs-toggle": "dropdown",
+            "aria-expanded": "false",
             ...rest,
         };
     }

From cbf72c0f0566c9172e8932d0aa0fc6d77bc590aa Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 22:11:50 +0200
Subject: [PATCH 54/97] Make buttons and button groups easily toggleable
 through hidden web component

---
 ts/editor-toolbar/BUILD.bazel        |   3 +-
 ts/editor-toolbar/ButtonGroup.svelte |  20 ++++--
 ts/editor-toolbar/format.ts          |   2 +-
 ts/editor-toolbar/index.ts           | 101 +++++++++++++++++++++++++++
 ts/editor-toolbar/template.ts        |   1 +
 5 files changed, 121 insertions(+), 6 deletions(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index cc85ac419..e0c48b00e 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -28,6 +28,7 @@ ts_library(
         "EditorToolbar",
         "lib",
         "//ts/lib",
+        "//ts/sveltelib",
         "@npm//svelte",
         "@npm//svelte2tsx",
     ],
@@ -40,9 +41,9 @@ ts_library(
         exclude = ["index.ts"],
     ),
     deps = [
-        "//ts/sveltelib",
         "//ts/lib",
         "//ts/lib:backend_proto",
+        "//ts/sveltelib",
         "//ts:image_module_support",
         "@npm//svelte",
     ],
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index a73e2dacc..23c0d0179 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,10 +1,20 @@
 <script lang="typescript">
     import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
+    interface Hidden {
+        hidden: boolean;
+    }
+
     export let id;
     export let className = "";
+    export let buttons: DynamicSvelteComponent<Hidden>[];
 
-    export let buttons: DynamicSvelteComponent[];
+    function filterHidden({
+        hidden,
+        ...props
+    }: DynamicSvelteComponent & Hidden): DynamicSvelteComponent {
+        return props;
+    }
 </script>
 
 <style lang="scss">
@@ -51,8 +61,10 @@
 
 <ul {id} class={className} {...$$restProps}>
     {#each buttons as button}
-        <li>
-            <svelte:component this={button.component} {...button} />
-        </li>
+        {#if !button.hidden}
+            <li>
+                <svelte:component this={button.component} {...filterHidden(button)} />
+            </li>
+        {/if}
     {/each}
 </ul>
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index 52a61060a..1a3fa55a2 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -79,7 +79,7 @@ const removeFormatButton = commandIconButton<CommandIconButtonProps, "tooltip">(
 const buttonGroup = dynamicComponent(ButtonGroup);
 export const formatGroup = buttonGroup<ButtonGroupProps>(
     {
-        id: "color",
+        id: "format",
         buttons: [
             boldButton,
             italicButton,
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 26111f135..9ac3dac7e 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -1,4 +1,9 @@
 import type { SvelteComponent } from "svelte";
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+
+import type ButtonGroup from "./ButtonGroup.svelte";
+import type { ButtonGroupProps } from "./ButtonGroup";
+
 import { writable } from "svelte/store";
 
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
@@ -18,6 +23,31 @@ export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
 const defaultButtons = [notetypeGroup, formatGroup, colorGroup, templateGroup];
 const defaultMenus = [...templateMenus];
 
+interface Hideable {
+    hidden?: boolean;
+}
+
+function searchByIdOrIndex<T extends { id?: string }>(
+    values: T[],
+    idOrIndex: string | number
+): T | undefined {
+    return typeof idOrIndex === "string"
+        ? values.find((value) => value.id === idOrIndex)
+        : values[idOrIndex];
+}
+
+function hideComponent(component: Hideable) {
+    component.hidden = false;
+}
+
+function showComponent(component: Hideable) {
+    component.hidden = true;
+}
+
+function toggleComponent(component: Hideable) {
+    component.hidden = !component.hidden;
+}
+
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;
 
@@ -36,6 +66,77 @@ class EditorToolbar extends HTMLElement {
             });
         });
     }
+
+    updateButtonGroup<T>(
+        update: (component: DynamicSvelteComponent<typeof ButtonGroup> & T) => void,
+        group: string | number
+    ): void {
+        this.buttons.update(
+            (
+                buttonGroups: (DynamicSvelteComponent<typeof ButtonGroup> &
+                    ButtonGroupProps)[]
+            ) => {
+                const foundGroup = searchByIdOrIndex(buttonGroups, group);
+
+                if (foundGroup) {
+                    update(
+                        foundGroup as DynamicSvelteComponent<typeof ButtonGroup> &
+                            ButtonGroupProps &
+                            T
+                    );
+                }
+
+                return buttonGroups;
+            }
+        );
+    }
+
+    showButtonGroup(group: string | number): void {
+        this.updateButtonGroup<Hideable>(showComponent, group);
+    }
+
+    hideButtonGroup(group: string | number): void {
+        this.updateButtonGroup<Hideable>(hideComponent, group);
+    }
+
+    toggleButtonGroup(group: string | number): void {
+        this.updateButtonGroup<Hideable>(toggleComponent, group);
+    }
+
+    updateButton<T>(
+        update: (component: DynamicSvelteComponent & T) => void,
+        group: string | number,
+        button: string | number
+    ): void {
+        this.updateButtonGroup(
+            (
+                foundGroup: DynamicSvelteComponent<typeof ButtonGroup> &
+                    ButtonGroupProps
+            ) => {
+                const foundButton = searchByIdOrIndex(
+                    foundGroup.buttons as (DynamicSvelteComponent & { id?: string })[],
+                    button
+                );
+
+                if (foundButton) {
+                    update(foundButton as DynamicSvelteComponent & T);
+                }
+            },
+            group
+        );
+    }
+
+    showButton(group: string | number, button: string | number): void {
+        this.updateButton<Hideable>(showComponent, group, button);
+    }
+
+    hideButton(group: string | number, button: string | number): void {
+        this.updateButton<Hideable>(hideComponent, group, button);
+    }
+
+    toggleButton(group: string | number, button: string | number): void {
+        this.updateButton<Hideable>(toggleComponent, group, button);
+    }
 }
 
 customElements.define("anki-editor-toolbar", EditorToolbar);
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index 6e0ff81dd..cecb7337f 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -60,6 +60,7 @@ const recordButton = iconButton(
 
 const clozeButton = iconButton<IconButtonProps, "tooltip">(
     {
+        id: "cloze",
         icon: bracketsIcon,
         onClick: onCloze,
     },

From fe4ba874903769ae0fd4007953a11c3dabe8f484 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 23:08:36 +0200
Subject: [PATCH 55/97] Move cloze logic and wrapping logic editor-toolbar

---
 ts/editor-toolbar/cloze.ts    | 46 +++++++++++++++++++++++++++++++++++
 ts/editor-toolbar/template.ts | 27 ++++++--------------
 2 files changed, 54 insertions(+), 19 deletions(-)
 create mode 100644 ts/editor-toolbar/cloze.ts

diff --git a/ts/editor-toolbar/cloze.ts b/ts/editor-toolbar/cloze.ts
new file mode 100644
index 000000000..5fe0f55f7
--- /dev/null
+++ b/ts/editor-toolbar/cloze.ts
@@ -0,0 +1,46 @@
+import IconButton from "./IconButton.svelte";
+import type { IconButtonProps } from "./IconButton";
+
+import { dynamicComponent } from "sveltelib/dynamicComponent";
+import * as tr from "anki/i18n";
+
+import bracketsIcon from "./code-brackets.svg";
+
+const clozePattern = /\{\{c(\d+)::/gu;
+function getCurrentHighestCloze(increment: boolean): number {
+    let highest = 0;
+
+    // @ts-expect-error
+    forEditorField([], (field) => {
+        const matches = field.editingArea.editable.fieldHTML.matchAll(clozePattern);
+        highest = Math.max(
+            highest,
+            ...[...matches].map((match: RegExpMatchArray): number => Number(match[1]))
+        );
+    });
+
+    if (increment) {
+        highest++;
+    }
+
+    return Math.max(1, highest);
+}
+
+function onCloze(event: MouseEvent): void {
+    const highestCloze = getCurrentHighestCloze(!event.altKey);
+
+    // @ts-expect-error
+    wrap(`{{c${highestCloze}::`, "}}");
+}
+
+const iconButton = dynamicComponent(IconButton);
+export const clozeButton = iconButton<IconButtonProps, "tooltip">(
+    {
+        id: "cloze",
+        icon: bracketsIcon,
+        onClick: onCloze,
+    },
+    {
+        tooltip: tr.editingClozeDeletionCtrlandshiftandc,
+    }
+);
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index cecb7337f..2fae678d7 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -15,10 +15,11 @@ import * as tr from "anki/i18n";
 
 import paperclipIcon from "./paperclip.svg";
 import micIcon from "./mic.svg";
-import bracketsIcon from "./code-brackets.svg";
 import functionIcon from "./function-variant.svg";
 import xmlIcon from "./xml.svg";
 
+import { clozeButton } from "./cloze";
+
 function onAttachment(): void {
     bridgeCommand("attach");
 }
@@ -27,10 +28,6 @@ function onRecord(): void {
     bridgeCommand("record");
 }
 
-function onCloze(): void {
-    bridgeCommand("cloze");
-}
-
 function onHtmlEdit(): void {
     bridgeCommand("htmlEdit");
 }
@@ -58,17 +55,6 @@ const recordButton = iconButton(
     }
 );
 
-const clozeButton = iconButton<IconButtonProps, "tooltip">(
-    {
-        id: "cloze",
-        icon: bracketsIcon,
-        onClick: onCloze,
-    },
-    {
-        tooltip: tr.editingClozeDeletionCtrlandshiftandc,
-    }
-);
-
 const mathjaxButton = iconButton<Omit<IconButtonProps, "onClick" | "tooltip">>(
     {
         icon: functionIcon,
@@ -84,7 +70,8 @@ const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
         menuItems: [
             dropdownItem<DropdownItemProps, "label">(
                 {
-                    onClick: () => bridgeCommand("mathjaxInline"),
+                    // @ts-expect-error
+                    onClick: () => wrap("\\(", "\\)"),
                     tooltip: "test",
                     endLabel: "test",
                 },
@@ -92,7 +79,8 @@ const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
             ),
             dropdownItem<DropdownItemProps, "label">(
                 {
-                    onClick: () => bridgeCommand("mathjaxBlock"),
+                    // @ts-expect-error
+                    onClick: () => wrap("\\[", "\\]"),
                     tooltip: "test",
                     endLabel: "test",
                 },
@@ -100,7 +88,8 @@ const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
             ),
             dropdownItem<DropdownItemProps, "label">(
                 {
-                    onClick: () => bridgeCommand("mathjaxChemistry"),
+                    // @ts-expect-error
+                    onClick: () => wrap("\\(\\ce{", "}\\)"),
                     tooltip: "test",
                     endLabel: "test",
                 },

From eceb98f8e69bb09bcd2eb93339b2f82360dafc91 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 23:17:11 +0200
Subject: [PATCH 56/97] Show/Hide Cloze button depending on whether cloze type

---
 qt/aqt/editor.py           | 10 ++++++++++
 ts/editor-toolbar/index.ts |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 0cbb8059e..5e9b3c833 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -1351,3 +1351,13 @@ gui_hooks.editor_will_use_font_for_field.append(fontMungeHack)
 gui_hooks.editor_will_munge_html.append(munge_html)
 gui_hooks.editor_will_munge_html.append(remove_null_bytes)
 gui_hooks.editor_will_munge_html.append(reverse_url_quoting)
+
+
+def set_cloze_button(editor: Editor) -> None:
+    if editor.note.model()["type"] == MODEL_CLOZE:
+        editor.web.eval('document.getElementById("editorToolbar").showButton("template", "cloze"); ')
+    else:
+        editor.web.eval('document.getElementById("editorToolbar").hideButton("template", "cloze"); ')
+
+
+gui_hooks.editor_did_load_note.append(set_cloze_button)
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 9ac3dac7e..8f9696808 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -36,11 +36,11 @@ function searchByIdOrIndex<T extends { id?: string }>(
         : values[idOrIndex];
 }
 
-function hideComponent(component: Hideable) {
+function showComponent(component: Hideable) {
     component.hidden = false;
 }
 
-function showComponent(component: Hideable) {
+function hideComponent(component: Hideable) {
     component.hidden = true;
 }
 

From 8fd21661b4ce180cbf54d9214bdb36fb1c6a3a24 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Apr 2021 23:25:13 +0200
Subject: [PATCH 57/97] Fix sticky toolbar which was broken when introducing
 var(--toolbar-size)

---
 ts/editor-toolbar/EditorToolbar.svelte | 27 ++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 19895d124..0bb9a4caf 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -27,11 +27,16 @@
     $: _menus = $menus;
 
     export let nightMode: boolean;
-    export let size: number = 30;
-    export let wraps: boolean = true;
 
     setContext(nightModeKey, nightMode);
     setContext(disabledKey, disabled);
+
+    export let size: number = 30;
+    export let wraps: boolean = true;
+
+    $: style = `--toolbar-size: ${size}px; --toolbar-wrap: ${
+        wraps ? "wrap" : "nowrap"
+    }`;
 </script>
 
 <style lang="scss">
@@ -57,14 +62,12 @@
     }
 </style>
 
-<div style={`--toolbar-size: ${size}px; --toolbar-wrap: ${wraps ? 'wrap' : 'nowrap'}`}>
-    <div>
-        {#each _menus as menu}
-            <svelte:component this={menu.component} {...menu} />
-        {/each}
-    </div>
-
-    <nav>
-        <ButtonGroup buttons={_buttons} />
-    </nav>
+<div {style}>
+    {#each _menus as menu}
+        <svelte:component this={menu.component} {...menu} />
+    {/each}
 </div>
+
+<nav {style}>
+    <ButtonGroup buttons={_buttons} />
+</nav>

From d6ad5084f1e44c602838c33fd6b94b709da2e49a Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 9 Apr 2021 00:51:20 +0200
Subject: [PATCH 58/97] Add a button / buttonGroup insertion API

---
 ts/editor-toolbar/identifiable.ts | 50 ++++++++++++++++
 ts/editor-toolbar/index.ts        | 97 +++++++++++++++++++++++++------
 2 files changed, 128 insertions(+), 19 deletions(-)
 create mode 100644 ts/editor-toolbar/identifiable.ts

diff --git a/ts/editor-toolbar/identifiable.ts b/ts/editor-toolbar/identifiable.ts
new file mode 100644
index 000000000..b57f8a3cd
--- /dev/null
+++ b/ts/editor-toolbar/identifiable.ts
@@ -0,0 +1,50 @@
+export interface Identifiable {
+    id?: string;
+}
+
+function normalize<T extends Identifiable>(
+    values: T[],
+    idOrIndex: string | number
+): number {
+    const normalizedIndex =
+        typeof idOrIndex === "string"
+            ? values.findIndex((value) => value.id === idOrIndex)
+            : idOrIndex >= 0
+            ? idOrIndex
+            : values.length + idOrIndex;
+
+    return normalizedIndex >= values.length ? -1 : normalizedIndex;
+}
+
+export function search<T extends Identifiable>(
+    values: T[],
+    idOrIndex: string | number
+): T | null {
+    const index = normalize(values, idOrIndex);
+
+    return index >= 0 ? values[index] : null;
+}
+
+export function insert<T extends Identifiable>(
+    values: T[],
+    value: T,
+    idOrIndex: string | number
+): T[] {
+    const index = normalize(values, idOrIndex);
+
+    return index >= 0
+        ? [...values.slice(0, index), value, ...values.slice(index)]
+        : values;
+}
+
+export function add<T extends Identifiable>(
+    values: T[],
+    value: T,
+    idOrIndex: string | number
+): T[] {
+    const index = normalize(values, idOrIndex);
+
+    return index >= 0
+        ? [...values.slice(0, index + 1), value, ...values.slice(index + 1)]
+        : values;
+}
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 8f9696808..188c0dd86 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -1,9 +1,10 @@
 import type { SvelteComponent } from "svelte";
 import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
-import type ButtonGroup from "./ButtonGroup.svelte";
+import ButtonGroup from "./ButtonGroup.svelte";
 import type { ButtonGroupProps } from "./ButtonGroup";
 
+import { dynamicComponent } from "sveltelib/dynamicComponent";
 import { writable } from "svelte/store";
 
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
@@ -16,26 +17,12 @@ import { formatGroup } from "./format";
 import { colorGroup } from "./color";
 import { templateGroup, templateMenus } from "./template";
 
-// @ts-expect-error
-export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
-export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
-
-const defaultButtons = [notetypeGroup, formatGroup, colorGroup, templateGroup];
-const defaultMenus = [...templateMenus];
+import { Identifiable, search, add, insert } from "./identifiable";
 
 interface Hideable {
     hidden?: boolean;
 }
 
-function searchByIdOrIndex<T extends { id?: string }>(
-    values: T[],
-    idOrIndex: string | number
-): T | undefined {
-    return typeof idOrIndex === "string"
-        ? values.find((value) => value.id === idOrIndex)
-        : values[idOrIndex];
-}
-
 function showComponent(component: Hideable) {
     component.hidden = false;
 }
@@ -48,6 +35,9 @@ function toggleComponent(component: Hideable) {
     component.hidden = !component.hidden;
 }
 
+const defaultButtons = [notetypeGroup, formatGroup, colorGroup, templateGroup];
+const defaultMenus = [...templateMenus];
+
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;
 
@@ -76,7 +66,7 @@ class EditorToolbar extends HTMLElement {
                 buttonGroups: (DynamicSvelteComponent<typeof ButtonGroup> &
                     ButtonGroupProps)[]
             ) => {
-                const foundGroup = searchByIdOrIndex(buttonGroups, group);
+                const foundGroup = search(buttonGroups, group);
 
                 if (foundGroup) {
                     update(
@@ -103,6 +93,32 @@ class EditorToolbar extends HTMLElement {
         this.updateButtonGroup<Hideable>(toggleComponent, group);
     }
 
+    insertButtonGroup(newGroup: ButtonGroupProps, group: string | number = 0) {
+        const buttonGroup = dynamicComponent(ButtonGroup);
+        this.buttons.update(
+            (
+                buttonGroups: (DynamicSvelteComponent<typeof ButtonGroup> &
+                    ButtonGroupProps)[]
+            ) => {
+                const newButtonGroup = buttonGroup<ButtonGroupProps>(newGroup, {});
+                return insert(buttonGroups, newButtonGroup, group);
+            }
+        );
+    }
+
+    addButtonGroup(newGroup: ButtonGroupProps, group: string | number = -1) {
+        const buttonGroup = dynamicComponent(ButtonGroup);
+        this.buttons.update(
+            (
+                buttonGroups: (DynamicSvelteComponent<typeof ButtonGroup> &
+                    ButtonGroupProps)[]
+            ) => {
+                const newButtonGroup = buttonGroup<ButtonGroupProps>(newGroup, {});
+                return add(buttonGroups, newButtonGroup, group);
+            }
+        );
+    }
+
     updateButton<T>(
         update: (component: DynamicSvelteComponent & T) => void,
         group: string | number,
@@ -113,8 +129,8 @@ class EditorToolbar extends HTMLElement {
                 foundGroup: DynamicSvelteComponent<typeof ButtonGroup> &
                     ButtonGroupProps
             ) => {
-                const foundButton = searchByIdOrIndex(
-                    foundGroup.buttons as (DynamicSvelteComponent & { id?: string })[],
+                const foundButton = search(
+                    foundGroup.buttons as (DynamicSvelteComponent & Identifiable)[],
                     button
                 );
 
@@ -137,10 +153,53 @@ class EditorToolbar extends HTMLElement {
     toggleButton(group: string | number, button: string | number): void {
         this.updateButton<Hideable>(toggleComponent, group, button);
     }
+
+    insertButton(
+        newButton: DynamicSvelteComponent & Identifiable,
+        group: string | number,
+        button: string | number = 0
+    ) {
+        this.updateButtonGroup(
+            (
+                component: DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps
+            ) => {
+                component.buttons = insert(
+                    component.buttons as (DynamicSvelteComponent & Identifiable)[],
+                    newButton,
+                    button
+                );
+            },
+            group
+        );
+    }
+
+    addButton(
+        newButton: DynamicSvelteComponent & Identifiable,
+        group: string | number,
+        button: string | number = -1
+    ) {
+        this.updateButtonGroup(
+            (
+                component: DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps
+            ) => {
+                component.buttons = add(
+                    component.buttons as (DynamicSvelteComponent & Identifiable)[],
+                    newButton,
+                    button
+                );
+            },
+            group
+        );
+    }
 }
 
 customElements.define("anki-editor-toolbar", EditorToolbar);
 
+/* Exports for editor
+ * @ts-expect-error */
+export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
+export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
+
 /* Exports for add-ons */
 export { default as LabelButton } from "./LabelButton.svelte";
 export { default as IconButton } from "./IconButton.svelte";

From b364ae5542650ac417b01a880c73c502d1df01db Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 9 Apr 2021 18:42:41 +0200
Subject: [PATCH 59/97] Switch from lazy loading of properties to wrapping the
 buttons in a function

---
 ts/editor-toolbar/cloze.ts       |  15 ++-
 ts/editor-toolbar/color.ts       |  36 +++-----
 ts/editor-toolbar/format.ts      |  76 ++++++----------
 ts/editor-toolbar/index.ts       | 148 +++++++++++++-----------------
 ts/editor-toolbar/notetype.ts    |  38 +++-----
 ts/editor-toolbar/template.ts    | 152 ++++++++++++++-----------------
 ts/sveltelib/dynamicComponent.ts |  27 ++----
 7 files changed, 200 insertions(+), 292 deletions(-)

diff --git a/ts/editor-toolbar/cloze.ts b/ts/editor-toolbar/cloze.ts
index 5fe0f55f7..76f5925a9 100644
--- a/ts/editor-toolbar/cloze.ts
+++ b/ts/editor-toolbar/cloze.ts
@@ -33,14 +33,13 @@ function onCloze(event: MouseEvent): void {
     wrap(`{{c${highestCloze}::`, "}}");
 }
 
-const iconButton = dynamicComponent(IconButton);
-export const clozeButton = iconButton<IconButtonProps, "tooltip">(
-    {
+const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButton);
+
+export function getClozeButton() {
+    return iconButton({
         id: "cloze",
         icon: bracketsIcon,
         onClick: onCloze,
-    },
-    {
-        tooltip: tr.editingClozeDeletionCtrlandshiftandc,
-    }
-);
+        tooltip: tr.editingClozeDeletionCtrlandshiftandc(),
+    });
+}
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index 35f52cf0e..85681c7a6 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -25,35 +25,27 @@ function wrapWithForecolor(color: string): void {
     document.execCommand("forecolor", false, color);
 }
 
-const iconButton = dynamicComponent(IconButton);
-const forecolorButton = iconButton<IconButtonProps, "tooltip">(
-    {
+const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButton);
+const colorPicker = dynamicComponent<typeof ColorPicker, ColorPickerProps>(ColorPicker);
+const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
+
+export function getColorGroup() {
+    const forecolorButton = iconButton({
         icon: squareFillIcon,
         className: "forecolor",
         onClick: () => wrapWithForecolor(getForecolor()),
-    },
-    {
-        tooltip: tr.editingSetForegroundColourF7,
-    }
-);
+        tooltip: tr.editingSetForegroundColourF7(),
+    });
 
-const colorPicker = dynamicComponent(ColorPicker);
-const colorpickerButton = colorPicker<ColorPickerProps, "tooltip">(
-    {
+    const colorpickerButton = colorPicker({
         className: "rainbow",
         onChange: ({ currentTarget }) =>
             setForegroundColor((currentTarget as HTMLInputElement).value),
-    },
-    {
-        tooltip: tr.editingChangeColourF8,
-    }
-);
+        tooltip: tr.editingChangeColourF8(),
+    });
 
-const buttonGroup = dynamicComponent(ButtonGroup);
-export const colorGroup = buttonGroup<ButtonGroupProps>(
-    {
+    return buttonGroup({
         id: "color",
         buttons: [forecolorButton, colorpickerButton],
-    },
-    {}
-);
+    });
+}
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index 1a3fa55a2..2aeb8d4f6 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -13,72 +13,51 @@ import superscriptIcon from "./format-superscript.svg";
 import subscriptIcon from "./format-subscript.svg";
 import eraserIcon from "./eraser.svg";
 
-const commandIconButton = dynamicComponent(CommandIconButton);
+const commandIconButton = dynamicComponent<
+    typeof CommandIconButton,
+    CommandIconButtonProps
+>(CommandIconButton);
+const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
-const boldButton = commandIconButton<CommandIconButtonProps, "tooltip">(
-    {
+export function getFormatGroup() {
+    const boldButton = commandIconButton({
         icon: boldIcon,
         command: "bold",
-    },
-    {
-        tooltip: tr.editingBoldTextCtrlandb,
-    }
-);
+        tooltip: tr.editingBoldTextCtrlandb(),
+    });
 
-const italicButton = commandIconButton<CommandIconButtonProps, "tooltip">(
-    {
+    const italicButton = commandIconButton({
         icon: italicIcon,
         command: "italic",
-    },
-    {
-        tooltip: tr.editingItalicTextCtrlandi,
-    }
-);
+        tooltip: tr.editingItalicTextCtrlandi(),
+    });
 
-const underlineButton = commandIconButton<CommandIconButtonProps, "tooltip">(
-    {
+    const underlineButton = commandIconButton({
         icon: underlineIcon,
         command: "underline",
-    },
-    {
-        tooltip: tr.editingUnderlineTextCtrlandu,
-    }
-);
+        tooltip: tr.editingUnderlineTextCtrlandu(),
+    });
 
-const superscriptButton = commandIconButton<CommandIconButtonProps, "tooltip">(
-    {
+    const superscriptButton = commandIconButton({
         icon: superscriptIcon,
         command: "superscript",
-    },
-    {
-        tooltip: tr.editingSuperscriptCtrlandand,
-    }
-);
+        tooltip: tr.editingSuperscriptCtrlandand(),
+    });
 
-const subscriptButton = commandIconButton<CommandIconButtonProps, "tooltip">(
-    {
+    const subscriptButton = commandIconButton({
         icon: subscriptIcon,
         command: "subscript",
-    },
-    {
-        tooltip: tr.editingSubscriptCtrland,
-    }
-);
+        tooltip: tr.editingSubscriptCtrland(),
+    });
 
-const removeFormatButton = commandIconButton<CommandIconButtonProps, "tooltip">(
-    {
+    const removeFormatButton = commandIconButton({
         icon: eraserIcon,
         command: "removeFormat",
         activatable: false,
-    },
-    {
-        tooltip: tr.editingRemoveFormattingCtrlandr,
-    }
-);
+        tooltip: tr.editingRemoveFormattingCtrlandr(),
+    });
 
-const buttonGroup = dynamicComponent(ButtonGroup);
-export const formatGroup = buttonGroup<ButtonGroupProps>(
-    {
+    return buttonGroup({
         id: "format",
         buttons: [
             boldButton,
@@ -88,6 +67,5 @@ export const formatGroup = buttonGroup<ButtonGroupProps>(
             subscriptButton,
             removeFormatButton,
         ],
-    },
-    {}
-);
+    });
+}
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 188c0dd86..e61b904be 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -5,17 +5,17 @@ import ButtonGroup from "./ButtonGroup.svelte";
 import type { ButtonGroupProps } from "./ButtonGroup";
 
 import { dynamicComponent } from "sveltelib/dynamicComponent";
-import { writable } from "svelte/store";
+import { Writable, writable } from "svelte/store";
 
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
 import { checkNightMode } from "anki/nightmode";
 import { setupI18n, ModuleName } from "anki/i18n";
 
-import { notetypeGroup } from "./notetype";
-import { formatGroup } from "./format";
-import { colorGroup } from "./color";
-import { templateGroup, templateMenus } from "./template";
+import { getNotetypeGroup } from "./notetype";
+import { getFormatGroup } from "./format";
+import { getColorGroup } from "./color";
+import { getTemplateGroup, getTemplateMenus } from "./template";
 
 import { Identifiable, search, add, insert } from "./identifiable";
 
@@ -35,17 +35,26 @@ function toggleComponent(component: Hideable) {
     component.hidden = !component.hidden;
 }
 
-const defaultButtons = [notetypeGroup, formatGroup, colorGroup, templateGroup];
-const defaultMenus = [...templateMenus];
+const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;
 
-    buttons = writable(defaultButtons);
-    menus = writable(defaultMenus);
+    buttons?: Writable<
+        (DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps)[]
+    >;
+    menus?: Writable<DynamicSvelteComponent[]>;
 
     connectedCallback(): void {
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
+            this.buttons = writable([
+                getNotetypeGroup(),
+                getFormatGroup(),
+                getColorGroup(),
+                getTemplateGroup(),
+            ]);
+            this.menus = writable([...getTemplateMenus()]);
+
             this.component = new EditorToolbarSvelte({
                 target: this,
                 props: {
@@ -58,27 +67,24 @@ class EditorToolbar extends HTMLElement {
     }
 
     updateButtonGroup<T>(
-        update: (component: DynamicSvelteComponent<typeof ButtonGroup> & T) => void,
+        update: (
+            component: DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps & T
+        ) => void,
         group: string | number
     ): void {
-        this.buttons.update(
-            (
-                buttonGroups: (DynamicSvelteComponent<typeof ButtonGroup> &
-                    ButtonGroupProps)[]
-            ) => {
-                const foundGroup = search(buttonGroups, group);
+        this.buttons?.update((buttonGroups) => {
+            const foundGroup = search(buttonGroups, group);
 
-                if (foundGroup) {
-                    update(
-                        foundGroup as DynamicSvelteComponent<typeof ButtonGroup> &
-                            ButtonGroupProps &
-                            T
-                    );
-                }
-
-                return buttonGroups;
+            if (foundGroup) {
+                update(
+                    foundGroup as DynamicSvelteComponent<typeof ButtonGroup> &
+                        ButtonGroupProps &
+                        T
+                );
             }
-        );
+
+            return buttonGroups;
+        });
     }
 
     showButtonGroup(group: string | number): void {
@@ -94,29 +100,17 @@ class EditorToolbar extends HTMLElement {
     }
 
     insertButtonGroup(newGroup: ButtonGroupProps, group: string | number = 0) {
-        const buttonGroup = dynamicComponent(ButtonGroup);
-        this.buttons.update(
-            (
-                buttonGroups: (DynamicSvelteComponent<typeof ButtonGroup> &
-                    ButtonGroupProps)[]
-            ) => {
-                const newButtonGroup = buttonGroup<ButtonGroupProps>(newGroup, {});
-                return insert(buttonGroups, newButtonGroup, group);
-            }
-        );
+        this.buttons?.update((buttonGroups) => {
+            const newButtonGroup = buttonGroup(newGroup);
+            return insert(buttonGroups, newButtonGroup, group);
+        });
     }
 
     addButtonGroup(newGroup: ButtonGroupProps, group: string | number = -1) {
-        const buttonGroup = dynamicComponent(ButtonGroup);
-        this.buttons.update(
-            (
-                buttonGroups: (DynamicSvelteComponent<typeof ButtonGroup> &
-                    ButtonGroupProps)[]
-            ) => {
-                const newButtonGroup = buttonGroup<ButtonGroupProps>(newGroup, {});
-                return add(buttonGroups, newButtonGroup, group);
-            }
-        );
+        this.buttons?.update((buttonGroups) => {
+            const newButtonGroup = buttonGroup(newGroup);
+            return add(buttonGroups, newButtonGroup, group);
+        });
     }
 
     updateButton<T>(
@@ -124,22 +118,16 @@ class EditorToolbar extends HTMLElement {
         group: string | number,
         button: string | number
     ): void {
-        this.updateButtonGroup(
-            (
-                foundGroup: DynamicSvelteComponent<typeof ButtonGroup> &
-                    ButtonGroupProps
-            ) => {
-                const foundButton = search(
-                    foundGroup.buttons as (DynamicSvelteComponent & Identifiable)[],
-                    button
-                );
+        this.updateButtonGroup((foundGroup) => {
+            const foundButton = search(
+                foundGroup.buttons as (DynamicSvelteComponent & Identifiable)[],
+                button
+            );
 
-                if (foundButton) {
-                    update(foundButton as DynamicSvelteComponent & T);
-                }
-            },
-            group
-        );
+            if (foundButton) {
+                update(foundButton as DynamicSvelteComponent & T);
+            }
+        }, group);
     }
 
     showButton(group: string | number, button: string | number): void {
@@ -159,18 +147,13 @@ class EditorToolbar extends HTMLElement {
         group: string | number,
         button: string | number = 0
     ) {
-        this.updateButtonGroup(
-            (
-                component: DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps
-            ) => {
-                component.buttons = insert(
-                    component.buttons as (DynamicSvelteComponent & Identifiable)[],
-                    newButton,
-                    button
-                );
-            },
-            group
-        );
+        this.updateButtonGroup((component) => {
+            component.buttons = insert(
+                component.buttons as (DynamicSvelteComponent & Identifiable)[],
+                newButton,
+                button
+            );
+        }, group);
     }
 
     addButton(
@@ -178,18 +161,13 @@ class EditorToolbar extends HTMLElement {
         group: string | number,
         button: string | number = -1
     ) {
-        this.updateButtonGroup(
-            (
-                component: DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps
-            ) => {
-                component.buttons = add(
-                    component.buttons as (DynamicSvelteComponent & Identifiable)[],
-                    newButton,
-                    button
-                );
-            },
-            group
-        );
+        this.updateButtonGroup((component) => {
+            component.buttons = add(
+                component.buttons as (DynamicSvelteComponent & Identifiable)[],
+                newButton,
+                button
+            );
+        }, group);
     }
 }
 
diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts
index 32a0c5633..b78f1b56b 100644
--- a/ts/editor-toolbar/notetype.ts
+++ b/ts/editor-toolbar/notetype.ts
@@ -7,34 +7,26 @@ import { dynamicComponent } from "sveltelib/dynamicComponent";
 import { bridgeCommand } from "anki/bridgecommand";
 import * as tr from "anki/i18n";
 
-const labelButton = dynamicComponent(LabelButton);
-const fieldsButton = labelButton<LabelButtonProps, "label" | "tooltip">(
-    {
+const labelButton = dynamicComponent<typeof LabelButton, LabelButtonProps>(LabelButton);
+const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
+
+export function getNotetypeGroup() {
+    const fieldsButton = labelButton({
         onClick: () => bridgeCommand("fields"),
         disables: false,
-    },
-    {
-        label: () => `${tr.editingFields()}...`,
-        tooltip: tr.editingCustomizeFields,
-    }
-);
+        label: `${tr.editingFields()}...`,
+        tooltip: tr.editingCustomizeFields(),
+    });
 
-const cardsButton = labelButton<LabelButtonProps, "label" | "tooltip">(
-    {
+    const cardsButton = labelButton({
         onClick: () => bridgeCommand("cards"),
         disables: false,
-    },
-    {
-        label: () => `${tr.editingCards()}...`,
-        tooltip: tr.editingCustomizeCardTemplatesCtrlandl,
-    }
-);
+        label: `${tr.editingCards()}...`,
+        tooltip: tr.editingCustomizeCardTemplatesCtrlandl(),
+    });
 
-const buttonGroup = dynamicComponent(ButtonGroup);
-export const notetypeGroup = buttonGroup<ButtonGroupProps>(
-    {
+    return buttonGroup({
         id: "notetype",
         buttons: [fieldsButton, cardsButton],
-    },
-    {}
-);
+    });
+}
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index 2fae678d7..683b66c0b 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -18,7 +18,7 @@ import micIcon from "./mic.svg";
 import functionIcon from "./function-variant.svg";
 import xmlIcon from "./xml.svg";
 
-import { clozeButton } from "./cloze";
+import { getClozeButton } from "./cloze";
 
 function onAttachment(): void {
     bridgeCommand("attach");
@@ -32,105 +32,89 @@ function onHtmlEdit(): void {
     bridgeCommand("htmlEdit");
 }
 
-const iconButton = dynamicComponent(IconButton);
-
-const withDropdownMenu = dynamicComponent(WithDropdownMenu);
-const dropdownMenu = dynamicComponent(DropdownMenu);
-const dropdownItem = dynamicComponent(DropdownItem);
-
-const attachmentButton = iconButton<IconButtonProps, "tooltip">(
-    {
-        icon: paperclipIcon,
-        onClick: onAttachment,
-    },
-    {
-        tooltip: tr.editingAttachPicturesaudiovideoF3,
-    }
-);
-
-const recordButton = iconButton(
-    { icon: micIcon, onClick: onRecord },
-    {
-        tooltip: tr.editingRecordAudioF5,
-    }
-);
-
-const mathjaxButton = iconButton<Omit<IconButtonProps, "onClick" | "tooltip">>(
-    {
-        icon: functionIcon,
-    },
-    {}
-);
-
 const mathjaxMenuId = "mathjaxMenu";
 
-const mathjaxMenu = dropdownMenu<DropdownMenuProps>(
-    {
-        id: mathjaxMenuId,
-        menuItems: [
-            dropdownItem<DropdownItemProps, "label">(
-                {
-                    // @ts-expect-error
-                    onClick: () => wrap("\\(", "\\)"),
-                    tooltip: "test",
-                    endLabel: "test",
-                },
-                { label: tr.editingMathjaxInline }
-            ),
-            dropdownItem<DropdownItemProps, "label">(
-                {
-                    // @ts-expect-error
-                    onClick: () => wrap("\\[", "\\]"),
-                    tooltip: "test",
-                    endLabel: "test",
-                },
-                { label: tr.editingMathjaxBlock }
-            ),
-            dropdownItem<DropdownItemProps, "label">(
-                {
-                    // @ts-expect-error
-                    onClick: () => wrap("\\(\\ce{", "}\\)"),
-                    tooltip: "test",
-                    endLabel: "test",
-                },
-                { label: tr.editingMathjaxChemistry }
-            ),
-        ],
-    },
-    {}
+const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButton);
+const withDropdownMenu = dynamicComponent<
+    typeof WithDropdownMenu,
+    WithDropdownMenuProps
+>(WithDropdownMenu);
+const dropdownMenu = dynamicComponent<typeof DropdownMenu, DropdownMenuProps>(
+    DropdownMenu
 );
+const dropdownItem = dynamicComponent<typeof DropdownItem, DropdownItemProps>(
+    DropdownItem
+);
+const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
-const mathjaxButtonWithMenu = withDropdownMenu<WithDropdownMenuProps>(
-    {
+export function getTemplateGroup() {
+    const attachmentButton = iconButton({
+        icon: paperclipIcon,
+        onClick: onAttachment,
+        tooltip: tr.editingAttachPicturesaudiovideoF3(),
+    });
+
+    const recordButton = iconButton({
+        icon: micIcon,
+        onClick: onRecord,
+        tooltip: tr.editingRecordAudioF5(),
+    });
+
+    const mathjaxButton = iconButton({
+        icon: functionIcon,
+        foo: 5,
+    });
+
+    const mathjaxButtonWithMenu = withDropdownMenu({
         button: mathjaxButton,
         menuId: mathjaxMenuId,
-    },
-    {}
-);
+    });
 
-const htmlButton = iconButton<IconButtonProps, "tooltip">(
-    {
+    const htmlButton = iconButton({
         icon: xmlIcon,
         onClick: onHtmlEdit,
-    },
-    {
         tooltip: tr.editingHtmlEditor,
-    }
-);
+    });
 
-const buttonGroup = dynamicComponent(ButtonGroup);
-export const templateGroup = buttonGroup<ButtonGroupProps>(
-    {
+    return buttonGroup({
         id: "template",
         buttons: [
             attachmentButton,
             recordButton,
-            clozeButton,
+            getClozeButton(),
             mathjaxButtonWithMenu,
             htmlButton,
         ],
-    },
-    {}
-);
+    });
+}
 
-export const templateMenus = [mathjaxMenu];
+export function getTemplateMenus() {
+    const mathjaxMenu = dropdownMenu({
+        id: mathjaxMenuId,
+        menuItems: [
+            dropdownItem({
+                // @ts-expect-error
+                onClick: () => wrap("\\(", "\\)"),
+                tooltip: "test",
+                endLabel: "test",
+                label: tr.editingMathjaxInline(),
+            }),
+            dropdownItem({
+                // @ts-expect-error
+                onClick: () => wrap("\\[", "\\]"),
+                tooltip: "test",
+                endLabel: "test",
+                label: tr.editingMathjaxBlock(),
+            }),
+            dropdownItem({
+                // @ts-expect-error
+                onClick: () => wrap("\\(\\ce{", "}\\)"),
+                tooltip: "test",
+                endLabel: "test",
+                label: tr.editingMathjaxChemistry(),
+            }),
+        ],
+    });
+
+    return [mathjaxMenu];
+}
diff --git a/ts/sveltelib/dynamicComponent.ts b/ts/sveltelib/dynamicComponent.ts
index e3ac9c34f..0752f3004 100644
--- a/ts/sveltelib/dynamicComponent.ts
+++ b/ts/sveltelib/dynamicComponent.ts
@@ -6,26 +6,11 @@ export interface DynamicSvelteComponent<
     component: T;
 }
 
-export const dynamicComponent = <Comp extends typeof SvelteComponentDev>(
-    component: Comp
-) => <
-    Props extends NonNullable<ConstructorParameters<Comp>[0]["props"]>,
-    Lazy extends string = never
+export const dynamicComponent = <
+    Comp extends typeof SvelteComponentDev,
+    DefaultProps = NonNullable<ConstructorParameters<Comp>[0]["props"]>
 >(
-    props: Omit<Props, Lazy>,
-    lazyProps: {
-        [Property in keyof Pick<Props, Lazy>]: () => Pick<Props, Lazy>[Property];
-    }
-): DynamicSvelteComponent<Comp> & Props => {
-    const dynamicComponent = { component, ...props };
-
-    for (const property in lazyProps) {
-        const get = lazyProps[property];
-        const propertyDescriptor: TypedPropertyDescriptor<
-            Pick<Props, Lazy>[Extract<keyof Pick<Props, Lazy>, string>]
-        > = { get, enumerable: true };
-        Object.defineProperty(dynamicComponent, property, propertyDescriptor);
-    }
-
-    return dynamicComponent as DynamicSvelteComponent<Comp> & Props;
+    component: Comp
+) => <Props = DefaultProps>(props: Props): DynamicSvelteComponent<Comp> & Props => {
+    return { component, ...props };
 };

From 432e0a5079576788b59d0424abe444a30da6240c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 9 Apr 2021 18:59:57 +0200
Subject: [PATCH 60/97] Introduce ToolbarItem as a better base type instead of
 DynamicSvelteComponent

---
 ts/editor-toolbar/ButtonDropdown.svelte   |  4 +--
 ts/editor-toolbar/ButtonGroup.d.ts        |  4 +--
 ts/editor-toolbar/ButtonGroup.svelte      | 13 ++-----
 ts/editor-toolbar/DropdownMenu.d.ts       |  4 +--
 ts/editor-toolbar/EditorToolbar.svelte    |  6 ++--
 ts/editor-toolbar/WithDropdownMenu.d.ts   |  4 +--
 ts/editor-toolbar/WithDropdownMenu.svelte |  4 +--
 ts/editor-toolbar/index.ts                | 43 ++++++++++-------------
 ts/editor-toolbar/types.d.ts              |  8 +++++
 9 files changed, 42 insertions(+), 48 deletions(-)
 create mode 100644 ts/editor-toolbar/types.d.ts

diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte
index 0bd366887..ad050ce22 100644
--- a/ts/editor-toolbar/ButtonDropdown.svelte
+++ b/ts/editor-toolbar/ButtonDropdown.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+    import type { ToolbarItem } from "./types";
     import ButtonGroup from "./ButtonGroup.svelte";
 
     export let id = "";
@@ -9,7 +9,7 @@
         return `dropdown-menu bg-transparent border-0 ${className}`;
     }
 
-    export let buttons: DynamicSvelteComponent[];
+    export let buttons: ToolbarItem[];
 </script>
 
 <ButtonGroup {id} className={extendClassName(className)} {buttons} {...$$restProps} />
diff --git a/ts/editor-toolbar/ButtonGroup.d.ts b/ts/editor-toolbar/ButtonGroup.d.ts
index d4131ce9d..6a762eaa3 100644
--- a/ts/editor-toolbar/ButtonGroup.d.ts
+++ b/ts/editor-toolbar/ButtonGroup.d.ts
@@ -1,7 +1,7 @@
-import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+import type { ToolbarItem } from "./types";
 
 export interface ButtonGroupProps {
     id: string;
     className?: string;
-    buttons: DynamicSvelteComponent[];
+    buttons: ToolbarItem[];
 }
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 23c0d0179..fd6e38b19 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,18 +1,11 @@
 <script lang="typescript">
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
-
-    interface Hidden {
-        hidden: boolean;
-    }
+    import type { ToolbarItem } from "./types";
 
     export let id;
     export let className = "";
-    export let buttons: DynamicSvelteComponent<Hidden>[];
+    export let buttons: ToolbarItem[];
 
-    function filterHidden({
-        hidden,
-        ...props
-    }: DynamicSvelteComponent & Hidden): DynamicSvelteComponent {
+    function filterHidden({ hidden, ...props }) {
         return props;
     }
 </script>
diff --git a/ts/editor-toolbar/DropdownMenu.d.ts b/ts/editor-toolbar/DropdownMenu.d.ts
index 0961d680a..1805a3ba7 100644
--- a/ts/editor-toolbar/DropdownMenu.d.ts
+++ b/ts/editor-toolbar/DropdownMenu.d.ts
@@ -1,6 +1,6 @@
-import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+import type { ToolbarItem } from "./types";
 
 export interface DropdownMenuProps {
     id: string;
-    menuItems: DynamicSvelteComponent[];
+    menuItems: ToolbarItem[];
 }
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 0bb9a4caf..49e73d52f 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -14,14 +14,14 @@
 
 <script lang="typescript">
     import type { Readable } from "svelte/store";
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+    import type { ToolbarItem } from "./types";
     import { setContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
 
     import ButtonGroup from "./ButtonGroup.svelte";
 
-    export let buttons: Readable<DynamicSvelteComponent[]>;
-    export let menus: Readable<DynamicSvelteComponent[]>;
+    export let buttons: Readable<ToolbarItem[]>;
+    export let menus: Readable<ToolbarItem[]>;
 
     $: _buttons = $buttons;
     $: _menus = $menus;
diff --git a/ts/editor-toolbar/WithDropdownMenu.d.ts b/ts/editor-toolbar/WithDropdownMenu.d.ts
index ecdb702a7..fc5c3e928 100644
--- a/ts/editor-toolbar/WithDropdownMenu.d.ts
+++ b/ts/editor-toolbar/WithDropdownMenu.d.ts
@@ -1,6 +1,6 @@
-import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+import type { ToolbarItem } from "./types";
 
 export interface WithDropdownMenuProps {
-    button: DynamicSvelteComponent;
+    button: ToolbarItem;
     menuId: string;
 }
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/editor-toolbar/WithDropdownMenu.svelte
index 8e9f7f40f..a8d2abbae 100644
--- a/ts/editor-toolbar/WithDropdownMenu.svelte
+++ b/ts/editor-toolbar/WithDropdownMenu.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+    import type { ToolbarItem } from "./types";
 
-    export let button: DynamicSvelteComponent;
+    export let button: ToolbarItem;
     export let menuId: string;
 
     function extend({
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index e61b904be..e3b40d1b3 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -1,5 +1,5 @@
-import type { SvelteComponent } from "svelte";
-import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+import type { SvelteComponentDev } from "svelte/internal";
+import type { ToolbarItem } from "./types";
 
 import ButtonGroup from "./ButtonGroup.svelte";
 import type { ButtonGroupProps } from "./ButtonGroup";
@@ -38,12 +38,10 @@ function toggleComponent(component: Hideable) {
 const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
 class EditorToolbar extends HTMLElement {
-    component?: SvelteComponent;
+    component?: SvelteComponentDev;
 
-    buttons?: Writable<
-        (DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps)[]
-    >;
-    menus?: Writable<DynamicSvelteComponent[]>;
+    buttons?: Writable<(ToolbarItem<typeof ButtonGroup> & ButtonGroupProps)[]>;
+    menus?: Writable<ToolbarItem[]>;
 
     connectedCallback(): void {
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
@@ -68,7 +66,7 @@ class EditorToolbar extends HTMLElement {
 
     updateButtonGroup<T>(
         update: (
-            component: DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps & T
+            component: ToolbarItem<typeof ButtonGroup> & ButtonGroupProps & T
         ) => void,
         group: string | number
     ): void {
@@ -77,9 +75,7 @@ class EditorToolbar extends HTMLElement {
 
             if (foundGroup) {
                 update(
-                    foundGroup as DynamicSvelteComponent<typeof ButtonGroup> &
-                        ButtonGroupProps &
-                        T
+                    foundGroup as ToolbarItem<typeof ButtonGroup> & ButtonGroupProps & T
                 );
             }
 
@@ -113,43 +109,40 @@ class EditorToolbar extends HTMLElement {
         });
     }
 
-    updateButton<T>(
-        update: (component: DynamicSvelteComponent & T) => void,
+    updateButton(
+        update: (component: ToolbarItem) => void,
         group: string | number,
         button: string | number
     ): void {
         this.updateButtonGroup((foundGroup) => {
-            const foundButton = search(
-                foundGroup.buttons as (DynamicSvelteComponent & Identifiable)[],
-                button
-            );
+            const foundButton = search(foundGroup.buttons, button);
 
             if (foundButton) {
-                update(foundButton as DynamicSvelteComponent & T);
+                update(foundButton);
             }
         }, group);
     }
 
     showButton(group: string | number, button: string | number): void {
-        this.updateButton<Hideable>(showComponent, group, button);
+        this.updateButton(showComponent, group, button);
     }
 
     hideButton(group: string | number, button: string | number): void {
-        this.updateButton<Hideable>(hideComponent, group, button);
+        this.updateButton(hideComponent, group, button);
     }
 
     toggleButton(group: string | number, button: string | number): void {
-        this.updateButton<Hideable>(toggleComponent, group, button);
+        this.updateButton(toggleComponent, group, button);
     }
 
     insertButton(
-        newButton: DynamicSvelteComponent & Identifiable,
+        newButton: ToolbarItem & Identifiable,
         group: string | number,
         button: string | number = 0
     ) {
         this.updateButtonGroup((component) => {
             component.buttons = insert(
-                component.buttons as (DynamicSvelteComponent & Identifiable)[],
+                component.buttons as (ToolbarItem & Identifiable)[],
                 newButton,
                 button
             );
@@ -157,13 +150,13 @@ class EditorToolbar extends HTMLElement {
     }
 
     addButton(
-        newButton: DynamicSvelteComponent & Identifiable,
+        newButton: ToolbarItem & Identifiable,
         group: string | number,
         button: string | number = -1
     ) {
         this.updateButtonGroup((component) => {
             component.buttons = add(
-                component.buttons as (DynamicSvelteComponent & Identifiable)[],
+                component.buttons as (ToolbarItem & Identifiable)[],
                 newButton,
                 button
             );
diff --git a/ts/editor-toolbar/types.d.ts b/ts/editor-toolbar/types.d.ts
new file mode 100644
index 000000000..8b5e24218
--- /dev/null
+++ b/ts/editor-toolbar/types.d.ts
@@ -0,0 +1,8 @@
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+import type { SvelteComponentDev } from "svelte/internal";
+
+interface ToolbarItem<T extends typeof SvelteComponentDev = typeof SvelteComponentDev>
+    extends DynamicSvelteComponent<T> {
+    id?: string;
+    hidden?: boolean;
+}

From 920b740c8fd1e857413ae310a0314d2a0ca32ab5 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 9 Apr 2021 20:55:49 +0200
Subject: [PATCH 61/97] Add RawButton and hook old python hooks up to it

---
 qt/aqt/editor.py                       | 142 +++++++++----------------
 ts/editor-toolbar/BUILD.bazel          |   7 ++
 ts/editor-toolbar/EditorToolbar.svelte |   1 +
 ts/editor-toolbar/RawButton.svelte     |  10 ++
 ts/editor-toolbar/identifiable.ts      |   3 -
 ts/editor-toolbar/index.ts             |   1 +
 ts/editor-toolbar/legacy.scss          |  10 ++
 7 files changed, 77 insertions(+), 97 deletions(-)
 create mode 100644 ts/editor-toolbar/RawButton.svelte
 create mode 100644 ts/editor-toolbar/legacy.scss

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 5e9b3c833..97b416c1b 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -135,96 +135,6 @@ class Editor:
         self.web.set_bridge_command(self.onBridgeCmd, self)
         self.outerLayout.addWidget(self.web, 1)
 
-        lefttopbtns: List[str] = [
-            self._addButton(
-                None,
-                "fields",
-                tr.editing_customize_fields(),
-                f"{tr.editing_fields()}...",
-                disables=False,
-                rightside=False,
-            ),
-            self._addButton(
-                None,
-                "cards",
-                tr.editing_customize_card_templates_ctrlandl(),
-                f"{tr.editing_cards()}...",
-                disables=False,
-                rightside=False,
-            ),
-        ]
-
-        gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
-
-        righttopbtns: List[str] = [
-            self._addButton(
-                "text_bold", "bold", tr.editing_bold_text_ctrlandb(), id="bold"
-            ),
-            self._addButton(
-                "text_italic",
-                "italic",
-                tr.editing_italic_text_ctrlandi(),
-                id="italic",
-            ),
-            self._addButton(
-                "text_under",
-                "underline",
-                tr.editing_underline_text_ctrlandu(),
-                id="underline",
-            ),
-            self._addButton(
-                "text_super",
-                "super",
-                tr.editing_superscript_ctrlandand(),
-                id="superscript",
-            ),
-            self._addButton(
-                "text_sub", "sub", tr.editing_subscript_ctrland(), id="subscript"
-            ),
-            self._addButton(
-                "text_clear", "clear", tr.editing_remove_formatting_ctrlandr()
-            ),
-            self._addButton(
-                None,
-                "colour",
-                tr.editing_set_foreground_colour_f7(),
-                """
-<span id="forecolor" class="topbut rounded" style="background: #000"></span>
-""",
-            ),
-            self._addButton(
-                None,
-                "changeCol",
-                tr.editing_change_colour_f8(),
-                """
-<span class="topbut rounded rainbow"></span>
-""",
-            ),
-            self._addButton(
-                "text_cloze", "cloze", tr.editing_cloze_deletion_ctrlandshiftandc()
-            ),
-            self._addButton(
-                "paperclip", "attach", tr.editing_attach_picturesaudiovideo_f3()
-            ),
-            self._addButton("media-record", "record", tr.editing_record_audio_f5()),
-            self._addButton("more", "more"),
-        ]
-
-        gui_hooks.editor_did_init_buttons(righttopbtns, self)
-        # legacy filter
-        righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
-
-        topbuts = """
-            <div id="topbutsleft" class="topbuts">
-                %(leftbts)s
-            </div>
-            <div id="topbutsright" class="topbuts">
-                %(rightbts)s
-            </div>
-        """ % dict(
-            leftbts="".join(lefttopbtns),
-            rightbts="".join(righttopbtns),
-        )
         bgcol = self.mw.app.palette().window().color().name()  # type: ignore
         # then load page
         self.web.stdHtml(
@@ -242,7 +152,45 @@ class Editor:
             context=self,
             default_css=False,
         )
-        self.web.eval("preventButtonFocus();")
+
+        lefttopbtns: List[str] = []
+        gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
+
+        lefttopbtns_defs = [
+            f"$editorToolbar.addButton({{ component: editorToolbar.RawButton, html: `{button}` }}, 'notetype');"
+            for button in lefttopbtns
+        ]
+        lefttopbtns_js = "\n".join(lefttopbtns_defs)
+
+        righttopbtns: List[str] = []
+        gui_hooks.editor_did_init_buttons(righttopbtns, self)
+        # legacy filter
+        righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
+
+        righttopbtns_defs = "\n".join(
+            [
+                f"{{ component: editorToolbar.RawButton, html: `{button}` }},"
+                for button in righttopbtns
+            ]
+        )
+        righttopbtns_js = (
+            f"""
+$editorToolbar.addButtonGroup({{
+  id: "addons",
+  buttons: [ {righttopbtns_defs} ]
+}});
+"""
+            if righttopbtns_defs
+            else ""
+        )
+
+        self.web.eval(
+            f"""
+$editorToolbar = document.getElementById("editorToolbar");
+{lefttopbtns_js}
+{righttopbtns_js}
+"""
+        )
 
     # Top buttons
     ######################################################################
@@ -354,6 +302,7 @@ class Editor:
                         type="button"
                         title="{tip}"
                         onclick="pycmd('{cmd}');{togglesc}return false;"
+                        onmousedown="window.event.preventDefault();"
                 >
                     {imgelm}
                     {labelelm}
@@ -802,7 +751,8 @@ class Editor:
             self._wrapWithColour(self.fcolour)
 
     def _updateForegroundButton(self) -> None:
-        self.web.eval(f"setFGButton('{self.fcolour}')")
+        # self.web.eval(f"setFGButton('{self.fcolour}')")
+        pass
 
     def onColourChanged(self) -> None:
         self._updateForegroundButton()
@@ -1355,9 +1305,13 @@ gui_hooks.editor_will_munge_html.append(reverse_url_quoting)
 
 def set_cloze_button(editor: Editor) -> None:
     if editor.note.model()["type"] == MODEL_CLOZE:
-        editor.web.eval('document.getElementById("editorToolbar").showButton("template", "cloze"); ')
+        editor.web.eval(
+            'document.getElementById("editorToolbar").showButton("template", "cloze"); '
+        )
     else:
-        editor.web.eval('document.getElementById("editorToolbar").hideButton("template", "cloze"); ')
+        editor.web.eval(
+            'document.getElementById("editorToolbar").hideButton("template", "cloze"); '
+        )
 
 
 gui_hooks.editor_did_load_note.append(set_cloze_button)
diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index e0c48b00e..5f5f6afc2 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -21,6 +21,12 @@ sass_binary(
     visibility = ["//visibility:public"],
 )
 
+sass_binary(
+    name = "legacy_css",
+    src = "legacy.scss",
+    visibility = ["//visibility:public"],
+)
+
 ts_library(
     name = "index",
     srcs = ["index.ts"],
@@ -98,6 +104,7 @@ esbuild(
         "bootstrap-icons",
         "mdi-icons",
         ":color_css",
+        ":legacy_css",
     ] + svelte_names,
 )
 
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 49e73d52f..fef9bedd7 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,4 +1,5 @@
 <script context="module" lang="typescript">
+    import "./legacy.css";
     import { writable } from "svelte/store";
 
     const disabled = writable(false);
diff --git a/ts/editor-toolbar/RawButton.svelte b/ts/editor-toolbar/RawButton.svelte
new file mode 100644
index 000000000..89778431a
--- /dev/null
+++ b/ts/editor-toolbar/RawButton.svelte
@@ -0,0 +1,10 @@
+<script lang="typescript">
+    import { onMount, createEventDispatcher } from "svelte";
+
+    export let html: string;
+
+    const dispatch = createEventDispatcher();
+    onMount(() => dispatch("mount", { button: null }));
+</script>
+
+{@html html}
diff --git a/ts/editor-toolbar/identifiable.ts b/ts/editor-toolbar/identifiable.ts
index b57f8a3cd..93f054c2e 100644
--- a/ts/editor-toolbar/identifiable.ts
+++ b/ts/editor-toolbar/identifiable.ts
@@ -21,7 +21,6 @@ export function search<T extends Identifiable>(
     idOrIndex: string | number
 ): T | null {
     const index = normalize(values, idOrIndex);
-
     return index >= 0 ? values[index] : null;
 }
 
@@ -31,7 +30,6 @@ export function insert<T extends Identifiable>(
     idOrIndex: string | number
 ): T[] {
     const index = normalize(values, idOrIndex);
-
     return index >= 0
         ? [...values.slice(0, index), value, ...values.slice(index)]
         : values;
@@ -43,7 +41,6 @@ export function add<T extends Identifiable>(
     idOrIndex: string | number
 ): T[] {
     const index = normalize(values, idOrIndex);
-
     return index >= 0
         ? [...values.slice(0, index + 1), value, ...values.slice(index + 1)]
         : values;
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index e3b40d1b3..d5efc0fd9 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -172,6 +172,7 @@ export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.sve
 export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
 
 /* Exports for add-ons */
+export { default as RawButton } from "./RawButton.svelte";
 export { default as LabelButton } from "./LabelButton.svelte";
 export { default as IconButton } from "./IconButton.svelte";
 export { default as CommandIconButton } from "./CommandIconButton.svelte";
diff --git a/ts/editor-toolbar/legacy.scss b/ts/editor-toolbar/legacy.scss
new file mode 100644
index 000000000..767ca7677
--- /dev/null
+++ b/ts/editor-toolbar/legacy.scss
@@ -0,0 +1,10 @@
+.linkb {
+    display: inline-block;
+}
+
+.topbut {
+    display: inline-block;
+    vertical-align: middle;
+    width: calc(var(--toolbar-size) - 12px);
+    height: calc(var(--toolbar-size) - 12px);
+}

From 1eafa7d9d0290705889bd735e9c54a4e76fe0d80 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 9 Apr 2021 22:02:34 +0200
Subject: [PATCH 62/97] Remove $$restProps and make explicit dropdown support
 in buttons

* Currently LabelButton, CommandIconButtton, and IconButton support dropdowns
---
 ts/editor-toolbar/ButtonDropdown.svelte    |  4 ++--
 ts/editor-toolbar/ButtonGroup.svelte       |  4 ++--
 ts/editor-toolbar/ColorPicker.svelte       |  3 +--
 ts/editor-toolbar/CommandIconButton.svelte | 14 ++++++++++++--
 ts/editor-toolbar/DropdownItem.svelte      |  3 +--
 ts/editor-toolbar/IconButton.svelte        |  6 ++++--
 ts/editor-toolbar/LabelButton.svelte       | 17 +++++++++++++----
 ts/editor-toolbar/SelectButton.svelte      |  5 ++---
 ts/editor-toolbar/SquareButton.svelte      | 21 +++++++++++++++------
 ts/editor-toolbar/WithDropdownMenu.svelte  |  7 ++++---
 10 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte
index ad050ce22..654e0ca7e 100644
--- a/ts/editor-toolbar/ButtonDropdown.svelte
+++ b/ts/editor-toolbar/ButtonDropdown.svelte
@@ -2,7 +2,7 @@
     import type { ToolbarItem } from "./types";
     import ButtonGroup from "./ButtonGroup.svelte";
 
-    export let id = "";
+    export let id: string;
     export let className = "";
 
     function extendClassName(className: string): string {
@@ -12,4 +12,4 @@
     export let buttons: ToolbarItem[];
 </script>
 
-<ButtonGroup {id} className={extendClassName(className)} {buttons} {...$$restProps} />
+<ButtonGroup {id} className={extendClassName(className)} {buttons} />
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index fd6e38b19..3ae758c5b 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import type { ToolbarItem } from "./types";
 
-    export let id;
+    export let id: string;
     export let className = "";
     export let buttons: ToolbarItem[];
 
@@ -52,7 +52,7 @@
     }
 </style>
 
-<ul {id} class={className} {...$$restProps}>
+<ul {id} class={className}>
     {#each buttons as button}
         {#if !button.hidden}
             <li>
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 703a4f160..9eb4c3ebe 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    export let id = "";
+    export let id: string;
     export let className = "";
     export let tooltip: string;
 
@@ -46,7 +46,6 @@
     {id}
     class={className}
     title={tooltip}
-    {...$$restProps}
     on:mousedown|preventDefault>
     <span> <input type="color" on:change={onChange} /> </span>
 </button>
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 47294d329..5d3efaffb 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -36,13 +36,15 @@
 <script lang="typescript">
     import SquareButton from "./SquareButton.svelte";
 
-    export let id = "";
+    export let id;
     export let className = "";
     export let tooltip: string;
 
     export let icon;
     export let command: string;
     export let activatable = true;
+    export let disables = true;
+    export let dropdownToggle = false;
 
     let active = false;
 
@@ -61,6 +63,14 @@
     }
 </script>
 
-<SquareButton {id} {className} {tooltip} {active} {onClick} {...$$restProps} on:mount>
+<SquareButton
+    {id}
+    {className}
+    {tooltip}
+    {active}
+    {disables}
+    {dropdownToggle}
+    {onClick}
+    on:mount>
     {@html icon}
 </SquareButton>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index 4ef761234..18211e662 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    export let id = "";
+    export let id: string;
     export let className = "";
     export let tooltip: string;
 
@@ -12,7 +12,6 @@
     {id}
     class={`dropdown-item ${className}`}
     title={tooltip}
-    {...$$restProps}
     on:click={onClick}
     on:mousedown|preventDefault>
     <span class="float-start">{label}</span>
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index db2be921b..f8bdc5786 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -1,14 +1,16 @@
 <script lang="typescript">
     import SquareButton from "./SquareButton.svelte";
 
-    export let id = "";
+    export let id: string;
     export let className = "";
     export let tooltip: string;
+    export let disables = true;
+    export let dropdownToggle = false;
 
     export let icon = "";
     export let onClick: (event: MouseEvent) => void;
 </script>
 
-<SquareButton {id} {className} {tooltip} {onClick} {...$$restProps} on:mount>
+<SquareButton {id} {className} {tooltip} {onClick} {disables} {dropdownToggle} on:mount>
     {@html icon}
 </SquareButton>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index c9f1be802..41e43c11a 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -2,13 +2,21 @@
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey } from "./contextKeys";
 
-    export let id = "";
+    export let id: string;
     export let className = "";
 
     export let label: string;
     export let tooltip: string;
     export let onClick: (event: MouseEvent) => void;
     export let disables = true;
+    export let dropdownToggle = false;
+
+    $: extraProps = dropdownToggle
+        ? {
+              "data-bs-toggle": "dropdown",
+              "aria-expanded": "false",
+          }
+        : {};
 
     let buttonRef: HTMLButtonElement;
 
@@ -51,13 +59,14 @@
 </style>
 
 <button
-    tabindex="-1"
     bind:this={buttonRef}
-    disabled={_disabled}
     {id}
     class={extendClassName(className)}
+    class:dropdown-toggle={dropdownToggle}
+    tabindex="-1"
+    disabled={_disabled}
     title={tooltip}
-    {...$$restProps}
+    {...extraProps}
     on:click={onClick}
     on:mousedown|preventDefault>
     {label}
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index 8ec4bcbd1..8b96ce14c 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -9,7 +9,7 @@
         selected: boolean;
     }
 
-    export let id = "";
+    export let id: string;
     export let className = "";
     export let tooltip: string;
 
@@ -58,8 +58,7 @@
     disabled={_disabled}
     {id}
     class={extendClassName(className)}
-    title={tooltip}
-    {...$$restProps}>
+    title={tooltip}>
     {#each options as option}
         <SelectOption {...option} />
     {/each}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 94ce9b731..2cde3fd3e 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -3,17 +3,26 @@
     import type { Readable } from "svelte/store";
     import { disabledKey } from "./contextKeys";
 
-    export let id = "";
+    export let id: string;
     export let className = "";
     export let tooltip: string;
 
     export let onClick: (event: MouseEvent) => void;
     export let active = false;
+    export let disables = true;
+    export let dropdownToggle = false;
+
+    $: extraProps = dropdownToggle
+        ? {
+              "data-bs-toggle": "dropdown",
+              "aria-expanded": "false",
+          }
+        : {};
 
     let buttonRef: HTMLButtonElement;
 
     const disabled = getContext(disabledKey);
-    $: _disabled = $disabled;
+    $: _disabled = disables && $disabled;
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
@@ -74,8 +83,7 @@
         }
     }
 
-    /* for DropdownMenu */
-    :global(.dropdown-toggle)::after {
+    .dropdown-toggle::after {
         margin-right: 0.25rem;
     }
 </style>
@@ -84,11 +92,12 @@
     bind:this={buttonRef}
     {id}
     class={className}
-    title={tooltip}
     class:active
+    class:dropdown-toggle={dropdownToggle}
     tabindex="-1"
+    title={tooltip}
     disabled={_disabled}
-    {...$$restProps}
+    {...extraProps}
     on:click={onClick}
     on:mousedown|preventDefault>
     <span class="p-1"><slot /></span>
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/editor-toolbar/WithDropdownMenu.svelte
index a8d2abbae..d476aad22 100644
--- a/ts/editor-toolbar/WithDropdownMenu.svelte
+++ b/ts/editor-toolbar/WithDropdownMenu.svelte
@@ -1,6 +1,9 @@
 <script lang="typescript">
     import type { ToolbarItem } from "./types";
 
+    /* Bootstrap dropdown are normally declared alongside the associated button
+     * However we cannot do that, as the menus cannot be declared in sticky-positioned elements
+     */
     export let button: ToolbarItem;
     export let menuId: string;
 
@@ -9,9 +12,7 @@
         ...rest
     }: DynamicSvelteComponent): DynamicSvelteComponent {
         return {
-            className: `${className} dropdown-toggle`,
-            "data-bs-toggle": "dropdown",
-            "aria-expanded": "false",
+            dropdownToggle: true,
             ...rest,
         };
     }

From 38cc0dfce54d8b837ac70785c231b6b0974dca8a Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 13:48:12 +0200
Subject: [PATCH 63/97] Use compile_sass and add flag to make editor-toolbar
 compile again

---
 ts/editor-toolbar/BUILD.bazel | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 5f5f6afc2..08a004ae9 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -3,7 +3,7 @@ load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts:esbuild.bzl", "esbuild")
-load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//ts:compile_sass.bzl", "compile_sass")
 load("//ts:vendor.bzl", "copy_bootstrap_icons", "copy_mdi_icons")
 
 svelte_files = glob(["*.svelte"])
@@ -15,15 +15,13 @@ compile_svelte(
     srcs = svelte_files,
 )
 
-sass_binary(
-    name = "color_css",
-    src = "color.scss",
-    visibility = ["//visibility:public"],
-)
-
-sass_binary(
-    name = "legacy_css",
-    src = "legacy.scss",
+compile_sass(
+    group = "local_css",
+    srcs = [
+        "color.scss",
+        "legacy.scss",
+    ],
+    deps = [],
     visibility = ["//visibility:public"],
 )
 
@@ -87,6 +85,7 @@ esbuild(
     args = [
         "--global-name=editorToolbar",
         "--inject:$(location //ts:protobuf-shim.js)",
+        "--resolve-extensions=.mjs,.js",
         "--loader:.svg=text",
     ],
     entry_point = "index.ts",
@@ -98,13 +97,11 @@ esbuild(
     deps = [
         "//ts/lib",
         "//ts/lib:backend_proto",
-        ":index",
-        "//ts/sass:core_css",
         "//ts:image_module_support",
+        "index",
         "bootstrap-icons",
         "mdi-icons",
-        ":color_css",
-        ":legacy_css",
+        "local_css",
     ] + svelte_names,
 )
 

From 8f7c32fcf9801a1d3239880bbf6582dae11f1bec Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 14:29:06 +0200
Subject: [PATCH 64/97] Include Dropdown directly from bootstrap, required
 installing popperjs

---
 ts/editor-toolbar/BUILD.bazel             |  3 +++
 ts/editor-toolbar/WithDropdownMenu.svelte |  3 ++-
 ts/editor-toolbar/dropdown.scss           |  4 ++++
 ts/editor-toolbar/index.ts                |  3 ++-
 ts/licenses.json                          |  8 ++++++++
 ts/package.json                           |  1 +
 ts/yarn.lock                              | 10 ++++++++++
 7 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 ts/editor-toolbar/dropdown.scss

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 08a004ae9..69b34fdd8 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -20,6 +20,7 @@ compile_sass(
     srcs = [
         "color.scss",
         "legacy.scss",
+        "dropdown.scss",
     ],
     deps = [],
     visibility = ["//visibility:public"],
@@ -50,6 +51,8 @@ ts_library(
         "//ts/sveltelib",
         "//ts:image_module_support",
         "@npm//svelte",
+        "@npm//bootstrap",
+        "@npm//@popperjs/core",
     ],
 )
 
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/editor-toolbar/WithDropdownMenu.svelte
index d476aad22..d412833b4 100644
--- a/ts/editor-toolbar/WithDropdownMenu.svelte
+++ b/ts/editor-toolbar/WithDropdownMenu.svelte
@@ -1,5 +1,6 @@
 <script lang="typescript">
     import type { ToolbarItem } from "./types";
+    import Dropdown from "bootstrap/js/dist/dropdown";
 
     /* Bootstrap dropdown are normally declared alongside the associated button
      * However we cannot do that, as the menus cannot be declared in sticky-positioned elements
@@ -28,7 +29,7 @@
          * Rendering the menu here would cause the menu to
          * be displayed outside of the visible area
          */
-        const dropdown = new bootstrap.Dropdown(button);
+        const dropdown = new Dropdown(button);
         const menu = button.getRootNode().getElementById(menuId);
 
         if (!menu) {
diff --git a/ts/editor-toolbar/dropdown.scss b/ts/editor-toolbar/dropdown.scss
new file mode 100644
index 000000000..650407c83
--- /dev/null
+++ b/ts/editor-toolbar/dropdown.scss
@@ -0,0 +1,4 @@
+@import "ts/node_modules/bootstrap/scss/functions";
+@import "ts/node_modules/bootstrap/scss/variables";
+@import "ts/node_modules/bootstrap/scss/mixins";
+@import "ts/node_modules/bootstrap/scss/dropdown";
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index d5efc0fd9..68119443d 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -12,11 +12,12 @@ import EditorToolbarSvelte from "./EditorToolbar.svelte";
 import { checkNightMode } from "anki/nightmode";
 import { setupI18n, ModuleName } from "anki/i18n";
 
+import "./dropdown.css";
+
 import { getNotetypeGroup } from "./notetype";
 import { getFormatGroup } from "./format";
 import { getColorGroup } from "./color";
 import { getTemplateGroup, getTemplateMenus } from "./template";
-
 import { Identifiable, search, add, insert } from "./identifiable";
 
 interface Hideable {
diff --git a/ts/licenses.json b/ts/licenses.json
index 3c74d8774..155dcb2c8 100644
--- a/ts/licenses.json
+++ b/ts/licenses.json
@@ -14,6 +14,14 @@
         "path": "node_modules/@mdi/svg",
         "licenseFile": "node_modules/@mdi/svg/LICENSE"
     },
+    "@popperjs/core@2.9.2": {
+        "licenses": "MIT",
+        "repository": "https://github.com/popperjs/popper-core",
+        "publisher": "Federico Zivolo",
+        "email": "federico.zivolo@gmail.com",
+        "path": "node_modules/@popperjs/core",
+        "licenseFile": "node_modules/@popperjs/core/LICENSE.md"
+    },
     "@protobufjs/aspromise@1.1.2": {
         "licenses": "BSD-3-Clause",
         "repository": "https://github.com/dcodeIO/protobuf.js",
diff --git a/ts/package.json b/ts/package.json
index 7df6203cc..5940f45b8 100644
--- a/ts/package.json
+++ b/ts/package.json
@@ -55,6 +55,7 @@
     "dependencies": {
         "@fluent/bundle": "^0.15.1",
         "@mdi/svg": "^5.9.55",
+        "@popperjs/core": "^2.9.2",
         "bootstrap": "^5.0.0-beta2",
         "bootstrap-icons": "^1.4.0",
         "css-browser-selector": "^0.6.5",
diff --git a/ts/yarn.lock b/ts/yarn.lock
index 69c07b3b3..14613590b 100644
--- a/ts/yarn.lock
+++ b/ts/yarn.lock
@@ -519,6 +519,16 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@mdi/svg@^5.9.55":
+  version "5.9.55"
+  resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-5.9.55.tgz#7cba058135afd5d8a3da977f51b71ffc6a3a3699"
+  integrity sha512-gO0ZpKIeCn9vFg46QduK9MM+n1fuCNwSdcdlBTtbafnnuvwLveK2uj+byhdLtg/8VJGXDhp+DJ35QUMbeWeULA==
+
+"@popperjs/core@^2.9.2":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
+  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"

From 00d8d869f475f318208c003096060e7e01029585 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 14:37:14 +0200
Subject: [PATCH 65/97] Also add Bootstrap buttons.scss

---
 ts/editor-toolbar/BUILD.bazel                       | 2 +-
 ts/editor-toolbar/{dropdown.scss => bootstrap.scss} | 1 +
 ts/editor-toolbar/index.ts                          | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)
 rename ts/editor-toolbar/{dropdown.scss => bootstrap.scss} (80%)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 69b34fdd8..f92b14879 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -20,7 +20,7 @@ compile_sass(
     srcs = [
         "color.scss",
         "legacy.scss",
-        "dropdown.scss",
+        "bootstrap.scss",
     ],
     deps = [],
     visibility = ["//visibility:public"],
diff --git a/ts/editor-toolbar/dropdown.scss b/ts/editor-toolbar/bootstrap.scss
similarity index 80%
rename from ts/editor-toolbar/dropdown.scss
rename to ts/editor-toolbar/bootstrap.scss
index 650407c83..33aaef9a8 100644
--- a/ts/editor-toolbar/dropdown.scss
+++ b/ts/editor-toolbar/bootstrap.scss
@@ -1,4 +1,5 @@
 @import "ts/node_modules/bootstrap/scss/functions";
 @import "ts/node_modules/bootstrap/scss/variables";
 @import "ts/node_modules/bootstrap/scss/mixins";
+@import "ts/node_modules/bootstrap/scss/buttons";
 @import "ts/node_modules/bootstrap/scss/dropdown";
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 68119443d..0fe914abb 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -12,7 +12,7 @@ import EditorToolbarSvelte from "./EditorToolbar.svelte";
 import { checkNightMode } from "anki/nightmode";
 import { setupI18n, ModuleName } from "anki/i18n";
 
-import "./dropdown.css";
+import "./bootstrap.css";
 
 import { getNotetypeGroup } from "./notetype";
 import { getFormatGroup } from "./format";

From 443cef6b150f14712f3d7e54d774e642fc9dee53 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 15:45:14 +0200
Subject: [PATCH 66/97] Add buttons_mixins.scss for sharing SCSS across
 components

---
 ts/editor-toolbar/LabelButton.svelte  | 16 +++++++---------
 ts/editor-toolbar/SquareButton.svelte | 10 +++++-----
 ts/sass/BUILD.bazel                   |  8 ++++++++
 ts/sass/button_mixins.scss            |  8 ++++++++
 4 files changed, 28 insertions(+), 14 deletions(-)
 create mode 100644 ts/sass/button_mixins.scss

diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 41e43c11a..e919acab7 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -32,27 +32,25 @@
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     button {
         display: inline-block;
-        vertical-align: middle;
-        width: auto;
-        height: var(--toolbar-size);
+        padding: 0 calc(var(--toolbar-size) / 3);
 
         font-size: calc(var(--toolbar-size) / 2.3);
-        padding: 0 calc(var(--toolbar-size) / 3);
+        width: auto;
+        height: var(--toolbar-size);
 
         border-radius: 0;
         border-color: var(--faint-border);
 
-        &:focus {
+        &:hover {
             box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
                 calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
         }
 
-        &[disabled] {
-            opacity: 0.4;
-            cursor: not-allowed;
-
+        @include button.disabled {
             border-color: var(--faint-border);
         }
     }
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 2cde3fd3e..0aeaa27d7 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -29,6 +29,8 @@
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     button {
         display: inline-block;
         padding: 0;
@@ -36,7 +38,8 @@
         background-color: white;
 
         &:hover {
-            background-color: #eee;
+            box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
+                calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
         }
 
         &:active,
@@ -51,10 +54,7 @@
             border-color: var(--border);
         }
 
-        &[disabled] {
-            opacity: 0.4;
-            cursor: not-allowed;
-
+        @include button.disabled {
             &:hover {
                 background-color: white;
             }
diff --git a/ts/sass/BUILD.bazel b/ts/sass/BUILD.bazel
index f9bf6b465..4249d64a2 100644
--- a/ts/sass/BUILD.bazel
+++ b/ts/sass/BUILD.bazel
@@ -44,6 +44,14 @@ sass_library(
     visibility = ["//visibility:public"],
 )
 
+sass_library(
+    name = "button_mixins_lib",
+    srcs = [
+        "button_mixins.scss",
+    ],
+    visibility = ["//visibility:public"],
+)
+
 # qt package extracts colours from source file
 exports_files(
     ["_vars.scss"],
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
new file mode 100644
index 000000000..41b559f6c
--- /dev/null
+++ b/ts/sass/button_mixins.scss
@@ -0,0 +1,8 @@
+@mixin disabled {
+    &[disabled] {
+        opacity: 0.4;
+        cursor: not-allowed;
+
+        @content;
+    }
+}

From e6996ae5d3d84d39f724c2dcd7fa2c15182ed26f Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 15:49:17 +0200
Subject: [PATCH 67/97] Make mdi also use renamed pkg_from_name

---
 ts/vendor.bzl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ts/vendor.bzl b/ts/vendor.bzl
index b2b3972c8..13b948adc 100644
--- a/ts/vendor.bzl
+++ b/ts/vendor.bzl
@@ -134,7 +134,7 @@ def copy_bootstrap_icons(name = "bootstrap-icons", icons = [], visibility = ["//
 def copy_mdi_icons(name = "mdi-icons", icons = [], visibility = ["//visibility:public"]):
     vendor_js_lib(
         name = name,
-        pkg = _pkg_from_name("@mdi/svg"),
+        pkg = pkg_from_name("@mdi/svg"),
         base = _npm_base_from_name("@mdi/svg"),
         include = ["svg/{}".format(icon) for icon in icons],
         strip_prefix = "svg/",

From d6d4269aaf131e33f8876856cb3ecb7c5b7bf1dd Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 16:26:23 +0200
Subject: [PATCH 68/97] Rely more heavily on bootstrap provided types for
 editor-toolbar

---
 ts/editor-toolbar/ButtonGroup.svelte  | 10 +++----
 ts/editor-toolbar/LabelButton.svelte  | 28 ++++++-----------
 ts/editor-toolbar/SquareButton.svelte | 43 +++++++--------------------
 ts/editor-toolbar/bootstrap.scss      |  3 ++
 4 files changed, 27 insertions(+), 57 deletions(-)

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 3ae758c5b..90c0862b4 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -18,17 +18,17 @@
 
         padding-inline-start: 0;
         margin-bottom: 0;
-
-        & :global(button),
-        & :global(select) {
-            margin-left: -1px;
-        }
     }
 
     li {
         display: inline-block;
         margin-bottom: calc(var(--toolbar-size) / 15);
 
+        & > :global(button),
+        & > :global(select) {
+            border-radius: 0;
+        }
+
         &:nth-child(1) {
             margin-left: calc(var(--toolbar-size) / 7.5);
 
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index e919acab7..5c2d852cf 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { disabledKey } from "./contextKeys";
+    import { disabledKey, nightModeKey } from "./contextKeys";
 
     export let id: string;
     export let className = "";
@@ -21,38 +21,26 @@
     let buttonRef: HTMLButtonElement;
 
     function extendClassName(className: string): string {
-        return `btn btn-secondary ${className}`;
+        return `btn ${className}`;
     }
 
-    const dispatch = createEventDispatcher();
-    onMount(() => dispatch("mount", { button: buttonRef }));
-
     const disabled = getContext(disabledKey);
     $: _disabled = disables && $disabled;
+
+    const nightMode = getContext(nightModeKey);
+
+    const dispatch = createEventDispatcher();
+    onMount(() => dispatch("mount", { button: buttonRef }));
 </script>
 
 <style lang="scss">
     @use "ts/sass/button_mixins" as button;
 
     button {
-        display: inline-block;
         padding: 0 calc(var(--toolbar-size) / 3);
-
         font-size: calc(var(--toolbar-size) / 2.3);
         width: auto;
         height: var(--toolbar-size);
-
-        border-radius: 0;
-        border-color: var(--faint-border);
-
-        &:hover {
-            box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
-                calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
-        }
-
-        @include button.disabled {
-            border-color: var(--faint-border);
-        }
     }
 </style>
 
@@ -61,6 +49,8 @@
     {id}
     class={extendClassName(className)}
     class:dropdown-toggle={dropdownToggle}
+    class:btn-light={!nightMode}
+    class:btn-secondary={nightMode}
     tabindex="-1"
     disabled={_disabled}
     title={tooltip}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 0aeaa27d7..7c60ff85c 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import { getContext, onMount, createEventDispatcher } from "svelte";
     import type { Readable } from "svelte/store";
-    import { disabledKey } from "./contextKeys";
+    import { disabledKey, nightModeKey } from "./contextKeys";
 
     export let id: string;
     export let className = "";
@@ -21,9 +21,15 @@
 
     let buttonRef: HTMLButtonElement;
 
+    function extendClassName(className: string): string {
+        return `btn ${className}`;
+    }
+
     const disabled = getContext(disabledKey);
     $: _disabled = disables && $disabled;
 
+    const nightMode = getContext(nightModeKey);
+
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
 </script>
@@ -32,38 +38,7 @@
     @use "ts/sass/button_mixins" as button;
 
     button {
-        display: inline-block;
         padding: 0;
-
-        background-color: white;
-
-        &:hover {
-            box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
-                calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
-        }
-
-        &:active,
-        &.active {
-            box-shadow: inset 0 0 calc(var(--toolbar-size) / 2.5)
-                calc(var(--toolbar-size) / 7.5) rgb(0 0 0 / 30%);
-            border-color: #aaa;
-        }
-
-        &.active:active {
-            box-shadow: none;
-            border-color: var(--border);
-        }
-
-        @include button.disabled {
-            &:hover {
-                background-color: white;
-            }
-
-            &:active,
-            &.active {
-                box-shadow: none;
-            }
-        }
     }
 
     span {
@@ -91,9 +66,11 @@
 <button
     bind:this={buttonRef}
     {id}
-    class={className}
+    class={extendClassName(className)}
     class:active
     class:dropdown-toggle={dropdownToggle}
+    class:btn-light={!nightMode}
+    class:btn-secondary={nightMode}
     tabindex="-1"
     title={tooltip}
     disabled={_disabled}
diff --git a/ts/editor-toolbar/bootstrap.scss b/ts/editor-toolbar/bootstrap.scss
index 33aaef9a8..f5f023c9c 100644
--- a/ts/editor-toolbar/bootstrap.scss
+++ b/ts/editor-toolbar/bootstrap.scss
@@ -1,5 +1,8 @@
 @import "ts/node_modules/bootstrap/scss/functions";
 @import "ts/node_modules/bootstrap/scss/variables";
 @import "ts/node_modules/bootstrap/scss/mixins";
+
+$btn-disabled-opacity: 0.4;
+
 @import "ts/node_modules/bootstrap/scss/buttons";
 @import "ts/node_modules/bootstrap/scss/dropdown";

From 0133652d041d90a0a143b9797b6a174c69718b59 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 16:56:50 +0200
Subject: [PATCH 69/97] Correctly check for night mode

---
 ts/editor-toolbar/SquareButton.svelte | 2 --
 ts/editor-toolbar/index.ts            | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 7c60ff85c..4fb7fe61c 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -35,8 +35,6 @@
 </script>
 
 <style lang="scss">
-    @use "ts/sass/button_mixins" as button;
-
     button {
         padding: 0;
     }
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 0fe914abb..10a1c2a59 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -9,7 +9,6 @@ import { Writable, writable } from "svelte/store";
 
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
-import { checkNightMode } from "anki/nightmode";
 import { setupI18n, ModuleName } from "anki/i18n";
 
 import "./bootstrap.css";
@@ -59,7 +58,8 @@ class EditorToolbar extends HTMLElement {
                 props: {
                     buttons: this.buttons,
                     menus: this.menus,
-                    nightMode: checkNightMode(),
+                    nightMode: document.documentElement.classList.contains("night-mode"),
+
                 },
             });
         });

From 9f740f307d92d53f683cd5aa407d7d9e6106cc4f Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 17:05:23 +0200
Subject: [PATCH 70/97] Switch from core to base CSS for editor view

---
 ts/editor-toolbar/ButtonGroup.svelte | 4 ++++
 ts/editor/editor.scss                | 1 -
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 90c0862b4..9c93b5055 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -49,6 +49,10 @@
                 border-bottom-right-radius: calc(var(--toolbar-size) / 7.5);
             }
         }
+
+        &:not(:nth-child(1)) {
+            margin-left: 1px;
+        }
     }
 </style>
 
diff --git a/ts/editor/editor.scss b/ts/editor/editor.scss
index ce7081d47..b8745c982 100644
--- a/ts/editor/editor.scss
+++ b/ts/editor/editor.scss
@@ -2,7 +2,6 @@
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
 @use 'ts/sass/base';
-@use 'ts/sass/buttons';
 @use 'ts/sass/scrollbar';
 
 .nightMode {

From 02c8893fc93fdbe95dd01684834db088ffbfcb74 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 17:43:55 +0200
Subject: [PATCH 71/97] Update CSS for ColorPicker and forecolor button

---
 ts/editor-toolbar/ColorPicker.svelte | 38 ++++++++++------------------
 ts/editor-toolbar/color.scss         |  2 +-
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 9eb4c3ebe..bba435836 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -1,50 +1,40 @@
 <script lang="typescript">
+    import { getContext } from "svelte";
+    import { nightModeKey } from "./contextKeys";
+
     export let id: string;
     export let className = "";
     export let tooltip: string;
 
     export let onChange: (event: Event) => void;
+
+    function extendClassName(className: string): string {
+        return `btn ${className}`;
+    }
+
+    const nightMode = getContext(nightModeKey);
 </script>
 
 <style lang="scss">
     button {
-        display: inline-block;
         padding: 0;
-
-        &:hover {
-            background-color: #eee;
-        }
-
-        &:active {
-            box-shadow: inset 0 0 calc(var(--toolbar-size) / 2.5)
-                calc(var(--toolbar-size) / 7.5) rgb(0 0 0 / 30%);
-            border-color: #aaa;
-        }
-    }
-
-    span {
-        display: inline-block;
-        vertical-align: middle;
-        width: 100%;
-        height: 100%;
-
-        cursor: pointer;
     }
 
     input {
         display: inline-block;
         opacity: 0;
-        width: calc(var(--toolbar-size) - 6px);
-        height: calc(var(--toolbar-size) - 6px);
 
-        cursor: pointer;
+        width: calc(var(--toolbar-size) - 2px);
+        height: calc(var(--toolbar-size) - 7px);
     }
 </style>
 
 <button
     tabindex="-1"
     {id}
-    class={className}
+    class={extendClassName(className)}
+    class:btn-light={!nightMode}
+    class:btn-secondary={nightMode}
     title={tooltip}
     on:mousedown|preventDefault>
     <span> <input type="color" on:change={onChange} /> </span>
diff --git a/ts/editor-toolbar/color.scss b/ts/editor-toolbar/color.scss
index 6e6077eb4..973008821 100644
--- a/ts/editor-toolbar/color.scss
+++ b/ts/editor-toolbar/color.scss
@@ -3,7 +3,7 @@
 }
 
 .forecolor {
-    color: var(--foreground-color);
+    color: var(--foreground-color) !important;
 }
 
 .rainbow {

From 49daa2dd013a17d7fd033010b4e2083cd5d266f7 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 18:33:46 +0200
Subject: [PATCH 72/97] Improve looks of color picker button

---
 ts/editor-toolbar/ColorPicker.svelte | 22 ++++++++++++++++++----
 ts/editor-toolbar/color.scss         | 10 ----------
 ts/editor-toolbar/color.ts           |  1 -
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index bba435836..9871a57ff 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -13,19 +13,32 @@
     }
 
     const nightMode = getContext(nightModeKey);
+
+    let input: HTMLInputElement;
+
+    function delegateToInput() {
+        input.click();
+    }
 </script>
 
 <style lang="scss">
     button {
         padding: 0;
+        background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
+            content-box linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+            content-box linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
+            content-box white;
+
+        width: calc(var(--toolbar-size) - 0px);
+        height: calc(var(--toolbar-size) - 0px);
+
+        border-width: 5px;
+        overflow: hidden;
     }
 
     input {
         display: inline-block;
         opacity: 0;
-
-        width: calc(var(--toolbar-size) - 2px);
-        height: calc(var(--toolbar-size) - 7px);
     }
 </style>
 
@@ -36,6 +49,7 @@
     class:btn-light={!nightMode}
     class:btn-secondary={nightMode}
     title={tooltip}
+    on:click={delegateToInput}
     on:mousedown|preventDefault>
-    <span> <input type="color" on:change={onChange} /> </span>
+    <input bind:this={input} type="color" on:change={onChange} />
 </button>
diff --git a/ts/editor-toolbar/color.scss b/ts/editor-toolbar/color.scss
index 973008821..3dcd5e3e8 100644
--- a/ts/editor-toolbar/color.scss
+++ b/ts/editor-toolbar/color.scss
@@ -5,13 +5,3 @@
 .forecolor {
     color: var(--foreground-color) !important;
 }
-
-.rainbow {
-    background: content-box
-            linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
-        content-box
-            linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-        content-box
-            linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
-        border-box white;
-}
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index 85681c7a6..79bd65a10 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -38,7 +38,6 @@ export function getColorGroup() {
     });
 
     const colorpickerButton = colorPicker({
-        className: "rainbow",
         onChange: ({ currentTarget }) =>
             setForegroundColor((currentTarget as HTMLInputElement).value),
         tooltip: tr.editingChangeColourF8(),

From 8760bd9ac6c855adb07be10f7faaf04c41d0860b Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 19:36:41 +0200
Subject: [PATCH 73/97] Add theming support for DropdownItem and DropdownMenu

---
 ts/editor-toolbar/ButtonGroup.svelte  | 12 +++----
 ts/editor-toolbar/DropdownItem.svelte | 48 ++++++++++++++++++++++++---
 ts/editor-toolbar/DropdownMenu.svelte | 21 ++++++++++--
 ts/editor-toolbar/SquareButton.svelte |  2 +-
 4 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 9c93b5055..789a23d56 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -24,16 +24,16 @@
         display: inline-block;
         margin-bottom: calc(var(--toolbar-size) / 15);
 
-        & > :global(button),
-        & > :global(select) {
+        > :global(button),
+        > :global(select) {
             border-radius: 0;
         }
 
         &:nth-child(1) {
             margin-left: calc(var(--toolbar-size) / 7.5);
 
-            & > :global(button),
-            & > :global(select) {
+            > :global(button),
+            > :global(select) {
                 /* default 0.25rem */
                 border-top-left-radius: calc(var(--toolbar-size) / 7.5);
                 border-bottom-left-radius: calc(var(--toolbar-size) / 7.5);
@@ -43,8 +43,8 @@
         &:nth-last-child(1) {
             margin-right: calc(var(--toolbar-size) / 7.5);
 
-            & > :global(button),
-            & > :global(select) {
+            > :global(button),
+            > :global(select) {
                 border-top-right-radius: calc(var(--toolbar-size) / 7.5);
                 border-bottom-right-radius: calc(var(--toolbar-size) / 7.5);
             }
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index 18211e662..abfec42fa 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -1,4 +1,7 @@
 <script lang="typescript">
+    import { getContext } from "svelte";
+    import { nightModeKey } from "./contextKeys";
+
     export let id: string;
     export let className = "";
     export let tooltip: string;
@@ -6,15 +9,52 @@
     export let onClick: (event: MouseEvent) => void;
     export let label: string;
     export let endLabel: string;
+
+    const nightMode = getContext(nightModeKey);
 </script>
 
+<style lang="scss">
+    @import "ts/node_modules/bootstrap/scss/functions";
+    @import "ts/node_modules/bootstrap/scss/variables";
+
+    button {
+        display: flex;
+        justify-content: space-between;
+
+        &.nightMode {
+            color: white;
+
+            &:hover, &:focus {
+                color: black;
+            }
+
+            &:active {
+                color: white;
+            }
+        }
+
+        &:hover, &:focus {
+            color: white;
+        }
+
+        &:focus {
+            box-shadow: none;
+        }
+    }
+
+    span {
+        font-size: calc(var(--toolbar-size) / 2.3);
+        color: inherit;
+    }
+</style>
+
 <button
     {id}
-    class={`dropdown-item ${className}`}
+    class={`btn dropdown-item ${className}`}
+    class:nightMode
     title={tooltip}
     on:click={onClick}
     on:mousedown|preventDefault>
-    <span class="float-start">{label}</span>
-
-    {#if endLabel}<span class="float-end">{endLabel}</span>{/if}
+    <span class:me-2={endLabel}>{label}</span>
+    {#if endLabel}<span>{endLabel}</span>{/if}
 </button>
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte
index 6fb0c7eb1..a789dd95a 100644
--- a/ts/editor-toolbar/DropdownMenu.svelte
+++ b/ts/editor-toolbar/DropdownMenu.svelte
@@ -1,13 +1,30 @@
 <script lang="typescript">
     import type { SvelteComponentDefinition } from "./types";
+    import { getContext } from "svelte";
+    import { nightModeKey } from "./contextKeys";
 
     export let id: string;
     export let menuItems: SvelteComponentDefinition[];
+
+    const nightMode = getContext(nightModeKey);
 </script>
 
-<ul class="dropdown-menu" {id}>
+<style lang="scss">
+    @import "ts/node_modules/bootstrap/scss/functions";
+    @import "ts/node_modules/bootstrap/scss/variables";
+
+    ul {
+        background-color: $light;
+
+        &.nightMode {
+            background-color: $secondary;
+        }
+    }
+</style>
+
+<ul {id} class="dropdown-menu" class:nightMode>
     {#each menuItems as menuItem}
-        <li>
+        <li class:nightMode>
             <svelte:component this={menuItem.component} {...menuItem} />
         </li>
     {/each}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 4fb7fe61c..1504b31ca 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
-    import { getContext, onMount, createEventDispatcher } from "svelte";
     import type { Readable } from "svelte/store";
+    import { getContext, onMount, createEventDispatcher } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
 
     export let id: string;

From dd530dcdc8059a4329355d658c35886768c4f054 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 20:06:35 +0200
Subject: [PATCH 74/97] Give light mode effects on hover/active/focus as well

---
 ts/editor-toolbar/ColorPicker.svelte  |  7 +++++++
 ts/editor-toolbar/DropdownItem.svelte |  6 ++----
 ts/editor-toolbar/LabelButton.svelte  |  4 ++++
 ts/editor-toolbar/SquareButton.svelte |  7 +++++++
 ts/sass/button_mixins.scss            | 10 ++++------
 5 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 9871a57ff..46b7a2445 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -22,6 +22,8 @@
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     button {
         padding: 0;
         background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
@@ -36,8 +38,13 @@
         overflow: hidden;
     }
 
+    .btn-light {
+        @include button.light-hover-active;
+    }
+
     input {
         display: inline-block;
+        cursor: pointer;
         opacity: 0;
     }
 </style>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index abfec42fa..a7ca85e4f 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -21,6 +21,8 @@
         display: flex;
         justify-content: space-between;
 
+        color: black;
+
         &.nightMode {
             color: white;
 
@@ -33,10 +35,6 @@
             }
         }
 
-        &:hover, &:focus {
-            color: white;
-        }
-
         &:focus {
             box-shadow: none;
         }
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 5c2d852cf..e95ce5feb 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -42,6 +42,10 @@
         width: auto;
         height: var(--toolbar-size);
     }
+
+    .btn-light {
+        @include button.light-hover-active;
+    }
 </style>
 
 <button
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 1504b31ca..06e2ad397 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -35,8 +35,15 @@
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     button {
         padding: 0;
+
+    }
+
+    .btn-light {
+        @include button.light-hover-active;
     }
 
     span {
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index 41b559f6c..a29d7d45a 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -1,8 +1,6 @@
-@mixin disabled {
-    &[disabled] {
-        opacity: 0.4;
-        cursor: not-allowed;
-
-        @content;
+@mixin light-hover-active {
+    &:hover, &:focus, &:active, &.active {
+        background-color: #e3e3e8;
+        border-color: #e3e3e8;
     }
 }

From e732eca0977d5d151ce8d97bb2a1978b02040459 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 20:23:06 +0200
Subject: [PATCH 75/97] Use padding for extended colorpicker background
 "border"

---
 ts/editor-toolbar/ColorPicker.svelte | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 46b7a2445..c1bed3809 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -24,22 +24,33 @@
 <style lang="scss">
     @use "ts/sass/button_mixins" as button;
 
+    @import "ts/node_modules/bootstrap/scss/functions";
+    @import "ts/node_modules/bootstrap/scss/variables";
+
     button {
         padding: 0;
-        background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
-            content-box linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-            content-box linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
-            content-box white;
 
         width: calc(var(--toolbar-size) - 0px);
         height: calc(var(--toolbar-size) - 0px);
 
-        border-width: 5px;
+        padding: 4px;
         overflow: hidden;
     }
 
     .btn-light {
         @include button.light-hover-active;
+
+        background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
+            content-box linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+            content-box linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
+            border-box $light;
+    }
+
+    .btn-secondary {
+        background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
+            content-box linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+            content-box linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
+            border-box $secondary;
     }
 
     input {

From a7d24e71598b66a349ad0128f050ccad5423028b Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 20:41:03 +0200
Subject: [PATCH 76/97] Add support for Preview button in Browser

---
 qt/aqt/browser/browser.py | 36 ++++++++++++++++--------------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/qt/aqt/browser/browser.py b/qt/aqt/browser/browser.py
index a50d4642f..6e485c83e 100644
--- a/qt/aqt/browser/browser.py
+++ b/qt/aqt/browser/browser.py
@@ -380,29 +380,25 @@ class Browser(QMainWindow):
         self.form.gridLayout.addWidget(switch, 0, 0)
 
     def setupEditor(self) -> None:
-        def add_preview_button(leftbuttons: List[str], editor: Editor) -> None:
-            preview_shortcut = "Ctrl+Shift+P"
-            leftbuttons.insert(
-                0,
-                editor.addButton(
-                    None,
-                    "preview",
-                    lambda _editor: self.onTogglePreview(),
-                    tr.browsing_preview_selected_card(
-                        val=shortcut(preview_shortcut),
-                    ),
-                    tr.actions_preview(),
-                    id="previewButton",
-                    keys=preview_shortcut,
-                    disables=False,
-                    rightside=False,
-                    toggleable=True,
-                ),
+        def add_preview_button(editor: Editor) -> None:
+            preview_shortcut = "Ctrl+Shift+P"  # TODO
+
+            editor._links["preview"] = lambda _editor: self.onTogglePreview()
+            editor.web.eval(
+                f"""
+$editorToolbar.addButton({{
+    component: editorToolbar.LabelButton,
+    label: `{tr.actions_preview()}`,
+    tooltip: `{tr.browsing_preview_selected_card(val=shortcut(preview_shortcut))}`,
+    onClick: () => bridgeCommand("preview"),
+    disables: false,
+}}, "notetype");
+"""
             )
 
-        gui_hooks.editor_did_init_left_buttons.append(add_preview_button)
+        gui_hooks.editor_did_init.append(add_preview_button)
         self.editor = aqt.editor.Editor(self.mw, self.form.fieldsArea, self)
-        gui_hooks.editor_did_init_left_buttons.remove(add_preview_button)
+        gui_hooks.editor_did_init.remove(add_preview_button)
 
     @ensure_editor_saved
     def onRowChanged(

From b696635afcec5a20b48428e7afc57b4964699055 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 21:58:58 +0200
Subject: [PATCH 77/97] Style light mode button bar with borders

- whereas night mode toolbar has no visible borders
---
 ts/editor-toolbar/BUILD.bazel         |  4 +++-
 ts/editor-toolbar/ButtonGroup.svelte  | 18 ++++++++++++++++--
 ts/editor-toolbar/ColorPicker.svelte  | 24 +++++++++++++++---------
 ts/editor-toolbar/DropdownItem.svelte |  3 ++-
 ts/editor-toolbar/SquareButton.svelte |  1 -
 ts/editor-toolbar/index.ts            |  5 +++--
 ts/sass/button_mixins.scss            |  8 ++++++--
 7 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index f92b14879..4732629af 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -22,7 +22,9 @@ compile_sass(
         "legacy.scss",
         "bootstrap.scss",
     ],
-    deps = [],
+    deps = [
+        "//ts/sass:button_mixins_lib",
+    ],
     visibility = ["//visibility:public"],
 )
 
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 789a23d56..e80cb752b 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,5 +1,7 @@
 <script lang="typescript">
     import type { ToolbarItem } from "./types";
+    import { getContext } from "svelte";
+    import { nightModeKey } from "./contextKeys";
 
     export let id: string;
     export let className = "";
@@ -8,11 +10,15 @@
     function filterHidden({ hidden, ...props }) {
         return props;
     }
+
+    const nightMode = getContext(nightModeKey);
 </script>
 
 <style lang="scss">
     ul {
-        display: flex;
+        display: inline-flex;
+        justify-items: start;
+
         flex-wrap: var(--toolbar-wrap);
         overflow-y: auto;
 
@@ -20,6 +26,14 @@
         margin-bottom: 0;
     }
 
+    .border-group {
+        /* buttons' borders exactly overlap each other */
+        :global(button),
+        :global(select) {
+            margin-left: -2px;
+        }
+    }
+
     li {
         display: inline-block;
         margin-bottom: calc(var(--toolbar-size) / 15);
@@ -56,7 +70,7 @@
     }
 </style>
 
-<ul {id} class={className}>
+<ul {id} class={className} class:border-group={!nightMode}>
     {#each buttons as button}
         {#if !button.hidden}
             <li>
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index c1bed3809..3d78e2c9f 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -14,10 +14,10 @@
 
     const nightMode = getContext(nightModeKey);
 
-    let input: HTMLInputElement;
+    let inputRef: HTMLInputElement;
 
     function delegateToInput() {
-        input.click();
+        inputRef.click();
     }
 </script>
 
@@ -40,16 +40,22 @@
     .btn-light {
         @include button.light-hover-active;
 
-        background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
-            content-box linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-            content-box linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
+        background: content-box
+                linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
+            content-box
+                linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+            content-box
+                linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
             border-box $light;
     }
 
     .btn-secondary {
-        background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
-            content-box linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-            content-box linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
+        background: content-box
+                linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
+            content-box
+                linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+            content-box
+                linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
             border-box $secondary;
     }
 
@@ -69,5 +75,5 @@
     title={tooltip}
     on:click={delegateToInput}
     on:mousedown|preventDefault>
-    <input bind:this={input} type="color" on:change={onChange} />
+    <input bind:this={inputRef} type="color" on:change={onChange} />
 </button>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index a7ca85e4f..019294b24 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -26,7 +26,8 @@
         &.nightMode {
             color: white;
 
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
                 color: black;
             }
 
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 06e2ad397..3a434db7c 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -39,7 +39,6 @@
 
     button {
         padding: 0;
-
     }
 
     .btn-light {
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 10a1c2a59..07afda036 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -58,8 +58,9 @@ class EditorToolbar extends HTMLElement {
                 props: {
                     buttons: this.buttons,
                     menus: this.menus,
-                    nightMode: document.documentElement.classList.contains("night-mode"),
-
+                    nightMode: document.documentElement.classList.contains(
+                        "night-mode"
+                    ),
                 },
             });
         });
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index a29d7d45a..45d66d7a6 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -1,6 +1,10 @@
 @mixin light-hover-active {
-    &:hover, &:focus, &:active, &.active {
+    border-color: var(--faint-border) !important;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
         background-color: #e3e3e8;
-        border-color: #e3e3e8;
     }
 }

From 13decbe6080c9f6303338b50531cbc7daf8cbade Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 23:46:13 +0200
Subject: [PATCH 78/97] Generalize ts/graphs/preferences to
 ts/sveltelib/preferences

---
 ts/graphs/AddedGraph.svelte     |  4 +-
 ts/graphs/CalendarGraph.svelte  |  6 +--
 ts/graphs/CardCounts.svelte     |  2 +-
 ts/graphs/EaseGraph.svelte      |  6 +--
 ts/graphs/FutureDue.svelte      |  4 +-
 ts/graphs/IntervalsGraph.svelte |  4 +-
 ts/graphs/WithGraphData.svelte  | 21 ++++++--
 ts/graphs/graph-helpers.ts      | 16 +++----
 ts/graphs/preferences.ts        | 79 ------------------------------
 ts/sveltelib/preferences.ts     | 85 +++++++++++++++++++++++++++++++++
 10 files changed, 124 insertions(+), 103 deletions(-)
 delete mode 100644 ts/graphs/preferences.ts
 create mode 100644 ts/sveltelib/preferences.ts

diff --git a/ts/graphs/AddedGraph.svelte b/ts/graphs/AddedGraph.svelte
index e8e789df5..0adab0121 100644
--- a/ts/graphs/AddedGraph.svelte
+++ b/ts/graphs/AddedGraph.svelte
@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type pb from "anki/backend_proto";
+    import type { PreferenceStore } from "sveltelib/preferences";
     import { createEventDispatcher } from "svelte";
 
     import Graph from "./Graph.svelte";
@@ -17,11 +18,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { HistogramData } from "./histogram-graph";
     import { gatherData, buildHistogram } from "./added";
     import type { GraphData } from "./added";
-    import type { PreferenceStore } from "./preferences";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     import * as tr from "anki/i18n";
-    export let preferences: PreferenceStore;
+    export let preferences: PreferenceStore<pb.BackendProto.GraphPreferences>;
 
     let histogramData = null as HistogramData | null;
     let tableData: TableDatum[] = [];
diff --git a/ts/graphs/CalendarGraph.svelte b/ts/graphs/CalendarGraph.svelte
index 6eb6b7376..58ccda911 100644
--- a/ts/graphs/CalendarGraph.svelte
+++ b/ts/graphs/CalendarGraph.svelte
@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type pb from "anki/backend_proto";
+    import type { PreferenceStore } from "sveltelib/preferences";
 
     import { createEventDispatcher } from "svelte";
 
@@ -15,11 +16,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { defaultGraphBounds, RevlogRange } from "./graph-helpers";
     import type { SearchEventMap } from "./graph-helpers";
     import { gatherData, renderCalendar } from "./calendar";
-    import type { PreferenceStore } from "./preferences";
     import type { GraphData } from "./calendar";
 
-    export let sourceData: pb.BackendProto.GraphsOut | null = null;
-    export let preferences: PreferenceStore | null = null;
+    export let sourceData: pb.BackendProto.GraphsOut;
+    export let preferences: PreferenceStore<pb.BackendProto.GraphPreferences>;
     export let revlogRange: RevlogRange;
     import * as tr from "anki/i18n";
     export let nightMode: boolean;
diff --git a/ts/graphs/CardCounts.svelte b/ts/graphs/CardCounts.svelte
index 1271f6204..1dd8bf60d 100644
--- a/ts/graphs/CardCounts.svelte
+++ b/ts/graphs/CardCounts.svelte
@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { createEventDispatcher } from "svelte";
     import type pb from "anki/backend_proto";
+    import type { PreferenceStore } from "sveltelib/preferences";
 
     import Graph from "./Graph.svelte";
     import InputBox from "./InputBox.svelte";
@@ -13,7 +14,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { SearchEventMap } from "./graph-helpers";
     import { gatherData, renderCards } from "./card-counts";
     import type { GraphData, TableDatum } from "./card-counts";
-    import type { PreferenceStore } from "./preferences";
 
     export let sourceData: pb.BackendProto.GraphsOut;
     import * as tr2 from "anki/i18n";
diff --git a/ts/graphs/EaseGraph.svelte b/ts/graphs/EaseGraph.svelte
index 1a1978041..913d8e8ba 100644
--- a/ts/graphs/EaseGraph.svelte
+++ b/ts/graphs/EaseGraph.svelte
@@ -4,6 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type pb from "anki/backend_proto";
+    import * as tr from "anki/i18n";
+    import type { PreferenceStore } from "sveltelib/preferences";
 
     import { createEventDispatcher } from "svelte";
 
@@ -14,11 +16,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { HistogramData } from "./histogram-graph";
     import { gatherData, prepareData } from "./ease";
     import type { TableDatum, SearchEventMap } from "./graph-helpers";
-    import type { PreferenceStore } from "./preferences";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
-    import * as tr from "anki/i18n";
-    export let preferences: PreferenceStore;
+    export let preferences: PreferenceStore<pb.BackendProto.GraphPreferences>;
 
     const dispatch = createEventDispatcher<SearchEventMap>();
 
diff --git a/ts/graphs/FutureDue.svelte b/ts/graphs/FutureDue.svelte
index 88936d84d..87fe9c4dd 100644
--- a/ts/graphs/FutureDue.svelte
+++ b/ts/graphs/FutureDue.svelte
@@ -12,17 +12,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import HistogramGraph from "./HistogramGraph.svelte";
     import GraphRangeRadios from "./GraphRangeRadios.svelte";
     import TableData from "./TableData.svelte";
+    import type { PreferenceStore } from "sveltelib/preferences";
 
     import type { HistogramData } from "./histogram-graph";
     import { GraphRange, RevlogRange } from "./graph-helpers";
     import type { TableDatum, SearchEventMap } from "./graph-helpers";
     import { gatherData, buildHistogram } from "./future-due";
     import type { GraphData } from "./future-due";
-    import type { PreferenceStore } from "./preferences";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     import * as tr from "anki/i18n";
-    export let preferences: PreferenceStore;
+    export let preferences: PreferenceStore<pb.BackendProto.GraphPreferences>;
 
     const dispatch = createEventDispatcher<SearchEventMap>();
 
diff --git a/ts/graphs/IntervalsGraph.svelte b/ts/graphs/IntervalsGraph.svelte
index 33ed2a68a..ecf8a8f8a 100644
--- a/ts/graphs/IntervalsGraph.svelte
+++ b/ts/graphs/IntervalsGraph.svelte
@@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { timeSpan, MONTH } from "anki/time";
 
     import type pb from "anki/backend_proto";
+    import type { PreferenceStore } from "sveltelib/preferences";
     import { createEventDispatcher } from "svelte";
 
     import Graph from "./Graph.svelte";
@@ -21,11 +22,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     } from "./intervals";
     import type { IntervalGraphData } from "./intervals";
     import type { TableDatum, SearchEventMap } from "./graph-helpers";
-    import type { PreferenceStore } from "./preferences";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     import * as tr from "anki/i18n";
-    export let preferences: PreferenceStore;
+    export let preferences: PreferenceStore<pb.BackendProto.GraphPreferences>;
 
     const dispatch = createEventDispatcher<SearchEventMap>();
 
diff --git a/ts/graphs/WithGraphData.svelte b/ts/graphs/WithGraphData.svelte
index 3efe1eff6..1f9413330 100644
--- a/ts/graphs/WithGraphData.svelte
+++ b/ts/graphs/WithGraphData.svelte
@@ -5,11 +5,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import type { Writable } from "svelte/store";
 
+    import pb from "anki/backend_proto";
+
     import useAsync from "sveltelib/async";
     import useAsyncReactive from "sveltelib/asyncReactive";
+    import { getPreferences } from "sveltelib/preferences";
 
-    import { getGraphData, daysToRevlogRange } from "./graph-helpers";
-    import { getPreferences } from "./preferences";
+    import {
+        getGraphData,
+        getGraphPreferences,
+        setGraphPreferences,
+        daysToRevlogRange,
+    } from "./graph-helpers";
 
     export let search: Writable<string>;
     export let days: Writable<number>;
@@ -24,7 +31,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         loading: prefsLoading,
         error: prefsError,
         value: prefsValue,
-    } = useAsync(() => getPreferences());
+    } = useAsync(() =>
+        getPreferences(
+            getGraphPreferences,
+            setGraphPreferences,
+            pb.BackendProto.GraphPreferences.toObject.bind(
+                pb.BackendProto.GraphPreferences
+            )
+        )
+    );
 
     $: revlogRange = daysToRevlogRange($days);
 
diff --git a/ts/graphs/graph-helpers.ts b/ts/graphs/graph-helpers.ts
index 8bd2592ee..5126ce5b6 100644
--- a/ts/graphs/graph-helpers.ts
+++ b/ts/graphs/graph-helpers.ts
@@ -8,7 +8,7 @@
 
 import pb from "anki/backend_proto";
 import type { Selection } from "d3";
-import type { PreferencePayload } from "./preferences";
+import type { PreferencePayload } from "sveltelib/preferences";
 import { postRequest } from "anki/postrequest";
 
 export async function getGraphData(
@@ -26,13 +26,13 @@ export async function getGraphPreferences(): Promise<pb.BackendProto.GraphPrefer
     );
 }
 
-export async function setGraphPreferences(prefs: PreferencePayload): Promise<void> {
-    return (async (): Promise<void> => {
-        await postRequest(
-            "/_anki/setGraphPreferences",
-            pb.BackendProto.GraphPreferences.encode(prefs).finish()
-        );
-    })();
+export async function setGraphPreferences(
+    prefs: PreferencePayload<pb.BackendProto.GraphPreferences>
+): Promise<void> {
+    await postRequest(
+        "/_anki/setGraphPreferences",
+        pb.BackendProto.GraphPreferences.encode(prefs).finish()
+    );
 }
 
 // amount of data to fetch from backend
diff --git a/ts/graphs/preferences.ts b/ts/graphs/preferences.ts
deleted file mode 100644
index 5ac11a394..000000000
--- a/ts/graphs/preferences.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-// languageServerHost taken from MIT sources - see below.
-
-import pb from "anki/backend_proto";
-import { getGraphPreferences, setGraphPreferences } from "./graph-helpers";
-import { Writable, writable, get } from "svelte/store";
-
-export interface CustomStore<T> extends Writable<T> {
-    subscribe: (getter: (value: T) => void) => () => void;
-    set: (value: T) => void;
-}
-
-export type PreferenceStore = {
-    [K in keyof Omit<pb.BackendProto.GraphPreferences, "toJSON">]: CustomStore<
-        pb.BackendProto.GraphPreferences[K]
-    >;
-};
-
-export type PreferencePayload = {
-    [K in keyof Omit<
-        pb.BackendProto.GraphPreferences,
-        "toJSON"
-    >]: pb.BackendProto.GraphPreferences[K];
-};
-
-function createPreference<T>(
-    initialValue: T,
-    savePreferences: () => void
-): CustomStore<T> {
-    const { subscribe, set, update } = writable(initialValue);
-
-    return {
-        subscribe,
-        set: (value: T): void => {
-            set(value);
-            savePreferences();
-        },
-        update: (updater: (value: T) => T): void => {
-            update(updater);
-            savePreferences();
-        },
-    };
-}
-
-function preparePreferences(
-    GraphPreferences: pb.BackendProto.GraphPreferences
-): PreferenceStore {
-    const preferences: Partial<PreferenceStore> = {};
-
-    function constructPreferences(): PreferencePayload {
-        const payload: Partial<PreferencePayload> = {};
-
-        for (const key in preferences as PreferenceStore) {
-            payload[key] = get(preferences[key]);
-        }
-
-        return payload as PreferencePayload;
-    }
-
-    function savePreferences(): void {
-        setGraphPreferences(constructPreferences());
-    }
-
-    for (const [key, value] of Object.entries(
-        pb.BackendProto.GraphPreferences.toObject(GraphPreferences, {
-            defaults: true,
-        })
-    )) {
-        preferences[key] = createPreference(value, savePreferences);
-    }
-
-    return preferences as PreferenceStore;
-}
-
-export async function getPreferences(): Promise<PreferenceStore> {
-    const initialPreferences = await getGraphPreferences();
-    return preparePreferences(initialPreferences);
-}
diff --git a/ts/sveltelib/preferences.ts b/ts/sveltelib/preferences.ts
new file mode 100644
index 000000000..a53505f0c
--- /dev/null
+++ b/ts/sveltelib/preferences.ts
@@ -0,0 +1,85 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+// languageServerHost taken from MIT sources - see below.
+
+import { Writable, writable, get } from "svelte/store";
+
+// import pb from "anki/backend_proto";
+// export async function getGraphPreferences(): Promise<pb.BackendProto.GraphPreferences> {
+// export async function setGraphPreferences(prefs: PreferencePayload): Promise<void> {
+// pb.BackendProto.GraphPreferences.toObject(Preferences, {
+
+export interface CustomStore<T> extends Writable<T> {
+    subscribe: (getter: (value: T) => void) => () => void;
+    set: (value: T) => void;
+}
+
+export type PreferenceStore<T> = {
+    [K in keyof Omit<T, "toJSON">]: CustomStore<T[K]>;
+};
+
+export type PreferencePayload<T> = {
+    [K in keyof Omit<T, "toJSON">]: T[K];
+};
+
+export type PreferenceRaw<T> = {
+    [K in keyof T]: T[K];
+};
+
+function createPreference<T>(
+    initialValue: T,
+    savePreferences: () => void
+): CustomStore<T> {
+    const { subscribe, set, update } = writable(initialValue);
+
+    return {
+        subscribe,
+        set: (value: T): void => {
+            set(value);
+            savePreferences();
+        },
+        update: (updater: (value: T) => T): void => {
+            update(updater);
+            savePreferences();
+        },
+    };
+}
+
+function preparePreferences<T>(
+    Preferences: T,
+    setter: (payload: PreferencePayload<T>) => Promise<void>,
+    toObject: (preferences: T, options: { defaults: boolean }) => PreferenceRaw<T>
+): PreferenceStore<T> {
+    const preferences: Partial<PreferenceStore<T>> = {};
+
+    function constructPreferences(): PreferencePayload<T> {
+        const payload: Partial<PreferencePayload<T>> = {};
+
+        for (const key in preferences as PreferenceStore<T>) {
+            payload[key] = get(preferences[key]);
+        }
+
+        return payload as PreferencePayload<T>;
+    }
+
+    function savePreferences(): void {
+        setter(constructPreferences());
+    }
+
+    for (const [key, value] of Object.entries(
+        toObject(Preferences, { defaults: true })
+    )) {
+        preferences[key] = createPreference(value, savePreferences);
+    }
+
+    return preferences as PreferenceStore<T>;
+}
+
+export async function getPreferences<T>(
+    getter: () => Promise<T>,
+    setter: (payload: PreferencePayload<T>) => Promise<void>,
+    toObject: (preferences: T, options: { defaults: boolean }) => PreferenceRaw<T>
+): Promise<PreferenceStore<T>> {
+    const initialPreferences = await getter();
+    return preparePreferences(initialPreferences, setter, toObject);
+}

From e3a3ca3f25bf8a55af6474638a77c9c353887999 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 23:56:58 +0200
Subject: [PATCH 79/97] Inline GraphData/GraphPreferences getters/setters into
 WithGraphData

---
 ts/graphs/WithGraphData.svelte | 33 +++++++++++++++++++++++++++------
 ts/graphs/graph-helpers.ts     | 28 +---------------------------
 2 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/ts/graphs/WithGraphData.svelte b/ts/graphs/WithGraphData.svelte
index 1f9413330..82e209fe6 100644
--- a/ts/graphs/WithGraphData.svelte
+++ b/ts/graphs/WithGraphData.svelte
@@ -4,23 +4,44 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type { Writable } from "svelte/store";
+    import type { PreferencePayload } from "sveltelib/preferences";
 
     import pb from "anki/backend_proto";
+    import { postRequest } from "anki/postrequest";
 
     import useAsync from "sveltelib/async";
     import useAsyncReactive from "sveltelib/asyncReactive";
     import { getPreferences } from "sveltelib/preferences";
 
-    import {
-        getGraphData,
-        getGraphPreferences,
-        setGraphPreferences,
-        daysToRevlogRange,
-    } from "./graph-helpers";
+    import { daysToRevlogRange } from "./graph-helpers";
 
     export let search: Writable<string>;
     export let days: Writable<number>;
 
+    async function getGraphData(
+        search: string,
+        days: number
+    ): Promise<pb.BackendProto.GraphsOut> {
+        return pb.BackendProto.GraphsOut.decode(
+            await postRequest("/_anki/graphData", JSON.stringify({ search, days }))
+        );
+    }
+
+    async function getGraphPreferences(): Promise<pb.BackendProto.GraphPreferences> {
+        return pb.BackendProto.GraphPreferences.decode(
+            await postRequest("/_anki/graphPreferences", JSON.stringify({}))
+        );
+    }
+
+    async function setGraphPreferences(
+        prefs: PreferencePayload<pb.BackendProto.GraphPreferences>
+    ): Promise<void> {
+        await postRequest(
+            "/_anki/setGraphPreferences",
+            pb.BackendProto.GraphPreferences.encode(prefs).finish()
+        );
+    }
+
     const {
         loading: graphLoading,
         error: graphError,
diff --git a/ts/graphs/graph-helpers.ts b/ts/graphs/graph-helpers.ts
index 5126ce5b6..a17e7495f 100644
--- a/ts/graphs/graph-helpers.ts
+++ b/ts/graphs/graph-helpers.ts
@@ -6,34 +6,8 @@
 @typescript-eslint/no-explicit-any: "off",
 @typescript-eslint/ban-ts-ignore: "off" */
 
-import pb from "anki/backend_proto";
+import type pb from "anki/backend_proto";
 import type { Selection } from "d3";
-import type { PreferencePayload } from "sveltelib/preferences";
-import { postRequest } from "anki/postrequest";
-
-export async function getGraphData(
-    search: string,
-    days: number
-): Promise<pb.BackendProto.GraphsOut> {
-    return pb.BackendProto.GraphsOut.decode(
-        await postRequest("/_anki/graphData", JSON.stringify({ search, days }))
-    );
-}
-
-export async function getGraphPreferences(): Promise<pb.BackendProto.GraphPreferences> {
-    return pb.BackendProto.GraphPreferences.decode(
-        await postRequest("/_anki/graphPreferences", JSON.stringify({}))
-    );
-}
-
-export async function setGraphPreferences(
-    prefs: PreferencePayload<pb.BackendProto.GraphPreferences>
-): Promise<void> {
-    await postRequest(
-        "/_anki/setGraphPreferences",
-        pb.BackendProto.GraphPreferences.encode(prefs).finish()
-    );
-}
 
 // amount of data to fetch from backend
 export enum RevlogRange {

From efc867815a9d53dd063a19569c5d1238434969ed Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 01:12:10 +0200
Subject: [PATCH 80/97] Pass the svelte check for graphs

---
 ts/graphs/CardCounts.svelte    | 2 +-
 ts/graphs/WithGraphData.svelte | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ts/graphs/CardCounts.svelte b/ts/graphs/CardCounts.svelte
index 1dd8bf60d..7f4a7b15f 100644
--- a/ts/graphs/CardCounts.svelte
+++ b/ts/graphs/CardCounts.svelte
@@ -17,7 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let sourceData: pb.BackendProto.GraphsOut;
     import * as tr2 from "anki/i18n";
-    export let preferences: PreferenceStore;
+    export let preferences: PreferenceStore<pb.BackendProto.GraphPreferences>;
 
     let { cardCountsSeparateInactive, browserLinksSupported } = preferences;
     const dispatch = createEventDispatcher<SearchEventMap>();
diff --git a/ts/graphs/WithGraphData.svelte b/ts/graphs/WithGraphData.svelte
index 82e209fe6..4ab436a22 100644
--- a/ts/graphs/WithGraphData.svelte
+++ b/ts/graphs/WithGraphData.svelte
@@ -38,7 +38,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     ): Promise<void> {
         await postRequest(
             "/_anki/setGraphPreferences",
-            pb.BackendProto.GraphPreferences.encode(prefs).finish()
+            new TextDecoder().decode(
+                pb.BackendProto.GraphPreferences.encode(prefs).finish()
+            )
         );
     }
 

From b0fab9c9673d29148ccb9ef2da5d3543e4588313 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 02:32:58 +0200
Subject: [PATCH 81/97] Fix most of svelte-check issues for editor-toolbar

---
 ts/deckconfig/BUILD.bazel                  |  2 +-
 ts/editor-toolbar/BUILD.bazel              |  2 ++
 ts/editor-toolbar/ButtonGroup.svelte       |  2 +-
 ts/editor-toolbar/CommandIconButton.svelte |  4 ++--
 ts/editor-toolbar/DropdownMenu.svelte      |  6 +++---
 ts/editor-toolbar/LabelButton.svelte       |  5 +++--
 ts/editor-toolbar/SelectButton.svelte      |  3 ++-
 ts/editor-toolbar/SquareButton.svelte      |  4 ++--
 ts/editor-toolbar/WithDropdownMenu.svelte  |  6 ++++--
 ts/editor-toolbar/bootstrap.scss           | 10 +++++-----
 ts/package.json                            |  1 +
 ts/sveltelib/dynamicComponent.ts           |  1 +
 ts/yarn.lock                               | 13 +++++++++++++
 13 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/ts/deckconfig/BUILD.bazel b/ts/deckconfig/BUILD.bazel
index 7aa188b90..48bc75add 100644
--- a/ts/deckconfig/BUILD.bazel
+++ b/ts/deckconfig/BUILD.bazel
@@ -7,8 +7,8 @@ load("//ts:vendor.bzl", "copy_bootstrap_icons")
 load("//ts:compile_sass.bzl", "compile_sass")
 
 compile_sass(
-    srcs = ["deckconfig-base.scss"],
     group = "base_css",
+    srcs = ["deckconfig-base.scss"],
     visibility = ["//visibility:public"],
     deps = [
         "//ts/sass:base_lib",
diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 4732629af..d0b1a0ccf 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -23,6 +23,7 @@ compile_sass(
         "bootstrap.scss",
     ],
     deps = [
+        "//ts/bootstrap:scss",
         "//ts/sass:button_mixins_lib",
     ],
     visibility = ["//visibility:public"],
@@ -55,6 +56,7 @@ ts_library(
         "@npm//svelte",
         "@npm//bootstrap",
         "@npm//@popperjs/core",
+        "@npm//@types/bootstrap",
     ],
 )
 
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index e80cb752b..e5b1e3751 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -7,7 +7,7 @@
     export let className = "";
     export let buttons: ToolbarItem[];
 
-    function filterHidden({ hidden, ...props }) {
+    function filterHidden({ hidden = false, ...props }) {
         return props;
     }
 
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 5d3efaffb..c1ff007a3 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -36,11 +36,11 @@
 <script lang="typescript">
     import SquareButton from "./SquareButton.svelte";
 
-    export let id;
+    export let id: string;
     export let className = "";
     export let tooltip: string;
 
-    export let icon;
+    export let icon: string;
     export let command: string;
     export let activatable = true;
     export let disables = true;
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte
index a789dd95a..5dc3c1467 100644
--- a/ts/editor-toolbar/DropdownMenu.svelte
+++ b/ts/editor-toolbar/DropdownMenu.svelte
@@ -1,12 +1,12 @@
 <script lang="typescript">
-    import type { SvelteComponentDefinition } from "./types";
+    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
     import { getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
 
     export let id: string;
-    export let menuItems: SvelteComponentDefinition[];
+    export let menuItems: DynamicSvelteComponent[];
 
-    const nightMode = getContext(nightModeKey);
+    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
 <style lang="scss">
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index e95ce5feb..31cb6d827 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
 
@@ -24,10 +25,10 @@
         return `btn ${className}`;
     }
 
-    const disabled = getContext(disabledKey);
+    const disabled = getContext<Readable<boolean>>(disabledKey);
     $: _disabled = disables && $disabled;
 
-    const nightMode = getContext(nightModeKey);
+    const nightMode = getContext<boolean>(nightModeKey);
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index 8b96ce14c..362763eb6 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey } from "./contextKeys";
     import SelectOption from "./SelectOption.svelte";
@@ -25,7 +26,7 @@
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
 
-    const disabled = getContext(disabledKey);
+    const disabled = getContext<Readable<boolean>>(disabledKey);
     $: _disabled = disables && $disabled;
 </script>
 
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 3a434db7c..91fa241a3 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -25,10 +25,10 @@
         return `btn ${className}`;
     }
 
-    const disabled = getContext(disabledKey);
+    const disabled = getContext<Readable<boolean>>(disabledKey);
     $: _disabled = disables && $disabled;
 
-    const nightMode = getContext(nightModeKey);
+    const nightMode = getContext<boolean>(nightModeKey);
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/editor-toolbar/WithDropdownMenu.svelte
index d412833b4..196187927 100644
--- a/ts/editor-toolbar/WithDropdownMenu.svelte
+++ b/ts/editor-toolbar/WithDropdownMenu.svelte
@@ -1,5 +1,7 @@
 <script lang="typescript">
+    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
     import type { ToolbarItem } from "./types";
+
     import Dropdown from "bootstrap/js/dist/dropdown";
 
     /* Bootstrap dropdown are normally declared alongside the associated button
@@ -30,13 +32,13 @@
          * be displayed outside of the visible area
          */
         const dropdown = new Dropdown(button);
-        const menu = button.getRootNode().getElementById(menuId);
+        const menu = (button.getRootNode() as Document /* or shadow root */).getElementById(menuId);
 
         if (!menu) {
             console.log(`Could not find menu "${menuId}" for dropdown menu.`);
         }
 
-        dropdown._menu = menu;
+        (dropdown as any)._menu = menu;
     }
 </script>
 
diff --git a/ts/editor-toolbar/bootstrap.scss b/ts/editor-toolbar/bootstrap.scss
index f5f023c9c..922639789 100644
--- a/ts/editor-toolbar/bootstrap.scss
+++ b/ts/editor-toolbar/bootstrap.scss
@@ -1,8 +1,8 @@
-@import "ts/node_modules/bootstrap/scss/functions";
-@import "ts/node_modules/bootstrap/scss/variables";
-@import "ts/node_modules/bootstrap/scss/mixins";
+@import "ts/bootstrap/functions";
+@import "ts/bootstrap/variables";
+@import "ts/bootstrap/mixins";
 
 $btn-disabled-opacity: 0.4;
 
-@import "ts/node_modules/bootstrap/scss/buttons";
-@import "ts/node_modules/bootstrap/scss/dropdown";
+@import "ts/bootstrap/buttons";
+@import "ts/bootstrap/dropdown";
diff --git a/ts/package.json b/ts/package.json
index 5940f45b8..ec90dee17 100644
--- a/ts/package.json
+++ b/ts/package.json
@@ -11,6 +11,7 @@
         "@pyoner/svelte-types": "^3.4.4-2",
         "@sqltools/formatter": "^1.2.2",
         "@tsconfig/svelte": "^1.0.10",
+        "@types/bootstrap": "^5.0.12",
         "@types/d3": "^6.3.0",
         "@types/diff": "^5.0.0",
         "@types/jest": "^26.0.22",
diff --git a/ts/sveltelib/dynamicComponent.ts b/ts/sveltelib/dynamicComponent.ts
index 0752f3004..795097450 100644
--- a/ts/sveltelib/dynamicComponent.ts
+++ b/ts/sveltelib/dynamicComponent.ts
@@ -4,6 +4,7 @@ export interface DynamicSvelteComponent<
     T extends typeof SvelteComponentDev = typeof SvelteComponentDev
 > {
     component: T;
+    [k: string]: unknown;
 }
 
 export const dynamicComponent = <
diff --git a/ts/yarn.lock b/ts/yarn.lock
index 14613590b..a3bd50347 100644
--- a/ts/yarn.lock
+++ b/ts/yarn.lock
@@ -524,6 +524,11 @@
   resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-5.9.55.tgz#7cba058135afd5d8a3da977f51b71ffc6a3a3699"
   integrity sha512-gO0ZpKIeCn9vFg46QduK9MM+n1fuCNwSdcdlBTtbafnnuvwLveK2uj+byhdLtg/8VJGXDhp+DJ35QUMbeWeULA==
 
+"@popperjs/core@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
+  integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==
+
 "@popperjs/core@^2.9.2":
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
@@ -644,6 +649,14 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/bootstrap@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@types/bootstrap/-/bootstrap-5.0.12.tgz#d044b6404bf3c89fc90df2822a86dfcd349db522"
+  integrity sha512-iowwPfp9Au6aoxS2hOgeRjXE25xdfLrTpmxzQSUs21z5qY3UZpmjSIWF4h8jPYPEXgZioIKLB2OSU8oWzzJAcQ==
+  dependencies:
+    "@popperjs/core" "2.6.0"
+    "@types/jquery" "*"
+
 "@types/d3-array@*":
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-2.9.0.tgz#fb6c3d7d7640259e68771cd90cc5db5ac1a1a012"

From 60515f579e8a7ccb54501027a4e934b45051eb97 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 02:49:46 +0200
Subject: [PATCH 82/97] Make editor-toolbar pass eslint

---
 ts/editor-toolbar/cloze.ts    |  4 ++--
 ts/editor-toolbar/color.ts    |  4 ++--
 ts/editor-toolbar/format.ts   |  4 ++--
 ts/editor-toolbar/index.ts    | 14 +++++++-------
 ts/editor-toolbar/notetype.ts |  4 ++--
 ts/editor-toolbar/template.ts |  6 +++---
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/ts/editor-toolbar/cloze.ts b/ts/editor-toolbar/cloze.ts
index 76f5925a9..8d47f23c3 100644
--- a/ts/editor-toolbar/cloze.ts
+++ b/ts/editor-toolbar/cloze.ts
@@ -1,7 +1,7 @@
 import IconButton from "./IconButton.svelte";
 import type { IconButtonProps } from "./IconButton";
 
-import { dynamicComponent } from "sveltelib/dynamicComponent";
+import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
 
 import bracketsIcon from "./code-brackets.svg";
@@ -35,7 +35,7 @@ function onCloze(event: MouseEvent): void {
 
 const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButton);
 
-export function getClozeButton() {
+export function getClozeButton(): DynamicSvelteComponent<typeof IconButton> & IconButtonProps {
     return iconButton({
         id: "cloze",
         icon: bracketsIcon,
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index 79bd65a10..0595bec7e 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -5,7 +5,7 @@ import type { ColorPickerProps } from "./ColorPicker";
 import ButtonGroup from "./ButtonGroup.svelte";
 import type { ButtonGroupProps } from "./ButtonGroup";
 
-import { dynamicComponent } from "sveltelib/dynamicComponent";
+import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
 
 import squareFillIcon from "./square-fill.svg";
@@ -29,7 +29,7 @@ const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButt
 const colorPicker = dynamicComponent<typeof ColorPicker, ColorPickerProps>(ColorPicker);
 const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
-export function getColorGroup() {
+export function getColorGroup(): DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps {
     const forecolorButton = iconButton({
         icon: squareFillIcon,
         className: "forecolor",
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index 2aeb8d4f6..6fc447d64 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -3,7 +3,7 @@ import type { CommandIconButtonProps } from "./CommandIconButton";
 import ButtonGroup from "./ButtonGroup.svelte";
 import type { ButtonGroupProps } from "./ButtonGroup";
 
-import { dynamicComponent } from "sveltelib/dynamicComponent";
+import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
 
 import boldIcon from "./type-bold.svg";
@@ -19,7 +19,7 @@ const commandIconButton = dynamicComponent<
 >(CommandIconButton);
 const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
-export function getFormatGroup() {
+export function getFormatGroup(): DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps {
     const boldButton = commandIconButton({
         icon: boldIcon,
         command: "bold",
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 07afda036..f5ff68c7e 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -23,15 +23,15 @@ interface Hideable {
     hidden?: boolean;
 }
 
-function showComponent(component: Hideable) {
+function showComponent(component: Hideable): void {
     component.hidden = false;
 }
 
-function hideComponent(component: Hideable) {
+function hideComponent(component: Hideable): void {
     component.hidden = true;
 }
 
-function toggleComponent(component: Hideable) {
+function toggleComponent(component: Hideable): void {
     component.hidden = !component.hidden;
 }
 
@@ -97,14 +97,14 @@ class EditorToolbar extends HTMLElement {
         this.updateButtonGroup<Hideable>(toggleComponent, group);
     }
 
-    insertButtonGroup(newGroup: ButtonGroupProps, group: string | number = 0) {
+    insertButtonGroup(newGroup: ButtonGroupProps, group: string | number = 0): void {
         this.buttons?.update((buttonGroups) => {
             const newButtonGroup = buttonGroup(newGroup);
             return insert(buttonGroups, newButtonGroup, group);
         });
     }
 
-    addButtonGroup(newGroup: ButtonGroupProps, group: string | number = -1) {
+    addButtonGroup(newGroup: ButtonGroupProps, group: string | number = -1): void {
         this.buttons?.update((buttonGroups) => {
             const newButtonGroup = buttonGroup(newGroup);
             return add(buttonGroups, newButtonGroup, group);
@@ -141,7 +141,7 @@ class EditorToolbar extends HTMLElement {
         newButton: ToolbarItem & Identifiable,
         group: string | number,
         button: string | number = 0
-    ) {
+    ): void {
         this.updateButtonGroup((component) => {
             component.buttons = insert(
                 component.buttons as (ToolbarItem & Identifiable)[],
@@ -155,7 +155,7 @@ class EditorToolbar extends HTMLElement {
         newButton: ToolbarItem & Identifiable,
         group: string | number,
         button: string | number = -1
-    ) {
+    ): void {
         this.updateButtonGroup((component) => {
             component.buttons = add(
                 component.buttons as (ToolbarItem & Identifiable)[],
diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts
index b78f1b56b..69b2081cf 100644
--- a/ts/editor-toolbar/notetype.ts
+++ b/ts/editor-toolbar/notetype.ts
@@ -3,14 +3,14 @@ import type { LabelButtonProps } from "./LabelButton";
 import ButtonGroup from "./ButtonGroup.svelte";
 import type { ButtonGroupProps } from "./ButtonGroup";
 
-import { dynamicComponent } from "sveltelib/dynamicComponent";
+import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
 import { bridgeCommand } from "anki/bridgecommand";
 import * as tr from "anki/i18n";
 
 const labelButton = dynamicComponent<typeof LabelButton, LabelButtonProps>(LabelButton);
 const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
-export function getNotetypeGroup() {
+export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps {
     const fieldsButton = labelButton({
         onClick: () => bridgeCommand("fields"),
         disables: false,
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index 683b66c0b..352a0cb86 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -10,7 +10,7 @@ import ButtonGroup from "./ButtonGroup.svelte";
 import type { ButtonGroupProps } from "./ButtonGroup";
 
 import { bridgeCommand } from "anki/bridgecommand";
-import { dynamicComponent } from "sveltelib/dynamicComponent";
+import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent";
 import * as tr from "anki/i18n";
 
 import paperclipIcon from "./paperclip.svg";
@@ -47,7 +47,7 @@ const dropdownItem = dynamicComponent<typeof DropdownItem, DropdownItemProps>(
 );
 const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
-export function getTemplateGroup() {
+export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps {
     const attachmentButton = iconButton({
         icon: paperclipIcon,
         onClick: onAttachment,
@@ -88,7 +88,7 @@ export function getTemplateGroup() {
     });
 }
 
-export function getTemplateMenus() {
+export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu> & DropdownMenuProps)[] {
     const mathjaxMenu = dropdownMenu({
         id: mathjaxMenuId,
         menuItems: [

From 5225ef31b3fdd17cea773515441e36a553ff3733 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 03:29:45 +0200
Subject: [PATCH 83/97] Explicitly name file in output_css for esbuild

---
 ts/editor-toolbar/BUILD.bazel | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index d0b1a0ccf..3e0cbc8c9 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -99,7 +99,7 @@ esbuild(
     external = [
         "protobufjs/light",
     ],
-    output_css = True,
+    output_css = "editor-toolbar.css",
     visibility = ["//visibility:public"],
     deps = [
         "//ts/lib",

From 58a85d838604a29dd9a403f78f666552564d6abf Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 03:41:10 +0200
Subject: [PATCH 84/97] Add shortcut labels for mathjax menu

---
 ts/editor-toolbar/template.ts | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index 352a0cb86..354f7a330 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -95,22 +95,19 @@ export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu>
             dropdownItem({
                 // @ts-expect-error
                 onClick: () => wrap("\\(", "\\)"),
-                tooltip: "test",
-                endLabel: "test",
+                endLabel: "Ctrl+M, M",
                 label: tr.editingMathjaxInline(),
             }),
             dropdownItem({
                 // @ts-expect-error
                 onClick: () => wrap("\\[", "\\]"),
-                tooltip: "test",
-                endLabel: "test",
+                endLabel: "Ctrl+M, E",
                 label: tr.editingMathjaxBlock(),
             }),
             dropdownItem({
                 // @ts-expect-error
                 onClick: () => wrap("\\(\\ce{", "}\\)"),
-                tooltip: "test",
-                endLabel: "test",
+                endLabel: "Ctrl+M, C",
                 label: tr.editingMathjaxChemistry(),
             }),
         ],

From 53ae03becc565746c3ba213d5b9f10bb95f610a8 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 03:49:53 +0200
Subject: [PATCH 85/97] Add Preview shortcut for browser

---
 qt/aqt/browser/browser.py | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/qt/aqt/browser/browser.py b/qt/aqt/browser/browser.py
index 6e485c83e..2a0606789 100644
--- a/qt/aqt/browser/browser.py
+++ b/qt/aqt/browser/browser.py
@@ -396,8 +396,14 @@ $editorToolbar.addButton({{
 """
             )
 
+        def add_preview_shortcut(cuts, editor: Editor) -> None:
+            cuts.append(("Ctrl+Shift+P", self.onTogglePreview, True))
+
+
         gui_hooks.editor_did_init.append(add_preview_button)
+        gui_hooks.editor_did_init_shortcuts.append(add_preview_shortcut)
         self.editor = aqt.editor.Editor(self.mw, self.form.fieldsArea, self)
+        gui_hooks.editor_did_init_shortcuts.remove(add_preview_shortcut)
         gui_hooks.editor_did_init.remove(add_preview_button)
 
     @ensure_editor_saved

From d07086da19b20c66e2b6c16b1c707fa9095cf772 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 13:30:19 +0200
Subject: [PATCH 86/97] Use new bootstrap dep

---
 ts/editor-toolbar/BUILD.bazel | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 3e0cbc8c9..9d96c691c 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -23,7 +23,7 @@ compile_sass(
         "bootstrap.scss",
     ],
     deps = [
-        "//ts/bootstrap:scss",
+        "//ts/sass/bootstrap",
         "//ts/sass:button_mixins_lib",
     ],
     visibility = ["//visibility:public"],

From f9565cbb807ca36822d6760088e037154e5b32ac Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 14:04:41 +0200
Subject: [PATCH 87/97] Use new bootstrap library paths

---
 ts/editor-toolbar/BUILD.bazel              | 5 ++++-
 ts/editor-toolbar/ColorPicker.svelte       | 4 ++--
 ts/editor-toolbar/CommandIconButton.svelte | 2 +-
 ts/editor-toolbar/DropdownItem.svelte      | 4 ++--
 ts/editor-toolbar/DropdownMenu.svelte      | 4 ++--
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 9d96c691c..5576245f3 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -13,6 +13,9 @@ svelte_names = [f.replace(".svelte", "") for f in svelte_files]
 compile_svelte(
     name = "svelte",
     srcs = svelte_files,
+    deps = [
+        "//ts/sass/bootstrap",
+    ],
 )
 
 compile_sass(
@@ -137,6 +140,6 @@ svelte_check(
     srcs = glob([
         "*.ts",
         "*.svelte",
-    ]),
+    ]) + ["//ts/sass/bootstrap"],
 )
 
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 3d78e2c9f..eec691cfb 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -24,8 +24,8 @@
 <style lang="scss">
     @use "ts/sass/button_mixins" as button;
 
-    @import "ts/node_modules/bootstrap/scss/functions";
-    @import "ts/node_modules/bootstrap/scss/variables";
+    @import "ts/bootstrap/functions";
+    @import "ts/bootstrap/variables";
 
     button {
         padding: 0;
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index c1ff007a3..2db6675b8 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -51,7 +51,7 @@
     if (activatable) {
         updateButton(command);
 
-        commandMap.subscribe((map: Map<string, boolean>): void => {
+        commandMap.subscribe((map: Map<string, boolean>): () => void => {
             active = map.get(command);
             return () => map.delete(command);
         });
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index 019294b24..510670dee 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -14,8 +14,8 @@
 </script>
 
 <style lang="scss">
-    @import "ts/node_modules/bootstrap/scss/functions";
-    @import "ts/node_modules/bootstrap/scss/variables";
+    @import "ts/bootstrap/functions";
+    @import "ts/bootstrap/variables";
 
     button {
         display: flex;
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte
index 5dc3c1467..84e2e78fe 100644
--- a/ts/editor-toolbar/DropdownMenu.svelte
+++ b/ts/editor-toolbar/DropdownMenu.svelte
@@ -10,8 +10,8 @@
 </script>
 
 <style lang="scss">
-    @import "ts/node_modules/bootstrap/scss/functions";
-    @import "ts/node_modules/bootstrap/scss/variables";
+    @import "ts/bootstrap/functions";
+    @import "ts/bootstrap/variables";
 
     ul {
         background-color: $light;

From 12c0a26dc9fccdb33b0c6a11ba247ca1ed1df935 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 14:58:13 +0200
Subject: [PATCH 88/97] Satisfy prettier

---
 ts/editor-toolbar/CommandIconButton.svelte | 2 +-
 ts/editor-toolbar/WithDropdownMenu.svelte  | 3 ++-
 ts/editor-toolbar/cloze.ts                 | 3 ++-
 ts/editor-toolbar/color.ts                 | 3 ++-
 ts/editor-toolbar/format.ts                | 3 ++-
 ts/editor-toolbar/notetype.ts              | 3 ++-
 ts/editor-toolbar/template.ts              | 6 ++++--
 7 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 2db6675b8..ceea3b1d3 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -51,7 +51,7 @@
     if (activatable) {
         updateButton(command);
 
-        commandMap.subscribe((map: Map<string, boolean>): () => void => {
+        commandMap.subscribe((map: Map<string, boolean>): (() => void) => {
             active = map.get(command);
             return () => map.delete(command);
         });
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/editor-toolbar/WithDropdownMenu.svelte
index 196187927..24f2dec95 100644
--- a/ts/editor-toolbar/WithDropdownMenu.svelte
+++ b/ts/editor-toolbar/WithDropdownMenu.svelte
@@ -32,7 +32,8 @@
          * be displayed outside of the visible area
          */
         const dropdown = new Dropdown(button);
-        const menu = (button.getRootNode() as Document /* or shadow root */).getElementById(menuId);
+        const menu = (button.getRootNode() as Document) /* or shadow root */
+            .getElementById(menuId);
 
         if (!menu) {
             console.log(`Could not find menu "${menuId}" for dropdown menu.`);
diff --git a/ts/editor-toolbar/cloze.ts b/ts/editor-toolbar/cloze.ts
index 8d47f23c3..2ba757ee7 100644
--- a/ts/editor-toolbar/cloze.ts
+++ b/ts/editor-toolbar/cloze.ts
@@ -35,7 +35,8 @@ function onCloze(event: MouseEvent): void {
 
 const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButton);
 
-export function getClozeButton(): DynamicSvelteComponent<typeof IconButton> & IconButtonProps {
+export function getClozeButton(): DynamicSvelteComponent<typeof IconButton> &
+    IconButtonProps {
     return iconButton({
         id: "cloze",
         icon: bracketsIcon,
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index 0595bec7e..5b0129f9a 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -29,7 +29,8 @@ const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(IconButt
 const colorPicker = dynamicComponent<typeof ColorPicker, ColorPickerProps>(ColorPicker);
 const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
-export function getColorGroup(): DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps {
+export function getColorGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
+    ButtonGroupProps {
     const forecolorButton = iconButton({
         icon: squareFillIcon,
         className: "forecolor",
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index 6fc447d64..2541dbe37 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -19,7 +19,8 @@ const commandIconButton = dynamicComponent<
 >(CommandIconButton);
 const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
-export function getFormatGroup(): DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps {
+export function getFormatGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
+    ButtonGroupProps {
     const boldButton = commandIconButton({
         icon: boldIcon,
         command: "bold",
diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts
index 69b2081cf..33ea753e2 100644
--- a/ts/editor-toolbar/notetype.ts
+++ b/ts/editor-toolbar/notetype.ts
@@ -10,7 +10,8 @@ import * as tr from "anki/i18n";
 const labelButton = dynamicComponent<typeof LabelButton, LabelButtonProps>(LabelButton);
 const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
-export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps {
+export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
+    ButtonGroupProps {
     const fieldsButton = labelButton({
         onClick: () => bridgeCommand("fields"),
         disables: false,
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index 354f7a330..332a7cd80 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -47,7 +47,8 @@ const dropdownItem = dynamicComponent<typeof DropdownItem, DropdownItemProps>(
 );
 const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
-export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps {
+export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
+    ButtonGroupProps {
     const attachmentButton = iconButton({
         icon: paperclipIcon,
         onClick: onAttachment,
@@ -88,7 +89,8 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     });
 }
 
-export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu> & DropdownMenuProps)[] {
+export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu> &
+    DropdownMenuProps)[] {
     const mathjaxMenu = dropdownMenu({
         id: mathjaxMenuId,
         menuItems: [

From 82f6e19955d0d68224aef9172ed3276f904058c3 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 15:20:37 +0200
Subject: [PATCH 89/97] Add Latex formatting options to menu

*  Format shortcuts in monospace font and increase padding a little bit
---
 qt/aqt/browser/browser.py             |  1 -
 ts/editor-toolbar/DropdownItem.svelte |  8 +++-
 ts/editor-toolbar/template.ts         | 63 ++++++++++++++++++---------
 3 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/qt/aqt/browser/browser.py b/qt/aqt/browser/browser.py
index 2a0606789..e78f1a173 100644
--- a/qt/aqt/browser/browser.py
+++ b/qt/aqt/browser/browser.py
@@ -399,7 +399,6 @@ $editorToolbar.addButton({{
         def add_preview_shortcut(cuts, editor: Editor) -> None:
             cuts.append(("Ctrl+Shift+P", self.onTogglePreview, True))
 
-
         gui_hooks.editor_did_init.append(add_preview_button)
         gui_hooks.editor_did_init_shortcuts.append(add_preview_shortcut)
         self.editor = aqt.editor.Editor(self.mw, self.form.fieldsArea, self)
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index 510670dee..d074e6171 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -45,6 +45,10 @@
         font-size: calc(var(--toolbar-size) / 2.3);
         color: inherit;
     }
+
+    .monospace {
+        font-family: monospace;
+    }
 </style>
 
 <button
@@ -54,6 +58,6 @@
     title={tooltip}
     on:click={onClick}
     on:mousedown|preventDefault>
-    <span class:me-2={endLabel}>{label}</span>
-    {#if endLabel}<span>{endLabel}</span>{/if}
+    <span class:me-3={endLabel}>{label}</span>
+    {#if endLabel}<span class="monospace">{endLabel}</span>{/if}
 </button>
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index 332a7cd80..96790ec54 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -91,28 +91,51 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
 
 export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu> &
     DropdownMenuProps)[] {
+    const mathjaxMenuItems = [
+        dropdownItem({
+            // @ts-expect-error
+            onClick: () => wrap("\\(", "\\)"),
+            label: tr.editingMathjaxInline(),
+            endLabel: "Ctrl+M, M",
+        }),
+        dropdownItem({
+            // @ts-expect-error
+            onClick: () => wrap("\\[", "\\]"),
+            label: tr.editingMathjaxBlock(),
+            endLabel: "Ctrl+M, E",
+        }),
+        dropdownItem({
+            // @ts-expect-error
+            onClick: () => wrap("\\(\\ce{", "}\\)"),
+            label: tr.editingMathjaxChemistry(),
+            endLabel: "Ctrl+M, C",
+        }),
+    ];
+
+    const latexMenuItems = [
+        dropdownItem({
+            // @ts-expect-error
+            onClick: () => wrap("[latex]", "[/latex]"),
+            label: tr.editingLatex(),
+            endLabel: "Ctrl+T, T",
+        }),
+        dropdownItem({
+            // @ts-expect-error
+            onClick: () => wrap("[$]", "[/$]"),
+            label: tr.editingLatexEquation(),
+            endLabel: "Ctrl+T, E",
+        }),
+        dropdownItem({
+            // @ts-expect-error
+            onClick: () => wrap("[$$]", "[/$$]"),
+            label: tr.editingLatexMathEnv(),
+            endLabel: "Ctrl+T, M",
+        }),
+    ];
+
     const mathjaxMenu = dropdownMenu({
         id: mathjaxMenuId,
-        menuItems: [
-            dropdownItem({
-                // @ts-expect-error
-                onClick: () => wrap("\\(", "\\)"),
-                endLabel: "Ctrl+M, M",
-                label: tr.editingMathjaxInline(),
-            }),
-            dropdownItem({
-                // @ts-expect-error
-                onClick: () => wrap("\\[", "\\]"),
-                endLabel: "Ctrl+M, E",
-                label: tr.editingMathjaxBlock(),
-            }),
-            dropdownItem({
-                // @ts-expect-error
-                onClick: () => wrap("\\(\\ce{", "}\\)"),
-                endLabel: "Ctrl+M, C",
-                label: tr.editingMathjaxChemistry(),
-            }),
-        ],
+        menuItems: [...mathjaxMenuItems, ...latexMenuItems],
     });
 
     return [mathjaxMenu];

From 449d28596e15112f689bd67e2d4cf9a75ab1d739 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 15:33:47 +0200
Subject: [PATCH 90/97] Pass svelte_check for editor-toolbar

---
 ts/editor-toolbar/BUILD.bazel         |  8 ++++++--
 ts/editor-toolbar/ColorPicker.svelte  |  4 ++--
 ts/editor-toolbar/DropdownItem.svelte |  4 ++--
 ts/editor-toolbar/DropdownMenu.svelte |  4 ++--
 ts/editor-toolbar/bootstrap.scss      | 10 +++++-----
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 5576245f3..4dc5cc360 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -14,6 +14,7 @@ compile_svelte(
     name = "svelte",
     srcs = svelte_files,
     deps = [
+        "//ts/sass:button_mixins_lib",
         "//ts/sass/bootstrap",
     ],
 )
@@ -26,8 +27,8 @@ compile_sass(
         "bootstrap.scss",
     ],
     deps = [
-        "//ts/sass/bootstrap",
         "//ts/sass:button_mixins_lib",
+        "//ts/sass/bootstrap",
     ],
     visibility = ["//visibility:public"],
 )
@@ -140,6 +141,9 @@ svelte_check(
     srcs = glob([
         "*.ts",
         "*.svelte",
-    ]) + ["//ts/sass/bootstrap"],
+    ]) + [
+        "//ts/sass:button_mixins_lib",
+        "//ts/sass/bootstrap",
+    ],
 )
 
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index eec691cfb..eafe55c42 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -24,8 +24,8 @@
 <style lang="scss">
     @use "ts/sass/button_mixins" as button;
 
-    @import "ts/bootstrap/functions";
-    @import "ts/bootstrap/variables";
+    @import "ts/sass/bootstrap/functions";
+    @import "ts/sass/bootstrap/variables";
 
     button {
         padding: 0;
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index d074e6171..49356498f 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -14,8 +14,8 @@
 </script>
 
 <style lang="scss">
-    @import "ts/bootstrap/functions";
-    @import "ts/bootstrap/variables";
+    @import "ts/sass/bootstrap/functions";
+    @import "ts/sass/bootstrap/variables";
 
     button {
         display: flex;
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte
index 84e2e78fe..cf8a2f969 100644
--- a/ts/editor-toolbar/DropdownMenu.svelte
+++ b/ts/editor-toolbar/DropdownMenu.svelte
@@ -10,8 +10,8 @@
 </script>
 
 <style lang="scss">
-    @import "ts/bootstrap/functions";
-    @import "ts/bootstrap/variables";
+    @import "ts/sass/bootstrap/functions";
+    @import "ts/sass/bootstrap/variables";
 
     ul {
         background-color: $light;
diff --git a/ts/editor-toolbar/bootstrap.scss b/ts/editor-toolbar/bootstrap.scss
index 922639789..0988a6de7 100644
--- a/ts/editor-toolbar/bootstrap.scss
+++ b/ts/editor-toolbar/bootstrap.scss
@@ -1,8 +1,8 @@
-@import "ts/bootstrap/functions";
-@import "ts/bootstrap/variables";
-@import "ts/bootstrap/mixins";
+@import "ts/sass/bootstrap/functions";
+@import "ts/sass/bootstrap/variables";
+@import "ts/sass/bootstrap/mixins";
 
 $btn-disabled-opacity: 0.4;
 
-@import "ts/bootstrap/buttons";
-@import "ts/bootstrap/dropdown";
+@import "ts/sass/bootstrap/buttons";
+@import "ts/sass/bootstrap/dropdown";

From fb8a2f4dc88b518314bd1c4f38fa01eccfa37d38 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 15:47:02 +0200
Subject: [PATCH 91/97] Experimental: Add bootstrap to svelte_check
 dependencies

---
 ts/editor-toolbar/BUILD.bazel | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 4dc5cc360..786f3129f 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -144,6 +144,7 @@ svelte_check(
     ]) + [
         "//ts/sass:button_mixins_lib",
         "//ts/sass/bootstrap",
+        "@npm//bootstrap",
     ],
 )
 

From 5702b3c273df2629ff62e35fa778e506c600a11e Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 15:50:29 +0200
Subject: [PATCH 92/97] Add type to add_preview_shortcut

---
 qt/aqt/browser/browser.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/qt/aqt/browser/browser.py b/qt/aqt/browser/browser.py
index e78f1a173..c7510fe9b 100644
--- a/qt/aqt/browser/browser.py
+++ b/qt/aqt/browser/browser.py
@@ -396,7 +396,7 @@ $editorToolbar.addButton({{
 """
             )
 
-        def add_preview_shortcut(cuts, editor: Editor) -> None:
+        def add_preview_shortcut(cuts: List[Tuple], editor: Editor) -> None:
             cuts.append(("Ctrl+Shift+P", self.onTogglePreview, True))
 
         gui_hooks.editor_did_init.append(add_preview_button)

From bd4fe7cc93fc9395445f3963265a0ac19f1250c5 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 15:51:56 +0200
Subject: [PATCH 93/97] Use bootstrap types for editor-toolbar svelte_check

---
 ts/editor-toolbar/BUILD.bazel | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index 786f3129f..3c3071d1e 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -144,7 +144,7 @@ svelte_check(
     ]) + [
         "//ts/sass:button_mixins_lib",
         "//ts/sass/bootstrap",
-        "@npm//bootstrap",
+        "@npm//@types/bootstrap",
     ],
 )
 

From b0885ef0cd215c678ca65b5e5fd62cf73bf028b6 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 15:59:52 +0200
Subject: [PATCH 94/97] Add license headers

---
 ts/editor-toolbar/ButtonDropdown.svelte    | 4 ++++
 ts/editor-toolbar/ButtonGroup.d.ts         | 2 ++
 ts/editor-toolbar/ButtonGroup.svelte       | 4 ++++
 ts/editor-toolbar/ColorPicker.d.ts         | 2 ++
 ts/editor-toolbar/ColorPicker.svelte       | 4 ++++
 ts/editor-toolbar/CommandIconButton.d.ts   | 2 ++
 ts/editor-toolbar/CommandIconButton.svelte | 4 ++++
 ts/editor-toolbar/DropdownItem.d.ts        | 2 ++
 ts/editor-toolbar/DropdownItem.svelte      | 4 ++++
 ts/editor-toolbar/DropdownMenu.d.ts        | 2 ++
 ts/editor-toolbar/DropdownMenu.svelte      | 4 ++++
 ts/editor-toolbar/EditorToolbar.svelte     | 4 ++++
 ts/editor-toolbar/IconButton.d.ts          | 2 ++
 ts/editor-toolbar/IconButton.svelte        | 4 ++++
 ts/editor-toolbar/LabelButton.d.ts         | 2 ++
 ts/editor-toolbar/LabelButton.svelte       | 4 ++++
 ts/editor-toolbar/RawButton.svelte         | 4 ++++
 ts/editor-toolbar/SelectButton.svelte      | 4 ++++
 ts/editor-toolbar/SelectOption.svelte      | 4 ++++
 ts/editor-toolbar/SquareButton.svelte      | 4 ++++
 ts/editor-toolbar/WithDropdownMenu.d.ts    | 2 ++
 ts/editor-toolbar/WithDropdownMenu.svelte  | 4 ++++
 ts/editor-toolbar/cloze.ts                 | 2 ++
 ts/editor-toolbar/color.ts                 | 2 ++
 ts/editor-toolbar/contextKeys.ts           | 2 ++
 ts/editor-toolbar/format.ts                | 2 ++
 ts/editor-toolbar/identifiable.ts          | 2 ++
 ts/editor-toolbar/index.ts                 | 2 ++
 ts/editor-toolbar/notetype.ts              | 2 ++
 ts/editor-toolbar/template.ts              | 2 ++
 ts/editor-toolbar/types.d.ts               | 2 ++
 ts/sveltelib/WithBase.svelte               | 4 ++++
 ts/sveltelib/dynamicComponent.ts           | 2 ++
 33 files changed, 96 insertions(+)

diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte
index 654e0ca7e..fa1c5b26c 100644
--- a/ts/editor-toolbar/ButtonDropdown.svelte
+++ b/ts/editor-toolbar/ButtonDropdown.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     import type { ToolbarItem } from "./types";
     import ButtonGroup from "./ButtonGroup.svelte";
diff --git a/ts/editor-toolbar/ButtonGroup.d.ts b/ts/editor-toolbar/ButtonGroup.d.ts
index 6a762eaa3..e4a2d7ce5 100644
--- a/ts/editor-toolbar/ButtonGroup.d.ts
+++ b/ts/editor-toolbar/ButtonGroup.d.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import type { ToolbarItem } from "./types";
 
 export interface ButtonGroupProps {
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index e5b1e3751..18ff29fe0 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     import type { ToolbarItem } from "./types";
     import { getContext } from "svelte";
diff --git a/ts/editor-toolbar/ColorPicker.d.ts b/ts/editor-toolbar/ColorPicker.d.ts
index 25ae4a6d8..fff74056e 100644
--- a/ts/editor-toolbar/ColorPicker.d.ts
+++ b/ts/editor-toolbar/ColorPicker.d.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 export interface ColorPickerProps {
     id?: string;
     className?: string;
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index eafe55c42..621972ae6 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     import { getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
diff --git a/ts/editor-toolbar/CommandIconButton.d.ts b/ts/editor-toolbar/CommandIconButton.d.ts
index 439a2ea8d..2fe43d032 100644
--- a/ts/editor-toolbar/CommandIconButton.d.ts
+++ b/ts/editor-toolbar/CommandIconButton.d.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 export interface CommandIconButtonProps {
     id?: string;
     className?: string;
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index ceea3b1d3..ec53827fc 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript" context="module">
     import { writable } from "svelte/store";
 
diff --git a/ts/editor-toolbar/DropdownItem.d.ts b/ts/editor-toolbar/DropdownItem.d.ts
index afdbda955..81c9138aa 100644
--- a/ts/editor-toolbar/DropdownItem.d.ts
+++ b/ts/editor-toolbar/DropdownItem.d.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 export interface DropdownItemProps {
     id?: string;
     className?: string;
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index 49356498f..3a772503e 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     import { getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
diff --git a/ts/editor-toolbar/DropdownMenu.d.ts b/ts/editor-toolbar/DropdownMenu.d.ts
index 1805a3ba7..9e43bc953 100644
--- a/ts/editor-toolbar/DropdownMenu.d.ts
+++ b/ts/editor-toolbar/DropdownMenu.d.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import type { ToolbarItem } from "./types";
 
 export interface DropdownMenuProps {
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte
index cf8a2f969..4ddb2f888 100644
--- a/ts/editor-toolbar/DropdownMenu.svelte
+++ b/ts/editor-toolbar/DropdownMenu.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
     import { getContext } from "svelte";
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index fef9bedd7..13a0d9b7c 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script context="module" lang="typescript">
     import "./legacy.css";
     import { writable } from "svelte/store";
diff --git a/ts/editor-toolbar/IconButton.d.ts b/ts/editor-toolbar/IconButton.d.ts
index 18fe01dc9..3de549cbe 100644
--- a/ts/editor-toolbar/IconButton.d.ts
+++ b/ts/editor-toolbar/IconButton.d.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 export interface IconButtonProps {
     id?: string;
     className?: string;
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index f8bdc5786..ff9e0a0d4 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     import SquareButton from "./SquareButton.svelte";
 
diff --git a/ts/editor-toolbar/LabelButton.d.ts b/ts/editor-toolbar/LabelButton.d.ts
index 3ed88b9e0..14b713dd7 100644
--- a/ts/editor-toolbar/LabelButton.d.ts
+++ b/ts/editor-toolbar/LabelButton.d.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 export interface LabelButtonProps {
     id?: string;
     className?: string;
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 31cb6d827..e150bed08 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
diff --git a/ts/editor-toolbar/RawButton.svelte b/ts/editor-toolbar/RawButton.svelte
index 89778431a..cdee475ea 100644
--- a/ts/editor-toolbar/RawButton.svelte
+++ b/ts/editor-toolbar/RawButton.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     import { onMount, createEventDispatcher } from "svelte";
 
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index 362763eb6..559ab8cfc 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
diff --git a/ts/editor-toolbar/SelectOption.svelte b/ts/editor-toolbar/SelectOption.svelte
index 6e357d188..c8ea91390 100644
--- a/ts/editor-toolbar/SelectOption.svelte
+++ b/ts/editor-toolbar/SelectOption.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     export let label: string;
     export let value: string;
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 91fa241a3..21a4319e6 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     import type { Readable } from "svelte/store";
     import { getContext, onMount, createEventDispatcher } from "svelte";
diff --git a/ts/editor-toolbar/WithDropdownMenu.d.ts b/ts/editor-toolbar/WithDropdownMenu.d.ts
index fc5c3e928..d0f163568 100644
--- a/ts/editor-toolbar/WithDropdownMenu.d.ts
+++ b/ts/editor-toolbar/WithDropdownMenu.d.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import type { ToolbarItem } from "./types";
 
 export interface WithDropdownMenuProps {
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/editor-toolbar/WithDropdownMenu.svelte
index 24f2dec95..bf48a4152 100644
--- a/ts/editor-toolbar/WithDropdownMenu.svelte
+++ b/ts/editor-toolbar/WithDropdownMenu.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
     import type { ToolbarItem } from "./types";
diff --git a/ts/editor-toolbar/cloze.ts b/ts/editor-toolbar/cloze.ts
index 2ba757ee7..55fd8ea60 100644
--- a/ts/editor-toolbar/cloze.ts
+++ b/ts/editor-toolbar/cloze.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import IconButton from "./IconButton.svelte";
 import type { IconButtonProps } from "./IconButton";
 
diff --git a/ts/editor-toolbar/color.ts b/ts/editor-toolbar/color.ts
index 5b0129f9a..2ed6f932b 100644
--- a/ts/editor-toolbar/color.ts
+++ b/ts/editor-toolbar/color.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import IconButton from "./IconButton.svelte";
 import type { IconButtonProps } from "./IconButton";
 import ColorPicker from "./ColorPicker.svelte";
diff --git a/ts/editor-toolbar/contextKeys.ts b/ts/editor-toolbar/contextKeys.ts
index 09ef3bbc3..0d3dc587f 100644
--- a/ts/editor-toolbar/contextKeys.ts
+++ b/ts/editor-toolbar/contextKeys.ts
@@ -1,2 +1,4 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 export const nightModeKey = Symbol("nightMode");
 export const disabledKey = Symbol("disabled");
diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/format.ts
index 2541dbe37..b555f8ae8 100644
--- a/ts/editor-toolbar/format.ts
+++ b/ts/editor-toolbar/format.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import CommandIconButton from "./CommandIconButton.svelte";
 import type { CommandIconButtonProps } from "./CommandIconButton";
 import ButtonGroup from "./ButtonGroup.svelte";
diff --git a/ts/editor-toolbar/identifiable.ts b/ts/editor-toolbar/identifiable.ts
index 93f054c2e..41030f094 100644
--- a/ts/editor-toolbar/identifiable.ts
+++ b/ts/editor-toolbar/identifiable.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 export interface Identifiable {
     id?: string;
 }
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index f5ff68c7e..f4cb52853 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import type { SvelteComponentDev } from "svelte/internal";
 import type { ToolbarItem } from "./types";
 
diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts
index 33ea753e2..80a14095d 100644
--- a/ts/editor-toolbar/notetype.ts
+++ b/ts/editor-toolbar/notetype.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import LabelButton from "./LabelButton.svelte";
 import type { LabelButtonProps } from "./LabelButton";
 import ButtonGroup from "./ButtonGroup.svelte";
diff --git a/ts/editor-toolbar/template.ts b/ts/editor-toolbar/template.ts
index 96790ec54..90ca847a2 100644
--- a/ts/editor-toolbar/template.ts
+++ b/ts/editor-toolbar/template.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import IconButton from "./IconButton.svelte";
 import type { IconButtonProps } from "./IconButton";
 import DropdownMenu from "./DropdownMenu.svelte";
diff --git a/ts/editor-toolbar/types.d.ts b/ts/editor-toolbar/types.d.ts
index 8b5e24218..a272d405d 100644
--- a/ts/editor-toolbar/types.d.ts
+++ b/ts/editor-toolbar/types.d.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 import type { SvelteComponentDev } from "svelte/internal";
 
diff --git a/ts/sveltelib/WithBase.svelte b/ts/sveltelib/WithBase.svelte
index 9b9156843..f3a8eb7ef 100644
--- a/ts/sveltelib/WithBase.svelte
+++ b/ts/sveltelib/WithBase.svelte
@@ -1,3 +1,7 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
 <script lang="typescript">
     import useAsync from "sveltelib/async";
     import { setupI18n } from "anki/i18n";
diff --git a/ts/sveltelib/dynamicComponent.ts b/ts/sveltelib/dynamicComponent.ts
index 795097450..4504e8908 100644
--- a/ts/sveltelib/dynamicComponent.ts
+++ b/ts/sveltelib/dynamicComponent.ts
@@ -1,3 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import type { SvelteComponentDev } from "svelte/internal";
 
 export interface DynamicSvelteComponent<

From 304a7f2f776821108074ca11543c472ff5ef60d5 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 16:44:07 +0200
Subject: [PATCH 95/97] Make fields square again

This was an experiment, to adjust the field border-radius to the
buttons, but I think it looks cleaner if the fields are square
---
 ts/editor/editable.scss  | 3 ---
 ts/editor/editingArea.ts | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/ts/editor/editable.scss b/ts/editor/editable.scss
index 8a2e9e374..9cd7186f3 100644
--- a/ts/editor/editable.scss
+++ b/ts/editor/editable.scss
@@ -6,9 +6,6 @@ anki-editable {
     overflow: auto;
     padding: 6px;
 
-    /* Fit bootstraps .rounded */
-    border-radius: 0.25rem;
-
     &:empty::after {
         content: "\a";
         white-space: pre;
diff --git a/ts/editor/editingArea.ts b/ts/editor/editingArea.ts
index e522bb8ef..5002ba817 100644
--- a/ts/editor/editingArea.ts
+++ b/ts/editor/editingArea.ts
@@ -23,7 +23,7 @@ export class EditingArea extends HTMLDivElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
-        this.className = "field rounded";
+        this.className = "field";
 
         const rootStyle = document.createElement("link");
         rootStyle.setAttribute("rel", "stylesheet");

From ccc48bd1d7975dfac7bb8d4a6aa3fbf0dccb293e Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 15 Apr 2021 18:35:46 +0200
Subject: [PATCH 96/97] Abandon btn-secondary and btn-light in favor our own
 definitions btn-night and btn-day

---
 ts/editor-toolbar/ColorPicker.svelte  | 26 ++------
 ts/editor-toolbar/LabelButton.svelte  |  9 ++-
 ts/editor-toolbar/SquareButton.svelte |  9 ++-
 ts/sass/button_mixins.scss            | 86 ++++++++++++++++++++++++---
 4 files changed, 93 insertions(+), 37 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 621972ae6..f491531c8 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -41,26 +41,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         overflow: hidden;
     }
 
-    .btn-light {
-        @include button.light-hover-active;
-
-        background: content-box
-                linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
-            content-box
-                linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-            content-box
-                linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
-            border-box $light;
+    @include button.btn-day($with-disabled: false) using ($base) {
+        @include button.rainbow($base);
     }
 
-    .btn-secondary {
-        background: content-box
-                linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
-            content-box
-                linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
-            content-box
-                linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
-            border-box $secondary;
+    @include button.btn-night($with-disabled: false) using ($base) {
+        @include button.rainbow($base);
     }
 
     input {
@@ -74,8 +60,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     tabindex="-1"
     {id}
     class={extendClassName(className)}
-    class:btn-light={!nightMode}
-    class:btn-secondary={nightMode}
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
     title={tooltip}
     on:click={delegateToInput}
     on:mousedown|preventDefault>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index e150bed08..0b838ce2e 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -48,9 +48,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         height: var(--toolbar-size);
     }
 
-    .btn-light {
-        @include button.light-hover-active;
-    }
+    @include button.btn-day;
+    @include button.btn-night;
 </style>
 
 <button
@@ -58,8 +57,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {id}
     class={extendClassName(className)}
     class:dropdown-toggle={dropdownToggle}
-    class:btn-light={!nightMode}
-    class:btn-secondary={nightMode}
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
     tabindex="-1"
     disabled={_disabled}
     title={tooltip}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 21a4319e6..f0fc17e1b 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -45,9 +45,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         padding: 0;
     }
 
-    .btn-light {
-        @include button.light-hover-active;
-    }
+    @include button.btn-day;
+    @include button.btn-night;
 
     span {
         display: inline-block;
@@ -77,8 +76,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class={extendClassName(className)}
     class:active
     class:dropdown-toggle={dropdownToggle}
-    class:btn-light={!nightMode}
-    class:btn-secondary={nightMode}
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
     tabindex="-1"
     title={tooltip}
     disabled={_disabled}
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index 45d66d7a6..acb917ea9 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -1,10 +1,82 @@
-@mixin light-hover-active {
-    border-color: var(--faint-border) !important;
+@mixin btn-day($with-disabled: true) {
+    $base-color: white;
 
-    &:hover,
-    &:focus,
-    &:active,
-    &.active {
-        background-color: #e3e3e8;
+    .btn-day {
+        color: var(--text-fg);
+        background-color: $base-color;
+        border-color: var(--medium-border) !important;
+
+        @content ($base-color);
+
+        &:hover {
+            background-color: darken($base-color, 8%);
+        }
+
+        &:active,
+        &.active {
+            @include impressed-shadow(0.25);
+        }
+
+        &:active.active {
+            box-shadow: none;
+        }
+
+        @if ($with-disabled) {
+            &[disabled] {
+                background-color: $base-color !important;
+                box-shadow: none !important;
+            }
+        }
     }
 }
+
+@mixin btn-night($with-disabled: true) {
+    $base-color: #666;
+
+    .btn-night {
+        color: var(--text-fg);
+        background-color: $base-color;
+        border-color: $base-color;
+
+        @content ($base-color);
+
+        &:hover {
+            background-color: lighten($base-color, 8%);
+            border-color: lighten($base-color, 8%);
+        }
+
+        &:active,
+        &.active {
+            @include impressed-shadow(0.35);
+            border-color: darken($base-color, 8%);
+        }
+
+        &:active.active {
+            box-shadow: none;
+            border-color: $base-color;
+        }
+
+        @if ($with-disabled) {
+            &[disabled] {
+                background-color: $base-color !important;
+                box-shadow: none !important;
+                border-color: $base-color !important;
+            }
+        }
+    }
+}
+
+@mixin impressed-shadow($intensity) {
+    box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5)
+        rgba(black, $intensity);
+}
+
+@mixin rainbow($base) {
+    background: content-box
+            linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
+        content-box
+            linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
+        content-box
+            linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
+        border-box $base;
+}

From 0f01e421be440bf0c5f597efba168977ed938248 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 16 Apr 2021 02:04:38 +0200
Subject: [PATCH 97/97] Solve the race conditions of button insertion by
 operating on promises in EditorToolbar

---
 ts/editor-toolbar/index.ts | 68 +++++++++++++++++++++++++++-----------
 1 file changed, 48 insertions(+), 20 deletions(-)

diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index f4cb52853..1d6e0f4b0 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -39,32 +39,46 @@ function toggleComponent(component: Hideable): void {
 
 const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
+let buttonsResolve: (
+    value: Writable<(ToolbarItem<typeof ButtonGroup> & ButtonGroupProps)[]>
+) => void;
+let menusResolve: (value: Writable<ToolbarItem[]>) => void;
+
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponentDev;
 
-    buttons?: Writable<(ToolbarItem<typeof ButtonGroup> & ButtonGroupProps)[]>;
-    menus?: Writable<ToolbarItem[]>;
+    buttonsPromise: Promise<
+        Writable<(ToolbarItem<typeof ButtonGroup> & ButtonGroupProps)[]>
+    > = new Promise((resolve) => {
+        buttonsResolve = resolve;
+    });
+    menusPromise: Promise<Writable<ToolbarItem[]>> = new Promise((resolve): void => {
+        menusResolve = resolve;
+    });
 
     connectedCallback(): void {
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
-            this.buttons = writable([
+            const buttons = writable([
                 getNotetypeGroup(),
                 getFormatGroup(),
                 getColorGroup(),
                 getTemplateGroup(),
             ]);
-            this.menus = writable([...getTemplateMenus()]);
+            const menus = writable([...getTemplateMenus()]);
 
             this.component = new EditorToolbarSvelte({
                 target: this,
                 props: {
-                    buttons: this.buttons,
-                    menus: this.menus,
+                    buttons,
+                    menus,
                     nightMode: document.documentElement.classList.contains(
                         "night-mode"
                     ),
                 },
             });
+
+            buttonsResolve(buttons);
+            menusResolve(menus);
         });
     }
 
@@ -74,16 +88,22 @@ class EditorToolbar extends HTMLElement {
         ) => void,
         group: string | number
     ): void {
-        this.buttons?.update((buttonGroups) => {
-            const foundGroup = search(buttonGroups, group);
+        this.buttonsPromise.then((buttons) => {
+            buttons.update((buttonGroups) => {
+                const foundGroup = search(buttonGroups, group);
 
-            if (foundGroup) {
-                update(
-                    foundGroup as ToolbarItem<typeof ButtonGroup> & ButtonGroupProps & T
-                );
-            }
+                if (foundGroup) {
+                    update(
+                        foundGroup as ToolbarItem<typeof ButtonGroup> &
+                            ButtonGroupProps &
+                            T
+                    );
+                }
 
-            return buttonGroups;
+                return buttonGroups;
+            });
+
+            return buttons;
         });
     }
 
@@ -100,16 +120,24 @@ class EditorToolbar extends HTMLElement {
     }
 
     insertButtonGroup(newGroup: ButtonGroupProps, group: string | number = 0): void {
-        this.buttons?.update((buttonGroups) => {
-            const newButtonGroup = buttonGroup(newGroup);
-            return insert(buttonGroups, newButtonGroup, group);
+        this.buttonsPromise.then((buttons) => {
+            buttons.update((buttonGroups) => {
+                const newButtonGroup = buttonGroup(newGroup);
+                return insert(buttonGroups, newButtonGroup, group);
+            });
+
+            return buttons;
         });
     }
 
     addButtonGroup(newGroup: ButtonGroupProps, group: string | number = -1): void {
-        this.buttons?.update((buttonGroups) => {
-            const newButtonGroup = buttonGroup(newGroup);
-            return add(buttonGroups, newButtonGroup, group);
+        this.buttonsPromise.then((buttons) => {
+            buttons.update((buttonGroups) => {
+                const newButtonGroup = buttonGroup(newGroup);
+                return add(buttonGroups, newButtonGroup, group);
+            });
+
+            return buttons;
         });
     }