In Tiptap, how do I get the html for the cursor selected area?

Question

I have developed a rich text editor using tiptap/react. When I select a piece of text with the cursor, how do I get the html or json of the selected area?

For example, the following text, 'say-as' is a custom tag, I want to get it when the cursor is selected, but now I can only get plain text:

editor content: This shop has <say-as interpret-as="cardinal">100</say-as> customers every day

I want to get labeled content when the cursor is selected，I try to do that：

const { from, to } = editor.state.selection; const text = editor.state.doc.textBetween(from, to);

but I can only get plain text now:

This shop has 100 customers every day

, this only retrieves plain text and does not contain the tags defined by the custom extension.

I appreciate your help！

Answer 1

I would like to start by saying that ProseMirror (which TipTap extends), believes in a near complete separation of the browser dom, and the text document. Only acknowledging the dom enough to render and keep the 2 in sync.

That said ProseMirror/TipTap provide no such functionality. However, you can still do this with plain Javascript using window.getSelection().