Function Element

packages/editor/src/components/element.tsx:24–125

(props: {
  element: SlateElement
  selection: Range | null
  renderPlaceholder?: PlaceholderRender
})

 * Element.
 */
const Element = (props: {
  element: SlateElement
  selection: Range | null
  renderPlaceholder?: PlaceholderRender
}) => {
  const { element, selection, renderPlaceholder } = props
  const ref = React.useRef<HTMLElement>(null)
  const editor = useEditableStatic()
  const isInline = editor.isInline(element)
  const key = Editable.findKey(editor, element)

  const currentRenderPlaceholder = usePlaceholder(element)
  let children: React.ReactNode = useChildren({
    node: element,
    selection,
    renderPlaceholder: Editor.isEmpty(editor, element)
      ? currentRenderPlaceholder ?? renderPlaceholder
      : undefined,
  })

  // Attributes that the developer must mix into the element in their
  // custom node renderer component.
  const attributes: ElementAttributes = {
    [DATA_EDITABLE_NODE]: 'element',
    ref,
  }

  if (isInline) {
    attributes[DATA_EDITABLE_INLINE] = true
  }

  // If it's a block node with inline children, add the proper `dir` attribute
  // for text direction.
  if (!isInline && Editor.hasInlines(editor, element)) {
    const text = Node.string(element)
    const dir = getDirection(text)

    if (dir === 'rtl') {
      attributes.dir = dir
    }
  }

  // If it's a void node, wrap the children in extra void-specific elements.
  if (Editor.isVoid(editor, element)) {
    attributes[DATA_EDITABLE_VOID] = true

    const Tag = isInline ? 'span' : 'div'
    const [[text]] = Node.texts(element)

    children = (
      <Tag
        style={{
          height: '0',
          color: 'transparent',
          outline: 'none',
        }}
      >
        <Text