TextManager • tldraw Docs

Table of contents

baseElm
editor
Properties
Methods

class TextManager {}

Constructor

Constructs a new instance of the TextManager class

Parameters

Name	Description
`editor`	`Editor`

Properties

baseElm

baseElm: HTMLDivElement

editor

editor: Editor

Methods

measureElementTextNodeSpans()

Given an html element, measure the position of each span of unbroken word/white-space characters within any text nodes it contains.

measureElementTextNodeSpans(
  element: HTMLElement,
  {
    shouldTruncateToFirstLine,
  }?: {
    shouldTruncateToFirstLine?: boolean
  }
): {
  didTruncate: boolean
  spans: {
    box: BoxModel
    text: string
  }[]
}

Parameters

Name	Description
`element`	`HTMLElement`
`{ shouldTruncateToFirstLine }`	`{ shouldTruncateToFirstLine?: boolean }`

Returns

{
  didTruncate: boolean
  spans: {
    box: BoxModel
    text: string
  }[]
}

measureText()

measureText(
  textToMeasure: string,
  opts: {
    maxWidth: null | number
    disableOverflowWrapBreaking?: boolean
    fontFamily: string
    fontSize: number
    fontStyle: string
    fontWeight: string
    lineHeight: number
    minWidth?: null | number
    padding: string
  }
): BoxModel & {
  scrollWidth: number
}

Parameters

Name Description

textToMeasure

string

opts

{
  maxWidth: null | number
  disableOverflowWrapBreaking?: boolean
  fontFamily: string
  fontSize: number
  fontStyle: string
  fontWeight: string
  lineHeight: number
  minWidth?: null | number
  padding: string
}

Returns

BoxModel & {
  scrollWidth: number
}

measureTextSpans()

Measure text into individual spans. Spans are created by rendering the text, then dividing it up according to line breaks and word boundaries.

It works by having the browser render the text, then measuring the position of each character. You can use this to replicate the text-layout algorithm of the current browser in e.g. an SVG export.

measureTextSpans(
  textToMeasure: string,
  opts: TLMeasureTextSpanOpts
): {
  box: BoxModel
  text: string
}[]

Parameters

Name	Description
`textToMeasure`	`string`
`opts`	`TLMeasureTextSpanOpts`

Returns

{
  box: BoxModel
  text: string
}[]