From f534dbb8e54a2e8b47e055b91124b0a65420db1d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 24 Jan 2022 02:43:09 +0100
Subject: [PATCH] Separate input components into their own directories / Remove
 `WithShortcut` (#1613)

* Put PlainTextInput into its own directory

* Create a directory for RichTextInput

* Create editor-toolbar directory

* Move PreviewButton into editor-toolbar

* The time to refactor this is not quite yet here

* Create tag-editor directory

* Remove some of the uses of WithShortcut

* Remove all uses of WithShortcut from editor package

* Remove last uses of WithShortcut

* Fix typo
---
 ts/change-notetype/SaveButton.svelte          |  21 +--
 ts/components/Shortcut.svelte                 |  11 +-
 ts/components/WithShortcut.svelte             |  25 ---
 ts/deck-options/SaveButton.svelte             |  21 +--
 ts/editor/ColorButtons.svelte                 | 107 -----------
 ts/editor/CommandIconButton.svelte            |  82 --------
 ts/editor/MathjaxElement.svelte               |   2 +-
 ts/editor/NoteTypeButtons.svelte              |  39 ----
 ts/editor/OldEditorAdapter.svelte             |  14 +-
 ts/editor/PreviewButton.svelte                |  30 ---
 ts/editor/SelectedTagBadge.svelte             |  72 -------
 ts/editor/TemplateButtons.svelte              | 178 ------------------
 ts/editor/base.ts                             |   6 +-
 .../{ => editor-toolbar}/AddonButtons.svelte  |   4 +-
 .../{ => editor-toolbar}/BoldButton.svelte    |  18 +-
 .../{ => editor-toolbar}/ClozeButton.svelte   |  37 ++--
 ts/editor/editor-toolbar/ColorButtons.svelte  | 121 ++++++++++++
 .../editor-toolbar/CommandIconButton.svelte   |  66 +++++++
 .../{ => editor-toolbar}/EditorToolbar.svelte |  14 +-
 .../FormatBlockButtons.svelte                 |  82 ++++----
 .../FormatInlineButtons.svelte                |  12 +-
 .../{ => editor-toolbar}/ItalicButton.svelte  |  18 +-
 ts/editor/editor-toolbar/LatexButton.svelte   |  79 ++++++++
 .../editor-toolbar/NoteTypeButtons.svelte     |  41 ++++
 ts/editor/editor-toolbar/PreviewButton.svelte |  34 ++++
 .../editor-toolbar/TemplateButtons.svelte     |  70 +++++++
 .../UnderlineButton.svelte                    |  18 +-
 .../WithColorHelper.svelte                    |   0
 ts/editor/editor-toolbar/icons.ts             |  34 ++++
 ts/editor/editor-toolbar/index.ts             |   5 +
 ts/editor/icons.ts                            |  37 ----
 ts/editor/image-overlay/ImageHandle.svelte    |   8 +-
 .../mathjax-overlay/MathjaxHandle.svelte      |  12 +-
 .../PlainTextInput.svelte                     |  16 +-
 ts/editor/plain-text-input/index.ts           |   8 +
 .../{ => rich-text-input}/CustomStyles.svelte |   0
 .../RichTextInput.svelte                      |  38 ++--
 .../RichTextStyles.svelte                     |   9 +-
 .../{ => rich-text-input}/SetContext.svelte   |   0
 .../{ => rich-text-input}/StyleLink.svelte    |   0
 .../{ => rich-text-input}/StyleTag.svelte     |   0
 ts/editor/rich-text-input/index.ts            |   5 +
 ts/editor/surround.ts                         |   2 +-
 ts/editor/{ => tag-editor}/AddTagBadge.svelte |  39 ++--
 .../{ => tag-editor}/AutocompleteItem.svelte  |   2 +-
 ts/editor/tag-editor/SelectedTagBadge.svelte  |  79 ++++++++
 ts/editor/{ => tag-editor}/Tag.svelte         |   2 +-
 .../{ => tag-editor}/TagDeleteBadge.svelte    |   2 +-
 ts/editor/{ => tag-editor}/TagEditMode.svelte |   0
 ts/editor/{ => tag-editor}/TagEditor.svelte   |  10 +-
 ts/editor/{ => tag-editor}/TagInput.svelte    |   0
 .../{ => tag-editor}/TagOptionsBadge.svelte   |   2 +-
 .../{ => tag-editor}/TagStickyBadge.svelte    |   2 +-
 .../{ => tag-editor}/TagWithTooltip.svelte    |   6 +-
 .../{ => tag-editor}/WithAutocomplete.svelte  |   6 +-
 ts/editor/tag-editor/icons.ts                 |   9 +
 ts/editor/tag-editor/index.ts                 |   4 +
 ts/editor/{ => tag-editor}/tags.ts            |   0
 ts/editor/tsconfig.json                       |  10 +-
 59 files changed, 779 insertions(+), 790 deletions(-)
 delete mode 100644 ts/components/WithShortcut.svelte
 delete mode 100644 ts/editor/ColorButtons.svelte
 delete mode 100644 ts/editor/CommandIconButton.svelte
 delete mode 100644 ts/editor/NoteTypeButtons.svelte
 delete mode 100644 ts/editor/PreviewButton.svelte
 delete mode 100644 ts/editor/SelectedTagBadge.svelte
 delete mode 100644 ts/editor/TemplateButtons.svelte
 rename ts/editor/{ => editor-toolbar}/AddonButtons.svelte (71%)
 rename ts/editor/{ => editor-toolbar}/BoldButton.svelte (81%)
 rename ts/editor/{ => editor-toolbar}/ClozeButton.svelte (66%)
 create mode 100644 ts/editor/editor-toolbar/ColorButtons.svelte
 create mode 100644 ts/editor/editor-toolbar/CommandIconButton.svelte
 rename ts/editor/{ => editor-toolbar}/EditorToolbar.svelte (84%)
 rename ts/editor/{ => editor-toolbar}/FormatBlockButtons.svelte (63%)
 rename ts/editor/{ => editor-toolbar}/FormatInlineButtons.svelte (82%)
 rename ts/editor/{ => editor-toolbar}/ItalicButton.svelte (81%)
 create mode 100644 ts/editor/editor-toolbar/LatexButton.svelte
 create mode 100644 ts/editor/editor-toolbar/NoteTypeButtons.svelte
 create mode 100644 ts/editor/editor-toolbar/PreviewButton.svelte
 create mode 100644 ts/editor/editor-toolbar/TemplateButtons.svelte
 rename ts/editor/{ => editor-toolbar}/UnderlineButton.svelte (77%)
 rename ts/editor/{ => editor-toolbar}/WithColorHelper.svelte (100%)
 create mode 100644 ts/editor/editor-toolbar/icons.ts
 create mode 100644 ts/editor/editor-toolbar/index.ts
 rename ts/editor/{ => plain-text-input}/PlainTextInput.svelte (88%)
 create mode 100644 ts/editor/plain-text-input/index.ts
 rename ts/editor/{ => rich-text-input}/CustomStyles.svelte (100%)
 rename ts/editor/{ => rich-text-input}/RichTextInput.svelte (88%)
 rename ts/editor/{ => rich-text-input}/RichTextStyles.svelte (96%)
 rename ts/editor/{ => rich-text-input}/SetContext.svelte (100%)
 rename ts/editor/{ => rich-text-input}/StyleLink.svelte (100%)
 rename ts/editor/{ => rich-text-input}/StyleTag.svelte (100%)
 create mode 100644 ts/editor/rich-text-input/index.ts
 rename ts/editor/{ => tag-editor}/AddTagBadge.svelte (54%)
 rename ts/editor/{ => tag-editor}/AutocompleteItem.svelte (97%)
 create mode 100644 ts/editor/tag-editor/SelectedTagBadge.svelte
 rename ts/editor/{ => tag-editor}/Tag.svelte (97%)
 rename ts/editor/{ => tag-editor}/TagDeleteBadge.svelte (87%)
 rename ts/editor/{ => tag-editor}/TagEditMode.svelte (100%)
 rename ts/editor/{ => tag-editor}/TagEditor.svelte (98%)
 rename ts/editor/{ => tag-editor}/TagInput.svelte (100%)
 rename ts/editor/{ => tag-editor}/TagOptionsBadge.svelte (98%)
 rename ts/editor/{ => tag-editor}/TagStickyBadge.svelte (87%)
 rename ts/editor/{ => tag-editor}/TagWithTooltip.svelte (94%)
 rename ts/editor/{ => tag-editor}/WithAutocomplete.svelte (97%)
 create mode 100644 ts/editor/tag-editor/icons.ts
 create mode 100644 ts/editor/tag-editor/index.ts
 rename ts/editor/{ => tag-editor}/tags.ts (100%)

diff --git a/ts/change-notetype/SaveButton.svelte b/ts/change-notetype/SaveButton.svelte
index 83b2e94c9..e5f79007b 100644
--- a/ts/change-notetype/SaveButton.svelte
+++ b/ts/change-notetype/SaveButton.svelte
@@ -5,13 +5,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "../lib/ftl";
     import type { ChangeNotetypeState } from "./lib";
-    import { withButton } from "../components/helpers";
+    import { getPlatformString } from "../lib/shortcuts";
 
     import ButtonGroup from "../components/ButtonGroup.svelte";
     import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
-
     import LabelButton from "../components/LabelButton.svelte";
-    import WithShortcut from "../components/WithShortcut.svelte";
+    import Shortcut from "../components/Shortcut.svelte";
 
     export let state: ChangeNotetypeState;
 
@@ -21,17 +20,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
         state.save();
     }
+
+    const keyCombination = "Control+Enter";
 </script>
 
 <ButtonGroup>
     <ButtonGroupItem>
-        <WithShortcut shortcut={"Control+Enter"} let:createShortcut let:shortcutLabel>
-            <LabelButton
-                theme="primary"
-                on:click={() => save()}
-                tooltip={shortcutLabel}
-                on:mount={withButton(createShortcut)}>{tr.actionsSave()}</LabelButton
-            >
-        </WithShortcut>
+        <LabelButton
+            theme="primary"
+            tooltip={getPlatformString(keyCombination)}
+            on:click={save}>{tr.actionsSave()}</LabelButton
+        >
+        <Shortcut {keyCombination} on:action={save} />
     </ButtonGroupItem>
 </ButtonGroup>
diff --git a/ts/components/Shortcut.svelte b/ts/components/Shortcut.svelte
index 42e54ba4b..8547cb964 100644
--- a/ts/components/Shortcut.svelte
+++ b/ts/components/Shortcut.svelte
@@ -5,17 +5,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { createEventDispatcher, onMount } from "svelte";
     import { registerShortcut } from "../lib/shortcuts";
+    import { preventDefault } from "../lib/events";
 
     export let keyCombination: string;
-    export let target: EventTarget | Document = document;
 
     const dispatch = createEventDispatcher();
 
     onMount(() =>
-        registerShortcut(
-            (event: KeyboardEvent) => dispatch("action", { originalEvent: event }),
-            keyCombination,
-            target as any,
-        ),
+        registerShortcut((event: KeyboardEvent) => {
+            preventDefault(event);
+            dispatch("action", { originalEvent: event });
+        }, keyCombination),
     );
 </script>
diff --git a/ts/components/WithShortcut.svelte b/ts/components/WithShortcut.svelte
deleted file mode 100644
index 369f5b1cf..000000000
--- a/ts/components/WithShortcut.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import { onDestroy } from "svelte";
-    import { registerShortcut, getPlatformString } from "../lib/shortcuts";
-
-    export let shortcut: string;
-
-    const shortcutLabel = getPlatformString(shortcut);
-
-    let deregister: () => void;
-
-    function createShortcut(element: HTMLElement): void {
-        deregister = registerShortcut((event: KeyboardEvent) => {
-            element.dispatchEvent(new MouseEvent("click", event));
-            event.preventDefault();
-        }, shortcut);
-    }
-
-    onDestroy(() => deregister());
-</script>
-
-<slot {createShortcut} {shortcutLabel} />
diff --git a/ts/deck-options/SaveButton.svelte b/ts/deck-options/SaveButton.svelte
index fca32e7b8..790ab50db 100644
--- a/ts/deck-options/SaveButton.svelte
+++ b/ts/deck-options/SaveButton.svelte
@@ -7,7 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { createEventDispatcher } from "svelte";
     import type { DeckOptionsState } from "./lib";
     import type Dropdown from "bootstrap/js/dist/dropdown";
