From df24682b2ad3f05c750553510536612affd784cd Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 6 Aug 2021 04:59:33 +0200
Subject: [PATCH] Make Mathjax menu also a floating dropdown menu like
 ImageHandle

---
 ts/editor/MathjaxHandle.svelte | 70 +++++++++++++++++-----------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/ts/editor/MathjaxHandle.svelte b/ts/editor/MathjaxHandle.svelte
index e4e41393e..bdbcda1b4 100644
--- a/ts/editor/MathjaxHandle.svelte
+++ b/ts/editor/MathjaxHandle.svelte
@@ -3,6 +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 WithDropdown from "components/WithDropdown.svelte";
+    import ButtonDropdown from "components/ButtonDropdown.svelte";
+    import Item from "components/Item.svelte";
+
     import HandleSelection from "./HandleSelection.svelte";
     import HandleBackground from "./HandleBackground.svelte";
     import HandleControl from "./HandleControl.svelte";
@@ -15,40 +19,38 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let updateSelection: () => void;
 </script>
 
-{#if activeImage}
-    <HandleSelection
-        image={activeImage}
-        {container}
-        offsetX={2}
-        offsetY={2}
-        bind:updateSelection
-    >
-        <HandleBackground />
-
-        <div
-            class="mathjax-handle-inline-block"
-            class:is-rtl={isRtl}
-            on:click={updateSelection}
+<WithDropdown
+    placement="bottom"
+    autoOpen={true}
+    autoClose={false}
+    let:createDropdown
+    let:dropdownObject
+>
+    {#if activeImage}
+        <HandleSelection
+            image={activeImage}
+            {container}
+            offsetX={2}
+            offsetY={2}
+            bind:updateSelection
+            on:mount={(event) => createDropdown(event.detail.selection)}
         >
-            <MathjaxHandleInlineBlock {activeImage} {isRtl} />
-        </div>
+            <HandleBackground on:click={(event) => event.stopPropagation()} />
 
-        <HandleControl />
-    </HandleSelection>
-{/if}
+            <HandleControl offsetX={1} offsetY={1} />
+        </HandleSelection>
 
-<style lang="scss">
-    div {
-        position: absolute;
-    }
-
-    .mathjax-handle-inline-block {
-        left: 3px;
-        top: 3px;
-
-        &.is-rtl {
-            left: auto;
-            right: 3px;
-        }
-    }
-</style>
+        <ButtonDropdown>
+            <div
+                on:click={() => {
+                    updateSelection();
+                    dropdownObject.update();
+                }}
+            >
+                <Item>
+                    <MathjaxHandleInlineBlock {activeImage} {isRtl} />
+                </Item>
+            </div>
+        </ButtonDropdown>
+    {/if}
+</WithDropdown>