Skip to main content

@lexical/react/LexicalContentEditable

Type Aliases​

ContentEditableElementProps​

ContentEditableElementProps = object & Omit<React.AllHTMLAttributes<HTMLDivElement>, "placeholder">

Defined in: packages/lexical-react/src/shared/LexicalContentEditableElement.tsx:26

Props for the ContentEditableElement component. In addition to an editor, it accepts the standard <div> HTML attributes (except placeholder), including the hyphenated aria-* attributes, which are the preferred way to set ARIA properties. The camelCase aria* props (such as ariaLabel) are also accepted but are retained only for backwards compatibility.

Type Declaration​

ariaActiveDescendant?​

optional ariaActiveDescendant?: React.AriaAttributes["aria-activedescendant"]

ariaAutoComplete?​

optional ariaAutoComplete?: React.AriaAttributes["aria-autocomplete"]

ariaControls?​

optional ariaControls?: React.AriaAttributes["aria-controls"]

ariaDescribedBy?​

optional ariaDescribedBy?: React.AriaAttributes["aria-describedby"]

ariaErrorMessage?​

optional ariaErrorMessage?: React.AriaAttributes["aria-errormessage"]

ariaExpanded?​

optional ariaExpanded?: React.AriaAttributes["aria-expanded"]

ariaInvalid?​

optional ariaInvalid?: React.AriaAttributes["aria-invalid"]

ariaLabel?​

optional ariaLabel?: React.AriaAttributes["aria-label"]

ariaLabelledBy?​

optional ariaLabelledBy?: React.AriaAttributes["aria-labelledby"]

ariaMultiline?​

optional ariaMultiline?: React.AriaAttributes["aria-multiline"]

ariaOwns?​

optional ariaOwns?: React.AriaAttributes["aria-owns"]

ariaRequired?​

optional ariaRequired?: React.AriaAttributes["aria-required"]

autoCapitalize?​

optional autoCapitalize?: HTMLDivElement["autocapitalize"]

data-testid?​

optional data-testid?: string | null

editor​

editor: LexicalEditor

ContentEditableProps​

ContentEditableProps = Omit<ContentEditableElementProps, "editor"> & { aria-placeholder?: void; placeholder?: null; } | { aria-placeholder: string; placeholder: ((isEditable) => null | JSX.Element) | JSX.Element; }

Defined in: packages/lexical-react/src/LexicalContentEditable.tsx:29

Props for the ContentEditable component. These are the ContentEditableElementProps (minus editor, which is read from context) plus an optional placeholder; when a placeholder is provided an aria-placeholder string is also required for accessibility.

Variables​

ContentEditable​

const ContentEditable: ForwardRefExoticComponent<ContentEditableProps & RefAttributes<HTMLDivElement>>

Defined in: packages/lexical-react/src/LexicalContentEditable.tsx:50

The editable surface of a Lexical editor: the contentEditable element that users type into. Render it inside a LexicalComposer (it reads the editor from context) and pass it to RichTextPlugin or PlainTextPlugin. An optional placeholder is shown while the editor is empty. The ref is forwarded to the underlying <div>.

ContentEditableElement​

const ContentEditableElement: ForwardRefExoticComponent<object & Omit<AllHTMLAttributes<HTMLDivElement>, "placeholder"> & RefAttributes<HTMLDivElement>>

Defined in: packages/lexical-react/src/shared/LexicalContentEditableElement.tsx:142

A lower-level building block for the editor's editable <div>. It binds the given editor to the rendered element via LexicalEditor.setRootElement, reflects the editor's editable state on the contentEditable attribute, and applies the provided ARIA and HTML attributes. Prefer ContentEditable, which reads the editor from context and adds placeholder support, unless you need this extra control.