ankitects
Use of contenteditable in the editor
Thanks for starting this refactor. I use Anki every day and spent a significant amount of time trying to figure out how the editor works to try to fix some bugs, but really couldn’t make heads or tails of it. I thought this would be right up my alley since I used to work on text input and editing for Chrome for Android, but there’s quite a lot of complexity in the current Anki editor code. Here are my notes (you can search “Reproducible bug #1” and “bugs to fix” for specific things I was trying to fix): https://docs.google.com/document/d/1SxH6PU43Lfoxq3bdB2IWl06spdzg2ihUC34T70Y5oaQ/edit?usp=sharing
When I worked on Chrome, I believe the general wisdom was that trying to directly implement a WYSIWYG editor using contenteditable and execCommand() is fraught with difficulty. Here’s an opinion paper my former manager and one of my coworkers wrote together in 2017 (I guess that was a long time ago, but I don’t think much has really changed): https://docs.google.com/document/d/10qltJUVg1-Rlnbjc6RH8WnngpJptMEj-tyrvIZBPSfY/edit?tab=t.0#heading=h.5x0d5h95i329
Basically, if you try to directly manipulate the web content, you’re going to have to deal with all the complexity in Chrome’s text editing code (which was forked from WebKit, which was in turn forked from KHTML, so some of this code is over 20 years old and probably no one really understands how it works anymore), and you’re going to be chasing bugs ad infinitum. The recommended way of making an editor that works correctly is for the editor to maintain its own editing state which the editor’s own code maps to HTML. This is actually fairly complex, so the editing experts generally recommend using a third-party editing library. See the below email from the W3C public-editing-tf mailing list:
https://lists.w3.org/Archives/Public/public-editing-tf/2024Sep/0000.html ExecCommand IS NOT a viable way of creating a richtext editor for almost any usecase and hasn't been for the past 10-15 years. Many years of developer lives have been wasted attempting to do so, which is why we added a huge warning to the beginning of the document trying to ensure that no one else wastes times trying to do that.
We have spent the past decade creating the alternative you are asking for. Check out EditContext and Input Events. Input Events is already shipped in all major browsers.
However, these provide quite foundational APIs and a lot of work has to be done in JavaScript to create a viable editor. For most users who need a custom JavaScript editor, I would personally recommend using one of the existing editor libraries (like CKEditor 5 or ProseMirror) and build their editor on top of that.
and these posts by the CKEditor 5 project leader:
https://medium.com/content-uneditable/contenteditable-the-good-the-bad-and-the-ugly-261a38555e9c https://medium.com/content-uneditable/fixing-contenteditable-1a9a5073c35d
Do you or any of the other Anki developers have a roadmap for how to straighten out the editor bugs? Is this something you would be interested in having an open source contributor work on? Thanks!
Originally posted by @rlanday in #3830
cc @bradhilton, but fair warning that he just had a baby so might be a bit before he has time to look into this!
