From 1eafa7d9d0290705889bd735e9c54a4e76fe0d80 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 9 Apr 2021 22:02:34 +0200
Subject: [PATCH] Remove $$restProps and make explicit dropdown support in
 buttons

* Currently LabelButton, CommandIconButtton, and IconButton support dropdowns
---
 ts/editor-toolbar/ButtonDropdown.svelte    |  4 ++--
 ts/editor-toolbar/ButtonGroup.svelte       |  4 ++--
 ts/editor-toolbar/ColorPicker.svelte       |  3 +--
 ts/editor-toolbar/CommandIconButton.svelte | 14 ++++++++++++--
 ts/editor-toolbar/DropdownItem.svelte      |  3 +--
 ts/editor-toolbar/IconButton.svelte        |  6 ++++--
 ts/editor-toolbar/LabelButton.svelte       | 17 +++++++++++++----
 ts/editor-toolbar/SelectButton.svelte      |  5 ++---
 ts/editor-toolbar/SquareButton.svelte      | 21 +++++++++++++++------
 ts/editor-toolbar/WithDropdownMenu.svelte  |  7 ++++---
 10 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte
index ad050ce22..654e0ca7e 100644
--- a/ts/editor-toolbar/ButtonDropdown.svelte
+++ b/ts/editor-toolbar/ButtonDropdown.svelte
@@ -2,7 +2,7 @@
     import type { ToolbarItem } from "./types";
     import ButtonGroup from "./ButtonGroup.svelte";
 
-    export let id = "";
+    export let id: string;
     export let className = "";
 
     function extendClassName(className: string): string {
@@ -12,4 +12,4 @@
     export let buttons: ToolbarItem[];
 </script>
 
-<ButtonGroup {id} className={extendClassName(className)} {buttons} {...$$restProps} />
+<ButtonGroup {id} className={extendClassName(className)} {buttons} />
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index fd6e38b19..3ae758c5b 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import type { ToolbarItem } from "./types";
 
-    export let id;
+    export let id: string;
     export let className = "";
     export let buttons: ToolbarItem[];
 
@@ -52,7 +52,7 @@
     }
 </style>
 
-<ul {id} class={className} {...$$restProps}>
+<ul {id} class={className}>
     {#each buttons as button}
         {#if !button.hidden}
             <li>
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 703a4f160..9eb4c3ebe 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    export let id = "";
+    export let id: string;
     export let className = "";
     export let tooltip: string;
 
@@ -46,7 +46,6 @@
     {id}
     class={className}
     title={tooltip}
-    {...$$restProps}
     on:mousedown|preventDefault>
     <span> <input type="color" on:change={onChange} /> </span>
 </button>
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 47294d329..5d3efaffb 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -36,13 +36,15 @@
 <script lang="typescript">
     import SquareButton from "./SquareButton.svelte";
 
-    export let id = "";
+    export let id;
     export let className = "";
     export let tooltip: string;
 
     export let icon;
     export let command: string;
     export let activatable = true;
+    export let disables = true;
+    export let dropdownToggle = false;
 
     let active = false;
 
@@ -61,6 +63,14 @@
     }
 </script>
 
-<SquareButton {id} {className} {tooltip} {active} {onClick} {...$$restProps} on:mount>
+<SquareButton
+    {id}
+    {className}
+    {tooltip}
+    {active}
+    {disables}
+    {dropdownToggle}
+    {onClick}
+    on:mount>
     {@html icon}
 </SquareButton>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index 4ef761234..18211e662 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    export let id = "";
+    export let id: string;
     export let className = "";
     export let tooltip: string;
 
@@ -12,7 +12,6 @@
     {id}
     class={`dropdown-item ${className}`}
     title={tooltip}
-    {...$$restProps}
     on:click={onClick}
     on:mousedown|preventDefault>
     <span class="float-start">{label}</span>
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index db2be921b..f8bdc5786 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -1,14 +1,16 @@
 <script lang="typescript">
     import SquareButton from "./SquareButton.svelte";
 
-    export let id = "";
+    export let id: string;
     export let className = "";
     export let tooltip: string;
+    export let disables = true;
+    export let dropdownToggle = false;
 
     export let icon = "";
     export let onClick: (event: MouseEvent) => void;
 </script>
 
-<SquareButton {id} {className} {tooltip} {onClick} {...$$restProps} on:mount>
+<SquareButton {id} {className} {tooltip} {onClick} {disables} {dropdownToggle} on:mount>
     {@html icon}
 </SquareButton>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index c9f1be802..41e43c11a 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -2,13 +2,21 @@
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey } from "./contextKeys";
 
