Disable Bold button in Codable

ts/components/IconButton.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 lang="typescript">
-    import type { Readable } from "svelte/store";
     import { getContext, onMount, createEventDispatcher } from "svelte";
-    import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
+    import { nightModeKey, dropdownKey } from "./contextKeys";
     import type { DropdownProps } from "./dropdown";
 
     export let id: string | undefined = undefined;
@@ -14,7 +13,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let tooltip: string | undefined = undefined;
     export let active = false;
-    export let disables = true;
+    export let disabled = false;
+    export const disables = false; /* unused */
     export let tabbable = false;
 
     export let iconSize: number = 75;
@@ -22,9 +22,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let buttonRef: HTMLButtonElement;
 
-    const disabled = getContext<Readable<boolean>>(disabledKey);
-    $: _disabled = disables && $disabled;
-
     const nightMode = getContext<boolean>(nightModeKey);
     const dropdownProps = getContext<DropdownProps>(dropdownKey) ?? { dropdown: false };
 
@@ -43,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     style={`--icon-size: ${iconSize}%`}
     title={tooltip}
     {...dropdownProps}
-    disabled={_disabled}
+    {disabled}
     tabindex={tabbable ? 0 : -1}
     on:click
     on:mousedown|preventDefault

ts/components/WithContext.svelte

@@ -0,0 +1,16 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import type { Readable } from "svelte/store";
+    import { getContext } from "svelte";
+
+    type T = unknown;
+
+    export let key: Symbol | string;
+
+    const store = getContext<Readable<T>>(key);
+</script>
+
+<slot context={$store} />

ts/components/WithState.svelte

@@ -5,14 +5,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript" context="module">
     import { writable } from "svelte/store";
 
-    type UpdaterMap = Map<string, (event: Event) => boolean>;
-    type StateMap = Map<string, boolean>;
+    type KeyType = Symbol | string;
+    type UpdaterMap = Map<KeyType, (event: Event) => boolean>;
+    type StateMap = Map<KeyType, boolean>;
 
     const updaterMap = new Map() as UpdaterMap;
     const stateMap = new Map() as StateMap;
     const stateStore = writable(stateMap);
 
-    function updateAllStateWithCallback(callback: (key: string) => boolean): void {
+    function updateAllStateWithCallback(callback: (key: KeyType) => boolean): void {
         stateStore.update((map: StateMap): StateMap => {
             const newMap = new Map() as StateMap;
 
@@ -25,7 +26,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     export function updateAllState(event: Event): void {
-        updateAllStateWithCallback((key: string): boolean =>
+        updateAllStateWithCallback((key: KeyType): boolean =>
             updaterMap.get(key)!(event)
         );
     }
@@ -34,7 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         updateAllStateWithCallback((): boolean => state);
     }
 
-    function updateStateByKey(key: string, event: Event): void {
+    function updateStateByKey(key: KeyType, event: Event): void {
         stateStore.update((map: StateMap): StateMap => {
             map.set(key, updaterMap.get(key)!(event));
             return map;
@@ -43,7 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="typescript">
-    export let key: string;
+    export let key: KeyType;
     export let update: (event: Event) => boolean;
 
     let state: boolean = false;

ts/editor/FormatInlineButtons.svelte

@@ -8,8 +8,9 @@ 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 WithState from "components/WithState.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
+    import WithContext from "components/WithContext.svelte";
+    import WithState from "components/WithState.svelte";
 
     import {
         boldIcon,
@@ -20,6 +21,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         eraserIcon,
     } from "./icons";
     import { appendInParentheses } from "./helpers";
+    import { disabledKey } from "components/contextKeys";
+    import { inCodableKey } from "./contextKeys";
 
     export let api = {};
 </script>
@@ -27,24 +30,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <ButtonGroup {api}>
     <ButtonGroupItem>
         <WithShortcut shortcut={"Control+B"} let:createShortcut let:shortcutLabel>
-            <WithState
-                key="bold"
-                update={() => document.queryCommandState("bold")}
-                let:state={active}
-                let:updateState
-            >
-                <IconButton
-                    tooltip={appendInParentheses(tr.editingBoldText(), shortcutLabel)}
-                    {active}
-                    on:click={(event) => {
-                        document.execCommand("bold");
-                        updateState(event);
-                    }}
-                    on:mount={createShortcut}
-                >
-                    {@html boldIcon}
-                </IconButton>
-            </WithState>
+            <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>
     </ButtonGroupItem>
 

ts/editor/codable.ts

@@ -9,6 +9,8 @@ import "codemirror/addon/fold/xml-fold";
 import "codemirror/addon/edit/matchtags.js";
 import "codemirror/addon/edit/closetag.js";
 
+import { setCodableButtons } from "./toolbar";
+
 const codeMirrorOptions = {
     mode: "htmlmixed",
     theme: "monokai",
@@ -64,6 +66,7 @@ export class Codable extends HTMLTextAreaElement {
 
     focus(): void {
         this.codeMirror.focus();
+        setCodableButtons();
     }
 
     caretToEnd(): void {

ts/editor/contextKeys.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 const inCodableKey = Symbol("inCodable");

ts/editor/editable.ts

@@ -3,6 +3,7 @@
 
 import { bridgeCommand } from "./lib";
 import { nodeIsInline, caretToEnd, getBlockElement } from "./helpers";
+import { setEditableButtons } from "./toolbar";
 
 function containsInlineContent(field: Element): boolean {
     if (field.childNodes.length === 0) {
@@ -38,6 +39,11 @@ export class Editable extends HTMLElement {
         this.setAttribute("contenteditable", "");
     }
 
+    focus() {
+        super.focus();
+        setEditableButtons();
+    }
+
     caretToEnd() {
         caretToEnd(this);
     }

ts/editor/toolbar.ts

@@ -7,12 +7,14 @@
  */
 
 import { disabledKey, nightModeKey } from "components/contextKeys";
+import { inCodableKey } from "./contextKeys";
 import { writable } from "svelte/store";
 
 import EditorToolbar from "./EditorToolbar.svelte";
 import "./bootstrap.css";
 
 const disabled = writable(false);
+const inCodable = writable(false);
 
 export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
     let toolbarResolve: (value: EditorToolbar) => void;
@@ -27,6 +29,7 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
 
             const context = new Map();
             context.set(disabledKey, disabled);
+            context.set(inCodableKey, inCodable);
             context.set(
                 nightModeKey,
                 document.documentElement.classList.contains("night-mode")
@@ -47,6 +50,14 @@ export function disableButtons(): void {
     disabled.set(true);
 }
 
+export function setCodableButtons(): void {
+    inCodable.set(true);
+}
+
+export function setEditableButtons(): void {
+    inCodable.set(false);
+}
+
 export {
     updateActiveButtons,
     clearActiveButtons,