-    import { withButton } from "../components/helpers";
+    import { getPlatformString } from "../lib/shortcuts";
     import { withCollapsedWhitespace } from "../lib/i18n";
 
     import ButtonGroup from "../components/ButtonGroup.svelte";
@@ -18,7 +18,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import DropdownItem from "../components/DropdownItem.svelte";
     import DropdownDivider from "../components/DropdownDivider.svelte";
     import WithDropdown from "../components/WithDropdown.svelte";
-    import WithShortcut from "../components/WithShortcut.svelte";
+    import Shortcut from "../components/Shortcut.svelte";
 
     const dispatch = createEventDispatcher();
 
@@ -58,19 +58,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     let dropdown: Dropdown;
+    const saveKeyCombination = "Control+Enter";
 </script>
 
 <ButtonGroup>
     <ButtonGroupItem>
-        <WithShortcut shortcut="Control+Enter" let:createShortcut let:shortcutLabel>
-            <LabelButton
-                theme="primary"
-                on:click={() => save(false)}
-                tooltip={shortcutLabel}
-                on:mount={withButton(createShortcut)}
-                >{tr.deckConfigSaveButton()}</LabelButton
-            >
-        </WithShortcut>
+        <LabelButton
+            theme="primary"
+            on:click={() => save(false)}
+            tooltip={getPlatformString(saveKeyCombination)}
+            >{tr.deckConfigSaveButton()}</LabelButton
+        >
+        <Shortcut keyCombination={saveKeyCombination} on:click={() => save(false)} />
     </ButtonGroupItem>
 
     <ButtonGroupItem>
diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
deleted file mode 100644
index 600ad54b7..000000000
--- a/ts/editor/ColorButtons.svelte
+++ /dev/null
@@ -1,107 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import ButtonGroup from "../components/ButtonGroup.svelte";
-    import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
-    import IconButton from "../components/IconButton.svelte";
-    import ColorPicker from "../components/ColorPicker.svelte";
-    import WithShortcut from "../components/WithShortcut.svelte";
-    import WithColorHelper from "./WithColorHelper.svelte";
-
-    import * as tr from "../lib/ftl";
-    import { bridgeCommand } from "../lib/bridgecommand";
-    import { withButton } from "../components/helpers";
-    import { textColorIcon, highlightColorIcon, arrowIcon } from "./icons";
-    import { execCommand } from "./helpers";
-    import { getNoteEditor } from "./OldEditorAdapter.svelte";
-
-    export let api = {};
-    export let textColor: string;
-    export let highlightColor: string;
-
-    $: forecolorWrap = wrapWithForecolor(textColor);
-    $: backcolorWrap = wrapWithBackcolor(highlightColor);
-
-    const wrapWithForecolor = (color: string) => () => {
-        execCommand("forecolor", false, color);
-    };
-
-    const wrapWithBackcolor = (color: string) => () => {
-        execCommand("backcolor", false, color);
-    };
-
-    const { focusInRichText } = getNoteEditor();
-    $: disabled = !$focusInRichText;
-</script>
-
-<ButtonGroup {api}>
-    <WithColorHelper color={textColor} let:colorHelperIcon let:setColor>
-        <ButtonGroupItem>
-            <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
-                <IconButton
-                    tooltip="{tr.editingSetTextColor()} ({shortcutLabel})"
-                    {disabled}
-                    on:click={forecolorWrap}
-                    on:mount={withButton(createShortcut)}
-                >
-                    {@html textColorIcon}
-                    {@html colorHelperIcon}
-                </IconButton>
-            </WithShortcut>
-        </ButtonGroupItem>
-
-        <ButtonGroupItem>
-            <WithShortcut shortcut={"F8"} let:createShortcut let:shortcutLabel>
-                <IconButton
-                    tooltip="{tr.editingChangeColor()} ({shortcutLabel})"
-                    {disabled}
-                    widthMultiplier={0.5}
-                >
-                    {@html arrowIcon}
-                    <ColorPicker
-                        on:change={(event) => {
-                            const textColor = setColor(event);
-                            bridgeCommand(`lastTextColor:${textColor}`);
-                            forecolorWrap = wrapWithForecolor(setColor(event));
-                            forecolorWrap();
-                        }}
-                        on:mount={withButton(createShortcut)}
-                    />
-                </IconButton>
-            </WithShortcut>
-        </ButtonGroupItem>
-    </WithColorHelper>
-
-    <WithColorHelper color={highlightColor} let:colorHelperIcon let:setColor>
-        <ButtonGroupItem>
-            <IconButton
-                tooltip={tr.editingSetTextHighlightColor()}
-                {disabled}
-                on:click={backcolorWrap}
-            >
-                {@html highlightColorIcon}
-                {@html colorHelperIcon}
-            </IconButton>
-        </ButtonGroupItem>
-
-        <ButtonGroupItem>
-            <IconButton
-                tooltip={tr.editingChangeColor()}
-                widthMultiplier={0.5}
-                {disabled}
-            >
-                {@html arrowIcon}
-                <ColorPicker
-                    on:change={(event) => {
-                        const highlightColor = setColor(event);
-                        bridgeCommand(`lastHighlightColor:${highlightColor}`);
-                        backcolorWrap = wrapWithBackcolor(highlightColor);
-                        backcolorWrap();
-                    }}
-                />
-            </IconButton>
-        </ButtonGroupItem>
-    </WithColorHelper>
-</ButtonGroup>
diff --git a/ts/editor/CommandIconButton.svelte b/ts/editor/CommandIconButton.svelte
deleted file mode 100644
index 4404b7c8d..000000000
--- a/ts/editor/CommandIconButton.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import IconButton from "../components/IconButton.svelte";
-    import WithShortcut from "../components/WithShortcut.svelte";
-    import WithState from "../components/WithState.svelte";
-
-    import { withButton } from "../components/helpers";
-    import { execCommand, queryCommandState } from "./helpers";
-    import { getNoteEditor } from "./OldEditorAdapter.svelte";
-
-    export let key: string;
-    export let tooltip: string;
-    export let shortcut: string = "";
-
-    export let withoutShortcut = false;
-    export let withoutState = false;
-
-    const { focusInRichText } = getNoteEditor();
-
-    $: disabled = !$focusInRichText;
-</script>
-
-{#if withoutShortcut && withoutState}
-    <IconButton {tooltip} {disabled} on:click={() => execCommand(key)}>
-        <slot />
-    </IconButton>
-{:else if withoutShortcut}
-    <WithState
-        {key}
-        update={async () => queryCommandState(key)}
-        let:state={active}
-        let:updateState
-    >
-        <IconButton
-            {tooltip}
-            {active}
-            {disabled}
-            on:click={(event) => {
-                execCommand(key);
-                updateState(event);
-            }}
-        >
-            <slot />
-        </IconButton>
-    </WithState>
-{:else if withoutState}
-    <WithShortcut {shortcut} let:createShortcut let:shortcutLabel>
-        <IconButton
-            tooltip="{tooltip} ({shortcutLabel})"
-            {disabled}
-            on:click={() => execCommand(key)}
-            on:mount={withButton(createShortcut)}
-        >
-            <slot />
-        </IconButton>
-    </WithShortcut>
-{:else}
-    <WithShortcut {shortcut} let:createShortcut let:shortcutLabel>
-        <WithState
-            {key}
-            update={async () => queryCommandState(key)}
-            let:state={active}
-            let:updateState
-        >
-            <IconButton
-                tooltip="{tooltip} ({shortcutLabel})"
-                {active}
-                {disabled}
-                on:click={(event) => {
-                    execCommand(key);
-                    updateState(event);
-                }}
-                on:mount={withButton(createShortcut)}
-            >
-                <slot />
-            </IconButton>
-        </WithState>
-    </WithShortcut>
-{/if}
diff --git a/ts/editor/MathjaxElement.svelte b/ts/editor/MathjaxElement.svelte
index 8e6794248..774f42222 100644
--- a/ts/editor/MathjaxElement.svelte
+++ b/ts/editor/MathjaxElement.svelte
@@ -9,7 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const decoratedElements = getDecoratedElements();
     decoratedElements.push(Mathjax);
 
-    import { parsingInstructions } from "./PlainTextInput.svelte";
+    import { parsingInstructions } from "./plain-text-input";
 
     parsingInstructions.push("<style>anki-mathjax { white-space: pre; }</style>");
 </script>
diff --git a/ts/editor/NoteTypeButtons.svelte b/ts/editor/NoteTypeButtons.svelte
deleted file mode 100644
index a95e4e768..000000000
--- a/ts/editor/NoteTypeButtons.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import { bridgeCommand } from "../lib/bridgecommand";
-    import * as tr from "../lib/ftl";
-    import { withButton } from "../components/helpers";
-
-    import ButtonGroup from "../components/ButtonGroup.svelte";
-    import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
-    import LabelButton from "../components/LabelButton.svelte";
-    import WithShortcut from "../components/WithShortcut.svelte";
-
-    export let api = {};
-</script>
-
-<ButtonGroup {api}>
-    <ButtonGroupItem>
-        <LabelButton
-            tooltip={tr.editingCustomizeFields()}
-            on:click={() => bridgeCommand("fields")}
-        >
-            {tr.editingFields()}...
-        </LabelButton>
-    </ButtonGroupItem>
-
-    <ButtonGroupItem>
-        <WithShortcut shortcut={"Control+L"} let:createShortcut let:shortcutLabel>
-            <LabelButton
-                tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
-                on:click={() => bridgeCommand("cards")}
-                on:mount={withButton(createShortcut)}
-            >
-                {tr.editingCards()}...
-            </LabelButton>
-        </WithShortcut>
-    </ButtonGroupItem>
-</ButtonGroup>
diff --git a/ts/editor/OldEditorAdapter.svelte b/ts/editor/OldEditorAdapter.svelte
index 5cacd0e67..1a5ea8099 100644
--- a/ts/editor/OldEditorAdapter.svelte
+++ b/ts/editor/OldEditorAdapter.svelte
@@ -4,9 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script context="module" lang="ts">
     import type { EditorFieldAPI } from "./EditorField.svelte";
-    import type { RichTextInputAPI } from "./RichTextInput.svelte";
-    import type { PlainTextInputAPI } from "./PlainTextInput.svelte";
-    import type { EditorToolbarAPI } from "./EditorToolbar.svelte";
+    import type { RichTextInputAPI } from "./rich-text-input";
+    import type { PlainTextInputAPI } from "./plain-text-input";
+    import type { EditorToolbarAPI } from "./editor-toolbar";
 
     import contextProperty from "../sveltelib/context-property";
     import { writable, get } from "svelte/store";
@@ -34,19 +34,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Fields from "./Fields.svelte";
     import EditorField from "./EditorField.svelte";
     import type { FieldData } from "./EditorField.svelte";
-    import TagEditor from "./TagEditor.svelte";
+    import { TagEditor } from "./tag-editor";
 
-    import EditorToolbar from "./EditorToolbar.svelte";
+    import { EditorToolbar } from "./editor-toolbar";
     import Notification from "./Notification.svelte";
     import Absolute from "../components/Absolute.svelte";
     import Badge from "../components/Badge.svelte";
     import DuplicateLink from "./DuplicateLink.svelte";
 
     import DecoratedElements from "./DecoratedElements.svelte";
-    import RichTextInput from "./RichTextInput.svelte";
+    import { RichTextInput } from "./rich-text-input";
     import { MathjaxHandle } from "./mathjax-overlay";
     import { ImageHandle } from "./image-overlay";
-    import PlainTextInput from "./PlainTextInput.svelte";
+    import { PlainTextInput } from "./plain-text-input";
     import MathjaxElement from "./MathjaxElement.svelte";
     import FrameElement from "./FrameElement.svelte";
 
diff --git a/ts/editor/PreviewButton.svelte b/ts/editor/PreviewButton.svelte
deleted file mode 100644
index 4e494183c..000000000
--- a/ts/editor/PreviewButton.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script context="module" lang="ts">
-    import { writable } from "svelte/store";
-
-    const active = writable(false);
-    export const togglePreviewButtonState = (state: boolean) => active.set(state);
-</script>
-
-<script lang="ts">
-    import { bridgeCommand } from "../lib/bridgecommand";
-    import * as tr from "../lib/ftl";
-    import { withButton } from "../components/helpers";
-
-    import WithShortcut from "../components/WithShortcut.svelte";
-    import LabelButton from "../components/LabelButton.svelte";
-</script>
-
-<WithShortcut shortcut={"Control+Shift+P"} let:createShortcut let:shortcutLabel>
-    <LabelButton
-        tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })}
-        active={$active}
-        on:click={() => bridgeCommand("preview")}
-        on:mount={withButton(createShortcut)}
-    >
-        {tr.actionsPreview()}
-    </LabelButton>
-</WithShortcut>
diff --git a/ts/editor/SelectedTagBadge.svelte b/ts/editor/SelectedTagBadge.svelte
deleted file mode 100644
index 795ad3a81..000000000
--- a/ts/editor/SelectedTagBadge.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import { createEventDispatcher } from "svelte";
-
-    import Badge from "../components/Badge.svelte";
-    import WithDropdown from "../components/WithDropdown.svelte";
-    import WithShortcut from "../components/WithShortcut.svelte";
-    import DropdownMenu from "../components/DropdownMenu.svelte";
-    import DropdownItem from "../components/DropdownItem.svelte";
-
-    import { withSpan, withButton } from "../components/helpers";
-    import { dotsIcon } from "./icons";
-
-    const dispatch = createEventDispatcher();
-
-    const allLabel = "Select all tags";
-    const copyLabel = "Copy tags";
-    const removeLabel = "Remove tags";
-</script>
-
-<WithDropdown let:createDropdown>
-    <div class="more-icon">
-        <Badge class="me-1" on:mount={withSpan(createDropdown)}>{@html dotsIcon}</Badge>
-
-        <DropdownMenu>
-            <WithShortcut shortcut="Control+A" let:createShortcut let:shortcutLabel>
-                <DropdownItem
-                    on:click={(event) => {
-                        dispatch("tagselectall");
-                        event.stopImmediatePropagation();
-                    }}
-                    on:mount={withButton(createShortcut)}
-                    >{allLabel} ({shortcutLabel})</DropdownItem
-                >
-            </WithShortcut>
-            <WithShortcut shortcut="Control+C" let:createShortcut let:shortcutLabel>
-                <DropdownItem
-                    on:click={() => dispatch("tagcopy")}
-                    on:mount={withButton(createShortcut)}
-                    >{copyLabel} ({shortcutLabel})</DropdownItem
-                >
-            </WithShortcut>
-            <WithShortcut shortcut="Backspace" let:createShortcut let:shortcutLabel>
-                <DropdownItem
-                    on:click={() => dispatch("tagdelete")}
-                    on:mount={withButton(createShortcut)}
-                    >{removeLabel} ({shortcutLabel})</DropdownItem
-                >
-            </WithShortcut>
-        </DropdownMenu>
-    </div>
-</WithDropdown>
-
-<style lang="scss">
-    .more-icon {
-        line-height: 1;
-
-        :global(svg) {
-            padding-bottom: 2px;
-            cursor: pointer;
-            fill: currentColor;
-            opacity: 0.6;
-        }
-
-        :global(svg:hover) {
-            opacity: 1;
-        }
-    }
-</style>
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
deleted file mode 100644
index cd7683786..000000000
--- a/ts/editor/TemplateButtons.svelte
+++ /dev/null
@@ -1,178 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import ButtonGroup from "../components/ButtonGroup.svelte";
-    import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
-    import IconButton from "../components/IconButton.svelte";
-    import DropdownMenu from "../components/DropdownMenu.svelte";
-    import DropdownItem from "../components/DropdownItem.svelte";
-    import WithDropdown from "../components/WithDropdown.svelte";
-    import WithShortcut from "../components/WithShortcut.svelte";
-    import ClozeButton from "./ClozeButton.svelte";
-
-    import * as tr from "../lib/ftl";
-    import { bridgeCommand } from "../lib/bridgecommand";
-    import { wrapInternal } from "../lib/wrap";
-    import { getNoteEditor } from "./OldEditorAdapter.svelte";
-    import { withButton } from "../components/helpers";
-    import { paperclipIcon, micIcon, functionIcon } from "./icons";
-    import type { RichTextInputAPI } from "./RichTextInput.svelte";
-
-    export let api = {};
-    const { focusInRichText, activeInput } = getNoteEditor();
-
-    function onAttachment(): void {
-        bridgeCommand("attach");
-    }
-
-    function onRecord(): void {
-        bridgeCommand("record");
-    }
-
-    $: richTextAPI = $activeInput as RichTextInputAPI;
-    $: disabled = !$focusInRichText;
-
-    async function surround(front: string, back: string): Promise<void> {
-        const element = await richTextAPI.element;
-        wrapInternal(element, front, back, false);
-    }
-</script>
-
-<ButtonGroup {api}>
-    <ButtonGroupItem>
-        <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
-            <IconButton
-                tooltip="{tr.editingAttachPicturesaudiovideo} ({shortcutLabel})"
-                iconSize={70}
-                {disabled}
-                on:click={onAttachment}
-                on:mount={withButton(createShortcut)}
-            >
-                {@html paperclipIcon}
-            </IconButton>
-        </WithShortcut>
-    </ButtonGroupItem>
-
-    <ButtonGroupItem>
-        <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
-            <IconButton
-                tooltip="{tr.editingRecordAudio()} ({shortcutLabel})"
-                iconSize={70}
-                {disabled}
-                on:click={onRecord}
-                on:mount={withButton(createShortcut)}
-            >
-                {@html micIcon}
-            </IconButton>
-        </WithShortcut>
-    </ButtonGroupItem>
-
-    <ButtonGroupItem id="cloze">
-        <ClozeButton />
-    </ButtonGroupItem>
-
-    <ButtonGroupItem>
-        <WithDropdown let:createDropdown>
-            <IconButton {disabled} on:mount={withButton(createDropdown)}>
-                {@html functionIcon}
-            </IconButton>
-
-            <DropdownMenu>
-                <WithShortcut
-                    shortcut="Control+M, M"
-                    let:createShortcut
-                    let:shortcutLabel
-                >
-                    <DropdownItem
-                        on:click={() =>
-                            surround("<anki-mathjax focusonmount>", "</anki-mathjax>")}
-                        on:mount={withButton(createShortcut)}
-                    >
-                        {tr.editingMathjaxInline()}
-                        <span class="ps-1 float-end">{shortcutLabel}</span>
-                    </DropdownItem>
-                </WithShortcut>
-
-                <WithShortcut
-                    shortcut="Control+M, E"
-                    let:createShortcut
-                    let:shortcutLabel
-                >
-                    <DropdownItem
-                        on:click={() =>
-                            surround(
-                                '<anki-mathjax block="true" focusonmount>',
-                                "</anki-matjax>",
-                            )}
-                        on:mount={withButton(createShortcut)}
-                    >
-                        {tr.editingMathjaxBlock()}
-                        <span class="ps-1 float-end">{shortcutLabel}</span>
-                    </DropdownItem>
-                </WithShortcut>
-
-                <WithShortcut
-                    shortcut="Control+M, C"
-                    let:createShortcut
-                    let:shortcutLabel
-                >
-                    <DropdownItem
-                        on:click={() =>
-                            surround(
-                                "<anki-mathjax focusonmount>\\ce{",
-                                "}</anki-mathjax>",
-                            )}
-                        on:mount={withButton(createShortcut)}
-                    >
-                        {tr.editingMathjaxChemistry()}
-                        <span class="ps-1 float-end">{shortcutLabel}</span>
-                    </DropdownItem>
-                </WithShortcut>
-
-                <WithShortcut
-                    shortcut="Control+T, T"
-                    let:createShortcut
-                    let:shortcutLabel
-                >
-                    <DropdownItem
-                        on:click={() => surround("[latex]", "[/latex]")}
-                        on:mount={withButton(createShortcut)}
-                    >
-                        {tr.editingLatex()}
-                        <span class="ps-1 float-end">{shortcutLabel}</span>
-                    </DropdownItem>
-                </WithShortcut>
-
-                <WithShortcut
-                    shortcut="Control+T, E"
-                    let:createShortcut
-                    let:shortcutLabel
-                >
-                    <DropdownItem
-                        on:click={() => surround("[$]", "[/$]")}
-                        on:mount={withButton(createShortcut)}
-                    >
-                        {tr.editingLatexEquation()}
-                        <span class="ps-1 float-end">{shortcutLabel}</span>
-                    </DropdownItem>
-                </WithShortcut>
-
-                <WithShortcut
-                    shortcut="Control+T, M"
-                    let:createShortcut
-                    let:shortcutLabel
-                >
-                    <DropdownItem
-                        on:click={() => surround("[$$]", "[/$$]")}
-                        on:mount={withButton(createShortcut)}
-                    >
-                        {tr.editingLatexMathEnv()}
-                        <span class="ps-1 float-end">{shortcutLabel}</span>
-                    </DropdownItem>
-                </WithShortcut>
-            </DropdownMenu>
-        </WithDropdown>
-    </ButtonGroupItem>
-</ButtonGroup>
diff --git a/ts/editor/base.ts b/ts/editor/base.ts
index a6963991a..7159f2e80 100644
--- a/ts/editor/base.ts
+++ b/ts/editor/base.ts
@@ -28,11 +28,8 @@ export const editorModules = [
     ModuleName.BROWSING,
 ];
 
