Editor

Import from @workspace/bridge-react/rich-editor/components/bridge-editor and @workspace/bridge-react/rich-editor/types.

BridgeEditor

Rich text editor component with bridge-specific extensions. Built on Plate.js with support for bold, italic, lists, and suit symbol insertion. Controlled via an imperative ref API.

import { BridgeEditor } from '@workspace/bridge-react/rich-editor/components/bridge-editor';
import type { BridgeEditorRef } from '@workspace/bridge-react/rich-editor/types';

const editorRef = useRef<BridgeEditorRef>(null);

<BridgeEditor
  ref={editorRef}
  placeholder="Add a comment..."
  initialContent="Opening lead: ♠A"
  onContentChange={() => setDirty(true)}
  mode="default"
  variant="default"
  toolbarMode="full"
/>

Props

Ref API

The editor exposes an imperative API via React.forwardRef. Access it through a ref:

const editorRef = useRef<BridgeEditorRef>(null);

// Get content
const html = editorRef.current?.getHTML();
const pbn = editorRef.current?.getPBN();

// Set content
editorRef.current?.setContent('<b>Hello</b> ♠');
editorRef.current?.clear();

// Check state
const hasContent = editorRef.current?.hasContent();

// Control
editorRef.current?.focus();
editorRef.current?.setMode('petit-bridge');

Types

EditorMode

type EditorMode = "default" | "petit-bridge";

Controls how suit symbols are displayed in the editor. In "petit-bridge" mode, all suit symbols render as a generic square character.

ToolbarMode

type ToolbarMode = "full" | "minimal";

Controls which toolbar buttons are shown. "full" includes bold, italic, and list buttons alongside suit symbols. "minimal" shows only suit symbol buttons.

Variant

The variant prop controls the visual style:

Plugins

The editor uses createBridgeEditorPlugins(mode) internally, which configures:

• ParagraphPlugin — Basic paragraph support
• SuitIconPlugin — Suit symbol rendering and autoformat
• BoldPlugin / ItalicPlugin — Text formatting
• ListPlugin — Ordered and unordered lists with autoformat (* / 1. )
• MarkdownPlugin — Markdown deserialization with MDX support for suit elements
• AutoformatPlugin — Keyboard shortcuts for suits and list creation

Import from @workspace/bridge-react/rich-editor/hooks/use-bridge-editor-plugins:

import { createBridgeEditorPlugins } from '@workspace/bridge-react/rich-editor/hooks/use-bridge-editor-plugins';

const plugins = createBridgeEditorPlugins('default');