From 96feba7a3e874cc326dc67238a67e61658600ddd Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Apr 2021 18:36:03 +0200
Subject: [PATCH] Pass in buttons and menus directly as stores

---
 ts/editor-toolbar/EditorToolbar.svelte | 13 ++++++++-----
 ts/editor-toolbar/LabelButton.svelte   |  6 +++---
 ts/editor-toolbar/SelectButton.svelte  |  6 +++---
 ts/editor-toolbar/SquareButton.svelte  |  6 +++---
 ts/editor-toolbar/index.ts             | 15 ++++-----------
 5 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 249d152a6..f6c5ac687 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -6,11 +6,14 @@
     import ButtonGroup from "./ButtonGroup.svelte";
     import type { Buttons } from "./types";
 
-    export let buttons: Buttons = [];
-    export let menus: SvelteComponent[];
+    export let buttons: Readable<Buttons>;
+    export let menus: Readable<SvelteComponent[]>;
+    export let disabled: Readable<boolean>;
+
+    $: _buttons = $buttons;
+    $: _menus = $menus;
 
     export let nightMode: boolean;
-    export let disabled: Readable<boolean> = false;
     export let size: number = 30;
 
     setContext(nightModeKey, nightMode);
@@ -42,12 +45,12 @@
 
 <div style={`--toolbar-size: ${size}px`}>
     <div>
-        {#each menus as menu}
+        {#each _menus as menu}
             <svelte:component this={menu.component} {...menu} />
         {/each}
     </div>
 
     <nav>
-        <ButtonGroup {buttons} />
+        <ButtonGroup buttons={_buttons} />
     </nav>
 </div>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 8bc6cab64..c83f4ce16 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -20,8 +20,8 @@
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
 
-    const disabledStore = getContext(disabledKey);
-    $: disabled = disables && $disabledStore;
+    const disabled = getContext(disabledKey);
+    $: _disabled = disables && $disabled;
 </script>
 
 <style lang="scss">
@@ -54,7 +54,7 @@
 <button
     tabindex="-1"
     bind:this={buttonRef}
-    {disabled}
+    disabled={_disabled}
     {id}
     class={extendClassName(className)}
     {...props}
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index 0688c99a3..825b8ff3f 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -27,8 +27,8 @@
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
 
-    const disabledStore = getContext(disabledKey);
-    $: disabled = disables && $disabledStore;
+    const disabled = getContext(disabledKey);
+    $: _disabled = disables && $disabled;
 </script>
 
 <style lang="scss">
@@ -57,7 +57,7 @@
 <select
     tabindex="-1"
     bind:this={buttonRef}
-    {disabled}
+    disabled={_disabled}
     {id}
     class={extendClassName(className)}
     {...props}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index af924fc09..ad963ec2a 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -13,8 +13,8 @@
 
     let buttonRef: HTMLButtonElement;
 
-    const disabledStore = getContext(disabledKey);
-    $: disabled = $disabledStore;
+    const disabled = getContext(disabledKey);
+    $: _disabled = $disabled;
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
@@ -89,7 +89,7 @@
     {title}
     class:active
     tabindex="-1"
-    {disabled}
+    disabled={_disabled}
     on:click={onClick}
     on:mousedown|preventDefault>
     <span class="p-1"><slot /></span>
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index b30448000..ac6a52218 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -20,8 +20,8 @@ const defaultMenus = [...templateMenus];
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;
 
-    buttons = defaultButtons;
-    menus = defaultMenus;
+    buttons = writable(defaultButtons);
+    menus = writable(defaultMenus);
     disabled? = writable(false);
 
     connectedCallback(): void {
@@ -38,19 +38,12 @@ class EditorToolbar extends HTMLElement {
         });
     }
 
-    update(): void {
-        this.component?.$set({
-            button: this.buttons,
-            menus: this.menus,
-        });
-    }
-
     enableButtons(): void {
-        this.disabled?.set(false);
+        this.disabled!.set(false);
     }
 
     disableButtons(): void {
-        this.disabled?.set(true);
+        this.disabled!.set(true);
     }
 }