Text utilities

Utilities for working with text, rich text, and text formatting in tldraw.

Text utilities provide functions for rendering, converting, and manipulating text content in tldraw.

Rich text rendering

renderHtmlFromRichText

Renders HTML from a rich text object.

function renderHtmlFromRichText(
  editor: Editor,
  richText: TLRichText
): string

editor · Editor · required

The editor instance.

richText · TLRichText · required

The rich text content to render.

Returns: HTML string representation of the rich text.

Example

import { renderHtmlFromRichText } from 'tldraw'

const html = renderHtmlFromRichText(editor, richTextContent)
// Returns: '<p dir="auto">Hello <strong>world</strong></p>'

renderHtmlFromRichTextForMeasurement

Renders HTML from rich text wrapped in a measurement container.

function renderHtmlFromRichTextForMeasurement(
  editor: Editor,
  richText: TLRichText
): string

editor · Editor · required

The editor instance.

richText · TLRichText · required

The rich text content to render.

Returns: HTML string wrapped in a div with the tl-rich-text class for measurement purposes.

Example

import { renderHtmlFromRichTextForMeasurement } from 'tldraw'

const html = renderHtmlFromRichTextForMeasurement(editor, richTextContent)
// Returns: '<div class="tl-rich-text"><p dir="auto">Hello world</p></div>'

renderPlaintextFromRichText

Extracts plaintext from a rich text object.

function renderPlaintextFromRichText(
  editor: Editor,
  richText: TLRichText
): string

editor · Editor · required

The editor instance.

richText · TLRichText · required

The rich text content to convert.

Returns: Plain text string with formatting removed.

Example

import { renderPlaintextFromRichText } from 'tldraw'

const plaintext = renderPlaintextFromRichText(editor, richTextContent)
// Returns: 'Hello world' (no HTML formatting)

renderRichTextFromHTML

Converts HTML to rich text format.

function renderRichTextFromHTML(
  editor: Editor,
  html: string
): TLRichText

editor · Editor · required

The editor instance.

html · string · required

The HTML string to convert.

Returns: A TLRichText object.

Example

import { renderRichTextFromHTML } from 'tldraw'

const richText = renderRichTextFromHTML(
  editor,
  '<p>Hello <strong>world</strong></p>'
)

Text utilities

isRightToLeftLanguage

Detects if text contains right-to-left language characters.

function isRightToLeftLanguage(text: string): boolean

text · string · required

The text to check.

Returns: true if the text contains RTL characters (Arabic, Hebrew, etc.), false otherwise.

Example

import { isRightToLeftLanguage } from 'tldraw'

isRightToLeftLanguage('Hello') // false
isRightToLeftLanguage('مرحبا') // true (Arabic)
isRightToLeftLanguage('שלום') // true (Hebrew)

convertCommonTitleHTMLEntities

Converts common HTML entities found in web page titles to regular characters.

function convertCommonTitleHTMLEntities(text: string): string

text · string · required

The text containing HTML entities.

Returns: Text with HTML entities converted to their character equivalents.

Example

import { convertCommonTitleHTMLEntities } from 'tldraw'

convertCommonTitleHTMLEntities('This & that')
// Returns: 'This & that'

convertCommonTitleHTMLEntities('Quote: "hello"')
// Returns: 'Quote: "hello"'

convertCommonTitleHTMLEntities('Em dash — here')
// Returns: 'Em dash — here'

truncateStringWithEllipsis

Truncates a string to a maximum length and adds ellipsis if needed.

function truncateStringWithEllipsis(
  str: string,
  maxLength: number
): string

str · string · required

The string to truncate.

maxLength · number · required

The maximum length including the ellipsis.

Returns: The truncated string with ’…’ appended if it exceeds maxLength.

Example

import { truncateStringWithEllipsis } from 'tldraw'

truncateStringWithEllipsis('Hello world', 8)
// Returns: 'Hello...'

truncateStringWithEllipsis('Hello', 10)
// Returns: 'Hello'

TipTap extensions

tipTapDefaultExtensions

Default TipTap extensions used by the tldraw editor for rich text editing.

const tipTapDefaultExtensions: Extensions

Includes:

• StarterKit (paragraph, bold, italic, links, lists, etc.)
• Highlight extension for text highlighting
• KeyboardShiftEnterTweakExtension for handling Shift+Enter
• TextDirection extension for automatic text direction

Example

import { tipTapDefaultExtensions } from 'tldraw'

// Use default extensions
const extensions = tipTapDefaultExtensions

// Or customize by filtering/adding extensions
const customExtensions = [
  ...tipTapDefaultExtensions,
  MyCustomExtension
]

Font management

defaultAddFontsFromNode

Visitor function for extracting font information from rich text nodes.

function defaultAddFontsFromNode(
  node: Node,
  state: RichTextFontVisitorState,
  addFont: (font: TLFontFace) => void
): RichTextFontVisitorState

node · Node · required

The TipTap Node to process.

state · RichTextFontVisitorState · required

Current font visitor state (family, style, weight).

addFont · (font: TLFontFace) => void · required

Callback to register a font face.

Returns: Updated font visitor state.

Example

import { defaultAddFontsFromNode } from 'tldraw'

const fonts = new Set()
const addFont = (font) => fonts.add(font)

let state = { family: 'tldraw_draw', style: 'normal', weight: 'normal' }
state = defaultAddFontsFromNode(node, state, addFont)