Custom elements for Plate

[ggukggukee]

Is there any guide for creating custom elements for Plate?
Because in the docs there is no such thing as custom element or leaf.

[midsplit]

I haven't found a proper guide but did manage to create multiple elements in Plate by creating simple plugins.

I've made an "Alert" component in Typescript for you below, which you would register in your Plate instance's (or Plate Provider's) plugins array.

You can create virtually anything as Plate is very flexible! (Which is why I love it!)

import { Alert } from '@mui/material'
import type { PlateRenderElementProps, TElement } from '@udecode/plate'
import { createPluginFactory } from '@udecode/plate'

// You can ignore this if you don't strictly type your app
import type { MyValue } from 'src/components/pages/Notes/Modern/typescript/plateTypes'

// Element key
export const ELEMENT_ALERT_ERROR = 'alert'

// Element component
export const ErrorElement = (props: PlateRenderElementProps<MyValue, TElement>) =>
  <Alert
    {...props.attributes}
    {...props.nodeProps}
    className={props.className}
    severity='error'
    sx={{
      marginY: 1,
    }}
  >
    {props.children}
  </Alert>

// Element plugin, call this function from your plugin generation array to register your plugin
export const createErrorPlugin = createPluginFactory({
  key: ELEMENT_ALERT_ERROR,
  isElement: true,
  component: ErrorElement,
})

[zbeyens]

The new docs covers that: https://platejs.org/docs/plugin