Improved fix for open editors getting carried to different notetypes (#2422)

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

This reverts commit bf5bcd3f52.

* Improved fix for open editors getting carried over to different notetypes

* Run ninja format
This commit is contained in:
Fabricio Duarte 2023-03-08 06:22:02 -03:00 committed by GitHub
parent e9c5d24cbe
commit fd688b5fc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 43 deletions

View file

@ -544,6 +544,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
setMathjaxEnabled({json.dumps(self.mw.col.get_config("renderMathjax", True))});
setShrinkImages({json.dumps(self.mw.col.get_config("shrinkEditorImages", True))});
setCloseHTMLTags({json.dumps(self.mw.col.get_config("closeHTMLTags", True))});
triggerChanges();
"""
if self.addMode:

View file

@ -16,19 +16,11 @@ 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;
}
// 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;
$: duration = dynamicDuration(contentHeight);
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, {
@ -49,7 +41,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
$: if (collapsibleElement) {
window.requestAnimationFrame(() => transition(collapse));
if (animated) {
transition(collapse);
} else {
collapsed = collapse;
}
}
let collapsibleElement: HTMLElement;
@ -71,6 +67,7 @@ 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
@ -81,26 +78,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<slot {collapsed} />
</div>
{#if measuring}
{#if animated && measuring}
<!-- Maintain document flow while collapsible height is measured -->
<div class="collapsible-placeholder" />
{/if}
<style lang="scss">
.collapsible {
&.measuring {
display: initial;
position: absolute;
opacity: 0;
}
&.transitioning {
overflow: hidden;
height: var(--height);
&.expanded {
overflow: visible;
}
&.full-hide {
&.animated {
&.measuring {
display: initial;
position: absolute;
opacity: 0;
}
&.transitioning {
overflow: hidden;
height: var(--height);
&.expanded {
overflow: visible;
}
&.full-hide {
display: initial;
}
}
}
&.full-hide {

View file

@ -130,10 +130,8 @@ 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;
});
fieldsCollapsed =
sessionOptions[notetypeId!]?.fieldsCollapsed ?? defaultCollapsed;
}
let richTextsHidden: boolean[] = [];
@ -141,17 +139,28 @@ 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);
}
}
export function triggerChanges(): void {
// I know this looks quite weird and doesn't seem to do anything
// but if we don't call this after setPlainTexts() and setCollapsed()
// when switching notetypes, existing collapsibles won't react
// automatically to the updated props
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);
}
fieldsCollapsed = fieldsCollapsed;
plainTextDefaults = plainTextDefaults;
richTextsHidden = richTextsHidden;
plainTextsHidden = plainTextsHidden;
});
}
@ -175,7 +184,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
export function focusField(index: number | null): void {
setTimeout(() => {
tick().then(() => {
if (typeof index === "number") {
if (!(index in fields)) {
return;
@ -353,6 +362,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
setInsertSymbolsEnabled,
setShrinkImages,
setCloseHTMLTags,
triggerChanges,
...oldEditorAdapter,
});

View file

@ -16,11 +16,9 @@ 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;
if (sheet) {
const baseIndex = sheet.insertRule("anki-editable {}");
userBaseRuleResolve(sheet.cssRules[baseIndex] as CSSStyleRule);
}
const sheet = baseStyle.element.sheet as CSSStyleSheet;
const baseIndex = sheet.insertRule("anki-editable {}");
userBaseRuleResolve(sheet.cssRules[baseIndex] as CSSStyleRule);
});
export let color: string;