How to store attrs on each word

[command-tab]

I’m working on an editor using tiptap where users can fix mistakes in transcripts generated by automated speech recognition software. My document schema uses several custom Nodes for related functionality (speaker selection, etc.), and I’m successfully using Vue components for them as necessary, and so far it’s all working well 👏🏻

Now I have to tackle the part where users edit the actual text which has timing and confidence information associated with each word or punctuation mark. Is there an approach I should use to ensure each newly typed word is wrapped in a Node (versus the default of all the words being wrapped in a single Node)?

Or would I be best off using a spanning: false Mark to store that extra information on each word, and intercepting transactions to ensure that timing information is dealt with accordingly as users combine, split, or replace words?

Or is there some other approach I haven’t thought of?

Thanks!

[hanspagel]

Try Decorations
https://www.tiptap.dev/experiments/linter

Hope that helps

[command-tab]

Thanks for the pointers! After picking apart and experimenting with the Linter code, I think Marks might actually be what I want. Decorations appear in the rendered DOM, but don't end up in the output of .getJSON(), which I need to persist the timing information that they'll be maintaining. And it looks like Marks do offer that. But thank you for getting me going!

Also: one thing I noticed, is that in the BadWords and Punctuation Linter examples, the regex matching only matches the first occurrence of the linted expression, not every occurrence. So if you, for example, type in both obviously and clearly into the TipTap editor, only the first occurrence will be decorated with the problem class and style. Maybe not something you want to worry about since the Linter isn't supported or maintained, but a heads up none the less.

Thank you! Proud to be a sponsor ❤️

[hanspagel]

Thanks for the feedback and thanks for sponsoring our open source work! Always interested in seeing what people build, so don’t forget to share that with us via [email protected] at some point! ✌️