-export { editorToolbar } from "./EditorToolbar.svelte";
-
 import IconButton from "../components/IconButton.svelte";
 import LabelButton from "../components/LabelButton.svelte";
-import WithShortcut from "../components/WithShortcut.svelte";
 import WithContext from "../components/WithContext.svelte";
 import WithState from "../components/WithState.svelte";
 
@@ -42,8 +39,9 @@ import * as editorContextKeys from "./NoteEditor.svelte";
 export const components = {
     IconButton,
     LabelButton,
-    WithShortcut,
     WithContext,
     WithState,
     contextKeys: { ...contextKeys, ...editorContextKeys },
 };
+
+export { editorToolbar } from "./editor-toolbar";
diff --git a/ts/editor/AddonButtons.svelte b/ts/editor/editor-toolbar/AddonButtons.svelte
similarity index 71%
rename from ts/editor/AddonButtons.svelte
rename to ts/editor/editor-toolbar/AddonButtons.svelte
index 4fd6201ae..8c38b60c9 100644
--- a/ts/editor/AddonButtons.svelte
+++ b/ts/editor/editor-toolbar/AddonButtons.svelte
@@ -3,8 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import ButtonGroup from "../components/ButtonGroup.svelte";
-    import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
+    import ButtonGroup from "../../components/ButtonGroup.svelte";
+    import ButtonGroupItem from "../../components/ButtonGroupItem.svelte";
 
     export let buttons: string[];
 </script>
diff --git a/ts/editor/BoldButton.svelte b/ts/editor/editor-toolbar/BoldButton.svelte
similarity index 81%
rename from ts/editor/BoldButton.svelte
rename to ts/editor/editor-toolbar/BoldButton.svelte
index e7092b215..4b83a70f3 100644
--- a/ts/editor/BoldButton.svelte
+++ b/ts/editor/editor-toolbar/BoldButton.svelte
@@ -3,16 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import IconButton from "../components/IconButton.svelte";
-    import Shortcut from "../components/Shortcut.svelte";
-    import WithState from "../components/WithState.svelte";
-    import { MatchResult } from "../domlib/surround";
-    import { getPlatformString } from "../lib/shortcuts";
-    import { getSurrounder } from "./surround";
+    import * as tr from "../../lib/ftl";
+    import IconButton from "../../components/IconButton.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
+    import WithState from "../../components/WithState.svelte";
+    import { MatchResult } from "../../domlib/surround";
+    import { getPlatformString } from "../../lib/shortcuts";
+    import { getSurrounder } from "../surround";
+    import { getNoteEditor } from "../OldEditorAdapter.svelte";
+    import type { RichTextInputAPI } from "../rich-text-input";
     import { boldIcon } from "./icons";
