Trying to render Plate to HTML to display the blog post

[pirmax]

Description

Hello,

Command to install the AI editor : npx shadcx@latest add plate/editor-ai

Code to try the HTML render :

'use client'

import { Plate } from '@udecode/plate-common/react'
import { serializeHtml } from '@udecode/plate-html/react'
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
import { useCreateEditor } from '@/components/editor/use-create-editor'

// "value" variable contain the JSON export from Plate Editor
export function RenderEditor({ value }: { value: any }) {
  const editor = useCreateEditor(value)

  const html = serializeHtml(editor, {
    nodes: editor.children,
    dndWrapper: (props) => <DndProvider backend={HTML5Backend} {...props} />,
  })

  return (
    <Plate editor={editor}>
      <div
        dangerouslySetInnerHTML={{
          __html: html,
        }}
      />
    </Plate>
  )
}

The error on NextJS 14: useEditorRef must be used inside a Plate or PlateController

Thanks.

Reproduction URL

No response

Reproduction steps

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Plate version

39.2.21

Slate React version

0.110.2

Screenshots

<img width="1016" alt="Safari 2024-11-12 12 43 37" src="https://github.com/user-attachments/assets/10d95dee-95d7-4baa-9b31-5e9892074959">

Logs

No response

Browsers

Chrome, Safari

[zbeyens]

See #2804

[pirmax]

Hello @zbeyens,

You didn't take the time to look at my problem exactly and closed it in a few seconds.

The proposed solution By creating a temporary editor and replacing serializeHtml with htmlReact, this solution worked for me is not a clean solution in my opinion.

Could you leave it open and propose a more adequate solution?

Thank you.

[zbeyens]

Hi @pirmax, I've marked this issue as duplicate of #2804. That issue is still open for the reason you've mentioned.