Create separate collapsed field state

this means users can collapse fields with the HTML editor open and it will stay open when the field is expanded again.

ftl/core/editing.ftl

@@ -54,7 +54,8 @@ editing-text-highlight-color = Text highlight color
 editing-to-make-a-cloze-deletion-on = To make a cloze deletion on an existing note, you need to change it to a cloze type first, via 'Notes>Change Note Type'
 editing-toggle-html-editor = Toggle HTML Editor
 editing-toggle-sticky = Toggle sticky
-editing-toggle-visual-editor = Toggle Visual Editor
+editing-expand-field = Expand field
+editing-collapse-field = Collapse field
 editing-underline-text = Underline text
 editing-unordered-list = Unordered list
 editing-warning-cloze-deletions-will-not-work = Warning, cloze deletions will not work until you switch the type at the top to Cloze.

ts/editor/EditorField.svelte

@@ -44,13 +44,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Writable } from "svelte/store";
     import { writable } from "svelte/store";
 
-    import { descriptionKey, directionKey } from "../lib/context-keys";
+    import { collapsedKey, descriptionKey, directionKey } from "../lib/context-keys";
     import { promiseWithResolver } from "../lib/promise";
     import type { Destroyable } from "./destroyable";
     import EditingArea from "./EditingArea.svelte";
 
     export let content: Writable<string>;
     export let field: FieldData;
+    export let collapsed = false;
 
     const directionStore = writable<"ltr" | "rtl">();
     setContext(directionKey, directionStore);
@@ -62,6 +63,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     $: $descriptionStore = field.description;
 
+    const collapsedStore = writable<boolean>();
+    setContext(collapsedKey, collapsedStore);
+
+    $: $collapsedStore = collapsed;
+
     const editingArea: Partial<EditingAreaAPI> = {};
     const [element, elementResolve] = promiseWithResolver<HTMLElement>();
 
@@ -89,14 +95,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 >
     <slot name="field-label" />
 
-    <EditingArea
-        {content}
-        fontFamily={field.fontFamily}
-        fontSize={field.fontSize}
-        api={editingArea}
-    >
-        <slot name="editing-inputs" />
-    </EditingArea>
+    {#if !collapsed}
+        <EditingArea
+            {content}
+            fontFamily={field.fontFamily}
+            fontSize={field.fontSize}
+            api={editingArea}
+        >
+            <slot name="editing-inputs" />
+        </EditingArea>
+    {/if}
 </div>
 
 <style lang="scss">

ts/editor/LabelContainer.svelte

@@ -11,7 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "../lib/ftl";
     import { chevronDown, chevronRight } from "./icons";
 
-    export let off: boolean;
+    export let collapsed: boolean;
 
     const direction = getContext<Readable<"ltr" | "rtl">>(directionKey);
 
@@ -21,12 +21,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         dispatch("toggle");
     }
 
-    $: icon = off ? chevronRight : chevronDown;
+    $: icon = collapsed ? chevronRight : chevronDown;
     $: tooltip = collapsed ? tr.editingExpandField() : tr.editingCollapseField();
 </script>
 
 <div
-    class:collapsed={off}
     class="label-container"
     class:rtl={$direction === "rtl"}
     on:mousedown|preventDefault

ts/editor/NoteEditor.svelte

@@ -118,6 +118,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let fonts: [string, number, boolean][] = [];
     let richTextsHidden: boolean[] = [];
     let plainTextsHidden: boolean[] = [];
+    let fieldsCollapsed: boolean[] = [];
     const fields = clearableArray<EditorFieldAPI>();
 
     export function setFonts(fs: [string, number, boolean][]): void {
@@ -125,6 +126,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         richTextsHidden = fonts.map((_, index) => richTextsHidden[index] ?? false);
         plainTextsHidden = fonts.map((_, index) => plainTextsHidden[index] ?? true);
+        fieldsCollapsed = fonts.map((_, index) => fieldsCollapsed[index] ?? false);
     }
 
     export function focusField(index: number | null): void {
@@ -320,19 +322,16 @@ the AddCards dialog) should be implemented in the user of this component.
                                 )}`,
                             );
                         }}
+                        collapsed={fieldsCollapsed[index]}
                         --label-color={cols[index] === "dupe"
                             ? "var(--flag1-bg)"
                             : "transparent"}
                     >
                         <svelte:fragment slot="field-label">
                             <LabelContainer
-                                bind:off={richTextsHidden[index]}
+                                bind:collapsed={fieldsCollapsed[index]}
                                 on:toggle={() => {
-                                    if (!richTextsHidden[index]) {
-                                        plainTextsHidden[index] = true;
-                                        richTextInputs[index].api.refocus();
-                                    }
-                                    richTextsHidden[index] = !richTextsHidden[index];
+                                    fieldsCollapsed[index] = !fieldsCollapsed[index];
                                 }}
                             >
                                 <svelte:fragment slot="field-name">

ts/lib/context-keys.ts

@@ -5,3 +5,4 @@ export const fontFamilyKey = Symbol("fontFamily");
 export const fontSizeKey = Symbol("fontSize");
 export const directionKey = Symbol("direction");
 export const descriptionKey = Symbol("description");
+export const collapsedKey = Symbol("collapsed");