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
-    <HandleSelection
+    placement="bottom"
-        image={activeImage}
+    autoOpen={true}
-        {container}
+    autoClose={false}
-        offsetX={2}
+    let:createDropdown
-        offsetY={2}
+    let:dropdownObject
-        bind:updateSelection
+>
-    >
+    {#if activeImage}
-        <HandleBackground />
+        <HandleSelection
-
+            image={activeImage}
-        <div
+            {container}
-            class="mathjax-handle-inline-block"
+            offsetX={2}
-            class:is-rtl={isRtl}
+            offsetY={2}
-            on:click={updateSelection}
+            bind:updateSelection
+            on:mount={(event) => createDropdown(event.detail.selection)}
         >
-            <MathjaxHandleInlineBlock {activeImage} {isRtl} />
+            <HandleBackground on:click={(event) => event.stopPropagation()} />
-        </div>
 
-        <HandleControl />
+            <HandleControl offsetX={1} offsetY={1} />
-    </HandleSelection>
+        </HandleSelection>
-{/if}
 
-<style lang="scss">
+        <ButtonDropdown>
-    div {
+            <div
-        position: absolute;
+                on:click={() => {
-    }
+                    updateSelection();
-
+                    dropdownObject.update();
-    .mathjax-handle-inline-block {
+                }}
-        left: 3px;
+            >
-        top: 3px;
+                <Item>
-
+                    <MathjaxHandleInlineBlock {activeImage} {isRtl} />
-        &.is-rtl {
+                </Item>
-            left: auto;
+            </div>
-            right: 3px;
+        </ButtonDropdown>
-        }
+    {/if}
-    }
+</WithDropdown>
-</style>