From c1adebf2da99e01a43498365b48660d1fd540b4c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 28 Apr 2021 23:31:45 +0200
Subject: [PATCH] Add .dropdown-menu class to DropdownMenu

---
 ts/components/DropdownMenu.svelte |   2 +-
 ts/editor/EditorToolbar.svelte    |   1 +
 ts/editor/TemplateButtons.svelte  | 115 ++++++++++++++++++------------
 ts/editor/helpers.ts              |   4 ++
 4 files changed, 75 insertions(+), 47 deletions(-)

diff --git a/ts/components/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte
index 4ffd9b361..12cc0fbee 100644
--- a/ts/components/DropdownMenu.svelte
+++ b/ts/components/DropdownMenu.svelte
@@ -18,6 +18,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<div {id}>
+<div {id} class={`dropdown-menu`}>
     <slot />
 </div>
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 45c9403ef..217475d15 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -59,5 +59,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <FormatInlineButtons />
         <FormatBlockButtons />
         <ColorButtons />
+        <TemplateButtons />
     </StickyBar>
 </WithTheming>
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index 2b2042702..2df8ce46f 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -15,6 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ClozeButton from "./ClozeButton.svelte";
 
     import { wrap } from "./wrap";
+    import { appendInParentheses } from "./helpers";
     import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
 
     function onAttachment(): void {
@@ -28,72 +29,94 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function onHtmlEdit(): void {
         bridgeCommand("htmlEdit");
     }
-
-    const mathjaxMenuId = "mathjaxMenu";
 </script>
 
 <ButtonGroup id="template">
     <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
         <IconButton
-            tooltip={tr.editingAttachPicturesaudiovideo}
+            tooltip={appendInParentheses(tr.editingAttachPicturesaudiovideo(), shortcutLabel)}
             on:click={onAttachment}>
             {@html paperclipIcon}
         </IconButton>
     </WithShortcut>
 
     <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
-        <IconButton tooltip={tr.editingRecordAudio} on:click={onRecord}>
+        <IconButton
+            tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
+            on:click={onRecord}>
             {@html micIcon}
         </IconButton>
     </WithShortcut>
 
     <ClozeButton />
 
-    <IconButton>
-        {@html functionIcon}
-    </IconButton>
+    <WithDropdownMenu let:menuId let:createDropdown>
+        <IconButton on:mount={createDropdown}>
+            {@html functionIcon}
+        </IconButton>
+
+        <DropdownMenu id={menuId}>
+            <WithShortcut
+                shortcut="Control+KeyM, KeyM"
+                let:createShortcut
+                let:shortcutLabel>
+                <DropdownItem on:click={() => wrap('\\(', '\\)')}>
+                    {tr.editingMathjaxInline()}
+                </DropdownItem>
+            </WithShortcut>
+
+            <WithShortcut
+                shortcut="Control+KeyM, KeyE"
+                let:createShortcut
+                let:shortcutLabel>
+                <DropdownItem on:click={() => wrap('\\[', '\\]')}>
+                    {tr.editingMathjaxBlock()}
+                </DropdownItem>
+            </WithShortcut>
+
+            <WithShortcut
+                shortcut="Control+KeyM, KeyC"
+                let:createShortcut
+                let:shortcutLabel>
+                <DropdownItem on:click={() => wrap('\\(\\ce{', '}\\)')}>
+                    {tr.editingMathjaxChemistry()}
+                </DropdownItem>
+            </WithShortcut>
+
+            <WithShortcut
+                shortcut="Control+KeyT, KeyT"
+                let:createShortcut
+                let:shortcutLabel>
+                <DropdownItem on:click={() => wrap('[latex]', '[/latex]')}>
+                    {tr.editingLatex()}
+                </DropdownItem>
+            </WithShortcut>
+
+            <WithShortcut
+                shortcut="Control+KeyT, KeyE"
+                let:createShortcut
+                let:shortcutLabel>
+                <DropdownItem on:click={() => wrap('[$]', '[/$]')}>
+                    {tr.editingLatexEquation()}
+                </DropdownItem>
+            </WithShortcut>
+
+            <WithShortcut
+                shortcut="Control+KeyT, KeyM"
+                let:createShortcut
+                let:shortcutLabel>
+                <DropdownItem on:click={() => wrap('[$$]', '[/$$]')}>
+                    {tr.editingLatexMathEnv()}
+                </DropdownItem>
+            </WithShortcut>
+        </DropdownMenu>
+    </WithDropdownMenu>
 
     <WithShortcut shortcut="Control+Shift+KeyX" let:createShortcut let:shortcutLabel>
-        <IconButton tooltip={tr.editingHtmlEditor} on:click={onHtmlEdit}>
+        <IconButton
+            tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
+            on:click={onHtmlEdit}>
             {@html xmlIcon}
         </IconButton>
     </WithShortcut>
 </ButtonGroup>
-
-<DropdownMenu id={mathjaxMenuId}>
-    <WithShortcut shortcut="Control+KeyM, KeyM" let:createShortcut let:shortcutLabel>
-        <DropdownItem on:click={() => wrap('\\(', '\\)')}>
-            {tr.editingMathjaxInline}
-        </DropdownItem>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyM, KeyE" let:createShortcut let:shortcutLabel>
-        <DropdownItem on:click={() => wrap('\\[', '\\]')}>
-            {tr.editingMathjaxBlock}
-        </DropdownItem>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyM, KeyC" let:createShortcut let:shortcutLabel>
-        <DropdownItem on:click={() => wrap('\\(\\ce{', '}\\)')}>
-            {tr.editingMathjaxChemistry}
-        </DropdownItem>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyT, KeyT" let:createShortcut let:shortcutLabel>
-        <DropdownItem on:click={() => wrap('[latex]', '[/latex]')}>
-            {tr.editingLatex}
-        </DropdownItem>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyT, KeyE" let:createShortcut let:shortcutLabel>
-        <DropdownItem on:click={() => wrap('[$]', '[/$]')}>
-            {tr.editingLatexEquation}
-        </DropdownItem>
-    </WithShortcut>
-
-    <WithShortcut shortcut="Control+KeyT, KeyM" let:createShortcut let:shortcutLabel>
-        <DropdownItem on:click={() => wrap('[$$]', '[/$$]')}>
-            {tr.editingLatexMathEnv}
-        </DropdownItem>
-    </WithShortcut>
-</DropdownMenu>
diff --git a/ts/editor/helpers.ts b/ts/editor/helpers.ts
index cffcb1480..6d752e752 100644
--- a/ts/editor/helpers.ts
+++ b/ts/editor/helpers.ts
@@ -110,3 +110,7 @@ const isBlockElement = (
 export const getListItem = getAnchorParent(isListItem);
 export const getParagraph = getAnchorParent(isParagraph);
 export const getBlockElement = getAnchorParent(isBlockElement);
+
+export function appendInParentheses(text: string, appendix: string): string {
+    return `${text} (${appendix})`;
+}