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