HTMLReact Serializer does not work

[SLey3]

Description

It seems that when the htmlReact serializer tries to serialize the plate JSON data to HTML, an invalid hook call error occurs. Using the error log, it could be traced back to the useIsVisible hook in the toggleIndexAtom file located within the @udecode/plate-toggle library. I followed the docs in terms of calling the serializer and I placed it in the following function:

    const serializeEditorContent = () => {
        return editor.api.htmlReact.serialize({
            nodes: editor.children,
            dndWrapper: (props) => <DndProvider backend={HTML5Backend} {...props} />
        });
    };

Reproduction URL

No response

Reproduction steps

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Plate version

39.1.8

Slate React version

0.110.1

Screenshots

No response

Logs

react-dom.development.js:15408 Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.development.js:15408:9)
    at Object.useContext (react.development.js:1618:21)
    at useAtomStore (createAtomProvider.tsx:33:30)
    at useStore2 (createAtomStore.ts:244:26)
    at Object.store (createAtomStore.ts:328:7)
    at usePlateEditorStore (createPlateStore.ts:90:40)
    at usePlateSelectors (createPlateStore.ts:134:17)
    at useEditorRef (useEditorRef.ts:15:6)
    at useEditorPlugin (useEditorPlugin.ts:20:18)
    at useIsVisible (toggleIndexAtom.ts:53:25)

Browsers

Chrome

[slavik-chapelskyi]

I've run into the same issue. When I try to comment out the toggle plugins, I encounter similar problems with other plugins. It seems that the HTML serialization is completely broken. From my quick review of the code, it appears that the process tries to recreate elements outside of the React tree and then convert them into an HTML string, which breaks the rules of React.

[zbeyens]

Duplicate of #2804. See this workaround.