diff --git a/ts/components/WithContext.svelte b/ts/components/WithContext.svelte
index 111da8c1e..5cfba6123 100644
--- a/ts/components/WithContext.svelte
+++ b/ts/components/WithContext.svelte
@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Readable } from "svelte/store";
     import { getContext } from "svelte";
 
-    type T = unknown;
+    type T = boolean;
 
     export let key: Symbol | string;
 
diff --git a/ts/editor/CommandIconButton.svelte b/ts/editor/CommandIconButton.svelte
new file mode 100644
index 000000000..4781d2ccc
--- /dev/null
+++ b/ts/editor/CommandIconButton.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="typescript">
+    import IconButton from "components/IconButton.svelte";
+    import WithShortcut from "components/WithShortcut.svelte";
+    import WithState from "components/WithState.svelte";
+    import OnlyEditable from "./OnlyEditable.svelte";
+
+    import { appendInParentheses } from "./helpers";
+
+    export let key: string;
+    export let tooltip: string;
+    export let shortcut: string = "";
+
+    export let withoutShortcut = false;
+    export let withoutState = false;
+</script>
+
+<OnlyEditable let:disabled>
+    {#if withoutShortcut && withoutState}
+        <IconButton {tooltip} {disabled} on:click={() => document.execCommand(key)}>
+            <slot />
+        </IconButton>
+    {:else if withoutShortcut}
+        <WithState
+            {key}
+            update={() => document.queryCommandState(key)}
+            let:state={active}
+            let:updateState
+        >
+            <IconButton
+                {tooltip}
+                {active}
+                {disabled}
+                on:click={(event) => {
+                    document.execCommand(key);
+                    updateState(event);
+                }}
+            >
+                <slot />
+            </IconButton>
+        </WithState>
+    {:else if withoutState}
+        <WithShortcut {shortcut} let:createShortcut let:shortcutLabel>
+            <IconButton
+                tooltip={appendInParentheses(tooltip, shortcutLabel)}
+                {disabled}
+                on:click={() => document.execCommand(key)}
+                on:mount={createShortcut}
+            >
+                <slot />
+            </IconButton>
+        </WithShortcut>
+    {:else}
+        <WithShortcut {shortcut} let:createShortcut let:shortcutLabel>
+            <WithState
+                {key}
+                update={() => document.queryCommandState(key)}
+                let:state={active}
+                let:updateState
+            >
+                <IconButton
+                    tooltip={appendInParentheses(tooltip, shortcutLabel)}
+                    {active}
+                    {disabled}
+                    on:click={(event) => {
+                        document.execCommand(key);
+                        updateState(event);
+                    }}
+                    on:mount={createShortcut}
+                >
+                    <slot />
+                </IconButton>
+            </WithState>
+        </WithShortcut>
+    {/if}
+</OnlyEditable>
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/FormatBlockButtons.svelte
index 358b02ad5..f1d4376ea 100644
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/FormatBlockButtons.svelte
@@ -11,8 +11,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import IconButton from "components/IconButton.svelte";
     import ButtonDropdown from "components/ButtonDropdown.svelte";
     import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
-    import WithState from "components/WithState.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
+    import OnlyEditable from "./OnlyEditable.svelte";
+    import CommandIconButton from "./CommandIconButton.svelte";
 
     import { getListItem } from "./helpers";
     import {
@@ -46,134 +47,66 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <ButtonGroup {api}>
     <ButtonGroupItem>
-        <WithState
+        <CommandIconButton
             key="insertUnorderedList"
-            update={() => document.queryCommandState("insertUnorderedList")}
-            let:state={active}
-            let:updateState
+            tooltip={tr.editingUnorderedList()}
+            withoutShortcut>{@html ulIcon}</CommandIconButton
         >
-            <IconButton
-                tooltip={tr.editingUnorderedList()}
-                {active}
-                on:click={(event) => {
-                    document.execCommand("insertUnorderedList");
-                    updateState(event);
-                }}
-            >
-                {@html ulIcon}
-            </IconButton>
-        </WithState>
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithState
+        <CommandIconButton
             key="insertOrderedList"
-            update={() => document.queryCommandState("insertOrderedList")}
-            let:state={active}
-            let:updateState
+            tooltip={tr.editingOrderedList()}
+            withoutShortcut>{@html olIcon}</CommandIconButton
         >
-            <IconButton
-                tooltip={tr.editingOrderedList()}
-                {active}
-                on:click={(event) => {
-                    document.execCommand("insertOrderedList");
-                    updateState(event);
-                }}
-            >
-                {@html olIcon}
-            </IconButton>
-        </WithState>
     </ButtonGroupItem>
 
     <ButtonGroupItem>
         <WithDropdownMenu let:createDropdown let:menuId>
-            <IconButton on:mount={createDropdown}>
-                {@html listOptionsIcon}
-            </IconButton>
+            <OnlyEditable let:disabled>
+                <IconButton {disabled} on:mount={createDropdown}>
+                    {@html listOptionsIcon}
+                </IconButton>
+            </OnlyEditable>
 
             <ButtonDropdown id={menuId}>
                 <ButtonToolbarItem id="justify">
                     <ButtonGroup>
                         <ButtonGroupItem>
-                            <WithState
+                            <CommandIconButton
                                 key="justifyLeft"
-                                update={() => document.queryCommandState("justifyLeft")}
-                                let:state={active}
-                                let:updateState
+                                tooltip={tr.editingAlignLeft()}
+                                withoutShortcut
+                                >{@html justifyLeftIcon}</CommandIconButton
                             >
-                                <IconButton
-                                    tooltip={tr.editingAlignLeft()}
-                                    {active}
-                                    on:click={(event) => {
-                                        document.execCommand("justifyLeft");
-                                        updateState(event);
-                                    }}
-                                >
-                                    {@html justifyLeftIcon}
-                                </IconButton>
-                            </WithState>
                         </ButtonGroupItem>
 
                         <ButtonGroupItem>
-                            <WithState
+                            <CommandIconButton
                                 key="justifyCenter"
-                                update={() =>
-                                    document.queryCommandState("justifyCenter")}
-                                let:state={active}
-                                let:updateState
+                                tooltip={tr.editingCenter()}
+                                withoutShortcut
+                                >{@html justifyCenterIcon}</CommandIconButton
                             >
-                                <IconButton
-                                    tooltip={tr.editingCenter()}
-                                    {active}
-                                    on:click={(event) => {
-                                        document.execCommand("justifyCenter");
-                                        updateState(event);
-                                    }}
-                                >
-                                    {@html justifyCenterIcon}
-                                </IconButton>
-                            </WithState>
                         </ButtonGroupItem>
 
                         <ButtonGroupItem>
-                            <WithState
+                            <CommandIconButton
                                 key="justifyRight"
-                                update={() =>
-                                    document.queryCommandState("justifyRight")}
-                                let:state={active}
-                                let:updateState
+                                tooltip={tr.editingAlignRight()}
+                                withoutShortcut
+                                >{@html justifyRightIcon}</CommandIconButton
                             >
-                                <IconButton
-                                    tooltip={tr.editingAlignRight()}
-                                    {active}
-                                    on:click={(event) => {
-                                        document.execCommand("justifyRight");
-                                        updateState(event);
-                                    }}
-                                >
-                                    {@html justifyRightIcon}
-                                </IconButton>
-                            </WithState>
                         </ButtonGroupItem>
 
                         <ButtonGroupItem>
-                            <WithState
+                            <CommandIconButton
                                 key="justifyFull"
-                                update={() => document.queryCommandState("justifyFull")}
-                                let:state={active}
-                                let:updateState
+                                tooltip={tr.editingJustify()}
+                                withoutShortcut
+                                >{@html justifyFullIcon}</CommandIconButton
                             >
-                                <IconButton
-                                    tooltip={tr.editingJustify()}
-                                    {active}
-                                    on:click={(event) => {
-                                        document.execCommand("justifyFull");
-                                        updateState(event);
-                                    }}
-                                >
-                                    {@html justifyFullIcon}
-                                </IconButton>
-                            </WithState>
                         </ButtonGroupItem>
                     </ButtonGroup>
                 </ButtonToolbarItem>
@@ -181,21 +114,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <ButtonToolbarItem id="indentation">
                     <ButtonGroup>
                         <ButtonGroupItem>
-                            <IconButton
-                                on:click={outdentListItem}
-                                tooltip={tr.editingOutdent()}
-                            >
-                                {@html outdentIcon}
-                            </IconButton>
+                            <OnlyEditable let:disabled>
+                                <IconButton
+                                    on:click={outdentListItem}
+                                    tooltip={tr.editingOutdent()}
+                                    {disabled}
+                                >
+                                    {@html outdentIcon}
+                                </IconButton>
+                            </OnlyEditable>
                         </ButtonGroupItem>
 
                         <ButtonGroupItem>
-                            <IconButton
-                                on:click={indentListItem}
-                                tooltip={tr.editingIndent()}
-                            >
-                                {@html indentIcon}
-                            </IconButton>
+                            <OnlyEditable let:disabled>
+                                <IconButton
+                                    on:click={indentListItem}
+                                    tooltip={tr.editingIndent()}
+                                    {disabled}
+                                >
+                                    {@html indentIcon}
+                                </IconButton>
+                            </OnlyEditable>
                         </ButtonGroupItem>
                     </ButtonGroup>
                 </ButtonToolbarItem>
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/FormatInlineButtons.svelte
index 1758ce1c5..47032b74e 100644
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/FormatInlineButtons.svelte
@@ -7,10 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
-    import IconButton from "components/IconButton.svelte";
-    import WithShortcut from "components/WithShortcut.svelte";
-    import WithContext from "components/WithContext.svelte";
-    import WithState from "components/WithState.svelte";
+    import CommandIconButton from "./CommandIconButton.svelte";
 
     import {
         boldIcon,
@@ -20,157 +17,57 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         subscriptIcon,
         eraserIcon,
     } from "./icons";
-    import { appendInParentheses } from "./helpers";
-    import { disabledKey } from "components/contextKeys";
-    import { inCodableKey } from "./contextKeys";
 
     export let api = {};
 </script>
 
 <ButtonGroup {api}>
     <ButtonGroupItem>
-        <WithShortcut shortcut={"Control+B"} let:createShortcut let:shortcutLabel>
-            <WithContext key={disabledKey} let:context={disabled}>
-                <WithContext key={inCodableKey} let:context={inCodable}>
-                    <WithState
-                        key="bold"
-                        update={() => document.queryCommandState("bold")}
-                        let:state={active}
-                        let:updateState
-                    >
-                        <IconButton
-                            tooltip={appendInParentheses(
-                                tr.editingBoldText(),
-                                shortcutLabel
-                            )}
-                            {active}
-                            disabled={disabled || inCodable}
-                            on:click={(event) => {
-                                document.execCommand("bold");
-                                updateState(event);
-                            }}
-                            on:mount={createShortcut}
-                        >
-                            {@html boldIcon}
-                        </IconButton>
-                    </WithState>
-                </WithContext>
-            </WithContext>
-        </WithShortcut>
+        <CommandIconButton
+            key="bold"
+            shortcut={"Control+B"}
+            tooltip={tr.editingBoldText()}>{@html boldIcon}</CommandIconButton
+        >
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithShortcut shortcut={"Control+I"} let:createShortcut let:shortcutLabel>
-            <WithState
-                key="italic"
-                update={() => document.queryCommandState("italic")}
-                let:state={active}
-                let:updateState
-            >
-                <IconButton
-                    tooltip={appendInParentheses(tr.editingItalicText(), shortcutLabel)}
-                    {active}
-                    on:click={(event) => {
-                        document.execCommand("italic");
-                        updateState(event);
-                    }}
-                    on:mount={createShortcut}
-                >
-                    {@html italicIcon}
-                </IconButton>
-            </WithState>
-        </WithShortcut>
+        <CommandIconButton
+            key="italic"
+            shortcut={"Control+I"}
+            tooltip={tr.editingItalicText()}>{@html italicIcon}</CommandIconButton
+        >
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithShortcut shortcut={"Control+U"} let:createShortcut let:shortcutLabel>
-            <WithState
-                key="underline"
-                update={() => document.queryCommandState("underline")}
-                let:state={active}
-                let:updateState
-            >
-                <IconButton
-                    tooltip={appendInParentheses(
-                        tr.editingUnderlineText(),
-                        shortcutLabel
-                    )}
-                    {active}
-                    on:click={(event) => {
-                        document.execCommand("underline");
-                        updateState(event);
-                    }}
-                    on:mount={createShortcut}
-                >
-                    {@html underlineIcon}
-                </IconButton>
-            </WithState>
-        </WithShortcut>
+        <CommandIconButton
+            key="underline"
+            shortcut={"Control+U"}
+            tooltip={tr.editingUnderlineText()}>{@html underlineIcon}</CommandIconButton
+        >
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithShortcut shortcut={"Control+="} let:createShortcut let:shortcutLabel>
-            <WithState
-                key="superscript"
-                update={() => document.queryCommandState("superscript")}
-                let:state={active}
-                let:updateState
-            >
-                <IconButton
-                    tooltip={appendInParentheses(
-                        tr.editingSuperscript(),
-                        shortcutLabel
-                    )}
-                    {active}
-                    on:click={(event) => {
-                        document.execCommand("superscript");
-                        updateState(event);
-                    }}
-                    on:mount={createShortcut}
-                >
-                    {@html superscriptIcon}
-                </IconButton>
-            </WithState>
-        </WithShortcut>
+        <CommandIconButton
+            key="superscript"
+            shortcut={"Control+="}
+            tooltip={tr.editingSuperscript()}>{@html superscriptIcon}</CommandIconButton
+        >
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithShortcut shortcut={"Control+Shift+="} let:createShortcut let:shortcutLabel>
-            <WithState
-                key="subscript"
-                update={() => document.queryCommandState("subscript")}
-                let:state={active}
-                let:updateState
-            >
-                <IconButton
-                    tooltip={appendInParentheses(tr.editingSubscript(), shortcutLabel)}
-                    {active}
-                    on:click={(event) => {
-                        document.execCommand("subscript");
-                        updateState(event);
-                    }}
-                    on:mount={createShortcut}
-                >
-                    {@html subscriptIcon}
-                </IconButton>
-            </WithState>
-        </WithShortcut>
+        <CommandIconButton
+            key="subscript"
+            shortcut={"Control+Shift+="}
+            tooltip={tr.editingSubscript()}>{@html subscriptIcon}</CommandIconButton
+        >
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithShortcut shortcut={"Control+R"} let:createShortcut let:shortcutLabel>
-            <IconButton
-                tooltip={appendInParentheses(
-                    tr.editingRemoveFormatting(),
-                    shortcutLabel
-                )}
-                on:click={() => {
-                    document.execCommand("removeFormat");
-                }}
-                on:mount={createShortcut}
-            >
-                {@html eraserIcon}
-            </IconButton>
-        </WithShortcut>
+        <CommandIconButton
+            key="removeFormat"
+            shortcut={"Control+R"}
+            tooltip={tr.editingRemoveFormatting()}
+            withoutState>{@html eraserIcon}</CommandIconButton
+        >
     </ButtonGroupItem>
 </ButtonGroup>
diff --git a/ts/editor/OnlyEditable.svelte b/ts/editor/OnlyEditable.svelte
new file mode 100644
index 000000000..c36bfa86d
--- /dev/null
+++ b/ts/editor/OnlyEditable.svelte
@@ -0,0 +1,15 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import WithContext from "components/WithContext.svelte";
+    import { disabledKey } from "components/contextKeys";
+    import { inCodableKey } from "./contextKeys";
+</script>
+
+<WithContext key={disabledKey} let:context={disabled}>
+    <WithContext key={inCodableKey} let:context={inCodable}>
+        <slot disabled={disabled || inCodable} />
+    </WithContext>
+</WithContext>