test

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">

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}

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"`);
+});

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>
   );

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) {
     /**