From 6d6c798ca31df6e4ca6c07831783ab5e99897c2d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 27 Apr 2021 17:20:13 +0200
Subject: [PATCH 01/39] Simplify structure of EditorToolbar and ButtonGroup in
 editor HTML file

---
 qt/aqt/editor.py                        | 18 ++-------
 ts/editor-toolbar/ButtonDropdown.svelte |  4 +-
 ts/editor-toolbar/ButtonGroup.svelte    | 54 ++++++++++---------------
 ts/editor-toolbar/DropdownMenu.svelte   | 14 +------
 ts/editor-toolbar/EditorToolbar.svelte  |  6 +--
 ts/editor-toolbar/index.ts              | 19 ++++++---
 ts/editor/fields.scss                   |  6 +--
 ts/editor/toolbar.ts                    |  5 ++-
 ts/sass/base.scss                       |  9 +++++
 9 files changed, 58 insertions(+), 77 deletions(-)

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 5065abb29..338868cf2 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -76,18 +76,9 @@ audio = (
 )
 
 _html = """
-<style>
-:root {
-    --bg-color: %s;
-}
-</style>
-<div>
-    <div id="editorToolbar"></div>
-    <div id="fields">
-    </div>
-    <div id="dupes" class="is-inactive">
-        <a href="#" onclick="pycmd('dupes');return false;">%s</a>
-    </div>
+<div id="fields"></div>
+<div id="dupes" class="is-inactive">
+    <a href="#" onclick="pycmd('dupes');return false;">%s</a>
 </div>
 """
 
@@ -135,10 +126,9 @@ class Editor:
         self.web.set_bridge_command(self.onBridgeCmd, self)
         self.outerLayout.addWidget(self.web, 1)
 
-        bgcol = self.mw.app.palette().window().color().name()  # type: ignore
         # then load page
         self.web.stdHtml(
-            _html % (bgcol, tr.editing_show_duplicates()),
+            _html % tr.editing_show_duplicates(),
             css=[
                 "css/editor.css",
             ],
diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte
index a1585c12f..65e778e6a 100644
--- a/ts/editor-toolbar/ButtonDropdown.svelte
+++ b/ts/editor-toolbar/ButtonDropdown.svelte
@@ -17,13 +17,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <style>
-    :global(ul.btn-dropdown-menu) {
+    :global(.dropdown-menu.btn-dropdown-menu) {
         display: none;
         background-color: var(--window-bg);
         border-color: var(--medium-border);
     }
 
-    :global(ul.btn-dropdown-menu.show) {
+    :global(.dropdown-menu.btn-dropdown-menu.show) {
         display: flex;
     }
 </style>
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index ad2101a19..a23c5f5c2 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -19,16 +19,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <style lang="scss">
-    ul {
+    div {
         display: flex;
         justify-items: start;
 
         flex-wrap: var(--toolbar-wrap);
-        overflow-y: auto;
 
         padding: calc(var(--toolbar-size) / 10);
         margin: 0;
 
+        > :global(button),
+        > :global(select) {
+            border-radius: calc(var(--toolbar-size) / 7.5);
+
+            &:not(:nth-of-type(1)) {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:not(:nth-last-of-type(1)) {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+
         &.border-overlap-group {
             :global(button),
             :global(select) {
@@ -43,43 +57,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             }
         }
     }
-
-    li {
-        display: contents;
-
-        > :global(button),
-        > :global(select) {
-            border-radius: 0;
-        }
-
-        &:nth-child(1) {
-            > :global(button),
-            > :global(select) {
-                border-top-left-radius: calc(var(--toolbar-size) / 7.5);
-                border-bottom-left-radius: calc(var(--toolbar-size) / 7.5);
-            }
-        }
-
-        &:nth-last-child(1) {
-            > :global(button),
-            > :global(select) {
-                border-top-right-radius: calc(var(--toolbar-size) / 7.5);
-                border-bottom-right-radius: calc(var(--toolbar-size) / 7.5);
-            }
-        }
-    }
 </style>
 
-<ul
+<div
     {id}
     class={className}
     class:border-overlap-group={!nightMode}
-    class:gap-group={nightMode}>
+    class:gap-group={nightMode}
+    div="ltr">
     {#each items as button}
         {#if !button.hidden}
-            <li>
-                <svelte:component this={button.component} {...filterHidden(button)} />
-            </li>
+            <svelte:component this={button.component} {...filterHidden(button)} />
         {/if}
     {/each}
-</ul>
+</div>
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte
index f616dd0a5..707ac07ad 100644
--- a/ts/editor-toolbar/DropdownMenu.svelte
+++ b/ts/editor-toolbar/DropdownMenu.svelte
@@ -4,29 +4,19 @@ 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";
-    import { nightModeKey } from "./contextKeys";
 
     export let id: string;
     export let items: ToolbarItem[];
-
-    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
 <style lang="scss">
-    @use 'ts/sass/button_mixins' as button;
-
     ul {
-        background-color: white;
+        background-color: var(--frame-bg);
         border-color: var(--medium-border);
     }
-
-    .night-mode {
-        background-color: var(--bg-color);
-    }
 </style>
 
-<ul {id} class="dropdown-menu" class:night-mode={nightMode}>
+<ul {id} class="dropdown-menu">
     {#each items as menuItem}
         <li>
             <svelte:component this={menuItem.component} {...menuItem} />
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 5626973dc..525e9c7f0 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -121,17 +121,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         left: 0;
         z-index: 10;
 
-        background: var(--bg-color);
+        background-color: var(--window-bg);
         border-bottom: 1px solid var(--border);
     }
 </style>
 
-<div {style}>
+<nav {style}>
     {#each menus as menu}
         <svelte:component this={menu.component} {...menu} />
     {/each}
-</div>
 
-<nav {style}>
     <ButtonGroup items={buttons} className="p-0 mb-1" />
 </nav>
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 0e64430cb..11dcda3ae 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -7,13 +7,22 @@ export { default as EditorToolbar } from "./EditorToolbar.svelte";
 
 import "./bootstrap.css";
 
-export function editorToolbar(
-    target: HTMLElement,
-    buttons: IterableToolbarItem[] = [],
-    menus: ToolbarItem[] = []
-): EditorToolbar {
+interface EditorToolbarArgs {
+    target: HTMLElement;
+    anchor?: HTMLElement;
+    buttons?: IterableToolbarItem[];
+    menus?: ToolbarItem[];
+}
+
+export function editorToolbar({
+    target,
+    anchor = undefined,
+    buttons = [],
+    menus = [],
+}: EditorToolbarArgs): EditorToolbar {
     return new EditorToolbar({
         target,
+        anchor,
         props: {
             buttons,
             menus,
diff --git a/ts/editor/fields.scss b/ts/editor/fields.scss
index cdc64d079..a84047681 100644
--- a/ts/editor/fields.scss
+++ b/ts/editor/fields.scss
@@ -33,7 +33,7 @@
     bottom: 0;
 
     text-align: center;
-    background-color: var(--bg-color);
+    background-color: var(--window-bg);
 
     &.is-inactive {
         display: none;
@@ -59,7 +59,3 @@
         opacity: 0.5;
     }
 }
-
-.flex-basis-100 {
-    flex-basis: 100%;
-}
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index 930c3ee41..ae9b5d65a 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -16,7 +16,8 @@ export function initToolbar(i18n: Promise<void>) {
 
     document.addEventListener("DOMContentLoaded", () => {
         i18n.then(() => {
-            const target = document.getElementById("editorToolbar")!;
+            const target = document.body;
+            const anchor = document.getElementById("fields")!;
 
             const buttons = [
                 getNotetypeGroup(),
@@ -28,7 +29,7 @@ export function initToolbar(i18n: Promise<void>) {
 
             const menus = [...getFormatBlockMenus(), ...getTemplateMenus()];
 
-            toolbarResolve(editorToolbar(target, buttons, menus));
+            toolbarResolve(editorToolbar({ target, anchor, buttons, menus }));
         });
     });
 
diff --git a/ts/sass/base.scss b/ts/sass/base.scss
index 40fe2973e..9fdfe050c 100644
--- a/ts/sass/base.scss
+++ b/ts/sass/base.scss
@@ -9,6 +9,15 @@ $link-hover-decoration: none;
 @import "ts/sass/bootstrap/bootstrap-reboot";
 @import "ts/sass/bootstrap/bootstrap-utilities";
 
+/* Bootstrap "extensions" */
+.flex-basis-100 {
+    flex-basis: 100%;
+}
+
+.flex-basis-75 {
+    flex-basis: 75%;
+}
+
 body,
 html {
     overscroll-behavior: none;

From 4736b1ce1ca2a525962950b3c59243e12feb84d7 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 27 Apr 2021 21:01:44 +0200
Subject: [PATCH 02/39] Move Notetype buttons to using slots instead of dynamic
 components

---
 ts/editor-toolbar/ButtonGroup.d.ts         |  10 -
 ts/editor-toolbar/ButtonGroup.svelte       |  34 +--
 ts/editor-toolbar/ButtonGroupButton.svelte |  13 ++
 ts/editor-toolbar/EditorToolbar.svelte     |  87 +-------
 ts/editor-toolbar/LabelButton.d.ts         |  11 -
 ts/editor-toolbar/LabelButton.svelte       |  44 ++--
 ts/editor-toolbar/NoteTypeButtons.svelte   |  33 +++
 ts/editor-toolbar/WithShortcut.d.ts        |   9 -
 ts/editor-toolbar/WithShortcut.svelte      |  19 +-
 ts/editor-toolbar/contextKeys.ts           |   2 +
 ts/editor-toolbar/dynamicComponents.ts     |  17 --
 ts/editor/addons.ts                        |  60 ++---
 ts/editor/cloze.ts                         |  78 +++----
 ts/editor/color.ts                         |  86 +++----
 ts/editor/formatBlock.ts                   | 210 +++++++++---------
 ts/editor/formatInline.ts                  | 154 ++++++-------
 ts/editor/index.ts                         |   2 +-
 ts/editor/notetype.ts                      |  58 ++---
 ts/editor/template.ts                      | 246 ++++++++++-----------
 ts/editor/toolbar.ts                       |  22 +-
 20 files changed, 557 insertions(+), 638 deletions(-)
 delete mode 100644 ts/editor-toolbar/ButtonGroup.d.ts
 create mode 100644 ts/editor-toolbar/ButtonGroupButton.svelte
 delete mode 100644 ts/editor-toolbar/LabelButton.d.ts
 create mode 100644 ts/editor-toolbar/NoteTypeButtons.svelte
 delete mode 100644 ts/editor-toolbar/WithShortcut.d.ts

diff --git a/ts/editor-toolbar/ButtonGroup.d.ts b/ts/editor-toolbar/ButtonGroup.d.ts
deleted file mode 100644
index f5f273e45..000000000
--- a/ts/editor-toolbar/ButtonGroup.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// 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 {
-    id: string;
-    className?: string;
-    items: ToolbarItem[];
-    fullWidth?: boolean;
-}
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index a23c5f5c2..053dca2fa 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -3,19 +3,31 @@ 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";
-    import { nightModeKey } from "./contextKeys";
+    import { setContext, getContext } from "svelte";
+    import { nightModeKey, buttonGroupKey } from "./contextKeys";
 
     export let id: string | undefined = undefined;
-    export let className = "";
-    export let items: ToolbarItem[];
+    let className = "";
 
-    function filterHidden({ hidden = false, ...props }) {
-        return props;
+    export { className as class };
+    const nightMode = getContext(nightModeKey);
+
+    export let api = {};
+
+    let index = 0;
+
+    interface ButtonRegistration {
+        order: number;
     }
 
-    const nightMode = getContext(nightModeKey);
+    function registerButton(): ButtonRegistration {
+        index++;
+        return { order: index };
+    }
+
+    setContext(buttonGroupKey, Object.assign(api, {
+        registerButton,
+    }))
 </script>
 
 <style lang="scss">
@@ -65,9 +77,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:border-overlap-group={!nightMode}
     class:gap-group={nightMode}
     div="ltr">
-    {#each items as button}
-        {#if !button.hidden}
-            <svelte:component this={button.component} {...filterHidden(button)} />
-        {/if}
-    {/each}
+    <slot />
 </div>
diff --git a/ts/editor-toolbar/ButtonGroupButton.svelte b/ts/editor-toolbar/ButtonGroupButton.svelte
new file mode 100644
index 000000000..1bb1e8f4a
--- /dev/null
+++ b/ts/editor-toolbar/ButtonGroupButton.svelte
@@ -0,0 +1,13 @@
+<!--
+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 { buttonGroupKey } from "./contextKeys";
+
+    const { registerButton } = getContext(buttonGroupKey);
+    const { order } = registerButton();
+</script>
+
+<slot {order} />
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 525e9c7f0..4dd74b557 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -21,15 +21,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Identifier } from "./identifiable";
     import type { ToolbarItem, IterableToolbarItem } from "./types";
 
-    import { setContext } from "svelte";
+    import { setContext, onMount } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
     import { add, insert, updateRecursive } from "./identifiable";
     import { showComponent, hideComponent, toggleComponent } from "./hideable";
 
-    import ButtonGroup from "./ButtonGroup.svelte";
+    import NoteTypeButtons from "./NoteTypeButtons.svelte";
+
+    let api = {};
 
-    export let buttons: IterableToolbarItem[];
-    export let menus: ToolbarItem[];
     export let nightMode: boolean;
 
     setContext(nightModeKey, nightMode);
@@ -41,77 +41,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: style = `--toolbar-size: ${size}px; --toolbar-wrap: ${
         wraps ? "wrap" : "nowrap"
     }`;
-
-    export function updateButton(
-        update: (component: ToolbarItem) => ToolbarItem,
-        ...identifiers: Identifier[]
-    ): void {
-        buttons = updateRecursive(
-            update,
-            ({ items: buttons } as unknown) as ToolbarItem,
-            ...identifiers
-        ).items as IterableToolbarItem[];
-    }
-
-    export function showButton(...identifiers: Identifier[]): void {
-        updateButton(showComponent, ...identifiers);
-    }
-
-    export function hideButton(...identifiers: Identifier[]): void {
-        updateButton(hideComponent, ...identifiers);
-    }
-
-    export function toggleButton(...identifiers: Identifier[]): void {
-        updateButton(toggleComponent, ...identifiers);
-    }
-
-    export function insertButton(
-        newButton: ToolbarItem,
-        ...identifiers: Identifier[]
-    ): void {
-        const initIdentifiers = identifiers.slice(0, -1);
-        const lastIdentifier = identifiers[identifiers.length - 1];
-        updateButton(
-            (component: ToolbarItem) =>
-                insert(component as IterableToolbarItem, newButton, lastIdentifier),
-
-            ...initIdentifiers
-        );
-    }
-
-    export function addButton(
-        newButton: ToolbarItem,
-        ...identifiers: Identifier[]
-    ): void {
-        const initIdentifiers = identifiers.slice(0, -1);
-        const lastIdentifier = identifiers[identifiers.length - 1];
-        updateButton(
-            (component: ToolbarItem) =>
-                add(component as IterableToolbarItem, newButton, lastIdentifier),
-            ...initIdentifiers
-        );
-    }
-
-    export function updateMenu(
-        update: (component: ToolbarItem) => ToolbarItem,
-        ...identifiers: Identifier[]
-    ): void {
-        menus = updateRecursive(
-            update,
-            ({ items: menus } as unknown) as ToolbarItem,
-            ...identifiers
-        ).items as ToolbarItem[];
-    }
-
-    export function addMenu(newMenu: ToolbarItem, ...identifiers: Identifier[]): void {
-        const initIdentifiers = identifiers.slice(0, -1);
-        const lastIdentifier = identifiers[identifiers.length - 1];
-        updateMenu(
-            (component: ToolbarItem) =>
-                add(component as IterableToolbarItem, newMenu, lastIdentifier),
-            ...initIdentifiers
-        );
-    }
 </script>
 
 <style lang="scss">
@@ -126,10 +55,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<nav {style}>
-    {#each menus as menu}
-        <svelte:component this={menu.component} {...menu} />
-    {/each}
-
-    <ButtonGroup items={buttons} className="p-0 mb-1" />
+<nav {style} class="pb-1">
+    <NoteTypeButtons />
 </nav>
diff --git a/ts/editor-toolbar/LabelButton.d.ts b/ts/editor-toolbar/LabelButton.d.ts
deleted file mode 100644
index 14b713dd7..000000000
--- a/ts/editor-toolbar/LabelButton.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// 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;
-
-    label: string;
-    tooltip: string;
-    onClick: (event: MouseEvent) => void;
-    disables?: boolean;
-}
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 1de49442c..fc031e733 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -4,19 +4,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type { Readable } from "svelte/store";
+    import ButtonGroupButton from "./ButtonGroupButton.svelte";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
-    import { mergeTooltipAndShortcut } from "./helpers";
 
-    export let id: string;
+    export let id: string | undefined;
     export let className = "";
+
     export let tooltip: string | undefined;
-    export let shortcutLabel: string | undefined;
-    export let label: string;
-
-    $: title = mergeTooltipAndShortcut(tooltip, shortcutLabel);
-
-    export let onClick: (event: MouseEvent) => void;
     export let disables = true;
     export let dropdownToggle = false;
 
@@ -56,18 +51,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @include button.btn-night;
 </style>
 
-<button
-    bind:this={buttonRef}
-    {id}
-    class={extendClassName(className)}
-    class:dropdown-toggle={dropdownToggle}
-    class:btn-day={!nightMode}
-    class:btn-night={nightMode}
-    tabindex="-1"
-    disabled={_disabled}
-    {title}
-    {...extraProps}
-    on:click={onClick}
-    on:mousedown|preventDefault>
-    {label}
-</button>
+<ButtonGroupButton let:order={order}>
+    <button
+        bind:this={buttonRef}
+        {id}
+        class={extendClassName(className)}
+        class:dropdown-toggle={dropdownToggle}
+        class:btn-day={!nightMode}
+        class:btn-night={nightMode}
+        style={`order: ${order};`}
+        tabindex="-1"
+        disabled={_disabled}
+        title={tooltip}
+        {...extraProps}
+        on:click
+        on:mousedown|preventDefault>
+        <slot />
+    </button>
+</ButtonGroupButton>
diff --git a/ts/editor-toolbar/NoteTypeButtons.svelte b/ts/editor-toolbar/NoteTypeButtons.svelte
new file mode 100644
index 000000000..a50095dc5
--- /dev/null
+++ b/ts/editor-toolbar/NoteTypeButtons.svelte
@@ -0,0 +1,33 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import { bridgeCommand } from "lib/bridgecommand";
+    import * as tr from "lib/i18n";
+
+    import ButtonGroup from "./ButtonGroup.svelte";
+    import LabelButton from "./LabelButton.svelte";
+    import WithShortcut from "./WithShortcut.svelte";
+
+    export let api = {};
+</script>
+
+<ButtonGroup id="notetype" class="" {api}>
+    <LabelButton
+        disables={false}
+        tooltip={tr.editingCustomizeFields()}
+        on:click={() => bridgeCommand("fields")}>
+        {tr.editingFields()}...
+    </LabelButton>
+
+    <WithShortcut shortcut="Control+KeyL" let:createShortcut let:shortcutLabel>
+        <LabelButton
+            disables={false}
+            tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
+            on:click={() => bridgeCommand("cards")}
+            on:mount={createShortcut}>
+            {tr.editingCards()}...
+        </LabelButton>
+    </WithShortcut>
+</ButtonGroup>
diff --git a/ts/editor-toolbar/WithShortcut.d.ts b/ts/editor-toolbar/WithShortcut.d.ts
deleted file mode 100644
index ec8b54535..000000000
--- a/ts/editor-toolbar/WithShortcut.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// 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 WithShortcutProps {
-    button: ToolbarItem;
-    shortcut: string;
-    optionalModifiers: string[];
-}
diff --git a/ts/editor-toolbar/WithShortcut.svelte b/ts/editor-toolbar/WithShortcut.svelte
index 5fd85fd92..aab7707a7 100644
--- a/ts/editor-toolbar/WithShortcut.svelte
+++ b/ts/editor-toolbar/WithShortcut.svelte
@@ -3,25 +3,15 @@ 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";
     import type { Modifier } from "lib/shortcuts";
 
     import { onDestroy } from "svelte";
     import { registerShortcut, getPlatformString } from "lib/shortcuts";
 
-    export let button: ToolbarItem;
     export let shortcut: string;
-    export let optionalModifiers: Modifier[];
+    export let optionalModifiers: Modifier[] | undefined = [];
 
-    function extend({ ...rest }: DynamicSvelteComponent): DynamicSvelteComponent {
-        const shortcutLabel = getPlatformString(shortcut);
-
-        return {
-            shortcutLabel,
-            ...rest,
-        };
-    }
+    const shortcutLabel = getPlatformString(shortcut);
 
     let deregister: () => void;
 
@@ -40,7 +30,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onDestroy(() => deregister());
 </script>
 
-<svelte:component
-    this={button.component}
-    {...extend(button)}
-    on:mount={createShortcut} />
+<slot {createShortcut} {shortcutLabel} />
diff --git a/ts/editor-toolbar/contextKeys.ts b/ts/editor-toolbar/contextKeys.ts
index 0d3dc587f..7a3b267e3 100644
--- a/ts/editor-toolbar/contextKeys.ts
+++ b/ts/editor-toolbar/contextKeys.ts
@@ -2,3 +2,5 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 export const nightModeKey = Symbol("nightMode");
 export const disabledKey = Symbol("disabled");
+
+export const buttonGroupKey = Symbol("buttonGroup");
diff --git a/ts/editor-toolbar/dynamicComponents.ts b/ts/editor-toolbar/dynamicComponents.ts
index 7fc623e8c..3272cdecc 100644
--- a/ts/editor-toolbar/dynamicComponents.ts
+++ b/ts/editor-toolbar/dynamicComponents.ts
@@ -1,8 +1,6 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import RawButton from "./RawButton.svelte";
-import LabelButton from "./LabelButton.svelte";
-import type { LabelButtonProps } from "./LabelButton";
 import IconButton from "./IconButton.svelte";
 import type { IconButtonProps } from "./IconButton";
 import CommandIconButton from "./CommandIconButton.svelte";
@@ -11,8 +9,6 @@ import ColorPicker from "./ColorPicker.svelte";
 import type { ColorPickerProps } from "./ColorPicker";
 import SelectButton from "./SelectButton.svelte";
 import type { SelectButtonProps } from "./SelectButton";
-import ButtonGroup from "./ButtonGroup.svelte";
-import type { ButtonGroupProps } from "./ButtonGroup";
 
 import ButtonDropdown from "./ButtonDropdown.svelte";
 import type { ButtonDropdownProps } from "./ButtonDropdown";
@@ -23,9 +19,6 @@ import type { DropdownItemProps } from "./DropdownItem";
 import WithDropdownMenu from "./WithDropdownMenu.svelte";
 import type { WithDropdownMenuProps } from "./WithDropdownMenu";
 
-import WithShortcut from "./WithShortcut.svelte";
-import type { WithShortcutProps } from "./WithShortcut";
-
 import WithLabel from "./WithLabel.svelte";
 import type { WithLabelProps } from "./WithLabel";
 
@@ -34,9 +27,6 @@ import { dynamicComponent } from "sveltelib/dynamicComponent";
 export const rawButton = dynamicComponent<typeof RawButton, { html: string }>(
     RawButton
 );
-export const labelButton = dynamicComponent<typeof LabelButton, LabelButtonProps>(
-    LabelButton
-);
 export const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(
     IconButton
 );
@@ -51,9 +41,6 @@ export const selectButton = dynamicComponent<typeof SelectButton, SelectButtonPr
     SelectButton
 );
 
-export const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(
-    ButtonGroup
-);
 export const buttonDropdown = dynamicComponent<
     typeof ButtonDropdown,
     ButtonDropdownProps
@@ -71,8 +58,4 @@ export const withDropdownMenu = dynamicComponent<
     WithDropdownMenuProps
 >(WithDropdownMenu);
 
-export const withShortcut = dynamicComponent<typeof WithShortcut, WithShortcutProps>(
-    WithShortcut
-);
-
 export const withLabel = dynamicComponent<typeof WithLabel, WithLabelProps>(WithLabel);
diff --git a/ts/editor/addons.ts b/ts/editor/addons.ts
index 6fef47af0..70ec0dbd0 100644
--- a/ts/editor/addons.ts
+++ b/ts/editor/addons.ts
@@ -1,35 +1,35 @@
 // 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 { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
-import {
-    buttonGroup,
-    rawButton,
-    labelButton,
-    iconButton,
-    commandIconButton,
-    selectButton,
-    dropdownMenu,
-    dropdownItem,
-    buttonDropdown,
-    withDropdownMenu,
-    withLabel,
-} from "editor-toolbar/dynamicComponents";
+// import {
+//     buttonGroup,
+//     rawButton,
+//     labelButton,
+//     iconButton,
+//     commandIconButton,
+//     selectButton,
+//     dropdownMenu,
+//     dropdownItem,
+//     buttonDropdown,
+//     withDropdownMenu,
+//     withLabel,
+// } from "editor-toolbar/dynamicComponents";
 
-export const editorToolbar: Record<
-    string,
-    (props: Record<string, unknown>) => DynamicSvelteComponent
-> = {
-    buttonGroup,
-    rawButton,
-    labelButton,
-    iconButton,
-    commandIconButton,
-    selectButton,
+// export const editorToolbar: Record<
+//     string,
+//     (props: Record<string, unknown>) => DynamicSvelteComponent
+// > = {
+//     buttonGroup,
+//     rawButton,
+//     labelButton,
+//     iconButton,
+//     commandIconButton,
+//     selectButton,
 
-    dropdownMenu,
-    dropdownItem,
-    buttonDropdown,
-    withDropdownMenu,
-    withLabel,
-};
+//     dropdownMenu,
+//     dropdownItem,
+//     buttonDropdown,
+//     withDropdownMenu,
+//     withLabel,
+// };
diff --git a/ts/editor/cloze.ts b/ts/editor/cloze.ts
index 4de47c97c..20686ff7a 100644
--- a/ts/editor/cloze.ts
+++ b/ts/editor/cloze.ts
@@ -1,52 +1,52 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import type { ToolbarItem } from "editor-toolbar/types";
+// import type { ToolbarItem } from "editor-toolbar/types";
 
-import * as tr from "lib/i18n";
-import { iconButton, withShortcut } from "editor-toolbar/dynamicComponents";
+// import * as tr from "lib/i18n";
+// import { iconButton, withShortcut } from "editor-toolbar/dynamicComponents";
 
-import bracketsIcon from "./code-brackets.svg";
+// import bracketsIcon from "./code-brackets.svg";
 
-import { forEditorField } from ".";
-import { wrap } from "./wrap";
+// import { forEditorField } from ".";
+// import { wrap } from "./wrap";
 
-const clozePattern = /\{\{c(\d+)::/gu;
-function getCurrentHighestCloze(increment: boolean): number {
-    let highest = 0;
+// const clozePattern = /\{\{c(\d+)::/gu;
+// function getCurrentHighestCloze(increment: boolean): number {
+//     let highest = 0;
 
-    forEditorField([], (field) => {
-        const fieldHTML = field.editingArea.editable.fieldHTML;
-        const matches: number[] = [];
-        let match: RegExpMatchArray | null = null;
+//     forEditorField([], (field) => {
+//         const fieldHTML = field.editingArea.editable.fieldHTML;
+//         const matches: number[] = [];
+//         let match: RegExpMatchArray | null = null;
 
-        while ((match = clozePattern.exec(fieldHTML))) {
-            matches.push(Number(match[1]));
-        }
+//         while ((match = clozePattern.exec(fieldHTML))) {
+//             matches.push(Number(match[1]));
+//         }
 
-        highest = Math.max(highest, ...matches);
-    });
+//         highest = Math.max(highest, ...matches);
+//     });
 
-    if (increment) {
-        highest++;
-    }
+//     if (increment) {
+//         highest++;
+//     }
 
-    return Math.max(1, highest);
-}
+//     return Math.max(1, highest);
+// }
 
-function onCloze(event: KeyboardEvent | MouseEvent): void {
-    const highestCloze = getCurrentHighestCloze(!event.getModifierState("Alt"));
-    wrap(`{{c${highestCloze}::`, "}}");
-}
+// function onCloze(event: KeyboardEvent | MouseEvent): void {
+//     const highestCloze = getCurrentHighestCloze(!event.getModifierState("Alt"));
+//     wrap(`{{c${highestCloze}::`, "}}");
+// }
 
-export function getClozeButton(): ToolbarItem {
-    return withShortcut({
-        id: "cloze",
-        shortcut: "Control+Shift+KeyC",
-        optionalModifiers: ["Alt"],
-        button: iconButton({
-            icon: bracketsIcon,
-            onClick: onCloze,
-            tooltip: tr.editingClozeDeletion(),
-        }),
-    });
-}
+// export function getClozeButton(): ToolbarItem {
+//     return withShortcut({
+//         id: "cloze",
+//         shortcut: "Control+Shift+KeyC",
+//         optionalModifiers: ["Alt"],
+//         button: iconButton({
+//             icon: bracketsIcon,
+//             onClick: onCloze,
+//             tooltip: tr.editingClozeDeletion(),
+//         }),
+//     });
+// }
diff --git a/ts/editor/color.ts b/ts/editor/color.ts
index 4923b8403..3394807fb 100644
--- a/ts/editor/color.ts
+++ b/ts/editor/color.ts
@@ -1,54 +1,54 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import type { IterableToolbarItem } from "editor-toolbar/types";
+// import type { IterableToolbarItem } from "editor-toolbar/types";
 
-import {
-    iconButton,
-    colorPicker,
-    buttonGroup,
-    withShortcut,
-} from "editor-toolbar/dynamicComponents";
-import * as tr from "lib/i18n";
+// import {
+//     iconButton,
+//     colorPicker,
+//     buttonGroup,
+//     withShortcut,
+// } from "editor-toolbar/dynamicComponents";
+// import * as tr from "lib/i18n";
 
-import squareFillIcon from "./square-fill.svg";
-import "./color.css";
+// import squareFillIcon from "./square-fill.svg";
+// import "./color.css";
 
-const foregroundColorKeyword = "--foreground-color";
+// const foregroundColorKeyword = "--foreground-color";
 
-function setForegroundColor(color: string): void {
-    document.documentElement.style.setProperty(foregroundColorKeyword, color);
-}
+// function setForegroundColor(color: string): void {
+//     document.documentElement.style.setProperty(foregroundColorKeyword, color);
+// }
 
-function getForecolor(): string {
-    return document.documentElement.style.getPropertyValue(foregroundColorKeyword);
-}
+// function getForecolor(): string {
+//     return document.documentElement.style.getPropertyValue(foregroundColorKeyword);
+// }
 
-function wrapWithForecolor(color: string): void {
-    document.execCommand("forecolor", false, color);
-}
+// function wrapWithForecolor(color: string): void {
+//     document.execCommand("forecolor", false, color);
+// }
 
-export function getColorGroup(): IterableToolbarItem {
-    const forecolorButton = withShortcut({
-        shortcut: "F7",
-        button: iconButton({
-            icon: squareFillIcon,
-            className: "forecolor",
-            onClick: () => wrapWithForecolor(getForecolor()),
-            tooltip: tr.editingSetForegroundColor(),
-        }),
-    });
+// export function getColorGroup(): IterableToolbarItem {
+//     const forecolorButton = withShortcut({
+//         shortcut: "F7",
+//         button: iconButton({
+//             icon: squareFillIcon,
+//             className: "forecolor",
+//             onClick: () => wrapWithForecolor(getForecolor()),
+//             tooltip: tr.editingSetForegroundColor(),
+//         }),
+//     });
 
-    const colorpickerButton = withShortcut({
-        shortcut: "F8",
-        button: colorPicker({
-            onChange: ({ currentTarget }) =>
-                setForegroundColor((currentTarget as HTMLInputElement).value),
-            tooltip: tr.editingChangeColor(),
-        }),
-    });
+//     const colorpickerButton = withShortcut({
+//         shortcut: "F8",
+//         button: colorPicker({
+//             onChange: ({ currentTarget }) =>
+//                 setForegroundColor((currentTarget as HTMLInputElement).value),
+//             tooltip: tr.editingChangeColor(),
+//         }),
+//     });
 
-    return buttonGroup({
-        id: "color",
-        items: [forecolorButton, colorpickerButton],
-    });
-}
+//     return buttonGroup({
+//         id: "color",
+//         items: [forecolorButton, colorpickerButton],
+//     });
+// }
diff --git a/ts/editor/formatBlock.ts b/ts/editor/formatBlock.ts
index e65c65572..edcea4004 100644
--- a/ts/editor/formatBlock.ts
+++ b/ts/editor/formatBlock.ts
@@ -1,129 +1,129 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import type { IterableToolbarItem } from "editor-toolbar/types";
-import type { EditingArea } from "./editingArea";
+// import type { IterableToolbarItem } from "editor-toolbar/types";
+// import type { EditingArea } from "./editingArea";
 
-import * as tr from "lib/i18n";
-import {
-    commandIconButton,
-    iconButton,
-    buttonGroup,
-    buttonDropdown,
-    withDropdownMenu,
-} from "editor-toolbar/dynamicComponents";
+// import * as tr from "lib/i18n";
+// import {
+//     commandIconButton,
+//     iconButton,
+//     buttonGroup,
+//     buttonDropdown,
+//     withDropdownMenu,
+// } from "editor-toolbar/dynamicComponents";
 
-import { getListItem } from "./helpers";
+// import { getListItem } from "./helpers";
 
-import ulIcon from "./list-ul.svg";
-import olIcon from "./list-ol.svg";
-import listOptionsIcon from "./text-paragraph.svg";
+// import ulIcon from "./list-ul.svg";
+// import olIcon from "./list-ol.svg";
+// import listOptionsIcon from "./text-paragraph.svg";
 
-import justifyFullIcon from "./justify.svg";
-import justifyLeftIcon from "./text-left.svg";
-import justifyRightIcon from "./text-right.svg";
-import justifyCenterIcon from "./text-center.svg";
+// import justifyFullIcon from "./justify.svg";
+// import justifyLeftIcon from "./text-left.svg";
+// import justifyRightIcon from "./text-right.svg";
+// import justifyCenterIcon from "./text-center.svg";
 
-import indentIcon from "./text-indent-left.svg";
-import outdentIcon from "./text-indent-right.svg";
+// import indentIcon from "./text-indent-left.svg";
+// import outdentIcon from "./text-indent-right.svg";
 
-const outdentListItem = () => {
-    const currentField = document.activeElement as EditingArea;
-    if (getListItem(currentField.shadowRoot!)) {
-        document.execCommand("outdent");
-    }
-};
+// const outdentListItem = () => {
+//     const currentField = document.activeElement as EditingArea;
+//     if (getListItem(currentField.shadowRoot!)) {
+//         document.execCommand("outdent");
+//     }
+// };
 
-const indentListItem = () => {
-    const currentField = document.activeElement as EditingArea;
-    if (getListItem(currentField.shadowRoot!)) {
-        document.execCommand("indent");
-    }
-};
+// const indentListItem = () => {
+//     const currentField = document.activeElement as EditingArea;
+//     if (getListItem(currentField.shadowRoot!)) {
+//         document.execCommand("indent");
+//     }
+// };
 
-export function getFormatBlockMenus(): IterableToolbarItem[] {
-    const justifyLeftButton = commandIconButton({
-        icon: justifyLeftIcon,
-        command: "justifyLeft",
-        tooltip: tr.editingAlignLeft(),
-    });
+// export function getFormatBlockMenus(): IterableToolbarItem[] {
+//     const justifyLeftButton = commandIconButton({
+//         icon: justifyLeftIcon,
+//         command: "justifyLeft",
+//         tooltip: tr.editingAlignLeft(),
+//     });
 
-    const justifyCenterButton = commandIconButton({
-        icon: justifyCenterIcon,
-        command: "justifyCenter",
-        tooltip: tr.editingCenter(),
-    });
+//     const justifyCenterButton = commandIconButton({
+//         icon: justifyCenterIcon,
+//         command: "justifyCenter",
+//         tooltip: tr.editingCenter(),
+//     });
 
-    const justifyRightButton = commandIconButton({
-        icon: justifyRightIcon,
-        command: "justifyRight",
-        tooltip: tr.editingAlignRight(),
-    });
+//     const justifyRightButton = commandIconButton({
+//         icon: justifyRightIcon,
+//         command: "justifyRight",
+//         tooltip: tr.editingAlignRight(),
+//     });
 
-    const justifyFullButton = commandIconButton({
-        icon: justifyFullIcon,
-        command: "justifyFull",
-        tooltip: tr.editingJustify(),
-    });
+//     const justifyFullButton = commandIconButton({
+//         icon: justifyFullIcon,
+//         command: "justifyFull",
+//         tooltip: tr.editingJustify(),
+//     });
 
-    const justifyGroup = buttonGroup({
-        id: "justify",
-        items: [
-            justifyLeftButton,
-            justifyCenterButton,
-            justifyRightButton,
-            justifyFullButton,
-        ],
-    });
+//     const justifyGroup = buttonGroup({
+//         id: "justify",
+//         items: [
+//             justifyLeftButton,
+//             justifyCenterButton,
+//             justifyRightButton,
+//             justifyFullButton,
+//         ],
+//     });
 
-    const outdentButton = iconButton({
-        icon: outdentIcon,
-        onClick: outdentListItem,
-        tooltip: tr.editingOutdent(),
-    });
+//     const outdentButton = iconButton({
+//         icon: outdentIcon,
+//         onClick: outdentListItem,
+//         tooltip: tr.editingOutdent(),
+//     });
 
-    const indentButton = iconButton({
-        icon: indentIcon,
-        onClick: indentListItem,
-        tooltip: tr.editingIndent(),
-    });
+//     const indentButton = iconButton({
+//         icon: indentIcon,
+//         onClick: indentListItem,
+//         tooltip: tr.editingIndent(),
+//     });
 
-    const indentationGroup = buttonGroup({
-        id: "indentation",
-        items: [outdentButton, indentButton],
-    });
+//     const indentationGroup = buttonGroup({
+//         id: "indentation",
+//         items: [outdentButton, indentButton],
+//     });
 
-    const formattingOptions = buttonDropdown({
-        id: "listFormatting",
-        items: [justifyGroup, indentationGroup],
-    });
+//     const formattingOptions = buttonDropdown({
+//         id: "listFormatting",
+//         items: [justifyGroup, indentationGroup],
+//     });
 
-    return [formattingOptions];
-}
+//     return [formattingOptions];
+// }
 
-export function getFormatBlockGroup(): IterableToolbarItem {
-    const ulButton = commandIconButton({
-        icon: ulIcon,
-        command: "insertUnorderedList",
-        tooltip: tr.editingUnorderedList(),
-    });
+// export function getFormatBlockGroup(): IterableToolbarItem {
+//     const ulButton = commandIconButton({
+//         icon: ulIcon,
+//         command: "insertUnorderedList",
+//         tooltip: tr.editingUnorderedList(),
+//     });
 
-    const olButton = commandIconButton({
-        icon: olIcon,
-        command: "insertOrderedList",
-        tooltip: tr.editingOrderedList(),
-    });
+//     const olButton = commandIconButton({
+//         icon: olIcon,
+//         command: "insertOrderedList",
+//         tooltip: tr.editingOrderedList(),
+//     });
 
-    const listFormattingButton = iconButton({
-        icon: listOptionsIcon,
-    });
+//     const listFormattingButton = iconButton({
+//         icon: listOptionsIcon,
+//     });
 
-    const listFormatting = withDropdownMenu({
-        button: listFormattingButton,
-        menuId: "listFormatting",
-    });
+//     const listFormatting = withDropdownMenu({
+//         button: listFormattingButton,
+//         menuId: "listFormatting",
+//     });
 
-    return buttonGroup({
-        id: "blockFormatting",
-        items: [ulButton, olButton, listFormatting],
-    });
-}
+//     return buttonGroup({
+//         id: "blockFormatting",
+//         items: [ulButton, olButton, listFormatting],
+//     });
+// }
diff --git a/ts/editor/formatInline.ts b/ts/editor/formatInline.ts
index 280053d60..cfac04857 100644
--- a/ts/editor/formatInline.ts
+++ b/ts/editor/formatInline.ts
@@ -1,88 +1,88 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import type { IterableToolbarItem } from "editor-toolbar/types";
+// import type { IterableToolbarItem } from "editor-toolbar/types";
 
-import * as tr from "lib/i18n";
-import {
-    commandIconButton,
-    iconButton,
-    buttonGroup,
-    withShortcut,
-} from "editor-toolbar/dynamicComponents";
+// import * as tr from "lib/i18n";
+// import {
+//     commandIconButton,
+//     iconButton,
+//     buttonGroup,
+//     withShortcut,
+// } from "editor-toolbar/dynamicComponents";
 
-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";
+// 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 function getFormatInlineGroup(): IterableToolbarItem {
-    const boldButton = withShortcut({
-        shortcut: "Control+KeyB",
-        button: commandIconButton({
-            icon: boldIcon,
-            tooltip: tr.editingBoldText(),
-            command: "bold",
-        }),
-    });
+// export function getFormatInlineGroup(): IterableToolbarItem {
+//     const boldButton = withShortcut({
+//         shortcut: "Control+KeyB",
+//         button: commandIconButton({
+//             icon: boldIcon,
+//             tooltip: tr.editingBoldText(),
+//             command: "bold",
+//         }),
+//     });
 
-    const italicButton = withShortcut({
-        shortcut: "Control+KeyI",
-        button: commandIconButton({
-            icon: italicIcon,
-            tooltip: tr.editingItalicText(),
-            command: "italic",
-        }),
-    });
+//     const italicButton = withShortcut({
+//         shortcut: "Control+KeyI",
+//         button: commandIconButton({
+//             icon: italicIcon,
+//             tooltip: tr.editingItalicText(),
+//             command: "italic",
+//         }),
+//     });
 
-    const underlineButton = withShortcut({
-        shortcut: "Control+KeyU",
-        button: commandIconButton({
-            icon: underlineIcon,
-            tooltip: tr.editingUnderlineText(),
-            command: "underline",
-        }),
-    });
+//     const underlineButton = withShortcut({
+//         shortcut: "Control+KeyU",
+//         button: commandIconButton({
+//             icon: underlineIcon,
+//             tooltip: tr.editingUnderlineText(),
+//             command: "underline",
+//         }),
+//     });
 
-    const superscriptButton = withShortcut({
-        shortcut: "Control+Shift+Equal",
-        button: commandIconButton({
-            icon: superscriptIcon,
-            tooltip: tr.editingSuperscript(),
-            command: "superscript",
-        }),
-    });
+//     const superscriptButton = withShortcut({
+//         shortcut: "Control+Shift+Equal",
+//         button: commandIconButton({
+//             icon: superscriptIcon,
+//             tooltip: tr.editingSuperscript(),
+//             command: "superscript",
+//         }),
+//     });
 
-    const subscriptButton = withShortcut({
-        shortcut: "Control+Equal",
-        button: commandIconButton({
-            icon: subscriptIcon,
-            tooltip: tr.editingSubscript(),
-            command: "subscript",
-        }),
-    });
+//     const subscriptButton = withShortcut({
+//         shortcut: "Control+Equal",
+//         button: commandIconButton({
+//             icon: subscriptIcon,
+//             tooltip: tr.editingSubscript(),
+//             command: "subscript",
+//         }),
+//     });
 
-    const removeFormatButton = withShortcut({
-        shortcut: "Control+KeyR",
-        button: iconButton({
-            icon: eraserIcon,
-            tooltip: tr.editingRemoveFormatting(),
-            onClick: () => {
-                document.execCommand("removeFormat");
-            },
-        }),
-    });
+//     const removeFormatButton = withShortcut({
+//         shortcut: "Control+KeyR",
+//         button: iconButton({
+//             icon: eraserIcon,
+//             tooltip: tr.editingRemoveFormatting(),
+//             onClick: () => {
+//                 document.execCommand("removeFormat");
+//             },
+//         }),
+//     });
 
-    return buttonGroup({
-        id: "inlineFormatting",
-        items: [
-            boldButton,
-            italicButton,
-            underlineButton,
-            superscriptButton,
-            subscriptButton,
-            removeFormatButton,
-        ],
-    });
-}
+//     return buttonGroup({
+//         id: "inlineFormatting",
+//         items: [
+//             boldButton,
+//             italicButton,
+//             underlineButton,
+//             superscriptButton,
+//             subscriptButton,
+//             removeFormatButton,
+//         ],
+//     });
+// }
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index 1f5e8c11b..d953648be 100644
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@@ -20,7 +20,7 @@ export { setNoteId, getNoteId } from "./noteId";
 export { saveNow } from "./changeTimer";
 export { wrap, wrapIntoText } from "./wrap";
 
-export * from "./addons";
+// export * from "./addons";
 
 declare global {
     interface Selection {
diff --git a/ts/editor/notetype.ts b/ts/editor/notetype.ts
index fe570a8a1..cd828e7e8 100644
--- a/ts/editor/notetype.ts
+++ b/ts/editor/notetype.ts
@@ -1,35 +1,35 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import type { IterableToolbarItem } from "editor-toolbar/types";
+// import type { IterableToolbarItem } from "editor-toolbar/types";
 
-import { bridgeCommand } from "lib/bridgecommand";
-import * as tr from "lib/i18n";
-import {
-    labelButton,
-    buttonGroup,
-    withShortcut,
-} from "editor-toolbar/dynamicComponents";
+// import { bridgeCommand } from "lib/bridgecommand";
+// import * as tr from "lib/i18n";
+// import {
+//     labelButton,
+//     buttonGroup,
+//     withShortcut,
+// } from "editor-toolbar/dynamicComponents";
 
-export function getNotetypeGroup(): IterableToolbarItem {
-    const fieldsButton = labelButton({
-        onClick: () => bridgeCommand("fields"),
-        disables: false,
-        label: `${tr.editingFields()}...`,
-        tooltip: tr.editingCustomizeFields(),
-    });
+// export function getNotetypeGroup(): IterableToolbarItem {
+//     const fieldsButton = labelButton({
+//         onClick: () => bridgeCommand("fields"),
+//         disables: false,
+//         label: `${tr.editingFields()}...`,
+//         tooltip: tr.editingCustomizeFields(),
+//     });
 
-    const cardsButton = withShortcut({
-        shortcut: "Control+KeyL",
-        button: labelButton({
-            onClick: () => bridgeCommand("cards"),
-            disables: false,
-            label: `${tr.editingCards()}...`,
-            tooltip: tr.editingCustomizeCardTemplates(),
-        }),
-    });
+//     const cardsButton = withShortcut({
+//         shortcut: "Control+KeyL",
+//         button: labelButton({
+//             onClick: () => bridgeCommand("cards"),
+//             disables: false,
+//             label: `${tr.editingCards()}...`,
+//             tooltip: tr.editingCustomizeCardTemplates(),
+//         }),
+//     });
 
-    return buttonGroup({
-        id: "notetype",
-        items: [fieldsButton, cardsButton],
-    });
-}
+//     return buttonGroup({
+//         id: "notetype",
+//         items: [fieldsButton, cardsButton],
+//     });
+// }
diff --git a/ts/editor/template.ts b/ts/editor/template.ts
index f43e1f677..49edbe310 100644
--- a/ts/editor/template.ts
+++ b/ts/editor/template.ts
@@ -1,143 +1,143 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import type { IterableToolbarItem } from "editor-toolbar/types";
+// import type { IterableToolbarItem } from "editor-toolbar/types";
 
-import { bridgeCommand } from "lib/bridgecommand";
-import {
-    iconButton,
-    withDropdownMenu,
-    dropdownMenu,
-    dropdownItem,
-    buttonGroup,
-    withShortcut,
-} from "editor-toolbar/dynamicComponents";
-import * as tr from "lib/i18n";
+// import { bridgeCommand } from "lib/bridgecommand";
+// import {
+//     iconButton,
+//     withDropdownMenu,
+//     dropdownMenu,
+//     dropdownItem,
+//     buttonGroup,
+//     withShortcut,
+// } from "editor-toolbar/dynamicComponents";
+// import * as tr from "lib/i18n";
 
-import { wrap } from "./wrap";
+// import { wrap } from "./wrap";
 
-import paperclipIcon from "./paperclip.svg";
-import micIcon from "./mic.svg";
-import functionIcon from "./function-variant.svg";
-import xmlIcon from "./xml.svg";
+// import paperclipIcon from "./paperclip.svg";
+// import micIcon from "./mic.svg";
+// import functionIcon from "./function-variant.svg";
+// import xmlIcon from "./xml.svg";
 
-import { getClozeButton } from "./cloze";
+// import { getClozeButton } from "./cloze";
 
-function onAttachment(): void {
-    bridgeCommand("attach");
-}
+// function onAttachment(): void {
+//     bridgeCommand("attach");
+// }
 
-function onRecord(): void {
-    bridgeCommand("record");
-}
+// function onRecord(): void {
+//     bridgeCommand("record");
+// }
 
-function onHtmlEdit(): void {
-    bridgeCommand("htmlEdit");
-}
+// function onHtmlEdit(): void {
+//     bridgeCommand("htmlEdit");
+// }
 
-const mathjaxMenuId = "mathjaxMenu";
+// const mathjaxMenuId = "mathjaxMenu";
 
-export function getTemplateGroup(): IterableToolbarItem {
-    const attachmentButton = withShortcut({
-        shortcut: "F3",
-        button: iconButton({
-            icon: paperclipIcon,
-            onClick: onAttachment,
-            tooltip: tr.editingAttachPicturesaudiovideo(),
-        }),
-    });
+// export function getTemplateGroup(): IterableToolbarItem {
+//     const attachmentButton = withShortcut({
+//         shortcut: "F3",
+//         button: iconButton({
+//             icon: paperclipIcon,
+//             onClick: onAttachment,
+//             tooltip: tr.editingAttachPicturesaudiovideo(),
+//         }),
+//     });
 
-    const recordButton = withShortcut({
-        shortcut: "F5",
-        button: iconButton({
-            icon: micIcon,
-            onClick: onRecord,
-            tooltip: tr.editingRecordAudio(),
-        }),
-    });
+//     const recordButton = withShortcut({
+//         shortcut: "F5",
+//         button: iconButton({
+//             icon: micIcon,
+//             onClick: onRecord,
+//             tooltip: tr.editingRecordAudio(),
+//         }),
+//     });
 
-    const mathjaxButton = iconButton({
-        icon: functionIcon,
-    });
+//     const mathjaxButton = iconButton({
+//         icon: functionIcon,
+//     });
 
-    const mathjaxButtonWithMenu = withDropdownMenu({
-        button: mathjaxButton,
-        menuId: mathjaxMenuId,
-    });
+//     const mathjaxButtonWithMenu = withDropdownMenu({
+//         button: mathjaxButton,
+//         menuId: mathjaxMenuId,
+//     });
 
-    const htmlButton = withShortcut({
-        shortcut: "Control+Shift+KeyX",
-        button: iconButton({
-            icon: xmlIcon,
-            onClick: onHtmlEdit,
-            tooltip: tr.editingHtmlEditor(),
-        }),
-    });
+//     const htmlButton = withShortcut({
+//         shortcut: "Control+Shift+KeyX",
+//         button: iconButton({
+//             icon: xmlIcon,
+//             onClick: onHtmlEdit,
+//             tooltip: tr.editingHtmlEditor(),
+//         }),
+//     });
 
-    return buttonGroup({
-        id: "template",
-        items: [
-            attachmentButton,
-            recordButton,
-            getClozeButton(),
-            mathjaxButtonWithMenu,
-            htmlButton,
-        ],
-    });
-}
+//     return buttonGroup({
+//         id: "template",
+//         items: [
+//             attachmentButton,
+//             recordButton,
+//             getClozeButton(),
+//             mathjaxButtonWithMenu,
+//             htmlButton,
+//         ],
+//     });
+// }
 
-export function getTemplateMenus(): IterableToolbarItem[] {
-    const mathjaxMenuItems = [
-        withShortcut({
-            shortcut: "Control+KeyM, KeyM",
-            button: dropdownItem({
-                onClick: () => wrap("\\(", "\\)"),
-                label: tr.editingMathjaxInline(),
-            }),
-        }),
-        withShortcut({
-            shortcut: "Control+KeyM, KeyE",
-            button: dropdownItem({
-                onClick: () => wrap("\\[", "\\]"),
-                label: tr.editingMathjaxBlock(),
-            }),
-        }),
-        withShortcut({
-            shortcut: "Control+KeyM, KeyC",
-            button: dropdownItem({
-                onClick: () => wrap("\\(\\ce{", "}\\)"),
-                label: tr.editingMathjaxChemistry(),
-            }),
-        }),
-    ];
+// export function getTemplateMenus(): IterableToolbarItem[] {
+//     const mathjaxMenuItems = [
+//         withShortcut({
+//             shortcut: "Control+KeyM, KeyM",
+//             button: dropdownItem({
+//                 onClick: () => wrap("\\(", "\\)"),
+//                 label: tr.editingMathjaxInline(),
+//             }),
+//         }),
+//         withShortcut({
+//             shortcut: "Control+KeyM, KeyE",
+//             button: dropdownItem({
+//                 onClick: () => wrap("\\[", "\\]"),
+//                 label: tr.editingMathjaxBlock(),
+//             }),
+//         }),
+//         withShortcut({
+//             shortcut: "Control+KeyM, KeyC",
+//             button: dropdownItem({
+//                 onClick: () => wrap("\\(\\ce{", "}\\)"),
+//                 label: tr.editingMathjaxChemistry(),
+//             }),
+//         }),
+//     ];
 
-    const latexMenuItems = [
-        withShortcut({
-            shortcut: "Control+KeyT, KeyT",
-            button: dropdownItem({
-                onClick: () => wrap("[latex]", "[/latex]"),
-                label: tr.editingLatex(),
-            }),
-        }),
-        withShortcut({
-            shortcut: "Control+KeyT, KeyE",
-            button: dropdownItem({
-                onClick: () => wrap("[$]", "[/$]"),
-                label: tr.editingLatexEquation(),
-            }),
-        }),
-        withShortcut({
-            shortcut: "Control+KeyT, KeyM",
-            button: dropdownItem({
-                onClick: () => wrap("[$$]", "[/$$]"),
-                label: tr.editingLatexMathEnv(),
-            }),
-        }),
-    ];
+//     const latexMenuItems = [
+//         withShortcut({
+//             shortcut: "Control+KeyT, KeyT",
+//             button: dropdownItem({
+//                 onClick: () => wrap("[latex]", "[/latex]"),
+//                 label: tr.editingLatex(),
+//             }),
+//         }),
+//         withShortcut({
+//             shortcut: "Control+KeyT, KeyE",
+//             button: dropdownItem({
+//                 onClick: () => wrap("[$]", "[/$]"),
+//                 label: tr.editingLatexEquation(),
+//             }),
+//         }),
+//         withShortcut({
+//             shortcut: "Control+KeyT, KeyM",
+//             button: dropdownItem({
+//                 onClick: () => wrap("[$$]", "[/$$]"),
+//                 label: tr.editingLatexMathEnv(),
+//             }),
+//         }),
+//     ];
 
-    const mathjaxMenu = dropdownMenu({
-        id: mathjaxMenuId,
-        items: [...mathjaxMenuItems, ...latexMenuItems],
-    });
+//     const mathjaxMenu = dropdownMenu({
+//         id: mathjaxMenuId,
+//         items: [...mathjaxMenuItems, ...latexMenuItems],
+//     });
 
-    return [mathjaxMenu];
-}
+//     return [mathjaxMenu];
+// }
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index ae9b5d65a..86bf8dfd0 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -2,11 +2,11 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import { editorToolbar, EditorToolbar } from "editor-toolbar";
 
-import { getNotetypeGroup } from "./notetype";
-import { getFormatInlineGroup } from "./formatInline";
-import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
-import { getColorGroup } from "./color";
-import { getTemplateGroup, getTemplateMenus } from "./template";
+// import { getNotetypeGroup } from "./notetype";
+// import { getFormatInlineGroup } from "./formatInline";
+// import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
+// import { getColorGroup } from "./color";
+// import { getTemplateGroup, getTemplateMenus } from "./template";
 
 export function initToolbar(i18n: Promise<void>) {
     let toolbarResolve: (value: EditorToolbar) => void;
@@ -20,14 +20,14 @@ export function initToolbar(i18n: Promise<void>) {
             const anchor = document.getElementById("fields")!;
 
             const buttons = [
-                getNotetypeGroup(),
-                getFormatInlineGroup(),
-                getFormatBlockGroup(),
-                getColorGroup(),
-                getTemplateGroup(),
+                // getNotetypeGroup(),
+                // getFormatInlineGroup(),
+                // getFormatBlockGroup(),
+                // getColorGroup(),
+                // getTemplateGroup(),
             ];
 
-            const menus = [...getFormatBlockMenus(), ...getTemplateMenus()];
+            const menus = [/*...getFormatBlockMenus(), ...getTemplateMenus()*/];
 
             toolbarResolve(editorToolbar({ target, anchor, buttons, menus }));
         });

From 59876439e7641d2f0aff282c76109823188df52a Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 27 Apr 2021 22:35:25 +0200
Subject: [PATCH 03/39] Add StickyBar.svelte WithTheming.svelte

---
 ts/editor-toolbar/ButtonGroup.svelte          |  9 ++++--
 ...upButton.svelte => ButtonGroupItem.svelte} |  0
 ts/editor-toolbar/EditorToolbar.svelte        | 31 +++++--------------
 ts/editor-toolbar/IconButton.svelte           | 22 ++++---------
 ts/editor-toolbar/LabelButton.svelte          |  6 ++--
 ts/editor-toolbar/NoteTypeButtons.svelte      |  4 +--
 ts/editor-toolbar/StickyBar.svelte            | 26 ++++++++++++++++
 ts/editor-toolbar/WithTheming.svelte          | 17 ++++++++++
 ts/editor/toolbar.ts                          |  4 ++-
 9 files changed, 71 insertions(+), 48 deletions(-)
 rename ts/editor-toolbar/{ButtonGroupButton.svelte => ButtonGroupItem.svelte} (100%)
 create mode 100644 ts/editor-toolbar/StickyBar.svelte
 create mode 100644 ts/editor-toolbar/WithTheming.svelte

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 053dca2fa..bad832a90 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -25,9 +25,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return { order: index };
     }
 
-    setContext(buttonGroupKey, Object.assign(api, {
-        registerButton,
-    }))
+    setContext(
+        buttonGroupKey,
+        Object.assign(api, {
+            registerButton,
+        })
+    );
 </script>
 
 <style lang="scss">
diff --git a/ts/editor-toolbar/ButtonGroupButton.svelte b/ts/editor-toolbar/ButtonGroupItem.svelte
similarity index 100%
rename from ts/editor-toolbar/ButtonGroupButton.svelte
rename to ts/editor-toolbar/ButtonGroupItem.svelte
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 4dd74b557..dfd4a6cc2 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -18,18 +18,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="typescript">
-    import type { Identifier } from "./identifiable";
-    import type { ToolbarItem, IterableToolbarItem } from "./types";
-
-    import { setContext, onMount } from "svelte";
+    import { setContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
-    import { add, insert, updateRecursive } from "./identifiable";
-    import { showComponent, hideComponent, toggleComponent } from "./hideable";
 
+    import WithTheming from "./WithTheming.svelte";
+    import StickyBar from "./StickyBar.svelte";
     import NoteTypeButtons from "./NoteTypeButtons.svelte";
 
-    let api = {};
-
     export let nightMode: boolean;
 
     setContext(nightModeKey, nightMode);
@@ -43,18 +38,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }`;
 </script>
 
-<style lang="scss">
-    nav {
-        position: sticky;
-        top: 0;
-        left: 0;
-        z-index: 10;
-
-        background-color: var(--window-bg);
-        border-bottom: 1px solid var(--border);
-    }
-</style>
-
-<nav {style} class="pb-1">
-    <NoteTypeButtons />
-</nav>
+<WithTheming {style}>
+    <StickyBar>
+        <NoteTypeButtons />
+    </StickyBar>
+</WithTheming>
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index fd33f69fe..5db161f44 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -3,28 +3,18 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import ButtonGroupItem from "./ButtonGroupItem.svelte";
     import SquareButton from "./SquareButton.svelte";
 
     export let id: string;
-    export let className = "";
+    let className = "";
+    export { className as class };
+
     export let tooltip: string | undefined;
-    export let shortcutLabel: string | undefined;
-    export let icon: string;
-
-    export let onClick: (event: MouseEvent) => void;
-
     export let disables = true;
     export let dropdownToggle = false;
 </script>
 
-<SquareButton
-    {id}
-    {className}
-    {tooltip}
-    {shortcutLabel}
-    {onClick}
-    {disables}
-    {dropdownToggle}
-    on:mount>
-    {@html icon}
+<SquareButton {id} {className} {tooltip} {disables} {dropdownToggle} on:click on:mount>
+    <slot />
 </SquareButton>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index fc031e733..a999d4b61 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type { Readable } from "svelte/store";
-    import ButtonGroupButton from "./ButtonGroupButton.svelte";
+    import ButtonGroupItem from "./ButtonGroupItem.svelte";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
 
@@ -51,7 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @include button.btn-night;
 </style>
 
-<ButtonGroupButton let:order={order}>
+<ButtonGroupItem let:order>
     <button
         bind:this={buttonRef}
         {id}
@@ -68,4 +68,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:mousedown|preventDefault>
         <slot />
     </button>
-</ButtonGroupButton>
+</ButtonGroupItem>
diff --git a/ts/editor-toolbar/NoteTypeButtons.svelte b/ts/editor-toolbar/NoteTypeButtons.svelte
index a50095dc5..d2653d01b 100644
--- a/ts/editor-toolbar/NoteTypeButtons.svelte
+++ b/ts/editor-toolbar/NoteTypeButtons.svelte
@@ -17,7 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <LabelButton
         disables={false}
         tooltip={tr.editingCustomizeFields()}
-        on:click={() => bridgeCommand("fields")}>
+        on:click={() => bridgeCommand('fields')}>
         {tr.editingFields()}...
     </LabelButton>
 
@@ -25,7 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <LabelButton
             disables={false}
             tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
-            on:click={() => bridgeCommand("cards")}
+            on:click={() => bridgeCommand('cards')}
             on:mount={createShortcut}>
             {tr.editingCards()}...
         </LabelButton>
diff --git a/ts/editor-toolbar/StickyBar.svelte b/ts/editor-toolbar/StickyBar.svelte
new file mode 100644
index 000000000..1e37c5547
--- /dev/null
+++ b/ts/editor-toolbar/StickyBar.svelte
@@ -0,0 +1,26 @@
+<!--
+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 id: string | undefined;
+    let className: string | undefined;
+    export { className as class };
+</script>
+
+<style lang="scss">
+    nav {
+        position: sticky;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 10;
+
+        background: var(--window-bg);
+        border-bottom: 1px solid var(--border);
+    }
+</style>
+
+<nav {id} class="pb-1 {className}">
+    <slot />
+</nav>
diff --git a/ts/editor-toolbar/WithTheming.svelte b/ts/editor-toolbar/WithTheming.svelte
new file mode 100644
index 000000000..2beae19aa
--- /dev/null
+++ b/ts/editor-toolbar/WithTheming.svelte
@@ -0,0 +1,17 @@
+<!--
+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 style: string;
+</script>
+
+<style lang="scss">
+    div {
+        display: contents;
+    }
+</style>
+
+<div {style}>
+    <slot />
+</div>
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index 86bf8dfd0..d27051317 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -27,7 +27,9 @@ export function initToolbar(i18n: Promise<void>) {
                 // getTemplateGroup(),
             ];
 
-            const menus = [/*...getFormatBlockMenus(), ...getTemplateMenus()*/];
+            const menus = [
+                /*...getFormatBlockMenus(), ...getTemplateMenus()*/
+            ];
 
             toolbarResolve(editorToolbar({ target, anchor, buttons, menus }));
         });

From 47b1cfe8047a1e6786a0532b74972686d1010e42 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 27 Apr 2021 23:08:47 +0200
Subject: [PATCH 04/39] Rename editor-toolbar to components

---
 ts/{editor-toolbar => components}/BUILD.bazel | 18 +------
 .../ButtonDropdown.d.ts                       |  0
 .../ButtonDropdown.svelte                     |  0
 .../ButtonGroup.svelte                        |  0
 .../ButtonGroupItem.svelte                    |  0
 .../ColorPicker.d.ts                          |  0
 .../ColorPicker.svelte                        |  0
 .../CommandIconButton.d.ts                    |  0
 .../CommandIconButton.svelte                  |  0
 .../DropdownItem.d.ts                         |  0
 .../DropdownItem.svelte                       |  0
 .../DropdownMenu.d.ts                         |  0
 .../DropdownMenu.svelte                       |  0
 .../IconButton.d.ts                           |  0
 .../IconButton.svelte                         |  0
 .../LabelButton.svelte                        |  0
 .../RawButton.svelte                          |  0
 .../SelectButton.d.ts                         |  0
 .../SelectButton.svelte                       |  0
 .../SelectOption.svelte                       |  0
 .../SquareButton.svelte                       |  0
 .../StickyBar.svelte                          |  0
 .../WithDropdownMenu.d.ts                     |  0
 .../WithDropdownMenu.svelte                   |  0
 .../WithLabel.d.ts                            |  0
 .../WithLabel.svelte                          |  0
 .../WithShortcut.svelte                       |  0
 .../WithTheming.svelte                        |  0
 .../contextKeys.ts                            |  0
 .../dynamicComponents.ts                      |  0
 ts/{editor-toolbar => components}/helpers.ts  |  0
 ts/{editor-toolbar => components}/hideable.ts |  0
 .../identifiable.ts                           |  0
 ts/{editor-toolbar => components}/types.ts    |  0
 ts/editor-toolbar/index.ts                    | 38 --------------
 ts/editor/BUILD.bazel                         | 50 +++++++++++++++++--
 .../EditorToolbar.svelte                      |  7 +--
 .../NoteTypeButtons.svelte                    |  6 +--
 ts/{editor-toolbar => editor}/bootstrap.scss  |  0
 ts/editor/editingArea.ts                      |  2 +-
 ts/editor/focusHandlers.ts                    |  2 +-
 ts/editor/index.ts                            |  6 ++-
 ts/editor/inputHandlers.ts                    |  2 +-
 ts/{editor-toolbar => editor}/legacy.scss     |  0
 ts/editor/toolbar.ts                          | 43 ++++++++--------
 ts/tsconfig.json                              |  4 +-
 46 files changed, 88 insertions(+), 90 deletions(-)
 rename ts/{editor-toolbar => components}/BUILD.bazel (80%)
 rename ts/{editor-toolbar => components}/ButtonDropdown.d.ts (100%)
 rename ts/{editor-toolbar => components}/ButtonDropdown.svelte (100%)
 rename ts/{editor-toolbar => components}/ButtonGroup.svelte (100%)
 rename ts/{editor-toolbar => components}/ButtonGroupItem.svelte (100%)
 rename ts/{editor-toolbar => components}/ColorPicker.d.ts (100%)
 rename ts/{editor-toolbar => components}/ColorPicker.svelte (100%)
 rename ts/{editor-toolbar => components}/CommandIconButton.d.ts (100%)
 rename ts/{editor-toolbar => components}/CommandIconButton.svelte (100%)
 rename ts/{editor-toolbar => components}/DropdownItem.d.ts (100%)
 rename ts/{editor-toolbar => components}/DropdownItem.svelte (100%)
 rename ts/{editor-toolbar => components}/DropdownMenu.d.ts (100%)
 rename ts/{editor-toolbar => components}/DropdownMenu.svelte (100%)
 rename ts/{editor-toolbar => components}/IconButton.d.ts (100%)
 rename ts/{editor-toolbar => components}/IconButton.svelte (100%)
 rename ts/{editor-toolbar => components}/LabelButton.svelte (100%)
 rename ts/{editor-toolbar => components}/RawButton.svelte (100%)
 rename ts/{editor-toolbar => components}/SelectButton.d.ts (100%)
 rename ts/{editor-toolbar => components}/SelectButton.svelte (100%)
 rename ts/{editor-toolbar => components}/SelectOption.svelte (100%)
 rename ts/{editor-toolbar => components}/SquareButton.svelte (100%)
 rename ts/{editor-toolbar => components}/StickyBar.svelte (100%)
 rename ts/{editor-toolbar => components}/WithDropdownMenu.d.ts (100%)
 rename ts/{editor-toolbar => components}/WithDropdownMenu.svelte (100%)
 rename ts/{editor-toolbar => components}/WithLabel.d.ts (100%)
 rename ts/{editor-toolbar => components}/WithLabel.svelte (100%)
 rename ts/{editor-toolbar => components}/WithShortcut.svelte (100%)
 rename ts/{editor-toolbar => components}/WithTheming.svelte (100%)
 rename ts/{editor-toolbar => components}/contextKeys.ts (100%)
 rename ts/{editor-toolbar => components}/dynamicComponents.ts (100%)
 rename ts/{editor-toolbar => components}/helpers.ts (100%)
 rename ts/{editor-toolbar => components}/hideable.ts (100%)
 rename ts/{editor-toolbar => components}/identifiable.ts (100%)
 rename ts/{editor-toolbar => components}/types.ts (100%)
 delete mode 100644 ts/editor-toolbar/index.ts
 rename ts/{editor-toolbar => editor}/EditorToolbar.svelte (83%)
 rename ts/{editor-toolbar => editor}/NoteTypeButtons.svelte (83%)
 rename ts/{editor-toolbar => editor}/bootstrap.scss (100%)
 rename ts/{editor-toolbar => editor}/legacy.scss (100%)

diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/components/BUILD.bazel
similarity index 80%
rename from ts/editor-toolbar/BUILD.bazel
rename to ts/components/BUILD.bazel
index 975f48ec4..54919451e 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/components/BUILD.bazel
@@ -3,7 +3,6 @@ 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:compile_sass.bzl", "compile_sass")
 
 svelte_files = glob(["*.svelte"])
 
@@ -25,22 +24,9 @@ compile_svelte(
     visibility = ["//visibility:public"],
 )
 
-compile_sass(
-    srcs = [
-        "bootstrap.scss",
-        "legacy.scss",
-    ],
-    group = "local_css",
-    deps = [
-        "//ts/sass:button_mixins_lib",
-        "//ts/sass/bootstrap",
-    ],
-    visibility = ["//visibility:public"],
-)
-
 ts_library(
-    name = "editor-toolbar",
-    module_name = "editor-toolbar",
+    name = "components",
+    module_name = "components",
     srcs = glob(
         ["*.ts"],
         exclude = ["*.test.ts"],
diff --git a/ts/editor-toolbar/ButtonDropdown.d.ts b/ts/components/ButtonDropdown.d.ts
similarity index 100%
rename from ts/editor-toolbar/ButtonDropdown.d.ts
rename to ts/components/ButtonDropdown.d.ts
diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/components/ButtonDropdown.svelte
similarity index 100%
rename from ts/editor-toolbar/ButtonDropdown.svelte
rename to ts/components/ButtonDropdown.svelte
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte
similarity index 100%
rename from ts/editor-toolbar/ButtonGroup.svelte
rename to ts/components/ButtonGroup.svelte
diff --git a/ts/editor-toolbar/ButtonGroupItem.svelte b/ts/components/ButtonGroupItem.svelte
similarity index 100%
rename from ts/editor-toolbar/ButtonGroupItem.svelte
rename to ts/components/ButtonGroupItem.svelte
diff --git a/ts/editor-toolbar/ColorPicker.d.ts b/ts/components/ColorPicker.d.ts
similarity index 100%
rename from ts/editor-toolbar/ColorPicker.d.ts
rename to ts/components/ColorPicker.d.ts
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/components/ColorPicker.svelte
similarity index 100%
rename from ts/editor-toolbar/ColorPicker.svelte
rename to ts/components/ColorPicker.svelte
diff --git a/ts/editor-toolbar/CommandIconButton.d.ts b/ts/components/CommandIconButton.d.ts
similarity index 100%
rename from ts/editor-toolbar/CommandIconButton.d.ts
rename to ts/components/CommandIconButton.d.ts
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/components/CommandIconButton.svelte
similarity index 100%
rename from ts/editor-toolbar/CommandIconButton.svelte
rename to ts/components/CommandIconButton.svelte
diff --git a/ts/editor-toolbar/DropdownItem.d.ts b/ts/components/DropdownItem.d.ts
similarity index 100%
rename from ts/editor-toolbar/DropdownItem.d.ts
rename to ts/components/DropdownItem.d.ts
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/components/DropdownItem.svelte
similarity index 100%
rename from ts/editor-toolbar/DropdownItem.svelte
rename to ts/components/DropdownItem.svelte
diff --git a/ts/editor-toolbar/DropdownMenu.d.ts b/ts/components/DropdownMenu.d.ts
similarity index 100%
rename from ts/editor-toolbar/DropdownMenu.d.ts
rename to ts/components/DropdownMenu.d.ts
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte
similarity index 100%
rename from ts/editor-toolbar/DropdownMenu.svelte
rename to ts/components/DropdownMenu.svelte
diff --git a/ts/editor-toolbar/IconButton.d.ts b/ts/components/IconButton.d.ts
similarity index 100%
rename from ts/editor-toolbar/IconButton.d.ts
rename to ts/components/IconButton.d.ts
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/components/IconButton.svelte
similarity index 100%
rename from ts/editor-toolbar/IconButton.svelte
rename to ts/components/IconButton.svelte
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/components/LabelButton.svelte
similarity index 100%
rename from ts/editor-toolbar/LabelButton.svelte
rename to ts/components/LabelButton.svelte
diff --git a/ts/editor-toolbar/RawButton.svelte b/ts/components/RawButton.svelte
similarity index 100%
rename from ts/editor-toolbar/RawButton.svelte
rename to ts/components/RawButton.svelte
diff --git a/ts/editor-toolbar/SelectButton.d.ts b/ts/components/SelectButton.d.ts
similarity index 100%
rename from ts/editor-toolbar/SelectButton.d.ts
rename to ts/components/SelectButton.d.ts
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/components/SelectButton.svelte
similarity index 100%
rename from ts/editor-toolbar/SelectButton.svelte
rename to ts/components/SelectButton.svelte
diff --git a/ts/editor-toolbar/SelectOption.svelte b/ts/components/SelectOption.svelte
similarity index 100%
rename from ts/editor-toolbar/SelectOption.svelte
rename to ts/components/SelectOption.svelte
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/components/SquareButton.svelte
similarity index 100%
rename from ts/editor-toolbar/SquareButton.svelte
rename to ts/components/SquareButton.svelte
diff --git a/ts/editor-toolbar/StickyBar.svelte b/ts/components/StickyBar.svelte
similarity index 100%
rename from ts/editor-toolbar/StickyBar.svelte
rename to ts/components/StickyBar.svelte
diff --git a/ts/editor-toolbar/WithDropdownMenu.d.ts b/ts/components/WithDropdownMenu.d.ts
similarity index 100%
rename from ts/editor-toolbar/WithDropdownMenu.d.ts
rename to ts/components/WithDropdownMenu.d.ts
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/components/WithDropdownMenu.svelte
similarity index 100%
rename from ts/editor-toolbar/WithDropdownMenu.svelte
rename to ts/components/WithDropdownMenu.svelte
diff --git a/ts/editor-toolbar/WithLabel.d.ts b/ts/components/WithLabel.d.ts
similarity index 100%
rename from ts/editor-toolbar/WithLabel.d.ts
rename to ts/components/WithLabel.d.ts
diff --git a/ts/editor-toolbar/WithLabel.svelte b/ts/components/WithLabel.svelte
similarity index 100%
rename from ts/editor-toolbar/WithLabel.svelte
rename to ts/components/WithLabel.svelte
diff --git a/ts/editor-toolbar/WithShortcut.svelte b/ts/components/WithShortcut.svelte
similarity index 100%
rename from ts/editor-toolbar/WithShortcut.svelte
rename to ts/components/WithShortcut.svelte
diff --git a/ts/editor-toolbar/WithTheming.svelte b/ts/components/WithTheming.svelte
similarity index 100%
rename from ts/editor-toolbar/WithTheming.svelte
rename to ts/components/WithTheming.svelte
diff --git a/ts/editor-toolbar/contextKeys.ts b/ts/components/contextKeys.ts
similarity index 100%
rename from ts/editor-toolbar/contextKeys.ts
rename to ts/components/contextKeys.ts
diff --git a/ts/editor-toolbar/dynamicComponents.ts b/ts/components/dynamicComponents.ts
similarity index 100%
rename from ts/editor-toolbar/dynamicComponents.ts
rename to ts/components/dynamicComponents.ts
diff --git a/ts/editor-toolbar/helpers.ts b/ts/components/helpers.ts
similarity index 100%
rename from ts/editor-toolbar/helpers.ts
rename to ts/components/helpers.ts
diff --git a/ts/editor-toolbar/hideable.ts b/ts/components/hideable.ts
similarity index 100%
rename from ts/editor-toolbar/hideable.ts
rename to ts/components/hideable.ts
diff --git a/ts/editor-toolbar/identifiable.ts b/ts/components/identifiable.ts
similarity index 100%
rename from ts/editor-toolbar/identifiable.ts
rename to ts/components/identifiable.ts
diff --git a/ts/editor-toolbar/types.ts b/ts/components/types.ts
similarity index 100%
rename from ts/editor-toolbar/types.ts
rename to ts/components/types.ts
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
deleted file mode 100644
index 11dcda3ae..000000000
--- a/ts/editor-toolbar/index.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import type { ToolbarItem, IterableToolbarItem } from "./types";
-
-import EditorToolbar from "./EditorToolbar.svelte";
-export { default as EditorToolbar } from "./EditorToolbar.svelte";
-
-import "./bootstrap.css";
-
-interface EditorToolbarArgs {
-    target: HTMLElement;
-    anchor?: HTMLElement;
-    buttons?: IterableToolbarItem[];
-    menus?: ToolbarItem[];
-}
-
-export function editorToolbar({
-    target,
-    anchor = undefined,
-    buttons = [],
-    menus = [],
-}: EditorToolbarArgs): EditorToolbar {
-    return new EditorToolbar({
-        target,
-        anchor,
-        props: {
-            buttons,
-            menus,
-            nightMode: document.documentElement.classList.contains("night-mode"),
-        },
-    });
-}
-
-/* Exports for editor */
-// @ts-expect-error insufficient typing of svelte modules
-export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
-// @ts-expect-error insufficient typing of svelte modules
-export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index 92ce959a2..f561474b2 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -1,10 +1,28 @@
 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")
 load("//ts:vendor.bzl", "copy_bootstrap_icons", "copy_mdi_icons")
 load("//ts:compile_sass.bzl", "compile_sass")
 
+svelte_files = glob(["*.svelte"])
+
+svelte_names = [f.replace(".svelte", "") for f in svelte_files]
+
+filegroup(
+    name = "svelte_components",
+    srcs = svelte_names,
+    visibility = ["//visibility:public"],
+)
+
+compile_svelte(
+    name = "svelte",
+    srcs = svelte_files,
+    deps = [],
+    visibility = ["//visibility:public"],
+)
+
 compile_sass(
     srcs = [
         "editable.scss",
@@ -30,6 +48,19 @@ compile_sass(
     ],
 )
 
+compile_sass(
+    srcs = [
+        "bootstrap.scss",
+        "legacy.scss",
+    ],
+    group = "local_css",
+    deps = [
+        "//ts/sass:button_mixins_lib",
+        "//ts/sass/bootstrap",
+    ],
+    visibility = ["//visibility:public"],
+)
+
 ts_library(
     name = "editor_ts",
     srcs = glob(["*.ts"]),
@@ -38,8 +69,8 @@ ts_library(
         "//ts:image_module_support",
         "//ts/lib",
         "//ts/sveltelib",
+        "//ts/components",
         "//ts/html-filter",
-        "//ts/editor-toolbar",
         "@npm//svelte",
     ],
 )
@@ -106,8 +137,9 @@ esbuild(
         "bootstrap-icons",
         "mdi-icons",
         "editor_ts",
-        "//ts/editor-toolbar:local_css",
-        "//ts/editor-toolbar:svelte_components",
+        "local_css",
+        "svelte_components",
+        "//ts/components:svelte_components",
     ],
 )
 
@@ -129,3 +161,15 @@ prettier_test(
 #         ],
 #     ),
 # )
+
+svelte_check(
+    name = "svelte_check",
+    srcs = glob([
+        "*.ts",
+        "*.svelte",
+    ]) + [
+        "//ts/sass:button_mixins_lib",
+        "//ts/sass/bootstrap",
+        "@npm//@types/bootstrap",
+    ],
+)
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
similarity index 83%
rename from ts/editor-toolbar/EditorToolbar.svelte
rename to ts/editor/EditorToolbar.svelte
index dfd4a6cc2..0b8ebe14a 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -19,10 +19,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <script lang="typescript">
     import { setContext } from "svelte";
-    import { disabledKey, nightModeKey } from "./contextKeys";
+    import { disabledKey, nightModeKey } from "components/contextKeys";
+
+    import WithTheming from "components/WithTheming.svelte";
+    import StickyBar from "components/StickyBar.svelte";
 
-    import WithTheming from "./WithTheming.svelte";
-    import StickyBar from "./StickyBar.svelte";
     import NoteTypeButtons from "./NoteTypeButtons.svelte";
 
     export let nightMode: boolean;
diff --git a/ts/editor-toolbar/NoteTypeButtons.svelte b/ts/editor/NoteTypeButtons.svelte
similarity index 83%
rename from ts/editor-toolbar/NoteTypeButtons.svelte
rename to ts/editor/NoteTypeButtons.svelte
index d2653d01b..5efb7dd8d 100644
--- a/ts/editor-toolbar/NoteTypeButtons.svelte
+++ b/ts/editor/NoteTypeButtons.svelte
@@ -6,9 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { bridgeCommand } from "lib/bridgecommand";
     import * as tr from "lib/i18n";
 
-    import ButtonGroup from "./ButtonGroup.svelte";
-    import LabelButton from "./LabelButton.svelte";
-    import WithShortcut from "./WithShortcut.svelte";
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import LabelButton from "components/LabelButton.svelte";
+    import WithShortcut from "components/WithShortcut.svelte";
 
     export let api = {};
 </script>
diff --git a/ts/editor-toolbar/bootstrap.scss b/ts/editor/bootstrap.scss
similarity index 100%
rename from ts/editor-toolbar/bootstrap.scss
rename to ts/editor/bootstrap.scss
diff --git a/ts/editor/editingArea.ts b/ts/editor/editingArea.ts
index a87161683..8056fac3d 100644
--- a/ts/editor/editingArea.ts
+++ b/ts/editor/editingArea.ts
@@ -3,7 +3,7 @@
 
 import type { Editable } from "./editable";
 
-import { updateActiveButtons } from "editor-toolbar";
+import { updateActiveButtons } from "./toolbar";
 import { bridgeCommand } from "./lib";
 import { onInput, onKey, onKeyUp } from "./inputHandlers";
 import { onFocus, onBlur } from "./focusHandlers";
diff --git a/ts/editor/focusHandlers.ts b/ts/editor/focusHandlers.ts
index 6bcadd8bd..1c748f4fb 100644
--- a/ts/editor/focusHandlers.ts
+++ b/ts/editor/focusHandlers.ts
@@ -1,7 +1,7 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { enableButtons, disableButtons } from "editor-toolbar";
+import { enableButtons, disableButtons } from "./toolbar";
 import type { EditingArea } from "./editingArea";
 
 import { saveField } from "./changeTimer";
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index d953648be..114e878de 100644
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@@ -2,7 +2,7 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 import { filterHTML } from "html-filter";
-import { updateActiveButtons, disableButtons } from "editor-toolbar";
+import { updateActiveButtons, disableButtons } from "./toolbar";
 import { setupI18n, ModuleName } from "lib/i18n";
 
 import "./fields.css";
@@ -169,4 +169,6 @@ export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void
 
 const i18n = setupI18n({ modules: [ModuleName.EDITING, ModuleName.KEYBOARD] });
 
-export const $editorToolbar = initToolbar(i18n);
+import type EditorToolbar from "./EditorToolbar.svelte";
+
+export const $editorToolbar: Promise<EditorToolbar> = initToolbar(i18n);
diff --git a/ts/editor/inputHandlers.ts b/ts/editor/inputHandlers.ts
index 7d43b283f..0a60547ba 100644
--- a/ts/editor/inputHandlers.ts
+++ b/ts/editor/inputHandlers.ts
@@ -1,7 +1,7 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { updateActiveButtons } from "editor-toolbar";
+import { updateActiveButtons } from "./toolbar";
 import { EditingArea } from "./editingArea";
 import { caretToEnd, nodeIsElement, getBlockElement } from "./helpers";
 import { triggerChangeTimer } from "./changeTimer";
diff --git a/ts/editor-toolbar/legacy.scss b/ts/editor/legacy.scss
similarity index 100%
rename from ts/editor-toolbar/legacy.scss
rename to ts/editor/legacy.scss
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index d27051317..6f0c7e557 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -1,14 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import { editorToolbar, EditorToolbar } from "editor-toolbar";
 
-// import { getNotetypeGroup } from "./notetype";
-// import { getFormatInlineGroup } from "./formatInline";
-// import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
-// import { getColorGroup } from "./color";
-// import { getTemplateGroup, getTemplateMenus } from "./template";
+import EditorToolbar from "./EditorToolbar.svelte";
+import "./bootstrap.css";
 
-export function initToolbar(i18n: Promise<void>) {
+export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
     let toolbarResolve: (value: EditorToolbar) => void;
     const toolbarPromise = new Promise<EditorToolbar>((resolve) => {
         toolbarResolve = resolve;
@@ -19,21 +15,28 @@ export function initToolbar(i18n: Promise<void>) {
             const target = document.body;
             const anchor = document.getElementById("fields")!;
 
-            const buttons = [
-                // getNotetypeGroup(),
-                // getFormatInlineGroup(),
-                // getFormatBlockGroup(),
-                // getColorGroup(),
-                // getTemplateGroup(),
-            ];
-
-            const menus = [
-                /*...getFormatBlockMenus(), ...getTemplateMenus()*/
-            ];
-
-            toolbarResolve(editorToolbar({ target, anchor, buttons, menus }));
+            toolbarResolve(
+                new EditorToolbar({
+                    target,
+                    anchor,
+                    props: {
+                        nightMode: document.documentElement.classList.contains(
+                            "night-mode"
+                        ),
+                    },
+                })
+            );
         });
     });
 
     return toolbarPromise;
 }
+
+/* Exports for editor */
+// @ts-expect-error insufficient typing of svelte modules
+export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
+// @ts-expect-error insufficient typing of svelte modules
+export {
+    updateActiveButtons,
+    clearActiveButtons,
+} from "components/CommandIconButton.svelte";
diff --git a/ts/tsconfig.json b/ts/tsconfig.json
index 01bdb0333..6c59e78df 100644
--- a/ts/tsconfig.json
+++ b/ts/tsconfig.json
@@ -8,8 +8,8 @@
         "paths": {
             "lib/*": ["../bazel-bin/ts/lib/*"],
             "sveltelib/*": ["../bazel-bin/ts/sveltelib/*"],
-            "html-filter/*": ["../bazel-bin/ts/html-filter/*"],
-            "editor-toolbar/*": ["../bazel-bin/ts/editor-toolbar/*"]
+            "components/*": ["../bazel-bin/ts/components/*"],
+            "html-filter/*": ["../bazel-bin/ts/html-filter/*"]
         },
         "importsNotUsedAsValues": "error",
         "outDir": "dist",

From 8aa3f5f2fa250a3ccbe6fdde308aa1985bb50dc3 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 28 Apr 2021 02:27:38 +0200
Subject: [PATCH 05/39] Translate ts files in ts/editor to svelte files

---
 ts/components/ButtonDropdown.d.ts      |   9 --
 ts/components/ColorPicker.d.ts         |   8 --
 ts/components/CommandIconButton.d.ts   |  16 ---
 ts/components/CommandIconButton.svelte |  18 ++--
 ts/components/DropdownItem.d.ts        |  11 --
 ts/components/DropdownMenu.d.ts        |   8 --
 ts/components/IconButton.d.ts          |   9 --
 ts/components/SelectButton.d.ts        |  15 ---
 ts/components/WithDropdownMenu.d.ts    |   8 --
 ts/components/WithLabel.d.ts           |  11 --
 ts/components/dynamicComponents.ts     |  61 -----------
 ts/editor/BUILD.bazel                  |   3 +
 ts/editor/ClozeButton.svelte           |  54 ++++++++++
 ts/editor/ColorButtons.svelte          |  53 +++++++++
 ts/editor/EditorToolbar.svelte         |   8 ++
 ts/editor/FormatBlockButtons.svelte    |  95 ++++++++++++++++
 ts/editor/FormatInlineButtons.svelte   |  69 ++++++++++++
 ts/editor/TemplateButtons.svelte       |  99 +++++++++++++++++
 ts/editor/addons.ts                    |  35 ------
 ts/editor/cloze.ts                     |  52 ---------
 ts/editor/color.ts                     |  54 ----------
 ts/editor/formatBlock.ts               | 129 ----------------------
 ts/editor/formatInline.ts              |  88 ---------------
 ts/editor/icons.ts                     |  26 +++++
 ts/editor/notetype.ts                  |  35 ------
 ts/editor/template.ts                  | 143 -------------------------
 26 files changed, 414 insertions(+), 703 deletions(-)
 delete mode 100644 ts/components/ButtonDropdown.d.ts
 delete mode 100644 ts/components/ColorPicker.d.ts
 delete mode 100644 ts/components/CommandIconButton.d.ts
 delete mode 100644 ts/components/DropdownItem.d.ts
 delete mode 100644 ts/components/DropdownMenu.d.ts
 delete mode 100644 ts/components/IconButton.d.ts
 delete mode 100644 ts/components/SelectButton.d.ts
 delete mode 100644 ts/components/WithDropdownMenu.d.ts
 delete mode 100644 ts/components/WithLabel.d.ts
 delete mode 100644 ts/components/dynamicComponents.ts
 create mode 100644 ts/editor/ClozeButton.svelte
 create mode 100644 ts/editor/ColorButtons.svelte
 create mode 100644 ts/editor/FormatBlockButtons.svelte
 create mode 100644 ts/editor/FormatInlineButtons.svelte
 create mode 100644 ts/editor/TemplateButtons.svelte
 delete mode 100644 ts/editor/addons.ts
 delete mode 100644 ts/editor/cloze.ts
 delete mode 100644 ts/editor/color.ts
 delete mode 100644 ts/editor/formatBlock.ts
 delete mode 100644 ts/editor/formatInline.ts
 create mode 100644 ts/editor/icons.ts
 delete mode 100644 ts/editor/notetype.ts
 delete mode 100644 ts/editor/template.ts

diff --git a/ts/components/ButtonDropdown.d.ts b/ts/components/ButtonDropdown.d.ts
deleted file mode 100644
index 2b3cdb70f..000000000
--- a/ts/components/ButtonDropdown.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// 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 ButtonDropdownProps {
-    id: string;
-    className?: string;
-    items: ToolbarItem[];
-}
diff --git a/ts/components/ColorPicker.d.ts b/ts/components/ColorPicker.d.ts
deleted file mode 100644
index fff74056e..000000000
--- a/ts/components/ColorPicker.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// 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;
-    tooltip: string;
-    onChange: (event: Event) => void;
-}
diff --git a/ts/components/CommandIconButton.d.ts b/ts/components/CommandIconButton.d.ts
deleted file mode 100644
index a64bfd4e6..000000000
--- a/ts/components/CommandIconButton.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// 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;
-    tooltip: string;
-    icon: string;
-
-    command: string;
-    onClick: (event: MouseEvent) => void;
-
-    onUpdate: (event: Event) => boolean;
-
-    disables?: boolean;
-    dropdownToggle?: boolean;
-}
diff --git a/ts/components/CommandIconButton.svelte b/ts/components/CommandIconButton.svelte
index 144dc8817..2ef784c64 100644
--- a/ts/components/CommandIconButton.svelte
+++ b/ts/components/CommandIconButton.svelte
@@ -48,22 +48,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let id: string;
     export let className = "";
     export let tooltip: string;
-    export let shortcutLabel: string | undefined;
-    export let icon: string;
-
     export let command: string;
-    export let onClick = (_event: MouseEvent) => {
-        document.execCommand(command);
-    };
+
+    export let onClick: (event: Event) => void;
 
     function onClickWrapped(event: MouseEvent): void {
         onClick(event);
         updateButton(command, event);
     }
 
-    export let onUpdate = (_event: Event) => document.queryCommandState(command);
+    // document.queryCommandState(command);
+    export let update: (event: Event) => boolean;
 
-    updateMap.set(command, onUpdate);
+    updateMap.set(command, update);
 
     let active = false;
 
@@ -81,11 +78,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {id}
     {className}
     {tooltip}
-    {shortcutLabel}
     {active}
     {disables}
     {dropdownToggle}
-    onClick={onClickWrapped}
+    on:click
     on:mount>
-    {@html icon}
+    <slot />
 </SquareButton>
diff --git a/ts/components/DropdownItem.d.ts b/ts/components/DropdownItem.d.ts
deleted file mode 100644
index 81c9138aa..000000000
--- a/ts/components/DropdownItem.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// 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;
-    tooltip: string;
-
-    onClick: (event: MouseEvent) => void;
-    label: string;
-    endLabel: string;
-}
diff --git a/ts/components/DropdownMenu.d.ts b/ts/components/DropdownMenu.d.ts
deleted file mode 100644
index 7d6b6fac9..000000000
--- a/ts/components/DropdownMenu.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// 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 {
-    id: string;
-    items: ToolbarItem[];
-}
diff --git a/ts/components/IconButton.d.ts b/ts/components/IconButton.d.ts
deleted file mode 100644
index 3de549cbe..000000000
--- a/ts/components/IconButton.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// 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;
-    tooltip: string;
-    icon: string;
-    onClick: (event: MouseEvent) => void;
-}
diff --git a/ts/components/SelectButton.d.ts b/ts/components/SelectButton.d.ts
deleted file mode 100644
index d82ad0ab1..000000000
--- a/ts/components/SelectButton.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-export interface Option {
-    label: string;
-    value: string;
-    selected: boolean;
-}
-
-export interface SelectButtonProps {
-    id: string;
-    className?: string;
-    tooltip?: string;
-    disables: boolean;
-    options: Option[];
-}
diff --git a/ts/components/WithDropdownMenu.d.ts b/ts/components/WithDropdownMenu.d.ts
deleted file mode 100644
index d0f163568..000000000
--- a/ts/components/WithDropdownMenu.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// 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 {
-    button: ToolbarItem;
-    menuId: string;
-}
diff --git a/ts/components/WithLabel.d.ts b/ts/components/WithLabel.d.ts
deleted file mode 100644
index 0d0c98a14..000000000
--- a/ts/components/WithLabel.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// 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 WithLabelProps {
-    id?: string;
-    className?: string;
-
-    button: ToolbarItem;
-    label: string;
-}
diff --git a/ts/components/dynamicComponents.ts b/ts/components/dynamicComponents.ts
deleted file mode 100644
index 3272cdecc..000000000
--- a/ts/components/dynamicComponents.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
-import RawButton from "./RawButton.svelte";
-import IconButton from "./IconButton.svelte";
-import type { IconButtonProps } from "./IconButton";
-import CommandIconButton from "./CommandIconButton.svelte";
-import type { CommandIconButtonProps } from "./CommandIconButton";
-import ColorPicker from "./ColorPicker.svelte";
-import type { ColorPickerProps } from "./ColorPicker";
-import SelectButton from "./SelectButton.svelte";
-import type { SelectButtonProps } from "./SelectButton";
-
-import ButtonDropdown from "./ButtonDropdown.svelte";
-import type { ButtonDropdownProps } from "./ButtonDropdown";
-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 WithLabel from "./WithLabel.svelte";
-import type { WithLabelProps } from "./WithLabel";
-
-import { dynamicComponent } from "sveltelib/dynamicComponent";
-
-export const rawButton = dynamicComponent<typeof RawButton, { html: string }>(
-    RawButton
-);
-export const iconButton = dynamicComponent<typeof IconButton, IconButtonProps>(
-    IconButton
-);
-export const commandIconButton = dynamicComponent<
-    typeof CommandIconButton,
-    CommandIconButtonProps
->(CommandIconButton);
-export const colorPicker = dynamicComponent<typeof ColorPicker, ColorPickerProps>(
-    ColorPicker
-);
-export const selectButton = dynamicComponent<typeof SelectButton, SelectButtonProps>(
-    SelectButton
-);
-
-export const buttonDropdown = dynamicComponent<
-    typeof ButtonDropdown,
-    ButtonDropdownProps
->(ButtonDropdown);
-
-export const dropdownMenu = dynamicComponent<typeof DropdownMenu, DropdownMenuProps>(
-    DropdownMenu
-);
-export const dropdownItem = dynamicComponent<typeof DropdownItem, DropdownItemProps>(
-    DropdownItem
-);
-
-export const withDropdownMenu = dynamicComponent<
-    typeof WithDropdownMenu,
-    WithDropdownMenuProps
->(WithDropdownMenu);
-
-export const withLabel = dynamicComponent<typeof WithLabel, WithLabelProps>(WithLabel);
diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index f561474b2..52dac8629 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -71,6 +71,8 @@ ts_library(
         "//ts/sveltelib",
         "//ts/components",
         "//ts/html-filter",
+        # "svelte_components",
+        # "//ts/components:svelte_components",
         "@npm//svelte",
     ],
 )
@@ -171,5 +173,6 @@ svelte_check(
         "//ts/sass:button_mixins_lib",
         "//ts/sass/bootstrap",
         "@npm//@types/bootstrap",
+        "//ts/components:svelte_components",
     ],
 )
diff --git a/ts/editor/ClozeButton.svelte b/ts/editor/ClozeButton.svelte
new file mode 100644
index 000000000..1e5f2d548
--- /dev/null
+++ b/ts/editor/ClozeButton.svelte
@@ -0,0 +1,54 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import * as tr from "lib/i18n";
+
+    import IconButton from "components/IconButton.svelte";
+    import WithShortcut from "components/WithShortcut.svelte";
+
+    import { bracketsIcon } from "./icons";
+    import { forEditorField } from ".";
+    import { wrap } from "./wrap";
+
+    const clozePattern = /\{\{c(\d+)::/gu;
+    function getCurrentHighestCloze(increment: boolean): number {
+        let highest = 0;
+
+        forEditorField([], (field) => {
+            const fieldHTML = field.editingArea.editable.fieldHTML;
+            const matches: number[] = [];
+            let match: RegExpMatchArray | null = null;
+
+            while ((match = clozePattern.exec(fieldHTML))) {
+                matches.push(Number(match[1]));
+            }
+
+            highest = Math.max(highest, ...matches);
+        });
+
+        if (increment) {
+            highest++;
+        }
+
+        return Math.max(1, highest);
+    }
+
+    function onCloze(event: KeyboardEvent | MouseEvent): void {
+        const highestCloze = getCurrentHighestCloze(!event.getModifierState("Alt"));
+        wrap(`{{c${highestCloze}::`, "}}");
+    }
+</script>
+
+<WithShortcut
+    shortcut="Control+Shift+KeyC"
+    optionalModifiers={['Alt']}
+    let:createShortcut
+    let:shortcutLabel>
+    <IconButton
+        tooltip={`${tr.editingClozeDeletion()} (${shortcutLabel})`}
+        on:click={onCloze}>
+        {@html bracketsIcon}
+    </IconButton>
+</WithShortcut>
diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
new file mode 100644
index 000000000..5cf49050c
--- /dev/null
+++ b/ts/editor/ColorButtons.svelte
@@ -0,0 +1,53 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import * as tr from "lib/i18n";
+
+    import IconButton from "components/IconButton.svelte";
+    import ColorPicker from "components/ColorPicker.svelte";
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import WithShortcut from "components/WithShortcut.svelte";
+
+    import { squareFillIcon } from "./icons";
+
+    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);
+    }
+
+    function setWithCurrentColor({ currentTarget }: Event): void {
+        return setForegroundColor((currentTarget as HTMLInputElement).value);
+    }
+</script>
+
+<ButtonGroup id="color">
+    <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
+        <IconButton
+            class="forecolor"
+            tooltip={`${tr.editingSetForegroundColor} (${shortcutLabel})`}
+            on:click={() => wrapWithForecolor(getForecolor())}
+            on:mount={createShortcut}>
+            {@html squareFillIcon}
+        </IconButton>
+    </WithShortcut>
+
+    <WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
+        <ColorPicker
+            tooltip={`${tr.editingChangeColor()} (${shortcutLabel})`}
+            on:change={setWithCurrentColor}
+            on:mount={createShortcut} />
+    </WithShortcut>
+</ButtonGroup>
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 0b8ebe14a..3127cba72 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -25,6 +25,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import StickyBar from "components/StickyBar.svelte";
 
     import NoteTypeButtons from "./NoteTypeButtons.svelte";
+    import FormatInlineButtons from "./FormatInlineButtons.svelte";
+    import FormatBlockButtons from "./FormatBlockButtons.svelte";
+    import ColorButtons from "./ColorButtons.svelte";
+    import TemplateButtons from "./TemplateButtons.svelte";
 
     export let nightMode: boolean;
 
@@ -42,5 +46,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <WithTheming {style}>
     <StickyBar>
         <NoteTypeButtons />
+        <FormatInlineButtons />
+        <FormatBlockButtons />
+        <ColorButtons />
+        <TemplateButtons />
     </StickyBar>
 </WithTheming>
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/FormatBlockButtons.svelte
new file mode 100644
index 000000000..2c7de3a9e
--- /dev/null
+++ b/ts/editor/FormatBlockButtons.svelte
@@ -0,0 +1,95 @@
+<!--
+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 { EditingArea } from "./editingArea";
+    import * as tr from "lib/i18n";
+
+    import CommandIconButton from "components/CommandIconButton.svelte";
+    import IconButton from "components/IconButton.svelte";
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonDropdown from "components/ButtonDropdown.svelte";
+    import WithDropdownMenu from "components/WithDropdownMenu.svelte";
+
+    import { getListItem } from "./helpers";
+    import {
+        ulIcon,
+        olIcon,
+        listOptionsIcon,
+        justifyFullIcon,
+        justifyLeftIcon,
+        justifyRightIcon,
+        justifyCenterIcon,
+        indentIcon,
+        outdentIcon,
+    } from "./icons";
+
+    export let api = {};
+
+    function outdentListItem() {
+        const currentField = document.activeElement as EditingArea;
+        if (getListItem(currentField.shadowRoot!)) {
+            document.execCommand("outdent");
+        }
+    }
+
+    function indentListItem() {
+        const currentField = document.activeElement as EditingArea;
+        if (getListItem(currentField.shadowRoot!)) {
+            document.execCommand("indent");
+        }
+    }
+</script>
+
+<ButtonDropdown id="listFormatting">
+    <ButtonGroup id="justify" {api}>
+        <CommandIconButton command="justifyLeft" tooltip={tr.editingAlignLeft()}>
+            {@html justifyLeftIcon}
+        </CommandIconButton>
+
+        <CommandIconButton command="justifyCenter" tooltip={tr.editingCenter()}>
+            {@html justifyCenterIcon}
+        </CommandIconButton>
+
+        <CommandIconButton command="justifyCenter" tooltip={tr.editingCenter()}>
+            {@html justifyCenterIcon}
+        </CommandIconButton>
+
+        <CommandIconButton command="justifyRight" tooltip={tr.editingAlignRight()}>
+            {@html justifyRightIcon}
+        </CommandIconButton>
+
+        <CommandIconButton command="justifyFull" tooltip={tr.editingJustify()}>
+            {@html justifyFullIcon}
+        </CommandIconButton>
+    </ButtonGroup>
+
+    <ButtonGroup id="indentation" {api}>
+        <IconButton on:click={outdentListItem} tooltip={tr.editingOutdent}>
+            {@html outdentIcon}
+        </IconButton>
+
+        <IconButton on:click={indentListItem} tooltip={tr.editingIndent}>
+            {@html indentIcon}
+        </IconButton>
+    </ButtonGroup>
+</ButtonDropdown>
+
+<ButtonGroup id="blockFormatting" {api}>
+    <CommandIconButton
+        command="insertUnorderedList"
+        tooltip={tr.editingUnorderedList()}>
+        {@html ulIcon}
+    </CommandIconButton>
+
+    <CommandIconButton command="insertOrderedList" tooltip={tr.editingOrderedList()}>
+        {@html olIcon}
+    </CommandIconButton>
+
+    <WithDropdownMenu menuId="listFormatting">
+        <IconButton>
+            {@html listOptionsIcon}
+        </IconButton>
+    </WithDropdownMenu>
+</ButtonGroup>
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/FormatInlineButtons.svelte
new file mode 100644
index 000000000..584e0612c
--- /dev/null
+++ b/ts/editor/FormatInlineButtons.svelte
@@ -0,0 +1,69 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import * as tr from "lib/i18n";
+
+    import CommandIconButton from "components/CommandIconButton.svelte";
+    import IconButton from "components/IconButton.svelte";
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import WithShortcut from "components/WithShortcut.svelte";
+
+    import {
+        boldIcon,
+        italicIcon,
+        underlineIcon,
+        superscriptIcon,
+        subscriptIcon,
+        eraserIcon,
+    } from "./icons";
+
+    export let api = {};
+</script>
+
+<ButtonGroup id="notetype" {api}>
+    <WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel>
+        <CommandIconButton
+            tooltip={`${tr.editingBoldText()} (${shortcutLabel})`}
+            command="bold"
+            onClick={() => document.execCommand('bold')}
+            on:mount={createShortcut}>
+            {@html boldIcon}
+        </CommandIconButton>
+    </WithShortcut>
+
+    <WithShortcut shortcut="Control+KeyI">
+        <CommandIconButton tooltip={tr.editingItalicText()} command="italic">
+            {@html italicIcon}
+        </CommandIconButton>
+    </WithShortcut>
+
+    <WithShortcut shortcut="Control+KeyU">
+        <CommandIconButton tooltip={tr.editingUnderlineText()} command="underline">
+            {@html underlineIcon}
+        </CommandIconButton>
+    </WithShortcut>
+
+    <WithShortcut shortcut="Control+Shift+Equal">
+        <CommandIconButton tooltip={tr.editingSuperscript()} command="superscript">
+            {@html superscriptIcon}
+        </CommandIconButton>
+    </WithShortcut>
+
+    <WithShortcut shortcut="Control+Equal">
+        <CommandIconButton tooltip={tr.editingSubscript()} command="subscript">
+            {@html subscriptIcon}
+        </CommandIconButton>
+    </WithShortcut>
+
+    <WithShortcut shortcut="Control+KeyR">
+        <IconButton
+            tooltip={tr.editingSubscript()}
+            on:click={() => {
+                document.execCommand('removeFormat');
+            }}>
+            {@html eraserIcon}
+        </IconButton>
+    </WithShortcut>
+</ButtonGroup>
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
new file mode 100644
index 000000000..3739e8836
--- /dev/null
+++ b/ts/editor/TemplateButtons.svelte
@@ -0,0 +1,99 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import * as tr from "lib/i18n";
+    import { bridgeCommand } from "lib/bridgecommand";
+
+    import IconButton from "components/IconButton.svelte";
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import DropdownMenu from "components/DropdownMenu.svelte";
+    import DropdownItem from "components/DropdownItem.svelte";
+    import WithDropdownMenu from "components/WithDropdownMenu.svelte";
+    import WithShortcut from "components/WithShortcut.svelte";
+    import ClozeButton from "./ClozeButton.svelte";
+
+    import { wrap } from "./wrap";
+    import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
+
+    function onAttachment(): void {
+        bridgeCommand("attach");
+    }
+
+    function onRecord(): void {
+        bridgeCommand("record");
+    }
+
+    function onHtmlEdit(): void {
+        bridgeCommand("htmlEdit");
+    }
+
+    const mathjaxMenuId = "mathjaxMenu";
+</script>
+
+<ButtonGroup id="template">
+    <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
+        <IconButton
+            tooltip={tr.editingAttachPicturesaudiovideo}
+            on:click={onAttachment}>
+            {@html paperclipIcon}
+        </IconButton>
+    </WithShortcut>
+
+    <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
+        <IconButton tooltip={tr.editingRecordAudio} on:click={onRecord}>
+            {@html micIcon}
+        </IconButton>
+    </WithShortcut>
+
+    <ClozeButton />
+
+    <IconButton>
+        {@html functionIcon}
+    </IconButton>
+
+    <WithShortcut shortcut="Control+Shift+KeyX" let:createShortcut let:shortcutLabel>
+        <IconButton tooltip={tr.editingHtmlEditor} on:click={onHtmlEdit}>
+            {@html xmlIcon}
+        </IconButton>
+    </WithShortcut>
+</ButtonGroup>
+
+<DropdownMenu id={matjaxMenuId}>
+    <WithShortcut shortcut="Control+KeyM, KeyM" let:createShortcut let:shortcutLabel>
+        <DropdownItem on:click={() => wrap('\\(', '\\)')}>
+            {tr.editingMathjaxInline}
+        </DropdownItem>
+    </WithShortcut>
+
+    <WithShortcut shortcut="Control+KeyM, KeyE" let:createShortcut let:shortcutLabel>
+        <DropdownItem on:click={() => wrap('\\[', '\\]')}>
+            {tr.editingMathjaxBlock}
+        </DropdownItem>
+    </WithShortcut>
+
+    <WithShortcut shortcut="Control+KeyM, KeyC" let:createShortcut let:shortcutLabel>
+        <DropdownItem on:click={() => wrap('\\(\\ce{', '}\\)')}>
+            {tr.editingMathjaxChemistry}
+        </DropdownItem>
+    </WithShortcut>
+
+    <WithShortcut shortcut="Control+KeyT, KeyT" let:createShortcut let:shortcutLabel>
+        <DropdownItem on:click={() => wrap('[latex]', '[/latex]')}>
+            {tr.editingLatex}
+        </DropdownItem>
+    </WithShortcut>
+
+    <WithShortcut shortcut="Control+KeyT, KeyE" let:createShortcut let:shortcutLabel>
+        <DropdownItem on:click={() => wrap('[$]', '[/$]')}>
+            {tr.editingLatexEquation}
+        </DropdownItem>
+    </WithShortcut>
+
+    <WithShortcut shortcut="Control+KeyT, KeyM" let:createShortcut let:shortcutLabel>
+        <DropdownItem on:click={() => wrap('[$$]', '[/$$]')}>
+            {tr.editingLatexMathEnv}
+        </DropdownItem>
+    </WithShortcut>
+</DropdownMenu>
diff --git a/ts/editor/addons.ts b/ts/editor/addons.ts
deleted file mode 100644
index 70ec0dbd0..000000000
--- a/ts/editor/addons.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// 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 {
-//     buttonGroup,
-//     rawButton,
-//     labelButton,
-//     iconButton,
-//     commandIconButton,
-//     selectButton,
-//     dropdownMenu,
-//     dropdownItem,
-//     buttonDropdown,
-//     withDropdownMenu,
-//     withLabel,
-// } from "editor-toolbar/dynamicComponents";
-
-// export const editorToolbar: Record<
-//     string,
-//     (props: Record<string, unknown>) => DynamicSvelteComponent
-// > = {
-//     buttonGroup,
-//     rawButton,
-//     labelButton,
-//     iconButton,
-//     commandIconButton,
-//     selectButton,
-
-//     dropdownMenu,
-//     dropdownItem,
-//     buttonDropdown,
-//     withDropdownMenu,
-//     withLabel,
-// };
diff --git a/ts/editor/cloze.ts b/ts/editor/cloze.ts
deleted file mode 100644
index 20686ff7a..000000000
--- a/ts/editor/cloze.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-// import type { ToolbarItem } from "editor-toolbar/types";
-
-// import * as tr from "lib/i18n";
-// import { iconButton, withShortcut } from "editor-toolbar/dynamicComponents";
-
-// import bracketsIcon from "./code-brackets.svg";
-
-// import { forEditorField } from ".";
-// import { wrap } from "./wrap";
-
-// const clozePattern = /\{\{c(\d+)::/gu;
-// function getCurrentHighestCloze(increment: boolean): number {
-//     let highest = 0;
-
-//     forEditorField([], (field) => {
-//         const fieldHTML = field.editingArea.editable.fieldHTML;
-//         const matches: number[] = [];
-//         let match: RegExpMatchArray | null = null;
-
-//         while ((match = clozePattern.exec(fieldHTML))) {
-//             matches.push(Number(match[1]));
-//         }
-
-//         highest = Math.max(highest, ...matches);
-//     });
-
-//     if (increment) {
-//         highest++;
-//     }
-
-//     return Math.max(1, highest);
-// }
-
-// function onCloze(event: KeyboardEvent | MouseEvent): void {
-//     const highestCloze = getCurrentHighestCloze(!event.getModifierState("Alt"));
-//     wrap(`{{c${highestCloze}::`, "}}");
-// }
-
-// export function getClozeButton(): ToolbarItem {
-//     return withShortcut({
-//         id: "cloze",
-//         shortcut: "Control+Shift+KeyC",
-//         optionalModifiers: ["Alt"],
-//         button: iconButton({
-//             icon: bracketsIcon,
-//             onClick: onCloze,
-//             tooltip: tr.editingClozeDeletion(),
-//         }),
-//     });
-// }
diff --git a/ts/editor/color.ts b/ts/editor/color.ts
deleted file mode 100644
index 3394807fb..000000000
--- a/ts/editor/color.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-// import type { IterableToolbarItem } from "editor-toolbar/types";
-
-// import {
-//     iconButton,
-//     colorPicker,
-//     buttonGroup,
-//     withShortcut,
-// } from "editor-toolbar/dynamicComponents";
-// import * as tr from "lib/i18n";
-
-// 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 function getColorGroup(): IterableToolbarItem {
-//     const forecolorButton = withShortcut({
-//         shortcut: "F7",
-//         button: iconButton({
-//             icon: squareFillIcon,
-//             className: "forecolor",
-//             onClick: () => wrapWithForecolor(getForecolor()),
-//             tooltip: tr.editingSetForegroundColor(),
-//         }),
-//     });
-
-//     const colorpickerButton = withShortcut({
-//         shortcut: "F8",
-//         button: colorPicker({
-//             onChange: ({ currentTarget }) =>
-//                 setForegroundColor((currentTarget as HTMLInputElement).value),
-//             tooltip: tr.editingChangeColor(),
-//         }),
-//     });
-
-//     return buttonGroup({
-//         id: "color",
-//         items: [forecolorButton, colorpickerButton],
-//     });
-// }
diff --git a/ts/editor/formatBlock.ts b/ts/editor/formatBlock.ts
deleted file mode 100644
index edcea4004..000000000
--- a/ts/editor/formatBlock.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-// import type { IterableToolbarItem } from "editor-toolbar/types";
-// import type { EditingArea } from "./editingArea";
-
-// import * as tr from "lib/i18n";
-// import {
-//     commandIconButton,
-//     iconButton,
-//     buttonGroup,
-//     buttonDropdown,
-//     withDropdownMenu,
-// } from "editor-toolbar/dynamicComponents";
-
-// import { getListItem } from "./helpers";
-
-// import ulIcon from "./list-ul.svg";
-// import olIcon from "./list-ol.svg";
-// import listOptionsIcon from "./text-paragraph.svg";
-
-// import justifyFullIcon from "./justify.svg";
-// import justifyLeftIcon from "./text-left.svg";
-// import justifyRightIcon from "./text-right.svg";
-// import justifyCenterIcon from "./text-center.svg";
-
-// import indentIcon from "./text-indent-left.svg";
-// import outdentIcon from "./text-indent-right.svg";
-
-// const outdentListItem = () => {
-//     const currentField = document.activeElement as EditingArea;
-//     if (getListItem(currentField.shadowRoot!)) {
-//         document.execCommand("outdent");
-//     }
-// };
-
-// const indentListItem = () => {
-//     const currentField = document.activeElement as EditingArea;
-//     if (getListItem(currentField.shadowRoot!)) {
-//         document.execCommand("indent");
-//     }
-// };
-
-// export function getFormatBlockMenus(): IterableToolbarItem[] {
-//     const justifyLeftButton = commandIconButton({
-//         icon: justifyLeftIcon,
-//         command: "justifyLeft",
-//         tooltip: tr.editingAlignLeft(),
-//     });
-
-//     const justifyCenterButton = commandIconButton({
-//         icon: justifyCenterIcon,
-//         command: "justifyCenter",
-//         tooltip: tr.editingCenter(),
-//     });
-
-//     const justifyRightButton = commandIconButton({
-//         icon: justifyRightIcon,
-//         command: "justifyRight",
-//         tooltip: tr.editingAlignRight(),
-//     });
-
-//     const justifyFullButton = commandIconButton({
-//         icon: justifyFullIcon,
-//         command: "justifyFull",
-//         tooltip: tr.editingJustify(),
-//     });
-
-//     const justifyGroup = buttonGroup({
-//         id: "justify",
-//         items: [
-//             justifyLeftButton,
-//             justifyCenterButton,
-//             justifyRightButton,
-//             justifyFullButton,
-//         ],
-//     });
-
-//     const outdentButton = iconButton({
-//         icon: outdentIcon,
-//         onClick: outdentListItem,
-//         tooltip: tr.editingOutdent(),
-//     });
-
-//     const indentButton = iconButton({
-//         icon: indentIcon,
-//         onClick: indentListItem,
-//         tooltip: tr.editingIndent(),
-//     });
-
-//     const indentationGroup = buttonGroup({
-//         id: "indentation",
-//         items: [outdentButton, indentButton],
-//     });
-
-//     const formattingOptions = buttonDropdown({
-//         id: "listFormatting",
-//         items: [justifyGroup, indentationGroup],
-//     });
-
-//     return [formattingOptions];
-// }
-
-// export function getFormatBlockGroup(): IterableToolbarItem {
-//     const ulButton = commandIconButton({
-//         icon: ulIcon,
-//         command: "insertUnorderedList",
-//         tooltip: tr.editingUnorderedList(),
-//     });
-
-//     const olButton = commandIconButton({
-//         icon: olIcon,
-//         command: "insertOrderedList",
-//         tooltip: tr.editingOrderedList(),
-//     });
-
-//     const listFormattingButton = iconButton({
-//         icon: listOptionsIcon,
-//     });
-
-//     const listFormatting = withDropdownMenu({
-//         button: listFormattingButton,
-//         menuId: "listFormatting",
-//     });
-
-//     return buttonGroup({
-//         id: "blockFormatting",
-//         items: [ulButton, olButton, listFormatting],
-//     });
-// }
diff --git a/ts/editor/formatInline.ts b/ts/editor/formatInline.ts
deleted file mode 100644
index cfac04857..000000000
--- a/ts/editor/formatInline.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-// import type { IterableToolbarItem } from "editor-toolbar/types";
-
-// import * as tr from "lib/i18n";
-// import {
-//     commandIconButton,
-//     iconButton,
-//     buttonGroup,
-//     withShortcut,
-// } from "editor-toolbar/dynamicComponents";
-
-// 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 function getFormatInlineGroup(): IterableToolbarItem {
-//     const boldButton = withShortcut({
-//         shortcut: "Control+KeyB",
-//         button: commandIconButton({
-//             icon: boldIcon,
-//             tooltip: tr.editingBoldText(),
-//             command: "bold",
-//         }),
-//     });
-
-//     const italicButton = withShortcut({
-//         shortcut: "Control+KeyI",
-//         button: commandIconButton({
-//             icon: italicIcon,
-//             tooltip: tr.editingItalicText(),
-//             command: "italic",
-//         }),
-//     });
-
-//     const underlineButton = withShortcut({
-//         shortcut: "Control+KeyU",
-//         button: commandIconButton({
-//             icon: underlineIcon,
-//             tooltip: tr.editingUnderlineText(),
-//             command: "underline",
-//         }),
-//     });
-
-//     const superscriptButton = withShortcut({
-//         shortcut: "Control+Shift+Equal",
-//         button: commandIconButton({
-//             icon: superscriptIcon,
-//             tooltip: tr.editingSuperscript(),
-//             command: "superscript",
-//         }),
-//     });
-
-//     const subscriptButton = withShortcut({
-//         shortcut: "Control+Equal",
-//         button: commandIconButton({
-//             icon: subscriptIcon,
-//             tooltip: tr.editingSubscript(),
-//             command: "subscript",
-//         }),
-//     });
-
-//     const removeFormatButton = withShortcut({
-//         shortcut: "Control+KeyR",
-//         button: iconButton({
-//             icon: eraserIcon,
-//             tooltip: tr.editingRemoveFormatting(),
-//             onClick: () => {
-//                 document.execCommand("removeFormat");
-//             },
-//         }),
-//     });
-
-//     return buttonGroup({
-//         id: "inlineFormatting",
-//         items: [
-//             boldButton,
-//             italicButton,
-//             underlineButton,
-//             superscriptButton,
-//             subscriptButton,
-//             removeFormatButton,
-//         ],
-//     });
-// }
diff --git a/ts/editor/icons.ts b/ts/editor/icons.ts
new file mode 100644
index 000000000..292ff2573
--- /dev/null
+++ b/ts/editor/icons.ts
@@ -0,0 +1,26 @@
+export { default as boldIcon } from "./type-bold.svg";
+export { default as italicIcon } from "./type-italic.svg";
+export { default as underlineIcon } from "./type-underline.svg";
+export { default as superscriptIcon } from "./format-superscript.svg";
+export { default as subscriptIcon } from "./format-subscript.svg";
+export { default as eraserIcon } from "./eraser.svg";
+
+export { default as ulIcon } from "./list-ul.svg";
+export { default as olIcon } from "./list-ol.svg";
+export { default as listOptionsIcon } from "./text-paragraph.svg";
+
+export { default as justifyFullIcon } from "./justify.svg";
+export { default as justifyLeftIcon } from "./text-left.svg";
+export { default as justifyRightIcon } from "./text-right.svg";
+export { default as justifyCenterIcon } from "./text-center.svg";
+
+export { default as indentIcon } from "./text-indent-left.svg";
+export { default as outdentIcon } from "./text-indent-right.svg";
+
+export { default as squareFillIcon } from "./square-fill.svg";
+
+export { default as paperclipIcon } from "./paperclip.svg";
+export { default as micIcon } from "./mic.svg";
+export { default as bracketsIcon } from "./code-brackets.svg";
+export { default as functionIcon } from "./function-variant.svg";
+export { default as xmlIcon } from "./xml.svg";
diff --git a/ts/editor/notetype.ts b/ts/editor/notetype.ts
deleted file mode 100644
index cd828e7e8..000000000
--- a/ts/editor/notetype.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-// import type { IterableToolbarItem } from "editor-toolbar/types";
-
-// import { bridgeCommand } from "lib/bridgecommand";
-// import * as tr from "lib/i18n";
-// import {
-//     labelButton,
-//     buttonGroup,
-//     withShortcut,
-// } from "editor-toolbar/dynamicComponents";
-
-// export function getNotetypeGroup(): IterableToolbarItem {
-//     const fieldsButton = labelButton({
-//         onClick: () => bridgeCommand("fields"),
-//         disables: false,
-//         label: `${tr.editingFields()}...`,
-//         tooltip: tr.editingCustomizeFields(),
-//     });
-
-//     const cardsButton = withShortcut({
-//         shortcut: "Control+KeyL",
-//         button: labelButton({
-//             onClick: () => bridgeCommand("cards"),
-//             disables: false,
-//             label: `${tr.editingCards()}...`,
-//             tooltip: tr.editingCustomizeCardTemplates(),
-//         }),
-//     });
-
-//     return buttonGroup({
-//         id: "notetype",
-//         items: [fieldsButton, cardsButton],
-//     });
-// }
diff --git a/ts/editor/template.ts b/ts/editor/template.ts
deleted file mode 100644
index 49edbe310..000000000
--- a/ts/editor/template.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-// import type { IterableToolbarItem } from "editor-toolbar/types";
-
-// import { bridgeCommand } from "lib/bridgecommand";
-// import {
-//     iconButton,
-//     withDropdownMenu,
-//     dropdownMenu,
-//     dropdownItem,
-//     buttonGroup,
-//     withShortcut,
-// } from "editor-toolbar/dynamicComponents";
-// import * as tr from "lib/i18n";
-
-// import { wrap } from "./wrap";
-
-// import paperclipIcon from "./paperclip.svg";
-// import micIcon from "./mic.svg";
-// import functionIcon from "./function-variant.svg";
-// import xmlIcon from "./xml.svg";
-
-// import { getClozeButton } from "./cloze";
-
-// function onAttachment(): void {
-//     bridgeCommand("attach");
-// }
-
-// function onRecord(): void {
-//     bridgeCommand("record");
-// }
-
-// function onHtmlEdit(): void {
-//     bridgeCommand("htmlEdit");
-// }
-
-// const mathjaxMenuId = "mathjaxMenu";
-
-// export function getTemplateGroup(): IterableToolbarItem {
-//     const attachmentButton = withShortcut({
-//         shortcut: "F3",
-//         button: iconButton({
-//             icon: paperclipIcon,
-//             onClick: onAttachment,
-//             tooltip: tr.editingAttachPicturesaudiovideo(),
-//         }),
-//     });
-
-//     const recordButton = withShortcut({
-//         shortcut: "F5",
-//         button: iconButton({
-//             icon: micIcon,
-//             onClick: onRecord,
-//             tooltip: tr.editingRecordAudio(),
-//         }),
-//     });
-
-//     const mathjaxButton = iconButton({
-//         icon: functionIcon,
-//     });
-
-//     const mathjaxButtonWithMenu = withDropdownMenu({
-//         button: mathjaxButton,
-//         menuId: mathjaxMenuId,
-//     });
-
-//     const htmlButton = withShortcut({
-//         shortcut: "Control+Shift+KeyX",
-//         button: iconButton({
-//             icon: xmlIcon,
-//             onClick: onHtmlEdit,
-//             tooltip: tr.editingHtmlEditor(),
-//         }),
-//     });
-
-//     return buttonGroup({
-//         id: "template",
-//         items: [
-//             attachmentButton,
-//             recordButton,
-//             getClozeButton(),
-//             mathjaxButtonWithMenu,
-//             htmlButton,
-//         ],
-//     });
-// }
-
-// export function getTemplateMenus(): IterableToolbarItem[] {
-//     const mathjaxMenuItems = [
-//         withShortcut({
-//             shortcut: "Control+KeyM, KeyM",
-//             button: dropdownItem({
-//                 onClick: () => wrap("\\(", "\\)"),
-//                 label: tr.editingMathjaxInline(),
-//             }),
-//         }),
-//         withShortcut({
-//             shortcut: "Control+KeyM, KeyE",
-//             button: dropdownItem({
-//                 onClick: () => wrap("\\[", "\\]"),
-//                 label: tr.editingMathjaxBlock(),
-//             }),
-//         }),
-//         withShortcut({
-//             shortcut: "Control+KeyM, KeyC",
-//             button: dropdownItem({
-//                 onClick: () => wrap("\\(\\ce{", "}\\)"),
-//                 label: tr.editingMathjaxChemistry(),
-//             }),
-//         }),
-//     ];
-
-//     const latexMenuItems = [
-//         withShortcut({
-//             shortcut: "Control+KeyT, KeyT",
-//             button: dropdownItem({
-//                 onClick: () => wrap("[latex]", "[/latex]"),
-//                 label: tr.editingLatex(),
-//             }),
-//         }),
-//         withShortcut({
-//             shortcut: "Control+KeyT, KeyE",
-//             button: dropdownItem({
-//                 onClick: () => wrap("[$]", "[/$]"),
-//                 label: tr.editingLatexEquation(),
-//             }),
-//         }),
-//         withShortcut({
-//             shortcut: "Control+KeyT, KeyM",
-//             button: dropdownItem({
-//                 onClick: () => wrap("[$$]", "[/$$]"),
-//                 label: tr.editingLatexMathEnv(),
-//             }),
-//         }),
-//     ];
-
-//     const mathjaxMenu = dropdownMenu({
-//         id: mathjaxMenuId,
-//         items: [...mathjaxMenuItems, ...latexMenuItems],
-//     });
-
-//     return [mathjaxMenu];
-// }

From 2f5074bff6390e084bc8cf3c6346acc4644e9bf6 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 28 Apr 2021 02:55:35 +0200
Subject: [PATCH 06/39] Make StickyBar flex

---
 ts/components/StickyBar.svelte   | 3 +++
 ts/editor/EditorToolbar.svelte   | 3 ---
 ts/editor/TemplateButtons.svelte | 2 +-
 ts/editor/toolbar.ts             | 5 +----
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/ts/components/StickyBar.svelte b/ts/components/StickyBar.svelte
index 1e37c5547..e3a9679c8 100644
--- a/ts/components/StickyBar.svelte
+++ b/ts/components/StickyBar.svelte
@@ -10,6 +10,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     nav {
+        display: flex;
+        flex-wrap: wrap;
+
         position: sticky;
         top: 0;
         left: 0;
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 3127cba72..700434dac 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -47,8 +47,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <StickyBar>
         <NoteTypeButtons />
         <FormatInlineButtons />
-        <FormatBlockButtons />
-        <ColorButtons />
-        <TemplateButtons />
     </StickyBar>
 </WithTheming>
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index 3739e8836..2b2042702 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -60,7 +60,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </WithShortcut>
 </ButtonGroup>
 
-<DropdownMenu id={matjaxMenuId}>
+<DropdownMenu id={mathjaxMenuId}>
     <WithShortcut shortcut="Control+KeyM, KeyM" let:createShortcut let:shortcutLabel>
         <DropdownItem on:click={() => wrap('\\(', '\\)')}>
             {tr.editingMathjaxInline}
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index 6f0c7e557..ef3111db3 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -36,7 +36,4 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
 // @ts-expect-error insufficient typing of svelte modules
 export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
 // @ts-expect-error insufficient typing of svelte modules
-export {
-    updateActiveButtons,
-    clearActiveButtons,
-} from "components/CommandIconButton.svelte";
+export { updateActiveButtons, clearActiveButtons } from "components/CommandIconButton.svelte";

From 0baf14dc8b23eebd3dc933986943774822164579 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 28 Apr 2021 13:09:25 +0200
Subject: [PATCH 07/39] Refactor {CommandIcon,Icon,Square}Button into
 IconButton and WithState

---
 ts/components/BUILD.bazel              |  2 +-
 ts/components/CommandIconButton.svelte | 87 ------------------------
 ts/components/IconButton.svelte        | 74 +++++++++++++++++++--
 ts/components/SquareButton.svelte      | 92 --------------------------
 ts/components/WithState.svelte         | 68 +++++++++++++++++++
 ts/editor/BUILD.bazel                  |  8 +--
 ts/editor/FormatBlockButtons.svelte    | 32 +++++----
 ts/editor/FormatInlineButtons.svelte   | 69 +++++++++++++++----
 ts/editor/index.ts                     |  4 +-
 ts/editor/inputHandlers.ts             |  4 +-
 ts/editor/toolbar.ts                   |  7 +-
 11 files changed, 221 insertions(+), 226 deletions(-)
 delete mode 100644 ts/components/CommandIconButton.svelte
 delete mode 100644 ts/components/SquareButton.svelte
 create mode 100644 ts/components/WithState.svelte

diff --git a/ts/components/BUILD.bazel b/ts/components/BUILD.bazel
index 54919451e..4eaa56dbd 100644
--- a/ts/components/BUILD.bazel
+++ b/ts/components/BUILD.bazel
@@ -41,7 +41,7 @@ ts_library(
         "@npm//@types/bootstrap",
         "@npm//bootstrap",
         "@npm//svelte",
-    ],
+    ] + svelte_names,
 )
 
 # Tests
diff --git a/ts/components/CommandIconButton.svelte b/ts/components/CommandIconButton.svelte
deleted file mode 100644
index 2ef784c64..000000000
--- a/ts/components/CommandIconButton.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<!--
-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";
-
-    type UpdateMap = Map<string, (event: Event) => boolean>;
-    type ActiveMap = Map<string, boolean>;
-
-    const updateMap = new Map() as UpdateMap;
-    const activeMap = new Map() as ActiveMap;
-    const activeStore = writable(activeMap);
-
-    function updateButton(key: string, event: MouseEvent): void {
-        activeStore.update(
-            (map: ActiveMap): ActiveMap =>
-                new Map([...map, [key, updateMap.get(key)(event)]])
-        );
-    }
-
-    function updateButtons(callback: (key: string) => boolean): void {
-        activeStore.update(
-            (map: ActiveMap): ActiveMap => {
-                const newMap = new Map() as ActiveMap;
-
-                for (const key of map.keys()) {
-                    newMap.set(key, callback(key));
-                }
-
-                return newMap;
-            }
-        );
-    }
-
-    export function updateActiveButtons(event: Event) {
-        updateButtons((key: string): boolean => updateMap.get(key)(event));
-    }
-
-    export function clearActiveButtons() {
-        updateButtons((): boolean => false);
-    }
-</script>
-
-<script lang="typescript">
-    import SquareButton from "./SquareButton.svelte";
-
-    export let id: string;
-    export let className = "";
-    export let tooltip: string;
-    export let command: string;
-
-    export let onClick: (event: Event) => void;
-
-    function onClickWrapped(event: MouseEvent): void {
-        onClick(event);
-        updateButton(command, event);
-    }
-
-    // document.queryCommandState(command);
-    export let update: (event: Event) => boolean;
-
-    updateMap.set(command, update);
-
-    let active = false;
-
-    activeStore.subscribe((map: ActiveMap): (() => void) => {
-        active = Boolean(map.get(command));
-        return () => map.delete(command);
-    });
-    activeMap.set(command, active);
-
-    export let disables = true;
-    export let dropdownToggle = false;
-</script>
-
-<SquareButton
-    {id}
-    {className}
-    {tooltip}
-    {active}
-    {disables}
-    {dropdownToggle}
-    on:click
-    on:mount>
-    <slot />
-</SquareButton>
diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 5db161f44..0987167fe 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -3,18 +3,82 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import ButtonGroupItem from "./ButtonGroupItem.svelte";
-    import SquareButton from "./SquareButton.svelte";
+    import type { Readable } from "svelte/store";
+    import { getContext, onMount, createEventDispatcher } from "svelte";
+    import { disabledKey, nightModeKey } from "./contextKeys";
 
     export let id: string;
     let className = "";
     export { className as class };
 
     export let tooltip: string | undefined;
+    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<Readable<boolean>>(disabledKey);
+    $: _disabled = disables && $disabled;
+
+    const nightMode = getContext<boolean>(nightModeKey);
+
+    const dispatch = createEventDispatcher();
+    onMount(() => dispatch("mount", { button: buttonRef }));
 </script>
 
-<SquareButton {id} {className} {tooltip} {disables} {dropdownToggle} on:click on:mount>
-    <slot />
-</SquareButton>
+<style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
+    button {
+        padding: 0;
+    }
+
+    @include button.btn-day;
+    @include button.btn-night;
+
+    span {
+        display: inline-block;
+        vertical-align: middle;
+
+        /* constrain icon */
+        width: calc(var(--toolbar-size) - 2px);
+        height: calc(var(--toolbar-size) - 2px);
+
+        & > :global(svg),
+        & > :global(img) {
+            fill: currentColor;
+            vertical-align: unset;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .dropdown-toggle::after {
+        margin-right: 0.25rem;
+    }
+</style>
+
+<button
+    bind:this={buttonRef}
+    {id}
+    class={`btn ${className}`}
+    class:active
+    class:dropdown-toggle={dropdownToggle}
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
+    tabindex="-1"
+    title={tooltip}
+    disabled={_disabled}
+    {...extraProps}
+    on:click
+    on:mousedown|preventDefault>
+    <span class="p-1"><slot /></span>
+</button>
diff --git a/ts/components/SquareButton.svelte b/ts/components/SquareButton.svelte
deleted file mode 100644
index ae0ac2bdb..000000000
--- a/ts/components/SquareButton.svelte
+++ /dev/null
@@ -1,92 +0,0 @@
-<!--
-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";
-    import { disabledKey, nightModeKey } from "./contextKeys";
-    import { mergeTooltipAndShortcut } from "./helpers";
-
-    export let id: string;
-    export let className = "";
-    export let tooltip: string | undefined;
-    export let shortcutLabel: string | undefined;
-
-    $: title = mergeTooltipAndShortcut(tooltip, shortcutLabel);
-
-    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;
-
-    function extendClassName(className: string): string {
-        return `btn ${className}`;
-    }
-
-    const disabled = getContext<Readable<boolean>>(disabledKey);
-    $: _disabled = disables && $disabled;
-
-    const nightMode = getContext<boolean>(nightModeKey);
-
-    const dispatch = createEventDispatcher();
-    onMount(() => dispatch("mount", { button: buttonRef }));
-</script>
-
-<style lang="scss">
-    @use "ts/sass/button_mixins" as button;
-
-    button {
-        padding: 0;
-    }
-
-    @include button.btn-day;
-    @include button.btn-night;
-
-    span {
-        display: inline-block;
-        vertical-align: middle;
-
-        /* constrain icon */
-        width: calc(var(--toolbar-size) - 2px);
-        height: calc(var(--toolbar-size) - 2px);
-
-        & > :global(svg),
-        & > :global(img) {
-            fill: currentColor;
-            vertical-align: unset;
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    .dropdown-toggle::after {
-        margin-right: 0.25rem;
-    }
-</style>
-
-<button
-    bind:this={buttonRef}
-    {id}
-    class={extendClassName(className)}
-    class:active
-    class:dropdown-toggle={dropdownToggle}
-    class:btn-day={!nightMode}
-    class:btn-night={nightMode}
-    tabindex="-1"
-    {title}
-    disabled={_disabled}
-    {...extraProps}
-    on:click={onClick}
-    on:mousedown|preventDefault>
-    <span class="p-1"><slot /></span>
-</button>
diff --git a/ts/components/WithState.svelte b/ts/components/WithState.svelte
new file mode 100644
index 000000000..32e4facb3
--- /dev/null
+++ b/ts/components/WithState.svelte
@@ -0,0 +1,68 @@
+<!--
+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";
+
+    type T = unknown;
+
+    type UpdaterMap = Map<string, (event: Event) => T>;
+    type StateMap = Map<string, T>;
+
+    const updaterMap = new Map() as UpdaterMap;
+    const stateMap = new Map() as StateMap;
+    const stateStore = writable(stateMap);
+
+    function updateAllStateWithCallback(callback: (key: string) => T): void {
+        stateStore.update(
+            (map: StateMap): StateMap => {
+                const newMap = new Map() as StateMap;
+
+                for (const key of map.keys()) {
+                    newMap.set(key, callback(key));
+                }
+
+                return newMap;
+            }
+        );
+    }
+
+    export function updateAllState(event: Event): void {
+        updateAllStateWithCallback((key: string): T => updaterMap.get(key)(event));
+    }
+
+    export function resetAllState(state: T): void {
+        updateAllStateWithCallback((): T => state);
+    }
+
+    function updateStateByKey(key: string, event: MouseEvent): void {
+        stateStore.update(
+            (map: StateMap): StateMap => {
+                map.set(key, updaterMap.get(key)(event));
+                return map;
+            }
+        );
+    }
+</script>
+
+<script lang="typescript">
+    export let key: string;
+    export let update: (event: Event) => T;
+    export let state: T;
+
+    updaterMap.set(key, update);
+
+    stateStore.subscribe((map: StateMap): (() => void) => {
+        state = Boolean(map.get(key));
+        return () => map.delete(key);
+    });
+
+    stateMap.set(key, state);
+
+    function updateState(event: Event): void {
+        updateStateByKey(key, event);
+    }
+</script>
+
+<slot {state} {updateState} />
diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index 52dac8629..d9d4da081 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -19,7 +19,9 @@ filegroup(
 compile_svelte(
     name = "svelte",
     srcs = svelte_files,
-    deps = [],
+    deps = [
+        "//ts/components",
+    ],
     visibility = ["//visibility:public"],
 )
 
@@ -66,13 +68,11 @@ ts_library(
     srcs = glob(["*.ts"]),
     tsconfig = "//ts:tsconfig.json",
     deps = [
-        "//ts:image_module_support",
         "//ts/lib",
         "//ts/sveltelib",
         "//ts/components",
         "//ts/html-filter",
-        # "svelte_components",
-        # "//ts/components:svelte_components",
+        "//ts:image_module_support",
         "@npm//svelte",
     ],
 )
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/FormatBlockButtons.svelte
index 2c7de3a9e..c186e7707 100644
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/FormatBlockButtons.svelte
@@ -6,10 +6,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { EditingArea } from "./editingArea";
     import * as tr from "lib/i18n";
 
-    import CommandIconButton from "components/CommandIconButton.svelte";
     import IconButton from "components/IconButton.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonDropdown from "components/ButtonDropdown.svelte";
+    import WithState from "components/WithState.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
 
     import { getListItem } from "./helpers";
@@ -44,25 +44,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <ButtonDropdown id="listFormatting">
     <ButtonGroup id="justify" {api}>
-        <CommandIconButton command="justifyLeft" tooltip={tr.editingAlignLeft()}>
+        <IconButton command="justifyLeft" tooltip={tr.editingAlignLeft()}>
             {@html justifyLeftIcon}
-        </CommandIconButton>
+        </IconButton>
 
-        <CommandIconButton command="justifyCenter" tooltip={tr.editingCenter()}>
+        <IconButton command="justifyCenter" tooltip={tr.editingCenter()}>
             {@html justifyCenterIcon}
-        </CommandIconButton>
+        </IconButton>
 
-        <CommandIconButton command="justifyCenter" tooltip={tr.editingCenter()}>
+        <IconButton command="justifyCenter" tooltip={tr.editingCenter()}>
             {@html justifyCenterIcon}
-        </CommandIconButton>
+        </IconButton>
 
-        <CommandIconButton command="justifyRight" tooltip={tr.editingAlignRight()}>
+        <IconButton command="justifyRight" tooltip={tr.editingAlignRight()}>
             {@html justifyRightIcon}
-        </CommandIconButton>
+        </IconButton>
 
-        <CommandIconButton command="justifyFull" tooltip={tr.editingJustify()}>
+        <IconButton command="justifyFull" tooltip={tr.editingJustify()}>
             {@html justifyFullIcon}
-        </CommandIconButton>
+        </IconButton>
     </ButtonGroup>
 
     <ButtonGroup id="indentation" {api}>
@@ -77,15 +77,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </ButtonDropdown>
 
 <ButtonGroup id="blockFormatting" {api}>
-    <CommandIconButton
-        command="insertUnorderedList"
-        tooltip={tr.editingUnorderedList()}>
+    <IconButton command="insertUnorderedList" tooltip={tr.editingUnorderedList()}>
         {@html ulIcon}
-    </CommandIconButton>
+    </IconButton>
 
-    <CommandIconButton command="insertOrderedList" tooltip={tr.editingOrderedList()}>
+    <IconButton command="insertOrderedList" tooltip={tr.editingOrderedList()}>
         {@html olIcon}
-    </CommandIconButton>
+    </IconButton>
 
     <WithDropdownMenu menuId="listFormatting">
         <IconButton>
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/FormatInlineButtons.svelte
index 584e0612c..e8010edf4 100644
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/FormatInlineButtons.svelte
@@ -5,9 +5,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import * as tr from "lib/i18n";
 
-    import CommandIconButton from "components/CommandIconButton.svelte";
     import IconButton from "components/IconButton.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
+    import WithState from "components/WithState.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
 
     import {
@@ -24,22 +24,63 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <ButtonGroup id="notetype" {api}>
     <WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel>
-        <CommandIconButton
-            tooltip={`${tr.editingBoldText()} (${shortcutLabel})`}
-            command="bold"
-            onClick={() => document.execCommand('bold')}
-            on:mount={createShortcut}>
-            {@html boldIcon}
-        </CommandIconButton>
+        <WithState
+            key="bold"
+            update={() => document.queryCommandState('bold')}
+            let:state={active}
+            let:updateState>
+            <IconButton
+                tooltip={`${tr.editingBoldText()} (${shortcutLabel})`}
+                {active}
+                on:click={(event) => {
+                    document.execCommand('bold');
+                    updateState(event);
+                }}
+                on:mount={createShortcut}>
+                {@html boldIcon}
+            </IconButton>
+        </WithState>
     </WithShortcut>
 
-    <WithShortcut shortcut="Control+KeyI">
-        <CommandIconButton tooltip={tr.editingItalicText()} command="italic">
-            {@html italicIcon}
-        </CommandIconButton>
+    <WithShortcut shortcut="Control+KeyI" let:createShortcut let:shortcutLabel>
+        <WithState
+            key="italic"
+            update={() => document.queryCommandState('italic')}
+            let:state={active}
+            let:updateState>
+            <IconButton
+                tooltip={`${tr.editingItalicText()} (${shortcutLabel})`}
+                {active}
+                on:click={(event) => {
+                    document.execCommand('italic');
+                    updateState(event);
+                }}
+                on:mount={createShortcut}>
+                {@html italicIcon}
+            </IconButton>
+        </WithState>
     </WithShortcut>
 
-    <WithShortcut shortcut="Control+KeyU">
+    <WithShortcut shortcut="Control+KeyU" let:createShortcut let:shortcutLabel>
+        <WithState
+            key="underline"
+            update={() => document.queryCommandState('underline')}
+            let:state={active}
+            let:updateState>
+            <IconButton
+                tooltip={`${tr.editingUnderlineText()} (${shortcutLabel})`}
+                {active}
+                on:click={(event) => {
+                    document.execCommand('underline');
+                    updateState(event);
+                }}
+                on:mount={createShortcut}>
+                {@html underlineIcon}
+            </IconButton>
+        </WithState>
+    </WithShortcut>
+
+    <!--<WithShortcut shortcut="Control+KeyU">
         <CommandIconButton tooltip={tr.editingUnderlineText()} command="underline">
             {@html underlineIcon}
         </CommandIconButton>
@@ -65,5 +106,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             }}>
             {@html eraserIcon}
         </IconButton>
-    </WithShortcut>
+    </WithShortcut> -->
 </ButtonGroup>
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index 114e878de..c59f3d01e 100644
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@@ -48,7 +48,7 @@ export function focusField(n: number): void {
     if (field) {
         field.editingArea.focusEditable();
         caretToEnd(field.editingArea);
-        updateActiveButtons();
+        updateActiveButtons(new Event("manualfocus"));
     }
 }
 
@@ -163,7 +163,7 @@ export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void
     document.execCommand(cmd, false, arg);
     if (!nosave) {
         saveField(getCurrentField() as EditingArea, "key");
-        updateActiveButtons();
+        updateActiveButtons(new Event(cmd));
     }
 }
 
diff --git a/ts/editor/inputHandlers.ts b/ts/editor/inputHandlers.ts
index 0a60547ba..8f9043e75 100644
--- a/ts/editor/inputHandlers.ts
+++ b/ts/editor/inputHandlers.ts
@@ -10,7 +10,7 @@ import { registerShortcut } from "lib/shortcuts";
 export function onInput(event: Event): void {
     // make sure IME changes get saved
     triggerChangeTimer(event.currentTarget as EditingArea);
-    updateActiveButtons();
+    updateActiveButtons(event);
 }
 
 export function onKey(evt: KeyboardEvent): void {
@@ -56,7 +56,7 @@ function updateFocus(evt: FocusEvent) {
     const newFocusTarget = evt.target;
     if (newFocusTarget instanceof EditingArea) {
         caretToEnd(newFocusTarget);
-        updateActiveButtons();
+        updateActiveButtons(evt);
     }
 }
 
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index ef3111db3..e3d04a154 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -33,7 +33,10 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
 }
 
 /* Exports for editor */
+export {
+    updateAllState as updateActiveButtons,
+    resetAllState as clearActiveButtons,
+} from "components/WithState.svelte";
+
 // @ts-expect-error insufficient typing of svelte modules
 export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
-// @ts-expect-error insufficient typing of svelte modules
-export { updateActiveButtons, clearActiveButtons } from "components/CommandIconButton.svelte";

From 982c85ded6e437b0e744b09fa1069e73c76be0e1 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 28 Apr 2021 13:32:25 +0200
Subject: [PATCH 08/39] Export module functions from EditorToolbar

---
 ts/editor/BUILD.bazel          |  1 +
 ts/editor/EditorToolbar.svelte | 10 ++++++++++
 ts/editor/toolbar.ts           |  7 +------
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index d9d4da081..af4796ddf 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -141,6 +141,7 @@ esbuild(
         "editor_ts",
         "local_css",
         "svelte_components",
+        "//ts/components",
         "//ts/components:svelte_components",
     ],
 )
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 700434dac..ad87ca7ad 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -15,6 +15,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export function disableButtons(): void {
         disabled.set(true);
     }
+
+    import { updateAllState, resetAllState } from "components/WithState.svelte";
+
+    export function updateActiveButtons(event: Event) {
+        updateAllState(event)
+    }
+
+    export function clearActiveButtons() {
+        resetAllState(false);
+    }
 </script>
 
 <script lang="typescript">
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index e3d04a154..8cb22a112 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -33,10 +33,5 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
 }
 
 /* Exports for editor */
-export {
-    updateAllState as updateActiveButtons,
-    resetAllState as clearActiveButtons,
-} from "components/WithState.svelte";
-
 // @ts-expect-error insufficient typing of svelte modules
-export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
+export { enableButtons, disableButtons, updateActiveButtons, clearActiveButtons } from "./EditorToolbar.svelte";

From baff3df381074dfcaebabc125a252486b6c60d46 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 28 Apr 2021 14:01:55 +0200
Subject: [PATCH 09/39] Add all format inline buttons

---
 ts/editor/EditorToolbar.svelte       |  2 +-
 ts/editor/FormatInlineButtons.svelte | 59 +++++++++++++++++++---------
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index ad87ca7ad..256e57b9d 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -19,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { updateAllState, resetAllState } from "components/WithState.svelte";
 
     export function updateActiveButtons(event: Event) {
-        updateAllState(event)
+        updateAllState(event);
     }
 
     export function clearActiveButtons() {
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/FormatInlineButtons.svelte
index e8010edf4..e800c58b2 100644
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/FormatInlineButtons.svelte
@@ -80,31 +80,52 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </WithState>
     </WithShortcut>
 
-    <!--<WithShortcut shortcut="Control+KeyU">
-        <CommandIconButton tooltip={tr.editingUnderlineText()} command="underline">
-            {@html underlineIcon}
-        </CommandIconButton>
+    <WithShortcut shortcut="Control+Shift+Equal" let:createShortcut let:shortcutLabel>
+        <WithState
+            key="superscript"
+            update={() => document.queryCommandState('superscript')}
+            let:state={active}
+            let:updateState>
+            <IconButton
+                tooltip={tr.editingSuperscript()}
+                {active}
+                on:click={(event) => {
+                    document.execCommand('superscript');
+                    updateState(event);
+                }}
+                on:mount={createShortcut}>
+                {@html superscriptIcon}
+            </IconButton>
+        </WithState>
     </WithShortcut>
 
-    <WithShortcut shortcut="Control+Shift+Equal">
-        <CommandIconButton tooltip={tr.editingSuperscript()} command="superscript">
-            {@html superscriptIcon}
-        </CommandIconButton>
+    <WithShortcut shortcut="Control+Equal" let:createShortcut let:shortcutLabel>
+        <WithState
+            key="subscript"
+            update={() => document.queryCommandState('subscript')}
+            let:state={active}
+            let:updateState>
+            <IconButton
+                tooltip={tr.editingSubscript()}
+                {active}
+                on:click={(event) => {
+                    document.execCommand('subscript');
+                    updateState(event);
+                }}
+                on:mount={createShortcut}>
+                {@html subscriptIcon}
+            </IconButton>
+        </WithState>
     </WithShortcut>
 
-    <WithShortcut shortcut="Control+Equal">
-        <CommandIconButton tooltip={tr.editingSubscript()} command="subscript">
-            {@html subscriptIcon}
-        </CommandIconButton>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyR">
+    <WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
         <IconButton
-            tooltip={tr.editingSubscript()}
-            on:click={() => {
+            tooltip={tr.editingRemoveFormatting()}
+            on:click={(event) => {
                 document.execCommand('removeFormat');
-            }}>
+            }}
+            on:mount={createShortcut}>
             {@html eraserIcon}
         </IconButton>
-    </WithShortcut> -->
+    </WithShortcut>
 </ButtonGroup>

From bd31a198522c292519e15e7402d6756156560b3a Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 28 Apr 2021 22:15:24 +0200
Subject: [PATCH 10/39] Activate FormatBlockButtons

---
 ts/components/ButtonDropdown.svelte   |  19 ++--
 ts/components/DropdownItem.svelte     |  24 ++--
 ts/components/DropdownMenu.svelte     |  20 ++--
 ts/components/IconButton.svelte       |  19 ++--
 ts/components/WithDropdownMenu.svelte |  41 +++----
 ts/components/contextKeys.ts          |   1 +
 ts/editor/EditorToolbar.svelte        |   1 +
 ts/editor/FormatBlockButtons.svelte   | 152 +++++++++++++++++++-------
 8 files changed, 162 insertions(+), 115 deletions(-)

diff --git a/ts/components/ButtonDropdown.svelte b/ts/components/ButtonDropdown.svelte
index 65e778e6a..7f8246e5c 100644
--- a/ts/components/ButtonDropdown.svelte
+++ b/ts/components/ButtonDropdown.svelte
@@ -3,17 +3,18 @@ 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 { setContext } from "svelte";
+    import { dropdownKey } from "./contextKeys";
+
     import ButtonGroup from "./ButtonGroup.svelte";
 
-    export let id: string;
-    export let className = "";
+    export let id: string | undefined;
+    let className = "";
+    export { className as class };
 
-    function extendClassName(className: string): string {
-        return `dropdown-menu btn-dropdown-menu ${className}`;
-    }
+    export let api = {};
 
-    export let items: ToolbarItem[];
+    setContext(dropdownKey, null);
 </script>
 
 <style>
@@ -28,4 +29,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<ButtonGroup {id} className={extendClassName(className)} {items} />
+<ButtonGroup {id} class={`dropdown-menu btn-dropdown-menu ${className}`} {api}>
+    <slot />
+</ButtonGroup>
diff --git a/ts/components/DropdownItem.svelte b/ts/components/DropdownItem.svelte
index 6ea252f92..321b7db15 100644
--- a/ts/components/DropdownItem.svelte
+++ b/ts/components/DropdownItem.svelte
@@ -7,12 +7,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { nightModeKey } from "./contextKeys";
 
     export let id: string;
-    export let className = "";
-    export let tooltip: string;
-    export let label: string;
-    export let shortcutLabel: string | undefined;
+    let className = "";
+    export { className as class };
 
-    export let onClick: (event: MouseEvent) => void;
+    export let tooltip: string;
 
     let buttonRef: HTMLButtonElement;
 
@@ -28,6 +26,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     button {
         display: flex;
         justify-content: space-between;
+
+        font-size: calc(var(--toolbar-size) / 2.3);
     }
 
     .btn-day {
@@ -52,15 +52,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             color: white;
         }
     }
-
-    span {
-        font-size: calc(var(--toolbar-size) / 2.3);
-        color: inherit;
-    }
-
-    .monospace {
-        font-family: monospace;
-    }
 </style>
 
 <button
@@ -70,8 +61,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
     title={tooltip}
-    on:click={onClick}
+    on:click
     on:mousedown|preventDefault>
-    <span class:me-3={shortcutLabel}>{label}</span>
-    {#if shortcutLabel}<span class="monospace">{shortcutLabel}</span>{/if}
+    <slot />
 </button>
diff --git a/ts/components/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte
index 707ac07ad..4ffd9b361 100644
--- a/ts/components/DropdownMenu.svelte
+++ b/ts/components/DropdownMenu.svelte
@@ -3,23 +3,21 @@ 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 { setContext } from "svelte";
+    import { dropdownKey } from "./contextKeys";
 
-    export let id: string;
-    export let items: ToolbarItem[];
+    export let id: string | undefined;
+
+    setContext(dropdownKey, null);
 </script>
 
 <style lang="scss">
-    ul {
+    div {
         background-color: var(--frame-bg);
         border-color: var(--medium-border);
     }
 </style>
 
-<ul {id} class="dropdown-menu">
-    {#each items as menuItem}
-        <li>
-            <svelte:component this={menuItem.component} {...menuItem} />
-        </li>
-    {/each}
-</ul>
+<div {id}>
+    <slot />
+</div>
diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 0987167fe..56269538e 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -4,8 +4,8 @@ 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";
-    import { disabledKey, nightModeKey } from "./contextKeys";
+    import { hasContext, getContext, onMount, createEventDispatcher } from "svelte";
+    import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
 
     export let id: string;
     let className = "";
@@ -14,14 +14,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let tooltip: string | undefined;
     export let active = false;
     export let disables = true;
-    export let dropdownToggle = false;
-
-    $: extraProps = dropdownToggle
-        ? {
-              "data-bs-toggle": "dropdown",
-              "aria-expanded": "false",
-          }
-        : {};
 
     let buttonRef: HTMLButtonElement;
 
@@ -30,6 +22,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const nightMode = getContext<boolean>(nightModeKey);
 
+    const dropdown = getContext(dropdownKey);
+    const dropdownProps = dropdown?.getDropdownTriggerProps() ?? {};
+
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
 </script>
@@ -71,13 +66,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {id}
     class={`btn ${className}`}
     class:active
-    class:dropdown-toggle={dropdownToggle}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
     tabindex="-1"
     title={tooltip}
     disabled={_disabled}
-    {...extraProps}
+    class:dropdown-toggle={Boolean(dropdown)}
+    {...dropdownProps}
     on:click
     on:mousedown|preventDefault>
     <span class="p-1"><slot /></span>
diff --git a/ts/components/WithDropdownMenu.svelte b/ts/components/WithDropdownMenu.svelte
index bf48a4152..12b43cddb 100644
--- a/ts/components/WithDropdownMenu.svelte
+++ b/ts/components/WithDropdownMenu.svelte
@@ -3,39 +3,33 @@ 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";
-
     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
-     */
-    export let button: ToolbarItem;
-    export let menuId: string;
+    import { setContext } from "svelte";
+    import { dropdownKey } from "./contextKeys";
 
-    function extend({
-        className,
-        ...rest
-    }: DynamicSvelteComponent): DynamicSvelteComponent {
-        return {
-            dropdownToggle: true,
-            ...rest,
-        };
-    }
+    setContext(dropdownKey, {
+        getDropdownTriggerProps: () => ({
+            "data-bs-toggle": "dropdown",
+            "aria-expanded": "false",
+        }),
+    });
 
-    function createDropdown({ detail }: CustomEvent): void {
-        const button: HTMLButtonElement = detail.button;
+    const menuId = Math.random().toString(36).substring(2);
 
+    /* Normally dropdown and trigger are associated with a
+    /* common ancestor with .dropdown class */
+    function createDropdown(button: HTMLElement): void {
         /* 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
-         */
+         * be displayed outside of the visible area */
+
         const dropdown = new Dropdown(button);
+
         const menu = (button.getRootNode() as Document) /* or shadow root */
             .getElementById(menuId);
 
@@ -47,7 +41,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<svelte:component
-    this={button.component}
-    {...extend(button)}
-    on:mount={createDropdown} />
+<slot {createDropdown} {menuId} />
diff --git a/ts/components/contextKeys.ts b/ts/components/contextKeys.ts
index 7a3b267e3..bbf71738c 100644
--- a/ts/components/contextKeys.ts
+++ b/ts/components/contextKeys.ts
@@ -4,3 +4,4 @@ export const nightModeKey = Symbol("nightMode");
 export const disabledKey = Symbol("disabled");
 
 export const buttonGroupKey = Symbol("buttonGroup");
+export const dropdownKey = Symbol("dropdown");
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 256e57b9d..5ed197d9b 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -57,5 +57,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <StickyBar>
         <NoteTypeButtons />
         <FormatInlineButtons />
+        <FormatBlockButtons />
     </StickyBar>
 </WithTheming>
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/FormatBlockButtons.svelte
index c186e7707..d66de7cde 100644
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/FormatBlockButtons.svelte
@@ -42,52 +42,120 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ButtonDropdown id="listFormatting">
-    <ButtonGroup id="justify" {api}>
-        <IconButton command="justifyLeft" tooltip={tr.editingAlignLeft()}>
-            {@html justifyLeftIcon}
-        </IconButton>
-
-        <IconButton command="justifyCenter" tooltip={tr.editingCenter()}>
-            {@html justifyCenterIcon}
-        </IconButton>
-
-        <IconButton command="justifyCenter" tooltip={tr.editingCenter()}>
-            {@html justifyCenterIcon}
-        </IconButton>
-
-        <IconButton command="justifyRight" tooltip={tr.editingAlignRight()}>
-            {@html justifyRightIcon}
-        </IconButton>
-
-        <IconButton command="justifyFull" tooltip={tr.editingJustify()}>
-            {@html justifyFullIcon}
-        </IconButton>
-    </ButtonGroup>
-
-    <ButtonGroup id="indentation" {api}>
-        <IconButton on:click={outdentListItem} tooltip={tr.editingOutdent}>
-            {@html outdentIcon}
-        </IconButton>
-
-        <IconButton on:click={indentListItem} tooltip={tr.editingIndent}>
-            {@html indentIcon}
-        </IconButton>
-    </ButtonGroup>
-</ButtonDropdown>
-
 <ButtonGroup id="blockFormatting" {api}>
-    <IconButton command="insertUnorderedList" tooltip={tr.editingUnorderedList()}>
-        {@html ulIcon}
-    </IconButton>
+    <WithState
+        key="insertUnorderedList"
+        update={() => document.queryCommandState('insertUnorderedList')}
+        let:state={active}
+        let:updateState>
+        <IconButton
+            tooltip={tr.editingUnorderedList()}
+            {active}
+            on:click={(event) => {
+                document.execCommand('insertUnorderedList');
+                updateState(event);
+            }}>
+            {@html ulIcon}
+        </IconButton>
+    </WithState>
 
-    <IconButton command="insertOrderedList" tooltip={tr.editingOrderedList()}>
-        {@html olIcon}
-    </IconButton>
+    <WithState
+        key="insertOrderedList"
+        update={() => document.queryCommandState('insertOrderedList')}
+        let:state={active}
+        let:updateState>
+        <IconButton
+            tooltip={tr.editingOrderedList()}
+            {active}
+            on:click={(event) => {
+                document.execCommand('insertOrderedList');
+                updateState(event);
+            }}>
+            {@html olIcon}
+        </IconButton>
+    </WithState>
 
-    <WithDropdownMenu menuId="listFormatting">
-        <IconButton>
+    <WithDropdownMenu let:createDropdown let:menuId>
+        <IconButton on:mount={(event) => createDropdown(event.detail.button)}>
             {@html listOptionsIcon}
         </IconButton>
+
+        <ButtonDropdown id={menuId}>
+            <ButtonGroup id="justify" {api}>
+                <WithState
+                    key="justifyLeft"
+                    update={() => document.queryCommandState('justifyLeft')}
+                    let:state={active}
+                    let:updateState>
+                    <IconButton
+                        tooltip={tr.editingAlignLeft()}
+                        {active}
+                        on:click={(event) => {
+                            document.execCommand('justifyLeft');
+                            updateState(event);
+                        }}>
+                        {@html justifyLeftIcon}
+                    </IconButton>
+                </WithState>
+
+                <WithState
+                    key="justifyCenter"
+                    update={() => document.queryCommandState('justifyCenter')}
+                    let:state={active}
+                    let:updateState>
+                    <IconButton
+                        tooltip={tr.editingCenter()}
+                        {active}
+                        on:click={(event) => {
+                            document.execCommand('justifyCenter');
+                            updateState(event);
+                        }}>
+                        {@html justifyCenterIcon}
+                    </IconButton>
+                </WithState>
+
+                <WithState
+                    key="justifyRight"
+                    update={() => document.queryCommandState('justifyRight')}
+                    let:state={active}
+                    let:updateState>
+                    <IconButton
+                        tooltip={tr.editingAlignRight()}
+                        {active}
+                        on:click={(event) => {
+                            document.execCommand('justifyRight');
+                            updateState(event);
+                        }}>
+                        {@html justifyRightIcon}
+                    </IconButton>
+                </WithState>
+
+                <WithState
+                    key="justifyFull"
+                    update={() => document.queryCommandState('justifyFull')}
+                    let:state={active}
+                    let:updateState>
+                    <IconButton
+                        tooltip={tr.editingJustify()}
+                        {active}
+                        on:click={(event) => {
+                            document.execCommand('justifyFull');
+                            updateState(event);
+                        }}>
+                        {@html justifyFullIcon}
+                    </IconButton>
+                </WithState>
+            </ButtonGroup>
+
+            <ButtonGroup id="indentation" {api}>
+                <IconButton on:click={outdentListItem} tooltip={tr.editingOutdent}>
+                    {@html outdentIcon}
+                </IconButton>
+
+                <IconButton on:click={indentListItem} tooltip={tr.editingIndent}>
+                    {@html indentIcon}
+                </IconButton>
+            </ButtonGroup>
+        </ButtonDropdown>
     </WithDropdownMenu>
 </ButtonGroup>

From 9d9df2a04b8bacc5da3cdec0d31c12a5f9c51bb8 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 28 Apr 2021 22:32:12 +0200
Subject: [PATCH 11/39] Add back ColorButtons

---
 ts/components/ColorPicker.svelte | 16 +++-------------
 ts/editor/ColorButtons.svelte    | 13 +++++--------
 ts/editor/EditorToolbar.svelte   |  1 +
 ts/editor/toolbar.ts             | 12 ++++++++++--
 4 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/ts/components/ColorPicker.svelte b/ts/components/ColorPicker.svelte
index 277b74eae..4430452c9 100644
--- a/ts/components/ColorPicker.svelte
+++ b/ts/components/ColorPicker.svelte
@@ -5,20 +5,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
-    import { mergeTooltipAndShortcut } from "./helpers";
 
     export let id: string;
     export let className = "";
     export let tooltip: string | undefined;
-    export let shortcutLabel: string | undefined;
-
-    $: title = mergeTooltipAndShortcut(tooltip, shortcutLabel);
-
-    export let onChange: (event: Event) => void;
-
-    function extendClassName(className: string): string {
-        return `btn ${className}`;
-    }
 
     const nightMode = getContext(nightModeKey);
 
@@ -68,11 +58,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bind:this={buttonRef}
     tabindex="-1"
     {id}
-    class={extendClassName(className)}
+    class={`btn ${className}`}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
-    {title}
+    title={tooltip}
     on:click={delegateToInput}
     on:mousedown|preventDefault>
-    <input tabindex="-1" bind:this={inputRef} type="color" on:change={onChange} />
+    <input tabindex="-1" bind:this={inputRef} type="color" on:change />
 </button>
diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index 5cf49050c..db3c2afd0 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -15,21 +15,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import "./color.css";
 
     const foregroundColorKeyword = "--foreground-color";
+    let color = "black";
 
-    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 {
+    function wrapWithForecolor(): void {
         document.execCommand("forecolor", false, color);
     }
 
     function setWithCurrentColor({ currentTarget }: Event): void {
-        return setForegroundColor((currentTarget as HTMLInputElement).value);
+        color = (currentTarget as HTMLInputElement).value;
     }
 </script>
 
@@ -38,7 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <IconButton
             class="forecolor"
             tooltip={`${tr.editingSetForegroundColor} (${shortcutLabel})`}
-            on:click={() => wrapWithForecolor(getForecolor())}
+            on:click={wrapWithForecolor}
             on:mount={createShortcut}>
             {@html squareFillIcon}
         </IconButton>
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 5ed197d9b..45c9403ef 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -58,5 +58,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <NoteTypeButtons />
         <FormatInlineButtons />
         <FormatBlockButtons />
+        <ColorButtons />
     </StickyBar>
 </WithTheming>
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index 8cb22a112..150a08c9f 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -33,5 +33,13 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
 }
 
 /* Exports for editor */
-// @ts-expect-error insufficient typing of svelte modules
-export { enableButtons, disableButtons, updateActiveButtons, clearActiveButtons } from "./EditorToolbar.svelte";
+export {
+    // @ts-expect-error insufficient typing of svelte modules
+    enableButtons,
+    // @ts-expect-error insufficient typing of svelte modules
+    disableButtons,
+    // @ts-expect-error insufficient typing of svelte modules
+    updateActiveButtons,
+    // @ts-expect-error insufficient typing of svelte modules
+    clearActiveButtons,
+} from "./EditorToolbar.svelte";

From c1adebf2da99e01a43498365b48660d1fd540b4c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 28 Apr 2021 23:31:45 +0200
Subject: [PATCH 12/39] Add .dropdown-menu class to DropdownMenu

---
 ts/components/DropdownMenu.svelte |   2 +-
 ts/editor/EditorToolbar.svelte    |   1 +
 ts/editor/TemplateButtons.svelte  | 115 ++++++++++++++++++------------
 ts/editor/helpers.ts              |   4 ++
 4 files changed, 75 insertions(+), 47 deletions(-)

diff --git a/ts/components/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte
index 4ffd9b361..12cc0fbee 100644
--- a/ts/components/DropdownMenu.svelte
+++ b/ts/components/DropdownMenu.svelte
@@ -18,6 +18,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<div {id}>
+<div {id} class={`dropdown-menu`}>
     <slot />
 </div>
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 45c9403ef..217475d15 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -59,5 +59,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <FormatInlineButtons />
         <FormatBlockButtons />
         <ColorButtons />
+        <TemplateButtons />
     </StickyBar>
 </WithTheming>
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index 2b2042702..2df8ce46f 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -15,6 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ClozeButton from "./ClozeButton.svelte";
 
     import { wrap } from "./wrap";
+    import { appendInParentheses } from "./helpers";
     import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
 
     function onAttachment(): void {
@@ -28,72 +29,94 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function onHtmlEdit(): void {
         bridgeCommand("htmlEdit");
     }
-
-    const mathjaxMenuId = "mathjaxMenu";
 </script>
 
 <ButtonGroup id="template">
     <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
         <IconButton
-            tooltip={tr.editingAttachPicturesaudiovideo}
+            tooltip={appendInParentheses(tr.editingAttachPicturesaudiovideo(), shortcutLabel)}
             on:click={onAttachment}>
             {@html paperclipIcon}
         </IconButton>
     </WithShortcut>
 
     <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
-        <IconButton tooltip={tr.editingRecordAudio} on:click={onRecord}>
+        <IconButton
+            tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
+            on:click={onRecord}>
             {@html micIcon}
         </IconButton>
     </WithShortcut>
 
     <ClozeButton />
 
-    <IconButton>
-        {@html functionIcon}
-    </IconButton>
+    <WithDropdownMenu let:menuId let:createDropdown>
+        <IconButton on:mount={createDropdown}>
+            {@html functionIcon}
+        </IconButton>
+
+        <DropdownMenu id={menuId}>
+            <WithShortcut
+                shortcut="Control+KeyM, KeyM"
+                let:createShortcut
+                let:shortcutLabel>
+                <DropdownItem on:click={() => wrap('\\(', '\\)')}>
+                    {tr.editingMathjaxInline()}
+                </DropdownItem>
+            </WithShortcut>
+
+            <WithShortcut
+                shortcut="Control+KeyM, KeyE"
+                let:createShortcut
+                let:shortcutLabel>
+                <DropdownItem on:click={() => wrap('\\[', '\\]')}>
+                    {tr.editingMathjaxBlock()}
+                </DropdownItem>
+            </WithShortcut>
+
+            <WithShortcut
+                shortcut="Control+KeyM, KeyC"
+                let:createShortcut
+                let:shortcutLabel>
+                <DropdownItem on:click={() => wrap('\\(\\ce{', '}\\)')}>
+                    {tr.editingMathjaxChemistry()}
+                </DropdownItem>
+            </WithShortcut>
+
+            <WithShortcut
+                shortcut="Control+KeyT, KeyT"
+                let:createShortcut
+                let:shortcutLabel>
+                <DropdownItem on:click={() => wrap('[latex]', '[/latex]')}>
+                    {tr.editingLatex()}
+                </DropdownItem>
+            </WithShortcut>
+
+            <WithShortcut
+                shortcut="Control+KeyT, KeyE"
+                let:createShortcut
+                let:shortcutLabel>
+                <DropdownItem on:click={() => wrap('[$]', '[/$]')}>
+                    {tr.editingLatexEquation()}
+                </DropdownItem>
+            </WithShortcut>
+
+            <WithShortcut
+                shortcut="Control+KeyT, KeyM"
+                let:createShortcut
+                let:shortcutLabel>
+                <DropdownItem on:click={() => wrap('[$$]', '[/$$]')}>
+                    {tr.editingLatexMathEnv()}
+                </DropdownItem>
+            </WithShortcut>
+        </DropdownMenu>
+    </WithDropdownMenu>
 
     <WithShortcut shortcut="Control+Shift+KeyX" let:createShortcut let:shortcutLabel>
-        <IconButton tooltip={tr.editingHtmlEditor} on:click={onHtmlEdit}>
+        <IconButton
+            tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
+            on:click={onHtmlEdit}>
             {@html xmlIcon}
         </IconButton>
     </WithShortcut>
 </ButtonGroup>
-
-<DropdownMenu id={mathjaxMenuId}>
-    <WithShortcut shortcut="Control+KeyM, KeyM" let:createShortcut let:shortcutLabel>
-        <DropdownItem on:click={() => wrap('\\(', '\\)')}>
-            {tr.editingMathjaxInline}
-        </DropdownItem>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyM, KeyE" let:createShortcut let:shortcutLabel>
-        <DropdownItem on:click={() => wrap('\\[', '\\]')}>
-            {tr.editingMathjaxBlock}
-        </DropdownItem>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyM, KeyC" let:createShortcut let:shortcutLabel>
-        <DropdownItem on:click={() => wrap('\\(\\ce{', '}\\)')}>
-            {tr.editingMathjaxChemistry}
-        </DropdownItem>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyT, KeyT" let:createShortcut let:shortcutLabel>
-        <DropdownItem on:click={() => wrap('[latex]', '[/latex]')}>
-            {tr.editingLatex}
-        </DropdownItem>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyT, KeyE" let:createShortcut let:shortcutLabel>
-        <DropdownItem on:click={() => wrap('[$]', '[/$]')}>
-            {tr.editingLatexEquation}
-        </DropdownItem>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyT, KeyM" let:createShortcut let:shortcutLabel>
-        <DropdownItem on:click={() => wrap('[$$]', '[/$$]')}>
-            {tr.editingLatexMathEnv}
-        </DropdownItem>
-    </WithShortcut>
-</DropdownMenu>
diff --git a/ts/editor/helpers.ts b/ts/editor/helpers.ts
index cffcb1480..6d752e752 100644
--- a/ts/editor/helpers.ts
+++ b/ts/editor/helpers.ts
@@ -110,3 +110,7 @@ const isBlockElement = (
 export const getListItem = getAnchorParent(isListItem);
 export const getParagraph = getAnchorParent(isParagraph);
 export const getBlockElement = getAnchorParent(isBlockElement);
+
+export function appendInParentheses(text: string, appendix: string): string {
+    return `${text} (${appendix})`;
+}

From 413ac6cf638055a4032b6802b05a8bbb3812d28e Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 30 Apr 2021 20:01:40 +0200
Subject: [PATCH 13/39] Fix issue with dropdowns

---
 ts/components/IconButton.svelte       |  2 +-
 ts/components/WithDropdownMenu.svelte | 17 ++++++++---------
 ts/editor/FormatBlockButtons.svelte   |  6 +++---
 ts/editor/TemplateButtons.svelte      |  3 ++-
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 56269538e..6c372d1c8 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type { Readable } from "svelte/store";
-    import { hasContext, getContext, onMount, createEventDispatcher } from "svelte";
+    import { getContext, onMount, createEventDispatcher } from "svelte";
     import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
 
     export let id: string;
diff --git a/ts/components/WithDropdownMenu.svelte b/ts/components/WithDropdownMenu.svelte
index 12b43cddb..42643f9f4 100644
--- a/ts/components/WithDropdownMenu.svelte
+++ b/ts/components/WithDropdownMenu.svelte
@@ -19,25 +19,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     /* Normally dropdown and trigger are associated with a
     /* common ancestor with .dropdown class */
-    function createDropdown(button: HTMLElement): void {
+    function createDropdown(event: CustomEvent): void {
+        const button: HTMLButtonElement = event.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 Dropdown(button);
-
         const menu = (button.getRootNode() as Document) /* or shadow root */
             .getElementById(menuId);
 
         if (!menu) {
             console.log(`Could not find menu "${menuId}" for dropdown menu.`);
-        }
+        } else {
+            const dropdown = new Dropdown(button);
 
-        (dropdown as any)._menu = menu;
+            /* Set custom menu without using common element with .dropdown */
+            (dropdown as any)._menu = menu;
+        }
     }
 </script>
 
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/FormatBlockButtons.svelte
index d66de7cde..6ae0c24bb 100644
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/FormatBlockButtons.svelte
@@ -76,7 +76,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </WithState>
 
     <WithDropdownMenu let:createDropdown let:menuId>
-        <IconButton on:mount={(event) => createDropdown(event.detail.button)}>
+        <IconButton on:mount={createDropdown}>
             {@html listOptionsIcon}
         </IconButton>
 
@@ -148,11 +148,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </ButtonGroup>
 
             <ButtonGroup id="indentation" {api}>
-                <IconButton on:click={outdentListItem} tooltip={tr.editingOutdent}>
+                <IconButton on:click={outdentListItem} tooltip={tr.editingOutdent()}>
                     {@html outdentIcon}
                 </IconButton>
 
-                <IconButton on:click={indentListItem} tooltip={tr.editingIndent}>
+                <IconButton on:click={indentListItem} tooltip={tr.editingIndent()}>
                     {@html indentIcon}
                 </IconButton>
             </ButtonGroup>
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index 2df8ce46f..49ee14344 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -115,7 +115,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <WithShortcut shortcut="Control+Shift+KeyX" let:createShortcut let:shortcutLabel>
         <IconButton
             tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
-            on:click={onHtmlEdit}>
+            on:click={onHtmlEdit}
+            on:mount={createShortcut}>
             {@html xmlIcon}
         </IconButton>
     </WithShortcut>

From 26f85a0f9d48b43721a3db2210a151c5c11feb9e Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 5 May 2021 01:22:51 +0200
Subject: [PATCH 14/39] Add API for adding new buttons, updating existing ones
 in ButtonGroup

---
 ts/components/ButtonGroup.svelte     | 111 ++++++++++++++++-----------
 ts/components/ButtonGroupItem.svelte |   8 +-
 ts/components/Detachable.svelte      |  11 +++
 ts/components/LabelButton.svelte     |  64 ++++++++-------
 ts/components/StickyBar.svelte       |   2 +-
 ts/components/hideable.ts            |  20 -----
 ts/components/identifiable.ts        |  92 ----------------------
 ts/components/identifier.ts          |  55 +++++++++++++
 ts/editor/EditorToolbar.svelte       |  10 ++-
 ts/editor/index.ts                   |   3 +-
 ts/editor/toolbar.ts                 |   2 +
 ts/sass/button_mixins.scss           |   2 +
 12 files changed, 187 insertions(+), 193 deletions(-)
 create mode 100644 ts/components/Detachable.svelte
 delete mode 100644 ts/components/hideable.ts
 delete mode 100644 ts/components/identifiable.ts
 create mode 100644 ts/components/identifier.ts

diff --git a/ts/components/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte
index bad832a90..421f3b107 100644
--- a/ts/components/ButtonGroup.svelte
+++ b/ts/components/ButtonGroup.svelte
@@ -3,32 +3,83 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import { setContext, getContext } from "svelte";
-    import { nightModeKey, buttonGroupKey } from "./contextKeys";
+    import type { SvelteComponentTyped } from "svelte";
+    import { setContext } from "svelte";
+    import type { Writable } from "svelte/store";
+    import { writable } from "svelte/store";
+    import { buttonGroupKey } from "./contextKeys";
+    import type { Identifier } from "./identifier";
+    import { insert, add, update } from "./identifier";
 
     export let id: string | undefined = undefined;
-    let className = "";
-
+    let className: string = "";
     export { className as class };
-    const nightMode = getContext(nightModeKey);
 
     export let api = {};
-
-    let index = 0;
+    export let buttonGroupRef: HTMLDivElement;
+    $: root = buttonGroupRef?.getRootNode() as Document;
 
     interface ButtonRegistration {
-        order: number;
+        detach: Writable<boolean>;
     }
 
+    const items: ButtonRegistration[] = [];
+
     function registerButton(): ButtonRegistration {
-        index++;
-        return { order: index };
+        const detach = writable(false);
+        const registration = { detach };
+        items.push(registration);
+
+        return registration;
     }
 
+    let dynamic: SvelteComponentTyped[] = [];
+
+    function addButton(
+        button: SvelteComponentTyped,
+        add: (added: Element, parent: Element) => number
+    ): void {
+        const callback = (
+            mutations: MutationRecord[],
+            observer: MutationObserver
+        ): void => {
+            for (const mutation of mutations) {
+                const addedNode = mutation.addedNodes[0];
+
+                if (addedNode.nodeType === Node.ELEMENT_NODE) {
+                    const index = add(addedNode as Element, buttonGroupRef);
+                }
+            }
+
+            observer.disconnect();
+        };
+
+        const observer = new MutationObserver(callback);
+        observer.observe(buttonGroupRef, { childList: true });
+
+        dynamic = [...dynamic, button];
+    }
+
+    const insertButton = (button: SvelteComponentTyped, id: Identifier = 0) =>
+        addButton(button, (added, parent) => insert(added, parent, id));
+    const appendButton = (button: SvelteComponentTyped, id: Identifier = -1) =>
+        addButton(button, (added, parent) => add(added, parent, id));
+    const showButton = (id: Identifier) =>
+        update((element) => element.removeAttribute("hidden"), buttonGroupRef, id);
+    const hideButton = (id: Identifier) =>
+        update((element) => element.setAttribute("hidden", ""), buttonGroupRef, id);
+    const toggleButton = (id: Identifier) =>
+        update((element) => element.toggleAttribute("hidden"), buttonGroupRef, id);
+
     setContext(
         buttonGroupKey,
         Object.assign(api, {
             registerButton,
+            insertButton,
+            appendButton,
+            showButton,
+            hideButton,
+            toggleButton,
         })
     );
 </script>
@@ -37,48 +88,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     div {
         display: flex;
         justify-items: start;
-
         flex-wrap: var(--toolbar-wrap);
 
         padding: calc(var(--toolbar-size) / 10);
         margin: 0;
-
-        > :global(button),
-        > :global(select) {
-            border-radius: calc(var(--toolbar-size) / 7.5);
-
-            &:not(:nth-of-type(1)) {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-
-            &:not(:nth-last-of-type(1)) {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-        }
-
-        &.border-overlap-group {
-            :global(button),
-            :global(select) {
-                margin-left: -1px;
-            }
-        }
-
-        &.gap-group {
-            :global(button),
-            :global(select) {
-                margin-left: 1px;
-            }
-        }
     }
 </style>
 
-<div
-    {id}
-    class={className}
-    class:border-overlap-group={!nightMode}
-    class:gap-group={nightMode}
-    div="ltr">
+<div bind:this={buttonGroupRef} {id} class={className} dir="ltr">
     <slot />
+    {#each dynamic as component}
+        <svelte:component this={component} />
+    {/each}
 </div>
diff --git a/ts/components/ButtonGroupItem.svelte b/ts/components/ButtonGroupItem.svelte
index 1bb1e8f4a..7e886737d 100644
--- a/ts/components/ButtonGroupItem.svelte
+++ b/ts/components/ButtonGroupItem.svelte
@@ -3,11 +3,15 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import Detachable from "components/Detachable.svelte";
+
     import { getContext } from "svelte";
     import { buttonGroupKey } from "./contextKeys";
 
     const { registerButton } = getContext(buttonGroupKey);
-    const { order } = registerButton();
+    const { detach } = registerButton();
 </script>
 
-<slot {order} />
+<Detachable detach={$detach}>
+    <slot />
+</Detachable>
diff --git a/ts/components/Detachable.svelte b/ts/components/Detachable.svelte
new file mode 100644
index 000000000..d58037b37
--- /dev/null
+++ b/ts/components/Detachable.svelte
@@ -0,0 +1,11 @@
+<!--
+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 detach = false;
+</script>
+
+{#if !detach}
+    <slot />
+{/if}
diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte
index a999d4b61..a7cd701cf 100644
--- a/ts/components/LabelButton.svelte
+++ b/ts/components/LabelButton.svelte
@@ -4,35 +4,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type { Readable } from "svelte/store";
-    import ButtonGroupItem from "./ButtonGroupItem.svelte";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
 
-    export let id: string | undefined;
-    export let className = "";
+    export let id: string | undefined = undefined;
+    let className: string = "";
+    export { className as class };
 
     export let tooltip: string | undefined;
-    export let disables = true;
     export let dropdownToggle = false;
+    export let disables = true;
+    export let tabbable = false;
 
-    $: extraProps = dropdownToggle
+    $: dropdownProps = dropdownToggle
         ? {
               "data-bs-toggle": "dropdown",
               "aria-expanded": "false",
           }
         : {};
 
-    let buttonRef: HTMLButtonElement;
-
-    function extendClassName(className: string): string {
-        return `btn ${className}`;
-    }
-
     const disabled = getContext<Readable<boolean>>(disabledKey);
     $: _disabled = disables && $disabled;
 
     const nightMode = getContext<boolean>(nightModeKey);
 
+    let buttonRef: HTMLButtonElement;
+
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
 </script>
@@ -45,27 +42,36 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         font-size: calc(var(--toolbar-size) / 2.3);
         width: auto;
         height: var(--toolbar-size);
+
+        border-radius: calc(var(--toolbar-size) / 7.5);
+
+        &:not(:nth-of-type(1)) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        &:not(:nth-last-of-type(1)) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
     }
 
     @include button.btn-day;
     @include button.btn-night;
 </style>
 
-<ButtonGroupItem let:order>
-    <button
-        bind:this={buttonRef}
-        {id}
-        class={extendClassName(className)}
-        class:dropdown-toggle={dropdownToggle}
-        class:btn-day={!nightMode}
-        class:btn-night={nightMode}
-        style={`order: ${order};`}
-        tabindex="-1"
-        disabled={_disabled}
-        title={tooltip}
-        {...extraProps}
-        on:click
-        on:mousedown|preventDefault>
-        <slot />
-    </button>
-</ButtonGroupItem>
+<button
+    bind:this={buttonRef}
+    {id}
+    class={`btn ${className}`}
+    class:dropdown-toggle={dropdownToggle}
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
+    title={tooltip}
+    {...dropdownProps}
+    disabled={_disabled}
+    tabindex={tabbable ? 0 : -1}
+    on:click
+    on:mousedown|preventDefault>
+    <slot />
+</button>
diff --git a/ts/components/StickyBar.svelte b/ts/components/StickyBar.svelte
index e3a9679c8..5f85b8802 100644
--- a/ts/components/StickyBar.svelte
+++ b/ts/components/StickyBar.svelte
@@ -3,7 +3,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 id: string | undefined;
+    export let id: string | undefined = undefined;
     let className: string | undefined;
     export { className as class };
 </script>
diff --git a/ts/components/hideable.ts b/ts/components/hideable.ts
deleted file mode 100644
index 4df9af725..000000000
--- a/ts/components/hideable.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-interface Hideable {
-    hidden?: boolean;
-}
-
-export function showComponent<T extends Hideable>(component: T): T {
-    component.hidden = false;
-    return component;
-}
-
-export function hideComponent<T extends Hideable>(component: T): T {
-    component.hidden = true;
-    return component;
-}
-
-export function toggleComponent<T extends Hideable>(component: T): T {
-    component.hidden = !component.hidden;
-    return component;
-}
diff --git a/ts/components/identifiable.ts b/ts/components/identifiable.ts
deleted file mode 100644
index f44015d19..000000000
--- a/ts/components/identifiable.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-// 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;
-}
-
-interface IterableIdentifiable<T extends Identifiable> extends Identifiable {
-    items: T[];
-}
-
-export type Identifier = string | number;
-
-function normalize<T extends Identifiable>(
-    iterable: IterableIdentifiable<T>,
-    idOrIndex: Identifier
-): number {
-    let normalizedIndex: number;
-
-    if (typeof idOrIndex === "string") {
-        normalizedIndex = iterable.items.findIndex((value) => value.id === idOrIndex);
-    } else if (idOrIndex < 0) {
-        normalizedIndex = iterable.items.length + idOrIndex;
-    } else {
-        normalizedIndex = idOrIndex;
-    }
-
-    return normalizedIndex >= iterable.items.length ? -1 : normalizedIndex;
-}
-
-function search<T extends Identifiable>(values: T[], index: number): T | null {
-    return index >= 0 ? values[index] : null;
-}
-
-export function insert<T extends Identifiable>(
-    iterable: IterableIdentifiable<T> & T,
-    value: T,
-    idOrIndex: Identifier
-): IterableIdentifiable<T> & T {
-    const index = normalize(iterable, idOrIndex);
-
-    if (index >= 0) {
-        iterable.items = iterable.items.slice();
-        iterable.items.splice(index, 0, value);
-    }
-
-    return iterable;
-}
-
-export function add<T extends Identifiable>(
-    iterable: IterableIdentifiable<T> & T,
-    value: T,
-    idOrIndex: Identifier
-): IterableIdentifiable<T> & T {
-    const index = normalize(iterable, idOrIndex);
-
-    if (index >= 0) {
-        iterable.items = iterable.items.slice();
-        iterable.items.splice(index + 1, 0, value);
-    }
-
-    return iterable;
-}
-
-function isRecursive<T>(component: Identifiable): component is IterableIdentifiable<T> {
-    return Boolean(Object.prototype.hasOwnProperty.call(component, "items"));
-}
-
-export function updateRecursive<T extends Identifiable>(
-    update: (component: T) => T,
-    component: T,
-    ...identifiers: Identifier[]
-): T {
-    if (identifiers.length === 0) {
-        return update(component);
-    } else if (isRecursive<T>(component)) {
-        const [identifier, ...restIdentifiers] = identifiers;
-        const normalizedIndex = normalize(component, identifier);
-        const foundComponent = search(component.items, normalizedIndex);
-
-        if (foundComponent) {
-            component.items[normalizedIndex] = updateRecursive(
-                update,
-                foundComponent as T,
-                ...restIdentifiers
-            );
-        }
-
-        return component;
-    }
-
-    return component;
-}
diff --git a/ts/components/identifier.ts b/ts/components/identifier.ts
new file mode 100644
index 000000000..7d29362c6
--- /dev/null
+++ b/ts/components/identifier.ts
@@ -0,0 +1,55 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+export type Identifier = string | number;
+
+function find(collection: HTMLCollection, idOrIndex: Identifier): Element | null {
+    let element: Element | null = null;
+
+    if (typeof idOrIndex === "string") {
+        element = collection.namedItem(idOrIndex);
+    } else if (idOrIndex < 0) {
+        const normalizedIndex = collection.length + idOrIndex;
+        element = collection.item(normalizedIndex);
+    } else {
+        element = collection.item(idOrIndex);
+    }
+
+    return element;
+}
+
+export function insert(
+    element: Element,
+    collection: Element,
+    idOrIndex: Identifier
+): void {
+    const reference = find(collection.children, idOrIndex);
+
+    if (reference) {
+        collection.insertBefore(element, reference);
+    }
+}
+
+export function add(
+    element: Element,
+    collection: Element,
+    idOrIndex: Identifier
+): void {
+    const before = find(collection.children, idOrIndex);
+
+    if (before) {
+        const reference = before.nextElementSibling ?? null;
+        collection.insertBefore(element, reference);
+    }
+}
+
+export function update(
+    f: (element: Element) => void,
+    collection: Element,
+    idOrIndex: Identifier
+): void {
+    const element = find(collection.children, idOrIndex);
+
+    if (element) {
+        f(element);
+    }
+}
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 217475d15..09bbccdc5 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -25,6 +25,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export function clearActiveButtons() {
         resetAllState(false);
     }
+
+    /* Export components */
+    import LabelButton from "components/LabelButton.svelte";
+    import IconButton from "components/IconButton.svelte";
+
+    export const editorToolbar = { LabelButton, IconButton };
 </script>
 
 <script lang="typescript">
@@ -40,6 +46,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ColorButtons from "./ColorButtons.svelte";
     import TemplateButtons from "./TemplateButtons.svelte";
 
+    export const notetypeButtons = {};
+
     export let nightMode: boolean;
 
     setContext(nightModeKey, nightMode);
@@ -55,7 +63,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <WithTheming {style}>
     <StickyBar>
-        <NoteTypeButtons />
+        <NoteTypeButtons api={notetypeButtons} />
         <FormatInlineButtons />
         <FormatBlockButtons />
         <ColorButtons />
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index c59f3d01e..b6ec76c5b 100644
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@@ -19,8 +19,7 @@ import { initToolbar } from "./toolbar";
 export { setNoteId, getNoteId } from "./noteId";
 export { saveNow } from "./changeTimer";
 export { wrap, wrapIntoText } from "./wrap";
-
-// export * from "./addons";
+export { editorToolbar } from "./toolbar";
 
 declare global {
     interface Selection {
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index 150a08c9f..e296db0bf 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -34,6 +34,8 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
 
 /* Exports for editor */
 export {
+    // @ts-expect-error insufficient typing of svelte modules
+    editorToolbar,
     // @ts-expect-error insufficient typing of svelte modules
     enableButtons,
     // @ts-expect-error insufficient typing of svelte modules
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index 9c82d4067..0096bdca0 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -7,6 +7,7 @@ $btn-base-color-day: white;
     color: var(--text-fg);
     background-color: $btn-base-color-day;
     border-color: var(--medium-border) !important;
+    margin-left: -1px;
 }
 
 @mixin btn-day($with-disabled: true) {
@@ -42,6 +43,7 @@ $btn-base-color-night: #666;
     color: var(--text-fg);
     background-color: $btn-base-color-night;
     border-color: $btn-base-color-night;
+    margin-left: 1px;
 }
 
 @mixin btn-night($with-disabled: true) {

From e1cc22b9ee887af4bec717cf8f2c7e5a9c8e9f4f Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 5 May 2021 15:12:02 +0200
Subject: [PATCH 15/39] Add hiding functionality in ButtonGroup

---
 ts/components/ButtonGroup.svelte     | 51 ++++++++++++++++-----
 ts/components/ButtonGroupItem.svelte |  4 +-
 ts/components/identifier.ts          | 68 ++++++++++++++++++++--------
 ts/editor/FormatInlineButtons.svelte |  2 +-
 ts/editor/NoteTypeButtons.svelte     | 33 ++++++++------
 5 files changed, 113 insertions(+), 45 deletions(-)

diff --git a/ts/components/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte
index 421f3b107..0d5388687 100644
--- a/ts/components/ButtonGroup.svelte
+++ b/ts/components/ButtonGroup.svelte
@@ -3,21 +3,21 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import ButtonGroupItem from "./ButtonGroupItem.svelte";
     import type { SvelteComponentTyped } from "svelte";
     import { setContext } from "svelte";
     import type { Writable } from "svelte/store";
     import { writable } from "svelte/store";
     import { buttonGroupKey } from "./contextKeys";
     import type { Identifier } from "./identifier";
-    import { insert, add, update } from "./identifier";
+    import { insert, add, update, find } from "./identifier";
 
     export let id: string | undefined = undefined;
     let className: string = "";
     export { className as class };
 
     export let api = {};
-    export let buttonGroupRef: HTMLDivElement;
-    $: root = buttonGroupRef?.getRootNode() as Document;
+    let buttonGroupRef: HTMLDivElement;
 
     interface ButtonRegistration {
         detach: Writable<boolean>;
@@ -25,20 +25,28 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const items: ButtonRegistration[] = [];
 
-    function registerButton(): ButtonRegistration {
+    function makeRegistration(): ButtonRegistration {
         const detach = writable(false);
-        const registration = { detach };
-        items.push(registration);
+        return { detach };
+    }
 
+    function registerButton(
+        index = items.length,
+        registration = makeRegistration()
+    ): ButtonRegistration {
+        items.splice(index, 0, registration);
         return registration;
     }
 
+    const dynamicItems: ButtonRegistration[] = [];
     let dynamic: SvelteComponentTyped[] = [];
 
     function addButton(
         button: SvelteComponentTyped,
         add: (added: Element, parent: Element) => number
     ): void {
+        const registration = makeRegistration();
+
         const callback = (
             mutations: MutationRecord[],
             observer: MutationObserver
@@ -48,6 +56,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
                 if (addedNode.nodeType === Node.ELEMENT_NODE) {
                     const index = add(addedNode as Element, buttonGroupRef);
+
+                    if (index >= 0) {
+                        registerButton(index, registration);
+                    }
                 }
             }
 
@@ -57,6 +69,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         const observer = new MutationObserver(callback);
         observer.observe(buttonGroupRef, { childList: true });
 
+        dynamicItems.push(registration);
         dynamic = [...dynamic, button];
     }
 
@@ -64,12 +77,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         addButton(button, (added, parent) => insert(added, parent, id));
     const appendButton = (button: SvelteComponentTyped, id: Identifier = -1) =>
         addButton(button, (added, parent) => add(added, parent, id));
+
+    function updateRegistration(
+        f: (registration: ButtonRegistration) => void,
+        id: Identifier
+    ): void {
+        const match = find(buttonGroupRef.children, id);
+
+        if (match) {
+            const [index] = match;
+            const registration = items[index];
+            f(registration);
+        }
+    }
+
     const showButton = (id: Identifier) =>
-        update((element) => element.removeAttribute("hidden"), buttonGroupRef, id);
+        updateRegistration(({ detach }) => detach.update(() => false), id);
     const hideButton = (id: Identifier) =>
-        update((element) => element.setAttribute("hidden", ""), buttonGroupRef, id);
+        updateRegistration(({ detach }) => detach.update(() => true), id);
     const toggleButton = (id: Identifier) =>
-        update((element) => element.toggleAttribute("hidden"), buttonGroupRef, id);
+        updateRegistration(({ detach }) => detach.update((old) => !old), id);
 
     setContext(
         buttonGroupKey,
@@ -97,7 +124,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div bind:this={buttonGroupRef} {id} class={className} dir="ltr">
     <slot />
-    {#each dynamic as component}
-        <svelte:component this={component} />
+    {#each dynamic as component, i}
+        <ButtonGroupItem registration={dynamicItems[i]}>
+            <svelte:component this={component} />
+        </ButtonGroupItem>
     {/each}
 </div>
diff --git a/ts/components/ButtonGroupItem.svelte b/ts/components/ButtonGroupItem.svelte
index 7e886737d..8514aa112 100644
--- a/ts/components/ButtonGroupItem.svelte
+++ b/ts/components/ButtonGroupItem.svelte
@@ -8,8 +8,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { getContext } from "svelte";
     import { buttonGroupKey } from "./contextKeys";
 
+    export let registration = undefined;
+
     const { registerButton } = getContext(buttonGroupKey);
-    const { detach } = registerButton();
+    const { detach } = registration ?? registerButton();
 </script>
 
 <Detachable detach={$detach}>
diff --git a/ts/components/identifier.ts b/ts/components/identifier.ts
index 7d29362c6..deee14436 100644
--- a/ts/components/identifier.ts
+++ b/ts/components/identifier.ts
@@ -2,54 +2,86 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 export type Identifier = string | number;
 
-function find(collection: HTMLCollection, idOrIndex: Identifier): Element | null {
-    let element: Element | null = null;
+export function find(
+    collection: HTMLCollection,
+    idOrIndex: Identifier
+): [number, Element] | null {
+    let result: [number, Element] | null = null;
 
     if (typeof idOrIndex === "string") {
-        element = collection.namedItem(idOrIndex);
+        const element = collection.namedItem(idOrIndex);
+
+        if (element) {
+            const index = Array.prototype.indexOf.call(collection, element);
+            result = [index, element];
+        }
     } else if (idOrIndex < 0) {
-        const normalizedIndex = collection.length + idOrIndex;
-        element = collection.item(normalizedIndex);
+        const index = collection.length + idOrIndex;
+        const element = collection.item(index);
+
+        if (element) {
+            result = [index, element];
+        }
     } else {
-        element = collection.item(idOrIndex);
+        const index = idOrIndex;
+        const element = collection.item(index);
+
+        if (element) {
+            result = [index, element];
+        }
     }
 
-    return element;
+    return result;
 }
 
 export function insert(
     element: Element,
     collection: Element,
     idOrIndex: Identifier
-): void {
-    const reference = find(collection.children, idOrIndex);
+): number {
+    const match = find(collection.children, idOrIndex);
 
-    if (reference) {
-        collection.insertBefore(element, reference);
+    if (match) {
+        const [index, reference] = match;
+        collection.insertBefore(element, reference[0]);
+
+        return index;
     }
+
+    return -1;
 }
 
 export function add(
     element: Element,
     collection: Element,
     idOrIndex: Identifier
-): void {
-    const before = find(collection.children, idOrIndex);
+): number {
+    const match = find(collection.children, idOrIndex);
 
-    if (before) {
+    if (match) {
+        const [index, before] = match;
         const reference = before.nextElementSibling ?? null;
         collection.insertBefore(element, reference);
+
+        return index + 1;
     }
+
+    return -1;
 }
 
 export function update(
     f: (element: Element) => void,
     collection: Element,
     idOrIndex: Identifier
-): void {
-    const element = find(collection.children, idOrIndex);
+): number {
+    const match = find(collection.children, idOrIndex);
 
-    if (element) {
-        f(element);
+    if (match) {
+        const [index, element] = match;
+        f(element[0]);
+
+        return index;
     }
+
+    return -1;
 }
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/FormatInlineButtons.svelte
index e800c58b2..ce41cd072 100644
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/FormatInlineButtons.svelte
@@ -5,8 +5,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import * as tr from "lib/i18n";
 
-    import IconButton from "components/IconButton.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
+    import IconButton from "components/IconButton.svelte";
     import WithState from "components/WithState.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
 
diff --git a/ts/editor/NoteTypeButtons.svelte b/ts/editor/NoteTypeButtons.svelte
index 5efb7dd8d..5493fcc05 100644
--- a/ts/editor/NoteTypeButtons.svelte
+++ b/ts/editor/NoteTypeButtons.svelte
@@ -7,27 +7,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import LabelButton from "components/LabelButton.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
 
     export let api = {};
 </script>
 
-<ButtonGroup id="notetype" class="" {api}>
-    <LabelButton
-        disables={false}
-        tooltip={tr.editingCustomizeFields()}
-        on:click={() => bridgeCommand('fields')}>
-        {tr.editingFields()}...
-    </LabelButton>
-
-    <WithShortcut shortcut="Control+KeyL" let:createShortcut let:shortcutLabel>
+<ButtonGroup id="notetype" {api}>
+    <ButtonGroupItem>
         <LabelButton
             disables={false}
-            tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
-            on:click={() => bridgeCommand('cards')}
-            on:mount={createShortcut}>
-            {tr.editingCards()}...
+            tooltip={tr.editingCustomizeFields()}
+            on:click={() => bridgeCommand('fields')}>
+            {tr.editingFields()}...
         </LabelButton>
-    </WithShortcut>
+    </ButtonGroupItem>
+
+    <ButtonGroupItem>
+        <WithShortcut shortcut="Control+KeyL" let:createShortcut let:shortcutLabel>
+            <LabelButton
+                disables={false}
+                tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
+                on:click={() => bridgeCommand('cards')}
+                on:mount={createShortcut}>
+                {tr.editingCards()}...
+            </LabelButton>
+        </WithShortcut>
+    </ButtonGroupItem>
 </ButtonGroup>

From bcb1b5d2144394f5dacb6db0de1ff5cf75eb26a0 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 01:22:55 +0200
Subject: [PATCH 16/39] Set ButtonPosition via ButtonGroupItem

---
 ts/components/ButtonGroup.svelte     | 29 +++++++++++----
 ts/components/ButtonGroupItem.svelte | 55 ++++++++++++++++++++++++----
 ts/components/LabelButton.svelte     | 14 ++-----
 ts/components/buttons.ts             | 15 ++++++++
 4 files changed, 88 insertions(+), 25 deletions(-)
 create mode 100644 ts/components/buttons.ts

diff --git a/ts/components/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte
index 0d5388687..0b0e96735 100644
--- a/ts/components/ButtonGroup.svelte
+++ b/ts/components/ButtonGroup.svelte
@@ -6,11 +6,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ButtonGroupItem from "./ButtonGroupItem.svelte";
     import type { SvelteComponentTyped } from "svelte";
     import { setContext } from "svelte";
-    import type { Writable } from "svelte/store";
     import { writable } from "svelte/store";
     import { buttonGroupKey } from "./contextKeys";
     import type { Identifier } from "./identifier";
     import { insert, add, update, find } from "./identifier";
+    import type { ButtonRegistration } from "./buttons";
+    import { ButtonPosition } from "./buttons";
 
     export let id: string | undefined = undefined;
     let className: string = "";
@@ -19,15 +20,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let api = {};
     let buttonGroupRef: HTMLDivElement;
 
-    interface ButtonRegistration {
-        detach: Writable<boolean>;
-    }
+    let items: ButtonRegistration[] = [];
 
-    const items: ButtonRegistration[] = [];
+    $: {
+        for (const [index, item] of items.entries()) {
+            if (items.length === 1) {
+                item.position.set(ButtonPosition.Standalone);
+            } else if (index === 0) {
+                item.position.set(ButtonPosition.Leftmost);
+            } else if (index === items.length - 1) {
+                item.position.set(ButtonPosition.Rightmost);
+            } else {
+                item.position.set(ButtonPosition.Center);
+            }
+        }
+    }
 
     function makeRegistration(): ButtonRegistration {
         const detach = writable(false);
-        return { detach };
+        const position = writable(ButtonPosition.Standalone);
+        return { detach, position };
     }
 
     function registerButton(
@@ -35,6 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         registration = makeRegistration()
     ): ButtonRegistration {
         items.splice(index, 0, registration);
+        items = items;
         return registration;
     }
 
@@ -92,9 +105,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     const showButton = (id: Identifier) =>
-        updateRegistration(({ detach }) => detach.update(() => false), id);
+        updateRegistration(({ detach }) => detach.set(false), id);
     const hideButton = (id: Identifier) =>
-        updateRegistration(({ detach }) => detach.update(() => true), id);
+        updateRegistration(({ detach }) => detach.set(true), id);
     const toggleButton = (id: Identifier) =>
         updateRegistration(({ detach }) => detach.update((old) => !old), id);
 
diff --git a/ts/components/ButtonGroupItem.svelte b/ts/components/ButtonGroupItem.svelte
index 8514aa112..70baad1b7 100644
--- a/ts/components/ButtonGroupItem.svelte
+++ b/ts/components/ButtonGroupItem.svelte
@@ -3,17 +3,58 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import WithTheming from "components/WithTheming.svelte";
     import Detachable from "components/Detachable.svelte";
 
-    import { getContext } from "svelte";
+    import type { ButtonRegistration } from "./buttons";
+    import { ButtonPosition } from "./buttons";
+
+    import { getContext, hasContext } from "svelte";
     import { buttonGroupKey } from "./contextKeys";
 
-    export let registration = undefined;
+    export let registration: ButtonRegistration | undefined = undefined;
 
-    const { registerButton } = getContext(buttonGroupKey);
-    const { detach } = registration ?? registerButton();
+    let detach_: boolean;
+    let position_: ButtonPosition;
+    let style: string;
+
+    const radius = "calc(var(--toolbar-size) / 7.5)";
+
+    $: {
+        switch (position_) {
+            case ButtonPosition.Standalone:
+                style = `--border-left-radius: ${radius}; --border-right-radius: ${radius}; `;
+                break;
+            case ButtonPosition.Leftmost:
+                style = `--border-left-radius: ${radius}; --border-right-radius: 0; `;
+                break;
+            case ButtonPosition.Center:
+                style = "--border-left-radius: 0; --border-right-radius: 0; ";
+                break;
+            case ButtonPosition.Rightmost:
+                style = `--border-left-radius: 0; --border-right-radius: ${radius}; `;
+                break;
+        }
+    }
+
+    if (registration) {
+        const { detach, position } = registration;
+        detach.subscribe((value: boolean) => (detach_ = value));
+        position.subscribe((value: ButtonPosition) => (position_ = value));
+    } else if (hasContext(buttonGroupKey)) {
+        const { registerButton } = getContext(buttonGroupKey);
+        const { detach, position } = registerButton();
+        detach.subscribe((value: boolean) => (detach_ = value));
+        position.subscribe((value: ButtonPosition) => (position_ = value));
+    } else {
+        detach_ = false;
+        position_ = ButtonPosition.Standalone;
+    }
 </script>
 
-<Detachable detach={$detach}>
-    <slot />
-</Detachable>
+<!-- div in WithTheming is necessary to preserve item position -->
+<WithTheming {style}>
+    <Detachable detach={detach_}>
+        <slot />
+    </Detachable>
+</WithTheming>
diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte
index a7cd701cf..59c3cdfc7 100644
--- a/ts/components/LabelButton.svelte
+++ b/ts/components/LabelButton.svelte
@@ -43,17 +43,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         width: auto;
         height: var(--toolbar-size);
 
-        border-radius: calc(var(--toolbar-size) / 7.5);
+        border-top-left-radius: var(--border-left-radius);
+        border-bottom-left-radius: var(--border-left-radius);
 
-        &:not(:nth-of-type(1)) {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-
-        &:not(:nth-last-of-type(1)) {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
+        border-top-right-radius: var(--border-right-radius);
+        border-bottom-right-radius: var(--border-right-radius);
     }
 
     @include button.btn-day;
diff --git a/ts/components/buttons.ts b/ts/components/buttons.ts
new file mode 100644
index 000000000..dd78918b0
--- /dev/null
+++ b/ts/components/buttons.ts
@@ -0,0 +1,15 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+import type { Writable } from "svelte/store";
+
+export enum ButtonPosition {
+    Standalone,
+    Leftmost,
+    Center,
+    Rightmost,
+}
+
+export interface ButtonRegistration {
+    detach: Writable<boolean>;
+    position: Writable<ButtonPosition>;
+}

From 0371405c236d86cbb81a185726dfed98ef921564 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 01:58:14 +0200
Subject: [PATCH 17/39] Use ButtonGroupItem for all buttons in editor

---
 ts/components/ColorPicker.svelte      |  24 +--
 ts/components/IconButton.svelte       |  21 ++-
 ts/components/LabelButton.svelte      |  13 +-
 ts/components/WithDropdownMenu.svelte |   7 +-
 ts/editor/ColorButtons.svelte         |  37 +++--
 ts/editor/FormatBlockButtons.svelte   | 221 ++++++++++++++------------
 ts/editor/FormatInlineButtons.svelte  | 216 +++++++++++++------------
 ts/editor/TemplateButtons.svelte      |  69 ++++----
 8 files changed, 334 insertions(+), 274 deletions(-)

diff --git a/ts/components/ColorPicker.svelte b/ts/components/ColorPicker.svelte
index 4430452c9..b2e8288fd 100644
--- a/ts/components/ColorPicker.svelte
+++ b/ts/components/ColorPicker.svelte
@@ -6,21 +6,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
 
-    export let id: string;
-    export let className = "";
-    export let tooltip: string | undefined;
+    export let id: string | undefined = undefined;
+    let className = "";
+    export { className as class };
+
+    export let tooltip: string | undefined = undefined;
 
     const nightMode = getContext(nightModeKey);
 
-    let buttonRef: HTMLButtonElement;
-    let inputRef: HTMLInputElement;
-
     function delegateToInput() {
         inputRef.click();
     }
 
+    let buttonRef: HTMLButtonElement;
+    let inputRef: HTMLInputElement;
+
     const dispatch = createEventDispatcher();
-    onMount(() => dispatch("mount", { button: buttonRef }));
+    onMount(() => dispatch("mount", { button: buttonRef, input: inputRef }));
 </script>
 
 <style lang="scss">
@@ -30,13 +32,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @import "ts/sass/bootstrap/variables";
 
     button {
-        padding: 0;
-
         width: calc(var(--toolbar-size) - 0px);
         height: calc(var(--toolbar-size) - 0px);
 
         padding: 4px;
         overflow: hidden;
+
+        border-top-left-radius: var(--border-left-radius);
+        border-bottom-left-radius: var(--border-left-radius);
+
+        border-top-right-radius: var(--border-right-radius);
+        border-bottom-right-radius: var(--border-right-radius);
     }
 
     @include button.btn-day($with-disabled: false) using ($base) {
diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 6c372d1c8..87ad7a61e 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -7,13 +7,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { getContext, onMount, createEventDispatcher } from "svelte";
     import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
 
-    export let id: string;
+    export let id: string | undefined = undefined;
     let className = "";
     export { className as class };
 
-    export let tooltip: string | undefined;
+    export let tooltip: string | undefined = undefined;
     export let active = false;
     export let disables = true;
+    export let tabbable = false;
 
     let buttonRef: HTMLButtonElement;
 
@@ -21,9 +22,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: _disabled = disables && $disabled;
 
     const nightMode = getContext<boolean>(nightModeKey);
-
-    const dropdown = getContext(dropdownKey);
-    const dropdownProps = dropdown?.getDropdownTriggerProps() ?? {};
+    const dropdownProps = getContext(dropdownKey) ?? { dropdown: false };
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
@@ -34,6 +33,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     button {
         padding: 0;
+
+        border-top-left-radius: var(--border-left-radius);
+        border-bottom-left-radius: var(--border-left-radius);
+
+        border-top-right-radius: var(--border-right-radius);
+        border-bottom-right-radius: var(--border-right-radius);
     }
 
     @include button.btn-day;
@@ -66,13 +71,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {id}
     class={`btn ${className}`}
     class:active
+    class:dropdown-toggle={dropdownProps.dropdown}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
-    tabindex="-1"
     title={tooltip}
-    disabled={_disabled}
-    class:dropdown-toggle={Boolean(dropdown)}
     {...dropdownProps}
+    disabled={_disabled}
+    tabindex={tabbable ? 0 : -1}
     on:click
     on:mousedown|preventDefault>
     <span class="p-1"><slot /></span>
diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte
index 59c3cdfc7..60ff0a4f2 100644
--- a/ts/components/LabelButton.svelte
+++ b/ts/components/LabelButton.svelte
@@ -5,28 +5,21 @@ 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";
-    import { disabledKey, nightModeKey } from "./contextKeys";
+    import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
 
     export let id: string | undefined = undefined;
     let className: string = "";
     export { className as class };
 
     export let tooltip: string | undefined;
-    export let dropdownToggle = false;
     export let disables = true;
     export let tabbable = false;
 
-    $: dropdownProps = dropdownToggle
-        ? {
-              "data-bs-toggle": "dropdown",
-              "aria-expanded": "false",
-          }
-        : {};
-
     const disabled = getContext<Readable<boolean>>(disabledKey);
     $: _disabled = disables && $disabled;
 
     const nightMode = getContext<boolean>(nightModeKey);
+    const dropdownProps = getContext(dropdownKey) ?? {};
 
     let buttonRef: HTMLButtonElement;
 
@@ -58,7 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bind:this={buttonRef}
     {id}
     class={`btn ${className}`}
-    class:dropdown-toggle={dropdownToggle}
+    class:dropdown-toggle={dropdownProps.dropdown}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
     title={tooltip}
diff --git a/ts/components/WithDropdownMenu.svelte b/ts/components/WithDropdownMenu.svelte
index 42643f9f4..b1b11e374 100644
--- a/ts/components/WithDropdownMenu.svelte
+++ b/ts/components/WithDropdownMenu.svelte
@@ -9,10 +9,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { dropdownKey } from "./contextKeys";
 
     setContext(dropdownKey, {
-        getDropdownTriggerProps: () => ({
-            "data-bs-toggle": "dropdown",
-            "aria-expanded": "false",
-        }),
+        dropdown: true,
+        "data-bs-toggle": "dropdown",
+        "aria-expanded": "false",
     });
 
     const menuId = Math.random().toString(36).substring(2);
diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index db3c2afd0..d613191f9 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -5,9 +5,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import * as tr from "lib/i18n";
 
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import IconButton from "components/IconButton.svelte";
     import ColorPicker from "components/ColorPicker.svelte";
-    import ButtonGroup from "components/ButtonGroup.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
 
     import { squareFillIcon } from "./icons";
@@ -31,20 +32,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <ButtonGroup id="color">
-    <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
-        <IconButton
-            class="forecolor"
-            tooltip={`${tr.editingSetForegroundColor} (${shortcutLabel})`}
-            on:click={wrapWithForecolor}
-            on:mount={createShortcut}>
-            {@html squareFillIcon}
-        </IconButton>
-    </WithShortcut>
+    <ButtonGroupItem>
+        <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
+            <IconButton
+                class="forecolor"
+                tooltip={`${tr.editingSetForegroundColor} (${shortcutLabel})`}
+                on:click={wrapWithForecolor}
+                on:mount={createShortcut}>
+                {@html squareFillIcon}
+            </IconButton>
+        </WithShortcut>
+    </ButtonGroupItem>
 
-    <WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
-        <ColorPicker
-            tooltip={`${tr.editingChangeColor()} (${shortcutLabel})`}
-            on:change={setWithCurrentColor}
-            on:mount={createShortcut} />
-    </WithShortcut>
+    <ButtonGroupItem>
+        <WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
+            <ColorPicker
+                tooltip={`${tr.editingChangeColor()} (${shortcutLabel})`}
+                on:change={setWithCurrentColor}
+                on:mount={createShortcut} />
+        </WithShortcut>
+    </ButtonGroupItem>
 </ButtonGroup>
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/FormatBlockButtons.svelte
index 6ae0c24bb..39c0a9857 100644
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/FormatBlockButtons.svelte
@@ -6,8 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { EditingArea } from "./editingArea";
     import * as tr from "lib/i18n";
 
-    import IconButton from "components/IconButton.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+    import IconButton from "components/IconButton.svelte";
     import ButtonDropdown from "components/ButtonDropdown.svelte";
     import WithState from "components/WithState.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
@@ -43,118 +44,138 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <ButtonGroup id="blockFormatting" {api}>
-    <WithState
-        key="insertUnorderedList"
-        update={() => document.queryCommandState('insertUnorderedList')}
-        let:state={active}
-        let:updateState>
-        <IconButton
-            tooltip={tr.editingUnorderedList()}
-            {active}
-            on:click={(event) => {
-                document.execCommand('insertUnorderedList');
-                updateState(event);
-            }}>
-            {@html ulIcon}
-        </IconButton>
-    </WithState>
+    <ButtonGroupItem>
+        <WithState
+            key="insertUnorderedList"
+            update={() => document.queryCommandState('insertUnorderedList')}
+            let:state={active}
+            let:updateState>
+            <IconButton
+                tooltip={tr.editingUnorderedList()}
+                {active}
+                on:click={(event) => {
+                    document.execCommand('insertUnorderedList');
+                    updateState(event);
+                }}>
+                {@html ulIcon}
+            </IconButton>
+        </WithState>
+    </ButtonGroupItem>
 
-    <WithState
-        key="insertOrderedList"
-        update={() => document.queryCommandState('insertOrderedList')}
-        let:state={active}
-        let:updateState>
-        <IconButton
-            tooltip={tr.editingOrderedList()}
-            {active}
-            on:click={(event) => {
-                document.execCommand('insertOrderedList');
-                updateState(event);
-            }}>
-            {@html olIcon}
-        </IconButton>
-    </WithState>
+    <ButtonGroupItem>
+        <WithState
+            key="insertOrderedList"
+            update={() => document.queryCommandState('insertOrderedList')}
+            let:state={active}
+            let:updateState>
+            <IconButton
+                tooltip={tr.editingOrderedList()}
+                {active}
+                on:click={(event) => {
+                    document.execCommand('insertOrderedList');
+                    updateState(event);
+                }}>
+                {@html olIcon}
+            </IconButton>
+        </WithState>
+    </ButtonGroupItem>
 
     <WithDropdownMenu let:createDropdown let:menuId>
-        <IconButton on:mount={createDropdown}>
-            {@html listOptionsIcon}
-        </IconButton>
+        <ButtonGroupItem>
+            <IconButton on:mount={createDropdown}>
+                {@html listOptionsIcon}
+            </IconButton>
+        </ButtonGroupItem>
 
         <ButtonDropdown id={menuId}>
             <ButtonGroup id="justify" {api}>
-                <WithState
-                    key="justifyLeft"
-                    update={() => document.queryCommandState('justifyLeft')}
-                    let:state={active}
-                    let:updateState>
-                    <IconButton
-                        tooltip={tr.editingAlignLeft()}
-                        {active}
-                        on:click={(event) => {
-                            document.execCommand('justifyLeft');
-                            updateState(event);
-                        }}>
-                        {@html justifyLeftIcon}
-                    </IconButton>
-                </WithState>
+                <ButtonGroupItem>
+                    <WithState
+                        key="justifyLeft"
+                        update={() => document.queryCommandState('justifyLeft')}
+                        let:state={active}
+                        let:updateState>
+                        <IconButton
+                            tooltip={tr.editingAlignLeft()}
+                            {active}
+                            on:click={(event) => {
+                                document.execCommand('justifyLeft');
+                                updateState(event);
+                            }}>
+                            {@html justifyLeftIcon}
+                        </IconButton>
+                    </WithState>
+                </ButtonGroupItem>
 
-                <WithState
-                    key="justifyCenter"
-                    update={() => document.queryCommandState('justifyCenter')}
-                    let:state={active}
-                    let:updateState>
-                    <IconButton
-                        tooltip={tr.editingCenter()}
-                        {active}
-                        on:click={(event) => {
-                            document.execCommand('justifyCenter');
-                            updateState(event);
-                        }}>
-                        {@html justifyCenterIcon}
-                    </IconButton>
-                </WithState>
+                <ButtonGroupItem>
+                    <WithState
+                        key="justifyCenter"
+                        update={() => document.queryCommandState('justifyCenter')}
+                        let:state={active}
+                        let:updateState>
+                        <IconButton
+                            tooltip={tr.editingCenter()}
+                            {active}
+                            on:click={(event) => {
+                                document.execCommand('justifyCenter');
+                                updateState(event);
+                            }}>
+                            {@html justifyCenterIcon}
+                        </IconButton>
+                    </WithState>
+                </ButtonGroupItem>
 
-                <WithState
-                    key="justifyRight"
-                    update={() => document.queryCommandState('justifyRight')}
-                    let:state={active}
-                    let:updateState>
-                    <IconButton
-                        tooltip={tr.editingAlignRight()}
-                        {active}
-                        on:click={(event) => {
-                            document.execCommand('justifyRight');
-                            updateState(event);
-                        }}>
-                        {@html justifyRightIcon}
-                    </IconButton>
-                </WithState>
+                <ButtonGroupItem>
+                    <WithState
+                        key="justifyRight"
+                        update={() => document.queryCommandState('justifyRight')}
+                        let:state={active}
+                        let:updateState>
+                        <IconButton
+                            tooltip={tr.editingAlignRight()}
+                            {active}
+                            on:click={(event) => {
+                                document.execCommand('justifyRight');
+                                updateState(event);
+                            }}>
+                            {@html justifyRightIcon}
+                        </IconButton>
+                    </WithState>
+                </ButtonGroupItem>
 
-                <WithState
-                    key="justifyFull"
-                    update={() => document.queryCommandState('justifyFull')}
-                    let:state={active}
-                    let:updateState>
-                    <IconButton
-                        tooltip={tr.editingJustify()}
-                        {active}
-                        on:click={(event) => {
-                            document.execCommand('justifyFull');
-                            updateState(event);
-                        }}>
-                        {@html justifyFullIcon}
-                    </IconButton>
-                </WithState>
+                <ButtonGroupItem>
+                    <WithState
+                        key="justifyFull"
+                        update={() => document.queryCommandState('justifyFull')}
+                        let:state={active}
+                        let:updateState>
+                        <IconButton
+                            tooltip={tr.editingJustify()}
+                            {active}
+                            on:click={(event) => {
+                                document.execCommand('justifyFull');
+                                updateState(event);
+                            }}>
+                            {@html justifyFullIcon}
+                        </IconButton>
+                    </WithState>
+                </ButtonGroupItem>
             </ButtonGroup>
 
             <ButtonGroup id="indentation" {api}>
-                <IconButton on:click={outdentListItem} tooltip={tr.editingOutdent()}>
-                    {@html outdentIcon}
-                </IconButton>
+                <ButtonGroupItem>
+                    <IconButton
+                        on:click={outdentListItem}
+                        tooltip={tr.editingOutdent()}>
+                        {@html outdentIcon}
+                    </IconButton>
+                </ButtonGroupItem>
 
-                <IconButton on:click={indentListItem} tooltip={tr.editingIndent()}>
-                    {@html indentIcon}
-                </IconButton>
+                <ButtonGroupItem>
+                    <IconButton on:click={indentListItem} tooltip={tr.editingIndent()}>
+                        {@html indentIcon}
+                    </IconButton>
+                </ButtonGroupItem>
             </ButtonGroup>
         </ButtonDropdown>
     </WithDropdownMenu>
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/FormatInlineButtons.svelte
index ce41cd072..d4549d6d7 100644
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/FormatInlineButtons.svelte
@@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import IconButton from "components/IconButton.svelte";
     import WithState from "components/WithState.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
@@ -23,109 +24,124 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <ButtonGroup id="notetype" {api}>
-    <WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel>
-        <WithState
-            key="bold"
-            update={() => document.queryCommandState('bold')}
-            let:state={active}
-            let:updateState>
+    <ButtonGroupItem>
+        <WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel>
+            <WithState
+                key="bold"
+                update={() => document.queryCommandState('bold')}
+                let:state={active}
+                let:updateState>
+                <IconButton
+                    tooltip={`${tr.editingBoldText()} (${shortcutLabel})`}
+                    {active}
+                    on:click={(event) => {
+                        document.execCommand('bold');
+                        updateState(event);
+                    }}
+                    on:mount={createShortcut}>
+                    {@html boldIcon}
+                </IconButton>
+            </WithState>
+        </WithShortcut>
+    </ButtonGroupItem>
+
+    <ButtonGroupItem>
+        <WithShortcut shortcut="Control+KeyI" let:createShortcut let:shortcutLabel>
+            <WithState
+                key="italic"
+                update={() => document.queryCommandState('italic')}
+                let:state={active}
+                let:updateState>
+                <IconButton
+                    tooltip={`${tr.editingItalicText()} (${shortcutLabel})`}
+                    {active}
+                    on:click={(event) => {
+                        document.execCommand('italic');
+                        updateState(event);
+                    }}
+                    on:mount={createShortcut}>
+                    {@html italicIcon}
+                </IconButton>
+            </WithState>
+        </WithShortcut>
+    </ButtonGroupItem>
+
+    <ButtonGroupItem>
+        <WithShortcut shortcut="Control+KeyU" let:createShortcut let:shortcutLabel>
+            <WithState
+                key="underline"
+                update={() => document.queryCommandState('underline')}
+                let:state={active}
+                let:updateState>
+                <IconButton
+                    tooltip={`${tr.editingUnderlineText()} (${shortcutLabel})`}
+                    {active}
+                    on:click={(event) => {
+                        document.execCommand('underline');
+                        updateState(event);
+                    }}
+                    on:mount={createShortcut}>
+                    {@html underlineIcon}
+                </IconButton>
+            </WithState>
+        </WithShortcut>
+    </ButtonGroupItem>
+
+    <ButtonGroupItem>
+        <WithShortcut
+            shortcut="Control+Shift+Equal"
+            let:createShortcut
+            let:shortcutLabel>
+            <WithState
+                key="superscript"
+                update={() => document.queryCommandState('superscript')}
+                let:state={active}
+                let:updateState>
+                <IconButton
+                    tooltip={tr.editingSuperscript()}
+                    {active}
+                    on:click={(event) => {
+                        document.execCommand('superscript');
+                        updateState(event);
+                    }}
+                    on:mount={createShortcut}>
+                    {@html superscriptIcon}
+                </IconButton>
+            </WithState>
+        </WithShortcut>
+    </ButtonGroupItem>
+
+    <ButtonGroupItem>
+        <WithShortcut shortcut="Control+Equal" let:createShortcut let:shortcutLabel>
+            <WithState
+                key="subscript"
+                update={() => document.queryCommandState('subscript')}
+                let:state={active}
+                let:updateState>
+                <IconButton
+                    tooltip={tr.editingSubscript()}
+                    {active}
+                    on:click={(event) => {
+                        document.execCommand('subscript');
+                        updateState(event);
+                    }}
+                    on:mount={createShortcut}>
+                    {@html subscriptIcon}
+                </IconButton>
+            </WithState>
+        </WithShortcut>
+    </ButtonGroupItem>
+
+    <ButtonGroupItem>
+        <WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
             <IconButton
-                tooltip={`${tr.editingBoldText()} (${shortcutLabel})`}
-                {active}
+                tooltip={tr.editingRemoveFormatting()}
                 on:click={(event) => {
-                    document.execCommand('bold');
-                    updateState(event);
+                    document.execCommand('removeFormat');
                 }}
                 on:mount={createShortcut}>
-                {@html boldIcon}
+                {@html eraserIcon}
             </IconButton>
-        </WithState>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyI" let:createShortcut let:shortcutLabel>
-        <WithState
-            key="italic"
-            update={() => document.queryCommandState('italic')}
-            let:state={active}
-            let:updateState>
-            <IconButton
-                tooltip={`${tr.editingItalicText()} (${shortcutLabel})`}
-                {active}
-                on:click={(event) => {
-                    document.execCommand('italic');
-                    updateState(event);
-                }}
-                on:mount={createShortcut}>
-                {@html italicIcon}
-            </IconButton>
-        </WithState>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyU" let:createShortcut let:shortcutLabel>
-        <WithState
-            key="underline"
-            update={() => document.queryCommandState('underline')}
-            let:state={active}
-            let:updateState>
-            <IconButton
-                tooltip={`${tr.editingUnderlineText()} (${shortcutLabel})`}
-                {active}
-                on:click={(event) => {
-                    document.execCommand('underline');
-                    updateState(event);
-                }}
-                on:mount={createShortcut}>
-                {@html underlineIcon}
-            </IconButton>
-        </WithState>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+Shift+Equal" let:createShortcut let:shortcutLabel>
-        <WithState
-            key="superscript"
-            update={() => document.queryCommandState('superscript')}
-            let:state={active}
-            let:updateState>
-            <IconButton
-                tooltip={tr.editingSuperscript()}
-                {active}
-                on:click={(event) => {
-                    document.execCommand('superscript');
-                    updateState(event);
-                }}
-                on:mount={createShortcut}>
-                {@html superscriptIcon}
-            </IconButton>
-        </WithState>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+Equal" let:createShortcut let:shortcutLabel>
-        <WithState
-            key="subscript"
-            update={() => document.queryCommandState('subscript')}
-            let:state={active}
-            let:updateState>
-            <IconButton
-                tooltip={tr.editingSubscript()}
-                {active}
-                on:click={(event) => {
-                    document.execCommand('subscript');
-                    updateState(event);
-                }}
-                on:mount={createShortcut}>
-                {@html subscriptIcon}
-            </IconButton>
-        </WithState>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
-        <IconButton
-            tooltip={tr.editingRemoveFormatting()}
-            on:click={(event) => {
-                document.execCommand('removeFormat');
-            }}
-            on:mount={createShortcut}>
-            {@html eraserIcon}
-        </IconButton>
-    </WithShortcut>
+        </WithShortcut>
+    </ButtonGroupItem>
 </ButtonGroup>
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index 49ee14344..cc2c0e4e4 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -6,8 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import { bridgeCommand } from "lib/bridgecommand";
 
-    import IconButton from "components/IconButton.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+    import IconButton from "components/IconButton.svelte";
     import DropdownMenu from "components/DropdownMenu.svelte";
     import DropdownItem from "components/DropdownItem.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
@@ -32,28 +33,37 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <ButtonGroup id="template">
-    <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
-        <IconButton
-            tooltip={appendInParentheses(tr.editingAttachPicturesaudiovideo(), shortcutLabel)}
-            on:click={onAttachment}>
-            {@html paperclipIcon}
-        </IconButton>
-    </WithShortcut>
+    <ButtonGroupItem>
+        <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
+            <IconButton
+                tooltip={appendInParentheses(tr.editingAttachPicturesaudiovideo(), shortcutLabel)}
+                on:click={onAttachment}
+                on:mount={createShortcut}>
+                {@html paperclipIcon}
+            </IconButton>
+        </WithShortcut>
+    </ButtonGroupItem>
 
-    <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
-        <IconButton
-            tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
-            on:click={onRecord}>
-            {@html micIcon}
-        </IconButton>
-    </WithShortcut>
+    <ButtonGroupItem>
+        <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
+            <IconButton
+                tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
+                on:click={onRecord}>
+                {@html micIcon}
+            </IconButton>
+        </WithShortcut>
+    </ButtonGroupItem>
 
-    <ClozeButton />
+    <ButtonGroupItem>
+        <ClozeButton />
+    </ButtonGroupItem>
 
     <WithDropdownMenu let:menuId let:createDropdown>
-        <IconButton on:mount={createDropdown}>
-            {@html functionIcon}
-        </IconButton>
+        <ButtonGroupItem>
+            <IconButton on:mount={createDropdown}>
+                {@html functionIcon}
+            </IconButton>
+        </ButtonGroupItem>
 
         <DropdownMenu id={menuId}>
             <WithShortcut
@@ -112,12 +122,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </DropdownMenu>
     </WithDropdownMenu>
 
-    <WithShortcut shortcut="Control+Shift+KeyX" let:createShortcut let:shortcutLabel>
-        <IconButton
-            tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
-            on:click={onHtmlEdit}
-            on:mount={createShortcut}>
-            {@html xmlIcon}
-        </IconButton>
-    </WithShortcut>
+    <ButtonGroupItem>
+        <WithShortcut
+            shortcut="Control+Shift+KeyX"
+            let:createShortcut
+            let:shortcutLabel>
+            <IconButton
+                tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
+                on:click={onHtmlEdit}
+                on:mount={createShortcut}>
+                {@html xmlIcon}
+            </IconButton>
+        </WithShortcut>
+    </ButtonGroupItem>
 </ButtonGroup>

From 9c1936698c3bd5f30aada6c5346be65dce60a9aa Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 02:49:59 +0200
Subject: [PATCH 18/39] Set tooltip for buttons correctly

---
 ts/editor/ColorButtons.svelte        |  5 +++--
 ts/editor/FormatInlineButtons.svelte | 13 ++++++-----
 ts/editor/TemplateButtons.svelte     | 33 ++++++++++++++++++++++------
 ts/sass/button_mixins.scss           | 14 ++++++++----
 4 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index d613191f9..0d5a0ae4a 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -12,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import WithShortcut from "components/WithShortcut.svelte";
 
     import { squareFillIcon } from "./icons";
+    import { appendInParentheses } from "./helpers";
 
     import "./color.css";
 
@@ -36,7 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
             <IconButton
                 class="forecolor"
-                tooltip={`${tr.editingSetForegroundColor} (${shortcutLabel})`}
+                tooltip={appendInParentheses(tr.editingSetForegroundColor(), shortcutLabel)}
                 on:click={wrapWithForecolor}
                 on:mount={createShortcut}>
                 {@html squareFillIcon}
@@ -47,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <ButtonGroupItem>
         <WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
             <ColorPicker
-                tooltip={`${tr.editingChangeColor()} (${shortcutLabel})`}
+                tooltip={appendInParentheses(tr.editingChangeColor(), shortcutLabel)}
                 on:change={setWithCurrentColor}
                 on:mount={createShortcut} />
         </WithShortcut>
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/FormatInlineButtons.svelte
index d4549d6d7..3abf51675 100644
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/FormatInlineButtons.svelte
@@ -19,6 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         subscriptIcon,
         eraserIcon,
     } from "./icons";
+    import { appendInParentheses } from "./helpers";
 
     export let api = {};
 </script>
@@ -32,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 let:state={active}
                 let:updateState>
                 <IconButton
-                    tooltip={`${tr.editingBoldText()} (${shortcutLabel})`}
+                    tooltip={appendInParentheses(tr.editingBoldText(), shortcutLabel)}
                     {active}
                     on:click={(event) => {
                         document.execCommand('bold');
@@ -53,7 +54,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 let:state={active}
                 let:updateState>
                 <IconButton
-                    tooltip={`${tr.editingItalicText()} (${shortcutLabel})`}
+                    tooltip={appendInParentheses(tr.editingItalicText(), shortcutLabel)}
                     {active}
                     on:click={(event) => {
                         document.execCommand('italic');
@@ -74,7 +75,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 let:state={active}
                 let:updateState>
                 <IconButton
-                    tooltip={`${tr.editingUnderlineText()} (${shortcutLabel})`}
+                    tooltip={appendInParentheses(tr.editingUnderlineText(), shortcutLabel)}
                     {active}
                     on:click={(event) => {
                         document.execCommand('underline');
@@ -98,7 +99,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 let:state={active}
                 let:updateState>
                 <IconButton
-                    tooltip={tr.editingSuperscript()}
+                    tooltip={appendInParentheses(tr.editingSuperscript(), shortcutLabel)}
                     {active}
                     on:click={(event) => {
                         document.execCommand('superscript');
@@ -119,7 +120,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 let:state={active}
                 let:updateState>
                 <IconButton
-                    tooltip={tr.editingSubscript()}
+                    tooltip={appendInParentheses(tr.editingSubscript(), shortcutLabel)}
                     {active}
                     on:click={(event) => {
                         document.execCommand('subscript');
@@ -135,7 +136,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <ButtonGroupItem>
         <WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
             <IconButton
-                tooltip={tr.editingRemoveFormatting()}
+                tooltip={appendInParentheses(tr.editingRemoveFormatting(), shortcutLabel)}
                 on:click={(event) => {
                     document.execCommand('removeFormat');
                 }}
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index cc2c0e4e4..bd426ea81 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -48,7 +48,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
-                on:click={onRecord}>
+                on:click={onRecord}
+                on:mount={createShortcut}>
                 {@html micIcon}
             </IconButton>
         </WithShortcut>
@@ -70,8 +71,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+KeyM, KeyM"
                 let:createShortcut
                 let:shortcutLabel>
-                <DropdownItem on:click={() => wrap('\\(', '\\)')}>
+                <DropdownItem
+                    on:click={() => wrap('\\(', '\\)')}
+                    on:mount={createShortcut}>
                     {tr.editingMathjaxInline()}
+                    <span class="ps-1 float-end">{shortcutLabel}</span>
                 </DropdownItem>
             </WithShortcut>
 
@@ -79,8 +83,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+KeyM, KeyE"
                 let:createShortcut
                 let:shortcutLabel>
-                <DropdownItem on:click={() => wrap('\\[', '\\]')}>
+                <DropdownItem
+                    on:click={() => wrap('\\[', '\\]')}
+                    on:mount={createShortcut}>
                     {tr.editingMathjaxBlock()}
+                    <span class="ps-1 float-end">{shortcutLabel}</span>
                 </DropdownItem>
             </WithShortcut>
 
@@ -88,8 +95,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+KeyM, KeyC"
                 let:createShortcut
                 let:shortcutLabel>
-                <DropdownItem on:click={() => wrap('\\(\\ce{', '}\\)')}>
+                <DropdownItem
+                    on:click={() => wrap('\\(\\ce{', '}\\)')}
+                    on:mount={createShortcut}>
                     {tr.editingMathjaxChemistry()}
+                    <span class="ps-1 float-end">{shortcutLabel}</span>
                 </DropdownItem>
             </WithShortcut>
 
@@ -97,8 +107,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+KeyT, KeyT"
                 let:createShortcut
                 let:shortcutLabel>
-                <DropdownItem on:click={() => wrap('[latex]', '[/latex]')}>
+                <DropdownItem
+                    on:click={() => wrap('[latex]', '[/latex]')}
+                    on:mount={createShortcut}>
                     {tr.editingLatex()}
+                    <span class="ps-1 float-end">{shortcutLabel}</span>
                 </DropdownItem>
             </WithShortcut>
 
@@ -106,8 +119,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+KeyT, KeyE"
                 let:createShortcut
                 let:shortcutLabel>
-                <DropdownItem on:click={() => wrap('[$]', '[/$]')}>
+                <DropdownItem
+                    on:click={() => wrap('[$]', '[/$]')}
+                    on:mount={createShortcut}>
                     {tr.editingLatexEquation()}
+                    <span class="ps-1 float-end">{shortcutLabel}</span>
                 </DropdownItem>
             </WithShortcut>
 
@@ -115,8 +131,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 shortcut="Control+KeyT, KeyM"
                 let:createShortcut
                 let:shortcutLabel>
-                <DropdownItem on:click={() => wrap('[$$]', '[/$$]')}>
+                <DropdownItem
+                    on:click={() => wrap('[$$]', '[/$$]')}
+                    on:mount={createShortcut}>
                     {tr.editingLatexMathEnv()}
+                    <span class="ps-1 float-end">{shortcutLabel}</span>
                 </DropdownItem>
             </WithShortcut>
         </DropdownMenu>
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index 0096bdca0..a7ee0f45e 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -7,10 +7,9 @@ $btn-base-color-day: white;
     color: var(--text-fg);
     background-color: $btn-base-color-day;
     border-color: var(--medium-border) !important;
-    margin-left: -1px;
 }
 
-@mixin btn-day($with-disabled: true) {
+@mixin btn-day($with-disabled: true, $with-margin: true) {
     .btn-day {
         @include btn-day-base;
         @content ($btn-base-color-day);
@@ -34,6 +33,10 @@ $btn-base-color-day: white;
                 box-shadow: none !important;
             }
         }
+
+        @if ($with-margin) {
+            margin-left: -1px;
+        }
     }
 }
 
@@ -43,10 +46,9 @@ $btn-base-color-night: #666;
     color: var(--text-fg);
     background-color: $btn-base-color-night;
     border-color: $btn-base-color-night;
-    margin-left: 1px;
 }
 
-@mixin btn-night($with-disabled: true) {
+@mixin btn-night($with-disabled: true, $with-margin: true) {
     .btn-night {
         @include btn-night-base;
         @content ($btn-base-color-night);
@@ -74,6 +76,10 @@ $btn-base-color-night: #666;
                 border-color: $btn-base-color-night !important;
             }
         }
+
+        @if ($with-margin) {
+            margin-left: 1px;
+        }
     }
 }
 

From 862905c58a311a900bafabee51bc28d2dc63e9c0 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 03:37:21 +0200
Subject: [PATCH 19/39] Fix typing issues

---
 ts/components/ButtonGroup.svelte     | 2 +-
 ts/components/DropdownMenu.svelte    | 2 +-
 ts/components/IconButton.svelte      | 3 ++-
 ts/components/LabelButton.svelte     | 3 ++-
 ts/components/SelectButton.svelte    | 7 ++++++-
 ts/components/WithState.svelte       | 6 +++---
 ts/components/dropdown.ts            | 7 +++++++
 ts/editor/ClozeButton.svelte         | 3 ++-
 ts/editor/EditorToolbar.svelte       | 1 +
 ts/editor/FormatInlineButtons.svelte | 2 +-
 10 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 ts/components/dropdown.ts

diff --git a/ts/components/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte
index 0b0e96735..120618bd1 100644
--- a/ts/components/ButtonGroup.svelte
+++ b/ts/components/ButtonGroup.svelte
@@ -9,7 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { writable } from "svelte/store";
     import { buttonGroupKey } from "./contextKeys";
     import type { Identifier } from "./identifier";
-    import { insert, add, update, find } from "./identifier";
+    import { insert, add, find } from "./identifier";
     import type { ButtonRegistration } from "./buttons";
     import { ButtonPosition } from "./buttons";
 
diff --git a/ts/components/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte
index 12cc0fbee..c988ff1dc 100644
--- a/ts/components/DropdownMenu.svelte
+++ b/ts/components/DropdownMenu.svelte
@@ -18,6 +18,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<div {id} class={`dropdown-menu`}>
+<div {id} class="dropdown-menu">
     <slot />
 </div>
diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 87ad7a61e..3a5a255e6 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Readable } from "svelte/store";
     import { getContext, onMount, createEventDispatcher } from "svelte";
     import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
+    import type { DropdownProps } from "./dropdown";
 
     export let id: string | undefined = undefined;
     let className = "";
@@ -22,7 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: _disabled = disables && $disabled;
 
     const nightMode = getContext<boolean>(nightModeKey);
-    const dropdownProps = getContext(dropdownKey) ?? { dropdown: false };
+    const dropdownProps = getContext<DropdownProps>(dropdownKey) ?? { dropdown: false };
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte
index 60ff0a4f2..9af9bcf1e 100644
--- a/ts/components/LabelButton.svelte
+++ b/ts/components/LabelButton.svelte
@@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
+    import type { DropdownProps } from "./dropdown";
 
     export let id: string | undefined = undefined;
     let className: string = "";
@@ -19,7 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: _disabled = disables && $disabled;
 
     const nightMode = getContext<boolean>(nightModeKey);
-    const dropdownProps = getContext(dropdownKey) ?? {};
+    const dropdownProps = getContext<DropdownProps>(dropdownKey) ?? { dropdown: false };
 
     let buttonRef: HTMLButtonElement;
 
diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte
index 81afa44d8..c09d78370 100644
--- a/ts/components/SelectButton.svelte
+++ b/ts/components/SelectButton.svelte
@@ -4,11 +4,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type { Readable } from "svelte/store";
-    import type { Option } from "./SelectButton";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey } from "./contextKeys";
     import SelectOption from "./SelectOption.svelte";
 
+    interface Option {
+        label: string;
+        value: string;
+        selected?: false;
+    }
+
     export let id: string;
     export let className = "";
     export let tooltip: string;
diff --git a/ts/components/WithState.svelte b/ts/components/WithState.svelte
index 32e4facb3..6ae08c72c 100644
--- a/ts/components/WithState.svelte
+++ b/ts/components/WithState.svelte
@@ -29,17 +29,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     export function updateAllState(event: Event): void {
-        updateAllStateWithCallback((key: string): T => updaterMap.get(key)(event));
+        updateAllStateWithCallback((key: string): T => updaterMap.get(key)!(event));
     }
 
     export function resetAllState(state: T): void {
         updateAllStateWithCallback((): T => state);
     }
 
-    function updateStateByKey(key: string, event: MouseEvent): void {
+    function updateStateByKey(key: string, event: Event): void {
         stateStore.update(
             (map: StateMap): StateMap => {
-                map.set(key, updaterMap.get(key)(event));
+                map.set(key, updaterMap.get(key)!(event));
                 return map;
             }
         );
diff --git a/ts/components/dropdown.ts b/ts/components/dropdown.ts
new file mode 100644
index 000000000..ea98649d9
--- /dev/null
+++ b/ts/components/dropdown.ts
@@ -0,0 +1,7 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+export interface DropdownProps {
+    dropdown: boolean;
+    "data-bs-toggle"?: string;
+    "aria-expanded"?: string;
+}
diff --git a/ts/editor/ClozeButton.svelte b/ts/editor/ClozeButton.svelte
index 1e5f2d548..2db076744 100644
--- a/ts/editor/ClozeButton.svelte
+++ b/ts/editor/ClozeButton.svelte
@@ -48,7 +48,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let:shortcutLabel>
     <IconButton
         tooltip={`${tr.editingClozeDeletion()} (${shortcutLabel})`}
-        on:click={onCloze}>
+        on:click={onCloze}
+        on:mount={createShortcut}>
         {@html bracketsIcon}
     </IconButton>
 </WithShortcut>
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 09bbccdc5..237c1800c 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -16,6 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         disabled.set(true);
     }
 
+    // @ts-expect-error insufficient typing of svelte modules
     import { updateAllState, resetAllState } from "components/WithState.svelte";
 
     export function updateActiveButtons(event: Event) {
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/FormatInlineButtons.svelte
index 3abf51675..f0f523c32 100644
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/FormatInlineButtons.svelte
@@ -137,7 +137,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingRemoveFormatting(), shortcutLabel)}
-                on:click={(event) => {
+                on:click={() => {
                     document.execCommand('removeFormat');
                 }}
                 on:mount={createShortcut}>

From e80f43e8fcbfcf883efcc355d8fb40928ac9a62d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 16:10:26 +0200
Subject: [PATCH 20/39] Enable setting of PreviewButton and hiding of cloze
 button again

---
 qt/aqt/browser/browser.py                     | 14 +----------
 qt/aqt/editor.py                              | 13 ++++------
 ts/components/ButtonGroup.svelte              | 24 ++++++++++++-------
 ts/components/ButtonGroupItem.svelte          |  3 ++-
 .../{RawButton.svelte => Raw.svelte}          |  5 ----
 ts/components/WithTheming.svelte              |  3 ++-
 ts/editor/ColorButtons.svelte                 |  4 +++-
 ts/editor/EditorToolbar.svelte                | 21 ++++++++++++----
 ts/editor/PreviewButton.svelte                | 23 ++++++++++++++++++
 ts/editor/TemplateButtons.svelte              |  6 +++--
 ts/editor/index.ts                            |  4 +++-
 11 files changed, 74 insertions(+), 46 deletions(-)
 rename ts/components/{RawButton.svelte => Raw.svelte} (56%)
 create mode 100644 ts/editor/PreviewButton.svelte

diff --git a/qt/aqt/browser/browser.py b/qt/aqt/browser/browser.py
index d5fa1436d..9d67630bf 100644
--- a/qt/aqt/browser/browser.py
+++ b/qt/aqt/browser/browser.py
@@ -383,23 +383,11 @@ class Browser(QMainWindow):
 
             editor._links["preview"] = lambda _editor: self.onTogglePreview()
             editor.web.eval(
-                f"""
-$editorToolbar.then(({{ addButton }}) => addButton(editorToolbar.labelButton({{
-    label: `{tr.actions_preview()}`,
-    tooltip: `{tr.browsing_preview_selected_card(val=shortcut(preview_shortcut))}`,
-    onClick: () => bridgeCommand("preview"),
-    disables: false,
-}}), "notetype", -1));
-"""
+                f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.PreviewButton }}, -1));"
             )
 
-        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)
-        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
diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 338868cf2..62bf0b9a3 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -145,7 +145,7 @@ class Editor:
         gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
 
         lefttopbtns_defs = [
-            f"$editorToolbar.then(({{ addButton }}) => addButton(editorToolbar.rawButton({{ html: `{button}` }}), 'notetype', -1));"
+            f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.addButton({{ component: editorToolbar.Raw, props: {{ html: `{button}` }} }}, -1));"
             for button in lefttopbtns
         ]
         lefttopbtns_js = "\n".join(lefttopbtns_defs)
@@ -156,10 +156,7 @@ class Editor:
         righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
 
         righttopbtns_defs = "\n".join(
-            [
-                f"editorToolbar.rawButton({{ html: `{button}` }}),"
-                for button in righttopbtns
-            ]
+            [f"editorToolbar.Raw({{ html: `{button}` }})," for button in righttopbtns]
         )
         righttopbtns_js = (
             f"""
@@ -172,7 +169,7 @@ $editorToolbar.then(({{ addButton }}) => addButton(editorToolbar.buttonGroup({{
             else ""
         )
 
-        self.web.eval(f"{lefttopbtns_js} {righttopbtns_js}")
+        self.web.eval(f"{lefttopbtns_js}")
 
     # Top buttons
     ######################################################################
@@ -1268,11 +1265,11 @@ 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(
-            '$editorToolbar.then(({ showButton }) => showButton("template", "cloze")); '
+            '$editorToolbar.then(({ templateButtons }) => templateButtons.showButton("cloze")); '
         )
     else:
         editor.web.eval(
-            '$editorToolbar.then(({ hideButton }) => hideButton("template", "cloze")); '
+            '$editorToolbar.then(({ templateButtons }) => templateButtons.hideButton("cloze")); '
         )
 
 
diff --git a/ts/components/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte
index 120618bd1..c8ff5e9ea 100644
--- a/ts/components/ButtonGroup.svelte
+++ b/ts/components/ButtonGroup.svelte
@@ -51,11 +51,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return registration;
     }
 
+    interface SvelteComponent {
+        id: string | undefined;
+        component: SvelteComponentTyped;
+        props: Record<string, unknown>;
+    }
+
     const dynamicItems: ButtonRegistration[] = [];
-    let dynamic: SvelteComponentTyped[] = [];
+    let dynamic: SvelteComponent[] = [];
 
     function addButton(
-        button: SvelteComponentTyped,
+        button: SvelteComponent,
         add: (added: Element, parent: Element) => number
     ): void {
         const registration = makeRegistration();
@@ -86,10 +92,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         dynamic = [...dynamic, button];
     }
 
-    const insertButton = (button: SvelteComponentTyped, id: Identifier = 0) =>
-        addButton(button, (added, parent) => insert(added, parent, id));
-    const appendButton = (button: SvelteComponentTyped, id: Identifier = -1) =>
-        addButton(button, (added, parent) => add(added, parent, id));
+    const insertButton = (button: SvelteComponent, position: Identifier = 0) =>
+        addButton(button, (added, parent) => insert(added, parent, position));
+    const appendButton = (button: SvelteComponent, position: Identifier = -1) =>
+        addButton(button, (added, parent) => add(added, parent, position));
 
     function updateRegistration(
         f: (registration: ButtonRegistration) => void,
@@ -137,9 +143,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div bind:this={buttonGroupRef} {id} class={className} dir="ltr">
     <slot />
-    {#each dynamic as component, i}
-        <ButtonGroupItem registration={dynamicItems[i]}>
-            <svelte:component this={component} />
+    {#each dynamic as item, i}
+        <ButtonGroupItem id={item.id} registration={dynamicItems[i]}>
+            <svelte:component this={item.component} {...item.props} />
         </ButtonGroupItem>
     {/each}
 </div>
diff --git a/ts/components/ButtonGroupItem.svelte b/ts/components/ButtonGroupItem.svelte
index 70baad1b7..b50e4024d 100644
--- a/ts/components/ButtonGroupItem.svelte
+++ b/ts/components/ButtonGroupItem.svelte
@@ -12,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { getContext, hasContext } from "svelte";
     import { buttonGroupKey } from "./contextKeys";
 
+    export let id: string | undefined = undefined;
     export let registration: ButtonRegistration | undefined = undefined;
 
     let detach_: boolean;
@@ -53,7 +54,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <!-- div in WithTheming is necessary to preserve item position -->
-<WithTheming {style}>
+<WithTheming {id} {style}>
     <Detachable detach={detach_}>
         <slot />
     </Detachable>
diff --git a/ts/components/RawButton.svelte b/ts/components/Raw.svelte
similarity index 56%
rename from ts/components/RawButton.svelte
rename to ts/components/Raw.svelte
index cdee475ea..54908eb3e 100644
--- a/ts/components/RawButton.svelte
+++ b/ts/components/Raw.svelte
@@ -3,12 +3,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";
-
     export let html: string;
-
-    const dispatch = createEventDispatcher();
-    onMount(() => dispatch("mount", { button: null }));
 </script>
 
 {@html html}
diff --git a/ts/components/WithTheming.svelte b/ts/components/WithTheming.svelte
index 2beae19aa..1f95c2334 100644
--- a/ts/components/WithTheming.svelte
+++ b/ts/components/WithTheming.svelte
@@ -3,6 +3,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 id: string | undefined = undefined;
     export let style: string;
 </script>
 
@@ -12,6 +13,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<div {style}>
+<div {id} {style}>
     <slot />
 </div>
diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index 0d5a0ae4a..9c15bb22d 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -16,6 +16,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import "./color.css";
 
+    export let api = {};
+
     const foregroundColorKeyword = "--foreground-color";
     let color = "black";
 
@@ -32,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ButtonGroup id="color">
+<ButtonGroup id="color" {api}>
     <ButtonGroupItem>
         <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
             <IconButton
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 237c1800c..32cf4d939 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -28,10 +28,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     /* Export components */
+    import PreviewButton from "./PreviewButton.svelte";
     import LabelButton from "components/LabelButton.svelte";
     import IconButton from "components/IconButton.svelte";
+    import Raw from "components/Raw.svelte";
 
-    export const editorToolbar = { LabelButton, IconButton };
+    export const editorToolbar = {
+        PreviewButton,
+        LabelButton,
+        IconButton,
+        Raw,
+    };
 </script>
 
 <script lang="typescript">
@@ -48,6 +55,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import TemplateButtons from "./TemplateButtons.svelte";
 
     export const notetypeButtons = {};
+    export const formatInlineButtons = {};
+    export const formatBlockButtons = {};
+    export const colorButtons = {};
+    export const templateButtons = {};
 
     export let nightMode: boolean;
 
@@ -65,9 +76,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <WithTheming {style}>
     <StickyBar>
         <NoteTypeButtons api={notetypeButtons} />
-        <FormatInlineButtons />
-        <FormatBlockButtons />
-        <ColorButtons />
-        <TemplateButtons />
+        <FormatInlineButtons api={formatInlineButtons} />
+        <FormatBlockButtons api={formatBlockButtons} />
+        <ColorButtons api={colorButtons} />
+        <TemplateButtons api={templateButtons} />
     </StickyBar>
 </WithTheming>
diff --git a/ts/editor/PreviewButton.svelte b/ts/editor/PreviewButton.svelte
new file mode 100644
index 000000000..159f4e9e0
--- /dev/null
+++ b/ts/editor/PreviewButton.svelte
@@ -0,0 +1,23 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import { bridgeCommand } from "lib/bridgecommand";
+    import * as tr from "lib/i18n";
+
+    import WithShortcut from "components/WithShortcut.svelte";
+    import LabelButton from "components/LabelButton.svelte";
+</script>
+
+<WithShortcut shortcut="Control+Shift+KeyP" let:createShortcut let:shortcutLabel>
+    <LabelButton
+        tooltip="{`${tr.browsingPreviewSelectedCard({
+            val: 'test',
+        })} (${shortcutLabel})`},"
+        disables={false}
+        on:click={() => bridgeCommand('preview')}
+        on:mount={createShortcut}>
+        {tr.actionsPreview()}
+    </LabelButton>
+</WithShortcut>
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index bd426ea81..d473bd93a 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -19,6 +19,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { appendInParentheses } from "./helpers";
     import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
 
+    export let api = {};
+
     function onAttachment(): void {
         bridgeCommand("attach");
     }
@@ -32,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ButtonGroup id="template">
+<ButtonGroup id="template" {api}>
     <ButtonGroupItem>
         <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
             <IconButton
@@ -55,7 +57,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </WithShortcut>
     </ButtonGroupItem>
 
-    <ButtonGroupItem>
+    <ButtonGroupItem id="cloze">
         <ClozeButton />
     </ButtonGroupItem>
 
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index b6ec76c5b..413fe3404 100644
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@@ -166,7 +166,9 @@ export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void
     }
 }
 
-const i18n = setupI18n({ modules: [ModuleName.EDITING, ModuleName.KEYBOARD] });
+const i18n = setupI18n({
+    modules: [ModuleName.EDITING, ModuleName.KEYBOARD, ModuleName.ACTIONS, ModuleName.BROWSING],
+});
 
 import type EditorToolbar from "./EditorToolbar.svelte";
 

From 4a6b3b3786578361067a73824f665e64b4cca12e Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 18:51:44 +0200
Subject: [PATCH 21/39] Clean up ButtonGroup and factor out extension logic

---
 ts/components/ButtonGroup.svelte     | 153 +++++++++------------------
 ts/components/ButtonGroupItem.svelte |   7 +-
 ts/components/ButtonToolbar.svelte   |  15 +++
 ts/components/StickyBar.svelte       |   5 +-
 ts/components/registration.ts        | 110 +++++++++++++++++++
 ts/editor/EditorToolbar.svelte       |  13 ++-
 ts/editor/bootstrap.scss             |   1 +
 7 files changed, 190 insertions(+), 114 deletions(-)
 create mode 100644 ts/components/ButtonToolbar.svelte
 create mode 100644 ts/components/registration.ts

diff --git a/ts/components/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte
index c8ff5e9ea..8f10d89e5 100644
--- a/ts/components/ButtonGroup.svelte
+++ b/ts/components/ButtonGroup.svelte
@@ -4,148 +4,95 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import ButtonGroupItem from "./ButtonGroupItem.svelte";
-    import type { SvelteComponentTyped } from "svelte";
     import { setContext } from "svelte";
     import { writable } from "svelte/store";
     import { buttonGroupKey } from "./contextKeys";
     import type { Identifier } from "./identifier";
-    import { insert, add, find } from "./identifier";
+    import { insert, add } from "./identifier";
     import type { ButtonRegistration } from "./buttons";
     import { ButtonPosition } from "./buttons";
+    import type { SvelteComponent } from "./registration";
+    import { makeInterface } from "./registration";
 
     export let id: string | undefined = undefined;
     let className: string = "";
     export { className as class };
 
-    export let api = {};
-    let buttonGroupRef: HTMLDivElement;
-
-    let items: ButtonRegistration[] = [];
-
-    $: {
-        for (const [index, item] of items.entries()) {
-            if (items.length === 1) {
-                item.position.set(ButtonPosition.Standalone);
-            } else if (index === 0) {
-                item.position.set(ButtonPosition.Leftmost);
-            } else if (index === items.length - 1) {
-                item.position.set(ButtonPosition.Rightmost);
-            } else {
-                item.position.set(ButtonPosition.Center);
-            }
-        }
-    }
-
     function makeRegistration(): ButtonRegistration {
         const detach = writable(false);
         const position = writable(ButtonPosition.Standalone);
         return { detach, position };
     }
 
-    function registerButton(
-        index = items.length,
-        registration = makeRegistration()
-    ): ButtonRegistration {
-        items.splice(index, 0, registration);
-        items = items;
-        return registration;
-    }
+    const {
+        registerComponent,
+        items,
+        dynamicItems,
+        getDynamicInterface,
+    } = makeInterface(makeRegistration);
 
-    interface SvelteComponent {
-        id: string | undefined;
-        component: SvelteComponentTyped;
-        props: Record<string, unknown>;
-    }
-
-    const dynamicItems: ButtonRegistration[] = [];
-    let dynamic: SvelteComponent[] = [];
-
-    function addButton(
-        button: SvelteComponent,
-        add: (added: Element, parent: Element) => number
-    ): void {
-        const registration = makeRegistration();
-
-        const callback = (
-            mutations: MutationRecord[],
-            observer: MutationObserver
-        ): void => {
-            for (const mutation of mutations) {
-                const addedNode = mutation.addedNodes[0];
-
-                if (addedNode.nodeType === Node.ELEMENT_NODE) {
-                    const index = add(addedNode as Element, buttonGroupRef);
-
-                    if (index >= 0) {
-                        registerButton(index, registration);
-                    }
-                }
-            }
-
-            observer.disconnect();
-        };
-
-        const observer = new MutationObserver(callback);
-        observer.observe(buttonGroupRef, { childList: true });
-
-        dynamicItems.push(registration);
-        dynamic = [...dynamic, button];
-    }
-
-    const insertButton = (button: SvelteComponent, position: Identifier = 0) =>
-        addButton(button, (added, parent) => insert(added, parent, position));
-    const appendButton = (button: SvelteComponent, position: Identifier = -1) =>
-        addButton(button, (added, parent) => add(added, parent, position));
-
-    function updateRegistration(
-        f: (registration: ButtonRegistration) => void,
-        id: Identifier
-    ): void {
-        const match = find(buttonGroupRef.children, id);
-
-        if (match) {
-            const [index] = match;
-            const registration = items[index];
-            f(registration);
+    $: for (const [index, item] of $items.entries()) {
+        if ($items.length === 1) {
+            item.position.set(ButtonPosition.Standalone);
+        } else if (index === 0) {
+            item.position.set(ButtonPosition.Leftmost);
+        } else if (index === $items.length - 1) {
+            item.position.set(ButtonPosition.Rightmost);
+        } else {
+            item.position.set(ButtonPosition.Center);
         }
     }
 
-    const showButton = (id: Identifier) =>
-        updateRegistration(({ detach }) => detach.set(false), id);
-    const hideButton = (id: Identifier) =>
-        updateRegistration(({ detach }) => detach.set(true), id);
-    const toggleButton = (id: Identifier) =>
-        updateRegistration(({ detach }) => detach.update((old) => !old), id);
+    setContext(buttonGroupKey, registerComponent);
+
+    export let api = {};
+    let buttonGroupRef: HTMLDivElement;
+
+    $: if (buttonGroupRef) {
+        const { addComponent, updateRegistration } = getDynamicInterface(
+            buttonGroupRef
+        );
+
+        const insertButton = (button: SvelteComponent, position: Identifier = 0) =>
+            addComponent(button, (added, parent) => insert(added, parent, position));
+        const appendButton = (button: SvelteComponent, position: Identifier = -1) =>
+            addComponent(button, (added, parent) => add(added, parent, position));
+
+        const showButton = (id: Identifier) =>
+            updateRegistration(({ detach }) => detach.set(false), id);
+        const hideButton = (id: Identifier) =>
+            updateRegistration(({ detach }) => detach.set(true), id);
+        const toggleButton = (id: Identifier) =>
+            updateRegistration(({ detach }) => detach.update((old) => !old), id);
 
-    setContext(
-        buttonGroupKey,
         Object.assign(api, {
-            registerButton,
             insertButton,
             appendButton,
             showButton,
             hideButton,
             toggleButton,
-        })
-    );
+        });
+    }
 </script>
 
 <style lang="scss">
     div {
-        display: flex;
-        justify-items: start;
         flex-wrap: var(--toolbar-wrap);
-
         padding: calc(var(--toolbar-size) / 10);
         margin: 0;
     }
 </style>
 
-<div bind:this={buttonGroupRef} {id} class={className} dir="ltr">
+<div
+    bind:this={buttonGroupRef}
+    {id}
+    class={`btn-group ${className}`}
+    dir="ltr"
+    role="group">
     <slot />
-    {#each dynamic as item, i}
-        <ButtonGroupItem id={item.id} registration={dynamicItems[i]}>
-            <svelte:component this={item.component} {...item.props} />
+    {#each $dynamicItems as item}
+        <ButtonGroupItem id={item[0].id} registration={item[1]}>
+            <svelte:component this={item[0].component} {...item[0].props} />
         </ButtonGroupItem>
     {/each}
 </div>
diff --git a/ts/components/ButtonGroupItem.svelte b/ts/components/ButtonGroupItem.svelte
index b50e4024d..fc28a13e1 100644
--- a/ts/components/ButtonGroupItem.svelte
+++ b/ts/components/ButtonGroupItem.svelte
@@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import type { ButtonRegistration } from "./buttons";
     import { ButtonPosition } from "./buttons";
+    import type { Register } from "./registration";
 
     import { getContext, hasContext } from "svelte";
     import { buttonGroupKey } from "./contextKeys";
@@ -43,8 +44,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         detach.subscribe((value: boolean) => (detach_ = value));
         position.subscribe((value: ButtonPosition) => (position_ = value));
     } else if (hasContext(buttonGroupKey)) {
-        const { registerButton } = getContext(buttonGroupKey);
-        const { detach, position } = registerButton();
+        const registerComponent = getContext<Register<ButtonRegistration>>(
+            buttonGroupKey
+        );
+        const { detach, position } = registerComponent();
         detach.subscribe((value: boolean) => (detach_ = value));
         position.subscribe((value: ButtonPosition) => (position_ = value));
     } else {
diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
new file mode 100644
index 000000000..82104ee05
--- /dev/null
+++ b/ts/components/ButtonToolbar.svelte
@@ -0,0 +1,15 @@
+<!--
+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 id: string | undefined = undefined;
+    let className: string | undefined;
+    export { className as class };
+
+    export let nowrap = false;
+</script>
+
+<div {id} class={`btn-toolbar ${className}`} class:flex-nowrap={nowrap} role="toolbar">
+    <slot />
+</div>
diff --git a/ts/components/StickyBar.svelte b/ts/components/StickyBar.svelte
index 5f85b8802..f16d76300 100644
--- a/ts/components/StickyBar.svelte
+++ b/ts/components/StickyBar.svelte
@@ -10,9 +10,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     nav {
-        display: flex;
-        flex-wrap: wrap;
-
         position: sticky;
         top: 0;
         left: 0;
@@ -24,6 +21,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<nav {id} class="pb-1 {className}">
+<nav {id} class={`pb-1 ${className}`}>
     <slot />
 </nav>
diff --git a/ts/components/registration.ts b/ts/components/registration.ts
new file mode 100644
index 000000000..8faf67be1
--- /dev/null
+++ b/ts/components/registration.ts
@@ -0,0 +1,110 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+import type { SvelteComponentTyped } from "svelte/internal";
+import type { Readable } from "svelte/store";
+import { writable } from "svelte/store";
+import type { Identifier } from "./identifier";
+import { find } from "./identifier";
+
+export interface SvelteComponent {
+    component: SvelteComponentTyped;
+    id: string | undefined;
+    props: Record<string, unknown> | undefined;
+}
+
+export type Register<T> = (index?: number, registration?: T) => T;
+
+export interface RegistrationAPI<T> {
+    registerComponent: Register<T>;
+    items: Readable<T[]>;
+    dynamicItems: Readable<[SvelteComponent, T][]>;
+    getDynamicInterface: (elementRef: HTMLElement) => DynamicRegistrationAPI<T>;
+}
+
+export interface DynamicRegistrationAPI<T> {
+    addComponent: (
+        component: SvelteComponent,
+        add: (added: Element, parent: Element) => number
+    ) => void;
+    updateRegistration: (
+        update: (registration: T) => void,
+        position: Identifier
+    ) => void;
+}
+
+export function makeInterface<T>(makeRegistration: () => T): RegistrationAPI<T> {
+    const registrations: T[] = [];
+    const items = writable(registrations);
+
+    function registerComponent(
+        index: number = registrations.length,
+        registration = makeRegistration()
+    ): T {
+        registrations.splice(index, 0, registration);
+        items.set(registrations);
+        return registration;
+    }
+
+    const dynamicRegistrations: [SvelteComponent, T][] = [];
+    const dynamicItems = writable(dynamicRegistrations);
+
+    function getDynamicInterface(elementRef: HTMLElement): DynamicRegistrationAPI<T> {
+        function addComponent(
+            component: SvelteComponent,
+            add: (added: Element, parent: Element) => number
+        ): void {
+            const registration = makeRegistration();
+
+            const callback = (
+                mutations: MutationRecord[],
+                observer: MutationObserver
+            ): void => {
+                for (const mutation of mutations) {
+                    const addedNode = mutation.addedNodes[0];
+
+                    if (addedNode.nodeType === Node.ELEMENT_NODE) {
+                        const index = add(addedNode as Element, elementRef);
+
+                        if (index >= 0) {
+                            registerComponent(index, registration);
+                        }
+                    }
+                }
+
+                observer.disconnect();
+            };
+
+            const observer = new MutationObserver(callback);
+            observer.observe(elementRef, { childList: true });
+
+            dynamicRegistrations.push([component, registration]);
+            dynamicItems.set(dynamicRegistrations);
+        }
+
+        function updateRegistration(
+            update: (registration: T) => void,
+            position: Identifier
+        ): void {
+            const match = find(elementRef.children, position);
+
+            if (match) {
+                const [index] = match;
+                const registration = registrations[index];
+                update(registration);
+                items.set(registrations);
+            }
+        }
+
+        return {
+            addComponent,
+            updateRegistration,
+        };
+    }
+
+    return {
+        registerComponent,
+        items,
+        dynamicItems,
+        getDynamicInterface,
+    };
+}
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 32cf4d939..bf43f31ba 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -47,6 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import WithTheming from "components/WithTheming.svelte";
     import StickyBar from "components/StickyBar.svelte";
+    import ButtonToolbar from "components/ButtonToolbar.svelte";
 
     import NoteTypeButtons from "./NoteTypeButtons.svelte";
     import FormatInlineButtons from "./FormatInlineButtons.svelte";
@@ -75,10 +76,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <WithTheming {style}>
     <StickyBar>
-        <NoteTypeButtons api={notetypeButtons} />
-        <FormatInlineButtons api={formatInlineButtons} />
-        <FormatBlockButtons api={formatBlockButtons} />
-        <ColorButtons api={colorButtons} />
-        <TemplateButtons api={templateButtons} />
+        <ButtonToolbar>
+            <NoteTypeButtons api={notetypeButtons} />
+            <FormatInlineButtons api={formatInlineButtons} />
+            <FormatBlockButtons api={formatBlockButtons} />
+            <ColorButtons api={colorButtons} />
+            <TemplateButtons api={templateButtons} />
+        </ButtonToolbar>
     </StickyBar>
 </WithTheming>
diff --git a/ts/editor/bootstrap.scss b/ts/editor/bootstrap.scss
index 0988a6de7..ce3c5287e 100644
--- a/ts/editor/bootstrap.scss
+++ b/ts/editor/bootstrap.scss
@@ -5,4 +5,5 @@
 $btn-disabled-opacity: 0.4;
 
 @import "ts/sass/bootstrap/buttons";
+@import "ts/sass/bootstrap/button-group";
 @import "ts/sass/bootstrap/dropdown";

From 928f486867abdf470ec1a7777ac68e434366dc47 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 19:26:50 +0200
Subject: [PATCH 22/39] Add ButtonToolbarItem as interface for modifying button
 groups

---
 ts/components/ButtonGroup.svelte       |  5 +-
 ts/components/ButtonToolbar.svelte     | 67 +++++++++++++++++++++++++-
 ts/components/ButtonToolbarItem.svelte | 44 +++++++++++++++++
 ts/components/buttons.ts               |  4 ++
 ts/components/contextKeys.ts           |  1 +
 ts/editor/ColorButtons.svelte          |  2 +-
 ts/editor/EditorToolbar.svelte         | 28 ++++++++---
 ts/editor/FormatBlockButtons.svelte    |  2 +-
 ts/editor/FormatInlineButtons.svelte   |  2 +-
 ts/editor/NoteTypeButtons.svelte       |  2 +-
 ts/editor/TemplateButtons.svelte       |  2 +-
 11 files changed, 145 insertions(+), 14 deletions(-)
 create mode 100644 ts/components/ButtonToolbarItem.svelte

diff --git a/ts/components/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte
index 8f10d89e5..472be9f42 100644
--- a/ts/components/ButtonGroup.svelte
+++ b/ts/components/ButtonGroup.svelte
@@ -63,7 +63,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         const hideButton = (id: Identifier) =>
             updateRegistration(({ detach }) => detach.set(true), id);
         const toggleButton = (id: Identifier) =>
-            updateRegistration(({ detach }) => detach.update((old) => !old), id);
+            updateRegistration(
+                ({ detach }) => detach.update((old: boolean): boolean => !old),
+                id
+            );
 
         Object.assign(api, {
             insertButton,
diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
index 82104ee05..3342c90a9 100644
--- a/ts/components/ButtonToolbar.svelte
+++ b/ts/components/ButtonToolbar.svelte
@@ -3,13 +3,76 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import { setContext } from "svelte";
+    import { writable } from "svelte/store";
+    import ButtonToolbarItem from "./ButtonToolbarItem.svelte";
+    import type { ButtonGroupRegistration } from "./buttons";
+    import { buttonToolbarKey } from "./contextKeys";
+    import type { Identifier } from "./identifier";
+    import { insert, add } from "./identifier";
+    import type { SvelteComponent } from "./registration";
+    import { makeInterface } from "./registration";
+
     export let id: string | undefined = undefined;
-    let className: string | undefined;
+    let className: string = "";
     export { className as class };
 
     export let nowrap = false;
+
+    function makeRegistration(): ButtonGroupRegistration {
+        const detach = writable(false);
+        return { detach };
+    }
+
+    const { registerComponent, dynamicItems, getDynamicInterface } = makeInterface(
+        makeRegistration
+    );
+
+    setContext(buttonToolbarKey, registerComponent);
+
+    export let api = {};
+    let buttonToolbarRef: HTMLDivElement;
+
+    $: if (buttonToolbarRef) {
+        const { addComponent, updateRegistration } = getDynamicInterface(
+            buttonToolbarRef
+        );
+
+        const insertGroup = (button: SvelteComponent, position: Identifier = 0) =>
+            addComponent(button, (added, parent) => insert(added, parent, position));
+        const appendGroup = (button: SvelteComponent, position: Identifier = -1) =>
+            addComponent(button, (added, parent) => add(added, parent, position));
+
+        const showGroup = (id: Identifier) =>
+            updateRegistration(({ detach }) => detach.set(false), id);
+        const hideGroup = (id: Identifier) =>
+            updateRegistration(({ detach }) => detach.set(true), id);
+        const toggleGroup = (id: Identifier) =>
+            updateRegistration(
+                ({ detach }) => detach.update((old: boolean): boolean => !old),
+                id
+            );
+
+        Object.assign(api, {
+            insertGroup,
+            appendGroup,
+            showGroup,
+            hideGroup,
+            toggleGroup,
+        });
+    }
 </script>
 
-<div {id} class={`btn-toolbar ${className}`} class:flex-nowrap={nowrap} role="toolbar">
+<div
+    bind:this={buttonToolbarRef}
+    {id}
+    class={`btn-toolbar ${className}`}
+    class:flex-nowrap={nowrap}
+    role="toolbar">
     <slot />
+    {#each $dynamicItems as item}
+        <ButtonToolbarItem id={item[0].id} registration={item[1]}>
+            <svelte:component this={item[0].component} {...item[0].props} />
+        </ButtonToolbarItem>
+    {/each}
 </div>
diff --git a/ts/components/ButtonToolbarItem.svelte b/ts/components/ButtonToolbarItem.svelte
new file mode 100644
index 000000000..7034d5838
--- /dev/null
+++ b/ts/components/ButtonToolbarItem.svelte
@@ -0,0 +1,44 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import Detachable from "components/Detachable.svelte";
+
+    import type { ButtonGroupRegistration } from "./buttons";
+    import type { Register } from "./registration";
+
+    import { getContext, hasContext } from "svelte";
+    import { buttonToolbarKey } from "./contextKeys";
+
+    export let id: string | undefined = undefined;
+    export let registration: ButtonGroupRegistration | undefined = undefined;
+
+    let detach_: boolean;
+
+    if (registration) {
+        const { detach } = registration;
+        detach.subscribe((value: boolean) => (detach_ = value));
+    } else if (hasContext(buttonToolbarKey)) {
+        const registerComponent = getContext<Register<ButtonGroupRegistration>>(
+            buttonToolbarKey
+        );
+        const { detach } = registerComponent();
+        detach.subscribe((value: boolean) => (detach_ = value));
+    } else {
+        detach_ = false;
+    }
+</script>
+
+<style lang="scss">
+    div {
+        display: contents;
+    }
+</style>
+
+<!-- div is necessary to preserve item position -->
+<div {id}>
+    <Detachable detach={detach_}>
+        <slot />
+    </Detachable>
+</div>
diff --git a/ts/components/buttons.ts b/ts/components/buttons.ts
index dd78918b0..abe6ee34e 100644
--- a/ts/components/buttons.ts
+++ b/ts/components/buttons.ts
@@ -13,3 +13,7 @@ export interface ButtonRegistration {
     detach: Writable<boolean>;
     position: Writable<ButtonPosition>;
 }
+
+export interface ButtonGroupRegistration {
+    detach: Writable<boolean>;
+}
diff --git a/ts/components/contextKeys.ts b/ts/components/contextKeys.ts
index bbf71738c..10979427f 100644
--- a/ts/components/contextKeys.ts
+++ b/ts/components/contextKeys.ts
@@ -3,5 +3,6 @@
 export const nightModeKey = Symbol("nightMode");
 export const disabledKey = Symbol("disabled");
 
+export const buttonToolbarKey = Symbol("buttonToolbar");
 export const buttonGroupKey = Symbol("buttonGroup");
 export const dropdownKey = Symbol("dropdown");
diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index 9c15bb22d..73a0e22e8 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ButtonGroup id="color" {api}>
+<ButtonGroup {api}>
     <ButtonGroupItem>
         <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
             <IconButton
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index bf43f31ba..434d1ba36 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -48,6 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import WithTheming from "components/WithTheming.svelte";
     import StickyBar from "components/StickyBar.svelte";
     import ButtonToolbar from "components/ButtonToolbar.svelte";
+    import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
 
     import NoteTypeButtons from "./NoteTypeButtons.svelte";
     import FormatInlineButtons from "./FormatInlineButtons.svelte";
@@ -55,6 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ColorButtons from "./ColorButtons.svelte";
     import TemplateButtons from "./TemplateButtons.svelte";
 
+    export const toolbar = {};
     export const notetypeButtons = {};
     export const formatInlineButtons = {};
     export const formatBlockButtons = {};
@@ -76,12 +78,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <WithTheming {style}>
     <StickyBar>
-        <ButtonToolbar>
-            <NoteTypeButtons api={notetypeButtons} />
-            <FormatInlineButtons api={formatInlineButtons} />
-            <FormatBlockButtons api={formatBlockButtons} />
-            <ColorButtons api={colorButtons} />
-            <TemplateButtons api={templateButtons} />
+        <ButtonToolbar api={toolbar}>
+            <ButtonToolbarItem id="notetype">
+                <NoteTypeButtons api={notetypeButtons} />
+            </ButtonToolbarItem>
+
+            <ButtonToolbarItem id="inlineFormatting">
+                <FormatInlineButtons api={formatInlineButtons} />
+            </ButtonToolbarItem>
+
+            <ButtonToolbarItem id="blockFormatting">
+                <FormatBlockButtons api={formatBlockButtons} />
+            </ButtonToolbarItem>
+
+            <ButtonToolbarItem id="color">
+                <ColorButtons api={colorButtons} />
+            </ButtonToolbarItem>
+
+            <ButtonToolbarItem id="template">
+                <TemplateButtons api={templateButtons} />
+            </ButtonToolbarItem>
         </ButtonToolbar>
     </StickyBar>
 </WithTheming>
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/FormatBlockButtons.svelte
index 39c0a9857..96b8a04c8 100644
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/FormatBlockButtons.svelte
@@ -43,7 +43,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ButtonGroup id="blockFormatting" {api}>
+<ButtonGroup {api}>
     <ButtonGroupItem>
         <WithState
             key="insertUnorderedList"
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/FormatInlineButtons.svelte
index f0f523c32..f09e11da7 100644
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/FormatInlineButtons.svelte
@@ -24,7 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let api = {};
 </script>
 
-<ButtonGroup id="notetype" {api}>
+<ButtonGroup {api}>
     <ButtonGroupItem>
         <WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel>
             <WithState
diff --git a/ts/editor/NoteTypeButtons.svelte b/ts/editor/NoteTypeButtons.svelte
index 5493fcc05..6df705e3b 100644
--- a/ts/editor/NoteTypeButtons.svelte
+++ b/ts/editor/NoteTypeButtons.svelte
@@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let api = {};
 </script>
 
-<ButtonGroup id="notetype" {api}>
+<ButtonGroup {api}>
     <ButtonGroupItem>
         <LabelButton
             disables={false}
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index d473bd93a..a80bc3795 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ButtonGroup id="template" {api}>
+<ButtonGroup {api}>
     <ButtonGroupItem>
         <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
             <IconButton

From c9368ed98f082e28fa6890c144632c507e60b6e9 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 20:29:55 +0200
Subject: [PATCH 23/39] Add lefttopbtns as AddonButtons

---
 qt/aqt/editor.py                   | 20 ++++++++++----------
 ts/components/ButtonToolbar.svelte |  8 ++++----
 ts/components/IconButton.svelte    |  7 +------
 ts/components/LabelButton.svelte   |  6 +-----
 ts/components/Raw.svelte           |  9 ---------
 ts/editor/AddonButtons.svelte      | 18 ++++++++++++++++++
 ts/editor/EditorToolbar.svelte     |  4 ++--
 ts/editor/legacy.scss              |  3 +++
 ts/sass/button_mixins.scss         |  8 ++++++++
 9 files changed, 47 insertions(+), 36 deletions(-)
 delete mode 100644 ts/components/Raw.svelte
 create mode 100644 ts/editor/AddonButtons.svelte

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 62bf0b9a3..b3d7e22a9 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -145,7 +145,7 @@ class Editor:
         gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
 
         lefttopbtns_defs = [
-            f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.addButton({{ component: editorToolbar.Raw, props: {{ html: `{button}` }} }}, -1));"
+            f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.Raw, props: {{ html: `{button}` }} }}, -1));"
             for button in lefttopbtns
         ]
         lefttopbtns_js = "\n".join(lefttopbtns_defs)
@@ -155,21 +155,21 @@ class Editor:
         # legacy filter
         righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
 
-        righttopbtns_defs = "\n".join(
-            [f"editorToolbar.Raw({{ html: `{button}` }})," for button in righttopbtns]
-        )
+        righttopbtns_defs = ", ".join([f"`{button}`" for button in righttopbtns])
         righttopbtns_js = (
             f"""
-$editorToolbar.then(({{ addButton }}) => addButton(editorToolbar.buttonGroup({{
-  id: "addons",
-  items: [ {righttopbtns_defs} ]
-}}), -1));
+$editorToolbar.then(({{ toolbar }}) => toolbar.appendGroup({{
+    component: editorToolbar.AddonButtons,
+    id: "addons",
+    props: {{ buttons: [ {righttopbtns_defs} ] }},
+}}));
 """
-            if righttopbtns_defs
+            if len(righttopbtns) > 0
             else ""
         )
 
-        self.web.eval(f"{lefttopbtns_js}")
+        print(righttopbtns_js)
+        self.web.eval(f"{lefttopbtns_js} {righttopbtns_js}")
 
     # Top buttons
     ######################################################################
diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
index 3342c90a9..49243ccec 100644
--- a/ts/components/ButtonToolbar.svelte
+++ b/ts/components/ButtonToolbar.svelte
@@ -38,10 +38,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             buttonToolbarRef
         );
 
-        const insertGroup = (button: SvelteComponent, position: Identifier = 0) =>
-            addComponent(button, (added, parent) => insert(added, parent, position));
-        const appendGroup = (button: SvelteComponent, position: Identifier = -1) =>
-            addComponent(button, (added, parent) => add(added, parent, position));
+        const insertGroup = (group: SvelteComponent, position: Identifier = 0) =>
+            addComponent(group, (added, parent) => insert(added, parent, position));
+        const appendGroup = (group: SvelteComponent, position: Identifier = -1) =>
+            addComponent(group, (added, parent) => add(added, parent, position));
 
         const showGroup = (id: Identifier) =>
             updateRegistration(({ detach }) => detach.set(false), id);
diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 3a5a255e6..ff594339f 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -34,12 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     button {
         padding: 0;
-
-        border-top-left-radius: var(--border-left-radius);
-        border-bottom-left-radius: var(--border-left-radius);
-
-        border-top-right-radius: var(--border-right-radius);
-        border-bottom-right-radius: var(--border-right-radius);
+        @include button.btn-border-radius;
     }
 
     @include button.btn-day;
diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte
index 9af9bcf1e..0285676a5 100644
--- a/ts/components/LabelButton.svelte
+++ b/ts/components/LabelButton.svelte
@@ -37,11 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         width: auto;
         height: var(--toolbar-size);
 
-        border-top-left-radius: var(--border-left-radius);
-        border-bottom-left-radius: var(--border-left-radius);
-
-        border-top-right-radius: var(--border-right-radius);
-        border-bottom-right-radius: var(--border-right-radius);
+        @include button.btn-border-radius;
     }
 
     @include button.btn-day;
diff --git a/ts/components/Raw.svelte b/ts/components/Raw.svelte
deleted file mode 100644
index 54908eb3e..000000000
--- a/ts/components/Raw.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<!--
-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 html: string;
-</script>
-
-{@html html}
diff --git a/ts/editor/AddonButtons.svelte b/ts/editor/AddonButtons.svelte
new file mode 100644
index 000000000..337d4a6d0
--- /dev/null
+++ b/ts/editor/AddonButtons.svelte
@@ -0,0 +1,18 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+
+    export let buttons: string[];
+</script>
+
+<ButtonGroup>
+    {#each buttons as button}
+        <ButtonGroupItem>
+            {@html button}
+        </ButtonGroupItem>
+    {/each}
+</ButtonGroup>
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 434d1ba36..d52bd55a5 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -28,16 +28,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     /* Export components */
+    import AddonButtons from "./AddonButtons.svelte";
     import PreviewButton from "./PreviewButton.svelte";
     import LabelButton from "components/LabelButton.svelte";
     import IconButton from "components/IconButton.svelte";
-    import Raw from "components/Raw.svelte";
 
     export const editorToolbar = {
+        AddonButtons,
         PreviewButton,
         LabelButton,
         IconButton,
-        Raw,
     };
 </script>
 
diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss
index 767ca7677..5a39351b1 100644
--- a/ts/editor/legacy.scss
+++ b/ts/editor/legacy.scss
@@ -1,5 +1,8 @@
+@use "ts/sass/button_mixins" as button;
+
 .linkb {
     display: inline-block;
+    @include button.btn-border-radius;
 }
 
 .topbut {
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index a7ee0f45e..4720df764 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -1,6 +1,14 @@
 @import "ts/sass/bootstrap/functions";
 @import "ts/sass/bootstrap/variables";
 
+@mixin btn-border-radius {
+    border-top-left-radius: var(--border-left-radius);
+    border-bottom-left-radius: var(--border-left-radius);
+
+    border-top-right-radius: var(--border-right-radius);
+    border-bottom-right-radius: var(--border-right-radius);
+}
+
 $btn-base-color-day: white;
 
 @mixin btn-day-base {

From 0f4d4eb5a9f6ef9c0fab4ec20765587d151005e8 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 20:39:52 +0200
Subject: [PATCH 24/39] Only initialize extension apis if necessary

---
 qt/aqt/editor.py                   | 1 -
 ts/components/ButtonGroup.svelte   | 4 ++--
 ts/components/ButtonToolbar.svelte | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index b3d7e22a9..bc1ba2ac2 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -168,7 +168,6 @@ $editorToolbar.then(({{ toolbar }}) => toolbar.appendGroup({{
             else ""
         )
 
-        print(righttopbtns_js)
         self.web.eval(f"{lefttopbtns_js} {righttopbtns_js}")
 
     # Top buttons
diff --git a/ts/components/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte
index 472be9f42..5f8de7614 100644
--- a/ts/components/ButtonGroup.svelte
+++ b/ts/components/ButtonGroup.svelte
@@ -45,10 +45,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     setContext(buttonGroupKey, registerComponent);
 
-    export let api = {};
+    export let api: Record<string, unknown> | undefined = undefined;
     let buttonGroupRef: HTMLDivElement;
 
-    $: if (buttonGroupRef) {
+    $: if (api && buttonGroupRef) {
         const { addComponent, updateRegistration } = getDynamicInterface(
             buttonGroupRef
         );
diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
index 49243ccec..66b2f1571 100644
--- a/ts/components/ButtonToolbar.svelte
+++ b/ts/components/ButtonToolbar.svelte
@@ -30,10 +30,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     setContext(buttonToolbarKey, registerComponent);
 
-    export let api = {};
+    export let api: Record<string, unknown> | undefined = undefined;
     let buttonToolbarRef: HTMLDivElement;
 
-    $: if (buttonToolbarRef) {
+    $: if (buttonToolbarRef && api) {
         const { addComponent, updateRegistration } = getDynamicInterface(
             buttonToolbarRef
         );

From 193e2f9e6004beae665ed9b8e0f636dbcf9efb94 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 20:48:11 +0200
Subject: [PATCH 25/39] Make LabelButtons support active notion

---
 ts/components/LabelButton.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte
index 0285676a5..b138dee12 100644
--- a/ts/components/LabelButton.svelte
+++ b/ts/components/LabelButton.svelte
@@ -12,7 +12,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let className: string = "";
     export { className as class };
 
-    export let tooltip: string | undefined;
+    export let tooltip: string | undefined = undefined;
+    export let active = false;
     export let disables = true;
     export let tabbable = false;
 
@@ -48,6 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bind:this={buttonRef}
     {id}
     class={`btn ${className}`}
+    class:active
     class:dropdown-toggle={dropdownProps.dropdown}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}

From 2112b419f900db0ea207e1180576bc5a5008f330 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 23:04:38 +0200
Subject: [PATCH 26/39] Fix ButtonDropdown

---
 qt/aqt/browser/browser.py           |   3 +-
 ts/components/ButtonDropdown.svelte |  26 +++-
 ts/editor/BUILD.bazel               |   4 +-
 ts/editor/EditorToolbar.svelte      |  21 ----
 ts/editor/FormatBlockButtons.svelte | 187 +++++++++++++++-------------
 ts/editor/toolbar.ts                |  40 +++---
 6 files changed, 141 insertions(+), 140 deletions(-)

diff --git a/qt/aqt/browser/browser.py b/qt/aqt/browser/browser.py
index 9d67630bf..d0c0a308a 100644
--- a/qt/aqt/browser/browser.py
+++ b/qt/aqt/browser/browser.py
@@ -68,7 +68,6 @@ from aqt.utils import (
     saveGeom,
     saveSplitter,
     saveState,
-    shortcut,
     showInfo,
     showWarning,
     skip_if_selection_is_empty,
@@ -383,7 +382,7 @@ class Browser(QMainWindow):
 
             editor._links["preview"] = lambda _editor: self.onTogglePreview()
             editor.web.eval(
-                f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.PreviewButton }}, -1));"
+                "$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.PreviewButton }}, -1));"
             )
 
         gui_hooks.editor_did_init.append(add_preview_button)
diff --git a/ts/components/ButtonDropdown.svelte b/ts/components/ButtonDropdown.svelte
index 7f8246e5c..c4512842f 100644
--- a/ts/components/ButtonDropdown.svelte
+++ b/ts/components/ButtonDropdown.svelte
@@ -6,22 +6,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { setContext } from "svelte";
     import { dropdownKey } from "./contextKeys";
 
-    import ButtonGroup from "./ButtonGroup.svelte";
+    import WithTheming from "./WithTheming.svelte";
+    import ButtonToolbar from "./ButtonToolbar.svelte";
 
     export let id: string | undefined;
     let className = "";
     export { className as class };
 
-    export let api = {};
+    export let api: Record<string, unknown> | undefined = undefined;
 
     setContext(dropdownKey, null);
 </script>
 
-<style>
+<style lang="scss">
     :global(.dropdown-menu.btn-dropdown-menu) {
         display: none;
+        min-width: 0;
+        padding: calc(var(--toolbar-size) / 10) 0;
+
         background-color: var(--window-bg);
         border-color: var(--medium-border);
+
+        :global(.btn-group) {
+            position: static;
+        }
     }
 
     :global(.dropdown-menu.btn-dropdown-menu.show) {
@@ -29,6 +37,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<ButtonGroup {id} class={`dropdown-menu btn-dropdown-menu ${className}`} {api}>
-    <slot />
-</ButtonGroup>
+<WithTheming style="--toolbar-wrap: nowrap; ">
+    <ButtonToolbar
+        {id}
+        class={`dropdown-menu btn-dropdown-menu ${className}`}
+        nowrap={true}
+        {api}>
+        <slot />
+    </ButtonToolbar>
+</WithTheming>
diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index af4796ddf..f25d8017b 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -74,7 +74,7 @@ ts_library(
         "//ts/html-filter",
         "//ts:image_module_support",
         "@npm//svelte",
-    ],
+    ] + svelte_names,
 )
 
 copy_bootstrap_icons(
@@ -173,7 +173,7 @@ svelte_check(
     ]) + [
         "//ts/sass:button_mixins_lib",
         "//ts/sass/bootstrap",
-        "@npm//@types/bootstrap",
         "//ts/components:svelte_components",
+        "@npm//@types/bootstrap",
     ],
 )
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index d52bd55a5..fe21af4cf 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -4,19 +4,6 @@ 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";
-
-    const disabled = writable(false);
-
-    export function enableButtons(): void {
-        disabled.set(false);
-    }
-
-    export function disableButtons(): void {
-        disabled.set(true);
-    }
-
-    // @ts-expect-error insufficient typing of svelte modules
     import { updateAllState, resetAllState } from "components/WithState.svelte";
 
     export function updateActiveButtons(event: Event) {
@@ -42,9 +29,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="typescript">
-    import { setContext } from "svelte";
-    import { disabledKey, nightModeKey } from "components/contextKeys";
-
     import WithTheming from "components/WithTheming.svelte";
     import StickyBar from "components/StickyBar.svelte";
     import ButtonToolbar from "components/ButtonToolbar.svelte";
@@ -63,11 +47,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export const colorButtons = {};
     export const templateButtons = {};
 
-    export let nightMode: boolean;
-
-    setContext(nightModeKey, nightMode);
-    setContext(disabledKey, disabled);
-
     export let size: number = 30;
     export let wraps: boolean = true;
 
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/FormatBlockButtons.svelte
index 96b8a04c8..3585b8469 100644
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/FormatBlockButtons.svelte
@@ -10,6 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import IconButton from "components/IconButton.svelte";
     import ButtonDropdown from "components/ButtonDropdown.svelte";
+    import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
     import WithState from "components/WithState.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
 
@@ -80,103 +81,109 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </WithState>
     </ButtonGroupItem>
 
-    <WithDropdownMenu let:createDropdown let:menuId>
-        <ButtonGroupItem>
+    <ButtonGroupItem>
+        <WithDropdownMenu let:createDropdown let:menuId>
             <IconButton on:mount={createDropdown}>
                 {@html listOptionsIcon}
             </IconButton>
-        </ButtonGroupItem>
 
-        <ButtonDropdown id={menuId}>
-            <ButtonGroup id="justify" {api}>
-                <ButtonGroupItem>
-                    <WithState
-                        key="justifyLeft"
-                        update={() => document.queryCommandState('justifyLeft')}
-                        let:state={active}
-                        let:updateState>
-                        <IconButton
-                            tooltip={tr.editingAlignLeft()}
-                            {active}
-                            on:click={(event) => {
-                                document.execCommand('justifyLeft');
-                                updateState(event);
-                            }}>
-                            {@html justifyLeftIcon}
-                        </IconButton>
-                    </WithState>
-                </ButtonGroupItem>
+            <ButtonDropdown id={menuId}>
+                <ButtonToolbarItem id="justify">
+                    <ButtonGroup>
+                        <ButtonGroupItem>
+                            <WithState
+                                key="justifyLeft"
+                                update={() => document.queryCommandState('justifyLeft')}
+                                let:state={active}
+                                let:updateState>
+                                <IconButton
+                                    tooltip={tr.editingAlignLeft()}
+                                    {active}
+                                    on:click={(event) => {
+                                        document.execCommand('justifyLeft');
+                                        updateState(event);
+                                    }}>
+                                    {@html justifyLeftIcon}
+                                </IconButton>
+                            </WithState>
+                        </ButtonGroupItem>
 
-                <ButtonGroupItem>
-                    <WithState
-                        key="justifyCenter"
-                        update={() => document.queryCommandState('justifyCenter')}
-                        let:state={active}
-                        let:updateState>
-                        <IconButton
-                            tooltip={tr.editingCenter()}
-                            {active}
-                            on:click={(event) => {
-                                document.execCommand('justifyCenter');
-                                updateState(event);
-                            }}>
-                            {@html justifyCenterIcon}
-                        </IconButton>
-                    </WithState>
-                </ButtonGroupItem>
+                        <ButtonGroupItem>
+                            <WithState
+                                key="justifyCenter"
+                                update={() => document.queryCommandState('justifyCenter')}
+                                let:state={active}
+                                let:updateState>
+                                <IconButton
+                                    tooltip={tr.editingCenter()}
+                                    {active}
+                                    on:click={(event) => {
+                                        document.execCommand('justifyCenter');
+                                        updateState(event);
+                                    }}>
+                                    {@html justifyCenterIcon}
+                                </IconButton>
+                            </WithState>
+                        </ButtonGroupItem>
 
-                <ButtonGroupItem>
-                    <WithState
-                        key="justifyRight"
-                        update={() => document.queryCommandState('justifyRight')}
-                        let:state={active}
-                        let:updateState>
-                        <IconButton
-                            tooltip={tr.editingAlignRight()}
-                            {active}
-                            on:click={(event) => {
-                                document.execCommand('justifyRight');
-                                updateState(event);
-                            }}>
-                            {@html justifyRightIcon}
-                        </IconButton>
-                    </WithState>
-                </ButtonGroupItem>
+                        <ButtonGroupItem>
+                            <WithState
+                                key="justifyRight"
+                                update={() => document.queryCommandState('justifyRight')}
+                                let:state={active}
+                                let:updateState>
+                                <IconButton
+                                    tooltip={tr.editingAlignRight()}
+                                    {active}
+                                    on:click={(event) => {
+                                        document.execCommand('justifyRight');
+                                        updateState(event);
+                                    }}>
+                                    {@html justifyRightIcon}
+                                </IconButton>
+                            </WithState>
+                        </ButtonGroupItem>
 
-                <ButtonGroupItem>
-                    <WithState
-                        key="justifyFull"
-                        update={() => document.queryCommandState('justifyFull')}
-                        let:state={active}
-                        let:updateState>
-                        <IconButton
-                            tooltip={tr.editingJustify()}
-                            {active}
-                            on:click={(event) => {
-                                document.execCommand('justifyFull');
-                                updateState(event);
-                            }}>
-                            {@html justifyFullIcon}
-                        </IconButton>
-                    </WithState>
-                </ButtonGroupItem>
-            </ButtonGroup>
+                        <ButtonGroupItem>
+                            <WithState
+                                key="justifyFull"
+                                update={() => document.queryCommandState('justifyFull')}
+                                let:state={active}
+                                let:updateState>
+                                <IconButton
+                                    tooltip={tr.editingJustify()}
+                                    {active}
+                                    on:click={(event) => {
+                                        document.execCommand('justifyFull');
+                                        updateState(event);
+                                    }}>
+                                    {@html justifyFullIcon}
+                                </IconButton>
+                            </WithState>
+                        </ButtonGroupItem>
+                    </ButtonGroup>
+                </ButtonToolbarItem>
 
-            <ButtonGroup id="indentation" {api}>
-                <ButtonGroupItem>
-                    <IconButton
-                        on:click={outdentListItem}
-                        tooltip={tr.editingOutdent()}>
-                        {@html outdentIcon}
-                    </IconButton>
-                </ButtonGroupItem>
+                <ButtonToolbarItem id="indentation">
+                    <ButtonGroup>
+                        <ButtonGroupItem>
+                            <IconButton
+                                on:click={outdentListItem}
+                                tooltip={tr.editingOutdent()}>
+                                {@html outdentIcon}
+                            </IconButton>
+                        </ButtonGroupItem>
 
-                <ButtonGroupItem>
-                    <IconButton on:click={indentListItem} tooltip={tr.editingIndent()}>
-                        {@html indentIcon}
-                    </IconButton>
-                </ButtonGroupItem>
-            </ButtonGroup>
-        </ButtonDropdown>
-    </WithDropdownMenu>
+                        <ButtonGroupItem>
+                            <IconButton
+                                on:click={indentListItem}
+                                tooltip={tr.editingIndent()}>
+                                {@html indentIcon}
+                            </IconButton>
+                        </ButtonGroupItem>
+                    </ButtonGroup>
+                </ButtonToolbarItem>
+            </ButtonDropdown>
+        </WithDropdownMenu>
+    </ButtonGroupItem>
 </ButtonGroup>
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index e296db0bf..ec26e26fe 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -1,9 +1,14 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import { disabledKey, nightModeKey } from "components/contextKeys";
+import { writable } from "svelte/store";
+
 import EditorToolbar from "./EditorToolbar.svelte";
 import "./bootstrap.css";
 
+const disabled = writable(false);
+
 export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
     let toolbarResolve: (value: EditorToolbar) => void;
     const toolbarPromise = new Promise<EditorToolbar>((resolve) => {
@@ -15,33 +20,30 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
             const target = document.body;
             const anchor = document.getElementById("fields")!;
 
-            toolbarResolve(
-                new EditorToolbar({
-                    target,
-                    anchor,
-                    props: {
-                        nightMode: document.documentElement.classList.contains(
-                            "night-mode"
-                        ),
-                    },
-                })
+            const context = new Map();
+            context.set(disabledKey, disabled);
+            context.set(
+                nightModeKey,
+                document.documentElement.classList.contains("night-mode")
             );
+
+            toolbarResolve(new EditorToolbar({ target, anchor, context } as any));
         });
     });
 
     return toolbarPromise;
 }
 
-/* Exports for editor */
+export function enableButtons(): void {
+    disabled.set(false);
+}
+
+export function disableButtons(): void {
+    disabled.set(true);
+}
+
 export {
-    // @ts-expect-error insufficient typing of svelte modules
-    editorToolbar,
-    // @ts-expect-error insufficient typing of svelte modules
-    enableButtons,
-    // @ts-expect-error insufficient typing of svelte modules
-    disableButtons,
-    // @ts-expect-error insufficient typing of svelte modules
     updateActiveButtons,
-    // @ts-expect-error insufficient typing of svelte modules
     clearActiveButtons,
+    editorToolbar,
 } from "./EditorToolbar.svelte";

From b2eec9c3c3bf9dcbbe45a77add9670e74f3ef758 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 23:15:41 +0200
Subject: [PATCH 27/39] Add ts-expect-error for module import in EditorToolbar

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

diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index fe21af4cf..635c5eb2e 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script context="module" lang="typescript">
     import "./legacy.css";
+    // @ts-expect-error Insufficient typing
     import { updateAllState, resetAllState } from "components/WithState.svelte";
 
     export function updateActiveButtons(event: Event) {

From d1c99cfb7b12ad908126576060e2cf17ddddbf16 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 23:22:02 +0200
Subject: [PATCH 28/39] Add copyright header

---
 ts/editor/icons.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ts/editor/icons.ts b/ts/editor/icons.ts
index 292ff2573..44a5348d4 100644
--- a/ts/editor/icons.ts
+++ b/ts/editor/icons.ts
@@ -1,3 +1,6 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
 export { default as boldIcon } from "./type-bold.svg";
 export { default as italicIcon } from "./type-italic.svg";
 export { default as underlineIcon } from "./type-underline.svg";

From 81cf2c9bd41fe8f3f1eaf0de08ac6c1d6dfc799b Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 23:33:28 +0200
Subject: [PATCH 29/39] Turn on editor:eslint

---
 ts/editor/BUILD.bazel      | 16 ++++++++--------
 ts/editor/editable.ts      |  2 +-
 ts/editor/editingArea.ts   |  4 ++++
 ts/editor/index.ts         |  8 ++++++--
 ts/editor/inputHandlers.ts |  4 ++++
 ts/editor/toolbar.ts       |  6 +++++-
 ts/editor/wrap.ts          |  4 ++++
 ts/yarn.lock               |  6 +++---
 8 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index f25d8017b..823918080 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -156,14 +156,14 @@ prettier_test(
     ]),
 )
 
-# eslint_test(
-#     name = "eslint",
-#     srcs = glob(
-#         [
-#             "*.ts",
-#         ],
-#     ),
-# )
+eslint_test(
+    name = "eslint",
+    srcs = glob(
+        [
+            "*.ts",
+        ],
+    ),
+)
 
 svelte_check(
     name = "svelte_check",
diff --git a/ts/editor/editable.ts b/ts/editor/editable.ts
index b67a21b49..680bdf35c 100644
--- a/ts/editor/editable.ts
+++ b/ts/editor/editable.ts
@@ -33,7 +33,7 @@ export class Editable extends HTMLElement {
             : this.innerHTML;
     }
 
-    connectedCallback() {
+    connectedCallback(): void {
         this.setAttribute("contenteditable", "");
     }
 }
diff --git a/ts/editor/editingArea.ts b/ts/editor/editingArea.ts
index 8056fac3d..b5345a630 100644
--- a/ts/editor/editingArea.ts
+++ b/ts/editor/editingArea.ts
@@ -1,6 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+/* eslint
+@typescript-eslint/no-non-null-assertion: "off",
+ */
+
 import type { Editable } from "./editable";
 
 import { updateActiveButtons } from "./toolbar";
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index 413fe3404..b2d638e3d 100644
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@@ -1,6 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+/* eslint
+@typescript-eslint/no-non-null-assertion: "off",
+ */
+
 import { filterHTML } from "html-filter";
 import { updateActiveButtons, disableButtons } from "./toolbar";
 import { setupI18n, ModuleName } from "lib/i18n";
@@ -54,7 +58,7 @@ export function focusField(n: number): void {
 export function focusIfField(x: number, y: number): boolean {
     const elements = document.elementsFromPoint(x, y);
     for (let i = 0; i < elements.length; i++) {
-        let elem = elements[i] as EditingArea;
+        const elem = elements[i] as EditingArea;
         if (elem instanceof EditingArea) {
             elem.focusEditable();
             return true;
@@ -158,7 +162,7 @@ export function setSticky(stickies: boolean[]): void {
     });
 }
 
-export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void {
+export function setFormat(cmd: string, arg?: string, nosave = false): void {
     document.execCommand(cmd, false, arg);
     if (!nosave) {
         saveField(getCurrentField() as EditingArea, "key");
diff --git a/ts/editor/inputHandlers.ts b/ts/editor/inputHandlers.ts
index 8f9043e75..88ccf76f3 100644
--- a/ts/editor/inputHandlers.ts
+++ b/ts/editor/inputHandlers.ts
@@ -1,6 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+/* eslint
+@typescript-eslint/no-non-null-assertion: "off",
+ */
+
 import { updateActiveButtons } from "./toolbar";
 import { EditingArea } from "./editingArea";
 import { caretToEnd, nodeIsElement, getBlockElement } from "./helpers";
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index ec26e26fe..322304f8b 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -1,6 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+/* eslint
+@typescript-eslint/no-non-null-assertion: "off",
+ */
+
 import { disabledKey, nightModeKey } from "components/contextKeys";
 import { writable } from "svelte/store";
 
@@ -27,7 +31,7 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
                 document.documentElement.classList.contains("night-mode")
             );
 
-            toolbarResolve(new EditorToolbar({ target, anchor, context } as any));
+            toolbarResolve(new EditorToolbar({ target, anchor, context }));
         });
     });
 
diff --git a/ts/editor/wrap.ts b/ts/editor/wrap.ts
index c96fc7f8d..4255d4d80 100644
--- a/ts/editor/wrap.ts
+++ b/ts/editor/wrap.ts
@@ -1,6 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+/* eslint
+@typescript-eslint/no-non-null-assertion: "off",
+ */
+
 import { getCurrentField, setFormat } from ".";
 
 function wrappedExceptForWhitespace(text: string, front: string, back: string): string {
diff --git a/ts/yarn.lock b/ts/yarn.lock
index c6f6e35bf..f5f90c5e7 100644
--- a/ts/yarn.lock
+++ b/ts/yarn.lock
@@ -4260,9 +4260,9 @@ svelte2tsx@^0.1.133:
     pascal-case "^3.1.1"
 
 svelte@^3.25.0:
-  version "3.37.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.37.0.tgz#dc7cd24bcc275cdb3f8c684ada89e50489144ccd"
-  integrity sha512-TRF30F4W4+d+Jr2KzUUL1j8Mrpns/WM/WacxYlo5MMb2E5Qy2Pk1Guj6GylxsW9OnKQl1tnF8q3hG/hQ3h6VUA==
+  version "3.38.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5"
+  integrity sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==
 
 symbol-tree@^3.2.4:
   version "3.2.4"

From 15f306950dd1b153976aef280ac6bbb271a7544d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 23:42:25 +0200
Subject: [PATCH 30/39] Use any in toolbar.ts for using context as parameter

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

diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index 322304f8b..4ad858d41 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -3,6 +3,7 @@
 
 /* eslint
 @typescript-eslint/no-non-null-assertion: "off",
+@typescript-eslint/no-explicit-any: "off",
  */
 
 import { disabledKey, nightModeKey } from "components/contextKeys";
@@ -31,7 +32,7 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
                 document.documentElement.classList.contains("night-mode")
             );
 
-            toolbarResolve(new EditorToolbar({ target, anchor, context }));
+            toolbarResolve(new EditorToolbar({ target, anchor, context } as any));
         });
     });
 

From f50d81f787d31a1287c4103d10140ac0228e42ee Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 23:49:59 +0200
Subject: [PATCH 31/39] Fix unused CSS selector issue in graphs introduced by
 updating Svelte

---
 ts/editor/TemplateButtons.svelte | 144 +++++++++++++++----------------
 ts/graphs/HoverColumns.svelte    |   8 +-
 2 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index a80bc3795..003cbfcb7 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -61,87 +61,87 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <ClozeButton />
     </ButtonGroupItem>
 
-    <WithDropdownMenu let:menuId let:createDropdown>
-        <ButtonGroupItem>
+    <ButtonGroupItem>
+        <WithDropdownMenu let:menuId let:createDropdown>
             <IconButton on:mount={createDropdown}>
                 {@html functionIcon}
             </IconButton>
-        </ButtonGroupItem>
 
-        <DropdownMenu id={menuId}>
-            <WithShortcut
-                shortcut="Control+KeyM, KeyM"
-                let:createShortcut
-                let:shortcutLabel>
-                <DropdownItem
-                    on:click={() => wrap('\\(', '\\)')}
-                    on:mount={createShortcut}>
-                    {tr.editingMathjaxInline()}
-                    <span class="ps-1 float-end">{shortcutLabel}</span>
-                </DropdownItem>
-            </WithShortcut>
+            <DropdownMenu id={menuId}>
+                <WithShortcut
+                    shortcut="Control+KeyM, KeyM"
+                    let:createShortcut
+                    let:shortcutLabel>
+                    <DropdownItem
+                        on:click={() => wrap('\\(', '\\)')}
+                        on:mount={createShortcut}>
+                        {tr.editingMathjaxInline()}
+                        <span class="ps-1 float-end">{shortcutLabel}</span>
+                    </DropdownItem>
+                </WithShortcut>
 
-            <WithShortcut
-                shortcut="Control+KeyM, KeyE"
-                let:createShortcut
-                let:shortcutLabel>
-                <DropdownItem
-                    on:click={() => wrap('\\[', '\\]')}
-                    on:mount={createShortcut}>
-                    {tr.editingMathjaxBlock()}
-                    <span class="ps-1 float-end">{shortcutLabel}</span>
-                </DropdownItem>
-            </WithShortcut>
+                <WithShortcut
+                    shortcut="Control+KeyM, KeyE"
+                    let:createShortcut
+                    let:shortcutLabel>
+                    <DropdownItem
+                        on:click={() => wrap('\\[', '\\]')}
+                        on:mount={createShortcut}>
+                        {tr.editingMathjaxBlock()}
+                        <span class="ps-1 float-end">{shortcutLabel}</span>
+                    </DropdownItem>
+                </WithShortcut>
 
-            <WithShortcut
-                shortcut="Control+KeyM, KeyC"
-                let:createShortcut
-                let:shortcutLabel>
-                <DropdownItem
-                    on:click={() => wrap('\\(\\ce{', '}\\)')}
-                    on:mount={createShortcut}>
-                    {tr.editingMathjaxChemistry()}
-                    <span class="ps-1 float-end">{shortcutLabel}</span>
-                </DropdownItem>
-            </WithShortcut>
+                <WithShortcut
+                    shortcut="Control+KeyM, KeyC"
+                    let:createShortcut
+                    let:shortcutLabel>
+                    <DropdownItem
+                        on:click={() => wrap('\\(\\ce{', '}\\)')}
+                        on:mount={createShortcut}>
+                        {tr.editingMathjaxChemistry()}
+                        <span class="ps-1 float-end">{shortcutLabel}</span>
+                    </DropdownItem>
+                </WithShortcut>
 
-            <WithShortcut
-                shortcut="Control+KeyT, KeyT"
-                let:createShortcut
-                let:shortcutLabel>
-                <DropdownItem
-                    on:click={() => wrap('[latex]', '[/latex]')}
-                    on:mount={createShortcut}>
-                    {tr.editingLatex()}
-                    <span class="ps-1 float-end">{shortcutLabel}</span>
-                </DropdownItem>
-            </WithShortcut>
+                <WithShortcut
+                    shortcut="Control+KeyT, KeyT"
+                    let:createShortcut
+                    let:shortcutLabel>
+                    <DropdownItem
+                        on:click={() => wrap('[latex]', '[/latex]')}
+                        on:mount={createShortcut}>
+                        {tr.editingLatex()}
+                        <span class="ps-1 float-end">{shortcutLabel}</span>
+                    </DropdownItem>
+                </WithShortcut>
 
-            <WithShortcut
-                shortcut="Control+KeyT, KeyE"
-                let:createShortcut
-                let:shortcutLabel>
-                <DropdownItem
-                    on:click={() => wrap('[$]', '[/$]')}
-                    on:mount={createShortcut}>
-                    {tr.editingLatexEquation()}
-                    <span class="ps-1 float-end">{shortcutLabel}</span>
-                </DropdownItem>
-            </WithShortcut>
+                <WithShortcut
+                    shortcut="Control+KeyT, KeyE"
+                    let:createShortcut
+                    let:shortcutLabel>
+                    <DropdownItem
+                        on:click={() => wrap('[$]', '[/$]')}
+                        on:mount={createShortcut}>
+                        {tr.editingLatexEquation()}
+                        <span class="ps-1 float-end">{shortcutLabel}</span>
+                    </DropdownItem>
+                </WithShortcut>
 
-            <WithShortcut
-                shortcut="Control+KeyT, KeyM"
-                let:createShortcut
-                let:shortcutLabel>
-                <DropdownItem
-                    on:click={() => wrap('[$$]', '[/$$]')}
-                    on:mount={createShortcut}>
-                    {tr.editingLatexMathEnv()}
-                    <span class="ps-1 float-end">{shortcutLabel}</span>
-                </DropdownItem>
-            </WithShortcut>
-        </DropdownMenu>
-    </WithDropdownMenu>
+                <WithShortcut
+                    shortcut="Control+KeyT, KeyM"
+                    let:createShortcut
+                    let:shortcutLabel>
+                    <DropdownItem
+                        on:click={() => wrap('[$$]', '[/$$]')}
+                        on:mount={createShortcut}>
+                        {tr.editingLatexMathEnv()}
+                        <span class="ps-1 float-end">{shortcutLabel}</span>
+                    </DropdownItem>
+                </WithShortcut>
+            </DropdownMenu>
+        </WithDropdownMenu>
+    </ButtonGroupItem>
 
     <ButtonGroupItem>
         <WithShortcut
diff --git a/ts/graphs/HoverColumns.svelte b/ts/graphs/HoverColumns.svelte
index a6e1433fa..4953761c8 100644
--- a/ts/graphs/HoverColumns.svelte
+++ b/ts/graphs/HoverColumns.svelte
@@ -7,11 +7,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         :global(rect) {
             fill: none;
             pointer-events: all;
+        }
 
-            &:hover {
-                fill: grey;
-                opacity: 0.05;
-            }
+        :global(rect:hover) {
+            fill: grey;
+            opacity: 0.05;
         }
     }
 </style>

From cc02563ca12b10e88246a776f41b627d17c36ae2 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 7 May 2021 02:03:00 +0200
Subject: [PATCH 32/39] Fix Preview tooltip

---
 ts/editor/PreviewButton.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/ts/editor/PreviewButton.svelte b/ts/editor/PreviewButton.svelte
index 159f4e9e0..c82a45bcf 100644
--- a/ts/editor/PreviewButton.svelte
+++ b/ts/editor/PreviewButton.svelte
@@ -12,9 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <WithShortcut shortcut="Control+Shift+KeyP" let:createShortcut let:shortcutLabel>
     <LabelButton
-        tooltip="{`${tr.browsingPreviewSelectedCard({
-            val: 'test',
-        })} (${shortcutLabel})`},"
+        tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })}
         disables={false}
         on:click={() => bridgeCommand('preview')}
         on:mount={createShortcut}>

From de8abebcd1b55598a7a0f676ff8a8a91c1d9d19a Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 7 May 2021 02:12:37 +0200
Subject: [PATCH 33/39] Fix Preview Button after changing from f-string to
 normal string

---
 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 d0c0a308a..72eb654dd 100644
--- a/qt/aqt/browser/browser.py
+++ b/qt/aqt/browser/browser.py
@@ -382,7 +382,7 @@ class Browser(QMainWindow):
 
             editor._links["preview"] = lambda _editor: self.onTogglePreview()
             editor.web.eval(
-                "$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.PreviewButton }}, -1));"
+                "$editorToolbar.then(({ notetypeButtons }) => notetypeButtons.appendButton({ component: editorToolbar.PreviewButton }));"
             )
 
         gui_hooks.editor_did_init.append(add_preview_button)

From 49745e1282cf2afd2892be020f0f9af32e3fd487 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 7 May 2021 02:14:54 +0200
Subject: [PATCH 34/39] Fix module name formatting

---
 ts/editor/index.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index b2d638e3d..eb2980e2c 100644
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@@ -171,7 +171,12 @@ export function setFormat(cmd: string, arg?: string, nosave = false): void {
 }
 
 const i18n = setupI18n({
-    modules: [ModuleName.EDITING, ModuleName.KEYBOARD, ModuleName.ACTIONS, ModuleName.BROWSING],
+    modules: [
+        ModuleName.EDITING,
+        ModuleName.KEYBOARD,
+        ModuleName.ACTIONS,
+        ModuleName.BROWSING,
+    ],
 });
 
 import type EditorToolbar from "./EditorToolbar.svelte";

From 6a804f6775852c4c25151c24c44dd1c13e3925e9 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 7 May 2021 14:22:06 +0200
Subject: [PATCH 35/39] Use json.dumps instead of backticks in editor.py

---
 qt/aqt/editor.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index bc1ba2ac2..3ce48651f 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -145,7 +145,7 @@ class Editor:
         gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
 
         lefttopbtns_defs = [
-            f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.Raw, props: {{ html: `{button}` }} }}, -1));"
+            f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.Raw, props: {{ html: {json.dumps(button)} }} }}, -1));"
             for button in lefttopbtns
         ]
         lefttopbtns_js = "\n".join(lefttopbtns_defs)
@@ -155,7 +155,7 @@ class Editor:
         # legacy filter
         righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
 
-        righttopbtns_defs = ", ".join([f"`{button}`" for button in righttopbtns])
+        righttopbtns_defs = ", ".join([json.dumps(button) for button in righttopbtns])
         righttopbtns_js = (
             f"""
 $editorToolbar.then(({{ toolbar }}) => toolbar.appendGroup({{

From 9e747a57447491cf1e5e7f0d62caedfc31f5d9e8 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 7 May 2021 14:31:08 +0200
Subject: [PATCH 36/39] Rename Detachable.detach to detached

---
 ts/components/ButtonGroupItem.svelte   | 10 +++++-----
 ts/components/ButtonToolbarItem.svelte | 10 +++++-----
 ts/components/Detachable.svelte        |  4 ++--
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/ts/components/ButtonGroupItem.svelte b/ts/components/ButtonGroupItem.svelte
index fc28a13e1..937ef66db 100644
--- a/ts/components/ButtonGroupItem.svelte
+++ b/ts/components/ButtonGroupItem.svelte
@@ -16,7 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let id: string | undefined = undefined;
     export let registration: ButtonRegistration | undefined = undefined;
 
-    let detach_: boolean;
+    let detached: boolean;
     let position_: ButtonPosition;
     let style: string;
 
@@ -41,24 +41,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     if (registration) {
         const { detach, position } = registration;
-        detach.subscribe((value: boolean) => (detach_ = value));
+        detach.subscribe((value: boolean) => (detached = value));
         position.subscribe((value: ButtonPosition) => (position_ = value));
     } else if (hasContext(buttonGroupKey)) {
         const registerComponent = getContext<Register<ButtonRegistration>>(
             buttonGroupKey
         );
         const { detach, position } = registerComponent();
-        detach.subscribe((value: boolean) => (detach_ = value));
+        detach.subscribe((value: boolean) => (detached = value));
         position.subscribe((value: ButtonPosition) => (position_ = value));
     } else {
-        detach_ = false;
+        detached = false;
         position_ = ButtonPosition.Standalone;
     }
 </script>
 
 <!-- div in WithTheming is necessary to preserve item position -->
 <WithTheming {id} {style}>
-    <Detachable detach={detach_}>
+    <Detachable {detached}>
         <slot />
     </Detachable>
 </WithTheming>
diff --git a/ts/components/ButtonToolbarItem.svelte b/ts/components/ButtonToolbarItem.svelte
index 7034d5838..575f5a1ad 100644
--- a/ts/components/ButtonToolbarItem.svelte
+++ b/ts/components/ButtonToolbarItem.svelte
@@ -14,19 +14,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let id: string | undefined = undefined;
     export let registration: ButtonGroupRegistration | undefined = undefined;
 
-    let detach_: boolean;
+    let detached: boolean;
 
     if (registration) {
         const { detach } = registration;
-        detach.subscribe((value: boolean) => (detach_ = value));
+        detach.subscribe((value: boolean) => (detached = value));
     } else if (hasContext(buttonToolbarKey)) {
         const registerComponent = getContext<Register<ButtonGroupRegistration>>(
             buttonToolbarKey
         );
         const { detach } = registerComponent();
-        detach.subscribe((value: boolean) => (detach_ = value));
+        detach.subscribe((value: boolean) => (detached = value));
     } else {
-        detach_ = false;
+        detached = false;
     }
 </script>
 
@@ -38,7 +38,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <!-- div is necessary to preserve item position -->
 <div {id}>
-    <Detachable detach={detach_}>
+    <Detachable {detached}>
         <slot />
     </Detachable>
 </div>
diff --git a/ts/components/Detachable.svelte b/ts/components/Detachable.svelte
index d58037b37..32776bbef 100644
--- a/ts/components/Detachable.svelte
+++ b/ts/components/Detachable.svelte
@@ -3,9 +3,9 @@ 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 detach = false;
+    export let detached = false;
 </script>
 
-{#if !detach}
+{#if !detached}
     <slot />
 {/if}

From 6081a025584c05d9e7497d9e4c7829299c37befb Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 7 May 2021 14:41:31 +0200
Subject: [PATCH 37/39] Use MouseEvent instead of KeyboardEvent in WithShortcut

* otherwise the disabled button will allow it to pass through
---
 ts/components/WithShortcut.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ts/components/WithShortcut.svelte b/ts/components/WithShortcut.svelte
index aab7707a7..75c019435 100644
--- a/ts/components/WithShortcut.svelte
+++ b/ts/components/WithShortcut.svelte
@@ -19,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         const mounted: HTMLButtonElement = detail.button;
         deregister = registerShortcut(
             (event: KeyboardEvent) => {
-                mounted.dispatchEvent(new KeyboardEvent("click", event));
+                mounted.dispatchEvent(new MouseEvent("click", event));
                 event.preventDefault();
             },
             shortcut,

From cf38cb334e54f2e413b07b77866f2394a4100921 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 7 May 2021 15:10:28 +0200
Subject: [PATCH 38/39] Fix remaining errors in editor/*.svelte files

---
 ts/components/DropdownItem.svelte |  4 ++--
 ts/components/WithState.svelte    | 21 +++++++++++----------
 ts/tsconfig.json                  |  4 ++--
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/ts/components/DropdownItem.svelte b/ts/components/DropdownItem.svelte
index 321b7db15..2bac20357 100644
--- a/ts/components/DropdownItem.svelte
+++ b/ts/components/DropdownItem.svelte
@@ -6,11 +6,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
 
-    export let id: string;
+    export let id: string | undefined = undefined;
     let className = "";
     export { className as class };
 
-    export let tooltip: string;
+    export let tooltip: string | undefined = undefined;
 
     let buttonRef: HTMLButtonElement;
 
diff --git a/ts/components/WithState.svelte b/ts/components/WithState.svelte
index 6ae08c72c..3ff94d7a8 100644
--- a/ts/components/WithState.svelte
+++ b/ts/components/WithState.svelte
@@ -5,16 +5,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript" context="module">
     import { writable } from "svelte/store";
 
-    type T = unknown;
-
-    type UpdaterMap = Map<string, (event: Event) => T>;
-    type StateMap = Map<string, T>;
+    type UpdaterMap = Map<string, (event: Event) => boolean>;
+    type StateMap = Map<string, boolean>;
 
     const updaterMap = new Map() as UpdaterMap;
     const stateMap = new Map() as StateMap;
     const stateStore = writable(stateMap);
 
-    function updateAllStateWithCallback(callback: (key: string) => T): void {
+    function updateAllStateWithCallback(callback: (key: string) => boolean): void {
         stateStore.update(
             (map: StateMap): StateMap => {
                 const newMap = new Map() as StateMap;
@@ -29,11 +27,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     export function updateAllState(event: Event): void {
-        updateAllStateWithCallback((key: string): T => updaterMap.get(key)!(event));
+        updateAllStateWithCallback((key: string): boolean =>
+            updaterMap.get(key)!(event)
+        );
     }
 
-    export function resetAllState(state: T): void {
-        updateAllStateWithCallback((): T => state);
+    export function resetAllState(state: boolean): void {
+        updateAllStateWithCallback((): boolean => state);
     }
 
     function updateStateByKey(key: string, event: Event): void {
@@ -48,8 +48,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <script lang="typescript">
     export let key: string;
-    export let update: (event: Event) => T;
-    export let state: T;
+    export let update: (event: Event) => boolean;
+
+    let state: boolean = false;
 
     updaterMap.set(key, update);
 
diff --git a/ts/tsconfig.json b/ts/tsconfig.json
index 6c59e78df..39ff8565a 100644
--- a/ts/tsconfig.json
+++ b/ts/tsconfig.json
@@ -7,9 +7,9 @@
         "baseUrl": ".",
         "paths": {
             "lib/*": ["../bazel-bin/ts/lib/*"],
-            "sveltelib/*": ["../bazel-bin/ts/sveltelib/*"],
-            "components/*": ["../bazel-bin/ts/components/*"],
             "html-filter/*": ["../bazel-bin/ts/html-filter/*"]
+            /* "sveltelib/*": ["../bazel-bin/ts/sveltelib/*"], */
+            /* "components/*": ["../bazel-bin/ts/components/*"], */
         },
         "importsNotUsedAsValues": "error",
         "outDir": "dist",

From 8b0c6ba5dfb0233b32f5f156ca6e4073fb0d90f9 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 7 May 2021 16:50:17 +0200
Subject: [PATCH 39/39] Check for id when inserting dynamic elements

* I'm not sure it behaved, if there were multiple elements
  inserted by different add-ons into the same container
---
 qt/aqt/browser/browser.py     |  2 +-
 ts/components/registration.ts | 23 +++++++++++++++--------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/qt/aqt/browser/browser.py b/qt/aqt/browser/browser.py
index 72eb654dd..47eb23bb6 100644
--- a/qt/aqt/browser/browser.py
+++ b/qt/aqt/browser/browser.py
@@ -382,7 +382,7 @@ class Browser(QMainWindow):
 
             editor._links["preview"] = lambda _editor: self.onTogglePreview()
             editor.web.eval(
-                "$editorToolbar.then(({ notetypeButtons }) => notetypeButtons.appendButton({ component: editorToolbar.PreviewButton }));"
+                "$editorToolbar.then(({ notetypeButtons }) => notetypeButtons.appendButton({ component: editorToolbar.PreviewButton, id: 'preview' }));"
             )
 
         gui_hooks.editor_did_init.append(add_preview_button)
diff --git a/ts/components/registration.ts b/ts/components/registration.ts
index 8faf67be1..06f03c009 100644
--- a/ts/components/registration.ts
+++ b/ts/components/registration.ts
@@ -8,7 +8,7 @@ import { find } from "./identifier";
 
 export interface SvelteComponent {
     component: SvelteComponentTyped;
-    id: string | undefined;
+    id: string;
     props: Record<string, unknown> | undefined;
 }
 
@@ -32,6 +32,10 @@ export interface DynamicRegistrationAPI<T> {
     ) => void;
 }
 
+export function nodeIsElement(node: Node): node is Element {
+    return node.nodeType === Node.ELEMENT_NODE;
+}
+
 export function makeInterface<T>(makeRegistration: () => T): RegistrationAPI<T> {
     const registrations: T[] = [];
     const items = writable(registrations);
@@ -60,18 +64,21 @@ export function makeInterface<T>(makeRegistration: () => T): RegistrationAPI<T>
                 observer: MutationObserver
             ): void => {
                 for (const mutation of mutations) {
-                    const addedNode = mutation.addedNodes[0];
+                    for (const addedNode of mutation.addedNodes) {
+                        if (
+                            nodeIsElement(addedNode) &&
+                            (!component.id || addedNode.id === component.id)
+                        ) {
+                            const index = add(addedNode, elementRef);
 
-                    if (addedNode.nodeType === Node.ELEMENT_NODE) {
-                        const index = add(addedNode as Element, elementRef);
+                            if (index >= 0) {
+                                registerComponent(index, registration);
+                            }
 
-                        if (index >= 0) {
-                            registerComponent(index, registration);
+                            return observer.disconnect();
                         }
                     }
                 }
-
-                observer.disconnect();
             };
 
             const observer = new MutationObserver(callback);