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) {
-            transition(collapse);
-        } else {
-            collapsed = collapse;
-        }
+        window.requestAnimationFrame(() => transition(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,20 +81,18 @@ 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 {
             display: initial;
             position: absolute;
             opacity: 0;
         }
-
         &.transitioning {
             overflow: hidden;
             height: var(--height);
@@ -102,7 +103,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 display: initial;
             }
         }
-        }
         &.full-hide {
             &.hidden {
                 display: none;

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 {
+        tick().then(() => {
             fieldsCollapsed =
                 sessionOptions[notetypeId!]?.fieldsCollapsed ?? defaultCollapsed;
+        });
     }
 
     let richTextsHidden: boolean[] = [];
@@ -139,6 +141,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let plainTextDefaults: boolean[] = [];
 
     export function setPlainTexts(defaultPlainTexts: boolean[]): void {
+        tick().then(() => {
             const states = sessionOptions[notetypeId!]?.fieldStates;
             if (states) {
                 richTextsHidden = states.richTextsHidden;
@@ -149,6 +152,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 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;
+        if (sheet) {
             const baseIndex = sheet.insertRule("anki-editable {}");
             userBaseRuleResolve(sheet.cssRules[baseIndex] as CSSStyleRule);
+        }
     });
 
     export let color: string;