Error when unmounting <ProseMirror> component?

[sherwinyu]

Hi, I get a

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

when I unmount the <ProseMirror> component.

This seems different from #42 since it's happening regardless of the text content of the editor and whether I'm deleting.

Here's more stack trace if it's helpful:

he above error occurred in the <NYTProseMirrorEditor> component:

    at NYTProseMirrorEditor
    at div
    at MyTest (http://localhost:3000/src/main.tsx?t=1734560559174:24:33)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18704
update.callback @ react-dom.development.js:18737
callCallback @ react-dom.development.js:15036
commitUpdateQueue @ react-dom.development.js:15057
commitLayoutEffectOnFiber @ react-dom.development.js:23430
commitLayoutMountEffects_complete @ react-dom.development.js:24727
commitLayoutEffects_begin @ react-dom.development.js:24713
commitLayoutEffects @ react-dom.development.js:24651
commitRootImpl @ react-dom.development.js:26862
commitRoot @ react-dom.development.js:26721
performSyncWorkOnRoot @ react-dom.development.js:26156
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25690
react-dom.development.js:11099 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (react-dom.development.js:11099:18)
    at commitDeletionEffectsOnFiber (react-dom.development.js:24067:15)
    at recursivelyTraverseDeletionEffects (react-dom.development.js:24028:5)
    at commitDeletionEffectsOnFiber (react-dom.development.js:24157:9)
    at recursivelyTraverseDeletionEffects (react-dom.development.js:24028:5)
    at commitDeletionEffectsOnFiber (react-dom.development.js:24157:9)
    at recursivelyTraverseDeletionEffects (react-dom.development.js:24028:5)
    at commitDeletionEffectsOnFiber (react-dom.development.js:24209:9)
    at recursivelyTraverseDeletionEffects (react-dom.development.js:24028:5)
    at commitDeletionEffectsOnFiber (react-dom.development.js:24157:9)

[smoores-dev]

Hey @sherwinyu, I think I actually encountered this as well when I was working on #148. I'll pull that fix out into its own PR and try to get it released ASAP. Thanks for reporting!

[sherwinyu]

Great! Was unsure if I was doing something wrong. If it helps, here's a super small repro as well: https://github.com/sherwinyu/rich-text-editor-playground/tree/repro

[smoores-dev]

Ah, you know what? This actually isn't what I thought it was! It seems like this is an issue with the menubar plugin, specifically -- if you update your exampleSetup call to set example({ schema: mySchema, menuBar: false }) this is resolved. I can take a closer look and see what's causing this, but in general I wouldn't recommend using a non-React menubar with this library, anyway!

[smoores-dev]

Ah, yeah, ok. The prosemirror-menu plugin is incompatible with React ProseMirror. It wraps the view.dom in a div element, which breaks React's relationship with the DOM!

[sherwinyu]

Ah gotcha, thanks for the super fast turnaround and tracking this down!