Fix Float buttons in rtl

ts/components/ButtonGroup.svelte

@@ -19,9 +19,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { className as class };
 
     export let size: number | undefined = undefined;
-    export let wrap: boolean | undefined = undefined;
 
-    export let reverse = false;
+    export let wrap: boolean | undefined = undefined;
 
     $: buttonSize = size ? `--buttons-size: ${size}rem; ` : "";
     let buttonWrap: string;
@@ -47,9 +46,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             if ($items.length === 1) {
                 return ButtonPosition.Standalone;
             } else if (index === 0) {
-                return ButtonPosition.Leftmost;
+                return ButtonPosition.InlineStart;
             } else if (index === $items.length - 1) {
-                return ButtonPosition.Rightmost;
+                return ButtonPosition.InlineEnd;
             } else {
                 return ButtonPosition.Center;
             }
@@ -98,7 +97,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bind:this={buttonGroupRef}
     {id}
     class="btn-group {className}"
-    class:reverse
     {style}
     dir="ltr"
     role="group"
@@ -118,8 +116,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         padding: calc(var(--buttons-size) / 10);
         margin: 0;
     }
-
-    .reverse {
-        flex-direction: row-reverse;
-    }
 </style>

ts/components/ButtonGroupItem.svelte

@@ -22,19 +22,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const radius = "5px";
 
+    const leftStyle = `--border-left-radius: ${radius}; --border-right-radius: 0; `;
+    const rightStyle = `--border-left-radius: 0; --border-right-radius: ${radius}; `;
+
     $: {
         switch (position_) {
             case ButtonPosition.Standalone:
                 style = `--border-left-radius: ${radius}; --border-right-radius: ${radius}; `;
                 break;
-            case ButtonPosition.Leftmost:
+            case ButtonPosition.InlineStart:
-                style = `--border-left-radius: ${radius}; --border-right-radius: 0; `;
+                style = leftStyle;
                 break;
             case ButtonPosition.Center:
                 style = "--border-left-radius: 0; --border-right-radius: 0; ";
                 break;
-            case ButtonPosition.Rightmost:
+            case ButtonPosition.InlineEnd:
-                style = `--border-left-radius: 0; --border-right-radius: ${radius}; `;
+                style = rightStyle;
                 break;
         }
     }

ts/components/buttons.ts

@@ -5,9 +5,9 @@ import type { Registration } from "./registration";
 
 export enum ButtonPosition {
     Standalone,
-    Leftmost,
+    InlineStart,
     Center,
-    Rightmost,
+    InlineEnd,
 }
 
 export interface ButtonRegistration extends Registration {

ts/editor/HandleBackground.svelte

@@ -11,11 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onMount(() => dispatch("mount", { background }));
 </script>
 
-<div
+<div bind:this={background} on:mousedown|preventDefault on:dblclick />
-    bind:this={background}
-    on:mousedown|preventDefault
-    on:dblclick
-/>
 
 <style lang="scss">
     div {

ts/editor/HandleSelection.svelte

@@ -37,7 +37,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div
     bind:this={selection}
     use:updateSelection
-    on:click={(event) => /* prevent triggering Bootstrap dropdown */ event.stopImmediatePropagation()}
+    on:click={(event) =>
+        /* prevent triggering Bootstrap dropdown */ event.stopImmediatePropagation()}
     style="--left: {left}px; --top: {top}px; --width: {width}px; --height: {height}px; --offsetX: {offsetX}px; --offsetY: {offsetY}px;"
 >
     <slot />

ts/editor/ImageHandle.svelte

@@ -12,7 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import HandleSelection from "./HandleSelection.svelte";
     import HandleControl from "./HandleControl.svelte";
     import HandleLabel from "./HandleLabel.svelte";
-    import ImageHandleFloat from "./ImageHandleFloat.svelte";
+    import ImageHandleFloatButtons from "./ImageHandleFloatButtons.svelte";
     import ImageHandleSizeSelect from "./ImageHandleSizeSelect.svelte";
 
     import { onDestroy } from "svelte";
@@ -65,21 +65,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         await updateSizesWithDimensions();
     });
 
