Getting Started

Getting Started

RichTextEditor renders and edits a NativeEditorDocumentHandle. The handle is the document session: it owns initial content, schema, engine policy, and resource limits. Create it once for the screen or document, then destroy it when that owner unmounts.

Smallest editor

This complete component creates a local HTML document and uses the built-in keyboard toolbar. showToolbar defaults to true, and the default item list includes marks, blockquotes, lists, line breaks, horizontal rules, undo, and redo.

import { useEffect, useMemo } from 'react';
import {
  createNativeEditorDocumentHandle,
  RichTextEditor,
} from '@apollohg/react-native-rich-text-editor';

export function NoteEditor() {
  const documentHandle = useMemo(
    () =>
      createNativeEditorDocumentHandle({
        initialization: {
          type: 'localHtml',
          html: '<p>Hello world</p>',
        },
      }),
    []
  );

  useEffect(() => () => documentHandle.destroy(), [documentHandle]);

  return (
    <RichTextEditor
      documentHandle={documentHandle}
      placeholder="Write something…"
      style={{ minHeight: 180 }}
      onContentChange={(html) => console.log(html)}
    />
  );
}

Use localJson instead when your stored source is ProseMirror JSON, or localEmpty to begin with the schema's valid empty document:

createNativeEditorDocumentHandle({
  initialization: {
    type: 'localJson',
    json: {
      type: 'doc',
      content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Hello' }] }],
    },
  },
});

There are no initialContent, initialJSON, schema, or allowBase64Images editor props. Put initialization, schema, and engine-enforced policy on the handle configuration. The default is defaultSchema, which uses canonical ProseMirror snake_case names such as bullet_list, list_item, hard_break, and horizontal_rule. Use tiptapCompatibleSchema explicitly for existing camelCase content.

Editor size and scrolling

heightBehavior defaults to "autoGrow", which publishes the native content height into layout as content changes and expands the editor to fit it. This works well when the parent screen owns scrolling.

<RichTextEditor
  documentHandle={documentHandle}
  heightBehavior="autoGrow"
/>

Use heightBehavior="fixed" with an explicit React Native height when the editor should scroll inside its own frame:

<RichTextEditor
  documentHandle={documentHandle}
  heightBehavior="fixed"
  style={{ height: 280 }}
/>

The default toolbarPlacement="keyboard" uses an iOS keyboard accessory or an Android above-keyboard toolbar. Keep the rest of a scrolling screen keyboard-aware; the editor toolbar does not replace the app's KeyboardAvoidingView or screen inset strategy. Choose toolbarPlacement="inline" when the toolbar should stay visible below the editor even with the keyboard closed.

What next

• Content and State explains handle initialization, controlled HTML/JSON, callbacks, and imperative methods.
• Toolbar Setup configures built-in, inline, grouped, and standalone toolbars.
• Styling introduces EditorStyleSheet.create and per-element document styles.
• Addons and Code Syntax Highlighting add optional capabilities.
• Links and Images adds host-driven URL and image-picker flows.
• External Text Composition integrates a consumer-owned provisional text source with the editor.
• Custom Atom Nodes renders interactive React components as persisted block nodes.
• Schema Customization covers custom content models and extensions.