Use ButtonGroupItem for all buttons in editor

ts/components/ColorPicker.svelte

@@ -6,21 +6,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
 
-    export let id: string;
+    export let id: string | undefined = undefined;
-    export let className = "";
+    let className = "";
-    export let tooltip: string | undefined;
+    export { className as class };
+
+    export let tooltip: string | undefined = undefined;
 
     const nightMode = getContext(nightModeKey);
 
-    let buttonRef: HTMLButtonElement;
-    let inputRef: HTMLInputElement;
-
     function delegateToInput() {
         inputRef.click();
     }
 
+    let buttonRef: HTMLButtonElement;
+    let inputRef: HTMLInputElement;
+
     const dispatch = createEventDispatcher();
-    onMount(() => dispatch("mount", { button: buttonRef }));
+    onMount(() => dispatch("mount", { button: buttonRef, input: inputRef }));
 </script>
 
 <style lang="scss">
@@ -30,13 +32,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @import "ts/sass/bootstrap/variables";
 
     button {
-        padding: 0;
-
         width: calc(var(--toolbar-size) - 0px);
         height: calc(var(--toolbar-size) - 0px);
 
         padding: 4px;
         overflow: hidden;
+
+        border-top-left-radius: var(--border-left-radius);
+        border-bottom-left-radius: var(--border-left-radius);
+
+        border-top-right-radius: var(--border-right-radius);
+        border-bottom-right-radius: var(--border-right-radius);
     }
 
     @include button.btn-day($with-disabled: false) using ($base) {

ts/components/IconButton.svelte

@@ -7,13 +7,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { getContext, onMount, createEventDispatcher } from "svelte";
     import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
 
-    export let id: string;
+    export let id: string | undefined = undefined;
     let className = "";
     export { className as class };
 
-    export let tooltip: string | undefined;
+    export let tooltip: string | undefined = undefined;
     export let active = false;
     export let disables = true;
+    export let tabbable = false;
 
     let buttonRef: HTMLButtonElement;
 
@@ -21,9 +22,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: _disabled = disables && $disabled;
 
     const nightMode = getContext<boolean>(nightModeKey);
-
+    const dropdownProps = getContext(dropdownKey) ?? { dropdown: false };
-    const dropdown = getContext(dropdownKey);
-    const dropdownProps = dropdown?.getDropdownTriggerProps() ?? {};
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
@@ -34,6 +33,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     button {
         padding: 0;
+
+        border-top-left-radius: var(--border-left-radius);
+        border-bottom-left-radius: var(--border-left-radius);
+
+        border-top-right-radius: var(--border-right-radius);
+        border-bottom-right-radius: var(--border-right-radius);
     }
 
     @include button.btn-day;
@@ -66,13 +71,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {id}
     class={`btn ${className}`}
     class:active
+    class:dropdown-toggle={dropdownProps.dropdown}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
-    tabindex="-1"
     title={tooltip}
-    disabled={_disabled}
-    class:dropdown-toggle={Boolean(dropdown)}
     {...dropdownProps}
+    disabled={_disabled}
+    tabindex={tabbable ? 0 : -1}
     on:click
     on:mousedown|preventDefault>
     <span class="p-1"><slot /></span>

ts/components/LabelButton.svelte

@@ -5,28 +5,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { disabledKey, nightModeKey } from "./contextKeys";
+    import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
 
     export let id: string | undefined = undefined;
     let className: string = "";
     export { className as class };
 
     export let tooltip: string | undefined;
-    export let dropdownToggle = false;
     export let disables = true;
     export let tabbable = false;
 
-    $: dropdownProps = dropdownToggle
-        ? {
-              "data-bs-toggle": "dropdown",
-              "aria-expanded": "false",
-          }
-        : {};
-
     const disabled = getContext<Readable<boolean>>(disabledKey);
     $: _disabled = disables && $disabled;
 
     const nightMode = getContext<boolean>(nightModeKey);
+    const dropdownProps = getContext(dropdownKey) ?? {};
 
     let buttonRef: HTMLButtonElement;
 
@@ -58,7 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bind:this={buttonRef}
     {id}
     class={`btn ${className}`}
-    class:dropdown-toggle={dropdownToggle}
+    class:dropdown-toggle={dropdownProps.dropdown}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
     title={tooltip}

ts/components/WithDropdownMenu.svelte

@@ -9,10 +9,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { dropdownKey } from "./contextKeys";
 
     setContext(dropdownKey, {
-        getDropdownTriggerProps: () => ({
+        dropdown: true,
         "data-bs-toggle": "dropdown",
         "aria-expanded": "false",
-        }),
     });
 
     const menuId = Math.random().toString(36).substring(2);

ts/editor/ColorButtons.svelte

@@ -5,9 +5,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import * as tr from "lib/i18n";
 
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import IconButton from "components/IconButton.svelte";
     import ColorPicker from "components/ColorPicker.svelte";
-    import ButtonGroup from "components/ButtonGroup.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
 
     import { squareFillIcon } from "./icons";
@@ -31,6 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <ButtonGroup id="color">
+    <ButtonGroupItem>
         <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
             <IconButton
                 class="forecolor"
@@ -40,11 +42,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {@html squareFillIcon}
             </IconButton>
         </WithShortcut>
+    </ButtonGroupItem>
 
+    <ButtonGroupItem>
         <WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
             <ColorPicker
                 tooltip={`${tr.editingChangeColor()} (${shortcutLabel})`}
                 on:change={setWithCurrentColor}
                 on:mount={createShortcut} />
         </WithShortcut>
+    </ButtonGroupItem>
 </ButtonGroup>

ts/editor/FormatBlockButtons.svelte

@@ -6,8 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { EditingArea } from "./editingArea";
     import * as tr from "lib/i18n";
 
-    import IconButton from "components/IconButton.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+    import IconButton from "components/IconButton.svelte";
     import ButtonDropdown from "components/ButtonDropdown.svelte";
     import WithState from "components/WithState.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
@@ -43,6 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <ButtonGroup id="blockFormatting" {api}>
+    <ButtonGroupItem>
         <WithState
             key="insertUnorderedList"
             update={() => document.queryCommandState('insertUnorderedList')}
@@ -58,7 +60,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {@html ulIcon}
             </IconButton>
         </WithState>
+    </ButtonGroupItem>
 
+    <ButtonGroupItem>
         <WithState
             key="insertOrderedList"
             update={() => document.queryCommandState('insertOrderedList')}
@@ -74,14 +78,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {@html olIcon}
             </IconButton>
         </WithState>
+    </ButtonGroupItem>
 
     <WithDropdownMenu let:createDropdown let:menuId>
+        <ButtonGroupItem>
             <IconButton on:mount={createDropdown}>
                 {@html listOptionsIcon}
             </IconButton>
+        </ButtonGroupItem>
 
         <ButtonDropdown id={menuId}>
             <ButtonGroup id="justify" {api}>
+                <ButtonGroupItem>
                     <WithState
                         key="justifyLeft"
                         update={() => document.queryCommandState('justifyLeft')}
@@ -97,7 +105,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             {@html justifyLeftIcon}
                         </IconButton>
                     </WithState>
+                </ButtonGroupItem>
 
+                <ButtonGroupItem>
                     <WithState
                         key="justifyCenter"
                         update={() => document.queryCommandState('justifyCenter')}
@@ -113,7 +123,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             {@html justifyCenterIcon}
                         </IconButton>
                     </WithState>
+                </ButtonGroupItem>
 
+                <ButtonGroupItem>
                     <WithState
                         key="justifyRight"
                         update={() => document.queryCommandState('justifyRight')}
@@ -129,7 +141,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             {@html justifyRightIcon}
                         </IconButton>
                     </WithState>
+                </ButtonGroupItem>
 
+                <ButtonGroupItem>
                     <WithState
                         key="justifyFull"
                         update={() => document.queryCommandState('justifyFull')}
@@ -145,16 +159,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             {@html justifyFullIcon}
                         </IconButton>
                     </WithState>
+                </ButtonGroupItem>
             </ButtonGroup>
 
             <ButtonGroup id="indentation" {api}>
-                <IconButton on:click={outdentListItem} tooltip={tr.editingOutdent()}>
+                <ButtonGroupItem>
+                    <IconButton
+                        on:click={outdentListItem}
+                        tooltip={tr.editingOutdent()}>
                         {@html outdentIcon}
                     </IconButton>
+                </ButtonGroupItem>
 
+                <ButtonGroupItem>
                     <IconButton on:click={indentListItem} tooltip={tr.editingIndent()}>
                         {@html indentIcon}
                     </IconButton>
+                </ButtonGroupItem>
             </ButtonGroup>
         </ButtonDropdown>
     </WithDropdownMenu>

ts/editor/FormatInlineButtons.svelte

@@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import IconButton from "components/IconButton.svelte";
     import WithState from "components/WithState.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
@@ -23,6 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <ButtonGroup id="notetype" {api}>
+    <ButtonGroupItem>
         <WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel>
             <WithState
                 key="bold"
@@ -41,7 +43,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </IconButton>
             </WithState>
         </WithShortcut>
+    </ButtonGroupItem>
 
+    <ButtonGroupItem>
         <WithShortcut shortcut="Control+KeyI" let:createShortcut let:shortcutLabel>
             <WithState
                 key="italic"
@@ -60,7 +64,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </IconButton>
             </WithState>
         </WithShortcut>
+    </ButtonGroupItem>
 
+    <ButtonGroupItem>
         <WithShortcut shortcut="Control+KeyU" let:createShortcut let:shortcutLabel>
             <WithState
                 key="underline"
@@ -79,8 +85,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </IconButton>
             </WithState>
         </WithShortcut>
+    </ButtonGroupItem>
 
-    <WithShortcut shortcut="Control+Shift+Equal" let:createShortcut let:shortcutLabel>
+    <ButtonGroupItem>
+        <WithShortcut
+            shortcut="Control+Shift+Equal"
+            let:createShortcut
+            let:shortcutLabel>
             <WithState
                 key="superscript"
                 update={() => document.queryCommandState('superscript')}
@@ -98,7 +109,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </IconButton>
             </WithState>
         </WithShortcut>
+    </ButtonGroupItem>
 
+    <ButtonGroupItem>
         <WithShortcut shortcut="Control+Equal" let:createShortcut let:shortcutLabel>
             <WithState
                 key="subscript"
@@ -117,7 +130,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </IconButton>
             </WithState>
         </WithShortcut>
+    </ButtonGroupItem>
 
+    <ButtonGroupItem>
         <WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={tr.editingRemoveFormatting()}
@@ -128,4 +143,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {@html eraserIcon}
             </IconButton>
         </WithShortcut>
+    </ButtonGroupItem>
 </ButtonGroup>

ts/editor/TemplateButtons.svelte

@@ -6,8 +6,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import { bridgeCommand } from "lib/bridgecommand";
 
-    import IconButton from "components/IconButton.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+    import IconButton from "components/IconButton.svelte";
     import DropdownMenu from "components/DropdownMenu.svelte";
     import DropdownItem from "components/DropdownItem.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
@@ -32,14 +33,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <ButtonGroup id="template">
+    <ButtonGroupItem>
         <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingAttachPicturesaudiovideo(), shortcutLabel)}
