Article Editor Shell

A minimal React component that wraps a rich-text editor provider so callers can initialize HTML content, toggle editability, and receive change events in both HTML and JSON forms.

Capabilities

Initializes editor with HTML

• Renders with initialHtml so the provided markup is visible on the first paint in the editable surface @test
• When initialHtml is empty and placeholder is set, shows that placeholder text until the user types content @test

Editable and focus control

• Respects the editable prop; when false, the content is read-only and does not request focus, when true the editor autofocuses on mount when autoFocus is true @test

Change notifications

• Typing text fires onHtmlChange with the serialized HTML string for the current document @test
• Typing text fires onJsonChange with the document JSON representation that includes a paragraph node containing the typed text @test

Implementation

@generates

API

export interface ArticleEditorProps {
  initialHtml?: string;
  placeholder?: string;
  editable?: boolean;
  autoFocus?: boolean;
  onHtmlChange?: (html: string) => void;
  onJsonChange?: (doc: unknown) => void;
  className?: string;
}

export function ArticleEditor(props: ArticleEditorProps): JSX.Element;

Dependencies { .dependencies }

@remirror/react { .dependency }

Provides React editor provider, initialization hook, and content component for managing rich-text state and updates.