why the initial value erased when I input the first character in each time.

[gWcyWoo]

The code as below:

export function PlateEditor(props: PlateEditorProps) {
const tmpEditor = createPlateEditor({ plugins });

const initialValue = useMemo(() => {
    return deserializeHtml(tmpEditor, { element: props.defaultContent });
}, [props.defaultContent, tmpEditor]);

// console.log("INIT: ",initialValue);

const [value, setValue] = useState<Value>(initialValue as Value);

const handleChange = useCallback((value: Value)=> {
    props.toHtml(value.map((node)=> {
        if (Element.isElement(node)) {
            return serializeHtml(tmpEditor, { nodes: node.children, convertNewLinesToHtmlBr:true })
        }
    }).join("<br>"));
    // props.toHtml(values.map(value=> serializeHtml(tmpEditor, { nodes: value.children, convertNewLinesToHtmlBr: true })).join("<br>"));
}, [props, tmpEditor]);


return (
    <DndProvider backend={HTML5Backend}>
        <CommentsProvider users={{}} myUserId="1">
            <Tooltip.Provider>
            <Plate value={value} plugins={plugins} onChange={handleChange}>
                <FixedToolbar>
                    <FixedToolbarButtons />
                </FixedToolbar>


                <Editor />

                <FloatingToolbar>
                    <FloatingToolbarButtons />
                </FloatingToolbar>
                <CommentsPopover />
            </Plate>
            </Tooltip.Provider>
        </CommentsProvider>
    </DndProvider>
)

}

I want to recovery the html code which genererate by PlateEditor last time and stored in the database. It works well when I initial the component, however, the trouble encountered when I input the first character, the initial value was removed automatically, I am confusion about that, anyone here can guide me? Thank you!

[trancethehuman]

I have the same issue. Had to insert a temporary block with mock ID just to keep it from crashing my backend due to no ID