Server Endpoint for Converting HTML to Plate format

[zbeyens]

Discussed in #3005

^{Originally posted by mstelz February 29, 2024}
Using NextJS I have an app/api/route.ts with the following:

export async function POST(request: Request) {
    const editor = createPlateEditor({ plugins });
    const json = deserializeHtml(editor, {element: request.body}
    
    return Response.json(json)
}

but when I try to run it I receive the error

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

What am I missing? I thought this was possible but correct me if I am wrong.

Thanks in advance!

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[zbeyens]

This PR made progress on this issue: #3125. We now have a @udecode/plate-common/server entrypoint for createPlateEditor. In Plate 33, all serializers work server-side except the html one.

TODOs:

• server bundle for each node plugin to be used with deserializeHtml
• serializeHtml currently depends on React so this one will need a rework using the same pattern than deserializeHtml

[rbutera]

so this is why deserializeHtml isn't working for me!

[linhtrinh18]

@zbeyens I'm encountering the same issue with server-side HTML to Plate conversion in Next.js. Additionally, I'm unable to use serializeHtml even on the client-size
Has anyone found a workaround or alternative approach for HTML to Plate conversion, either server-side or client-side in Next.js? Any insights or suggestions would be greatly appreciated.

[zbeyens]

We are deprecating @udecode/plate-html. The serializeHtml function has been migrated to @udecode/plate-core and @udecode/plate-common. The migration process for this stable fix requires creating a static version of all your components, that will make it work SSR.

You can find a detailed guide here. And the complete example including export to HTML, Tailwind CSS, and Prism.