From 928f486867abdf470ec1a7777ac68e434366dc47 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 19:26:50 +0200
Subject: [PATCH] Add ButtonToolbarItem as interface for modifying button
 groups

---
 ts/components/ButtonGroup.svelte       |  5 +-
 ts/components/ButtonToolbar.svelte     | 67 +++++++++++++++++++++++++-
 ts/components/ButtonToolbarItem.svelte | 44 +++++++++++++++++
 ts/components/buttons.ts               |  4 ++
 ts/components/contextKeys.ts           |  1 +
 ts/editor/ColorButtons.svelte          |  2 +-
 ts/editor/EditorToolbar.svelte         | 28 ++++++++---
 ts/editor/FormatBlockButtons.svelte    |  2 +-
 ts/editor/FormatInlineButtons.svelte   |  2 +-
 ts/editor/NoteTypeButtons.svelte       |  2 +-
 ts/editor/TemplateButtons.svelte       |  2 +-
 11 files changed, 145 insertions(+), 14 deletions(-)
 create mode 100644 ts/components/ButtonToolbarItem.svelte

diff --git a/ts/components/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte
index 8f10d89e5..472be9f42 100644
--- a/ts/components/ButtonGroup.svelte
+++ b/ts/components/ButtonGroup.svelte
@@ -63,7 +63,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         const hideButton = (id: Identifier) =>
             updateRegistration(({ detach }) => detach.set(true), id);
         const toggleButton = (id: Identifier) =>
