Components
AbbreviateNumberActionLinkAdaptiveCardAffixAuthorityCheckCalendarViewChartConfirmDialogContainerCustomFormatInputDataTableDebounceInputDoubleSidedImageEllipsisButtonGanttChartGrowShrinkValueIconTextImageGalleryLoadingMasonryMediaSkeletonNavToggleNumericInputOtpInputPasswordInputPatternInputRegionMapRichTextEditorSegmentItemOptionStickyFooterSyntaxHighlighterUsersAvatarGroup
RichTextEditor
RichTextEditor component is a customizable rich text editor utilized with Tiptap editor framework. It comes with a predefined toolbar that includes common formatting options like bold, italic, lists, and more.
Basic
Basic usage.
Custom toolbar
You can customize the editor toolbar with
customToolBar propCustom config
You can customize the entire configuration with
customToolBar prop. Note: Documentation & Text extension is required if not using StarterKit as extension.With form
Example with form
API
RichTextEditor
| Prop | Description | Type | Default |
|---|---|---|---|
| content | The initial content of the editor. This can be an HTML string or plain text. | string | - |
| invalid | Applies styles to indicate the editor content is invalid, typically used for form validation. | boolean | - |
| customToolBar | A function to customize the toolbar by providing your own buttons. It receives the current `editor` instance and an object containing the default toolbar components. | (editor: Editor, components: {
ToolButtonBold: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonItalic: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonStrike: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonCode: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonBlockquote: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonHeading: ({ editor }: BaseToolButtonProps & { headingLevel?: HeadingLevel[] }) => JSX.Element,
ToolButtonBulletList: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonOrderedList: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonCodeBlock: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonHorizontalRule: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonParagraph: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonUndo: ({ editor }: BaseToolButtonProps) => JSX.Element,
ToolButtonRedo: ({ editor }: BaseToolButtonProps) => JSX.Element,
}) => ReactNode | - |
| onChange | Callback function that is triggered whenever the content of the editor changes. It provides the updated content in three formats: plain text, HTML, and JSON. | (content: {text: string, html: string, json: JSONContent}) => void | - |
| editorContentClass | Additional CSS classes to apply to the editor's content area. | string | - |
| customEditor | A custom Tiptap `Editor` instance. If provided, this instance will be used instead of creating a new one. | Editor | null | - |
Dependencies
tiptap
For futher usage of tiptap, you could refer theofficial docs for the complete api list.