From 2112b419f900db0ea207e1180576bc5a5008f330 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 6 May 2021 23:04:38 +0200
Subject: [PATCH] Fix ButtonDropdown

---
 qt/aqt/browser/browser.py           |   3 +-
 ts/components/ButtonDropdown.svelte |  26 +++-
 ts/editor/BUILD.bazel               |   4 +-
 ts/editor/EditorToolbar.svelte      |  21 ----
 ts/editor/FormatBlockButtons.svelte | 187 +++++++++++++++-------------
 ts/editor/toolbar.ts                |  40 +++---
 6 files changed, 141 insertions(+), 140 deletions(-)

diff --git a/qt/aqt/browser/browser.py b/qt/aqt/browser/browser.py
index 9d67630bf..d0c0a308a 100644
--- a/qt/aqt/browser/browser.py
+++ b/qt/aqt/browser/browser.py
@@ -68,7 +68,6 @@ from aqt.utils import (
     saveGeom,
     saveSplitter,
     saveState,
-    shortcut,
     showInfo,
     showWarning,
     skip_if_selection_is_empty,
@@ -383,7 +382,7 @@ class Browser(QMainWindow):
 
             editor._links["preview"] = lambda _editor: self.onTogglePreview()
             editor.web.eval(
-                f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.PreviewButton }}, -1));"
+                "$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.PreviewButton }}, -1));"
             )
 
         gui_hooks.editor_did_init.append(add_preview_button)
diff --git a/ts/components/ButtonDropdown.svelte b/ts/components/ButtonDropdown.svelte
index 7f8246e5c..c4512842f 100644
--- a/ts/components/ButtonDropdown.svelte
+++ b/ts/components/ButtonDropdown.svelte
@@ -6,22 +6,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { setContext } from "svelte";
     import { dropdownKey } from "./contextKeys";
 
-    import ButtonGroup from "./ButtonGroup.svelte";
+    import WithTheming from "./WithTheming.svelte";
+    import ButtonToolbar from "./ButtonToolbar.svelte";
 
     export let id: string | undefined;
     let className = "";
     export { className as class };
 
-    export let api = {};
+    export let api: Record<string, unknown> | undefined = undefined;
 
     setContext(dropdownKey, null);
 </script>
 
-<style>
+<style lang="scss">
     :global(.dropdown-menu.btn-dropdown-menu) {
         display: none;
+        min-width: 0;
+        padding: calc(var(--toolbar-size) / 10) 0;
+
         background-color: var(--window-bg);
         border-color: var(--medium-border);
+
+        :global(.btn-group) {
+            position: static;
+        }
     }
 
     :global(.dropdown-menu.btn-dropdown-menu.show) {
@@ -29,6 +37,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<ButtonGroup {id} class={`dropdown-menu btn-dropdown-menu ${className}`} {api}>
-    <slot />
-</ButtonGroup>
+<WithTheming style="--toolbar-wrap: nowrap; ">
+    <ButtonToolbar
+        {id}
+        class={`dropdown-menu btn-dropdown-menu ${className}`}
+        nowrap={true}
+        {api}>
+        <slot />
+    </ButtonToolbar>
+</WithTheming>
diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel
index af4796ddf..f25d8017b 100644
--- a/ts/editor/BUILD.bazel
+++ b/ts/editor/BUILD.bazel
@@ -74,7 +74,7 @@ ts_library(
         "//ts/html-filter",
         "//ts:image_module_support",
         "@npm//svelte",
-    ],
+    ] + svelte_names,
 )
 
 copy_bootstrap_icons(
@@ -173,7 +173,7 @@ svelte_check(
     ]) + [
         "//ts/sass:button_mixins_lib",
         "//ts/sass/bootstrap",
-        "@npm//@types/bootstrap",
         "//ts/components:svelte_components",
+        "@npm//@types/bootstrap",
     ],
 )
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index d52bd55a5..fe21af4cf 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -4,19 +4,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script context="module" lang="typescript">
     import "./legacy.css";
