Bridge Training
Rich Text

lib

Serialization functions for converting RichText to and from other formats.

The lib barrel provides four conversion functions between RichText and string formats.

import { toHTML, fromHTML, toString, fromString } from '@workspace/rich-text/lib';

Functions

toHTML(blocks: RichText): string

Converts RichText to an HTML string with <p>, <b>, <i>, <ul>, <ol>, <li> tags. Suit nodes become Unicode glyphs. HTML entities are escaped.

toHTML([
  { type: 'paragraph', children: [
    { type: 'text', text: 'Play the ' },
    { type: 'suit', suit: 'S' },
    { type: 'text', text: 'A', bold: true },
  ]}
]);
// => '<p>Play the \u2660<b>A</b></p>'

fromHTML(html: string): RichText

Parses an HTML string back to RichText. Handles <b>, <i>, <p>, <ul>, <ol>, <li>, <span>, <br>, HTML entities, and suit glyphs.

fromHTML('<p>Play the <b>ace</b></p>');
// => [{ type: 'paragraph', children: [
//   { type: 'text', text: 'Play the ' },
//   { type: 'text', text: 'ace', bold: true },
// ]}]

toString(blocks: RichText): string

Converts RichText to plain text. Suit nodes become Unicode glyphs, formatting (bold/italic) is stripped, lists use - / 1. prefixes.

toString([
  { type: 'paragraph', children: [
    { type: 'text', text: 'Open 1' },
    { type: 'suit', suit: 'H' },
  ]}
]);
// => 'Open 1\u2665'

fromString(markdown: string): RichText

Parses a markdown string to RichText. Supports **bold**, *italic*, \S \H \D \C suit escapes, Unicode suit glyphs, and - / 1. lists.

fromString('Open 1\\H with **5+**');
// => [{ type: 'paragraph', children: [
//   { type: 'text', text: 'Open 1' },
//   { type: 'suit', suit: 'H' },
//   { type: 'text', text: ' with ' },
//   { type: 'text', text: '5+', bold: true },
// ]}]

Typical Patterns

Save editor content as HTML

const html = toHTML(editorRef.current.getValue());

Load HTML into editor

const richText = fromHTML(htmlFromServer);
editorRef.current.setValue(richText);

Display plain text preview

const preview = toString(editorRef.current.getValue());

On this page