-    import { getNoteEditor } from "./OldEditorAdapter.svelte";
-    import type { RichTextInputAPI } from "./RichTextInput.svelte";
 
     function matchBold(element: Element): Exclude<MatchResult, MatchResult.ALONG> {
         if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
diff --git a/ts/editor/ClozeButton.svelte b/ts/editor/editor-toolbar/ClozeButton.svelte
similarity index 66%
rename from ts/editor/ClozeButton.svelte
rename to ts/editor/editor-toolbar/ClozeButton.svelte
index c03c008eb..3f79c1191 100644
--- a/ts/editor/ClozeButton.svelte
+++ b/ts/editor/editor-toolbar/ClozeButton.svelte
@@ -3,16 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import IconButton from "../components/IconButton.svelte";
-    import WithShortcut from "../components/WithShortcut.svelte";
+    import IconButton from "../../components/IconButton.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
 
-    import * as tr from "../lib/ftl";
-    import { wrapInternal } from "../lib/wrap";
-    import { withButton } from "../components/helpers";
-    import { ellipseIcon } from "./icons";
+    import * as tr from "../../lib/ftl";
+    import { wrapInternal } from "../../lib/wrap";
+    import { getPlatformString } from "../../lib/shortcuts";
     import { get } from "svelte/store";
-    import { getNoteEditor } from "./OldEditorAdapter.svelte";
-    import type { RichTextInputAPI } from "./RichTextInput.svelte";
+    import { getNoteEditor } from "../OldEditorAdapter.svelte";
+    import type { RichTextInputAPI } from "../rich-text-input";
+    import { ellipseIcon } from "./icons";
 
     const noteEditor = getNoteEditor();
     const { focusInRichText, activeInput } = noteEditor;
@@ -51,15 +51,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     $: disabled = !$focusInRichText;
+
+    const keyCombination = "Control+Alt?+Shift+C";
 </script>
 
-<WithShortcut shortcut="Control+Alt?+Shift+C" let:createShortcut let:shortcutLabel>
-    <IconButton
-        tooltip="{tr.editingClozeDeletion()} {shortcutLabel}"
-        {disabled}
-        on:click={onCloze}
-        on:mount={withButton(createShortcut)}
-    >
-        {@html ellipseIcon}
-    </IconButton>
-</WithShortcut>
+<IconButton
+    tooltip="{tr.editingClozeDeletion()} {getPlatformString(keyCombination)}"
+    {disabled}
+    on:click={onCloze}
+>
+    {@html ellipseIcon}
+</IconButton>
+
+<Shortcut {keyCombination} on:action={(event) => onCloze(event.detail.originalEvent)} />
diff --git a/ts/editor/editor-toolbar/ColorButtons.svelte b/ts/editor/editor-toolbar/ColorButtons.svelte
new file mode 100644
index 000000000..c061e0250
--- /dev/null
+++ b/ts/editor/editor-toolbar/ColorButtons.svelte
@@ -0,0 +1,121 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import ButtonGroup from "../../components/ButtonGroup.svelte";
+    import ButtonGroupItem from "../../components/ButtonGroupItem.svelte";
+    import IconButton from "../../components/IconButton.svelte";
+    import ColorPicker from "../../components/ColorPicker.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
+    import WithColorHelper from "./WithColorHelper.svelte";
+
+    import * as tr from "../../lib/ftl";
+    import { bridgeCommand } from "../../lib/bridgecommand";
+    import { getPlatformString } from "../../lib/shortcuts";
+    import { execCommand } from "../helpers";
+    import { getNoteEditor } from "../OldEditorAdapter.svelte";
+    import { textColorIcon, highlightColorIcon, arrowIcon } from "./icons";
+
+    export let api = {};
+    export let textColor: string;
+    export let highlightColor: string;
+
+    const forecolorKeyCombination = "F7";
+    $: forecolorWrap = wrapWithForecolor(textColor);
+
+    const backcolorKeyCombination = "F8";
+    $: backcolorWrap = wrapWithBackcolor(highlightColor);
+
+    const wrapWithForecolor = (color: string) => () => {
+        execCommand("forecolor", false, color);
+    };
+
+    const wrapWithBackcolor = (color: string) => () => {
+        execCommand("backcolor", false, color);
+    };
+
+    const { focusInRichText } = getNoteEditor();
+    $: disabled = !$focusInRichText;
+</script>
+
+<ButtonGroup {api}>
+    <WithColorHelper color={textColor} let:colorHelperIcon let:setColor>
+        <ButtonGroupItem>
+            <IconButton
+                tooltip="{tr.editingSetTextColor()} ({getPlatformString(
+                    forecolorKeyCombination,
+                )})"
+                {disabled}
+                on:click={forecolorWrap}
+            >
+                {@html textColorIcon}
+                {@html colorHelperIcon}
+            </IconButton>
+            <Shortcut
+                keyCombination={forecolorKeyCombination}
+                on:action={forecolorWrap}
+            />
+        </ButtonGroupItem>
+
+        <ButtonGroupItem>
+            <IconButton
+                tooltip="{tr.editingChangeColor()} ({getPlatformString(
+                    backcolorKeyCombination,
+                )})"
+                {disabled}
+                widthMultiplier={0.5}
+            >
+                {@html arrowIcon}
+                <ColorPicker
+                    on:change={(event) => {
+                        const textColor = setColor(event);
+                        bridgeCommand(`lastTextColor:${textColor}`);
+                        forecolorWrap = wrapWithForecolor(setColor(event));
+                        forecolorWrap();
+                    }}
+                />
+            </IconButton>
+            <Shortcut
+                keyCombination={backcolorKeyCombination}
+                on:action={(event) => {
+                    const textColor = setColor(event);
+                    bridgeCommand(`lastTextColor:${textColor}`);
+                    forecolorWrap = wrapWithForecolor(setColor(event));
+                    forecolorWrap();
+                }}
+            />
+        </ButtonGroupItem>
+    </WithColorHelper>
+
+    <WithColorHelper color={highlightColor} let:colorHelperIcon let:setColor>
+        <ButtonGroupItem>
+            <IconButton
+                tooltip={tr.editingSetTextHighlightColor()}
+                {disabled}
+                on:click={backcolorWrap}
+            >
+                {@html highlightColorIcon}
+                {@html colorHelperIcon}
+            </IconButton>
+        </ButtonGroupItem>
+
+        <ButtonGroupItem>
+            <IconButton
+                tooltip={tr.editingChangeColor()}
+                widthMultiplier={0.5}
+                {disabled}
+            >
+                {@html arrowIcon}
+                <ColorPicker
+                    on:change={(event) => {
+                        const highlightColor = setColor(event);
+                        bridgeCommand(`lastHighlightColor:${highlightColor}`);
+                        backcolorWrap = wrapWithBackcolor(highlightColor);
+                        backcolorWrap();
+                    }}
+                />
+            </IconButton>
+        </ButtonGroupItem>
+    </WithColorHelper>
+</ButtonGroup>
diff --git a/ts/editor/editor-toolbar/CommandIconButton.svelte b/ts/editor/editor-toolbar/CommandIconButton.svelte
new file mode 100644
index 000000000..595fec729
--- /dev/null
+++ b/ts/editor/editor-toolbar/CommandIconButton.svelte
@@ -0,0 +1,66 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import IconButton from "../../components/IconButton.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
+    import WithState from "../../components/WithState.svelte";
+
+    import { execCommand, queryCommandState } from "../helpers";
+    import { getNoteEditor } from "../OldEditorAdapter.svelte";
+
+    export let key: string;
+    export let tooltip: string;
+    export let shortcut: string = "";
+
+    export let withoutShortcut = false;
+    export let withoutState = false;
+
+    const { focusInRichText } = getNoteEditor();
+
+    function action() {
+        execCommand(key);
+    }
+
+    $: disabled = !$focusInRichText;
+</script>
+
+{#if withoutState}
+    <IconButton {tooltip} {disabled} on:click={action}>
+        <slot />
+    </IconButton>
+
+    {#if !withoutShortcut}
+        <Shortcut keyCombination={shortcut} on:click={action} />
+    {/if}
+{:else}
+    <WithState
+        {key}
+        update={async () => queryCommandState(key)}
+        let:state={active}
+        let:updateState
+    >
+        <IconButton
+            {tooltip}
+            {active}
+            {disabled}
+            on:click={(event) => {
+                action();
+                updateState(event);
+            }}
+        >
+            <slot />
+        </IconButton>
+
+        {#if !withoutShortcut}
+            <Shortcut
+                keyCombination={shortcut}
+                on:action={(event) => {
+                    action();
+                    updateState(event);
+                }}
+            />
+        {/if}
+    </WithState>
+{/if}
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/editor-toolbar/EditorToolbar.svelte
similarity index 84%
rename from ts/editor/EditorToolbar.svelte
rename to ts/editor/editor-toolbar/EditorToolbar.svelte
index 1011f689b..fa3e0b990 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/editor-toolbar/EditorToolbar.svelte
@@ -3,11 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script context="module" lang="ts">
-    import "./legacy.css";
-    import { updateAllState, resetAllState } from "../components/WithState.svelte";
-
-    import type { ButtonGroupAPI } from "../components/ButtonGroup.svelte";
-    import type { ButtonToolbarAPI } from "../components/ButtonToolbar.svelte";
+    import { updateAllState, resetAllState } from "../../components/WithState.svelte";
+    import type { ButtonGroupAPI } from "../../components/ButtonGroup.svelte";
+    import type { ButtonToolbarAPI } from "../../components/ButtonToolbar.svelte";
 
     export function updateActiveButtons(event: Event) {
         updateAllState(event);
@@ -38,9 +36,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import StickyContainer from "../components/StickyContainer.svelte";
-    import ButtonToolbar from "../components/ButtonToolbar.svelte";
-    import Item from "../components/Item.svelte";
+    import StickyContainer from "../../components/StickyContainer.svelte";
+    import ButtonToolbar from "../../components/ButtonToolbar.svelte";
+    import Item from "../../components/Item.svelte";
 
     import NoteTypeButtons from "./NoteTypeButtons.svelte";
     import FormatInlineButtons from "./FormatInlineButtons.svelte";
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/editor-toolbar/FormatBlockButtons.svelte
similarity index 63%
rename from ts/editor/FormatBlockButtons.svelte
rename to ts/editor/editor-toolbar/FormatBlockButtons.svelte
index 3400f14c4..79e74b183 100644
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/editor-toolbar/FormatBlockButtons.svelte
@@ -3,17 +3,19 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import ButtonGroup from "../components/ButtonGroup.svelte";
-    import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
-    import IconButton from "../components/IconButton.svelte";
-    import ButtonDropdown from "../components/ButtonDropdown.svelte";
-    import Item from "../components/Item.svelte";
-    import WithDropdown from "../components/WithDropdown.svelte";
+    import ButtonGroup from "../../components/ButtonGroup.svelte";
+    import ButtonGroupItem from "../../components/ButtonGroupItem.svelte";
+    import IconButton from "../../components/IconButton.svelte";
+    import ButtonDropdown from "../../components/ButtonDropdown.svelte";
+    import Item from "../../components/Item.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
+    import WithDropdown from "../../components/WithDropdown.svelte";
     import CommandIconButton from "./CommandIconButton.svelte";
 
-    import * as tr from "../lib/ftl";
-    import { getListItem } from "../lib/dom";
-    import { execCommand } from "./helpers";
+    import * as tr from "../../lib/ftl";
+    import { getListItem } from "../../lib/dom";
+    import { getPlatformString } from "../../lib/shortcuts";
+    import { execCommand } from "../helpers";
     import {
         ulIcon,
         olIcon,
@@ -25,12 +27,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         indentIcon,
         outdentIcon,
     } from "./icons";
-    import { getNoteEditor } from "./OldEditorAdapter.svelte";
-    import WithShortcut from "../components/WithShortcut.svelte";
-    import { withButton } from "../components/helpers";
+    import { getNoteEditor } from "../OldEditorAdapter.svelte";
 
     export let api = {};
 
+    const outdentKeyCombination = "Control+Shift+,";
     function outdentListItem() {
         if (getListItem(document.activeElement!.shadowRoot!)) {
             execCommand("outdent");
@@ -39,6 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
+    const indentKeyCombination = "Control+Shift+.";
     function indentListItem() {
         if (getListItem(document.activeElement!.shadowRoot!)) {
             execCommand("indent");
@@ -56,7 +58,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <CommandIconButton
             key="insertUnorderedList"
             tooltip={tr.editingUnorderedList()}
-            shortcut={"Control+,"}>{@html ulIcon}</CommandIconButton
+            shortcut="Control+,">{@html ulIcon}</CommandIconButton
         >
     </ButtonGroupItem>
 
@@ -64,7 +66,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <CommandIconButton
             key="insertOrderedList"
             tooltip={tr.editingOrderedList()}
-            shortcut={"Control+."}>{@html olIcon}</CommandIconButton
+            shortcut="Control+.">{@html olIcon}</CommandIconButton
         >
     </ButtonGroupItem>
 
@@ -121,37 +123,37 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <Item id="indentation">
                     <ButtonGroup>
                         <ButtonGroupItem>
-                            <WithShortcut
-                                shortcut={"Control+Shift+,"}
-                                let:createShortcut
-                                let:shortcutLabel
+                            <IconButton
+                                tooltip="{tr.editingOutdent()} ({getPlatformString(
+                                    outdentKeyCombination,
+                                )})"
+                                {disabled}
+                                on:click={outdentListItem}
                             >
-                                <IconButton
-                                    on:click={outdentListItem}
-                                    on:mount={withButton(createShortcut)}
-                                    tooltip="{tr.editingOutdent()} ({shortcutLabel})"
-                                    {disabled}
-                                >
-                                    {@html outdentIcon}
-                                </IconButton>
-                            </WithShortcut>
+                                {@html outdentIcon}
+                            </IconButton>
+
+                            <Shortcut
+                                keyCombination={outdentKeyCombination}
+                                on:action={outdentListItem}
+                            />
                         </ButtonGroupItem>
 
                         <ButtonGroupItem>
-                            <WithShortcut
-                                shortcut={"Control+Shift+."}
-                                let:createShortcut
-                                let:shortcutLabel
+                            <IconButton
+                                tooltip="{tr.editingIndent()} ({getPlatformString(
+                                    indentKeyCombination,
+                                )})"
+                                {disabled}
+                                on:click={indentListItem}
                             >
-                                <IconButton
-                                    on:click={indentListItem}
-                                    on:mount={withButton(createShortcut)}
-                                    tooltip="{tr.editingIndent()} ({shortcutLabel})"
-                                    {disabled}
-                                >
-                                    {@html indentIcon}
-                                </IconButton>
-                            </WithShortcut>
+                                {@html indentIcon}
+                            </IconButton>
+
+                            <Shortcut
+                                keyCombination={indentKeyCombination}
+                                on:action={indentListItem}
+                            />
                         </ButtonGroupItem>
                     </ButtonGroup>
                 </Item>
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/editor-toolbar/FormatInlineButtons.svelte
similarity index 82%
rename from ts/editor/FormatInlineButtons.svelte
rename to ts/editor/editor-toolbar/FormatInlineButtons.svelte
index 748c92a43..56c41b5a1 100644
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/editor-toolbar/FormatInlineButtons.svelte
@@ -3,14 +3,14 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import ButtonGroup from "../components/ButtonGroup.svelte";
-    import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
+    import ButtonGroup from "../../components/ButtonGroup.svelte";
+    import ButtonGroupItem from "../../components/ButtonGroupItem.svelte";
     import CommandIconButton from "./CommandIconButton.svelte";
     import BoldButton from "./BoldButton.svelte";
     import ItalicButton from "./ItalicButton.svelte";
     import UnderlineButton from "./UnderlineButton.svelte";
 
-    import * as tr from "../lib/ftl";
+    import * as tr from "../../lib/ftl";
     import { superscriptIcon, subscriptIcon, eraserIcon } from "./icons";
 
     export let api = {};
@@ -32,7 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <ButtonGroupItem>
         <CommandIconButton
             key="superscript"
-            shortcut={"Control+="}
+            shortcut="Control+="
             tooltip={tr.editingSuperscript()}>{@html superscriptIcon}</CommandIconButton
         >
     </ButtonGroupItem>
@@ -40,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <ButtonGroupItem>
         <CommandIconButton
             key="subscript"
-            shortcut={"Control+Shift+="}
+            shortcut="Control+Shift+="
             tooltip={tr.editingSubscript()}>{@html subscriptIcon}</CommandIconButton
         >
     </ButtonGroupItem>
@@ -48,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <ButtonGroupItem>
         <CommandIconButton
             key="removeFormat"
-            shortcut={"Control+R"}
+            shortcut="Control+R"
             tooltip={tr.editingRemoveFormatting()}
             withoutState>{@html eraserIcon}</CommandIconButton
         >
diff --git a/ts/editor/ItalicButton.svelte b/ts/editor/editor-toolbar/ItalicButton.svelte
similarity index 81%
rename from ts/editor/ItalicButton.svelte
rename to ts/editor/editor-toolbar/ItalicButton.svelte
index 423ac90fc..f615c01b0 100644
--- a/ts/editor/ItalicButton.svelte
+++ b/ts/editor/editor-toolbar/ItalicButton.svelte
@@ -3,16 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import IconButton from "../components/IconButton.svelte";
-    import Shortcut from "../components/Shortcut.svelte";
-    import WithState from "../components/WithState.svelte";
-    import { MatchResult } from "../domlib/surround";
-    import { getPlatformString } from "../lib/shortcuts";
-    import { getSurrounder } from "./surround";
+    import * as tr from "../../lib/ftl";
+    import IconButton from "../../components/IconButton.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
+    import WithState from "../../components/WithState.svelte";
+    import { MatchResult } from "../../domlib/surround";
+    import { getPlatformString } from "../../lib/shortcuts";
+    import { getSurrounder } from "../surround";
     import { italicIcon } from "./icons";
-    import { getNoteEditor } from "./OldEditorAdapter.svelte";
-    import type { RichTextInputAPI } from "./RichTextInput.svelte";
+    import { getNoteEditor } from "../OldEditorAdapter.svelte";
+    import type { RichTextInputAPI } from "../rich-text-input";
 
     function matchItalic(element: Element): Exclude<MatchResult, MatchResult.ALONG> {
         if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
diff --git a/ts/editor/editor-toolbar/LatexButton.svelte b/ts/editor/editor-toolbar/LatexButton.svelte
new file mode 100644
index 000000000..9c43a474b
--- /dev/null
+++ b/ts/editor/editor-toolbar/LatexButton.svelte
@@ -0,0 +1,79 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import * as tr from "../../lib/ftl";
+    import IconButton from "../../components/IconButton.svelte";
+    import WithDropdown from "../../components/WithDropdown.svelte";
+    import DropdownMenu from "../../components/DropdownMenu.svelte";
+    import DropdownItem from "../../components/DropdownItem.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
+    import { withButton } from "../../components/helpers";
+    import { getPlatformString } from "../../lib/shortcuts";
+    import { wrapInternal } from "../../lib/wrap";
+    import { functionIcon } from "./icons";
+    import { getNoteEditor } from "../OldEditorAdapter.svelte";
+    import type { RichTextInputAPI } from "../rich-text-input";
+
+    const { activeInput, focusInRichText } = getNoteEditor();
+    $: richTextAPI = $activeInput as RichTextInputAPI;
+
+    async function surround(front: string, back: string): Promise<void> {
+        const element = await richTextAPI.element;
+        wrapInternal(element, front, back, false);
+    }
+
+    function onMathjaxInline(): void {
+        surround("<anki-mathjax focusonmount>", "</anki-mathjax>");
+    }
+
+    function onMathjaxBlock(): void {
+        surround('<anki-mathjax block="true" focusonmount>', "</anki-matjax>");
+    }
+
+    function onMathjaxChemistry(): void {
+        surround("<anki-mathjax focusonmount>\\ce{", "}</anki-mathjax>");
+    }
+
+    function onLatex(): void {
+        surround("[latex]", "[/latex]");
+    }
+
+    function onLatexEquation(): void {
+        surround("[$]", "[/$]");
+    }
+
+    function onLatexMathEnv(): void {
+        surround("[$$]", "[/$$]");
+    }
+
+    type LatexItem = [() => void, string, string];
+
+    const dropdownItems: LatexItem[] = [
+        [onMathjaxInline, "Control+M, M", tr.editingMathjaxInline()],
+        [onMathjaxBlock, "Control+M, E", tr.editingMathjaxBlock()],
+        [onMathjaxChemistry, "Control+M, C", tr.editingMathjaxChemistry()],
+        [onLatex, "Control+T, T", tr.editingLatex()],
+        [onLatexEquation, "Control+T, E", tr.editingLatexEquation()],
+        [onLatexMathEnv, "Control+T, M", tr.editingLatexMathEnv()],
+    ];
+
+    $: disabled = !$focusInRichText;
+</script>
+
+<WithDropdown let:createDropdown>
+    <IconButton {disabled} on:mount={withButton(createDropdown)}>
+        {@html functionIcon}
+    </IconButton>
+
+    <DropdownMenu>
+        {#each dropdownItems as [callback, keyCombination, label]}
+            <DropdownItem on:click={callback}>
+                {label}
+                <span class="ps-1 float-end">{getPlatformString(keyCombination)}</span>
+            </DropdownItem>
+            <Shortcut {keyCombination} on:action={callback} />
+        {/each}
+    </DropdownMenu>
+</WithDropdown>
diff --git a/ts/editor/editor-toolbar/NoteTypeButtons.svelte b/ts/editor/editor-toolbar/NoteTypeButtons.svelte
new file mode 100644
index 000000000..4f211ce71
--- /dev/null
+++ b/ts/editor/editor-toolbar/NoteTypeButtons.svelte
@@ -0,0 +1,41 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import * as tr from "../../lib/ftl";
+    import { bridgeCommand } from "../../lib/bridgecommand";
+    import { getPlatformString } from "../../lib/shortcuts";
+
+    import ButtonGroup from "../../components/ButtonGroup.svelte";
+    import ButtonGroupItem from "../../components/ButtonGroupItem.svelte";
+    import LabelButton from "../../components/LabelButton.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
+
+    export let api = {};
+
+    const keyCombination = "Control+L";
+</script>
+
+<ButtonGroup {api}>
+    <ButtonGroupItem>
+        <LabelButton
+            tooltip={tr.editingCustomizeFields()}
+            on:click={() => bridgeCommand("fields")}
+        >
+            {tr.editingFields()}...
+        </LabelButton>
+    </ButtonGroupItem>
+
+    <ButtonGroupItem>
+        <LabelButton
+            tooltip="{tr.editingCustomizeCardTemplates()} ({getPlatformString(
+                keyCombination,
+            )})"
+            on:click={() => bridgeCommand("cards")}
+        >
+            {tr.editingCards()}...
+        </LabelButton>
+        <Shortcut {keyCombination} on:action={() => bridgeCommand("cards")} />
+    </ButtonGroupItem>
+</ButtonGroup>
diff --git a/ts/editor/editor-toolbar/PreviewButton.svelte b/ts/editor/editor-toolbar/PreviewButton.svelte
new file mode 100644
index 000000000..e6ee03f60
--- /dev/null
+++ b/ts/editor/editor-toolbar/PreviewButton.svelte
@@ -0,0 +1,34 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script context="module" lang="ts">
+    import { writable } from "svelte/store";
+
+    const active = writable(false);
+    export const togglePreviewButtonState = (state: boolean) => active.set(state);
+</script>
+
+<script lang="ts">
+    import { bridgeCommand } from "../../lib/bridgecommand";
+    import { getPlatformString } from "../../lib/shortcuts";
+    import * as tr from "../../lib/ftl";
+
+    import LabelButton from "../../components/LabelButton.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
+
+    const keyCombination = "Control+Shift+P";
+    function preview(): void {
+        bridgeCommand("preview");
+    }
+</script>
+
+<LabelButton
+    tooltip={tr.browsingPreviewSelectedCard({ val: getPlatformString(keyCombination) })}
+    active={$active}
+    on:click={preview}
+>
+    {tr.actionsPreview()}
+</LabelButton>
+
+<Shortcut keyCombination="Control+Shift+P" on:action={preview} />
diff --git a/ts/editor/editor-toolbar/TemplateButtons.svelte b/ts/editor/editor-toolbar/TemplateButtons.svelte
new file mode 100644
index 000000000..fafff458b
--- /dev/null
+++ b/ts/editor/editor-toolbar/TemplateButtons.svelte
@@ -0,0 +1,70 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import * as tr from "../../lib/ftl";
+    import ButtonGroup from "../../components/ButtonGroup.svelte";
+    import ButtonGroupItem from "../../components/ButtonGroupItem.svelte";
+    import IconButton from "../../components/IconButton.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
+    import ClozeButton from "./ClozeButton.svelte";
+    import LatexButton from "./LatexButton.svelte";
+    import { bridgeCommand } from "../../lib/bridgecommand";
+    import { getPlatformString } from "../../lib/shortcuts";
+    import { getNoteEditor } from "../OldEditorAdapter.svelte";
+    import { paperclipIcon, micIcon } from "./icons";
+
+    export let api = {};
+    const { focusInRichText } = getNoteEditor();
+
+    const attachmentKeyCombination = "F3";
+    function onAttachment(): void {
+        bridgeCommand("attach");
+    }
+
+    const recordKeyCombination = "F5";
+    function onRecord(): void {
+        bridgeCommand("record");
+    }
+
+    $: disabled = !$focusInRichText;
+</script>
+
+<ButtonGroup {api}>
+    <ButtonGroupItem>
+        <IconButton
+            tooltip="{tr.editingAttachPicturesaudiovideo()} ({getPlatformString(
+                attachmentKeyCombination,
+            )})"
+            iconSize={70}
+            {disabled}
+            on:click={onAttachment}
+        >
+            {@html paperclipIcon}
+        </IconButton>
+        <Shortcut keyCombination={attachmentKeyCombination} on:action={onAttachment} />
+    </ButtonGroupItem>
+
+    <ButtonGroupItem>
+        <IconButton
+            tooltip="{tr.editingRecordAudio()} ({getPlatformString(
+                recordKeyCombination,
+            )})"
+            iconSize={70}
+            {disabled}
+            on:click={onRecord}
+        >
+            {@html micIcon}
+        </IconButton>
+        <Shortcut keyCombination={recordKeyCombination} on:action={onRecord} />
+    </ButtonGroupItem>
+
+    <ButtonGroupItem id="cloze">
+        <ClozeButton />
+    </ButtonGroupItem>
+
+    <ButtonGroupItem>
+        <LatexButton />
+    </ButtonGroupItem>
+</ButtonGroup>
diff --git a/ts/editor/UnderlineButton.svelte b/ts/editor/editor-toolbar/UnderlineButton.svelte
similarity index 77%
rename from ts/editor/UnderlineButton.svelte
rename to ts/editor/editor-toolbar/UnderlineButton.svelte
index 607963c4f..6346205ef 100644
--- a/ts/editor/UnderlineButton.svelte
+++ b/ts/editor/editor-toolbar/UnderlineButton.svelte
@@ -3,16 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import IconButton from "../components/IconButton.svelte";
-    import Shortcut from "../components/Shortcut.svelte";
-    import WithState from "../components/WithState.svelte";
-    import { MatchResult } from "../domlib/surround";
-    import { getPlatformString } from "../lib/shortcuts";
-    import { getSurrounder } from "./surround";
+    import * as tr from "../../lib/ftl";
+    import IconButton from "../../components/IconButton.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
+    import WithState from "../../components/WithState.svelte";
+    import { MatchResult } from "../../domlib/surround";
+    import { getPlatformString } from "../../lib/shortcuts";
+    import { getSurrounder } from "../surround";
+    import { getNoteEditor } from "../OldEditorAdapter.svelte";
+    import type { RichTextInputAPI } from "../rich-text-input";
     import { underlineIcon } from "./icons";
