From 6856850a0fed4590ed45b78b7d3e01eba36ee8ad Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 7 Aug 2021 20:48:02 +0200
Subject: [PATCH] Wrap Mathjax buttons into toolbar

---
 ts/editor/MathjaxHandle.svelte            | 38 ++++++++++++++++-------
 ts/editor/MathjaxHandleInlineBlock.svelte |  4 +--
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/ts/editor/MathjaxHandle.svelte b/ts/editor/MathjaxHandle.svelte
index 86cbcd17d..fc1c1c850 100644
--- a/ts/editor/MathjaxHandle.svelte
+++ b/ts/editor/MathjaxHandle.svelte
@@ -3,8 +3,10 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import { tick } from "svelte";
+
     import WithDropdown from "components/WithDropdown.svelte";
-    import ButtonDropdown from "components/ButtonDropdown.svelte";
+    import ButtonToolbar from "components/ButtonToolbar.svelte";
     import DropdownMenu from "components/DropdownMenu.svelte";
     import Item from "components/Item.svelte";
 
@@ -67,16 +69,28 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     setTimeout(dropdownObject.update);
                 }}
             />
-            <div
-                on:click={() => {
-                    updateSelection();
-                    dropdownObject.update();
-                }}
-            >
-                <Item>
-                    <MathjaxHandleInlineBlock {activeImage} {isRtl} />
-                </Item>
-            </div>
-        </DropdownMenu>
+            <div class="margin-x">
+                <ButtonToolbar>
+                    <Item>
+                        <MathjaxHandleInlineBlock
+                            {activeImage}
+                            {isRtl}
+                            on:click={async () => {
+                                await tick();
+                                updateSelection();
+                                dropdownObject.update();
+                            }}
+                        />
+                    </Item>
+                </ButtonToolbar>
+                <div />
+            </div></DropdownMenu
+        >
     {/if}
 </WithDropdown>
+
+<style lang="scss">
+    .margin-x {
+        margin: 0 0.125rem;
+    }
+</style>
diff --git a/ts/editor/MathjaxHandleInlineBlock.svelte b/ts/editor/MathjaxHandleInlineBlock.svelte
index e0a3c176b..c488c95f9 100644
--- a/ts/editor/MathjaxHandleInlineBlock.svelte
+++ b/ts/editor/MathjaxHandleInlineBlock.svelte
@@ -23,7 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             tooltip={tr.editingMathjaxInline()}
             active={activeImage.getAttribute("block") === "true"}
             on:click={() => mathjaxElement.setAttribute("block", "false")}
-            >{@html inlineIcon}</IconButton
+            on:click>{@html inlineIcon}</IconButton
         >
     </ButtonGroupItem>
 
@@ -32,7 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             tooltip={tr.editingMathjaxBlock()}
             active={activeImage.getAttribute("block") === "false"}
             on:click={() => mathjaxElement.setAttribute("block", "true")}
-            >{@html blockIcon}</IconButton
+            on:click>{@html blockIcon}</IconButton
         >
     </ButtonGroupItem>
 </ButtonGroup>