Remove $$restProps and make explicit dropdown support in buttons

* Currently LabelButton, CommandIconButtton, and IconButton support dropdowns

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} />

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>

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>

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>

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>

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>

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}

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}
+    title={tooltip}>
-    {...$$restProps}>
     {#each options as option}
         <SelectOption {...option} />
     {/each}

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 */
+    .dropdown-toggle::after {
-    :global(.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>

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`,
+            dropdownToggle: true,
-            "data-bs-toggle": "dropdown",
-            "aria-expanded": "false",
             ...rest,
         };
     }