Kibo UI
Header Background

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

PropTypeDefault
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

PropTypeDefault
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

PropTypeDefault
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

PropTypeDefault
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

PropTypeDefault
hideName?
boolean
-

EditorNodeHeading1

PropTypeDefault
hideName?
boolean
-

EditorNodeHeading2

PropTypeDefault
hideName?
boolean
-

EditorNodeHeading3

PropTypeDefault
hideName?
boolean
-

EditorNodeBulletList

PropTypeDefault
hideName?
boolean
-

EditorNodeOrderedList

PropTypeDefault
hideName?
boolean
-

EditorNodeTaskList

PropTypeDefault
hideName?
boolean
-

EditorNodeQuote

PropTypeDefault
hideName?
boolean
-

EditorNodeCode

PropTypeDefault
hideName?
boolean
-

EditorFormatBold

PropTypeDefault
hideName?
boolean
-

EditorFormatItalic

PropTypeDefault
hideName?
boolean
-

EditorFormatUnderline

PropTypeDefault
hideName?
boolean
-

EditorFormatStrike

PropTypeDefault
hideName?
boolean
-

EditorFormatCode

PropTypeDefault
hideName?
boolean
-

EditorFormatSuperscript

PropTypeDefault
hideName?
boolean
-

EditorFormatSubscript

PropTypeDefault
hideName?
boolean
-

EditorTextColor

PropTypeDefault
hideName?
boolean
-
color
string
-
name
string
-

EditorBackgroundColor

PropTypeDefault
hideName?
boolean
-
color
string
-
name
string
-

EditorLinkSelector

PropTypeDefault
open
boolean
-
onOpenChange
(open: boolean) => void
-

EditorClearFormatting

PropTypeDefault
hideName?
boolean
-

EditorTableMenu

PropTypeDefault
children
ReactNode
-

EditorTableColumnMenu

PropTypeDefault
children
ReactNode
-

EditorTableRowMenu

PropTypeDefault
children
ReactNode
-

EditorTableGlobalMenu

PropTypeDefault
children
ReactNode
-

EditorCharacterCount

PropTypeDefault
children
ReactNode
-
className?
string
-