Merge pull request #3974 from udecode/fix/html

.changeset/funny-mice-deliver.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-core': patch
+---
+
+fix import html

.changeset/strong-lemons-deliver.md

@@ -0,0 +1,13 @@
+---
+'@udecode/plate-indent-list': patch
+'@udecode/plate-line-height': patch
+'@udecode/plate-code-block': patch
+'@udecode/plate-comments': patch
+'@udecode/plate-layout': patch
+'@udecode/plate-media': patch
+'@udecode/plate-table': patch
+'@udecode/plate-core': patch
+'@udecode/plate-docx': patch
+---
+
+Remove useless html parser.

packages/code-block/src/lib/deserializer/htmlDeserializerCodeBlock.ts

@@ -4,16 +4,9 @@ import {
   BaseCodeBlockPlugin,
   BaseCodeLinePlugin,
 } from '../BaseCodeBlockPlugin';
-import { htmlDeserializerCodeBlockStatic } from './htmlDeserializerCodeBlockStatic';
 
 export const htmlDeserializerCodeBlock: HtmlDeserializer = {
   parse: ({ element }) => {
-    const staticCodeBlock = htmlDeserializerCodeBlockStatic(element);
-
-    if (staticCodeBlock) {
-      return staticCodeBlock;
-    }
-
     const languageSelectorText =
       [...element.childNodes].find(
         (node: ChildNode) => node.nodeName === 'SELECT'

packages/code-block/src/lib/deserializer/index.ts

@@ -3,4 +3,3 @@
  */
 
 export * from './htmlDeserializerCodeBlock';
-export * from './htmlDeserializerCodeBlockStatic';

packages/comments/src/lib/BaseCommentsPlugin.ts

@@ -76,7 +76,7 @@ export const BaseCommentsPlugin = createTSlatePlugin<BaseCommentsConfig>({
   parsers: {
     html: {
       deserializer: {
-        disabledDefaultNodeProps: true,
+        disableDefaultNodeProps: true,
         toNodeProps: ({ element }) => {
           const { slateComment } = element.dataset;
 

packages/core/src/lib/plugin/SlatePlugin.ts

@@ -465,7 +465,7 @@ export type HtmlDeserializer<C extends AnyPluginConfig = PluginConfig> =
      *
      * @default false
      */
-    disabledDefaultNodeProps?: boolean;
+    disableDefaultNodeProps?: boolean;
   };
 
 export type HtmlSerializer<C extends AnyPluginConfig = PluginConfig> =

packages/core/src/lib/plugins/html/utils/deserializeHtmlNode.ts

@@ -1,6 +1,7 @@
 import type { SlateEditor } from '../../../editor';
 import type { DeserializeHtmlNodeReturnType } from '../types';
 
+import { isSlateNode } from '../../../static';
 import { htmlBodyToFragment } from './htmlBodyToFragment';
 import { htmlBrToNewLine } from './htmlBrToNewLine';
 import { htmlElementToElement } from './htmlElementToElement';
@@ -28,7 +29,11 @@ export const deserializeHtmlNode =
     if (fragment) return fragment;
 
     // element
-    const element = htmlElementToElement(editor, node as HTMLElement);
+    const element = htmlElementToElement(
+      editor,
+      node as HTMLElement,
+      isSlateNode(node as HTMLElement)
+    );
 
     if (element) return element;
 

packages/core/src/lib/plugins/html/utils/deserializeHtmlNodeChildren.ts

@@ -1,12 +1,27 @@
 import type { SlateEditor } from '../../../editor';
 import type { DeserializeHtmlChildren } from '../types';
 
+import { isSlateNode } from '../../../static';
 import { deserializeHtmlNode } from './deserializeHtmlNode';
 
 export const deserializeHtmlNodeChildren = (
   editor: SlateEditor,
-  node: ChildNode | HTMLElement
-) =>
-  Array.from(node.childNodes).flatMap(
-    deserializeHtmlNode(editor)
-  ) as DeserializeHtmlChildren[];
+  node: ChildNode | HTMLElement,
+  isSlateParent = false
+): DeserializeHtmlChildren[] => {
+  return Array.from(node.childNodes).flatMap((child) => {
+    if (
+      child.nodeType === 1 &&
+      !isSlateNode(child as HTMLElement) &&
+      isSlateParent
+    ) {
+      return deserializeHtmlNodeChildren(
+        editor,
+        child as HTMLElement,
+        isSlateParent
+      );
+    }
+
+    return deserializeHtmlNode(editor)(child);
+  }) as DeserializeHtmlChildren[];
+};

packages/core/src/lib/plugins/html/utils/getDataNodeProps.ts

@@ -1,7 +1,7 @@
 import type { SlateEditor } from '../../../editor';
 
 import { type AnyEditorPlugin, getEditorPlugin } from '../../../plugin';
-import { isSlatePluginNode } from '../../../static';
+import { isSlateLeaf, isSlatePluginNode } from '../../../static';
 
 const getDefaultNodeProps = ({
   element,
@@ -10,7 +10,7 @@ const getDefaultNodeProps = ({
   element: HTMLElement;
   type: string;
 }) => {
-  if (!isSlatePluginNode(element, type)) return;
+  if (!isSlatePluginNode(element, type) && !isSlateLeaf(element)) return;
 
   const dataAttributes: Record<string, any> = {};
 
@@ -56,10 +56,10 @@ export const getDataNodeProps = ({
 }) => {
   const toNodeProps = plugin.parsers.html?.deserializer?.toNodeProps;
 
-  const disabledDefaultNodeProps =
-    plugin.parsers.html?.deserializer?.disabledDefaultNodeProps ?? false;
+  const disableDefaultNodeProps =
+    plugin.parsers.html?.deserializer?.disableDefaultNodeProps ?? false;
 
-  const defaultNodeProps = disabledDefaultNodeProps
+  const defaultNodeProps = disableDefaultNodeProps
     ? {}
     : getDefaultNodeProps({
         ...(getEditorPlugin(editor, plugin) as any),

packages/core/src/lib/plugins/html/utils/htmlElementToElement.ts

@@ -11,7 +11,8 @@ import { pipeDeserializeHtmlElement } from './pipeDeserializeHtmlElement';
 /** Deserialize HTML to Element. */
 export const htmlElementToElement = (
   editor: SlateEditor,
-  element: HTMLElement
+  element: HTMLElement,
+  isSlate = false
 ) => {
   const deserialized = pipeDeserializeHtmlElement(editor, element);
 
@@ -20,7 +21,7 @@ export const htmlElementToElement = (
 
     let descendants =
       node.children ??
-      (deserializeHtmlNodeChildren(editor, element) as Descendant[]);
+      (deserializeHtmlNodeChildren(editor, element, isSlate) as Descendant[]);
 
     if (descendants.length === 0 || withoutChildren || isSlateVoid(element)) {
       descendants = [{ text: '' }];

packages/core/src/lib/plugins/html/utils/pluginDeserializeHtml.ts

@@ -8,6 +8,7 @@ import type {
 } from '../../../plugin/SlatePlugin';
 
 import { getEditorPlugin } from '../../../plugin';
+import { isSlateNode } from '../../../static';
 import { getInjectedPlugins } from '../../../utils/getInjectedPlugins';
 import { getDataNodeProps } from './getDataNodeProps';
 
@@ -155,12 +156,19 @@ export const pluginDeserializeHtml = (
       return;
     }
 
-  const parsedNode =
-    parse({
-      ...(getEditorPlugin(editor, plugin) as any),
-      element: el,
-      node: {},
-    }) ?? {};
+  const parsedNode = (() => {
+    if (isSlateNode(el)) {
+      return {};
+    }
+
+    return (
+      parse({
+        ...(getEditorPlugin(editor, plugin) as any),
+        element: el,
+        node: {},
+      }) ?? {}
+    );
+  })();
 
   const dataNodeProps = getDataNodeProps({
     editor,
@@ -184,7 +192,7 @@ export const pluginDeserializeHtml = (
       node,
     });
 
-    if (res) {
+    if (res && !isSlateNode(el)) {
       node = {
         ...node,
         ...res,

packages/core/src/lib/static/__tests__/deserialize.spec.ts

@@ -3,6 +3,7 @@ import { basicElementsValue } from 'www/src/registry/default/example/values/basi
 import { basicMarksValue } from 'www/src/registry/default/example/values/basic-marks-value';
 import { commentsValue } from 'www/src/registry/default/example/values/comments-value';
 import { dateValue } from 'www/src/registry/default/example/values/date-value';
+import { fontValue } from 'www/src/registry/default/example/values/font-value';
 // import { equationValue } from 'www/src/registry/default/example/values/equation-value';
 import { highlightValue } from 'www/src/registry/default/example/values/highlight-value';
 import { horizontalRuleValue } from 'www/src/registry/default/example/values/horizontal-rule-value';
@@ -30,7 +31,7 @@ describe('deserializePlateStatic', () => {
       // ...columnValue,
       ...mentionValue,
       ...dateValue,
-      // ...fontValue,
+      ...fontValue,
       ...highlightValue,
       ...kbdValue,
       ...commentsValue,
@@ -61,7 +62,7 @@ describe('deserializePlateStatic', () => {
       // ...columnValue,
       ...mentionValue,
       ...dateValue,
-      // ...fontValue,
+      ...fontValue,
       ...highlightValue,
       ...kbdValue,
       ...commentsValue,

packages/core/src/lib/static/__tests__/with-attributes.spec.ts

@@ -17,7 +17,7 @@ describe('serializePlateStatic with attributes', () => {
     });
 
     expect(html).toEqual(
-      '<div data-slate-editor="true" data-slate-node="value"><div data-slate-node="element" data-slate-type="p" style="position:relative"><span data-slate-node="text"><span data-slate-leaf="true"><strong data-slate-leaf="true" data-slate-bold="true"><span data-slate-string="true">Right Aligned Heading</span></strong></span></span></div></div>'
+      '<div data-slate-editor="true" data-slate-node="value"><div data-slate-node="element" data-slate-type="p" style="position:relative"><span data-slate-node="text"><span data-slate-leaf="true" data-slate-bold="true"><strong data-slate-leaf="true" data-slate-bold="true"><span data-slate-string="true">Right Aligned Heading</span></strong></span></span></div></div>'
     );
   });
 });

packages/core/src/lib/static/deserialize/checkUtils.ts

@@ -6,10 +6,14 @@ export const isSlateElement = (element: HTMLElement) => {
   return element.dataset.slateNode === 'element';
 };
 
-export const isSlateString = (element: HTMLElement) => {
+export const isSlateText = (element: HTMLElement) => {
   return element.dataset.slateNode === 'text';
 };
 
+export const isSlateString = (element: HTMLElement) => {
+  return element.dataset.slateString === 'true';
+};
+
 export const isSlateLeaf = (element: HTMLElement) => {
   return element.dataset.slateLeaf === 'true';
 };
@@ -19,7 +23,8 @@ export const isSlateNode = (element: HTMLElement) => {
     isSlateLeaf(element) ||
     isSlateElement(element) ||
     isSlateVoid(element) ||
-    isSlateString(element)
+    isSlateString(element) ||
+    isSlateText(element)
   );
 };
 

packages/core/src/lib/static/pluginRenderElementStatic.tsx

@@ -5,7 +5,7 @@ import type { AnyEditorPlugin, NodeComponents } from '../plugin';
 import type { RenderElementProps } from '../types/RenderElementProps';
 
 import { SlateElement } from './components/SlateElement';
-import { getNodeDataAttributes } from './utils/getNodeDataAttributes';
+import { getPluginDataAttributes } from './utils';
 import { getRenderNodeStaticProps } from './utils/getRenderNodeStaticProps';
 
 export type SlateRenderElement = (
@@ -33,7 +33,7 @@ export const pluginRenderElementStatic = (
         (o) => o.render?.belowNodes ?? []
       );
 
-      const dataAttributes = getNodeDataAttributes(editor, plugin, element);
+      const dataAttributes = getPluginDataAttributes(editor, plugin, element);
 
       nodeProps = getRenderNodeStaticProps({
         attributes: {

packages/core/src/lib/static/pluginRenderLeafStatic.tsx

@@ -5,7 +5,10 @@ import type { NodeComponents, SlatePlugin } from '../plugin';
 import type { RenderLeafProps } from '../types/RenderLeafProps';
 
 import { SlateLeaf } from './components/SlateLeaf';
-import { getNodeDataAttributes } from './utils/getNodeDataAttributes';
+import {
+  getLeafDataAttributes,
+  getPluginDataAttributes,
+} from './utils/getNodeDataAttributes';
 import { getRenderNodeStaticProps } from './utils/getRenderNodeStaticProps';
 
 export type SlateRenderLeaf = (
@@ -23,7 +26,7 @@ export const pluginRenderLeafStatic = (
     if (leaf[plugin.node.type ?? plugin.key]) {
       const Leaf = components?.[plugin.key] ?? SlateLeaf;
 
-      const dataAttributes = getNodeDataAttributes(editor, plugin, leaf);
+      const dataAttributes = getPluginDataAttributes(editor, plugin, leaf);
 
       const ctxProps = getRenderNodeStaticProps({
         attributes: {
@@ -80,6 +83,10 @@ export const pipeRenderLeafStatic = (
       props: props as any,
     }) as any;
 
-    return <SlateLeaf {...ctxProps} />;
+    const leaf = ctxProps.leaf;
+
+    const dataAttributes = getLeafDataAttributes(leaf);
+
+    return <SlateLeaf {...ctxProps} {...dataAttributes} />;
   };
 };