udecode / plate-playground-template

A Next.js 15 template with Plate Playground. AI, Plugins, Components.
https://playground.platejs.org
MIT License
56 stars 21 forks source link

serializeHtml throws Invalid hook call error #13

Open VanThuan76 opened 2 hours ago

VanThuan76 commented 2 hours ago

Issue: serializeHtml from "@udecode/plate-html/react" not Including Styles

Description

I’m facing an issue with serializeHtml from @udecode/plate-html/react. The code I've used to approach this is as follows:

const plugins = [ ... ] //Same template
const excludedSelectionPlugin = plugins?.filter(plugin => plugin?.key !== 'toggle' && plugin?.key !== 'blockSelection' && plugin?.key === "ai" ); //Ignore invalid hook call
const html = serializeHtml(createPlateEditor({ plugins: excludedSelectionPlugin }), { nodes: editor?.children, data, dndWrapper: props => <DndProvider backend={HTML5Backend} {...props} />, })
console.log(html)

When I log the html value to the console, it returns the following without the expected @udecode/plate styles: <div>Playground</div><div style="position: relative;">A rich-text editor with AI capabilities. Try the AI commands or use Cmd+J to open the AI menu.</div>

Expected Behavior

I expected serializeHtml to include the @udecode/plate styles in the generated HTML so that it could be used either directly on the client side or saved to a database with formatting intact.

Environment

Library

Steps to Reproduce

Set up the plugins array as per the template and filter out unnecessary plugins. Use serializeHtml to serialize the editor content. Check the console log to see the HTML output.

Actual Behavior

The output HTML lacks the expected styles from @udecode/plate, resulting in plain HTML without the styling or formatting applied in the editor.

Additional Context

Assistance on how to ensure serializeHtml includes the necessary styles for client use or storage in a database would be greatly appreciated!

Thanks, @zbeyens 's template is extremely interesting!

VanThuan76 commented 2 hours ago

In addition, I have reached this https://github.com/udecode/plate/issues/2804 issue but I cannt figure out