RichTextEditor

pro

RichTextEditor combines Tiptap editing with composable formatting tools for notes, comments, and long-form fields.

Get the code
0 characters

Installation

Add this component with the NateUI CLI.

npx nateui@latest add RichTextEditor

Examples

Custom Toolbar

Get the code

Custom Editor

Get the code

Invalid

Get the code

With Form

Get the code
Share progress, blockers, and next steps.

API

RichTextEditor is coupled to Tiptap by design. Without customEditor, it creates a StarterKit editor and supplies the default toolbar. With customEditor, the caller owns the editor extensions and its update lifecycle.

PropDescriptionTypeDefault
contentInitial HTML, and the HTML value applied when the prop changes.string''
invalidApplies the destructive editor state.booleanfalse
customToolBarReplaces the default toolbar with a renderer receiving the Tiptap editor and the built-in toolbar component map.RichTextEditorToolbarRendererDefault toolbar
onChangeCalled by the internally created editor after an update.(payload: RichTextEditorChangePayload) => void—
editorContentClassAdditional classes applied to the EditorContent element.string—
customEditorUses a caller-owned Tiptap editor instance instead of creating one internally.Editor | null—
refRef forwarded to the EditorContent root element.Ref<HTMLDivElement>—
...restRemaining EditorContent props, excluding editor, ref, and onChange.EditorContentProps—

Compound Toolbar Exports

The default export also exposes the reusable toolbar pieces and update hook:

RichTextEditor.ToolButton, RichTextEditor.ToolButtonBold, RichTextEditor.ToolButtonItalic, RichTextEditor.ToolButtonStrike, RichTextEditor.ToolButtonCode, RichTextEditor.ToolButtonBlockquote, RichTextEditor.ToolButtonHeading, RichTextEditor.ToolButtonParagraph, RichTextEditor.ToolButtonBulletList, RichTextEditor.ToolButtonOrderedList, RichTextEditor.ToolButtonCodeBlock, RichTextEditor.ToolButtonHardBreak, RichTextEditor.ToolButtonHorizontalRule, RichTextEditor.ToolButtonImage, RichTextEditor.ToolButtonUndo, RichTextEditor.ToolButtonRedo, and RichTextEditor.useEditorUpdate.

Types

import type { ComponentType, ReactNode } from 'react';
import type { Editor, EditorContentProps, JSONContent } from '@tiptap/react';
 
type RichTextEditorChangePayload = {
  text: string;
  html: string;
  json: JSONContent;
};
 
type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
type ToolbarComponents = {
  ToolButtonBold: ComponentType<{ editor: Editor }>;
  ToolButtonItalic: ComponentType<{ editor: Editor }>;
  ToolButtonStrike: ComponentType<{ editor: Editor }>;
  ToolButtonCode: ComponentType<{ editor: Editor }>;
  ToolButtonBlockquote: ComponentType<{ editor: Editor }>;
  ToolButtonHeading: ComponentType<{
    editor: Editor;
    headingLevel?: HeadingLevel[];
  }>;
  ToolButtonBulletList: ComponentType<{ editor: Editor }>;
  ToolButtonOrderedList: ComponentType<{ editor: Editor }>;
  ToolButtonCodeBlock: ComponentType<{ editor: Editor }>;
  ToolButtonHorizontalRule: ComponentType<{ editor: Editor }>;
  ToolButtonParagraph: ComponentType<{ editor: Editor }>;
  ToolButtonUndo: ComponentType<{ editor: Editor }>;
  ToolButtonRedo: ComponentType<{ editor: Editor }>;
};
 
type RichTextEditorToolbarRenderer = (
  editor: Editor,
  components: ToolbarComponents,
) => ReactNode;