Cannot resolve a DOM point from Slate point, Cannot find a descendant at path

[ENT108]

Description When implemented on a simple view, the Editor works fine. But when the Editor is places inside of a Drawer it fails in runtime.

Reproduction

Steps To reproduce the behavior:

1. Implement the Editor inside a conditionally rendered React Component
2. Use the Editor with styles like: quote, any list or table (heading, bold work just fine)
3. It fails at re-render of the component
4. See the error

Expectation I wish the Editor is not failing in runtime.

Environment

• Wysimark Version: 2.4.1
• React 18.2.0
• Operating System: macOS 13.1
• Browser: Safari 16.2
• TypeScript Version: 5.1.3

Context This error is know to Slate users. There are workarounds for Slate, but not for Wysimark as it wraps the Slate components. i.e.: https://github.com/ianstormtaylor/slate/issues/3421

[ENT108]

Overriding nested packages using yarn using:

"resolutions": {
    "slate-react": "0.97.1",
    "slate-history": "0.93.0"
  }

Is not helping.

[ENT108]

@thesunny I am able to set the below via this package? This could help.

https://github.com/ianstormtaylor/slate/issues/3421#issuecomment-1101931986

[thesunny]

@ENT108 

The fix you referenced is probably not the solution to this problem. I say this because if you set the editor to an empty string, it should still insert those objects automatically (e.g. the paragraph with a single text node in the Slate DOM).

The "Cannot resolve DOM point" is a pretty common error when the editor is looking for a point in the document that it can't find.

If you can create a minimum reproduction, I think we could come up with a solution quickly.

When you say "drawer". are you referring to the MUI drawer? https://mui.com/material-ui/react-drawer/

[ENT108]

if you set the editor to an empty string, it should still insert those objects automatically

That is true statement.

I am sorry for all the buzz. Got it working.

I initially implemented <Editable /> in a React.FC being rendered inside another React.FC that initiated editor via useEditor and this blew up. Having it all inside one React.FC thus also single re-render cycle solved the issue.

[ENT108]

When you say "drawer". are you referring to the MUI drawer? https://mui.com/material-ui/react-drawer/

Yes, that is a drawer.

[thesunny]

Happy to hear you figured it out!