setValue() not work #2691

woodpeng · 2023-10-09T15:36:15Z

woodpeng
Oct 9, 2023

Description

Upgrade Plate version from 21.4.3 to version: 24.4.0.
Found that setValue not work now.
I reproduced it in the Plate-playground-template project.

codes as following:

const ResetEditor = () => {
  const editor = useEditorState('myeditor');
  const [value, setValue] = usePlateStates('myeditor').value();

  return <>
    <button
      onClick={() => {
        let content = [
          {
            id: '2',
            type: ELEMENT_PARAGRAPH,
            children: [{ text: 'Hello, amazing World!' }],
          },
        ]
        editor.reset();
        setValue(content);
      }}

      style={{ backgroundColor: 'dodgerblue', color: 'white' }}
    >
      Reset Value
    </button>
  </>
}

export default function PlateEditor() {
  const containerRef = useRef(null);

  const initialValue = [
    {
      id: '1',
      type: ELEMENT_PARAGRAPH,
      children: [{ text: 'Hello, World!' }],
    },
  ];


  return (
    <DndProvider backend={HTML5Backend}>
      <CommentsProvider users={commentsUsers} myUserId={myUserId}>
        <Plate id='myeditor' plugins={plugins} initialValue={initialValue}>
          <div
            ref={containerRef}
            className={cn(
              // Block selection
              '[&_.slate-start-area-left]:!w-[64px] [&_.slate-start-area-right]:!w-[64px] [&_.slate-start-area-top]:!h-4'
            )}
          >

            <FixedToolbar>
              <FixedToolbarButtons />
            </FixedToolbar>

            <ResetEditor />

            <Editor
              className="px-[96px] py-16"
              autoFocus
              focusRing={false}
              variant="ghost"
              size="md"
            />

            <FloatingToolbar>
              <FloatingToolbarButtons />
            </FloatingToolbar>

            <MentionCombobox items={MENTIONABLES} />

            <CommentsPopover />

            <CursorOverlay containerRef={containerRef} />
          </div>
        </Plate>
      </CommentsProvider>
    </DndProvider>
  );
}

[email protected], following codes works

const [value, setValue] = usePlateStates(editorId).value();
const resetEditor = useResetPlateEditor(editorId);
......
resetEditor();
setValue(content);

Screen-2023-10-09-232805.mp4