Inject Custom SVELTE Into Add/Edit-View

Anki Development
1

I’m working on creating an addon that allows users to use a custom editor for a specific note type, similar to how the new image-occlusion note type functions. I want to render custom content in the browser’s editor section when a note of a certain type is selected, as well as in the add view. Since Anki’s development has moved towards using Svelte, I prefer to use Svelte for the HTML code. What hook (or another method) can be used to inject the code?

2

maybe just some clarification:

i know, that it’s possible to inject HTML-Code (and thus also compiled svelte code) into the webviews – e.g.

def on_editor_did_load_note(editor: Editor):
    note_type: NoteType = editor.note.model()

    if note_type['name'] == "…":
        editor.web.eval("""
            (function() {
                const container = document.querySelector('.note-editor > .scroll-area-relative');
                container.innerHTML = '...';
            })();
        """)

gui_hooks.editor_did_load_note.append(on_editor_did_load_note)

but the problem is, that this way i’m destroying the original svelte component and cant regenerate it, when a non-special note is selected. thus i am wondering if there is a intended way of doing so :slight_smile:

3

I’m afraid as far as I’m aware, Anki doesn’t expose a way to do this more smoothly at the moment.

4

thank you very much for your response – just one small follow-up question: what’s the best way to “restore” the editor after external manipulation (e.g. if a non-addon card is selected)

thanks in advance!

5

Unfortunately, I’m not aware of a way to tell a Svelte component to redraw itself when the DOM has been modified externally. I’m not sure if what you want is possible without changes in Anki itself.