Plugins

Plugins are React components placed inside the EditorProvider, and are primarily used to register Behaviors ad-hoc in the Editor using the editor.registerBehavior(...) API:

function LogTextPlugin() {
  const editor = useEditor()

  useEffect(() => {
    const unregisterBehavior = editor.registerBehavior({
      behavior: defineBehavior({
        on: 'insert.text',
        actions: [
          ({event}) => [
            {
              type: 'effect',
              effect: () => {
                console.log(event)
              },
            },
            {
              type: 'forward',
              event,
            },
          ],
        ],
      }),
    })

    return () => {
      unregisterBehavior()
    }
  }, [editor])

  return null
}

Plugins that render document nodes register through editor.registerNode(...) instead, passing the result of a defineX factory (defineContainer, defineTextBlock, defineSpan, defineBlockObject, defineInlineObject). Like registerBehavior, registerNode returns an unregister function:

function LogImagesPlugin() {
  const editor = useEditor()

  useEffect(() => {
    const unregisterNode = editor.registerNode({
      node: defineBlockObject({
        type: 'image',
        render: (props) => {
          console.log(props.node)
          return props.renderDefault(props)
        },
      }),
    })

    return () => {
      unregisterNode()
    }
  }, [editor])

  return null
}

NodePlugin is a thin wrapper around registerNode for the common case of registering a stable list of nodes; reach for registerNode directly when a plugin needs to register a node conditionally or alongside other setup.

Available plugins

@portabletext/plugin-character-pair-decoratorAutomatically match a pair of characters and decorate the text in between.

@portabletext/plugin-dndTrack the drop position during drag and drop for custom drop indicators.

@portabletext/plugin-emoji-pickerEasily configure an Emoji Picker for the Portable Text Editor.

@portabletext/plugin-input-ruleEasily configure Input Rules in the Portable Text Editor.

@portabletext/plugin-list-indexCompute the list index of each list item for custom list rendering.

@portabletext/plugin-markdown-shortcutsAdd helpful Markdown shortcuts to the editor.

@portabletext/plugin-one-lineRestrict the Portable Text Editor to a single line.

@portabletext/plugin-paste-linkAllow pasting links in the Portable Text Editor.

@portabletext/plugin-sdk-valueConnect a Portable Text Editor with a Sanity document using the SDK.

@portabletext/plugin-tableTables as real Portable Text, edited with spreadsheet-grade selection.

@portabletext/plugin-typeahead-pickerBuild typeahead pickers (emoji, mentions, slash commands) for the Portable Text Editor.

@portabletext/plugin-typographyAutomatically transform text to typographic variants.