I’m looking to create an editor which can be used to transcribe audio.
First, a bunch of text is generated which is split up into one or more paragraphs. The user should be able to add/merge paragraphs as per the default behaviour of ProseMirror, this all works perfectly.
Now, I want to show a checkbox to the right of each paragraph that the user can click to verify the contents of said paragraph. I also want to show a timestamp to the left of the paragraph. That should look something like this:
I tried to create a custom node which renders three separate HTML elements but this seems to work quite finicky.
Before, if the caret was positioned at the end of a sentence and you pressed the right arrow key, the caret was set to the start of the next sentence.
Now, the caret is placed in front of the checkbox. Pressing the right arrow key again places the caret in front of the timestamp.
Furthermore, adding/removing paragraphs just seems to work really finicky.
How would I best approach this situation? Should I define the timestamp and checkbox as their own custom nodes and create a parent custom node comprised of a timestamp, a paragraph and a checkbox? Should I regard the whole document as a table, with each paragraph being a table row, and change the schema accordingly?
This sounds like something you’ll want to use either widget decorations or elements entirely out of the editor (positioned next to the selected paragraph) for. Editing controls are generally not a part of the document, but rather a part of your editor UI. Storing information about verified paragraphs can either be done with an attribute on paragraph nodes (if you need these to be part of the stored document) or in a separate data structure (by paragraph position, which you will have to update on each transaction to stay in sync).
I didn’t know about widget decorations, I’ll look into that first. Leaning towards that approach, since the contents of the timestamp are sort-of tied to the editor. I already have a plugin with a separate data structure that saves the start- and end timestamp of each word as per this link.
IMO, each paragraph should show the start timestamp of the first word in the text, correctly handling cases where the user could add/delete words or place the caret in the middle of a paragraph and press enter. I’ll check if it’s feasible to add widget decoration to this plugin so I can easily access that data structure and handle transactions accordingly.
