LocalizedEditor

LocalizedEditor manages multiple locale editors with tab switching, add/remove locales, and content status tracking. It composes RichEditor.Root internally for each mounted locale.

import { LocalizedEditor, useLocalizedEditorRef } from '@workspace/rich-text/components/localized-editor';

Usage

const ref = useLocalizedEditorRef();

<LocalizedEditor.Root
  localized={{
    defaultLocale: 'en',
    availableLocales: [
      { code: 'en', label: 'English' },
      { code: 'fr', label: 'French' },
    ],
  }}
  defaultValue={{ en: richTextEn, fr: richTextFr }}
  ref={ref}
>
  <LocalizedEditor.Editor config={{ mode: 'default', lists: false }}>
    <RichEditor.Toolbar>
      <MarkToolbarButton nodeType="bold">B</MarkToolbarButton>
      <MarkToolbarButton nodeType="italic">I</MarkToolbarButton>
      <SuitSymbolButton suit="S" />
      <SuitSymbolButton suit="H" />
      <SuitSymbolButton suit="D" />
      <SuitSymbolButton suit="C" />
    </RichEditor.Toolbar>
    <RichEditor.Area variant="edge">
      <RichEditor.Input placeholder="Comment..." variant="edge" />
    </RichEditor.Area>
  </LocalizedEditor.Editor>
  <LocalizedEditor.LocaleOptions />
</LocalizedEditor.Root>

Parts

`LocalizedEditor.Root`

Manages locale state (mounted locales, active locale, content status).

Prop	Type	Default	Description
`localized`	`LocalizedEditorOptions`	required	Locale configuration
`defaultValue`	`LocalizedRichText`	`{}`	Initial content per locale
`ref`	`Ref<LocalizedEditorHandle>`	—	Imperative handle

`LocalizedEditor.Editor`

Renders a RichEditor.Root for each mounted locale, using React 19 <Activity> for instant tab switching without losing state.

Prop	Type	Default	Description
`config`	`RichEditorConfig`	`{}`	Editor config passed to each locale's RichEditor
`children`	`ReactNode`	required	Toolbar + Area + Input (shared across locales)

`LocalizedEditor.LocaleOptions`

Locale buttons (add language picker + locale tabs). Renders inline content — consumer controls the surrounding layout.

Prop	Type	Description
`className`	`string`	Additional CSS class

Ref Handle (`LocalizedEditorHandle`)

type LocalizedEditorHandle = {
  getValue(): LocalizedRichText;      // { en: RichText, fr: RichText, ... }
  setValue(value: LocalizedRichText): void;
};

Options (`LocalizedEditorOptions`)

type LocalizedEditorOptions = {
  defaultLocale: string;
  availableLocales: AvailableLocale[];
  localePickerLabels?: Partial<LocalePickerLabels>;
};

type AvailableLocale = { code: string; label: string };

type LocalePickerLabels = {
  active: string;
  add: string;
  searchPlaceholder: string;
  noResults: string;
};

Context Hook

import { useLocalizedEditor } from '@workspace/rich-text/components/localized-editor';

// Inside LocalizedEditor.Root children:
const { mountedLocales, activeLocale, contentStatus } = useLocalizedEditor();

On this page