Localized Themed Editor

A React component that renders a controlled rich-text editor with dual content outputs, localization toggling, and theme-aware styling.

Capabilities

Controlled content outputs

• When the user types text, both the HTML change callback and the JSON change callback receive synchronized representations of the new content. @test
• Updating the document to include inline formatting preserves synchronized HTML and JSON outputs without desynchronizing the rendered view. @test

Locale switching

• Switching the locale updates visible UI strings using the provided locale-keyed translations while preserving the current document content. @test

Theme application

• Passing a theme object updates the editor container and toolbar styling (background and accent colors) and remains consistent after re-renders. @test

Implementation

@generates

API

export interface LocalizedThemedEditorProps {
  /** Starting HTML representation of the document */
  initialHtml: string;
  /** Starting structured representation of the document */
  initialJson: object;
  /** Current locale key */
  locale: string;
  /** Translation messages keyed by locale, then message key */
  messages: Record<string, Record<string, string>>;
  /** Visual theme configuration */
  theme: {
    colors?: Record<string, string>;
    typography?: Record<string, string | number>;
  };
  /** Called whenever the HTML representation changes */
  onHtmlChange(value: string): void;
  /** Called whenever the structured representation changes */
  onJsonChange(value: object): void;
  /** Optional notification when locale changes within the component */
  onLocaleChange?(nextLocale: string): void;
}

export function LocalizedThemedEditor(props: LocalizedThemedEditorProps): JSX.Element;

Dependencies { .dependencies }

@remirror/react { .dependency }

Provides React bindings for controlled editor content, localization, and theming support.