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!!!

[eRuaro]

if the LLM is returning markdown content, you can use a markdown to html converter and pass the results to setContent:

import React, { useState, useEffect } from 'react';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Markdown from '@tiptap/extension-markdown';
import Link from '@tiptap/extension-link';
import { marked } from 'marked';

const MarkdownEditor = () => {
 const [answer, setAnswer] = useState([]);
 const [streaming, setStreaming] = useState(false);

  ... code that handles llm streaming, presumably this appends to the answer array

 const markdownToHtml = (markdown) => {
   return marked(markdown, {
     breaks: true,    // Convert \n to <br>
     gfm: true,       // Enable GitHub Flavored Markdown
     async: false
   });
 };

 const answerEditor = useEditor({
   editable: false,
   extensions: [
     StarterKit,
     Markdown,
     Link.configure({
       autolink: false,
     })
   ],
 });

 useEffect(() => {
   const content = answer.join("");
   const htmlContent = markdownToHtml(content);
   answerEditor?.commands.setContent(htmlContent);
 }, [answer, answerEditor]);

 return (
   <>
     {streaming && (
       <div className="border border-gray-600 shadow-md rounded-lg px-4 py-1 flex flex-col">
         <EditorContent 
           editor={answerEditor} 
           className="prose prose-p:text-md max-w-none whitespace-pre-wrap flex-grow" 
         />
       </div>
     )}
   </>
 );
};

export default MarkdownEditor;