From ac88ec417f85dae9365d77d02efb9733a03c4a9a Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 13 Dec 2024 20:51:47 +0800
Subject: [PATCH] test

---
 apps/www/src/app/(app)/dev/page.tsx           |  1 +
 .../default/plate-static-ui/link-element.tsx  |  3 +-
 .../static/__tests__/node-to-props.spec.ts    | 99 +++++++++++++++++++
 .../components/DefaultStaticElement.tsx       | 26 ++++-
 .../core/src/lib/utils/getPluginNodeProps.ts  |  2 +
 5 files changed, 126 insertions(+), 5 deletions(-)
 create mode 100644 packages/core/src/lib/static/__tests__/node-to-props.spec.ts

diff --git a/apps/www/src/app/(app)/dev/page.tsx b/apps/www/src/app/(app)/dev/page.tsx
index 154f8102ef..7ae5e710fc 100644
--- a/apps/www/src/app/(app)/dev/page.tsx
+++ b/apps/www/src/app/(app)/dev/page.tsx
@@ -216,6 +216,7 @@ export default async function DevPage() {
   });
 
   const html = await serializePlateStatic(editorStatic, staticComponents);
+  console.log('🚀 ~ DevPage ~ html:', html);
 
   return (
     <div className="mx-auto w-1/2">
diff --git a/apps/www/src/registry/default/plate-static-ui/link-element.tsx b/apps/www/src/registry/default/plate-static-ui/link-element.tsx
index 7983aa5fc7..cefa916ddf 100644
--- a/apps/www/src/registry/default/plate-static-ui/link-element.tsx
+++ b/apps/www/src/registry/default/plate-static-ui/link-element.tsx
@@ -15,11 +15,10 @@ export const LinkStaticElement = ({
     <PlateStaticElement
       as="a"
       className={cn(
-        'font-medium text-primary underline decoration-primary underline-offset-4',
+        'text-primary decoration-primary font-medium underline underline-offset-4',
         className
       )}
       element={element}
-      // {...(linkProps as any)}
       {...props}
     >
       {children}
diff --git a/packages/core/src/lib/static/__tests__/node-to-props.spec.ts b/packages/core/src/lib/static/__tests__/node-to-props.spec.ts
new file mode 100644
index 0000000000..8e3fc98d7b
--- /dev/null
+++ b/packages/core/src/lib/static/__tests__/node-to-props.spec.ts
@@ -0,0 +1,99 @@
+it('TODO: serialize list to html', () => {
+  expect(1).toBe(1);
+});
+
+import { BaseLinkPlugin } from '@udecode/plate-link';
+import { BaseImagePlugin } from '@udecode/plate-media';
+
+import { createSlateEditor } from '../../editor';
+import { BaseParagraphPlugin } from '../../plugins';
+import { serializePlateStatic } from '../serializedHtml';
+import { staticComponents } from './create-static-editor';
+
+const plugins = [
+  BaseParagraphPlugin,
+  BaseLinkPlugin.extend(() => ({
+    node: {
+      dangerouslyAllowAttributes: ['target'],
+      props: ({ element }) =>
+        /^https?:\/\/slatejs.org\/?/.test((element as any).url)
+          ? {}
+          : { target: '_blank' },
+    },
+  })),
+  BaseImagePlugin.extend({
+    node: {
+      props: ({ element }) => ({
+        alt: (element as any).attributes?.alt,
+        width: (element as any).url.split('/').pop(),
+      }),
+    },
+  }),
+];
+
+it('serialize link to html with attributes', async () => {
+  const staticEditor = createSlateEditor({
+    plugins,
+    value: [
+      {
+        children: [
+          { text: 'An external ' },
+          {
+            children: [{ text: 'link' }],
+            type: 'a',
+            url: 'https://theuselessweb.com/',
+          },
+          { text: ' and an internal ' },
+          {
+            children: [{ text: 'link' }],
+            target: '_self',
+            type: 'a',
+            url: 'https://slatejs.org/',
+          },
+          { text: '.' },
+        ],
+        type: 'p',
+      },
+    ],
+  });
+
+  expect(
+    await serializePlateStatic(staticEditor, staticComponents, {
+      preserveClassNames: [],
+      stripClassNames: true,
+      stripDataAttributes: true,
+    })
+  ).toContain(`target="_blank"`);
+});
+
+it('serialize image with alt to html', async () => {
+  const staticEditor = createSlateEditor({
+    plugins,
+    value: [
+      {
+        children: [
+          {
+            attributes: { alt: 'Placeholder' },
+            children: [],
+            type: 'img',
+            url: 'https://via.placeholder.com/300',
+          },
+        ],
+        type: 'p',
+      },
+    ],
+  });
+
+  const htmlString = await serializePlateStatic(
+    staticEditor,
+    staticComponents,
+    {
+      preserveClassNames: [],
+      stripClassNames: true,
+      stripDataAttributes: true,
+    }
+  );
+
+  expect(htmlString).toContain(`alt="Placeholder"`);
+  expect(htmlString).toContain(`width="300"`);
+});
diff --git a/packages/core/src/lib/static/components/DefaultStaticElement.tsx b/packages/core/src/lib/static/components/DefaultStaticElement.tsx
index dc9544070c..ca87ef6462 100644
--- a/packages/core/src/lib/static/components/DefaultStaticElement.tsx
+++ b/packages/core/src/lib/static/components/DefaultStaticElement.tsx
@@ -4,13 +4,33 @@ import type { StaticElementProps } from '../type';
 
 export const PlateStaticElement = (props: StaticElementProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { as, attributes, children, className, nodeProps, style, ...rest } =
-    props;
+  const {
+    as,
+    attributes,
+    children,
+    className,
+    element,
+    nodeProps,
+    style,
+    ...rest
+  } = props;
+
+  // Remove after fixing the type
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  // eslint-disable-next-line prettier/prettier
+  const { api, editor, getOption, getOptions, plugin, setOption, setOptions,tf,type, ...restProps } = rest;
 
   const Element = (as ?? 'div') as any;
 
   return (
-    <Element {...attributes} {...nodeProps} className={className} style={style}>
+    <Element
+      {...attributes}
+      {...nodeProps}
+      {...restProps}
+      className={className}
+      style={style}
+    >
       {children}
     </Element>
   );
diff --git a/packages/core/src/lib/utils/getPluginNodeProps.ts b/packages/core/src/lib/utils/getPluginNodeProps.ts
index df6a8e6058..fa7f3865c6 100644
--- a/packages/core/src/lib/utils/getPluginNodeProps.ts
+++ b/packages/core/src/lib/utils/getPluginNodeProps.ts
@@ -15,6 +15,8 @@ export const getPluginNodeProps = (
       (typeof plugin.node.props === 'function'
         ? plugin.node.props(props as any)
         : plugin.node.props) ?? {};
+
+    // console.log(newProps, 'fj');
   }
   if (!newProps.nodeProps && attributes && plugin) {
     /**