Consider a cross-platform add-on system for templates

[dae]

This is something I've mentioned in passing in the past, and I thought I should write it up for discussion/easy linking.

I should lede with a disclaimer: I don't think we're at a stage where we can start working on this yet. I'd like to see our Svelte migration further along first. After #3830, it will be about time to look into migrating the reviewing screen (which also needs a separate ticket). As part of that, we may want to look into isolating user content into an iframe so it can't modify the surrounding UI or access our private APIs, and the decisions we make there will influence what is possible below. It would also require extensive changes to our card layout screen, so I think we'd also want to have that in Svelte prior to implementing this.

Anyway, on to the topic itself. Shared decks have become a way for authors to distribute complex styling and behaviour, and lots of shared decks contain a bunch of CSS and JS in them. This presents a number of problems:

• If the styling or code ever needs tweaks for newer Anki versions, deck authors have no way to push out updates
• Common functionality like a shortcut key to reveal hints ends up being duplicated across multiple templates/decks
• Providing such common functionality needs to be done via shared deck, with at least one dummy note
• Complex styling and JS makes it very hard for beginner/intermediate users to tweak the styling to their needs
• It's awkward to edit/test these changes inside the template editor

This got me thinking - what if we had a way to decouple generic styling and reusable scripts into an add-on like system that could be updated independently?

The way I imagine it working is that templates could list a number of 'components' that they require. These could include things like themes/styling tweaks. For example, a 'modern base' template that is closer to https://forums.ankiweb.net/t/modernize-default-card-template-for-readability-and-simplicity/53356, but also more fine-grained components like 'left-aligned text', 'cute dog background', etc. From the user's perspective, for simple things like this, they could browse the available components without having to deal with any HTML/JS themselves. And we could potentially highlight the ones a large number of users may wish to use.

The components could also be more functionality-based, e.g. one that enables an alternative Math renderer like katex, or something like a (pedagogically-suboptimal) multiple-choice function.

It might be helpful to have templates have a separate list of 'required' and 'recommended' components, so users know which ones they can optionally add/remove, and which ones are essential for functionality of that template.

Since this functionality would only alter the way Anki behaves during review/preview and wouldn't touch the UI, it would be cross-platform. The updating/downloading code could be implemented in our Rust layer, and management in a shared Svelte page.

I think this might be the best way to start the "cross-platform add-on" story. It solves some legitimate pain points, and doesn't require us to expose access to anything outside the area hosting user content. Add-ons that extend other areas such as the editing screen would of course be useful too, but that gets a lot more complicated, as we need to expose hooks/an API for each bit of functionality we wish to enable, and I think that would add too much complexity to the starting step. If we go this route first, then when it comes time to considering UI-add-ons, we'll have the distribution/updating mostly in place already.

Thoughts?

[GithubAnon0000]

Since this functionality would only alter the way Anki behaves during review/preview and wouldn't touch the UI, it would be cross-platform.

Does that mean the current card template editor stays but gets a way to import functionality? E.g. I only use my own cards with custom html and css for both sides – would there be any change for me after the update or could I update my templates just like I can now?

[dae]

This would be a supplement to what already exists, and existing templates would continue to function as they currently do.

[BrayanDSO]

I thought before about having customizable widgets/blocks that could be added/edited from the editor (and template editor) and be reused/shared.

I find the idea great (at least what I'm imagining of it). The issue is having someone wanting to do the work. The other issue is the odds of the person doing something unintuitive and blaming people because they haven't read the manual (like a lot of stuff in Anki, but things are getting better). But the UX being bad at the beginning is acceptable, specially to get some momentum