Trying to create an editor + analysis layer

[monks1975]

HI, I'm writing a vue/nodejs project at work that does classification on the server from input text on the client, in close to realtime . I've been using a textarea that had on top of it a toggleable layer that would replicate the input text but with additional metadata from the server such as labels and indexes to enable some visualisations.

I had an idea using tiptap which seems amazing flexible, so have had a try with it. As I'm new to the library I'm not sure I'm going about it the right way, so was wondering if someone here could look at it and see if there are any mistakes I've made I should be aware of ;) Here's a link to a sandbox of the test project (doesn't use a server, just mock data in vuex)

Sandbox test

The issues I'm concerned about are:

The analysis I use is based on classifying individual sentences server side. Is it the correct way to use marks as the separator for a sentence (or token) in this case? I could not get the test app to work when I tried to create a custom node to represent a sentence.

For this to work I guess I need to keep tiptap's data model in sync with the server response. I want to keep as many rich text features as I can, but they make the model more complex currently. For instance if I add some bold styling to a word, after a round trip to the server I would need to reconstruct the part of the data model where bold was previously set.

Ideally I would like my schema to model the sentence + metadata via the server, and to keep this part of the model separate somehow from other edits.. I'm inexperienced, so can't explain what I think I need yet in detail (decorators?), as I have barely scratched the surface of what tiptap and prosemirror makes possible.

-Jon

[hanspagel]

Sounds like a great project! You probably want to look at https://github.com/guardian/typerighter, https://github.com/guardian/prosemirror-typerighter.

Marks aren’t a great way to separate content. Imagine having parts of the sentence styled, that would lead to a mess. :)

To render that meta data in tiptap/ProseMirror you can use decorations: https://prosemirror.net/examples/lint/

We ported the last example to tiptap v2 already, but that will still take a while until it’s published and is available for sponsors only for now.

Hope that helps to get you started!

[monks1975]

Thanks, this is really helpful Hans. I looked at the typerighter repos and there is some great stuff there I can learn from, at least on the prosemirror plugin side.

I managed to get a test decorator working yesterday, currently just setting style on arbitrary characters in the document when it changes.

Looking forward to tiptap 2 being released