The initialization value does not work

[kjhuanhao]

Question

I am rendering a batch editor and they have a different initial value, which is changed to the type supported by the plate editor through a serialization function that I customized, but something unexpected happens and the initialization value is not displayed

Code

import { createPlateEditor, deserializeHtml, Plate } from '@udecode/plate-common'
import { Editor } from '@/components/ui/editor'
import { plugins } from './plugins'
import { TooltipProvider } from '@/components/ui/tooltip'
import { SelectedTagsProvider } from '@/context/SelectedTagsContext'
import { ImageProvider } from '@/context/ImageContext'
import { useEffect, useMemo, useState } from 'react'
import { deserialize } from '@/utils'

interface EditorProps {
  html?: string
}

const PlateEditor: React.FC<EditorProps> = ({ html }) => {
  const [initialValue, setInitialValue] = useState<any[]>([])
  
  useEffect(() => {
    if (html) {
      const value = deserialize(html)
      setInitialValue(value)
      console.log(value, 'edit')
    }
  }, [html])
  return (
    <div className='p-1'>
      {/* <MemoProvider> */}
      <SelectedTagsProvider>
        <ImageProvider>
          <div className='relative top-0'>
            <TooltipProvider>
              {initialValue.length > 0 ? (
                <Plate plugins={plugins} initialValue={initialValue}>
                  <Editor placeholder='Typing something here...' />
                </Plate>
              ) : (
                <Plate plugins={plugins}>
                  <Editor placeholder='Typing something here...' />
                </Plate>
              )}
            </TooltipProvider>
          </div>
        </ImageProvider>
      </SelectedTagsProvider>
      {/* </MemoProvider> */}
    </div>
  )
}
export default PlateEditor

Test case

The value from the code useEffect print.

[
    {
        "type": "p",
        "children": [
            {
                "text": "nihao212222222212"
            }
        ]
    },
    {
        "type": "p",
        "children": [
            {
                "text": "1212122222222222222212"
            }
        ]
    },
    {
        "type": "p",
        "children": [
            {
                "text": "21"
            }
        ]
    },
    {
        "type": "p",
        "children": [
            {
                "text": "2"
            }
        ]
    },
    {
        "type": "p",
        "children": [
            {
                "text": "12"
            }
        ]
    }
]

[12joan]

You cannot change initialValue after the first time Plate is rendered, hence the name. Restructure your code to avoid rendering Plate until the value is available.

[em2724]

Should work

const PlateEditor: React.FC<EditorProps> = ({ html }) => {  
  const initialValue = deserialize(html)
  
  return (
    <div className='p-1'>
      {/* <MemoProvider> */}
      <SelectedTagsProvider>
        <ImageProvider>
          <div className='relative top-0'>
            <TooltipProvider>
              {initialValue.length > 0 ? (
                <Plate plugins={plugins} initialValue={initialValue}>
                  <Editor placeholder='Typing something here...' />
                </Plate>
              ) : (
                <Plate plugins={plugins}>
                  <Editor placeholder='Typing something here...' />
                </Plate>
              )}
            </TooltipProvider>
          </div>
        </ImageProvider>
      </SelectedTagsProvider>
      {/* </MemoProvider> */}
    </div>
  )
}

[zbeyens]

From v37, you can pass a string value to createPlateEditor https://platejs.org/docs/html#html---slate