2 addons conflicting with Svelte components (editorToolbar.toolbar.insertGroup)

Anki Development
1

Two of my addons, Language Tools and HyperTTS define Svelte components to operate on a note from the editor (see screenshot here: Updates)
When both of them are enabled, I see that I get the same component twice. So I expect to see the component from Language Tools and HyperTTS, but I get the component from Language Tools twice.
The code in both cases is the same. Does anyone have any suggestions ? It’s very annoying, I have to ask users to disable one or the other for now.

Visually I get the same component (the one from Language Tools) twice:

1744×762 103 KB

2

@hengiesel apologies for tagging you out of the blue, I tried a bunch of things to try to troubleshoot this and came up empty. am I using editorToolbar.toolbar.insertGroup correctly ?

3

Hm, I think you’re using them right, and this does seem like a bug on first glance. So, I should be able to recreate the bug just by installing the two add-ons from their AnkiWeb entry?

And you’re testing on 2.1.49, correct?

4

Yes 2.1.49. You can install both addons, no need to do any configuration, they should both attempt to add their component to the editor the same way. And you should see the result in the screenshot I posted earlier (the component from “Language Tools” appears twice).
https://ankiweb.net/shared/info/771677663
https://ankiweb.net/shared/info/111623432
The component from HyperTTS should look like this: Updates and it doesn’t appear when both addons are installed.

5

Hi, sorry to bother you, I was wondering whether you had a chance to look into this ?

6

What happens on the latest Anki beta?

7

Those “toolbars” from my addons don’t work at all on 2.1.50 betas, and i’m actually confused about how to use that “insertGroup” function. I use the code below (i switched to TypeScript to follow anki_new_format_pack)


import * as NoteEditor from "anki/NoteEditor";
import type { NoteEditorAPI } from "@anki/editor/NoteEditor.svelte";

import HyperTTS, {configureEditorHyperTTS} from "./HyperTTS.svelte";

NoteEditor.lifecycle.onMount(({ toolbar }: NoteEditorAPI): void => {
    console.log(configureEditorHyperTTS);
    toolbar.insertGroup({component: HyperTTS, id: "hypertts"});    
});

and I get the following error:

JS error /_addons/anki-hyper-tts/hypertts.js:1 Uncaught (in promise) TypeError: t.insertGroup is not a function
JS error /_anki/legacyPageData?id=140053589382912:1 Uncaught (in promise) TypeError: Cannot read property ‘toolbar’ of undefined

8

actually does anki_new_format_pack work on 2.1.50 beta 6 ? or does it need to be updated first ?
@hengiesel if I could ask for a working example with insertGroup that I can try and which works on 2.1.50, i’d be extremely grateful.

9

On 2.1.50, latest beta, it should work with insert instead of insertGroup.

1 Like
10

I’m using 2.1.50 Beta 9, with the following code:

$editorToolbar.then((editorToolbar) => {
    console.log(configureEditorHyperTTS);
    editorToolbar.toolbar.insert({component: HyperTTS, id: "hypertts"});
});

and getting the following error message:

JS error /_anki/legacyPageData?id=140369067684624:1 Uncaught (in promise) TypeError: Cannot read property 'toolbar' of undefined

besides changing from insertGroup to insert, the code is identical to anki-hyper-tts/web at main · Language-Tools/anki-hyper-tts · GitHub

Could you give a hint as to where to start looking ?

11

Hi @hengiesel , with 2.1.50 approaching, this is the only remaining problem i’m experiencing, if you have any hints as to whether to start looking i’d be very grateful.

12

(tracked on Update demo/docs for editor changes · Issue #1733 · ankitects/anki · GitHub)