Merge pull request #2837 from dimaanj/fix-serializeHtml-error

[serializer-html][list-plugin] Investigate into `serializeHtml` error
udecode · Mar 25, 2024 · d067806 · d067806
2 parents 424dd4e + c24e4d8
commit d067806
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/.changeset/late-pants-drum.md b/.changeset/late-pants-drum.md
@@ -0,0 +1,5 @@
+---
+"@udecode/plate-serializer-html": patch
+---
+
+Fixes "The `useSlateStatic` hook must be used inside the <Slate> 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
@@ -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
@@ -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) {