4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T4715,'use client'; import { type HTMLAttributes, useCallback, useReducer, useRef, useState, } from 'react'; import { AIChatPlugin, streamInsertChunk } from '@platejs/ai/react'; import { deserializeMd } from '@platejs/markdown'; import { ChevronFirstIcon, ChevronLastIcon, PauseIcon, PlayIcon, RotateCcwIcon, } from 'lucide-react'; import { getPluginType, KEYS } from 'platejs'; import { Plate, usePlateEditor, usePlateViewEditor } from 'platejs/react'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; import { EditorKit } from '@/registry/components/editor/editor-kit'; import { CopilotKit } from '@/registry/components/editor/plugins/copilot-kit'; import { MarkdownJoiner } from '@/registry/lib/markdown-joiner-transform'; import { Editor, EditorContainer, EditorView } from '@/registry/ui/editor'; import { BaseEditorKit } from '../components/editor/editor-base-kit'; const CAPITALIZE_REGEX = /([A-Z])/g; const FIRST_CHAR_REGEX = /^./; const TRAILING_NEWLINES_REGEX = /(\n+)$/; const testScenarios = { // Basic markdown with complete elements columns: [ 'paragraph\n\n\n', ' ', ' <', 'column', ' width', '="', '33', '.', '333', '333', '333', '333', '336', '%">\n', ' ', ' ', '1', '\n', ' ', ' \n', ' ', ' <', 'column', ' width', '="', '33', '.', '333', '333', '333', '333', '336', '%">\n', ' ', ' ', '2', '\n', ' ', ' \n', ' ', ' <', 'column', ' width', '="', '33', '.', '333', '333', '333', '333', '336', '%">\n', ' ', ' ', '3', '\n', ' ', ' \n', '\n\nparagraph', ], links: [ '[Link ', 'to OpenA', 'I](https://www.openai.com)\n\n', '[Link ', 'to Google', 'I](https://ww', 'w.google.com/1', '11', '22', 'xx', 'yy', 'zz', 'aa', 'bb', 'cc', 'dd', 'ee', '33)\n\n', '[False Positive', '11', '22', '33', '44', '55', '66', '77', '88', '99', '100', ], lists: ['1.', ' number 1\n', '- ', 'List B\n', '-', ' [x] ', 'Task C'], listWithImage: [ '## ', 'Links ', 'and ', 'Images\n\n', '- [Link ', 'to OpenA', 'I](https://www.openai.com)\n', '- ![Sample Image](https://via.placeholder.com/150)\n\n', ], nestedStructureBlock: [ '```', 'javascript', '\n', 'import', ' React', ' from', " '", 'react', "';\n", 'import', ' {', ' Plate', ' }', ' from', " '@", 'ud', 'ecode', '/', 'plate', "';\n\n", 'const', ' Basic', 'Editor', ' =', ' ()', ' =>', ' {\n', ' ', ' return', ' (\n', ' ', ' <', 'Plate', '>\n', ' ', ' {/*', ' Add', ' your', ' plugins', ' and', ' components', ' here', ' */}\n', ' ', ' \n', ' ', ' );\n', '};\n\n', 'export', ' default', ' Basic', 'Editor', ';\n', '```', ], table: [ '| Feature |', ' Plate', '.js', ' ', ' ', '| Slate.js ', ' ', '|\n|------------------', '|--------------------------------', '---------------', '|--------------------------------', '---------------', '|\n| Purpose ', ' ', '| Rich text editor framework', ' ', ' ', '| Rich text editor framework', ' ', ' ', '|\n| Flexibility ', ' ', '| Highly customizable', ' with', ' plugins', ' ', ' ', '| Highly customizable', ' with', ' plugins', ' ', ' ', '|\n| Community ', ' ', '| Growing community support', ' ', ' ', '| Established community', ' support', ' ', ' ', '|\n| Documentation ', ' ', '| Comprehensive documentation', ' available', ' ', ' ', '| Comprehensive documentation', ' available', ' ', ' ', '|\n| Performance ', ' ', '| Optimized for performance', ' with', ' large', ' documents', '| Good performance, but', ' may', ' require', ' optimization', '|\n| Integration ', ' ', '| Easy integration with', ' React', ' ', ' ', '| Easy integration with', ' React', ' ', ' ', '|\n| Use Cases ', ' ', '| Suitable for complex', ' editing', ' needs', ' ', ' ', '| Suitable for complex', ' editing', ' needs', ' ', ' ', '\n\n', 'Paragraph ', 'should ', 'exist ', 'from ', 'table', ], }; export default function MarkdownStreamingDemo() { const [selectedScenario, setSelectedScenario] = useState('columns'); const [activeIndex, setActiveIndex] = useState(0); const pausedRef = useRef(false); const [paused, setPaused] = useState(false); const streamSessionRef = useRef(0); const [, forceUpdate] = useReducer((x) => x + 1, 0); const [streaming, setStreaming] = useState(false); const [isPlateStatic, setIsPlateStatic] = useState(false); const [speed, setSpeed] = useState(null); const editor = usePlateEditor( { plugins: [...CopilotKit, ...EditorKit], value: [], }, [] ); const editorStatic = usePlateViewEditor( { plugins: BaseEditorKit, }, [] ); const currentChunks = testScenarios[selectedScenario]; const transformedCurrentChunks = transformedChunks(currentChunks); const setPausedState = useCallback((nextPaused: boolean) => { pausedRef.current = nextPaused; setPaused(nextPaused); }, []); const onStreaming = useCallback(async () => { setStreaming(true); streamSessionRef.current += 1; const sessionId = streamSessionRef.current; setPausedState(false); setActiveIndex(0); // editor.tf.setValue([]); editor.setOption(AIChatPlugin, 'streaming', false); editor.setOption(AIChatPlugin, '_blockChunks', ''); editor.setOption(AIChatPlugin, '_blockPath', null); for (let i = 0; i < transformedCurrentChunks.length; i++) { while (pausedRef.current) { if (sessionId !== streamSessionRef.current) return; await new Promise((resolve) => setTimeout(resolve, 100)); } if (sessionId !== streamSessionRef.current) return; setActiveIndex(i + 1); const chunk = transformedCurrentChunks[i]; streamInsertChunk(editor, chunk.chunk, { textProps: { [getPluginType(editor, KEYS.ai)]: true, }, }); await new Promise((resolve) => setTimeout(resolve, speed ?? chunk.delayInMs) ); if (sessionId !== streamSessionRef.current) return; } setStreaming(false); }, [editor, transformedCurrentChunks, speed, setPausedState]); // eslint-disable-next-line react-hooks/immutability -- Static editor demo intentionally mutates editor.children during playback. const onStreamingStatic = useCallback(async () => { let output = ''; setStreaming(true); streamSessionRef.current += 1; const sessionId = streamSessionRef.current; setPausedState(false); for (const chunk of transformedCurrentChunks) { while (pausedRef.current) { if (sessionId !== streamSessionRef.current) return; await new Promise((resolve) => setTimeout(resolve, 100)); } if (sessionId !== streamSessionRef.current) return; output += chunk.chunk; // eslint-disable-next-line react-hooks/immutability -- Demo component intentionally mutates static editor for streaming visualization. editorStatic.children = deserializeMd(editorStatic, output); setActiveIndex((prev) => prev + 1); forceUpdate(); await new Promise((resolve) => setTimeout(resolve, speed ?? chunk.delayInMs) ); } setStreaming(false); }, [editorStatic, speed, transformedCurrentChunks, setPausedState]); const onReset = useCallback(() => { setActiveIndex(0); if (isPlateStatic) { // eslint-disable-next-line react-hooks/immutability -- Demo component intentionally mutates static editor for reset. editorStatic.children = []; forceUpdate(); } else { editor.tf.setValue([]); editor.setOption(AIChatPlugin, 'streaming', false); editor.setOption(AIChatPlugin, '_blockChunks', ''); editor.setOption(AIChatPlugin, '_blockPath', null); } }, [editor, editorStatic, isPlateStatic]); const onNavigate = useCallback( (targetIndex: number) => { // Check if navigation is possible if (targetIndex < 0 || targetIndex > transformedCurrentChunks.length) return; if (isPlateStatic) { let output = ''; for (const chunk of transformedCurrentChunks.slice(0, targetIndex)) { output += chunk.chunk; } // eslint-disable-next-line react-hooks/immutability -- Demo component intentionally mutates static editor for navigation. editorStatic.children = deserializeMd(editorStatic, output); setActiveIndex(targetIndex); forceUpdate(); } else { editor.tf.setValue([]); editor.setOption(AIChatPlugin, 'streaming', false); editor.setOption(AIChatPlugin, '_blockChunks', ''); editor.setOption(AIChatPlugin, '_blockPath', null); for (const chunk of transformedCurrentChunks.slice(0, targetIndex)) { streamInsertChunk(editor, chunk.chunk, { textProps: { [getPluginType(editor, KEYS.ai)]: true, }, }); } setActiveIndex(targetIndex); } }, [editor, editorStatic, isPlateStatic, transformedCurrentChunks] ); const onPrev = useCallback( () => onNavigate(activeIndex - 1), [onNavigate, activeIndex] ); const onNext = useCallback( () => onNavigate(activeIndex + 1), [onNavigate, activeIndex] ); return (

{/* Scenario Selection */}

Test Scenario:

{/* Control Buttons */}

Speed: The default speed is 10ms, but it adjusts to 100ms when streaming a table or code block.

PlateStatic offers more robust and flawless performance.

Transformed Chunks ({activeIndex}/{transformedCurrentChunks.length})

c.chunk) )} />

