Merge pull request #4001 from udecode/core/html-deserializer-default-…

…element Add option to change the default plugin to use when deserializing html
udecode · Jan 17, 2025 · 685d813 · 685d813
2 parents 83f58ec + 3256793
commit 685d813
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 3 deletions.
diff --git a/.changeset/cool-sloths-protect.md b/.changeset/cool-sloths-protect.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-core': patch
+---
+
+Add new param to HTML deserializer for changing the default element
diff --git a/packages/core/src/lib/plugins/html/utils/deserializeHtml.ts b/packages/core/src/lib/plugins/html/utils/deserializeHtml.ts
@@ -1,6 +1,7 @@
 import type { Descendant } from '@udecode/slate';
 
 import type { SlateEditor } from '../../../editor';
+import type { WithRequiredKey } from '../../../plugin';
 
 import { normalizeDescendantsToDocumentFragment } from '../../../utils/normalizeDescendantsToDocumentFragment';
 import { collapseWhiteSpace } from './collapse-white-space';
@@ -12,10 +13,12 @@ export const deserializeHtml = (
   editor: SlateEditor,
   {
     collapseWhiteSpace: shouldCollapseWhiteSpace = true,
+    defaultElementPlugin,
     element,
   }: {
     element: HTMLElement | string;
     collapseWhiteSpace?: boolean;
+    defaultElementPlugin?: WithRequiredKey;
   }
 ): Descendant[] => {
   // for serializer
@@ -29,6 +32,7 @@ export const deserializeHtml = (
   const fragment = deserializeHtmlElement(editor, element) as Descendant[];
 
   return normalizeDescendantsToDocumentFragment(editor, {
+    defaultElementPlugin,
     descendants: fragment,
   });
 };
diff --git a/packages/core/src/lib/utils/normalizeDescendantsToDocumentFragment.spec.tsx b/packages/core/src/lib/utils/normalizeDescendantsToDocumentFragment.spec.tsx
@@ -2,7 +2,7 @@
 import { LinkPlugin } from '@udecode/plate-link/react';
 import { jsxt } from '@udecode/plate-test-utils';
 
-import { createPlateEditor } from '../../react';
+import { createPlateEditor, createPlatePlugin } from '../../react';
 import { normalizeDescendantsToDocumentFragment } from './index';
 
 jsxt;
@@ -112,4 +112,84 @@ describe('normalizeDescendantsToDocumentFragment()', () => {
       expect(result).toEqual(output);
     }
   );
+
+  it.each([
+    {
+      input: [<htext>text node</htext>, <htext>another text node</htext>],
+      output: [<htext>text node</htext>, <htext>another text node</htext>],
+    },
+    {
+      input: [<ha>inline element</ha>, <htext>text node</htext>],
+      output: [<ha>inline element</ha>, <htext>text node</htext>],
+    },
+    {
+      input: [<hp>block</hp>, <hp>another block</hp>, <htext>text node</htext>],
+      output: [
+        <hp>block</hp>,
+        <hp>another block</hp>,
+        <hblockquote>text node</hblockquote>,
+      ],
+    },
+    {
+      input: [<ha>inline element</ha>, <hp>block</hp>],
+      output: [
+        <hblockquote>
+          <ha>inline element</ha>
+        </hblockquote>,
+        <hp>block</hp>,
+      ],
+    },
+    {
+      input: [
+        <htext>text 1</htext>,
+        <htext>text 2</htext>,
+        <hp>block</hp>,
+        <htext>text 3</htext>,
+        <htext>text 4</htext>,
+      ],
+      output: [
+        <hblockquote>
+          <htext>text 1</htext>
+          <htext>text 2</htext>
+        </hblockquote>,
+        <hp>block</hp>,
+        <hblockquote>
+          <htext>text 3</htext>
+          <htext>text 4</htext>
+        </hblockquote>,
+      ],
+    },
+    {
+      input: [
+        <hp>
+          <htext>text node</htext>
+          <hp>block</hp>
+        </hp>,
+      ],
+      output: [
+        <hp>
+          <hblockquote>text node</hblockquote>
+          <hp>block</hp>
+        </hp>,
+      ],
+    },
+  ])(
+    'should wrap inline blocks and text nodes in case they have a sibling block',
+    ({ input, output }: any) => {
+      const BaseBlockquotePlugin = createPlatePlugin({
+        key: 'blockquote',
+        node: { isElement: true },
+      });
+
+      const editor = createPlateEditor({
+        plugins: [LinkPlugin],
+      });
+
+      const result = normalizeDescendantsToDocumentFragment(editor, {
+        defaultElementPlugin: BaseBlockquotePlugin,
+        descendants: input,
+      });
+      expect(result).toEqual(output);
+    }
+  );
 });
diff --git a/packages/core/src/lib/utils/normalizeDescendantsToDocumentFragment.ts b/packages/core/src/lib/utils/normalizeDescendantsToDocumentFragment.ts
@@ -6,6 +6,7 @@ import {
 } from '@udecode/slate';
 
 import type { SlateEditor } from '../editor';
+import type { WithRequiredKey } from '../plugin';
 
 import { BaseParagraphPlugin } from '../plugins';
 
@@ -117,10 +118,13 @@ const normalize = (
 /** Normalize the descendants to a valid document fragment. */
 export const normalizeDescendantsToDocumentFragment = (
   editor: SlateEditor,
-  { descendants }: { descendants: Descendant[] }
+  {
+    defaultElementPlugin = BaseParagraphPlugin,
+    descendants,
+  }: { descendants: Descendant[]; defaultElementPlugin?: WithRequiredKey }
 ): Descendant[] => {
   const isInline = isInlineNode(editor);
-  const defaultType = editor.getType(BaseParagraphPlugin);
+  const defaultType = editor.getType(defaultElementPlugin);
   const makeDefaultBlock = makeBlockLazy(defaultType);
 
   return normalize(descendants, isInline, makeDefaultBlock as any);