-            updateRegistration(({ detach }) => detach.update((old) => !old), id);
+            updateRegistration(
+                ({ detach }) => detach.update((old: boolean): boolean => !old),
+                id
+            );
 
         Object.assign(api, {
             insertButton,
diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
index 82104ee05..3342c90a9 100644
--- a/ts/components/ButtonToolbar.svelte
+++ b/ts/components/ButtonToolbar.svelte
@@ -3,13 +3,76 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import { setContext } from "svelte";
+    import { writable } from "svelte/store";
+    import ButtonToolbarItem from "./ButtonToolbarItem.svelte";
+    import type { ButtonGroupRegistration } from "./buttons";
+    import { buttonToolbarKey } from "./contextKeys";
+    import type { Identifier } from "./identifier";
+    import { insert, add } from "./identifier";
+    import type { SvelteComponent } from "./registration";
+    import { makeInterface } from "./registration";
+
     export let id: string | undefined = undefined;
-    let className: string | undefined;
+    let className: string = "";
     export { className as class };
 
     export let nowrap = false;
+
+    function makeRegistration(): ButtonGroupRegistration {
+        const detach = writable(false);
+        return { detach };
+    }
+
+    const { registerComponent, dynamicItems, getDynamicInterface } = makeInterface(
+        makeRegistration
+    );
+
+    setContext(buttonToolbarKey, registerComponent);
+
+    export let api = {};
+    let buttonToolbarRef: HTMLDivElement;
+
+    $: if (buttonToolbarRef) {
+        const { addComponent, updateRegistration } = getDynamicInterface(
+            buttonToolbarRef
+        );
+
+        const insertGroup = (button: SvelteComponent, position: Identifier = 0) =>
+            addComponent(button, (added, parent) => insert(added, parent, position));
+        const appendGroup = (button: SvelteComponent, position: Identifier = -1) =>
+            addComponent(button, (added, parent) => add(added, parent, position));
+
+        const showGroup = (id: Identifier) =>
+            updateRegistration(({ detach }) => detach.set(false), id);
+        const hideGroup = (id: Identifier) =>
+            updateRegistration(({ detach }) => detach.set(true), id);
+        const toggleGroup = (id: Identifier) =>
+            updateRegistration(
+                ({ detach }) => detach.update((old: boolean): boolean => !old),
+                id
+            );
+
+        Object.assign(api, {
+            insertGroup,
+            appendGroup,
+            showGroup,
+            hideGroup,
+            toggleGroup,
+        });
+    }
 </script>
 
-<div {id} class={`btn-toolbar ${className}`} class:flex-nowrap={nowrap} role="toolbar">
+<div
+    bind:this={buttonToolbarRef}
+    {id}
+    class={`btn-toolbar ${className}`}
+    class:flex-nowrap={nowrap}
+    role="toolbar">
     <slot />
+    {#each $dynamicItems as item}
+        <ButtonToolbarItem id={item[0].id} registration={item[1]}>
+            <svelte:component this={item[0].component} {...item[0].props} />
+        </ButtonToolbarItem>
+    {/each}
 </div>
diff --git a/ts/components/ButtonToolbarItem.svelte b/ts/components/ButtonToolbarItem.svelte
new file mode 100644
index 000000000..7034d5838
--- /dev/null
+++ b/ts/components/ButtonToolbarItem.svelte
@@ -0,0 +1,44 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import Detachable from "components/Detachable.svelte";
+
+    import type { ButtonGroupRegistration } from "./buttons";
+    import type { Register } from "./registration";
+
+    import { getContext, hasContext } from "svelte";
+    import { buttonToolbarKey } from "./contextKeys";
+
+    export let id: string | undefined = undefined;
+    export let registration: ButtonGroupRegistration | undefined = undefined;
+
+    let detach_: boolean;
+
+    if (registration) {
+        const { detach } = registration;
+        detach.subscribe((value: boolean) => (detach_ = value));
+    } else if (hasContext(buttonToolbarKey)) {
+        const registerComponent = getContext<Register<ButtonGroupRegistration>>(
+            buttonToolbarKey
+        );
+        const { detach } = registerComponent();
+        detach.subscribe((value: boolean) => (detach_ = value));
+    } else {
+        detach_ = false;
+    }
+</script>
+
+<style lang="scss">
+    div {
+        display: contents;
+    }
+</style>
+
+<!-- div is necessary to preserve item position -->
+<div {id}>
+    <Detachable detach={detach_}>
+        <slot />
+    </Detachable>
+</div>
diff --git a/ts/components/buttons.ts b/ts/components/buttons.ts
index dd78918b0..abe6ee34e 100644
--- a/ts/components/buttons.ts
+++ b/ts/components/buttons.ts
@@ -13,3 +13,7 @@ export interface ButtonRegistration {
     detach: Writable<boolean>;
     position: Writable<ButtonPosition>;
 }
+
+export interface ButtonGroupRegistration {
+    detach: Writable<boolean>;
+}
diff --git a/ts/components/contextKeys.ts b/ts/components/contextKeys.ts
index bbf71738c..10979427f 100644
--- a/ts/components/contextKeys.ts
+++ b/ts/components/contextKeys.ts
@@ -3,5 +3,6 @@
 export const nightModeKey = Symbol("nightMode");
 export const disabledKey = Symbol("disabled");
 
+export const buttonToolbarKey = Symbol("buttonToolbar");
 export const buttonGroupKey = Symbol("buttonGroup");
 export const dropdownKey = Symbol("dropdown");
diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index 9c15bb22d..73a0e22e8 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ButtonGroup id="color" {api}>
+<ButtonGroup {api}>
     <ButtonGroupItem>
         <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
             <IconButton
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index bf43f31ba..434d1ba36 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -48,6 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import WithTheming from "components/WithTheming.svelte";
     import StickyBar from "components/StickyBar.svelte";
     import ButtonToolbar from "components/ButtonToolbar.svelte";
+    import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
 
     import NoteTypeButtons from "./NoteTypeButtons.svelte";
     import FormatInlineButtons from "./FormatInlineButtons.svelte";
@@ -55,6 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ColorButtons from "./ColorButtons.svelte";
     import TemplateButtons from "./TemplateButtons.svelte";
 
+    export const toolbar = {};
     export const notetypeButtons = {};
     export const formatInlineButtons = {};
     export const formatBlockButtons = {};
@@ -76,12 +78,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <WithTheming {style}>
     <StickyBar>
-        <ButtonToolbar>
-            <NoteTypeButtons api={notetypeButtons} />
-            <FormatInlineButtons api={formatInlineButtons} />
-            <FormatBlockButtons api={formatBlockButtons} />
-            <ColorButtons api={colorButtons} />
-            <TemplateButtons api={templateButtons} />
+        <ButtonToolbar api={toolbar}>
+            <ButtonToolbarItem id="notetype">
+                <NoteTypeButtons api={notetypeButtons} />
+            </ButtonToolbarItem>
+
+            <ButtonToolbarItem id="inlineFormatting">
+                <FormatInlineButtons api={formatInlineButtons} />
+            </ButtonToolbarItem>
+
+            <ButtonToolbarItem id="blockFormatting">
+                <FormatBlockButtons api={formatBlockButtons} />
+            </ButtonToolbarItem>
+
+            <ButtonToolbarItem id="color">
+                <ColorButtons api={colorButtons} />
+            </ButtonToolbarItem>
+
+            <ButtonToolbarItem id="template">
+                <TemplateButtons api={templateButtons} />
+            </ButtonToolbarItem>
         </ButtonToolbar>
     </StickyBar>
 </WithTheming>
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/FormatBlockButtons.svelte
index 39c0a9857..96b8a04c8 100644
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/FormatBlockButtons.svelte
@@ -43,7 +43,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ButtonGroup id="blockFormatting" {api}>
+<ButtonGroup {api}>
     <ButtonGroupItem>
         <WithState
             key="insertUnorderedList"
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/FormatInlineButtons.svelte
index f0f523c32..f09e11da7 100644
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/FormatInlineButtons.svelte
@@ -24,7 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let api = {};
 </script>
 
-<ButtonGroup id="notetype" {api}>
+<ButtonGroup {api}>
     <ButtonGroupItem>
         <WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel>
             <WithState
diff --git a/ts/editor/NoteTypeButtons.svelte b/ts/editor/NoteTypeButtons.svelte
index 5493fcc05..6df705e3b 100644
--- a/ts/editor/NoteTypeButtons.svelte
+++ b/ts/editor/NoteTypeButtons.svelte
@@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let api = {};
 </script>
 
-<ButtonGroup id="notetype" {api}>
+<ButtonGroup {api}>
     <ButtonGroupItem>
         <LabelButton
             disables={false}
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index d473bd93a..a80bc3795 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ButtonGroup id="template" {api}>
+<ButtonGroup {api}>
     <ButtonGroupItem>
         <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
             <IconButton