How can I implement automatic text highlighting as user types, like in Twitter or Hemingway editor?

[lumenwrites]

Hi! I would really to like implement automatic text highlighting based on some rule, for example, highlight words in red when the the text gets too long:

Or automatically highlight complex words/sentences:

Can you please help me to figure out how to do this?

[cadars]

The Linter experiment might be a good starting point? https://tiptap.dev/experiments/linter

[lumenwrites]

Thanks, this looks amazing! It is such a shame that it's "currently not supported or maintained", it would be such a perfect solution for my project.

[vchau254]

I did it by using setHighlight to make the highlight works like Twitter editor. Hope it helps.
I think for special words, if you can locate the position of those words by using setTextSelection, you can add highlight on them too
if(characterCount > limitCharacter){
editor
.chain()
.setHighlight({ color: '#0D8A00' })
.run()
}

[Glavin001]

I was able to use the ColorHighlighter part of the Savvy example as a reference to easily create an extension and ProseMirror plugin which supported adding decorations: https://tiptap.dev/examples/savvy

For example, notice the color highlighter styling automatically applied, in the same way a linter would be:

1. ⭐ Create a custom function, such as findColors, to return decorations given a doc: Node: https://github.com/ueberdosis/tiptap/blob/main/demos/src/Examples/Savvy/React/findColors.ts
2. Create a Tiptap extension which uses addProseMirrorPlugins to add a new ProseMirror plugin: https://github.com/ueberdosis/tiptap/blob/main/demos/src/Examples/Savvy/React/ColorHighlighter.ts
3. ⭐ The plugin applies the decorations returned from findColors: https://github.com/ueberdosis/tiptap/blob/main/demos/src/Examples/Savvy/React/ColorHighlighter.ts#L14-L17
4. Create the Tiptap editor with the new ColorHighlighter extension: https://github.com/ueberdosis/tiptap/blob/main/demos/src/Examples/Savvy/React/index.jsx#L22

Really clean starting point! Now edit the findColors function as needed to return your desired decorations. 🎉

[Gregoor]

Thank you, that was a great starting point for me. I am now struggling to figure out how to update a prosemirror plugin, e.g. if only specific colors in the findColors were to be found, and that list is passed in via Extension.configure. I know I can access them via this.options but the prose mirror methods don't seem to be re-run in that case and I have not found how to trigger them yet.