From what I gather reading the forum @hengiesel and @kleinerpirat would maybe be the most knowledgeable in this area? I don’t know my gluteus maximus from my articulatio cubiti when it comes to Svelte so I may be missing something obvious but is it possible to interface with the Svelte components to add a custom input from addon JS? I.e. extend EditingInputAPI and add it to the list NoteEditor.instances[0].fields[0].editingArea.editingInputs?
I have an addon (Markdown input) which adds a Markdown input to the field, however the integration is rather hacky: I have to fidget about with badge insertion, focus handlers to “work around” the InputFocusAPI “stealing focus” etc. If it is not possible at the moment, are there any plans on making such functions available (i.e. add_input_api, add_badge etc.)?
Putting me in the same sentence with @hengiesel when it comes to Svelte knowledge is flattering, but I’m afraid I cannot give you a satisfying answer in regard to API extension plans.
But working on a personal project I gathered some experience with hacking around the status quo. I use my own Svelte components to add functionality to the editor, but they do not interface with Anki’s components other than set their innerHTML from time to time.
If you’re not already doing this, I advise to insert your input into the ShadowRoot of the field, but not into <anki-editable> itself. Your element will inherit all styles applied to the editable, but you’re circumventing the issues associated with the resubscription process between RichTextInput and PlainTextInput. You also shouldn’t have to steal focus then - it should work out of the gate.
I’ll see if I can create an API for the LabelContainer for 2.1.56 - but I can’t promise I find the time. If someone else is motivated for the task, feel free to create a PR
Thanks Matthias, the CodeMirror instance is inserted in .editing-area at the same level as the rich and plain text inputs.
The focus stealing I am mentioning is when focusing out of the .fields-editor and back, from a cursory glance it seems the logic remembers which field was focused and refocuses that field, as well as handle focusing when neither of rich nor plain text edit is visible (using .focus-trap). There are some other stuff as well, all of which stem from “working around” the Svelte code rather than with it.
BTW I perfectly understand that modularity may not be at the top of the list when it comes to editor development, I am just trying ensure I take the “least obscure”/“most maintainable” route.
Henrik is the only one who intimately understands the editor code at the moment, and he’s unfortunately been busy with other things recently. I believe the API to add/modify toolbar items is fairly fleshed out at this point, but I’m not sure about the other areas.
Thanks, the toolbar button was fairly straight forward as you mentioned and as I understand it Matthias is intimately involved in the badges. Any pointers where to find info on the editing area/input would be great.
I built the entire editor with extension in mind, however it turned out to be not as easy I’d want it to be, and I even thought about cases like yours (adding an editing input).
There is an API for extension, which mostly revolves around this Svelte component, DynamicallySlottable:
You can see it in use in the EditorToolbar:
However, it was quite a hassle to make it work flawlessly, and a huge time sink, in making sure, it works as intended, as I had to keep writing accompanying add-ons, just interfacing with the API. Additionally it added a big pile of complexity on top an already intricate component tree.
To dynamically add an editing input, DynamicallySlottable would need to be used in the Editor as well, in a similar way it is currently used in the EditorToolbar.
Ok, thanks. So, if I understand correctly there is currently no API/“right way” to add an editing input, possibly there will be one in the future but that’s not certain?
Given my distinct lack of knowledge of Svelte and your experience of the difficulty of implementing DynamicallySlottable in the tool bar, I doubt I would be able to contribute constructively through a PR.
