<InlineTextField>

Render inline-editable text from a field transform.

This is the same component that powers the contentEditable option internally. Use it to create new inline-editable fields.

import { InlineTextField, Puck } from "@puckeditor/core";
 
const fieldTransforms = {
  heading: ({ value, componentId, propPath, isReadOnly }) => (
    <InlineTextField
      value={value}
      componentId={componentId}
      propPath={propPath}
      isReadOnly={isReadOnly}
    />
  ),
};

All required props below are available in field transforms.

Props

Required props

componentId

The id of the component containing the prop being edited.

propPath

The path of the prop to write changes to, within the component’s props object.

Append keys to the transform’s propPath to target a nested property within the field value (for example ${propPath}.text).

value

The current field value.

isReadOnly

Whether the field is currently read-only. When true, edits are prevented.

Optional props

opts

Additional options for the field.

opts.disableLineBreaks

Prevent the user from adding line breaks when pressing Enter. Defaults to false.

<InlineTextField
  value={value}
  componentId={componentId}
  propPath={propPath}
  isReadOnly={isReadOnly}
  opts={{ disableLineBreaks: true }}
/>

Further reading

• Field Transforms API reference
• Field Transforms guide