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,11 +141,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     setupLifecycleHooks(api);
 </script>
 
+{#if !hidden}
     <div
         class="plain-text-input"
         class:light-theme={!$pageTheme.isDark}
-    class:hidden
         on:focusin={() => ($focusedInput = api)}
+        out:slide={{ duration: 200 }}
     >
         <CodeMirror
             {configuration}
@@ -154,6 +156,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             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) {

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,7 +201,8 @@ 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}
+    <div class="rich-text-input" on:focusin={setFocus} out:slide={{ duration: 200 }}>
         {#if $content.length === 0}
             <div
                 class="rich-text-placeholder"
@@ -240,6 +242,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </RichTextStyles>
         <slot name="plain-text-badge" />
     </div>
+{/if}
 
 <style lang="scss">
     .rich-text-input {