Rich text (Lexical)

The composer and formatted message bubbles use Lexical - bundled, nothing to install.

Installation - host app

Who	What to install
Your app (Elstar, Vite, Next.js, …)	@realtimexsco/live-chat + peers only (react, react-dom)
Lexical in your app's package.json	Nothing - bundled inside @realtimexsco/live-chat
The npm package itself (maintainers)	lexical, @lexical/*, dompurify in dependencies

Don't add lexical or @lexical/*to your package.json unless you build your own editor outside this package. Confirm it's present after install:

shell

npm ls lexical @lexical/react dompurify

Bundled Lexical packages

Package	Used for
lexical	Core editor API
@lexical/react	LexicalComposer, plugins, hooks
@lexical/rich-text	Headings, quotes
@lexical/list	Bullet / numbered lists
@lexical/link	Links
@lexical/code	Inline and block code
@lexical/html	HTML export/import ($generateHtmlFromNodes, $generateNodesFromDOM)
@lexical/markdown	Optional markdown source mode in the composer
@lexical/selection	Block-type toolbar commands
@lexical/utils	Node helpers
dompurify	Sanitize HTML before send / display

How formatted messages are stored

The backend persists one field: content.

Plain messages → plain text in content
Formatted messages → sanitized HTML in content (no extra contentHtml key)

Display uses MessageLexicalViewer: the HTML is imported into a read-only Lexical editor sharing the composer's theme and nodes, so formatting comes from Lexical theme classes, not hand-written CSS.

Exports for custom UI

tsx

1import {2  ComposerLexicalEditor,3  MessageLexicalViewer,4  type ComposerLexicalEditorHandle,5  type MessageLexicalViewerProps,6} from "@realtimexsco/live-chat";

Use MessageLexicalViewer in a custom MessageItem slot to keep Lexical-accurate rendering:

tsx

<MessageLexicalViewer html={messageHtml} messageId={message.id} />

Rich text (Lexical)

The composer and formatted message bubbles use Lexical - bundled, nothing to install.

Installation - host app

Who	What to install
Your app (Elstar, Vite, Next.js, …)	@realtimexsco/live-chat + peers only (react, react-dom)
Lexical in your app's package.json	Nothing - bundled inside @realtimexsco/live-chat
The npm package itself (maintainers)	lexical, @lexical/*, dompurify in dependencies

Don't add lexical or @lexical/*to your package.json unless you build your own editor outside this package. Confirm it's present after install:

shell

npm ls lexical @lexical/react dompurify

Bundled Lexical packages

Package	Used for
lexical	Core editor API
@lexical/react	LexicalComposer, plugins, hooks
@lexical/rich-text	Headings, quotes
@lexical/list	Bullet / numbered lists
@lexical/link	Links
@lexical/code	Inline and block code
@lexical/html	HTML export/import ($generateHtmlFromNodes, $generateNodesFromDOM)
@lexical/markdown	Optional markdown source mode in the composer
@lexical/selection	Block-type toolbar commands
@lexical/utils	Node helpers
dompurify	Sanitize HTML before send / display

How formatted messages are stored

The backend persists one field: content.

Plain messages → plain text in content
Formatted messages → sanitized HTML in content (no extra contentHtml key)

Display uses MessageLexicalViewer: the HTML is imported into a read-only Lexical editor sharing the composer's theme and nodes, so formatting comes from Lexical theme classes, not hand-written CSS.

Exports for custom UI

tsx

1import {2  ComposerLexicalEditor,3  MessageLexicalViewer,4  type ComposerLexicalEditorHandle,5  type MessageLexicalViewerProps,6} from "@realtimexsco/live-chat";

Use MessageLexicalViewer in a custom MessageItem slot to keep Lexical-accurate rendering:

tsx

<MessageLexicalViewer html={messageHtml} messageId={message.id} />