-    import { getNoteEditor } from "./OldEditorAdapter.svelte";
-    import type { RichTextInputAPI } from "./RichTextInput.svelte";
 
     function matchUnderline(element: Element): Exclude<MatchResult, MatchResult.ALONG> {
         if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
diff --git a/ts/editor/WithColorHelper.svelte b/ts/editor/editor-toolbar/WithColorHelper.svelte
similarity index 100%
rename from ts/editor/WithColorHelper.svelte
rename to ts/editor/editor-toolbar/WithColorHelper.svelte
diff --git a/ts/editor/editor-toolbar/icons.ts b/ts/editor/editor-toolbar/icons.ts
new file mode 100644
index 000000000..bc4bdf5cf
--- /dev/null
+++ b/ts/editor/editor-toolbar/icons.ts
@@ -0,0 +1,34 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+/// <reference types="../../lib/image-import" />
+
+export { default as boldIcon } from "bootstrap-icons/icons/type-bold.svg";
+export { default as italicIcon } from "bootstrap-icons/icons/type-italic.svg";
+export { default as underlineIcon } from "bootstrap-icons/icons/type-underline.svg";
+export { default as superscriptIcon } from "@mdi/svg/svg/format-superscript.svg";
+export { default as subscriptIcon } from "@mdi/svg/svg/format-subscript.svg";
+export { default as eraserIcon } from "bootstrap-icons/icons/eraser.svg";
+
+export { default as ulIcon } from "bootstrap-icons/icons/list-ul.svg";
+export { default as olIcon } from "bootstrap-icons/icons/list-ol.svg";
+export { default as listOptionsIcon } from "bootstrap-icons/icons/text-paragraph.svg";
+
+export { default as justifyFullIcon } from "bootstrap-icons/icons/justify.svg";
+export { default as justifyLeftIcon } from "bootstrap-icons/icons/text-left.svg";
+export { default as justifyRightIcon } from "bootstrap-icons/icons/text-right.svg";
+export { default as justifyCenterIcon } from "bootstrap-icons/icons/text-center.svg";
+
+export { default as indentIcon } from "bootstrap-icons/icons/text-indent-left.svg";
+export { default as outdentIcon } from "bootstrap-icons/icons/text-indent-right.svg";
+
+export { default as textColorIcon } from "@mdi/svg/svg/format-color-text.svg";
+export { default as highlightColorIcon } from "@mdi/svg/svg/format-color-highlight.svg";
+export { default as colorHelperIcon } from "@mdi/svg/svg/color-helper.svg";
+export const arrowIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="transparent" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>';
+
+export { default as paperclipIcon } from "@mdi/svg/svg/paperclip.svg";
+export { default as micIcon } from "bootstrap-icons/icons/mic.svg";
+export { default as ellipseIcon } from "@mdi/svg/svg/contain.svg";
+export { default as functionIcon } from "@mdi/svg/svg/function-variant.svg";
diff --git a/ts/editor/editor-toolbar/index.ts b/ts/editor/editor-toolbar/index.ts
new file mode 100644
index 000000000..6ae55163d
--- /dev/null
+++ b/ts/editor/editor-toolbar/index.ts
@@ -0,0 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+export { default as EditorToolbar, editorToolbar } from "./EditorToolbar.svelte";
+export type { EditorToolbarAPI } from "./EditorToolbar.svelte";
diff --git a/ts/editor/icons.ts b/ts/editor/icons.ts
index 7fcc0fc11..3fd894476 100644
--- a/ts/editor/icons.ts
+++ b/ts/editor/icons.ts
@@ -3,45 +3,8 @@
 
 /// <reference types="../lib/image-import" />
 
-export { default as boldIcon } from "bootstrap-icons/icons/type-bold.svg";
-export { default as italicIcon } from "bootstrap-icons/icons/type-italic.svg";
-export { default as underlineIcon } from "bootstrap-icons/icons/type-underline.svg";
-export { default as superscriptIcon } from "@mdi/svg/svg/format-superscript.svg";
-export { default as subscriptIcon } from "@mdi/svg/svg/format-subscript.svg";
-export { default as eraserIcon } from "bootstrap-icons/icons/eraser.svg";
-
-export { default as ulIcon } from "bootstrap-icons/icons/list-ul.svg";
-export { default as olIcon } from "bootstrap-icons/icons/list-ol.svg";
-export { default as listOptionsIcon } from "bootstrap-icons/icons/text-paragraph.svg";
-
-export { default as justifyFullIcon } from "bootstrap-icons/icons/justify.svg";
-export { default as justifyLeftIcon } from "bootstrap-icons/icons/text-left.svg";
-export { default as justifyRightIcon } from "bootstrap-icons/icons/text-right.svg";
-export { default as justifyCenterIcon } from "bootstrap-icons/icons/text-center.svg";
-
-export { default as indentIcon } from "bootstrap-icons/icons/text-indent-left.svg";
-export { default as outdentIcon } from "bootstrap-icons/icons/text-indent-right.svg";
-
-export { default as squareFillIcon } from "bootstrap-icons/icons/square-fill.svg";
-export { default as textColorIcon } from "@mdi/svg/svg/format-color-text.svg";
-export { default as highlightColorIcon } from "@mdi/svg/svg/format-color-highlight.svg";
-export { default as colorHelperIcon } from "@mdi/svg/svg/color-helper.svg";
-
-export { default as paperclipIcon } from "@mdi/svg/svg/paperclip.svg";
-export { default as micIcon } from "bootstrap-icons/icons/mic.svg";
-export { default as ellipseIcon } from "@mdi/svg/svg/contain.svg";
-export { default as functionIcon } from "@mdi/svg/svg/function-variant.svg";
-
 export { default as descriptionIcon } from "bootstrap-icons/icons/info-circle.svg";
 
-export { default as tagIcon } from "@mdi/svg/svg/tag.svg";
-export { default as addTagIcon } from "@mdi/svg/svg/tag-plus.svg";
-export { default as dotsIcon } from "@mdi/svg/svg/dots-vertical.svg";
-export { default as deleteIcon } from "bootstrap-icons/icons/x.svg";
-
-export const arrowIcon =
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="transparent" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>';
-
 export { default as alertIcon } from "@mdi/svg/svg/alert.svg";
 
 export { default as richTextOn } from "@mdi/svg/svg/eye-outline.svg";
diff --git a/ts/editor/image-overlay/ImageHandle.svelte b/ts/editor/image-overlay/ImageHandle.svelte
index 4d5cd4e06..5ed76bec3 100644
--- a/ts/editor/image-overlay/ImageHandle.svelte
+++ b/ts/editor/image-overlay/ImageHandle.svelte
@@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import { tick, onDestroy } from "svelte";
     import WithDropdown from "../../components/WithDropdown.svelte";
     import ButtonDropdown from "../../components/ButtonDropdown.svelte";
     import Item from "../../components/Item.svelte";
@@ -11,20 +12,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import HandleSelection from "../HandleSelection.svelte";
     import HandleControl from "../HandleControl.svelte";
     import HandleLabel from "../HandleLabel.svelte";
+    import { getRichTextInput } from "../rich-text-input";
 
     import WithImageConstrained from "./WithImageConstrained.svelte";
     import FloatButtons from "./FloatButtons.svelte";
     import SizeSelect from "./SizeSelect.svelte";
 
-    import { tick, onDestroy } from "svelte";
-    import type { StyleObject } from "../CustomStyles.svelte";
-    import { getRichTextInput } from "../RichTextInput.svelte";
-
     const { container, styles } = getRichTextInput();
 
     const sheetPromise = styles
         .addStyleTag("imageOverlay")
-        .then((styleObject: StyleObject) => styleObject.element.sheet!);
+        .then((styleObject) => styleObject.element.sheet!);
 
     let activeImage: HTMLImageElement | null = null;
 
diff --git a/ts/editor/mathjax-overlay/MathjaxHandle.svelte b/ts/editor/mathjax-overlay/MathjaxHandle.svelte
index cfcd117ae..1683a6687 100644
--- a/ts/editor/mathjax-overlay/MathjaxHandle.svelte
+++ b/ts/editor/mathjax-overlay/MathjaxHandle.svelte
@@ -3,17 +3,17 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import WithDropdown from "../../components/WithDropdown.svelte";
-    import MathjaxMenu from "./MathjaxMenu.svelte";
-    import HandleSelection from "../HandleSelection.svelte";
-    import HandleBackground from "../HandleBackground.svelte";
-    import HandleControl from "../HandleControl.svelte";
     import { onMount, onDestroy, tick } from "svelte";
     import { writable } from "svelte/store";
-    import { getRichTextInput } from "../RichTextInput.svelte";
+    import WithDropdown from "../../components/WithDropdown.svelte";
     import { noop } from "../../lib/functional";
     import { on } from "../../lib/events";
     import { Mathjax } from "../../editable/mathjax-element";
+    import HandleSelection from "../HandleSelection.svelte";
+    import HandleBackground from "../HandleBackground.svelte";
+    import HandleControl from "../HandleControl.svelte";
+    import { getRichTextInput } from "../rich-text-input";
+    import MathjaxMenu from "./MathjaxMenu.svelte";
 
     const { container, api } = getRichTextInput();
     const { flushCaret, preventResubscription } = api;
diff --git a/ts/editor/PlainTextInput.svelte b/ts/editor/plain-text-input/PlainTextInput.svelte
similarity index 88%
rename from ts/editor/PlainTextInput.svelte
rename to ts/editor/plain-text-input/PlainTextInput.svelte
index bddacdf02..3cf4703e7 100644
--- a/ts/editor/PlainTextInput.svelte
+++ b/ts/editor/plain-text-input/PlainTextInput.svelte
@@ -3,9 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script context="module" lang="ts">
-    import type { EditingInputAPI } from "./EditingArea.svelte";
-    import type { CodeMirror as CodeMirrorType } from "./code-mirror";
-    import CodeMirror from "./CodeMirror.svelte";
+    import type { EditingInputAPI } from "../EditingArea.svelte";
+    import type { CodeMirror as CodeMirrorType } from "../code-mirror";
 
     export interface PlainTextInputAPI extends EditingInputAPI {
         name: "plain-text";
@@ -18,13 +17,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import type { CodeMirrorAPI } from "./CodeMirror.svelte";
     import { tick, onMount } from "svelte";
     import { writable } from "svelte/store";
-    import { pageTheme } from "../sveltelib/theme";
-    import { getDecoratedElements } from "./DecoratedElements.svelte";
-    import { getEditingArea } from "./EditingArea.svelte";
-    import { htmlanki, baseOptions, gutterOptions } from "./code-mirror";
+    import { pageTheme } from "../../sveltelib/theme";
+    import { getDecoratedElements } from "../DecoratedElements.svelte";
+    import { getEditingArea } from "../EditingArea.svelte";
+    import CodeMirror from "../CodeMirror.svelte";
+    import type { CodeMirrorAPI } from "../CodeMirror.svelte";
+    import { htmlanki, baseOptions, gutterOptions } from "../code-mirror";
 
     export let hidden = false;
 
diff --git a/ts/editor/plain-text-input/index.ts b/ts/editor/plain-text-input/index.ts
new file mode 100644
index 000000000..417e0f0c9
--- /dev/null
+++ b/ts/editor/plain-text-input/index.ts
@@ -0,0 +1,8 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+export {
+    default as PlainTextInput,
+    parsingInstructions,
+} from "./PlainTextInput.svelte";
+export type { PlainTextInputAPI } from "./PlainTextInput.svelte";
diff --git a/ts/editor/CustomStyles.svelte b/ts/editor/rich-text-input/CustomStyles.svelte
similarity index 100%
rename from ts/editor/CustomStyles.svelte
rename to ts/editor/rich-text-input/CustomStyles.svelte
diff --git a/ts/editor/RichTextInput.svelte b/ts/editor/rich-text-input/RichTextInput.svelte
similarity index 88%
rename from ts/editor/RichTextInput.svelte
rename to ts/editor/rich-text-input/RichTextInput.svelte
index 0ff7efde9..404109ef8 100644
--- a/ts/editor/RichTextInput.svelte
+++ b/ts/editor/rich-text-input/RichTextInput.svelte
@@ -4,15 +4,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script context="module" lang="ts">
     import type CustomStyles from "./CustomStyles.svelte";
-    import type { EditingInputAPI } from "./EditingArea.svelte";
-    import type { ContentEditableAPI } from "../editable/ContentEditable.svelte";
-    import contextProperty from "../sveltelib/context-property";
+    import type { EditingInputAPI } from "../EditingArea.svelte";
+    import type { ContentEditableAPI } from "../../editable/ContentEditable.svelte";
+    import contextProperty from "../../sveltelib/context-property";
     import type {
         Trigger,
         OnInsertCallback,
         OnInputCallback,
-    } from "../sveltelib/input-manager";
-    import { pageTheme } from "../sveltelib/theme";
+    } from "../../sveltelib/input-manager";
+    import { pageTheme } from "../../sveltelib/theme";
 
     export interface RichTextInputAPI extends EditingInputAPI, ContentEditableAPI {
         name: "rich-text";
@@ -39,8 +39,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export { getRichTextInput, hasRichTextInput };
 
-    import getDOMMirror from "../sveltelib/mirror-dom";
-    import getInputManager from "../sveltelib/input-manager";
+    import getDOMMirror from "../../sveltelib/mirror-dom";
+    import getInputManager from "../../sveltelib/input-manager";
 
     const {
         manager: globalInputManager,
@@ -53,23 +53,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import RichTextStyles from "./RichTextStyles.svelte";
-    import SetContext from "./SetContext.svelte";
-    import ContentEditable from "../editable/ContentEditable.svelte";
     import { onMount, getAllContexts } from "svelte";
     import {
         nodeIsElement,
         nodeContainsInlineContent,
         fragmentToString,
-    } from "../lib/dom";
-    import { placeCaretAfterContent } from "../domlib/place-caret";
-    import { getDecoratedElements } from "./DecoratedElements.svelte";
-    import { getEditingArea } from "./EditingArea.svelte";
-    import { promiseWithResolver } from "../lib/promise";
-    import { bridgeCommand } from "../lib/bridgecommand";
-    import { on } from "../lib/events";
-    import { nodeStore } from "../sveltelib/node-store";
-    import type { DecoratedElement } from "../editable/decorated";
+    } from "../../lib/dom";
+    import ContentEditable from "../../editable/ContentEditable.svelte";
+    import { placeCaretAfterContent } from "../../domlib/place-caret";
+    import { getDecoratedElements } from "../DecoratedElements.svelte";
+    import { getEditingArea } from "../EditingArea.svelte";
+    import { promiseWithResolver } from "../../lib/promise";
+    import { bridgeCommand } from "../../lib/bridgecommand";
+    import { on } from "../../lib/events";
+    import { nodeStore } from "../../sveltelib/node-store";
+    import type { DecoratedElement } from "../../editable/decorated";
+    import RichTextStyles from "./RichTextStyles.svelte";
+    import SetContext from "./SetContext.svelte";
 
     export let hidden: boolean;
 
diff --git a/ts/editor/RichTextStyles.svelte b/ts/editor/rich-text-input/RichTextStyles.svelte
similarity index 96%
rename from ts/editor/RichTextStyles.svelte
rename to ts/editor/rich-text-input/RichTextStyles.svelte
index 9c597fef2..63fcc73a8 100644
--- a/ts/editor/RichTextStyles.svelte
+++ b/ts/editor/rich-text-input/RichTextStyles.svelte
@@ -3,13 +3,12 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import CustomStyles from "./CustomStyles.svelte";
-
-    import { promiseWithResolver } from "../lib/promise";
-    import type { StyleLinkType, StyleObject } from "./CustomStyles.svelte";
     import { getContext } from "svelte";
     import type { Readable } from "svelte/store";
-    import { fontFamilyKey, fontSizeKey, directionKey } from "../lib/context-keys";
+    import CustomStyles from "./CustomStyles.svelte";
+    import type { StyleLinkType, StyleObject } from "./CustomStyles.svelte";
+    import { promiseWithResolver } from "../../lib/promise";
+    import { fontFamilyKey, fontSizeKey, directionKey } from "../../lib/context-keys";
 
     const [promise, customStylesResolve] = promiseWithResolver<CustomStyles>();
     const [userBaseStyle, userBaseResolve] = promiseWithResolver<StyleObject>();
diff --git a/ts/editor/SetContext.svelte b/ts/editor/rich-text-input/SetContext.svelte
similarity index 100%
rename from ts/editor/SetContext.svelte
rename to ts/editor/rich-text-input/SetContext.svelte
diff --git a/ts/editor/StyleLink.svelte b/ts/editor/rich-text-input/StyleLink.svelte
similarity index 100%
rename from ts/editor/StyleLink.svelte
rename to ts/editor/rich-text-input/StyleLink.svelte
diff --git a/ts/editor/StyleTag.svelte b/ts/editor/rich-text-input/StyleTag.svelte
similarity index 100%
rename from ts/editor/StyleTag.svelte
rename to ts/editor/rich-text-input/StyleTag.svelte
diff --git a/ts/editor/rich-text-input/index.ts b/ts/editor/rich-text-input/index.ts
new file mode 100644
index 000000000..e85953e9e
--- /dev/null
+++ b/ts/editor/rich-text-input/index.ts
@@ -0,0 +1,5 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+export { default as RichTextInput, getRichTextInput } from "./RichTextInput.svelte";
+export type { RichTextInputAPI } from "./RichTextInput.svelte";
diff --git a/ts/editor/surround.ts b/ts/editor/surround.ts
index dc307bace..498b17734 100644
--- a/ts/editor/surround.ts
+++ b/ts/editor/surround.ts
@@ -5,7 +5,7 @@ import { get } from "svelte/store";
 import { getSelection, getRange } from "../lib/cross-browser";
 import { surroundNoSplitting, unsurround, findClosest } from "../domlib/surround";
 import type { ElementMatcher, ElementClearer } from "../domlib/surround";
-import type { RichTextInputAPI } from "./RichTextInput.svelte";
+import type { RichTextInputAPI } from "./rich-text-input";
 
 function isSurroundedInner(
     range: AbstractRange,
diff --git a/ts/editor/AddTagBadge.svelte b/ts/editor/tag-editor/AddTagBadge.svelte
similarity index 54%
rename from ts/editor/AddTagBadge.svelte
rename to ts/editor/tag-editor/AddTagBadge.svelte
index 69158dac0..857478291 100644
--- a/ts/editor/AddTagBadge.svelte
+++ b/ts/editor/tag-editor/AddTagBadge.svelte
@@ -3,28 +3,33 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import WithShortcut from "../components/WithShortcut.svelte";
-    import Badge from "../components/Badge.svelte";
-
-    import { withSpan } from "../components/helpers";
+    import { createEventDispatcher } from "svelte";
+    import Badge from "../../components/Badge.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
+    import { getPlatformString } from "../../lib/shortcuts";
     import { tagIcon, addTagIcon } from "./icons";
 
+    const dispatch = createEventDispatcher();
     const tooltip = "Add tag";
+    const keyCombination = "Control+Shift+T";
+
+    function appendTag(): void {
+        dispatch("tagappend");
+    }
 </script>
 
-<WithShortcut shortcut="Control+Shift+T" let:createShortcut let:shortcutLabel>
-    <div class="add-icon">
-        <Badge
-            class="d-flex me-1"
-            tooltip="{tooltip} ({shortcutLabel})"
-            on:click
-            on:mount={withSpan(createShortcut)}
-        >
-            {@html tagIcon}
-            {@html addTagIcon}
-        </Badge>
-    </div>
-</WithShortcut>
+<div class="add-icon">
+    <Badge
+        class="d-flex me-1"
+        tooltip="{tooltip} ({getPlatformString(keyCombination)})"
+        on:click={appendTag}
+    >
+        {@html tagIcon}
+        {@html addTagIcon}
+    </Badge>
+
+    <Shortcut {keyCombination} on:action={appendTag} />
+</div>
 
 <style lang="scss">
     .add-icon {
diff --git a/ts/editor/AutocompleteItem.svelte b/ts/editor/tag-editor/AutocompleteItem.svelte
similarity index 97%
rename from ts/editor/AutocompleteItem.svelte
rename to ts/editor/tag-editor/AutocompleteItem.svelte
index e5764a289..efa8c1a42 100644
--- a/ts/editor/AutocompleteItem.svelte
+++ b/ts/editor/tag-editor/AutocompleteItem.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { onMount, createEventDispatcher } from "svelte";
-    import { pageTheme } from "../sveltelib/theme";
+    import { pageTheme } from "../../sveltelib/theme";
 
     export let id: string | undefined = undefined;
     let className = "";
diff --git a/ts/editor/tag-editor/SelectedTagBadge.svelte b/ts/editor/tag-editor/SelectedTagBadge.svelte
new file mode 100644
index 000000000..a69719758
--- /dev/null
+++ b/ts/editor/tag-editor/SelectedTagBadge.svelte
@@ -0,0 +1,79 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+    import Badge from "../../components/Badge.svelte";
+    import Shortcut from "../../components/Shortcut.svelte";
+    import WithDropdown from "../../components/WithDropdown.svelte";
+    import DropdownMenu from "../../components/DropdownMenu.svelte";
+    import DropdownItem from "../../components/DropdownItem.svelte";
+    import { withSpan } from "../../components/helpers";
+    import { getPlatformString } from "../../lib/shortcuts";
+    import { dotsIcon } from "./icons";
+
+    const dispatch = createEventDispatcher();
+
+    const allLabel = "Select all tags";
+    const allShortcut = "Control+A";
+    const copyLabel = "Copy tags";
+    const copyShortcut = "Control+C";
+    const removeLabel = "Remove tags";
+    const removeShortcut = "Backspace";
+</script>
+
+<WithDropdown let:createDropdown>
+    <div class="more-icon">
+        <Badge class="me-1" on:mount={withSpan(createDropdown)}>{@html dotsIcon}</Badge>
+
+        <DropdownMenu>
+            <DropdownItem
+                on:click={(event) => {
+                    dispatch("tagselectall");
+                    event.stopImmediatePropagation();
+                }}>{allLabel} ({getPlatformString(allShortcut)})</DropdownItem
+            >
+            <Shortcut
+                keyCombination={allShortcut}
+                on:action={(event) => {
+                    dispatch("tagselectall");
+                    event.stopImmediatePropagation();
+                }}
+            />
+
+            <DropdownItem on:click={() => dispatch("tagcopy")}
+                >{copyLabel} ({getPlatformString(copyShortcut)})</DropdownItem
+            >
+            <Shortcut
+                keyCombination={copyShortcut}
+                on:action={() => dispatch("tagcopy")}
+            />
+
+            <DropdownItem on:click={() => dispatch("tagdelete")}
+                >{removeLabel} ({getPlatformString(removeShortcut)})</DropdownItem
+            >
+            <Shortcut
+                keyCombination={removeShortcut}
+                on:action={() => dispatch("tagdelete")}
+            />
+        </DropdownMenu>
+    </div>
+</WithDropdown>
+
+<style lang="scss">
+    .more-icon {
+        line-height: 1;
+
+        :global(svg) {
+            padding-bottom: 2px;
+            cursor: pointer;
+            fill: currentColor;
+            opacity: 0.6;
+        }
+
+        :global(svg:hover) {
+            opacity: 1;
+        }
+    }
+</style>
diff --git a/ts/editor/Tag.svelte b/ts/editor/tag-editor/Tag.svelte
similarity index 97%
rename from ts/editor/Tag.svelte
rename to ts/editor/tag-editor/Tag.svelte
index 3b73fe0e6..89934a8f3 100644
--- a/ts/editor/Tag.svelte
+++ b/ts/editor/tag-editor/Tag.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { onMount, createEventDispatcher } from "svelte";
-    import { pageTheme } from "../sveltelib/theme";
+    import { pageTheme } from "../../sveltelib/theme";
 
     let className: string = "";
     export { className as class };
diff --git a/ts/editor/TagDeleteBadge.svelte b/ts/editor/tag-editor/TagDeleteBadge.svelte
similarity index 87%
rename from ts/editor/TagDeleteBadge.svelte
rename to ts/editor/tag-editor/TagDeleteBadge.svelte
index 15dcd69e2..d6ec16524 100644
--- a/ts/editor/TagDeleteBadge.svelte
+++ b/ts/editor/tag-editor/TagDeleteBadge.svelte
@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import Badge from "../components/Badge.svelte";
+    import Badge from "../../components/Badge.svelte";
     import { deleteIcon } from "./icons";
 
     let className: string = "";
diff --git a/ts/editor/TagEditMode.svelte b/ts/editor/tag-editor/TagEditMode.svelte
similarity index 100%
rename from ts/editor/TagEditMode.svelte
rename to ts/editor/tag-editor/TagEditMode.svelte
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/tag-editor/TagEditor.svelte
similarity index 98%
rename from ts/editor/TagEditor.svelte
rename to ts/editor/tag-editor/TagEditor.svelte
index 872a4db80..0012c5588 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/tag-editor/TagEditor.svelte
@@ -5,13 +5,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { createEventDispatcher, tick } from "svelte";
     import type { Writable } from "svelte/store";
-    import StickyContainer from "../components/StickyContainer.svelte";
+    import ButtonToolbar from "../../components/ButtonToolbar.svelte";
+    import StickyContainer from "../../components/StickyContainer.svelte";
     import TagOptionsBadge from "./TagOptionsBadge.svelte";
     import TagEditMode from "./TagEditMode.svelte";
     import TagInput from "./TagInput.svelte";
     import Tag from "./Tag.svelte";
     import WithAutocomplete from "./WithAutocomplete.svelte";
-    import ButtonToolbar from "../components/ButtonToolbar.svelte";
     import type { Tag as TagType } from "./tags";
     import {
         attachId,
@@ -19,8 +19,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         replaceWithUnicodeSeparator,
         replaceWithColons,
     } from "./tags";
-    import { tags as tagsService } from "../lib/proto";
-    import { execCommand } from "./helpers";
+    import { tags as tagsService } from "../../lib/proto";
+    import { execCommand } from "../helpers";
 
     export let size: number;
     export let wrap: boolean;
@@ -401,7 +401,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             on:tagselectall={selectAllTags}
             on:tagcopy={copySelectedTags}
             on:tagdelete={deleteSelectedTags}
-            on:click={appendEmptyTag}
+            on:tagappend={appendEmptyTag}
         />
     {/if}
 
diff --git a/ts/editor/TagInput.svelte b/ts/editor/tag-editor/TagInput.svelte
similarity index 100%
rename from ts/editor/TagInput.svelte
rename to ts/editor/tag-editor/TagInput.svelte
diff --git a/ts/editor/TagOptionsBadge.svelte b/ts/editor/tag-editor/TagOptionsBadge.svelte
similarity index 98%
rename from ts/editor/TagOptionsBadge.svelte
rename to ts/editor/tag-editor/TagOptionsBadge.svelte
index 91ff918af..3eaf6142a 100644
--- a/ts/editor/TagOptionsBadge.svelte
+++ b/ts/editor/tag-editor/TagOptionsBadge.svelte
@@ -19,6 +19,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             on:tagdelete
         />
     {:else}
-        <AddTagBadge --badge-align="-webkit-baseline-middle" on:click />
+        <AddTagBadge --badge-align="-webkit-baseline-middle" on:tagappend />
     {/if}
 </div>
diff --git a/ts/editor/TagStickyBadge.svelte b/ts/editor/tag-editor/TagStickyBadge.svelte
similarity index 87%
rename from ts/editor/TagStickyBadge.svelte
rename to ts/editor/tag-editor/TagStickyBadge.svelte
index 15dcd69e2..d6ec16524 100644
--- a/ts/editor/TagStickyBadge.svelte
+++ b/ts/editor/tag-editor/TagStickyBadge.svelte
@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import Badge from "../components/Badge.svelte";
+    import Badge from "../../components/Badge.svelte";
     import { deleteIcon } from "./icons";
 
     let className: string = "";
diff --git a/ts/editor/TagWithTooltip.svelte b/ts/editor/tag-editor/TagWithTooltip.svelte
similarity index 94%
rename from ts/editor/TagWithTooltip.svelte
rename to ts/editor/tag-editor/TagWithTooltip.svelte
index 72b9dd407..e86bea7e5 100644
--- a/ts/editor/TagWithTooltip.svelte
+++ b/ts/editor/tag-editor/TagWithTooltip.svelte
@@ -4,12 +4,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import Tag from "./Tag.svelte";
-    import WithTooltip from "../components/WithTooltip.svelte";
+    import WithTooltip from "../../components/WithTooltip.svelte";
 
     import { createEventDispatcher } from "svelte";
-    import { controlPressed, shiftPressed } from "../lib/keys";
+    import { controlPressed, shiftPressed } from "../../lib/keys";
     import { delimChar } from "./tags";
-    import { pageTheme } from "../sveltelib/theme";
+    import { pageTheme } from "../../sveltelib/theme";
 
     export let name: string;
     let className: string = "";
diff --git a/ts/editor/WithAutocomplete.svelte b/ts/editor/tag-editor/WithAutocomplete.svelte
similarity index 97%
rename from ts/editor/WithAutocomplete.svelte
rename to ts/editor/tag-editor/WithAutocomplete.svelte
index 57213b018..50c204f67 100644
--- a/ts/editor/WithAutocomplete.svelte
+++ b/ts/editor/tag-editor/WithAutocomplete.svelte
@@ -4,11 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { createEventDispatcher, tick } from "svelte";
-
     import type Dropdown from "bootstrap/js/dist/dropdown";
-
-    import WithDropdown from "../components/WithDropdown.svelte";
-    import DropdownMenu from "../components/DropdownMenu.svelte";
+    import WithDropdown from "../../components/WithDropdown.svelte";
+    import DropdownMenu from "../../components/DropdownMenu.svelte";
     import AutocompleteItem from "./AutocompleteItem.svelte";
 
     let className: string = "";
diff --git a/ts/editor/tag-editor/icons.ts b/ts/editor/tag-editor/icons.ts
new file mode 100644
index 000000000..287a15e1d
--- /dev/null
+++ b/ts/editor/tag-editor/icons.ts
@@ -0,0 +1,9 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+/// <reference types="../../lib/image-import" />
+
+export { default as tagIcon } from "@mdi/svg/svg/tag.svg";
+export { default as addTagIcon } from "@mdi/svg/svg/tag-plus.svg";
+export { default as dotsIcon } from "@mdi/svg/svg/dots-vertical.svg";
+export { default as deleteIcon } from "bootstrap-icons/icons/x.svg";
diff --git a/ts/editor/tag-editor/index.ts b/ts/editor/tag-editor/index.ts
new file mode 100644
index 000000000..562700117
--- /dev/null
+++ b/ts/editor/tag-editor/index.ts
@@ -0,0 +1,4 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+export { default as TagEditor } from "./TagEditor.svelte";
diff --git a/ts/editor/tags.ts b/ts/editor/tag-editor/tags.ts
similarity index 100%
rename from ts/editor/tags.ts
rename to ts/editor/tag-editor/tags.ts
diff --git a/ts/editor/tsconfig.json b/ts/editor/tsconfig.json
index 830ad7ccc..35aa6a900 100644
--- a/ts/editor/tsconfig.json
+++ b/ts/editor/tsconfig.json
@@ -1,6 +1,14 @@
 {
     "extends": "../tsconfig.json",
-    "include": ["*", "image-overlay/*", "mathjax-overlay/*"],
+    "include": [
+        "*",
+        "image-overlay/*",
+        "mathjax-overlay/*",
+        "plain-text-input/*",
+        "rich-text-input/*",
+        "editor-toolbar/*",
+        "tag-editor/*"
+    ],
     "references": [
         { "path": "../components" },
         { "path": "../domlib" },