Correct way to deserialise markdown and set the content to the editor ? Using PlateController ?

[florian583]

Problem

I am currently using NextJS, Plate as a rich text editor, and react-hook-form in my project. I have another component that performs completion with AI and Vercel AI SDK. Once I receive the completion, I need to update the content of the Plate editor with the parsed completion as markdown.

I am retrieving the content from a Zustand state called completion, and I also have initial values set as an empty array or the current saved state of the form with react-hook-form.

I have tried the following approaches:

1. Updating the initialValues: The initialValues are getting updated, but the editor is not.
2. Current approach: This works, but I still have an empty <p> line (the default of the editor, I assume) at the beginning, which I don't know how to remove.

Here is the function I am currently using to parse the completion string and set the node with insertNodes():

const editor = useEditorRef();
const stepData = useStepStore(state => state.stepData);
const setStepData = useStepStore(state => state.setStepData);
const completion = useCompletionStore(state => state.completion);
const resetCompletion = useCompletionStore(state => state.reset);

const updateEditorWithDescription = useCallback(
  (description: string) => {
    const deserializedMd = deserializeMd(editor, description as string);
    editor?.reset();
    setValueForm('description', deserializedMd as string);
    editor?.deleteFragment();
    editor?.insertNodes(deserializedMd);
    editor?.normalize();
    setStepData(stepNumber, { description: deserializedMd }, isValid);
    resetCompletion();
  },
  [editor, setValueForm, setStepData, isValid, resetCompletion]
);

My RichTextEditor component is as follows:

const RichTextEditor = ({ onChange, initialValue }: RichTextEditorProps) => {
  const containerRef = useRef<HTMLDivElement>(null);

  const handleChange = (newValue: TElement[]) => {
    if (onChange) {
      onChange(newValue);
    }
  };

  return (
    <TooltipProvider>
      <Plate
        id="rich-text-editor"
        plugins={plugins}
        initialValue={initialValue}
        onChange={handleChange}
        normalizeInitialValue
      >
        <div
          ref={containerRef}
          className={cn(
            'relative',
            'w-full',
            'rounded-2xl border border-zinc-200',
            'bg-white',
            'overflow-hidden',
            'min-h-[calc(100vh-400px)]',
            'max-h-full'
          )}
        >
          <FixedToolbar className="top-[0px]">
            <FixedToolbarButtons />
          </FixedToolbar>
          <Editor autoFocus focusRing={false} variant="ghost" size="md" />
          <CursorOverlay containerRef={containerRef} />
        </div>
      </Plate>
    </TooltipProvider>
  );
};

export default RichTextEditor;

Usage:

<RichTextEditor
  onChange={newValue => form.setValue('description', newValue)}
  initialValue={form.watch('description') as TElement[]}
/>

Question

How can I update the Plate editor content with the parsed completion as markdown without having an empty <p> line at the beginning or what is the recommanded usage ? Any help or suggestions would be greatly appreciated.