Fix issue with dropdowns

ts/components/IconButton.svelte

@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type { Readable } from "svelte/store";
-    import { hasContext, getContext, onMount, createEventDispatcher } from "svelte";
+    import { getContext, onMount, createEventDispatcher } from "svelte";
     import { disabledKey, nightModeKey, dropdownKey } from "./contextKeys";
 
     export let id: string;

ts/components/WithDropdownMenu.svelte

@@ -19,25 +19,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     /* Normally dropdown and trigger are associated with a
     /* common ancestor with .dropdown class */
-    function createDropdown(button: HTMLElement): void {
+    function createDropdown(event: CustomEvent): void {
+        const button: HTMLButtonElement = event.detail.button;
+
         /* Prevent focus on menu activation */
         const noop = () => {};
         Object.defineProperty(button, "focus", { value: noop });
 
-        /* Set custom menu without using .dropdown
-         * Rendering the menu here would cause the menu to
-         * be displayed outside of the visible area */
-
-        const dropdown = new Dropdown(button);
-
         const menu = (button.getRootNode() as Document) /* or shadow root */
             .getElementById(menuId);
 
         if (!menu) {
             console.log(`Could not find menu "${menuId}" for dropdown menu.`);
-        }
+        } else {
+            const dropdown = new Dropdown(button);
 
-        (dropdown as any)._menu = menu;
+            /* Set custom menu without using common element with .dropdown */
+            (dropdown as any)._menu = menu;
+        }
     }
 </script>
 

ts/editor/FormatBlockButtons.svelte

@@ -76,7 +76,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </WithState>
 
     <WithDropdownMenu let:createDropdown let:menuId>
-        <IconButton on:mount={(event) => createDropdown(event.detail.button)}>
+        <IconButton on:mount={createDropdown}>
             {@html listOptionsIcon}
         </IconButton>
 
@@ -148,11 +148,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </ButtonGroup>
 
             <ButtonGroup id="indentation" {api}>
-                <IconButton on:click={outdentListItem} tooltip={tr.editingOutdent}>
+                <IconButton on:click={outdentListItem} tooltip={tr.editingOutdent()}>
                     {@html outdentIcon}
                 </IconButton>
 
-                <IconButton on:click={indentListItem} tooltip={tr.editingIndent}>
+                <IconButton on:click={indentListItem} tooltip={tr.editingIndent()}>
                     {@html indentIcon}
                 </IconButton>
             </ButtonGroup>

ts/editor/TemplateButtons.svelte

@@ -115,7 +115,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <WithShortcut shortcut="Control+Shift+KeyX" let:createShortcut let:shortcutLabel>
         <IconButton
             tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
-            on:click={onHtmlEdit}>
+            on:click={onHtmlEdit}
+            on:mount={createShortcut}>
             {@html xmlIcon}
         </IconButton>
     </WithShortcut>