Bridge ReactRich Editor
Rich Editor
Plate.js-based rich text editor for bridge content with suit symbol support.
The Rich Editor module provides a full-featured rich text editor built on Plate.js (Slate) with bridge-specific extensions for suit symbols.
Architecture
The module is organized into several sub-path exports:
| Export Path | Description |
|---|---|
@workspace/bridge-react/rich-editor/components/* | UI components (BridgeEditor, CommentPreview, etc.) |
@workspace/bridge-react/rich-editor/context/* | React context for editor state sharing |
@workspace/bridge-react/rich-editor/hooks/* | Plugin configuration hooks |
@workspace/bridge-react/rich-editor/serialization/* | HTML and PBN serialization utilities |
@workspace/bridge-react/rich-editor/types | TypeScript types (BridgeEditorRef, BridgeEditorProps, etc.) |
@workspace/bridge-react/rich-editor/i18n | i18n namespace and translation resources |
Key Concepts
Editor Modes
The editor supports two display modes for suit symbols:
"default"— Standard suit glyphs (spade, heart, diamond, club)"petit-bridge"— All suits display as a generic square symbol
Toolbar Modes
"full"— Bold, italic, ordered/unordered lists, and suit symbol buttons"minimal"— Suit symbol buttons only
Suit Shortcuts
The editor supports autoformat shortcuts for inserting suit symbols:
| Shortcut | Symbol |
|---|---|
\S | Spade |
\H | Heart |
\D | Diamond |
\C | Club |
Ref-based API
The BridgeEditor exposes an imperative API via React.forwardRef. Use a ref to get/set content, serialize to HTML or PBN, and control focus. See the Editor page for the full ref API.
Pages
- Editor — Main
BridgeEditorcomponent, props, and ref API - Serialization —
serializeToHTML,serializeToPBN,deserializeHTMLfunctions - Context —
FinalCommentEditorProvideranduseFinalCommentEditorhook