diff --git a/.changeset/late-pants-drum.md b/.changeset/late-pants-drum.md new file mode 100644 index 0000000000..c799469222 --- /dev/null +++ b/.changeset/late-pants-drum.md @@ -0,0 +1,5 @@ +--- +"@udecode/plate-serializer-html": patch +--- + +Fixes "The `useSlateStatic` hook must be used inside the component's context." error in `serializeHtml` diff --git a/packages/serializer-html/src/__tests__/serializeHtml/with-useEditor.spec.ts b/packages/serializer-html/src/__tests__/serializeHtml/with-useEditor.spec.ts index 62949d124d..a656acfd75 100644 --- a/packages/serializer-html/src/__tests__/serializeHtml/with-useEditor.spec.ts +++ b/packages/serializer-html/src/__tests__/serializeHtml/with-useEditor.spec.ts @@ -1,10 +1,31 @@ -import { createTodoListPlugin } from '@udecode/plate-list'; +import { + createListPlugin, + createTodoListPlugin, + ELEMENT_LI, + ELEMENT_LIC, + ELEMENT_UL, +} from '@udecode/plate-list'; import { createPlateUIEditor } from 'www/src/lib/plate/create-plate-ui-editor'; import { serializeHtml } from '../../serializeHtml'; it('serialize elements using useSlateStatic', () => { - const plugins = [createTodoListPlugin()]; + const plugins = [ + createTodoListPlugin(), + createListPlugin({ + overrideByKey: { + [ELEMENT_UL]: { + type: 'unordered-list', + }, + [ELEMENT_LI]: { + type: 'list-item', + }, + [ELEMENT_LIC]: { + type: 'list-item-child', + }, + }, + }), + ]; const editor = createPlateUIEditor({ plugins }); const render = serializeHtml(editor, { nodes: [ @@ -13,6 +34,20 @@ it('serialize elements using useSlateStatic', () => { checked: true, children: [{ text: 'Slide to the right.' }], }, + { + type: 'unordered-list', + children: [ + { + type: 'list-item', + children: [ + { + type: 'list-item-child', + children: [{ text: 'Level 3' }], + }, + ], + }, + ], + }, ], }); diff --git a/packages/serializer-html/src/utils/createElementWithSlate.ts b/packages/serializer-html/src/utils/createElementWithSlate.ts index 22883e600f..c6cfc42efb 100644 --- a/packages/serializer-html/src/utils/createElementWithSlate.ts +++ b/packages/serializer-html/src/utils/createElementWithSlate.ts @@ -1,5 +1,10 @@ import React from 'react'; -import { createPlateEditor, Plate, PlateProps } from '@udecode/plate-common'; +import { + createPlateEditor, + Plate, + PlateContent, + PlateProps, +} from '@udecode/plate-common'; /** * Create a React element wrapped in a Plate provider. @@ -16,6 +21,10 @@ export const createElementWithSlate = ( ...props } = plateProps || {}; + const plateContent = React.createElement(PlateContent, { + renderEditable: () => children, + }); + const plate = React.createElement( Plate, { @@ -24,7 +33,7 @@ export const createElementWithSlate = ( onChange, ...props, } as PlateProps, - children + plateContent ); if (dndWrapper) {