-    function startObserving() {
-    console.log('start observe');
-        resizeObserver.observe(container);
-    }
-
-    function stopObserving() {
-    console.log('stop observe');
-        resizeObserver.unobserve(container);
-    }
-
     $: observes = Boolean(activeImage);
     $: if (observes) {
-        startObserving();
+        resizeObserver.observe(container);
     } else {
-        stopObserving();
+        resizeObserver.unobserve(container);
     }
 
     /* memoized position of image on resize start
@@ -169,9 +159,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     image={activeImage}
                     on:mount={(event) => createDropdown(event.detail.selection)}
                 >
-                    <HandleBackground
+                    <HandleBackground on:dblclick={toggleActualSize} />
-                        on:dblclick={toggleActualSize}
-                    />
 
                     <HandleLabel {isRtl} on:mount={updateDimensions}>
                         <span>{actualWidth}&times;{actualHeight}</span>
@@ -201,7 +189,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <ButtonDropdown>
                     <div on:click={updateSizesWithDimensions}>
                         <Item>
-                            <ImageHandleFloat
+                            <ImageHandleFloatButtons
                                 image={activeImage}
                                 {isRtl}
                                 on:update={dropdownObject.update}

ts/editor/ImageHandleFloatButtons.svelte

@@ -15,24 +15,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let image: HTMLImageElement;
     export let isRtl: boolean;
 
-    const leftValues = {
+    const [inlineStartIcon, inlineEndIcon] = isRtl
-        position: "left",
+        ? [floatRightIcon, floatLeftIcon]
-        label: tr.editingFloatLeft(),
+        : [floatLeftIcon, floatRightIcon];
-        icon: floatLeftIcon,
-    };
-
-    const rightValues = {
-        position: "right",
-        label: tr.editingFloatRight(),
-    };
-
-    $: inlineStart = isRtl ? rightValues : leftValues;
-    $: inlineEnd = isRtl ? leftValues : rightValues;
 
     const dispatch = createEventDispatcher();
 </script>
 
-<ButtonGroup size={1.6} wrap={false} reverse={isRtl}>
+<ButtonGroup size={1.6} wrap={false}>
+    <ButtonGroupItem>
+        <IconButton
+            tooltip={tr.editingFloatLeft()}
+            active={image.style.float === "left"}
+            flipX={isRtl}
+            on:click={() => {
+                image.style.float = "left";
+                setTimeout(() => dispatch("update"));
+            }}>{@html inlineStartIcon}</IconButton
+        >
+    </ButtonGroupItem>
+
     <ButtonGroupItem>
         <IconButton
             tooltip={tr.editingFloatNone()}
@@ -47,25 +49,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     <ButtonGroupItem>
         <IconButton
-            tooltip={inlineStart.label}
+            tooltip={tr.editingFloatRight()}
-            active={image.style.float === inlineStart.position}
+            active={image.style.float === "right"}
             flipX={isRtl}
             on:click={() => {
-                image.style.float = inlineStart.position;
+                image.style.float = "right";
                 setTimeout(() => dispatch("update"));
-            }}>{@html floatLeftIcon}</IconButton
+            }}>{@html inlineEndIcon}</IconButton
-        >
-    </ButtonGroupItem>
-
-    <ButtonGroupItem>
-        <IconButton
-            tooltip={inlineEnd.label}
-            active={image.style.float === inlineEnd.position}
-            flipX={isRtl}
-            on:click={() => {
-                image.style.float = inlineEnd.position;
-                setTimeout(() => dispatch("update"));
-            }}>{@html floatRightIcon}</IconButton
         >
     </ButtonGroupItem>
 </ButtonGroup>