diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx index e84f2377bf..34e7d6658b 100644 --- a/apps/www/content/docs/components/changelog.mdx +++ b/apps/www/content/docs/components/changelog.mdx @@ -11,6 +11,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver ## December 2024 #17 +### December 18 #17.2 + +New RSC components for element and leaf components, filename ending with `-static.tsx`. Those are now installed along with the default client components. + ### December 16 #17.1 - `column-element`: diff --git a/apps/www/content/docs/examples/iframe.mdx b/apps/www/content/docs/examples/iframe.mdx deleted file mode 100644 index 762614c993..0000000000 --- a/apps/www/content/docs/examples/iframe.mdx +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: IFrame ---- - - diff --git a/apps/www/content/docs/html.mdx b/apps/www/content/docs/html.mdx index b2b1949642..88693009e6 100644 --- a/apps/www/content/docs/html.mdx +++ b/apps/www/content/docs/html.mdx @@ -4,11 +4,190 @@ title: Serializing HTML - + + **Note**: Round-tripping is not yet supported: the HTML serializer will not + preserve all information from the Slate value when converting to HTML and + back. + + +## Slate -> HTML + +[Server-side example](/docs/examples/slate-to-html) + +### Usage + +```tsx +// ... +import { createSlateEditor, serializeHtml } from '@udecode/plate-common'; +import { EditorStatic } from '@/components/plate-ui/editor-static'; + +// Create an editor and configure all the plugins you need +const editor = createSlateEditor({ + // ... your plugins ... +}); + +// Provide the components that map Slate nodes to HTML elements +const components = { + // [ParagraphPlugin.key]: ParagraphElementStatic, + // [HeadingPlugin.key]: HeadingElementStatic, + // ... +}; + +// You can also pass a custom editor component and props +// For example, EditorStatic is a styled version of PlateStatic. +const html = await serializeHtml(editor, { + components, + editorComponent: EditorStatic, // defaults to PlateStatic if not provided + props: { variant: 'none', className: 'p-2' }, +}); +``` + +If you use a custom component, like [EditorStatic](/docs/components/editor), you must also ensure that all required styles and classes are included in your final HTML file. Since serialize only returns the inner editor HTML, you may need to wrap it in a full HTML document with any external CSS, scripts, or `