Fix open editors getting carried over to different notetypes (#2393)

* Fix open editors getting carried over to different notetypes

* Fix first field not getting automatically focused

* Fix collapsibles not transitioning in reduced motion mode

* Fix editor taking a longer time to start when reduced motion is enabled

If we don't transition, the editor actually takes considerably longer to create all the fields.

* Fix fields not collapsing when notetype is loaded

ts/components/Collapsible.svelte

@@ -16,11 +16,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function dynamicDuration(height: number): number {
         return 100 + Math.pow(height, 1 / 4) * 25;
     }
-    $: duration = dynamicDuration(contentHeight);
+    // If we don't transition, the editor actually takes considerably longer to create all
+    // the fields. Because of that, we're using an imperceptible duration for the animation
+    // when reduced motion is enabled.
+    $: duration = animated ? dynamicDuration(contentHeight) : 0.01;
 
     const size = tweened<number>(0);
 
     async function transition(collapse: boolean): Promise<void> {
+        // We need to ensure collapsibleElement still exists
+        if (!collapsibleElement) {
+            return;
+        }
+
         if (collapse) {
             contentHeight = collapsibleElement.clientHeight;
             size.set(0, {
@@ -41,11 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     $: if (collapsibleElement) {
-        if (animated) {
+        window.requestAnimationFrame(() => transition(collapse));
-            transition(collapse);
-        } else {
-            collapsed = collapse;
-        }
     }
 
     let collapsibleElement: HTMLElement;
@@ -67,7 +71,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div
     bind:this={collapsibleElement}
     class="collapsible"
-    class:animated
     class:expanded
     class:full-hide={toggleDisplay}
     class:measuring
@@ -78,29 +81,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <slot {collapsed} />
 </div>
 
-{#if animated && measuring}
+{#if measuring}
     <!-- Maintain document flow while collapsible height is measured -->
     <div class="collapsible-placeholder" />
 {/if}
 
 <style lang="scss">
     .collapsible {
-        &.animated {
+        &.measuring {
-            &.measuring {
+            display: initial;
-                display: initial;
+            position: absolute;
-                position: absolute;
+            opacity: 0;
-                opacity: 0;
+        }
+        &.transitioning {
+            overflow: hidden;
+            height: var(--height);
+            &.expanded {
+                overflow: visible;
             }
-
+            &.full-hide {
-            &.transitioning {
+                display: initial;
-                overflow: hidden;
-                height: var(--height);
-                &.expanded {
-                    overflow: visible;
-                }
-                &.full-hide {
-                    display: initial;
-                }
             }
         }
         &.full-hide {

ts/editor/NoteEditor.svelte

@@ -130,8 +130,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let fieldsCollapsed: boolean[] = [];
     export function setCollapsed(defaultCollapsed: boolean[]): void {
-        fieldsCollapsed =
+        tick().then(() => {
-            sessionOptions[notetypeId!]?.fieldsCollapsed ?? defaultCollapsed;
+            fieldsCollapsed =
+                sessionOptions[notetypeId!]?.fieldsCollapsed ?? defaultCollapsed;
+        });
     }
 
     let richTextsHidden: boolean[] = [];
@@ -139,16 +141,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let plainTextDefaults: boolean[] = [];
 
     export function setPlainTexts(defaultPlainTexts: boolean[]): void {
-        const states = sessionOptions[notetypeId!]?.fieldStates;
+        tick().then(() => {
-        if (states) {
+            const states = sessionOptions[notetypeId!]?.fieldStates;
-            richTextsHidden = states.richTextsHidden;
+            if (states) {
-            plainTextsHidden = states.plainTextsHidden;
+                richTextsHidden = states.richTextsHidden;
-            plainTextDefaults = states.plainTextDefaults;
+                plainTextsHidden = states.plainTextsHidden;
-        } else {
+                plainTextDefaults = states.plainTextDefaults;
-            plainTextDefaults = defaultPlainTexts;
+            } else {
-            richTextsHidden = [...defaultPlainTexts];
+                plainTextDefaults = defaultPlainTexts;
-            plainTextsHidden = Array.from(defaultPlainTexts, (v) => !v);
+                richTextsHidden = [...defaultPlainTexts];
-        }
+                plainTextsHidden = Array.from(defaultPlainTexts, (v) => !v);
+            }
+        });
     }
 
     function setMathjaxEnabled(enabled: boolean): void {
@@ -171,7 +175,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     export function focusField(index: number | null): void {
-        tick().then(() => {
+        setTimeout(() => {
             if (typeof index === "number") {
                 if (!(index in fields)) {
                     return;

ts/editor/rich-text-input/RichTextStyles.svelte

@@ -16,9 +16,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const stylesDidLoad: Promise<unknown> = Promise.all([userBaseStyle, userBaseRule]);
 
     userBaseStyle.then((baseStyle: StyleObject) => {
-        const sheet = baseStyle.element.sheet as CSSStyleSheet;
+        const sheet = baseStyle.element.sheet;
-        const baseIndex = sheet.insertRule("anki-editable {}");
+        if (sheet) {
-        userBaseRuleResolve(sheet.cssRules[baseIndex] as CSSStyleRule);
+            const baseIndex = sheet.insertRule("anki-editable {}");
+            userBaseRuleResolve(sheet.cssRules[baseIndex] as CSSStyleRule);
+        }
     });
 
     export let color: string;