Serialization

Import from @workspace/bridge-react/rich-editor/serialization/to-html, @workspace/bridge-react/rich-editor/serialization/to-pbn, or @workspace/bridge-react/rich-editor/serialization/from-html.

serializeToHTML

Serializes Slate/Plate nodes to HTML format. Produces HTML with <b>, <i>, <ul>, <ol>, <li> tags and suit glyphs.

import { serializeToHTML } from '@workspace/bridge-react/rich-editor/serialization/to-html';

const html = serializeToHTML(editor.children);
// "Opening lead: ♠A\n<ul><li>Good play</li></ul>"

Returns: string — HTML string

Behavior

• Text nodes are HTML-escaped
• Bold text wrapped in <b> tags
• Italic text wrapped in <i> tags
• Suit nodes render as Unicode glyphs (spade, heart, diamond, club)
• Paragraphs produce content\n
• Lists produce <ul> / <ol> with <li> children

serializeToPBN

Serializes Slate/Plate nodes to PBN (Portable Bridge Notation) format. Produces plain text output suitable for PBN files.

import { serializeToPBN } from '@workspace/bridge-react/rich-editor/serialization/to-pbn';

const pbn = serializeToPBN(editor.children);
// "Opening lead: ♠A"

Returns: string — Trimmed plain text string

Behavior

• Same as HTML serialization but list items render as plain text lines instead of <li> tags
• Output is trimmed of leading/trailing whitespace

deserializeHTML

Deserializes HTML (as produced by serializeToHTML) into a PDF-agnostic rich content AST. This is used for rendering rich content outside of the editor (e.g., PDF export).

import { deserializeHTML } from '@workspace/bridge-react/rich-editor/serialization/from-html';

const blocks = deserializeHTML('<b>Hello</b> ♠\n<ul><li>Item</li></ul>');

Returns: RichBlockNode[] — Array of block nodes

Supported HTML

• <b>, <i> — Bold and italic marks
• <span> — Transparent wrapper
• <ul>, <ol> with <li> — Lists
• <br>, <br/> — Converted to newlines
• \n — Paragraph breaks
• HTML entities — Automatically unescaped
• Suit glyphs — Converted to typed suit nodes

Rich Content Types

The deserialized AST uses these types, importable from @workspace/bridge-react/rich-editor/serialization/rich-content-types:

Inline Nodes

type RichTextNode = {
  type: "text";
  text: string;
  bold?: boolean;
  italic?: boolean;
};

type RichSuitNode = {
  type: "suit";
  suit: Suit;  // "S" | "H" | "D" | "C"
  bold?: boolean;
  italic?: boolean;
};

type RichInlineNode = RichTextNode | RichSuitNode;

Block Nodes

type RichParagraphNode = {
  type: "paragraph";
  children: RichInlineNode[];
};

type RichListItemNode = {
  type: "list-item";
  children: RichInlineNode[];
};

type RichListNode = {
  type: "list";
  ordered: boolean;
  children: RichListItemNode[];
};

type RichBlockNode = RichParagraphNode | RichListNode;