Skip to content
Portable Text

defineLeaf

defineLeaf<TType>(config): Leaf

Defined in: packages/editor/src/renderers/renderer.types.ts:185

Define a leaf renderer for a span, inline object, or void block object.

Leaves can be nested inside a container’s of to override how that type renders inside the specific parent. defineLeaf({type: 'block'}) nested inside a container’s of is the spelling for a positional text block override; the engine routes through the block-leaf pipeline so marks and decorators still render correctly.

When type is 'span' the node argument of render narrows to a portable text span; when type is 'block' it narrows to a text block; otherwise it narrows to a portable text object.

Type Parameters

Section titled “Type Parameters”

TType

Section titled “TType”

TType extends string

Parameters

Section titled “Parameters”

config

Section titled “config”

render

Section titled “render”

(props) => ReactElement<unknown, string | JSXElementConstructor<any>> | null

type

Section titled “type”

TType extends "block" ? "Error: defineLeaf({type: 'block'}) is forbidden -- 'block' is always a container, use defineContainer" : TType

Returns

Section titled “Returns”

Leaf

Example

Section titled “Example”
defineLeaf({
  type: 'image',
  render: ({attributes, children, node}) => (
    <span {...attributes}>{children}<img src={node.src as string} /></span>
  ),
})