Make Mathjax menu also a floating dropdown menu like ImageHandle

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}
+<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)}
         >
-        <HandleBackground />
+            <HandleBackground on:click={(event) => event.stopPropagation()} />
 
-        <div
-            class="mathjax-handle-inline-block"
-            class:is-rtl={isRtl}
-            on:click={updateSelection}
-        >
-            <MathjaxHandleInlineBlock {activeImage} {isRtl} />
-        </div>
-
-        <HandleControl />
+            <HandleControl offsetX={1} offsetY={1} />
         </HandleSelection>
-{/if}
 
-<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>