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

@@ -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>
 

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
+{#if !hidden}
-    class="plain-text-input"
+    <div
-    class:light-theme={!$pageTheme.isDark}
+        class="plain-text-input"
-    class:hidden
+        class:light-theme={!$pageTheme.isDark}
-    on:focusin={() => ($focusedInput = api)}
+        on:focusin={() => ($focusedInput = api)}
->
+        out:slide={{ duration: 200 }}
-    <CodeMirror
+    >
-        {configuration}
+        <CodeMirror
-        {code}
+            {configuration}
-        {hidden}
+            {code}
-        bind:api={codeMirror}
+            {hidden}
-        on:change={onChange}
+            bind:api={codeMirror}
-    />
+            on:change={onChange}
-</div>
+        />
+    </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) {

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 !hidden}
-    {#if $content.length === 0}
+    <div class="rich-text-input" on:focusin={setFocus} out:slide={{ duration: 200 }}>
-        <div
+        {#if $content.length === 0}
-            class="rich-text-placeholder"
+            <div
-            style:font-family={$fontFamily}
+                class="rich-text-placeholder"
-            style:font-size={$fontSize + "px"}
+                style:font-family={$fontFamily}
-            style:direction={$direction}
+                style:font-size={$fontSize + "px"}
-        >
+                style:direction={$direction}
-            {$description}
+            >
-        </div>
+                {$description}
-    {/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}
+        {/if}
-    </RichTextStyles>
+
-    <slot name="plain-text-badge" />
+        <RichTextStyles
-</div>
+            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 {