Add InlineBlock buttons to mathjax components

ts/editable/mathjax-component.ts

@@ -80,6 +80,7 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax
     disconnect: () => void = () => {
         /* noop */
     };
+    component?: Mathjax_svelte;
 
     constructor() {
         super();
@@ -100,13 +101,14 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax
 
     attributeChangedCallback(_name: string, _old: string, newValue: string): void {
         this.block = newValue !== "false";
+        this.component?.$set({ block: this.block });
     }
 
     decorate(): void {
         const mathjax = (this.dataset.mathjax = this.innerText);
         this.innerHTML = "";
 
-        new Mathjax_svelte({
+        this.component = new Mathjax_svelte({
             target: this,
             props: { mathjax, block: this.block },
         });
@@ -116,6 +118,9 @@ export const Mathjax: DecoratedElementConstructor = class Mathjax
         this.innerHTML = this.dataset.mathjax ?? "";
         delete this.dataset.mathjax;
 
+        this.component?.$destroy();
+        this.component = undefined;
+
         if (this.block) {
             this.setAttribute("block", "true");
         } else {

ts/editor/BUILD.bazel

@@ -119,6 +119,10 @@ copy_mdi_icons(
         "image-size-select-large.svg",
         "image-size-select-actual.svg",
 
+        # mathjax handle
+        "format-wrap-square.svg",
+        "format-wrap-top-bottom.svg",
+
         # tag editor
         "tag-outline.svg",
         "tag.svg",

ts/editor/MathjaxHandle.svelte

@@ -6,15 +6,43 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import HandleSelection from "./HandleSelection.svelte";
     import HandleBackground from "./HandleBackground.svelte";
     import HandleControl from "./HandleControl.svelte";
+    import MathjaxHandleInlineBlock from "./MathjaxHandleInlineBlock.svelte";
 
     export let activeImage: HTMLImageElement | null = null;
     export let container: HTMLElement;
+    export let isRtl: boolean;
+
+    let updateSelection: () => void;
 </script>
 
-<HandleSelection {container} {activeImage}>
+<HandleSelection {container} {activeImage} offsetX={2} offsetY={2} bind:updateSelection>
     {#if activeImage}
         <HandleBackground />
 
-        <HandleControl active={false} />
+        <div
+            class="mathjax-handle-inline-block"
+            class:is-rtl={isRtl}
+            on:click={updateSelection}
+        >
+            <MathjaxHandleInlineBlock {activeImage} {isRtl} />
+        </div>
+
+        <HandleControl />
     {/if}
 </HandleSelection>
+
+<style lang="scss">
+    div {
+        position: absolute;
+    }
+
+    .mathjax-handle-inline-block {
+        left: 3px;
+        top: 3px;
+
+        &.is-rtl {
+            left: auto;
+            right: 3px;
+        }
+    }
+</style>

ts/editor/MathjaxHandleInlineBlock.svelte

@@ -0,0 +1,38 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import * as tr from "lib/i18n";
+
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+    import IconButton from "components/IconButton.svelte";
+
+    import { inlineIcon, blockIcon } from "./icons";
+
+    export let activeImage: HTMLImageElement;
+    export let isRtl: boolean;
+
+    $: mathjaxElement = activeImage.parentElement!;
+</script>
+
+<ButtonGroup size={1.6} wrap={false} reverse={isRtl}>
+    <ButtonGroupItem>
+        <IconButton
+            tooltip={tr.editingMathjaxInline()}
+            active={activeImage.getAttribute("block") === "true"}
+            on:click={() => mathjaxElement.setAttribute("block", "false")}
+            >{@html inlineIcon}</IconButton
+        >
+    </ButtonGroupItem>
+
+    <ButtonGroupItem>
+        <IconButton
+            tooltip={tr.editingMathjaxBlock()}
+            active={activeImage.getAttribute("block") === "false"}
+            on:click={() => mathjaxElement.setAttribute("block", "true")}
+            >{@html blockIcon}</IconButton
+        >
+    </ButtonGroupItem>
+</ButtonGroup>

ts/editor/icons.ts

@@ -46,3 +46,6 @@ export { default as floatRightIcon } from "./format-float-right.svg";
 
 export { default as sizeActual } from "./image-size-select-actual.svg";
 export { default as sizeMinimized } from "./image-size-select-large.svg";
+
+export { default as inlineIcon } from "./format-wrap-square.svg";
+export { default as blockIcon } from "./format-wrap-top-bottom.svg";