Add functionality to set float of image

ts/editor/BUILD.bazel

@@ -118,6 +118,11 @@ copy_mdi_icons(
         "format-color-text.svg",
         "format-color-highlight.svg",
         "color-helper.svg",
+
+        # image handle
+        "format-float-left.svg",
+        "format-float-right.svg",
+        "close-circle-outline.svg",
     ],
     visibility = ["//visibility:public"],
 )

ts/editor/ImageHandle.svelte

@@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import ImageHandleButtons from "./ImageHandleButtons.svelte";
     import { getContext } from "svelte";
     import { nightModeKey } from "components/context-keys";
 
@@ -73,6 +74,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         image!.style.height = `${height}px`;
     }
 
+    function floatLeft(): void {
+        image!.style.float = "left";
+    }
+
+    function floatRight(): void {
+        image!.style.float = "right";
+    }
+
+    function floatReset(): void {
+        image!.style.float = "";
+    }
+
     const nightMode = getContext(nightModeKey);
 </script>
 
@@ -82,6 +95,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {hidden}
 >
     <div class="image-handle-bg" />
+    <div class="image-handle-buttons">
+        <ImageHandleButtons
+            on:floatleft={floatLeft}
+            on:floatright={floatRight}
+            on:floatreset={floatReset}
+        />
+    </div>
     <div class="image-handle-dimensions">
         {width}&times;{height} (Original: {naturalWidth}&times;{naturalHeight})
     </div>
@@ -115,6 +135,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         opacity: 0.2;
     }
 
+    .image-handle-buttons {
+        top: 3px;
+        left: 3px;
+    }
+
     .image-handle-dimensions {
         pointer-events: none;
         user-select: none;

ts/editor/ImageHandleButtons.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 { createEventDispatcher } from "svelte";
+
+    import ButtonToolbar from "components/ButtonToolbar.svelte";
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+    import IconButton from "components/IconButton.svelte";
+
+    import { floatLeftIcon, floatRightIcon, resetIcon } from "./icons";
+
+    const dispatch = createEventDispatcher();
+</script>
+
+<ButtonToolbar size={1.6} wrap={false}>
+    <ButtonGroup>
+        <ButtonGroupItem>
+            <IconButton on:click={() => dispatch("floatleft")}
+                >{@html floatLeftIcon}</IconButton
+            >
+        </ButtonGroupItem>
+
+        <ButtonGroupItem>
+            <IconButton on:click={() => dispatch("floatright")}
+                >{@html floatRightIcon}</IconButton
+            >
+        </ButtonGroupItem>
+
+        <ButtonGroupItem>
+            <IconButton on:click={() => dispatch("floatreset")}
+                >{@html resetIcon}</IconButton
+            >
+        </ButtonGroupItem>
+    </ButtonGroup>
+</ButtonToolbar>

ts/editor/icons.ts

@@ -33,3 +33,8 @@ export { default as xmlIcon } from "./xml.svg";
 
 export const arrowIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="transparent" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>';
+
+// image handle
+export { default as floatLeftIcon } from "./format-float-left.svg";
+export { default as floatRightIcon } from "./format-float-right.svg";
+export { default as resetIcon } from "./close-circle-outline.svg";