[serializer-html][list-plugin] Investigate into serializeHtml error

[dimaanj]

Summary

Shows an error condition with serializeHtml function. It's started to happen from version 26.0.1.

The `useSlateStatic` hook must be used inside the <Slate> component's context.

Basically, this commit caused an issue: 0b8b325

Currently:

plate/packages/serializer-html/src/utils/createElementWithSlate.ts

Lines 4 to 35 in 9c3fbcd

	/**
	* Create a React element wrapped in a Plate provider.
	*/
	export const createElementWithSlate = (
	plateProps?: Partial<PlateProps>,
	dndWrapper?: string | React.FC | React.ComponentClass
	) => {
	const {
	editor = createPlateEditor(),
	value = [],
	onChange = () => {},
	children,
	...props
	} = plateProps || {};
	const plate = React.createElement(
	Plate,
	{
	editor,
	initialValue: value,
	onChange,
	...props,
	} as PlateProps,
	children
	);
	if (dndWrapper) {
	return React.createElement(dndWrapper, null, plate);
	}
	return plate;
	};

[changeset-bot]

🦋 Changeset detected

Latest commit: c24e4d8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@udecode/plate-serializer-html	Patch
@udecode/plate	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
plate	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 25, 2024 6:02am

[12joan]

Thanks for providing this reproducing test case. Unfortunately, we can't merge this PR until the issue is resolved, since putting a failing test on main will block all other development.

I think I've figured out what's causing the issue. useStateStatic (Slate's equivalent to our useEditorRef) isn't used anywhere in Plate's code. It is, however, used in some slate-react components that Plate uses, such as Slate's text.tsx.

useSlateStatic requres a EditorContext.Provider ancestor, which should have been provided a Slate component. In Plate, this is rendered by PlateContent via PlateSlate. It seems that elementToHtml and createElementWithSlate have successfuly provided a Plate component, but have neglected to provide a PlateContent.

What I don't understand is why serializeHtml has been working at all without a PlateContent, and what it is about the example in your PR specifically that triggers it. Is it the overrideByKey option, or something inside createListPlugin, perhaps?

@dimaanj Would you be able to see if adding PlateContent to createElementWithSlate helps at all?

[dimaanj]

Would you be able to see if adding PlateContent to createElementWithSlate helps at all?

Yes, adding it like I did it below helps to avoid errors when there are overriden elements with overrideByKey. The thing is it requires test updates. Could you please look at it @12joan ?

+  const plateContent = React.createElement(PlateContent, null, children);

  const plate = React.createElement(
    Plate,
    {
      editor,
      initialValue: value,
      onChange,
      ...props,
    } as PlateProps,
-     children
+    plateContent
  );

[12joan]

@dimaanj Can you push that change to this branch so we can see the failures on the CI?

The fact that it only happens when there are type overrides is an interesting clue. @zbeyens Any idea what the link might be between overrideByKey and useSlateStatic?

[zbeyens]

Maybe when DefaultElement is used?

[dimaanj]

@dimaanj Can you push that change to this branch so we can see the failures on the CI?

Done