CustomStyles strange behaviour

Anki Development
1

I have been messing around with the CustomStyles style injector for an addon and am getting some strange behaviour.

I inject the below code during gui_hooks.editor_will_load_note:

(async () => {
    while (!require("anki/RichTextInput").instances?.length) {
        await new Promise(requestAnimationFrame);
    }

    for (const { customStyles } of require("anki/RichTextInput").instances) {
        const { addStyleTag } = await customStyles;
        const { element } = await addStyleTag("chineseSupport");
    }
})();

If this code above runs before the code to apply the userBase style runs:

anki/ts/editor/rich-text-input/RichTextStyles.svelte at main · ankitects/anki (github.com)

then there are no issues. However, if this code executes after the code applying the userBase style, the styling from the <style id="userBase"> tag is wiped out.

Interestingly, if we change how the userBase style is applied and have it set the actual textContent of the <style> tag, then the styling is respected and the bug disappears. Something like this:

async function setStyling(property: string, value: unknown): Promise<void> {
    const rule = await userBaseRule;
    rule.style[property] = value;

    const baseStyle = await userBaseStyle;
    baseStyle.element.textContent = rule.cssText;
}

anki/ts/editor/rich-text-input/RichTextStyles.svelte at main · ankitects/anki (github.com)

Maybe svelte is getting confused with the dynamically changing styles, maybe there is a bug in the webengine itself?

I wanted to see if anyone else has experienced this issue or has any knowledge of it / mitigating it.

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.