Editor
The Editor component is a powerful and flexible text editor that allows you to create and edit rich text content.
Installation
npx kibo-ui@latest add editor
Features
- Rich text editing with TipTap
- Slash commands for quick formatting
- Floating menu for common actions
- Bubble menu for text selection
- Text formatting (bold, italic, underline, strikethrough, code, superscript, subscript)
- Text and background colors
- Links
- Clear formatting
- Tables with column/row management
- Merge and split table cells
- Character and word count
- Code blocks with syntax highlighting
- Headings (H1, H2, H3)
- Lists (bullet, ordered, task)
- Blockquotes
- Horizontal rules
- Placeholder text
- Character limit support
Props
The editor component is made up of the following subcomponents:
EditorProvider
Prop | Type | Default |
---|---|---|
children? | ReactNode | - |
slotBefore? | ReactNode | - |
slotAfter? | ReactNode | - |
editorContainerProps? | HTMLAttributes<HTMLDivElement> | - |
element? | Element | - |
content? | string | JSONContent | JSONContent[] | - |
extensions? | Extensions | - |
injectCSS? | boolean | - |
injectNonce? | string | - |
autofocus? | number | boolean | "start" | "end" | "all" | - |
editable? | boolean | - |
editorProps? | EditorProps<any> | - |
parseOptions? | ParseOptions | - |
coreExtensionOptions? | { clipboardTextSerializer?: { blockSeparator?: string | undefined; } | undefined; } | - |
enableInputRules? | EnableRules | - |
enablePasteRules? | EnableRules | - |
enableCoreExtensions? | boolean | Partial<Record<"editable" | "clipboardTextSerializer" | "commands" | "focusEvents" | "keymap" | "tabindex" | "drop" | "paste", false>> | true |
enableContentCheck? | boolean | false |
onBeforeCreate? | (props: { editor: Editor; }) => void | - |
onCreate? | (props: { editor: Editor; }) => void | - |
onContentError? | (props: { editor: Editor; error: Error; disableCollaboration: () => void; }) => void | - |
onUpdate? | (props: { editor: Editor; transaction: Transaction; }) => void | - |
onSelectionUpdate? | (props: { editor: Editor; transaction: Transaction; }) => void | - |
onTransaction? | (props: { editor: Editor; transaction: Transaction; }) => void | - |
onFocus? | (props: { editor: Editor; event: FocusEvent; transaction: Transaction; }) => void | - |
onBlur? | (props: { editor: Editor; event: FocusEvent; transaction: Transaction; }) => void | - |
onDestroy? | (props: void) => void | - |
onPaste? | (e: ClipboardEvent, slice: Slice) => void | - |
onDrop? | (e: DragEvent, slice: Slice, moved: boolean) => void | - |
immediatelyRender? | boolean | true |
shouldRerenderOnTransaction? | boolean | true |
className? | string | - |
limit? | number | - |
placeholder? | string | - |
EditorFloatingMenu
Prop | Type | Default |
---|---|---|
pluginKey? | string | PluginKey<any> | 'floatingMenu' |
tippyOptions? | Partial<Props> | {} |
shouldShow? | (props: { editor: Editor; view: EditorView; state: EditorState; oldState?: EditorState | undefined; }) => boolean | null |
className? | string | - |
children | ReactNode | - |
EditorBubbleMenu
Prop | Type | Default |
---|---|---|
pluginKey? | string | PluginKey<any> | 'bubbleMenu' |
tippyOptions? | Partial<Props> | - |
updateDelay? | number | 250 |
shouldShow? | (props: { editor: Editor; element: HTMLElement; view: EditorView; state: EditorState; oldState?: EditorState | undefined; from: number; to: number; }) => boolean | - |
className? | string | - |
children | ReactNode | - |
EditorSelector
Prop | Type | Default |
---|---|---|
defaultChecked? | boolean | - |
defaultValue? | string | number | readonly string[] | - |
suppressContentEditableWarning? | boolean | - |
suppressHydrationWarning? | boolean | - |
accessKey? | string | - |
autoCapitalize? | "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | - |
autoFocus? | boolean | - |
className? | string | - |
contentEditable? | Booleanish | "inherit" | "plaintext-only" | - |
contextMenu? | string | - |
dir? | string | - |
draggable? | Booleanish | - |
enterKeyHint? | "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | - |
hidden? | boolean | - |
id? | string | - |
lang? | string | - |
nonce? | string | - |
slot? | string | - |
spellCheck? | Booleanish | - |
style? | CSSProperties | - |
tabIndex? | number | - |
title | string | - |
translate? | "yes" | "no" | - |
radioGroup? | string | - |
role? | AriaRole | - |
about? | string | - |
content? | string | - |
datatype? | string | - |
inlist? | any | - |
prefix? | string | - |
property? | string | - |
rel? | string | - |
resource? | string | - |
rev? | string | - |
typeof? | string | - |
vocab? | string | - |
autoCorrect? | string | - |
autoSave? | string | - |
color? | string | - |
itemProp? | string | - |
itemScope? | boolean | - |
itemType? | string | - |
itemID? | string | - |
itemRef? | string | - |
results? | number | - |
security? | string | - |
unselectable? | "off" | "on" | - |
popover? | "" | "auto" | "manual" | - |
popoverTargetAction? | "toggle" | "show" | "hide" | - |
popoverTarget? | string | - |
inert? | boolean | - |
inputMode? | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | - |
is? | string | - |
aria-activedescendant? | string | - |
aria-atomic? | Booleanish | - |
aria-autocomplete? | "none" | "list" | "inline" | "both" | - |
aria-braillelabel? | string | - |
aria-brailleroledescription? | string | - |
aria-busy? | Booleanish | - |
aria-checked? | boolean | "true" | "false" | "mixed" | - |
aria-colcount? | number | - |
aria-colindex? | number | - |
aria-colindextext? | string | - |
aria-colspan? | number | - |
aria-controls? | string | - |
aria-current? | boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | - |
aria-describedby? | string | - |
aria-description? | string | - |
aria-details? | string | - |
aria-disabled? | Booleanish | - |
aria-dropeffect? | "none" | "link" | "copy" | "execute" | "move" | "popup" | - |
aria-errormessage? | string | - |
aria-expanded? | Booleanish | - |
aria-flowto? | string | - |
aria-grabbed? | Booleanish | - |
aria-haspopup? | boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | - |
aria-hidden? | Booleanish | - |
aria-invalid? | boolean | "true" | "false" | "grammar" | "spelling" | - |
aria-keyshortcuts? | string | - |
aria-label? | string | - |
aria-labelledby? | string | - |
aria-level? | number | - |
aria-live? | "off" | "assertive" | "polite" | - |
aria-modal? | Booleanish | - |
aria-multiline? | Booleanish | - |
aria-multiselectable? | Booleanish | - |
aria-orientation? | "horizontal" | "vertical" | - |
aria-owns? | string | - |
aria-placeholder? | string | - |
aria-posinset? | number | - |
aria-pressed? | boolean | "true" | "false" | "mixed" | - |
aria-readonly? | Booleanish | - |
aria-relevant? | "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | - |
aria-required? | Booleanish | - |
aria-roledescription? | string | - |
aria-rowcount? | number | - |
aria-rowindex? | number | - |
aria-rowindextext? | string | - |
aria-rowspan? | number | - |
aria-selected? | Booleanish | - |
aria-setsize? | number | - |
aria-sort? | "none" | "ascending" | "descending" | "other" | - |
aria-valuemax? | number | - |
aria-valuemin? | number | - |
aria-valuenow? | number | - |
aria-valuetext? | string | - |
children? | ReactNode | - |
dangerouslySetInnerHTML? | { __html: string | TrustedHTML; } | - |
onCopy? | ClipboardEventHandler<HTMLDivElement> | - |
onCopyCapture? | ClipboardEventHandler<HTMLDivElement> | - |
onCut? | ClipboardEventHandler<HTMLDivElement> | - |
onCutCapture? | ClipboardEventHandler<HTMLDivElement> | - |
onPaste? | ClipboardEventHandler<HTMLDivElement> | - |
onPasteCapture? | ClipboardEventHandler<HTMLDivElement> | - |
onCompositionEnd? | CompositionEventHandler<HTMLDivElement> | - |
onCompositionEndCapture? | CompositionEventHandler<HTMLDivElement> | - |
onCompositionStart? | CompositionEventHandler<HTMLDivElement> | - |
onCompositionStartCapture? | CompositionEventHandler<HTMLDivElement> | - |
onCompositionUpdate? | CompositionEventHandler<HTMLDivElement> | - |
onCompositionUpdateCapture? | CompositionEventHandler<HTMLDivElement> | - |
onFocus? | FocusEventHandler<HTMLDivElement> | - |
onFocusCapture? | FocusEventHandler<HTMLDivElement> | - |
onBlur? | FocusEventHandler<HTMLDivElement> | - |
onBlurCapture? | FocusEventHandler<HTMLDivElement> | - |
onChange? | FormEventHandler<HTMLDivElement> | - |
onChangeCapture? | FormEventHandler<HTMLDivElement> | - |
onBeforeInput? | FormEventHandler<HTMLDivElement> | - |
onBeforeInputCapture? | FormEventHandler<HTMLDivElement> | - |
onInput? | FormEventHandler<HTMLDivElement> | - |
onInputCapture? | FormEventHandler<HTMLDivElement> | - |
onReset? | FormEventHandler<HTMLDivElement> | - |
onResetCapture? | FormEventHandler<HTMLDivElement> | - |
onSubmit? | FormEventHandler<HTMLDivElement> | - |
onSubmitCapture? | FormEventHandler<HTMLDivElement> | - |
onInvalid? | FormEventHandler<HTMLDivElement> | - |
onInvalidCapture? | FormEventHandler<HTMLDivElement> | - |
onLoad? | ReactEventHandler<HTMLDivElement> | - |
onLoadCapture? | ReactEventHandler<HTMLDivElement> | - |
onError? | ReactEventHandler<HTMLDivElement> | - |
onErrorCapture? | ReactEventHandler<HTMLDivElement> | - |
onKeyDown? | KeyboardEventHandler<HTMLDivElement> | - |
onKeyDownCapture? | KeyboardEventHandler<HTMLDivElement> | - |
onKeyPress? | KeyboardEventHandler<HTMLDivElement> | - |
onKeyPressCapture? | KeyboardEventHandler<HTMLDivElement> | - |
onKeyUp? | KeyboardEventHandler<HTMLDivElement> | - |
onKeyUpCapture? | KeyboardEventHandler<HTMLDivElement> | - |
onAbort? | ReactEventHandler<HTMLDivElement> | - |
onAbortCapture? | ReactEventHandler<HTMLDivElement> | - |
onCanPlay? | ReactEventHandler<HTMLDivElement> | - |
onCanPlayCapture? | ReactEventHandler<HTMLDivElement> | - |
onCanPlayThrough? | ReactEventHandler<HTMLDivElement> | - |
onCanPlayThroughCapture? | ReactEventHandler<HTMLDivElement> | - |
onDurationChange? | ReactEventHandler<HTMLDivElement> | - |
onDurationChangeCapture? | ReactEventHandler<HTMLDivElement> | - |
onEmptied? | ReactEventHandler<HTMLDivElement> | - |
onEmptiedCapture? | ReactEventHandler<HTMLDivElement> | - |
onEncrypted? | ReactEventHandler<HTMLDivElement> | - |
onEncryptedCapture? | ReactEventHandler<HTMLDivElement> | - |
onEnded? | ReactEventHandler<HTMLDivElement> | - |
onEndedCapture? | ReactEventHandler<HTMLDivElement> | - |
onLoadedData? | ReactEventHandler<HTMLDivElement> | - |
onLoadedDataCapture? | ReactEventHandler<HTMLDivElement> | - |
onLoadedMetadata? | ReactEventHandler<HTMLDivElement> | - |
onLoadedMetadataCapture? | ReactEventHandler<HTMLDivElement> | - |
onLoadStart? | ReactEventHandler<HTMLDivElement> | - |
onLoadStartCapture? | ReactEventHandler<HTMLDivElement> | - |
onPause? | ReactEventHandler<HTMLDivElement> | - |
onPauseCapture? | ReactEventHandler<HTMLDivElement> | - |
onPlay? | ReactEventHandler<HTMLDivElement> | - |
onPlayCapture? | ReactEventHandler<HTMLDivElement> | - |
onPlaying? | ReactEventHandler<HTMLDivElement> | - |
onPlayingCapture? | ReactEventHandler<HTMLDivElement> | - |
onProgress? | ReactEventHandler<HTMLDivElement> | - |
onProgressCapture? | ReactEventHandler<HTMLDivElement> | - |
onRateChange? | ReactEventHandler<HTMLDivElement> | - |
onRateChangeCapture? | ReactEventHandler<HTMLDivElement> | - |
onResize? | ReactEventHandler<HTMLDivElement> | - |
onResizeCapture? | ReactEventHandler<HTMLDivElement> | - |
onSeeked? | ReactEventHandler<HTMLDivElement> | - |
onSeekedCapture? | ReactEventHandler<HTMLDivElement> | - |
onSeeking? | ReactEventHandler<HTMLDivElement> | - |
onSeekingCapture? | ReactEventHandler<HTMLDivElement> | - |
onStalled? | ReactEventHandler<HTMLDivElement> | - |
onStalledCapture? | ReactEventHandler<HTMLDivElement> | - |
onSuspend? | ReactEventHandler<HTMLDivElement> | - |
onSuspendCapture? | ReactEventHandler<HTMLDivElement> | - |
onTimeUpdate? | ReactEventHandler<HTMLDivElement> | - |
onTimeUpdateCapture? | ReactEventHandler<HTMLDivElement> | - |
onVolumeChange? | ReactEventHandler<HTMLDivElement> | - |
onVolumeChangeCapture? | ReactEventHandler<HTMLDivElement> | - |
onWaiting? | ReactEventHandler<HTMLDivElement> | - |
onWaitingCapture? | ReactEventHandler<HTMLDivElement> | - |
onAuxClick? | MouseEventHandler<HTMLDivElement> | - |
onAuxClickCapture? | MouseEventHandler<HTMLDivElement> | - |
onClick? | MouseEventHandler<HTMLDivElement> | - |
onClickCapture? | MouseEventHandler<HTMLDivElement> | - |
onContextMenu? | MouseEventHandler<HTMLDivElement> | - |
onContextMenuCapture? | MouseEventHandler<HTMLDivElement> | - |
onDoubleClick? | MouseEventHandler<HTMLDivElement> | - |
onDoubleClickCapture? | MouseEventHandler<HTMLDivElement> | - |
onDrag? | DragEventHandler<HTMLDivElement> | - |
onDragCapture? | DragEventHandler<HTMLDivElement> | - |
onDragEnd? | DragEventHandler<HTMLDivElement> | - |
onDragEndCapture? | DragEventHandler<HTMLDivElement> | - |
onDragEnter? | DragEventHandler<HTMLDivElement> | - |
onDragEnterCapture? | DragEventHandler<HTMLDivElement> | - |
onDragExit? | DragEventHandler<HTMLDivElement> | - |
onDragExitCapture? | DragEventHandler<HTMLDivElement> | - |
onDragLeave? | DragEventHandler<HTMLDivElement> | - |
onDragLeaveCapture? | DragEventHandler<HTMLDivElement> | - |
onDragOver? | DragEventHandler<HTMLDivElement> | - |
onDragOverCapture? | DragEventHandler<HTMLDivElement> | - |
onDragStart? | DragEventHandler<HTMLDivElement> | - |
onDragStartCapture? | DragEventHandler<HTMLDivElement> | - |
onDrop? | DragEventHandler<HTMLDivElement> | - |
onDropCapture? | DragEventHandler<HTMLDivElement> | - |
onMouseDown? | MouseEventHandler<HTMLDivElement> | - |
onMouseDownCapture? | MouseEventHandler<HTMLDivElement> | - |
onMouseEnter? | MouseEventHandler<HTMLDivElement> | - |
onMouseLeave? | MouseEventHandler<HTMLDivElement> | - |
onMouseMove? | MouseEventHandler<HTMLDivElement> | - |
onMouseMoveCapture? | MouseEventHandler<HTMLDivElement> | - |
onMouseOut? | MouseEventHandler<HTMLDivElement> | - |
onMouseOutCapture? | MouseEventHandler<HTMLDivElement> | - |
onMouseOver? | MouseEventHandler<HTMLDivElement> | - |
onMouseOverCapture? | MouseEventHandler<HTMLDivElement> | - |
onMouseUp? | MouseEventHandler<HTMLDivElement> | - |
onMouseUpCapture? | MouseEventHandler<HTMLDivElement> | - |
onSelect? | ReactEventHandler<HTMLDivElement> | - |
onSelectCapture? | ReactEventHandler<HTMLDivElement> | - |
onTouchCancel? | TouchEventHandler<HTMLDivElement> | - |
onTouchCancelCapture? | TouchEventHandler<HTMLDivElement> | - |
onTouchEnd? | TouchEventHandler<HTMLDivElement> | - |
onTouchEndCapture? | TouchEventHandler<HTMLDivElement> | - |
onTouchMove? | TouchEventHandler<HTMLDivElement> | - |
onTouchMoveCapture? | TouchEventHandler<HTMLDivElement> | - |
onTouchStart? | TouchEventHandler<HTMLDivElement> | - |
onTouchStartCapture? | TouchEventHandler<HTMLDivElement> | - |
onPointerDown? | PointerEventHandler<HTMLDivElement> | - |
onPointerDownCapture? | PointerEventHandler<HTMLDivElement> | - |
onPointerMove? | PointerEventHandler<HTMLDivElement> | - |
onPointerMoveCapture? | PointerEventHandler<HTMLDivElement> | - |
onPointerUp? | PointerEventHandler<HTMLDivElement> | - |
onPointerUpCapture? | PointerEventHandler<HTMLDivElement> | - |
onPointerCancel? | PointerEventHandler<HTMLDivElement> | - |
onPointerCancelCapture? | PointerEventHandler<HTMLDivElement> | - |
onPointerEnter? | PointerEventHandler<HTMLDivElement> | - |
onPointerLeave? | PointerEventHandler<HTMLDivElement> | - |
onPointerOver? | PointerEventHandler<HTMLDivElement> | - |
onPointerOverCapture? | PointerEventHandler<HTMLDivElement> | - |
onPointerOut? | PointerEventHandler<HTMLDivElement> | - |
onPointerOutCapture? | PointerEventHandler<HTMLDivElement> | - |
onGotPointerCapture? | PointerEventHandler<HTMLDivElement> | - |
onGotPointerCaptureCapture? | PointerEventHandler<HTMLDivElement> | - |
onLostPointerCapture? | PointerEventHandler<HTMLDivElement> | - |
onLostPointerCaptureCapture? | PointerEventHandler<HTMLDivElement> | - |
onScroll? | UIEventHandler<HTMLDivElement> | - |
onScrollCapture? | UIEventHandler<HTMLDivElement> | - |
onWheel? | WheelEventHandler<HTMLDivElement> | - |
onWheelCapture? | WheelEventHandler<HTMLDivElement> | - |
onAnimationStart? | AnimationEventHandler<HTMLDivElement> | - |
onAnimationStartCapture? | AnimationEventHandler<HTMLDivElement> | - |
onAnimationEnd? | AnimationEventHandler<HTMLDivElement> | - |
onAnimationEndCapture? | AnimationEventHandler<HTMLDivElement> | - |
onAnimationIteration? | AnimationEventHandler<HTMLDivElement> | - |
onAnimationIterationCapture? | AnimationEventHandler<HTMLDivElement> | - |
onToggle? | ToggleEventHandler<HTMLDivElement> | - |
onBeforeToggle? | ToggleEventHandler<HTMLDivElement> | - |
onTransitionCancel? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionCancelCapture? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionEnd? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionEndCapture? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionRun? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionRunCapture? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionStart? | TransitionEventHandler<HTMLDivElement> | - |
onTransitionStartCapture? | TransitionEventHandler<HTMLDivElement> | - |
open | boolean | - |
onOpenChange | (open: boolean) => void | - |
EditorNodeText
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorNodeHeading1
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorNodeHeading2
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorNodeHeading3
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorNodeBulletList
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorNodeOrderedList
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorNodeTaskList
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorNodeQuote
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorNodeCode
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorFormatBold
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorFormatItalic
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorFormatUnderline
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorFormatStrike
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorFormatCode
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorFormatSuperscript
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorFormatSubscript
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorTextColor
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
color | string | - |
name | string | - |
EditorBackgroundColor
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
color | string | - |
name | string | - |
EditorLinkSelector
Prop | Type | Default |
---|---|---|
open | boolean | - |
onOpenChange | (open: boolean) => void | - |
EditorClearFormatting
Prop | Type | Default |
---|---|---|
hideName? | boolean | - |
EditorTableMenu
Prop | Type | Default |
---|---|---|
children | ReactNode | - |
EditorTableColumnMenu
Prop | Type | Default |
---|---|---|
children | ReactNode | - |
EditorTableRowMenu
Prop | Type | Default |
---|---|---|
children | ReactNode | - |
EditorTableGlobalMenu
Prop | Type | Default |
---|---|---|
children | ReactNode | - |
EditorCharacterCount
Prop | Type | Default |
---|---|---|
children | ReactNode | - |
className? | string | - |