-    import { writable } from "svelte/store";
-
-    const disabled = writable(false);
-
-    export function enableButtons(): void {
-        disabled.set(false);
-    }
-
-    export function disableButtons(): void {
-        disabled.set(true);
-    }
-
-    // @ts-expect-error insufficient typing of svelte modules
     import { updateAllState, resetAllState } from "components/WithState.svelte";
 
     export function updateActiveButtons(event: Event) {
@@ -42,9 +29,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="typescript">
-    import { setContext } from "svelte";
-    import { disabledKey, nightModeKey } from "components/contextKeys";
-
     import WithTheming from "components/WithTheming.svelte";
     import StickyBar from "components/StickyBar.svelte";
     import ButtonToolbar from "components/ButtonToolbar.svelte";
@@ -63,11 +47,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export const colorButtons = {};
     export const templateButtons = {};
 
-    export let nightMode: boolean;
-
-    setContext(nightModeKey, nightMode);
-    setContext(disabledKey, disabled);
-
     export let size: number = 30;
     export let wraps: boolean = true;
 
diff --git a/ts/editor/FormatBlockButtons.svelte b/ts/editor/FormatBlockButtons.svelte
index 96b8a04c8..3585b8469 100644
--- a/ts/editor/FormatBlockButtons.svelte
+++ b/ts/editor/FormatBlockButtons.svelte
@@ -10,6 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
     import IconButton from "components/IconButton.svelte";
     import ButtonDropdown from "components/ButtonDropdown.svelte";
+    import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
     import WithState from "components/WithState.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
 
@@ -80,103 +81,109 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </WithState>
     </ButtonGroupItem>
 
-    <WithDropdownMenu let:createDropdown let:menuId>
-        <ButtonGroupItem>
+    <ButtonGroupItem>
+        <WithDropdownMenu let:createDropdown let:menuId>
             <IconButton on:mount={createDropdown}>
                 {@html listOptionsIcon}
             </IconButton>
-        </ButtonGroupItem>
 
-        <ButtonDropdown id={menuId}>
-            <ButtonGroup id="justify" {api}>
-                <ButtonGroupItem>
-                    <WithState
-                        key="justifyLeft"
-                        update={() => document.queryCommandState('justifyLeft')}
-                        let:state={active}
-                        let:updateState>
-                        <IconButton
-                            tooltip={tr.editingAlignLeft()}
-                            {active}
-                            on:click={(event) => {
-                                document.execCommand('justifyLeft');
-                                updateState(event);
-                            }}>
-                            {@html justifyLeftIcon}
-                        </IconButton>
-                    </WithState>
-                </ButtonGroupItem>
+            <ButtonDropdown id={menuId}>
+                <ButtonToolbarItem id="justify">
+                    <ButtonGroup>
+                        <ButtonGroupItem>
+                            <WithState
+                                key="justifyLeft"
+                                update={() => document.queryCommandState('justifyLeft')}
+                                let:state={active}
+                                let:updateState>
+                                <IconButton
+                                    tooltip={tr.editingAlignLeft()}
+                                    {active}
+                                    on:click={(event) => {
+                                        document.execCommand('justifyLeft');
+                                        updateState(event);
+                                    }}>
+                                    {@html justifyLeftIcon}
+                                </IconButton>
+                            </WithState>
+                        </ButtonGroupItem>
 
-                <ButtonGroupItem>
-                    <WithState
-                        key="justifyCenter"
-                        update={() => document.queryCommandState('justifyCenter')}
-                        let:state={active}
-                        let:updateState>
-                        <IconButton
-                            tooltip={tr.editingCenter()}
-                            {active}
-                            on:click={(event) => {
-                                document.execCommand('justifyCenter');
-                                updateState(event);
-                            }}>
-                            {@html justifyCenterIcon}
-                        </IconButton>
-                    </WithState>
-                </ButtonGroupItem>
+                        <ButtonGroupItem>
+                            <WithState
+                                key="justifyCenter"
+                                update={() => document.queryCommandState('justifyCenter')}
+                                let:state={active}
+                                let:updateState>
+                                <IconButton
+                                    tooltip={tr.editingCenter()}
+                                    {active}
+                                    on:click={(event) => {
+                                        document.execCommand('justifyCenter');
+                                        updateState(event);
+                                    }}>
+                                    {@html justifyCenterIcon}
+                                </IconButton>
+                            </WithState>
+                        </ButtonGroupItem>
 
-                <ButtonGroupItem>
-                    <WithState
-                        key="justifyRight"
-                        update={() => document.queryCommandState('justifyRight')}
-                        let:state={active}
-                        let:updateState>
-                        <IconButton
-                            tooltip={tr.editingAlignRight()}
-                            {active}
-                            on:click={(event) => {
-                                document.execCommand('justifyRight');
-                                updateState(event);
-                            }}>
-                            {@html justifyRightIcon}
-                        </IconButton>
-                    </WithState>
-                </ButtonGroupItem>
+                        <ButtonGroupItem>
+                            <WithState
+                                key="justifyRight"
+                                update={() => document.queryCommandState('justifyRight')}
+                                let:state={active}
+                                let:updateState>
+                                <IconButton
+                                    tooltip={tr.editingAlignRight()}
+                                    {active}
+                                    on:click={(event) => {
+                                        document.execCommand('justifyRight');
+                                        updateState(event);
+                                    }}>
+                                    {@html justifyRightIcon}
+                                </IconButton>
+                            </WithState>
+                        </ButtonGroupItem>
 
-                <ButtonGroupItem>
-                    <WithState
-                        key="justifyFull"
-                        update={() => document.queryCommandState('justifyFull')}
-                        let:state={active}
-                        let:updateState>
-                        <IconButton
-                            tooltip={tr.editingJustify()}
-                            {active}
-                            on:click={(event) => {
-                                document.execCommand('justifyFull');
-                                updateState(event);
-                            }}>
-                            {@html justifyFullIcon}
-                        </IconButton>
-                    </WithState>
-                </ButtonGroupItem>
-            </ButtonGroup>
+                        <ButtonGroupItem>
+                            <WithState
+                                key="justifyFull"
+                                update={() => document.queryCommandState('justifyFull')}
+                                let:state={active}
+                                let:updateState>
+                                <IconButton
+                                    tooltip={tr.editingJustify()}
+                                    {active}
+                                    on:click={(event) => {
+                                        document.execCommand('justifyFull');
+                                        updateState(event);
+                                    }}>
+                                    {@html justifyFullIcon}
+                                </IconButton>
+                            </WithState>
+                        </ButtonGroupItem>
+                    </ButtonGroup>
+                </ButtonToolbarItem>
 
-            <ButtonGroup id="indentation" {api}>
-                <ButtonGroupItem>
-                    <IconButton
-                        on:click={outdentListItem}
-                        tooltip={tr.editingOutdent()}>
-                        {@html outdentIcon}
-                    </IconButton>
-                </ButtonGroupItem>
+                <ButtonToolbarItem id="indentation">
+                    <ButtonGroup>
+                        <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>
+                        <ButtonGroupItem>
+                            <IconButton
+                                on:click={indentListItem}
+                                tooltip={tr.editingIndent()}>
+                                {@html indentIcon}
+                            </IconButton>
+                        </ButtonGroupItem>
+                    </ButtonGroup>
+                </ButtonToolbarItem>
+            </ButtonDropdown>
+        </WithDropdownMenu>
+    </ButtonGroupItem>
 </ButtonGroup>
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index e296db0bf..ec26e26fe 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -1,9 +1,14 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import { disabledKey, nightModeKey } from "components/contextKeys";
+import { writable } from "svelte/store";
+
 import EditorToolbar from "./EditorToolbar.svelte";
 import "./bootstrap.css";
 
+const disabled = writable(false);
+
 export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
     let toolbarResolve: (value: EditorToolbar) => void;
     const toolbarPromise = new Promise<EditorToolbar>((resolve) => {
@@ -15,33 +20,30 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
             const target = document.body;
             const anchor = document.getElementById("fields")!;
 
-            toolbarResolve(
-                new EditorToolbar({
-                    target,
-                    anchor,
-                    props: {
-                        nightMode: document.documentElement.classList.contains(
-                            "night-mode"
-                        ),
-                    },
-                })
+            const context = new Map();
+            context.set(disabledKey, disabled);
+            context.set(
+                nightModeKey,
+                document.documentElement.classList.contains("night-mode")
             );
+
+            toolbarResolve(new EditorToolbar({ target, anchor, context } as any));
         });
     });
 
     return toolbarPromise;
 }
 
-/* Exports for editor */
+export function enableButtons(): void {
+    disabled.set(false);
+}
+
+export function disableButtons(): void {
+    disabled.set(true);
+}
+
 export {
-    // @ts-expect-error insufficient typing of svelte modules
-    editorToolbar,
-    // @ts-expect-error insufficient typing of svelte modules
-    enableButtons,
-    // @ts-expect-error insufficient typing of svelte modules
-    disableButtons,
-    // @ts-expect-error insufficient typing of svelte modules
     updateActiveButtons,
-    // @ts-expect-error insufficient typing of svelte modules
     clearActiveButtons,
+    editorToolbar,
 } from "./EditorToolbar.svelte";