Uncaught Invariant Violation: Expected drag drop context

[jeremygottfried]

Description If you try to use serializeHtml and withDraggables within the same editor, it throws an error. This is using the same code from the playground.

• Uncaught Invariant Violation: Expected drag drop context
• Error: Unable to find the path for Slate node: {“type”:“h1",“children”:[{“text”:“hello world”}]}

Steps

Use serializeHtml within the playground, using const editor = usePlateEditorRef(id);

       onChange={(json) => {
          try {
            const html = serializeHtml(editor,
              {
                nodes: json,
              }
            )
            console.log(html);
          }
          catch (e) {
            console.error(e);
          }
        }}

Sandbox

https://codesandbox.io/s/plate-playground-v1-2mh1c

Expectation

serializeHtml shouldn't care about the drag drop context. It should work no matter what components/plugins you're using.

Environment

• slate: 0.75.0
• slate-react: 0.75.0
• browser: chrome

[odusseys]

Same issue here with a custom implementation of drag-and-drop using aboveComponent - seems plate is attempting to render the node tree in a "headless" manner and thus without the dnd context. This does not seem like appropriate behavior.

[TrySpace]

I'm having the same issue, it happened after I refactored my PlateProvider and Plate components into separate components, and it seems to then lose the context provider.

But the other thing I later realised is that if you have multiple createObjectEditorPlugins() in a module, and one of them is configured with drag & drop, even if you don't use it it will error because you are actually executing the function when assigning it to the const:

export const draggableEditorPlugins = createObjectEditorPlugins(
  [
    ...basicElementsPlugins,
    ...basicMarksPlugins,
    ...formattingPlugins,
  ],
  {
    components: componentsWithDraggables,
  }
)

So I was puzzled for a good few hours because even when I wasn't actually using the draggableEditorPlugins ANYWHERE, it would still error only when the component rendered (Not sure if it would have happened earlier/on runtime if I didn't use React.lazy loading)

[chandreshpatidar]

Hi @jeremygottfried @odusseys @TrySpace,

This issue has been fixed. You can use serializeHtml with DnD by installing the @udecode/[email protected] or above version. You can follow the docs for integration.

@zbeyens I think we should close the issue.