I’m currently working on a project that requires a rich text editor with some unique functionality. I’m new to working with editors in general and have been trying to implement what I want in Slate js over the past few days and I’m not really getting anywhere. I thought I might take a look at ProseMirror (which I would be using via TipTap, I think, in my React project), but figured I should ask the community about this first before committing to diving into the documentation as this looks like a fairly complex framework.
In my editor I would like to give users the ability to add a translation for each word they type using a custom markup syntax like this: word(translation) or like this: [word]words with spaces[/word](translation).
However, where this gets complicated is that I want the markup itself to disappear when the user hits space after completing it, so e.g. “word(translation)” just becomes “word” maybe with a custom css class to indicate the word has a translation. The translation itself will need to be stored somehow, likely as a data attribute on the element. Then, whenever the user moves their caret back into the word I want the markup to reappear, e.g. “word” becomes “word(translation)”. It’s this last part I just can’t figure out in Slate js.
So my question is, does this sound like something that could be done in ProseMirror? Any examples out there of similar behavior I could look at? Any tips as to a general approach I might take to accomplish this?
It’s still very early days in the project so if I need to switch editor frameworks and do a little more learning that’s fine by me I’d just like to avoid swapping one for another with no reason.