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 (
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 = ({
{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 (
-
+
{children}
);
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) {
/**