Consider a cross-platform add-on system for templates
- Dominant language
- Rust
- Stars
- 30.5k
- Forks
- 3.2k
- Avg merge
- 2d 8h
- Merged PRs (30d)
- 72
Description
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 (#3871). 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?
Contributor guide
Research direction
No implementation files or tests are named. Start by reviewing the Svelte migration, the reviewing screen in #3871, the card layout screen, and the iframe-isolation question described here. Done would require an agreed, scoped design for template components, including required versus recommended components and cross-platform distribution and management.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, rust
- Domain
- desktop-dev, developer-experience, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100