Merge pull request #4002 from udecode/fix/parsers

Fix/parsers

.changeset/fresh-coins-shake.md

@@ -0,0 +1,12 @@
+---
+'@udecode/plate-code-block': patch
+'@udecode/plate-heading': patch
+'@udecode/plate-media': patch
+'@udecode/plate-table': patch
+'@udecode/plate-docx': patch
+'@udecode/plate-font': patch
+'@udecode/plate-link': patch
+'@udecode/plate-list': patch
+---
+
+Fix parsers to use custom node type

.changeset/unlucky-months-yell.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-core': patch
+---
+
+Pass plugin context to `plugin.node.props`

packages/code-block/src/react/CodeBlockPlugin.tsx

@@ -17,13 +17,13 @@ export const CodeBlockPlugin = toPlatePlugin(BaseCodeBlockPlugin, {
   handlers: {
     onKeyDown: onKeyDownCodeBlock,
   },
-}).extend(({ editor, type }) => ({
+}).extend(({ editor, plugin }) => ({
   shortcuts: {
     toggleCodeBlock: {
       keys: [[Key.Mod, Key.Alt, '8']],
       preventDefault: true,
       handler: () => {
-        editor.tf.toggleBlock(type);
+        editor.tf.toggleBlock(editor.getType(plugin));
       },
     },
   },

packages/core/src/lib/static/utils/getRenderNodeStaticProps.ts

@@ -24,18 +24,20 @@ export const getRenderNodeStaticProps = ({
   node?: TElement | TText;
   plugin?: AnyEditorPlugin;
 }): SlateRenderNodeProps => {
-  props = getPluginNodeProps({
-    attributes,
-    node,
-    plugin,
-    props,
-  });
-
-  const { className } = props;
-
   let nodeProps = {
     ...props,
     ...(plugin ? (getEditorPlugin(editor, plugin) as any) : {}),
+  };
+
+  const { className } = props;
+
+  nodeProps = {
+    ...getPluginNodeProps({
+      attributes,
+      node,
+      plugin,
+      props: nodeProps,
+    }),
     className: clsx(getSlateClass(plugin?.node.type), className),
   };
 

packages/core/src/react/utils/getRenderNodeProps.ts

@@ -27,17 +27,19 @@ export const getRenderNodeProps = ({
   attributes?: AnyObject;
   plugin?: AnyEditorPlatePlugin;
 }): PlateRenderNodeProps => {
-  props = getPluginNodeProps({
-    attributes,
-    plugin: plugin as any,
-    props: props as any,
-  });
-
-  const { className } = props;
-
   let nodeProps = {
     ...props,
     ...(plugin ? (getEditorPlugin(editor, plugin) as any) : {}),
+  };
+
+  const { className } = props;
+
+  nodeProps = {
+    ...getPluginNodeProps({
+      attributes,
+      plugin: plugin as any,
+      props: nodeProps as any,
+    }),
     className: clsx(getSlateClass(plugin?.node.type), className),
   };
 

packages/docx/src/lib/DocxPlugin.ts

@@ -16,35 +16,33 @@ import { getTextListStyleType } from './docx-cleaner/utils/getTextListStyleType'
 import { isDocxContent } from './docx-cleaner/utils/isDocxContent';
 import { isDocxList } from './docx-cleaner/utils/isDocxList';
 
-const getParse =
-  (type: string): HtmlDeserializer['parse'] =>
-  ({ element }) => {
-    const node: any = { type };
+const parse: HtmlDeserializer['parse'] = ({ element, type }) => {
+  const node: any = { type };
 
-    if (isDocxList(element)) {
-      node.indent = getDocxListIndent(element);
+  if (isDocxList(element)) {
+    node.indent = getDocxListIndent(element);
 
-      const text = element.textContent ?? '';
+    const text = element.textContent ?? '';
 
-      node.listStyleType = getTextListStyleType(text) ?? 'disc';
+    node.listStyleType = getTextListStyleType(text) ?? 'disc';
 
-      element.innerHTML = getDocxListContentHtml(element);
-    } else {
-      const indent = getDocxIndent(element);
+    element.innerHTML = getDocxListContentHtml(element);
+  } else {
+    const indent = getDocxIndent(element);
 
-      if (indent) {
-        node.indent = indent;
-      }
+    if (indent) {
+      node.indent = indent;
+    }
 
-      const textIndent = getDocxTextIndent(element);
+    const textIndent = getDocxTextIndent(element);
 
-      if (textIndent) {
-        node.textIndent = textIndent;
-      }
+    if (textIndent) {
+      node.textIndent = textIndent;
     }
+  }
 
-    return node;
-  };
+  return node;
+};
 
 export const DocxPlugin = createSlatePlugin({
   key: 'docx',
@@ -61,38 +59,32 @@ export const DocxPlugin = createSlatePlugin({
       },
     },
   },
-}).extend(({ editor }) => {
-  return {
-    override: {
-      plugins: {
-        ...Object.fromEntries(
-          ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map((key) => [
-            key,
-            {
-              parsers: {
-                html: {
-                  deserializer: {
-                    parse: getParse(editor.getType({ key })),
-                  },
+  override: {
+    plugins: {
+      ...Object.fromEntries(
+        ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map((key) => [
+          key,
+          {
+            parsers: {
+              html: {
+                deserializer: {
+                  parse,
                 },
               },
-            } satisfies Partial<SlatePlugin>,
-          ])
-        ),
-        img: {
-          parser: {
-            query: ({ dataTransfer }) => {
-              const data = dataTransfer.getData('text/html');
-              const { body } = new DOMParser().parseFromString(
-                data,
-                'text/html'
-              );
-
-              return !isDocxContent(body);
             },
+          } satisfies Partial<SlatePlugin>,
+        ])
+      ),
+      img: {
+        parser: {
+          query: ({ dataTransfer }) => {
+            const data = dataTransfer.getData('text/html');
+            const { body } = new DOMParser().parseFromString(data, 'text/html');
+
+            return !isDocxContent(body);
           },
         },
       },
     },
-  };
+  },
 });

packages/font/src/lib/BaseFontBackgroundColorPlugin.ts

@@ -7,12 +7,13 @@ export const BaseFontBackgroundColorPlugin = createSlatePlugin({
       nodeKey: 'backgroundColor',
     },
   },
-}).extend(({ type }) => ({
   parsers: {
     html: {
       deserializer: {
         isLeaf: true,
-        parse: ({ element }) => ({ [type]: element.style.backgroundColor }),
+        parse: ({ element, type }) => ({
+          [type]: element.style.backgroundColor,
+        }),
         rules: [
           {
             validStyle: {
@@ -23,4 +24,4 @@ export const BaseFontBackgroundColorPlugin = createSlatePlugin({
       },
     },
   },
-}));
+});

packages/font/src/lib/BaseFontColorPlugin.ts

@@ -8,12 +8,11 @@ export const BaseFontColorPlugin = createSlatePlugin({
       nodeKey: 'color',
     },
   },
-}).extend(({ type }) => ({
   parsers: {
     html: {
       deserializer: {
         isLeaf: true,
-        parse({ element }) {
+        parse({ element, type }) {
           if (element.style.color) {
             return { [type]: element.style.color };
           }
@@ -28,4 +27,4 @@ export const BaseFontColorPlugin = createSlatePlugin({
       },
     },
   },
-}));
+});

packages/font/src/lib/BaseFontFamilyPlugin.ts

@@ -7,12 +7,11 @@ export const BaseFontFamilyPlugin = createSlatePlugin({
       nodeKey: 'fontFamily',
     },
   },
-}).extend(({ type }) => ({
   parsers: {
     html: {
       deserializer: {
         isLeaf: true,
-        parse: ({ element }) => ({ [type]: element.style.fontFamily }),
+        parse: ({ element, type }) => ({ [type]: element.style.fontFamily }),
         rules: [
           {
             validStyle: {
@@ -23,4 +22,4 @@ export const BaseFontFamilyPlugin = createSlatePlugin({
       },
     },
   },
-}));
+});

packages/font/src/lib/BaseFontSizePlugin.ts

@@ -23,24 +23,21 @@ export const BaseFontSizePlugin = createTSlatePlugin({
       nodeKey: 'fontSize',
     },
   },
-})
-  .extend(({ type }) => ({
-    parsers: {
-      html: {
-        deserializer: {
-          isLeaf: true,
-          parse: ({ element }) => ({ [type]: element.style.fontSize }),
-          rules: [
-            {
-              validStyle: {
-                fontSize: '*',
-              },
+  parsers: {
+    html: {
+      deserializer: {
+        isLeaf: true,
+        parse: ({ element, type }) => ({ [type]: element.style.fontSize }),
+        rules: [
+          {
+            validStyle: {
+              fontSize: '*',
             },
-          ],
-        },
+          },
+        ],
       },
     },
-  }))
-  .extendApi(({ editor }) => ({
-    setMark: bindFirst(setFontSize, editor),
-  }));
+  },
+}).extendApi(({ editor }) => ({
+  setMark: bindFirst(setFontSize, editor),
+}));

packages/font/src/lib/BaseFontWeightPlugin.ts

@@ -7,12 +7,11 @@ export const BaseFontWeightPlugin = createSlatePlugin({
       nodeKey: 'fontWeight',
     },
   },
-}).extend(({ type }) => ({
   parsers: {
     html: {
       deserializer: {
         isLeaf: true,
-        parse: ({ element }) => ({ [type]: element.style.fontWeight }),
+        parse: ({ element, type }) => ({ [type]: element.style.fontWeight }),
         rules: [
           {
             validStyle: {
@@ -23,4 +22,4 @@ export const BaseFontWeightPlugin = createSlatePlugin({
       },
     },
   },
-}));
+});

packages/heading/src/react/HeadingPlugin.tsx

@@ -4,7 +4,7 @@ import { BaseHeadingPlugin } from '../lib/BaseHeadingPlugin';
 
 export const HeadingPlugin = toPlatePlugin(BaseHeadingPlugin, ({ plugin }) => ({
   plugins: (plugin as unknown as PlatePlugin).plugins.map((p) =>
-    (p as PlatePlugin).extend(({ editor, type }) => {
+    (p as PlatePlugin).extend(({ plugin }) => {
       const level = p.key.at(-1);
 
       if (level > 3) return {};
@@ -17,8 +17,8 @@ export const HeadingPlugin = toPlatePlugin(BaseHeadingPlugin, ({ plugin }) => ({
               [Key.Mod, Key.Shift, level],
             ],
             preventDefault: true,
-            handler: () => {
-              editor.tf.toggleBlock(type);
+            handler: ({ editor }) => {
+              editor.tf.toggleBlock(editor.getType(plugin));
             },
           },
         },