-            on:click={onAttachment}>
+                on:click={onAttachment}
+                on:mount={createShortcut}>
                 {@html paperclipIcon}
             </IconButton>
         </WithShortcut>
+    </ButtonGroupItem>
 
+    <ButtonGroupItem>
         <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
@@ -47,13 +52,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {@html micIcon}
             </IconButton>
         </WithShortcut>
+    </ButtonGroupItem>
 
+    <ButtonGroupItem>
         <ClozeButton />
+    </ButtonGroupItem>
 
     <WithDropdownMenu let:menuId let:createDropdown>
+        <ButtonGroupItem>
             <IconButton on:mount={createDropdown}>
                 {@html functionIcon}
             </IconButton>
+        </ButtonGroupItem>
 
         <DropdownMenu id={menuId}>
             <WithShortcut
@@ -112,7 +122,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </DropdownMenu>
     </WithDropdownMenu>
 
-    <WithShortcut shortcut="Control+Shift+KeyX" let:createShortcut let:shortcutLabel>
+    <ButtonGroupItem>
+        <WithShortcut
+            shortcut="Control+Shift+KeyX"
+            let:createShortcut
+            let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
                 on:click={onHtmlEdit}
@@ -120,4 +134,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {@html xmlIcon}
             </IconButton>
         </WithShortcut>
+    </ButtonGroupItem>
 </ButtonGroup>