Fix Floating Ui error causing freezes on image resize (#2206)

* Replace autoPlacement with flip

* Remove logic made redundant by use of flip()

* Edit preferred placement on components using WithFloating

* Rename placement to preferredPlacement

* Set "bottom" as default placement and remove redundant declarations

ts/components/Select.svelte

@@ -26,7 +26,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <WithFloating
     show={showFloating}
-    placement="bottom"
     offset={0}
     shift={0}
     hideArrow

ts/components/WithFloating.svelte

@@ -27,7 +27,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let portalTarget: HTMLElement | null = null;
 
-    export let placement: Placement | Placement[] | "auto" = "bottom";
+    let placement: Placement = "bottom";
+    export { placement as preferredPlacement };
     export let offset = 5;
     /* 30px box shadow from elevation(8) */
     export let shift = 30;

ts/editor/editor-toolbar/BlockButtons.svelte

@@ -101,7 +101,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <ButtonGroupItem>
             <WithFloating
                 show={showFloating && !disabled}
-                placement="bottom"
                 inline
                 on:close={() => (showFloating = false)}
                 let:asReference

ts/editor/editor-toolbar/OptionsButton.svelte

@@ -35,12 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<WithFloating
+<WithFloating show={showFloating} inline on:close={() => (showFloating = false)}>
-    show={showFloating}
-    placement="bottom"
-    inline
-    on:close={() => (showFloating = false)}
->
     <IconButton
         slot="reference"
         tooltip={tr.actionsOptions()}

ts/editor/editor-toolbar/RemoveFormatButton.svelte

@@ -116,7 +116,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <WithFloating
     show={showFloating && !disabled}
-    placement="bottom"
     inline
     on:close={() => (showFloating = false)}
 >

ts/editor/image-overlay/ImageOverlay.svelte

@@ -266,7 +266,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithOverlay reference={activeImage} inline let:position={positionOverlay}>
             <WithFloating
                 reference={activeImage}
-                placement="auto"
                 offset={20}
                 inline
                 hideIfReferenceHidden

ts/editor/mathjax-overlay/MathjaxOverlay.svelte

@@ -202,7 +202,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         >
             <WithFloating
                 reference={activeImage}
-                placement="auto"
                 offset={20}
                 keepOnKeyup
                 let:position={positionFloating}

ts/editor/symbols-overlay/SymbolsOverlay.svelte

@@ -380,11 +380,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div class="symbols-overlay">
     {#if referenceRange}
-        <WithFloating
+        <WithFloating reference={referenceRange} preferredPlacement="top" offset={10}>
-            reference={referenceRange}
-            placement={["top", "bottom"]}
-            offset={10}
-        >
             <Popover slot="floating" --popover-padding-inline="0">
                 <div class="symbols-menu">
                     {#each foundSymbols as found, index (found.symbol)}

ts/sveltelib/position/position-floating.ts

@@ -10,7 +10,6 @@ import type {
 } from "@floating-ui/dom";
 import {
     arrow,
-    autoPlacement,
     computePosition,
     flip,
     hide,
@@ -22,7 +21,7 @@ import {
 import type { PositionAlgorithm } from "./position-algorithm";
 
 export interface PositionFloatingArgs {
-    placement: Placement | Placement[] | "auto";
+    placement: Placement;
     arrow: HTMLElement;
     shift: number;
     offset: number;
@@ -47,7 +46,6 @@ function positionFloating({
         floating: FloatingElement,
     ): Promise<void> {
         const middleware: Middleware[] = [
-            // the .shift() lines below expect flip() to be first
             flip(),
             offset(offsetArg),
             shift({ padding: shiftArg }),
@@ -60,20 +58,9 @@ function positionFloating({
 
         const computeArgs: Partial<ComputePositionConfig> = {
             middleware,
+            placement,
         };
 
-        if (Array.isArray(placement)) {
-            const allowedPlacements = placement;
-            // flip() is incompatible with autoPlacement
-            middleware.shift();
-            middleware.push(autoPlacement({ allowedPlacements }));
-        } else if (placement === "auto") {
-            middleware.shift();
-            middleware.push(autoPlacement());
-        } else {
-            computeArgs.placement = placement;
-        }
-
         if (hideIfEscaped) {
             middleware.push(hide({ strategy: "escaped" }));
         }

ts/tag-editor/TagWithTooltip.svelte

@@ -70,7 +70,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <slot {selectMode} {hoverClass} />
         </Tag>
     {:else if shorten && hasMultipleParts(name)}
-        <WithTooltip {tooltip} trigger="hover" placement="auto" let:createTooltip>
+        <WithTooltip {tooltip} trigger="hover" placement="top" let:createTooltip>
             <Tag
                 class={className}
                 bind:flash

ts/tag-editor/WithAutocomplete.svelte

@@ -127,7 +127,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <WithFloating
     keepOnKeyup
     show={$show}
-    placement="top-start"
+    preferredPlacement="top-start"
     portalTarget={document.body}
     let:asReference
     on:close={() => show.set(false)}

ts/tag-editor/tag-options-button/TagsSelectedButton.svelte

@@ -25,7 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <WithFloating
     {show}
-    placement="top"
+    preferredPlacement="top"
     portalTarget={document.body}
     shift={0}
     let:asReference