Fix editor width changing as tag completions shown (#3574)

* Fix editor width changing as tag completions shown

* Avoid @render for now

* Ignore eslint warning

ts/lib/components/Portal.svelte

@@ -0,0 +1,45 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+
+<!-- Based on https://github.com/wobsoriano/svelte-portal; MIT -->
+
+<script lang="ts">
+    import { mount, unmount, type Snippet } from "svelte";
+    import RenderChildren from "./RenderChildren.svelte";
+
+    const {
+        children,
+        target,
+    }: {
+        children: Snippet;
+        target: HTMLElement | null;
+    } = $props();
+
+    $effect(() => {
+        let app: Record<string, unknown>;
+
+        if (target) {
+            app = mount(RenderChildren, {
+                target: target,
+                props: {
+                    children,
+                    $$slots: { default: children },
+                },
+            });
+        }
+
+        return () => {
+            if (app) {
+                unmount(app);
+            }
+        };
+    });
+</script>
+
+{#if !target}
+    <!-- eslint-disable -->
+    <!-- svelte-ignore slot_element_deprecated -->
+    <slot />
+{/if}

ts/lib/components/RenderChildren.svelte

@@ -0,0 +1,6 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+
+<slot />

ts/lib/components/WithFloating.svelte

@@ -19,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { EventPredicateResult } from "$lib/sveltelib/event-predicate";
     import { documentClick, documentKeyup } from "$lib/sveltelib/event-store";
     import { registerModalClosingHandler } from "$lib/sveltelib/modal-closing";
-    import portal from "$lib/sveltelib/portal";
+    import Portal from "./Portal.svelte";
     import type { PositioningCallback } from "$lib/sveltelib/position/auto-update";
     import autoUpdate from "$lib/sveltelib/position/auto-update";
     import type { PositionAlgorithm } from "$lib/sveltelib/position/position-algorithm";
@@ -195,17 +195,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {/if}
 {/if}
 
-<div bind:this={floating} class="floating" class:show use:portal={portalTarget}>
+<Portal target={portalTarget}>
-    {#if show}
+    <div bind:this={floating} class="floating" class:show>
-        <slot name="floating" {position} />
+        {#if show}
-    {/if}
+            <slot name="floating" {position} />
-
-    <div bind:this={arrow} class="floating-arrow" hidden={!show}>
-        {#if !hideArrow}
-            <FloatingArrow />
         {/if}
+
+        <div bind:this={arrow} class="floating-arrow" hidden={!show}>
+            {#if !hideArrow}
+                <FloatingArrow />
+            {/if}
+        </div>
     </div>
-</div>
+</Portal>
 
 <style lang="scss">
     span.floating-reference {

ts/lib/sveltelib/portal.ts

@@ -1,36 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-/**
- * @param element: The element to be moved.
- * @param targetElement DOM Element where element is going to be appended
- */
-function portal(
-    element: HTMLElement,
-    targetElement: Element | null = document.body,
-): { update(target: Element): void; destroy(): void } {
-    let target: Element | null;
-
-    async function update(newTarget: Element | null) {
-        target = newTarget;
-
-        if (!target) {
-            return;
-        }
-
-        target.append(element);
-    }
-
-    function destroy() {
-        element.remove();
-    }
-
-    update(targetElement);
-
-    return {
-        update,
-        destroy,
-    };
-}
-
-export default portal;

ts/lib/tag-editor/WithAutocomplete.svelte

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