Editor Output

{isPlateStatic ? ( ) : ( )}

Raw Token Comparison

Original Chunks

Raw Markdown Text

        </div>
      </div>
    </section>
  );
}

type TChunks = {
  chunks: {
    index: number;
    text: string;
  }[];
  linebreaks: number;
};

function splitChunksByLinebreak(chunks: string[]) {
  const result: TChunks[] = [];
  let current: { index: number; text: string }[] = [];

  for (let i = 0; i < chunks.length; i++) {
    const chunk = chunks[i];
    current.push({ index: i, text: chunk });

    const match = TRAILING_NEWLINES_REGEX.exec(chunk);
    if (match) {
      const linebreaks = match[1].length;
      result.push({
        chunks: [...current],
        linebreaks,
      });
      current = [];
    }
  }

  if (current.length > 0) {
    result.push({
      chunks: [...current],
      linebreaks: 0,
    });
  }

  return result;
}

type TChunk = { chunk: string; delayInMs: number };
const transformedChunks = (chunks: string[]): TChunk[] => {
  const result: TChunk[] = [];
  const joiner = new MarkdownJoiner();
  for (const chunk of chunks) {
    const processed = joiner.processText(chunk);
    if (processed) {
      result.push({ chunk: processed, delayInMs: joiner.delayInMs });
    }
  }
  // flush any remaining buffered content
  const remaining = joiner.flush();
  if (remaining) {
    result.push({ chunk: remaining, delayInMs: joiner.delayInMs });
  }
  return result;
};

const Tokens = ({
  activeIndex,
  chunkClick,
  chunks,
  ...props
}: {
  activeIndex: number;
  chunks: TChunks[];
  chunkClick?: (index: number) => void;
} & HTMLAttributes<HTMLDivElement>) => (
  <div
    className="my-1 h-[500px] overflow-y-auto rounded bg-gray-100 p-4 font-mono"
    {...props}
  >
    {chunks.map((chunk, index) => (
      <div key={index} className="py-1">
        {chunk.chunks.map((c, j) => {
          const lineBreak = c.text.replaceAll('\n', '⤶');
          const space = lineBreak.replaceAll(' ', '␣');

          return (
            <span
              key={j}
              role="button"
              className={cn(
                'mx-1 inline-block rounded border p-1',
                activeIndex && c.index < activeIndex && 'bg-amber-400'
              )}
              onClick={() => chunkClick?.(c.index + 1)}
            >
              {space}
            </span>
          );
        })}
      </div>
    ))}
  </div>
);
4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@plate","registryDependencies":["https://platejs.org/r/copilot-kit.json","https://platejs.org/r/editor-kit.json","https://platejs.org/r/markdown-joiner-transform.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/examples/markdown-streaming-demo.tsx","content":"$50","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>