From 9a2b3410d0ead37ae1da408d68e14507a058a613 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Thu, 11 Aug 2022 23:57:53 +0200
Subject: [PATCH] Add slide out animation to EditingArea, RichTextInput and
 PlainTextInput

only for collapsing, because it is choppy on expansion (common issue with Svelte transitions).
---
 ts/editor/EditingArea.svelte                  |  8 +-
 .../plain-text-input/PlainTextInput.svelte    | 35 ++++----
 .../rich-text-input/RichTextInput.svelte      | 81 ++++++++++---------
 3 files changed, 66 insertions(+), 58 deletions(-)

diff --git a/ts/editor/EditingArea.svelte b/ts/editor/EditingArea.svelte
index 401611501..5df3ffeed 100644
--- a/ts/editor/EditingArea.svelte
+++ b/ts/editor/EditingArea.svelte
@@ -51,6 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import { fontFamilyKey, fontSizeKey } from "../lib/context-keys";
     import FocusTrap from "./FocusTrap.svelte";
+    import { slide } from "svelte/transition";
 
     export let fontFamily: string;
     const fontFamilyStore = writable(fontFamily);
@@ -177,7 +178,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <FocusTrap bind:this={focusTrap} on:focus={focusEditingInputInsteadIfAvailable} />
 
-<div bind:this={editingArea} class="editing-area" on:focusout={trapFocusOnBlurOut}>
+<div
+    bind:this={editingArea}
+    class="editing-area"
+    on:focusout={trapFocusOnBlurOut}
+    out:slide={{ duration: 200 }}
+>
     <slot />
 </div>
 
diff --git a/ts/editor/plain-text-input/PlainTextInput.svelte b/ts/editor/plain-text-input/PlainTextInput.svelte
index 9b451c596..d533b5f5c 100644
--- a/ts/editor/plain-text-input/PlainTextInput.svelte
+++ b/ts/editor/plain-text-input/PlainTextInput.svelte
@@ -38,6 +38,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { context as noteEditorContext } from "../NoteEditor.svelte";
     import removeProhibitedTags from "./remove-prohibited";
     import { storedToUndecorated, undecoratedToStored } from "./transform";
+    import { slide } from "svelte/transition";
 
     export let hidden: boolean;
 
@@ -140,20 +141,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     setupLifecycleHooks(api);
 </script>
 
-<div
-    class="plain-text-input"
-    class:light-theme={!$pageTheme.isDark}
-    class:hidden
-    on:focusin={() => ($focusedInput = api)}
->
-    <CodeMirror
-        {configuration}
-        {code}
-        {hidden}
-        bind:api={codeMirror}
-        on:change={onChange}
-    />
-</div>
+{#if !hidden}
+    <div
+        class="plain-text-input"
+        class:light-theme={!$pageTheme.isDark}
+        on:focusin={() => ($focusedInput = api)}
+        out:slide={{ duration: 200 }}
+    >
+        <CodeMirror
+            {configuration}
+            {code}
+            {hidden}
+            bind:api={codeMirror}
+            on:change={onChange}
+        />
+    </div>
+{/if}
 
 <style lang="scss">
     .plain-text-input {
@@ -166,10 +169,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         :global(.CodeMirror-lines) {
             padding: 8px 0;
         }
-
-        &.hidden {
-            display: none;
-        }
     }
 
     :global(.CodeMirror) {
diff --git a/ts/editor/rich-text-input/RichTextInput.svelte b/ts/editor/rich-text-input/RichTextInput.svelte
index e1af711e3..216e99698 100644
--- a/ts/editor/rich-text-input/RichTextInput.svelte
+++ b/ts/editor/rich-text-input/RichTextInput.svelte
@@ -69,6 +69,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import useRichTextResolve from "./rich-text-resolve";
     import RichTextStyles from "./RichTextStyles.svelte";
     import { fragmentToStored, storedToFragment } from "./transform";
+    import { slide } from "svelte/transition";
 
     export let hidden: boolean;
 
@@ -200,46 +201,48 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     setupLifecycleHooks(api);
 </script>
 
-<div class="rich-text-input" on:focusin={setFocus} {hidden}>
-    {#if $content.length === 0}
-        <div
-            class="rich-text-placeholder"
-            style:font-family={$fontFamily}
-            style:font-size={$fontSize + "px"}
-            style:direction={$direction}
-        >
-            {$description}
-        </div>
-    {/if}
-
-    <RichTextStyles
-        color={$pageTheme.isDark ? "white" : "black"}
-        fontFamily={$fontFamily}
-        fontSize={$fontSize}
-        direction={$direction}
-        callback={stylesResolve}
-        let:attachToShadow={attachStyles}
-        let:stylesDidLoad
-    >
-        <div
-            bind:this={richTextDiv}
-            class={className}
-            class:night-mode={$pageTheme.isDark}
-            use:attachShadow
-            use:attachStyles
-            use:attachContentEditable={{ stylesDidLoad }}
-            on:focusin
-            on:focusout
-        />
-
-        {#await Promise.all([richTextPromise, stylesDidLoad]) then _}
-            <div class="rich-text-widgets">
-                <slot />
+{#if !hidden}
+    <div class="rich-text-input" on:focusin={setFocus} out:slide={{ duration: 200 }}>
+        {#if $content.length === 0}
+            <div
+                class="rich-text-placeholder"
+                style:font-family={$fontFamily}
+                style:font-size={$fontSize + "px"}
+                style:direction={$direction}
+            >
+                {$description}
             </div>
-        {/await}
-    </RichTextStyles>
-    <slot name="plain-text-badge" />
-</div>
+        {/if}
+
+        <RichTextStyles
+            color={$pageTheme.isDark ? "white" : "black"}
+            fontFamily={$fontFamily}
+            fontSize={$fontSize}
+            direction={$direction}
+            callback={stylesResolve}
+            let:attachToShadow={attachStyles}
+            let:stylesDidLoad
+        >
+            <div
+                bind:this={richTextDiv}
+                class={className}
+                class:night-mode={$pageTheme.isDark}
+                use:attachShadow
+                use:attachStyles
+                use:attachContentEditable={{ stylesDidLoad }}
+                on:focusin
+                on:focusout
+            />
+
+            {#await Promise.all([richTextPromise, stylesDidLoad]) then _}
+                <div class="rich-text-widgets">
+                    <slot />
+                </div>
+            {/await}
+        </RichTextStyles>
+        <slot name="plain-text-badge" />
+    </div>
+{/if}
 
 <style lang="scss">
     .rich-text-input {