-    export let id = "";
+    export let id: string;
     export let className = "";
 
     export let label: string;
     export let tooltip: string;
     export let onClick: (event: MouseEvent) => void;
     export let disables = true;
+    export let dropdownToggle = false;
+
+    $: extraProps = dropdownToggle
+        ? {
+              "data-bs-toggle": "dropdown",
+              "aria-expanded": "false",
+          }
+        : {};
 
     let buttonRef: HTMLButtonElement;
 
@@ -51,13 +59,14 @@
 </style>
 
 <button
-    tabindex="-1"
     bind:this={buttonRef}
-    disabled={_disabled}
     {id}
     class={extendClassName(className)}
+    class:dropdown-toggle={dropdownToggle}
+    tabindex="-1"
+    disabled={_disabled}
     title={tooltip}
-    {...$$restProps}
+    {...extraProps}
     on:click={onClick}
     on:mousedown|preventDefault>
     {label}
diff --git a/ts/editor-toolbar/SelectButton.svelte b/ts/editor-toolbar/SelectButton.svelte
index 8ec4bcbd1..8b96ce14c 100644
--- a/ts/editor-toolbar/SelectButton.svelte
+++ b/ts/editor-toolbar/SelectButton.svelte
@@ -9,7 +9,7 @@
         selected: boolean;
     }
 
-    export let id = "";
+    export let id: string;
     export let className = "";
     export let tooltip: string;
 
@@ -58,8 +58,7 @@
     disabled={_disabled}
     {id}
     class={extendClassName(className)}
-    title={tooltip}
-    {...$$restProps}>
+    title={tooltip}>
     {#each options as option}
         <SelectOption {...option} />
     {/each}
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 94ce9b731..2cde3fd3e 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -3,17 +3,26 @@
     import type { Readable } from "svelte/store";
     import { disabledKey } from "./contextKeys";
 
-    export let id = "";
+    export let id: string;
     export let className = "";
     export let tooltip: string;
 
     export let onClick: (event: MouseEvent) => void;
     export let active = false;
+    export let disables = true;
+    export let dropdownToggle = false;
+
+    $: extraProps = dropdownToggle
+        ? {
+              "data-bs-toggle": "dropdown",
+              "aria-expanded": "false",
+          }
+        : {};
 
     let buttonRef: HTMLButtonElement;
 
     const disabled = getContext(disabledKey);
-    $: _disabled = $disabled;
+    $: _disabled = disables && $disabled;
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
@@ -74,8 +83,7 @@
         }
     }
 
-    /* for DropdownMenu */
-    :global(.dropdown-toggle)::after {
+    .dropdown-toggle::after {
         margin-right: 0.25rem;
     }
 </style>
@@ -84,11 +92,12 @@
     bind:this={buttonRef}
     {id}
     class={className}
-    title={tooltip}
     class:active
+    class:dropdown-toggle={dropdownToggle}
     tabindex="-1"
+    title={tooltip}
     disabled={_disabled}
-    {...$$restProps}
+    {...extraProps}
     on:click={onClick}
     on:mousedown|preventDefault>
     <span class="p-1"><slot /></span>
diff --git a/ts/editor-toolbar/WithDropdownMenu.svelte b/ts/editor-toolbar/WithDropdownMenu.svelte
index a8d2abbae..d476aad22 100644
--- a/ts/editor-toolbar/WithDropdownMenu.svelte
+++ b/ts/editor-toolbar/WithDropdownMenu.svelte
@@ -1,6 +1,9 @@
 <script lang="typescript">
     import type { ToolbarItem } from "./types";
 
+    /* Bootstrap dropdown are normally declared alongside the associated button
+     * However we cannot do that, as the menus cannot be declared in sticky-positioned elements
+     */
     export let button: ToolbarItem;
     export let menuId: string;
 
@@ -9,9 +12,7 @@
         ...rest
     }: DynamicSvelteComponent): DynamicSvelteComponent {
         return {
-            className: `${className} dropdown-toggle`,
-            "data-bs-toggle": "dropdown",
-            "aria-expanded": "false",
+            dropdownToggle: true,
             ...rest,
         };
     }