onChange triggers whenever component mounts

[umutbozdag]

Description

I am trying to figure this out for hours and all I want to do is update the initialValue of the editor when I refresh the page by fetching data from IndexedDB using localforage package,

as I said on the title, onChange triggers whenever component mounts with default data and this breaks everything. I have tried every solution but no luck:

export default function PlateEditor() {
  const editor = useEditorState("myeditor");
  const [value, setValue] = usePlateStates("myeditor").value();
  const containerRef = useRef(null);
  const [initialData, setInitialData] = useState<null | TElement[]>(null);

  useEffect(() => {
    getFromIndexedDB().then((data) => {
      console.log("data", data);
      setValue(data);
    });
  }, []);
  return (
    <DndProvider backend={HTML5Backend}>
      <Plate
        editor={editor}
        id="myeditor"
        plugins={plugins}
        onChange={async (newValue) => {
          console.log("newValue", newValue);
          await saveToIndexedDB(newValue);
        }}
        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>

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

          <FloatingToolbar>
            <FloatingToolbarButtons />
          </FloatingToolbar>

          <CommentsPopover />
        </div>
      </Plate>
    </DndProvider>
  );
}

Environment

• slate: ^0.101.1"
• slate-react: ^0.101.1
• browser: chrome

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[12joan]

Setting Plate's value programatically after the initial render isn't supported, and is probably the reason why onChange is being called. Defer rendering the Plate component until after the data is available. (This is better UX anyway, since users don't want to be seeing an empty editor if the data takes a long time to load.)

[umutbozdag]

Yes it's working when I wait for my data to load but I think it's still a weird behavior that onChange event immediately firing when the component is mounted (I think setting initialValue prop shouldn't trigger this event on mount, instead it should just set the value and fire onChange whenever there is a new update). Also as I see this is not really well documented, I can help with that if there is a need.

There is one more small problem with this library: onChange event fires when I focus editor even though it's value didn't change at all.

[12joan]

Setting initialValue does not trigger onChange. That's probably caused by setValue.

The reason why focusing the editor triggers onChange is because the selection is being updated. This is a behaviour of Slate, and a workaround is documented on Slate's Saving to a Database walkthrough. An onValueChange prop was recently added to Slate, which automatically filters out selection changes, but this hasn't been exposed on Plate's side yet.

[umutbozdag]

I have the following PlateEditor setup now and I have just checked that console.log works every time I refresh the page, I think it's firing when setting the initialValue.

export default function PlateEditor() {
  const [initialData, setInitialData] = useState<null | TElement[]>(null);

  useEffect(() => {
    getFromIndexedDB().then((data) => {
      setInitialData((data as TElement[]) ?? initialValue);
    });
  }, []);

  return (
    <DndProvider backend={HTML5Backend}>
      {initialData && (
        <Plate
          plugins={plugins}
          onChange={async (newValue) => {
            console.log('change')
            await saveToIndexedDB(newValue);
          }}
          initialValue={initialData}
        >
          <div
            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>

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

            <FloatingToolbar>
              <FloatingToolbarButtons />
            </FloatingToolbar>

            <CommentsPopover />
          </div>
        </Plate>
      )}
    </DndProvider>
  );
}

[12joan]

That's strange. Can you try to reproduce this behaviour in a minimal code sandbox?

[umutbozdag]

I have just tried it again and it wasn't related to initialValue at all, I was doing something like autofocus manually to the editor so that's why onChange did work. Sorry for misdirection.