From 52722065ea199fa57ae750fa34bf47ee1c5aab3c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Sep 2022 01:52:16 +0200
Subject: [PATCH] Make Collapsible unmount the component

---
 ts/components/Collapsible.svelte              |  8 ++--
 ts/editor/NoteEditor.svelte                   | 12 +-----
 .../plain-text-input/PlainTextInput.svelte    | 43 +++----------------
 3 files changed, 14 insertions(+), 49 deletions(-)

diff --git a/ts/components/Collapsible.svelte b/ts/components/Collapsible.svelte
index 3fe987267..bcb2ca243 100644
--- a/ts/components/Collapsible.svelte
+++ b/ts/components/Collapsible.svelte
@@ -50,6 +50,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<div bind:this={collapsibleElement} class="collapsible" bind:clientHeight>
-    <slot {collapsed} />
-</div>
+{#if !collapsed}
+    <div bind:this={collapsibleElement} class="collapsible" bind:clientHeight>
+        <slot />
+    </div>
+{/if}
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index bc189d617..3ceafea7a 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -435,12 +435,8 @@ the AddCards dialog) should be implemented in the user of this component.
                         </LabelContainer>
                     </svelte:fragment>
                     <svelte:fragment slot="rich-text-input">
-                        <Collapsible
-                            collapse={richTextsHidden[index]}
-                            let:collapsed={hidden}
-                        >
+                        <Collapsible collapse={richTextsHidden[index]}>
                             <RichTextInput
-                                {hidden}
                                 on:focusout={() => {
                                     saveFieldNow();
                                     $focusedInput = null;
@@ -454,12 +450,8 @@ the AddCards dialog) should be implemented in the user of this component.
                         </Collapsible>
                     </svelte:fragment>
                     <svelte:fragment slot="plain-text-input">
-                        <Collapsible
-                            collapse={plainTextsHidden[index]}
-                            let:collapsed={hidden}
-                        >
+                        <Collapsible collapse={plainTextsHidden[index]}>
                             <PlainTextInput
-                                {hidden}
                                 on:focusout={() => {
                                     saveFieldNow();
                                     $focusedInput = null;
diff --git a/ts/editor/plain-text-input/PlainTextInput.svelte b/ts/editor/plain-text-input/PlainTextInput.svelte
index e849958d7..8f9632a6d 100644
--- a/ts/editor/plain-text-input/PlainTextInput.svelte
+++ b/ts/editor/plain-text-input/PlainTextInput.svelte
@@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import { onMount, tick } from "svelte";
+    import { onMount } from "svelte";
     import { writable } from "svelte/store";
 
     import { singleCallback } from "../../lib/typing";
@@ -39,8 +39,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import removeProhibitedTags from "./remove-prohibited";
     import { storedToUndecorated, undecoratedToStored } from "./transform";
 
-    export let hidden = false;
-
     const configuration = {
         mode: htmlanki,
         ...baseOptions,
@@ -71,11 +69,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         moveCaretToEnd();
     }
 
-    function toggle(): boolean {
-        hidden = !hidden;
-        return hidden;
-    }
-
     async function getInputAPI(target: EventTarget): Promise<FocusableInputAPI | null> {
         const editor = (await codeMirror.editor) as any;
 
@@ -89,32 +82,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export const api: PlainTextInputAPI = {
         name: "plain-text",
         focus,
-        focusable: !hidden,
         moveCaretToEnd,
         refocus,
-        toggle,
+        focusable: true,
+        toggle() {
+            return true;
+        },
         getInputAPI,
         codeMirror,
     };
 
-    /**
-     * Communicate to editing area that input is not focusable
-     */
-    function pushUpdate(isFocusable: boolean): void {
-        api.focusable = isFocusable;
-        $editingInputs = $editingInputs;
-    }
-
-    async function refresh(): Promise<void> {
-        const editor = await codeMirror.editor;
-        editor.refresh();
-    }
-
-    $: {
-        pushUpdate(!hidden);
-        tick().then(refresh);
-    }
-
     function onChange({ detail: html }: CustomEvent<string>): void {
         code.set(removeProhibitedTags(html));
     }
@@ -134,6 +111,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             code.subscribe((html: string): void =>
                 content.set(undecoratedToStored(html)),
             ),
+            () => $editingInputs.splice($editingInputs.indexOf(api), 1),
         );
     });
 
@@ -144,15 +122,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class="plain-text-input"
     class:light-theme={!$pageTheme.isDark}
     on:focusin={() => ($focusedInput = api)}
-    {hidden}
 >
-    <CodeMirror
-        {configuration}
-        {code}
-        {hidden}
-        bind:api={codeMirror}
-        on:change={onChange}
-    />
+    <CodeMirror {configuration} {code} bind:api={codeMirror} on:change={onChange} />
 </div>
 
 <style lang="scss">