Can't figure out how to stream markdown into tiptap

[fgatti675]

Hi everyone,
I am having a hard time figuring out how to stream markdown generated from an LLM into tiptap.
If I insert content as it comes, it fails in many ways. If I wait til the result is complete and just insert the full string, it works perfectly.
I have been trying a middle ground, spliting the markdown by lines, so I make sure format like bold are handled correctly.

This code simulates the calls that my code makes while streaming:

editor.chain().focus()
    .insertContent("- **Autosave**: Never worry about losing your work… are saved as you type, giving you peace of mind.\n")
    .run()
editor.chain().focus()
    .insertContent("- **Another line**: Never worry about losing your work… are saved as you type, giving you peace of mind.\n")
    .run();

And how it looks like:

I am using the markdown extension configured like:

export const markdownExtension = Markdown.configure({
    html: true,
});

It generates the new bulletlist node under the last one, no matter what I do, calling .enter() does nothing apparently, though I was expecting to jump to a new line

Any help is greatly appreciated!

[nperez0111]

It is very difficult to get streaming of formatted content into the editor it took me two weeks to get everything right for the content Ai pro extension. I would not say that there is an easy answer to this at all. I would recommend streaming into a preview element instead and only inserting the content into the editor afterwards.

[fgatti675]

Thank you. Yes I realised it is pretty complicated.
I will try your approach, I am going to stream HTML instead of markdown, directly into a decorator, and replace with the final content when complete. Does that make sense?
Thanks for your help!

[nperez0111]

Yea into a decoration sounds like a good plan

[fgatti675]

I could manage with your help, thanks a lot!!

Area.mp4

[whisper-bye]

@fgatti675 would you please share your solution? thx a lot!

[gjc14]

Hi maybe this will be helpful. I made a component based on https://tiptap.dev/docs/editor/extensions/custom-extensions/node-views/react to handle api call and stream render.

gjc14/tiptap-streaming-preview

[whisper-bye]

@gjc14 amazing!!!