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