Add back ColorButtons

ts/components/ColorPicker.svelte

@@ -5,20 +5,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
-    import { mergeTooltipAndShortcut } from "./helpers";
 
     export let id: string;
     export let className = "";
     export let tooltip: string | undefined;
-    export let shortcutLabel: string | undefined;
-
-    $: title = mergeTooltipAndShortcut(tooltip, shortcutLabel);
-
-    export let onChange: (event: Event) => void;
-
-    function extendClassName(className: string): string {
-        return `btn ${className}`;
-    }
 
     const nightMode = getContext(nightModeKey);
 
@@ -68,11 +58,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bind:this={buttonRef}
     tabindex="-1"
     {id}
-    class={extendClassName(className)}
+    class={`btn ${className}`}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
-    {title}
+    title={tooltip}
     on:click={delegateToInput}
     on:mousedown|preventDefault>
-    <input tabindex="-1" bind:this={inputRef} type="color" on:change={onChange} />
+    <input tabindex="-1" bind:this={inputRef} type="color" on:change />
 </button>

ts/editor/ColorButtons.svelte

@@ -15,21 +15,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import "./color.css";
 
     const foregroundColorKeyword = "--foreground-color";
+    let color = "black";
 
-    function setForegroundColor(color: string): void {
+    $: {
         document.documentElement.style.setProperty(foregroundColorKeyword, color);
     }
 
-    function getForecolor(): string {
-        return document.documentElement.style.getPropertyValue(foregroundColorKeyword);
-    }
-
-    function wrapWithForecolor(color: string): void {
+    function wrapWithForecolor(): void {
         document.execCommand("forecolor", false, color);
     }
 
     function setWithCurrentColor({ currentTarget }: Event): void {
-        return setForegroundColor((currentTarget as HTMLInputElement).value);
+        color = (currentTarget as HTMLInputElement).value;
     }
 </script>
 
@@ -38,7 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <IconButton
             class="forecolor"
             tooltip={`${tr.editingSetForegroundColor} (${shortcutLabel})`}
-            on:click={() => wrapWithForecolor(getForecolor())}
+            on:click={wrapWithForecolor}
             on:mount={createShortcut}>
             {@html squareFillIcon}
         </IconButton>

ts/editor/EditorToolbar.svelte

@@ -58,5 +58,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <NoteTypeButtons />
         <FormatInlineButtons />
         <FormatBlockButtons />
+        <ColorButtons />
     </StickyBar>
 </WithTheming>

ts/editor/toolbar.ts

@@ -33,5 +33,13 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
 }
 
 /* Exports for editor */
-// @ts-expect-error insufficient typing of svelte modules
-export { enableButtons, disableButtons, updateActiveButtons, clearActiveButtons } from "./EditorToolbar.svelte";
+export {
+    // @ts-expect-error insufficient typing of svelte modules
+    enableButtons,
+    // @ts-expect-error insufficient typing of svelte modules
+    disableButtons,
+    // @ts-expect-error insufficient typing of svelte modules
+    updateActiveButtons,
+    // @ts-expect-error insufficient typing of svelte modules
+    clearActiveButtons,
+} from "./EditorToolbar.svelte";