Editor

The Editor component is the root wrapper for your rich text editor. It initializes the Tiptap editor instance, provides context to child components, and manages drag handling and the bubble menu.

Import

import { Editor } from 'ritext';

Usage

import { Editor, Toolbar, Content } from 'ritext';
import { Document, Text, Paragraph } from 'ritext/extension/base';
import { Bold } from 'ritext/extension/bold';
import 'ritext/styles.css';

export default function MyEditor() {
  return (
    <Editor
      extensions={[Document, Text, Paragraph, Bold]}
      className="border border-gray-200 rounded-xl"
    >
      <Toolbar className="p-2 border-b" />
      <Content />
    </Editor>
  );
}

Props

Prop

Type

Controlled Content

Pass content and onContentChange to keep the editor content in sync with your state:

const [html, setHtml] = useState('<p>Hello world</p>');

<Editor
  content={html}
  output="html"
  onContentChange={(e) => setHtml(e.content as string)}
  extensions={extensions}
>
  <Toolbar />
  <Content />
</Editor>

Imperative Handle (Ref)

Attach a ref to access imperative methods. See EditorRef for the full API.

import { useRef } from 'react';
import { type EditorRef } from 'ritext';

const ref = useRef<EditorRef>(null);

<Editor ref={ref} extensions={extensions}>
  <Toolbar />
  <Content />
</Editor>

// Use ref methods
ref.current?.clear();
ref.current?.insert('<strong>Hello</strong>');

Drag Handler

The drag handler shows a drag icon on the left edge of each block, allowing users to reorder content by dragging. It is enabled by default.

// Disable drag handler
<Editor dragHandler={false} extensions={extensions}>
  <Toolbar />
  <Content />
</Editor>

The bubble menu appears as a floating toolbar when text is selected. It automatically shows buttons from extensions that have showInBubbleMenu: true set in their options.

// Disable bubble menu
<Editor showBubbleMenu={false} extensions={extensions}>
  <Toolbar />
  <Content />
</Editor>

Output Formats

Format	Description
`"html"`	Serialized HTML string (default)
`"json"`	ProseMirror JSON document
`"text"`	Plain text content