From bf5bcd3f52aadc0c5c7dda47be0bbd6a2b95b485 Mon Sep 17 00:00:00 2001
From: Fabricio Duarte <fabricio.duarte.jr@gmail.com>
Date: Mon, 27 Feb 2023 03:49:48 -0300
Subject: [PATCH] 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              | 46 +++++++++----------
 ts/editor/NoteEditor.svelte                   | 30 ++++++------
 .../rich-text-input/RichTextStyles.svelte     |  8 ++--
 3 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/ts/components/Collapsible.svelte b/ts/components/Collapsible.svelte
index 0e8e3c0e2..b09cd53b5 100644
--- a/ts/components/Collapsible.svelte
+++ b/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,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 {
-                display: initial;
-                position: absolute;
-                opacity: 0;
+        &.measuring {
+            display: initial;
+            position: absolute;
+            opacity: 0;
+        }
+        &.transitioning {
+            overflow: hidden;
+            height: var(--height);
+            &.expanded {
+                overflow: visible;
             }
-
-            &.transitioning {
-                overflow: hidden;
-                height: var(--height);
-                &.expanded {
-                    overflow: visible;
-                }
-                &.full-hide {
-                    display: initial;
-                }
+            &.full-hide {
+                display: initial;
             }
         }
         &.full-hide {
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index b2044b519..518406579 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/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 =
-            sessionOptions[notetypeId!]?.fieldsCollapsed ?? defaultCollapsed;
+        tick().then(() => {
+            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;
-        if (states) {
-            richTextsHidden = states.richTextsHidden;
-            plainTextsHidden = states.plainTextsHidden;
-            plainTextDefaults = states.plainTextDefaults;
-        } else {
-            plainTextDefaults = defaultPlainTexts;
-            richTextsHidden = [...defaultPlainTexts];
-            plainTextsHidden = Array.from(defaultPlainTexts, (v) => !v);
-        }
+        tick().then(() => {
+            const states = sessionOptions[notetypeId!]?.fieldStates;
+            if (states) {
+                richTextsHidden = states.richTextsHidden;
+                plainTextsHidden = states.plainTextsHidden;
+                plainTextDefaults = states.plainTextDefaults;
+            } else {
+                plainTextDefaults = defaultPlainTexts;
+                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;
diff --git a/ts/editor/rich-text-input/RichTextStyles.svelte b/ts/editor/rich-text-input/RichTextStyles.svelte
index 0d5090444..e37694377 100644
--- a/ts/editor/rich-text-input/RichTextStyles.svelte
+++ b/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 baseIndex = sheet.insertRule("anki-editable {}");
-        userBaseRuleResolve(sheet.cssRules[baseIndex] as CSSStyleRule);
+        const sheet = baseStyle.element.sheet;
+        if (sheet) {
+            const baseIndex = sheet.insertRule("anki-editable {}");
+            userBaseRuleResolve(sheet.cssRules[baseIndex] as CSSStyleRule);
+        }
     });
 
     export let color: string;