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] 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 }));
         });