From 2cbb6484560730510e8d2165eaff03661ef1ebb5 Mon Sep 17 00:00:00 2001
From: Abdo <abdo@abdnh.net>
Date: Sun, 17 Nov 2024 18:11:21 +0300
Subject: [PATCH] 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           | 45 +++++++++++++++++++++++
 ts/lib/components/RenderChildren.svelte   |  6 +++
 ts/lib/components/WithFloating.svelte     | 22 ++++++-----
 ts/lib/sveltelib/portal.ts                | 36 ------------------
 ts/lib/tag-editor/WithAutocomplete.svelte |  1 +
 5 files changed, 64 insertions(+), 46 deletions(-)
 create mode 100644 ts/lib/components/Portal.svelte
 create mode 100644 ts/lib/components/RenderChildren.svelte
 delete mode 100644 ts/lib/sveltelib/portal.ts

diff --git a/ts/lib/components/Portal.svelte b/ts/lib/components/Portal.svelte
new file mode 100644
index 000000000..a71788ae2
--- /dev/null
+++ b/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}
diff --git a/ts/lib/components/RenderChildren.svelte b/ts/lib/components/RenderChildren.svelte
new file mode 100644
index 000000000..e09533eae
--- /dev/null
+++ b/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 />
diff --git a/ts/lib/components/WithFloating.svelte b/ts/lib/components/WithFloating.svelte
index 418054793..b8e19ef35 100644
--- a/ts/lib/components/WithFloating.svelte
+++ b/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}>
-    {#if show}
-        <slot name="floating" {position} />
-    {/if}
-
-    <div bind:this={arrow} class="floating-arrow" hidden={!show}>
-        {#if !hideArrow}
-            <FloatingArrow />
+<Portal target={portalTarget}>
+    <div bind:this={floating} class="floating" class:show>
+        {#if show}
+            <slot name="floating" {position} />
         {/if}
+
+        <div bind:this={arrow} class="floating-arrow" hidden={!show}>
+            {#if !hideArrow}
+                <FloatingArrow />
+            {/if}
+        </div>
     </div>
-</div>
+</Portal>
 
 <style lang="scss">
     span.floating-reference {
diff --git a/ts/lib/sveltelib/portal.ts b/ts/lib/sveltelib/portal.ts
deleted file mode 100644
index 4172ace1f..000000000
--- a/ts/lib/sveltelib/portal.ts
+++ /dev/null
@@ -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;
diff --git a/ts/lib/tag-editor/WithAutocomplete.svelte b/ts/lib/tag-editor/WithAutocomplete.svelte
index 87e69047e..ba5c1377d 100644
--- a/ts/lib/tag-editor/WithAutocomplete.svelte
+++ b/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)}
 >