Editor

class Editor extends EventEmitter<TLEventMap> {}

bindingUtils: {
  readonly [K in string]?: BindingUtil<TLUnknownBinding>
}

readonly contextId: string

readonly disposables: Set<() => void>

edgeScrollManager: EdgeScrollManager

readonly fonts: FontManager

getContainer: () => HTMLElement

const container = editor.getContainer()

protected readonly history: HistoryManager<TLRecord>

readonly id: string

inputs: {
  buttons: Set<number>
  keys: Set<string>
  originScreenPoint: Vec
  originPagePoint: Vec
  currentScreenPoint: Vec
  currentPagePoint: Vec
  previousScreenPoint: Vec
  previousPagePoint: Vec
  pointerVelocity: Vec
  altKey: boolean
  ctrlKey: boolean
  isPen: boolean
  metaKey: boolean
  shiftKey: boolean
  isDragging: boolean
  isEditing: boolean
  isPanning: boolean
  isPinching: boolean
  isPointing: boolean
  isSpacebarPanning: boolean
}

isDisposed: boolean

menus: {
  addOpenMenu: (id: string) => void
  clearOpenMenus: () => void
  deleteOpenMenu: (id: string) => void
  getOpenMenus: () => string[]
  hasAnyOpenMenus: () => boolean
  hasOpenMenus: () => boolean
  isMenuOpen: (id: string) => boolean
}

readonly options: TldrawOptions

readonly root: StateNode

readonly scribbles: ScribbleManager

shapeUtils: {
  readonly [K in string]?: ShapeUtil<TLUnknownShape>
}

readonly sideEffects: StoreSideEffects<TLRecord>

readonly snaps: SnapManager

readonly store: TLStore

styleProps: {
  [key: string]: Map<StyleProp<any>, string>
}

readonly textMeasure: TextManager

readonly timers: {
  dispose: () => void
  requestAnimationFrame: (callback: FrameRequestCallback) => number
  setInterval: (
    handler: TimerHandler,
    timeout?: number,
    ...args: any[]
  ) => number
  setTimeout: (
    handler: TimerHandler,
    timeout?: number,
    ...args: any[]
  ) => number
}

readonly user: UserPreferencesManager

alignShapes(
  shapes: TLShape[] | TLShapeId[],
  operation:
    | 'bottom'
    | 'center-horizontal'
    | 'center-vertical'
    | 'left'
    | 'right'
    | 'top'
): this

editor.alignShapes([box1, box2], 'left')
editor.alignShapes(editor.getSelectedShapeIds(), 'left')

this

animateShape(
  partial: null | TLShapePartial | undefined,
  opts?: TLCameraMoveOptions
): this

editor.animateShape({ id: 'box1', type: 'box', x: 100, y: 100 })
editor.animateShape(
  { id: 'box1', type: 'box', x: 100, y: 100 },
  { animation: { duration: 100, ease: (t) => t * t } }
)

this

animateShapes(
  partials: (null | TLShapePartial | undefined)[],
  opts?: TLCameraMoveOptions
): this

editor.animateShapes([{ id: 'box1', type: 'box', x: 100, y: 100 }])
editor.animateShapes([{ id: 'box1', type: 'box', x: 100, y: 100 }], {
  animation: { duration: 100, ease: (t) => t * t },
})

this

bail(): this

editor.bail()

bailToMark(id: string): this

const beginDrag = editor.markHistoryStoppingPoint()
// ... some changes
editor.bailToMark(beginDrag)

this

blur({ blurContainer }?: { blurContainer?: boolean | undefined }): this

editor.blur()

editor.blur({ blurContainer: false })

this

bringForward(
  shapes: TLShape[] | TLShapeId[],
  opts?: {
    considerAllShapes?: boolean
  }
): this

editor.bringForward(['id1', 'id2'])
editor.bringForward(box1, box2)

editor.bringForward(['id1', 'id2'], { considerAllShapes: true })

this

bringToFront(shapes: TLShape[] | TLShapeId[]): this

editor.bringToFront(['id1', 'id2'])
editor.bringToFront([box1, box2])

this

canBindShapes({
  fromShape,
  toShape,
  binding,
}: {
  binding:
    | {
        type: TLBinding['type']
      }
    | TLBinding
    | TLBinding['type']
  fromShape:
    | {
        type: TLShape['type']
      }
    | TLShape
    | TLShape['type']
  toShape:
    | {
        type: TLShape['type']
      }
    | TLShape
    | TLShape['type']
}): boolean

boolean

cancel(): this

editor.cancel()

cancelDoubleClick(): void

canCreateShape<T extends TLUnknownShape>(
  shape: OptionalKeys<TLShapePartial<T>, 'id'> | T['id']
): boolean

boolean

canCreateShapes<T extends TLUnknownShape>(
  shapes: (OptionalKeys<TLShapePartial<T>, 'id'> | T['id'])[]
): boolean

boolean

centerOnPoint(point: VecLike, opts?: TLCameraMoveOptions): this

editor.centerOnPoint({ x: 100, y: 100 })
editor.centerOnPoint({ x: 100, y: 100 }, { animation: { duration: 200 } })

this

clearHistory(): this

complete(): this

editor.complete()

createAssets(assets: TLAsset[]): this

editor.createAssets([...myAssets])

this

createBinding<B extends TLBinding = TLBinding>(
  partial: TLBindingCreate<B>
): this

this

createBindings<B extends TLBinding = TLBinding>(
  partials: TLBindingCreate<B>[]
): this

this

createDeepLink(opts?: {
  param?: string
  to?: TLDeepLink
  url?: string | URL
}): URL

// create a deep link to the current page + viewport
navigator.clipboard.writeText(editor.createDeepLink())

// create a deep link to the set of currently selected shapes
navigator.clipboard.writeText(
  editor.createDeepLink({
    to: { type: 'selection', shapeIds: editor.getSelectedShapeIds() },
  })
)

// Use `x` as the param name instead
editor.createDeepLink({ param: 'x' })

URL

createPage(page: Partial<TLPage>): this

editor.createPage(myPage)
editor.createPage({ name: 'Page 2' })

this

createShape<T extends TLUnknownShape>(
  shape: OptionalKeys<TLShapePartial<T>, 'id'>
): this

editor.createShape(myShape)
editor.createShape({
  id: 'box1',
  type: 'text',
  props: { richText: toRichText('ok') },
})

this

createShapes<T extends TLUnknownShape>(
  shapes: OptionalKeys<TLShapePartial<T>, 'id'>[]
): this

editor.createShapes([myShape])
editor.createShapes([
  { id: 'box1', type: 'text', props: { richText: toRichText('ok') } },
])

this

createTemporaryAssetPreview(
  assetId: TLAssetId,
  file: File
): string | undefined

editor.createTemporaryAssetPreview(assetId, file)

string | undefined

deleteAssets(assets: TLAsset[] | TLAssetId[]): this

editor.deleteAssets(['asset1', 'asset2'])

this

deleteBinding(
  binding: TLBinding | TLBindingId,
  opts?: Parameters<this['deleteBindings']>[1]
): this

this

deleteBindings(
  bindings: (TLBinding | TLBindingId)[],
  {
    isolateShapes,
  }?: {
    isolateShapes?: boolean | undefined
  }
): this

this

deletePage(page: TLPage | TLPageId): this

editor.deletePage('page1')

this

deleteShape(id: TLShapeId): this

editor.deleteShape(shape.id)

this

deleteShapes(ids: TLShapeId[]): this

editor.deleteShapes(['box1', 'box2'])

this

deselect(...shapes: TLShape[] | TLShapeId[]): this

editor.deselect(shape.id)

this

dispatch(info: TLEventInfo): this

editor.dispatch(myPointerEvent)

this

dispose(): void

distributeShapes(
  shapes: TLShape[] | TLShapeId[],
  operation: 'horizontal' | 'vertical'
): this

editor.distributeShapes([box1, box2], 'horizontal')
editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')

this

duplicatePage(page: TLPage | TLPageId, createId?: TLPageId): this

this

duplicateShapes(shapes: TLShape[] | TLShapeId[], offset?: VecLike): this

editor.duplicateShapes(['box1', 'box2'], { x: 8, y: 8 })
editor.duplicateShapes(editor.getSelectedShapes(), { x: 8, y: 8 })

this

findCommonAncestor(
  shapes: TLShape[] | TLShapeId[],
  predicate?: (shape: TLShape) => boolean
): TLShapeId | undefined

TLShapeId | undefined

findShapeAncestor(
  shape: TLShape | TLShapeId,
  predicate: (parent: TLShape) => boolean
): TLShape | undefined

const ancestor = editor.findShapeAncestor(myShape)
const ancestor = editor.findShapeAncestor(myShape.id)
const ancestor = editor.findShapeAncestor(
  myShape.id,
  (shape) => shape.type === 'frame'
)

TLShape | undefined

flipShapes(
  shapes: TLShape[] | TLShapeId[],
  operation: 'horizontal' | 'vertical'
): this

editor.flipShapes([box1, box2], 'horizontal', 32)
editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal', 32)

this

focus({ focusContainer }?: { focusContainer?: boolean | undefined }): this

editor.focus()

editor.focus({ focusContainer: false })

this

getAncestorPageId(shape?: TLShape | TLShapeId): TLPageId | undefined

TLPageId | undefined

getAsset<T extends TLAsset>(asset: T | T['id']): T | undefined

editor.getAsset('asset1')

T | undefined

getAssetForExternalContent(
  info: TLExternalAsset
): Promise<TLAsset | undefined>

const asset = await editor.getAssetForExternalContent({
  type: 'file',
  file: myFile,
})
const asset = await editor.getAssetForExternalContent({
  type: 'url',
  url: myUrl,
})

Promise<TLAsset | undefined>

getAssets(): (
  | import('@tldraw/tlschema').TLBookmarkAsset
  | TLImageAsset
  | TLVideoAsset
)[]

getBaseZoom(): number

editor.getBaseZoom()

getBinding(id: TLBindingId): TLBinding | undefined

TLBinding | undefined

getBindingsFromShape<Binding extends TLUnknownBinding = TLBinding>(
  shape: TLShape | TLShapeId,
  type: Binding['type']
): Binding[]

Binding[]

getBindingsInvolvingShape<Binding extends TLUnknownBinding = TLBinding>(
  shape: TLShape | TLShapeId,
  type?: Binding['type']
): Binding[]

Binding[]

getBindingsToShape<Binding extends TLUnknownBinding = TLBinding>(
  shape: TLShape | TLShapeId,
  type: Binding['type']
): Binding[]

Binding[]

getBindingUtil<S extends TLUnknownBinding>(
  binding:
    | {
        type: S['type']
      }
    | S
): BindingUtil<S>

const util = editor.getBindingUtil(myArrowBinding)
const util = editor.getBindingUtil('arrow')
const util = editor.getBindingUtil<TLArrowBinding>(myArrowBinding)
const util = editor.getBindingUtil(TLArrowBinding)('arrow')

BindingUtil<S>

getCamera(): TLCamera

getCameraOptions(): TLCameraOptions

editor.getCameraOptions()

getCameraState(): 'idle' | 'moving'

editor.getCameraState()

getCanRedo(): boolean

getCanUndo(): boolean

getCollaborators(): TLInstancePresence[]

getCollaboratorsOnCurrentPage(): TLInstancePresence[]

getContentFromCurrentPage(
  shapes: TLShape[] | TLShapeId[]
): TLContent | undefined

TLContent | undefined

getCroppingShapeId(): null | TLShapeId

getCulledShapes(): Set<TLShapeId>

getCurrentPage(): TLPage

editor.getCurrentPage()

getCurrentPageBounds(): Box | undefined

getCurrentPageId(): TLPageId

editor.getCurrentPageId()

getCurrentPageRenderingShapesSorted(): TLShape[]

getCurrentPageShapeIds(): Set<TLShapeId>

editor.getCurrentPageIds()

getCurrentPageShapes(): TLShape[]

getCurrentPageShapesInReadingOrder(): TLShape[]

getCurrentPageShapesSorted(): TLShape[]

getCurrentPageState(): TLInstancePageState

getCurrentTool(): StateNode

getCurrentToolId(): string

getDocumentSettings(): TLDocument

getDraggingOverShape(
  point: Vec,
  droppingShapes: TLShape[]
): TLShape | undefined

TLShape | undefined

getEditingShape(): TLShape | undefined

getEditingShapeId(): null | TLShapeId

getErasingShapeIds(): TLShapeId[]

getErasingShapes(): NonNullable<TLShape | undefined>[]

getFocusedGroup(): TLShape | undefined

getFocusedGroupId(): TLPageId | TLShapeId

getHighestIndexForParent(parent: TLPage | TLParentId | TLShape): IndexKey

IndexKey

getHintingShape(): NonNullable<TLShape | undefined>[]

getHintingShapeIds(): TLShapeId[]

getHoveredShape(): TLShape | undefined

getHoveredShapeId(): null | TLShapeId

getInitialMetaForShape(_shape: TLShape): JsonObject

editor.getInitialMetaForShape = (shape) => {
  if (shape.type === 'note') {
    return { createdBy: myCurrentUser.id }
  }
}

JsonObject

getInitialZoom(): number

editor.getInitialZoom()

getInstanceState(): TLInstance

getIsFocused(): boolean

getIsReadonly(): boolean

getNearestAdjacentShape(
  shapes: TLShape[],
  currentShapeId: TLShapeId,
  direction: 'down' | 'left' | 'right' | 'up'
): TLShapeId

TLShapeId

getNotVisibleShapes(): Set<TLShapeId>

getOnlySelectedShape(): null | TLShape

getOnlySelectedShapeId(): null | TLShapeId

getOutermostSelectableShape(
  shape: TLShape | TLShapeId,
  filter?: (shape: TLShape) => boolean
): TLShape

TLShape

getPage(page: TLPage | TLPageId): TLPage | undefined

editor.getPage(myPage.id)
editor.getPage(myPage)

TLPage | undefined

getPages(): TLPage[]

editor.getPages()

getPageShapeIds(page: TLPage | TLPageId): Set<TLShapeId>

const idsOnPage1 = editor.getPageShapeIds('page1')
const idsOnPage2 = editor.getPageShapeIds(myPage2)

Set<TLShapeId>

getPageStates(): TLInstancePageState[]

getPath(): string

editor.getPath() // "select.idle"

getPointInParentSpace(shape: TLShape | TLShapeId, point: VecLike): Vec

editor.getPointInParentSpace(myShape.id, { x: 100, y: 100 })

Vec

getPointInShapeSpace(shape: TLShape | TLShapeId, point: VecLike): Vec

editor.getPointInShapeSpace(myShape, { x: 100, y: 100 })

Vec

getRenderingShapes(): TLRenderingShape[]

editor.getRenderingShapes()

getRichTextEditor(): null | TiptapEditor

getSelectedShapeAtPoint(point: VecLike): TLShape | undefined

TLShape | undefined

getSelectedShapeIds(): TLShapeId[]

getSelectedShapes(): TLShape[]

getSelectionPageBounds(): Box | null

getSelectionRotatedPageBounds(): Box | undefined

getSelectionRotatedScreenBounds(): Box | undefined

getSelectionRotation(): number

getSelectionScreenBounds(): Box | undefined

getShape<T extends TLShape = TLShape>(
  shape: TLParentId | TLShape
): T | undefined

editor.getShape('box1')

T | undefined

getShapeAncestors(shape: TLShape | TLShapeId, acc?: TLShape[]): TLShape[]

const ancestors = editor.getShapeAncestors(myShape)
const ancestors = editor.getShapeAncestors(myShapeId)

TLShape[]

getShapeAndDescendantIds(ids: TLShapeId[]): Set<TLShapeId>

Set<TLShapeId>

getShapeAtPoint(
  point: VecLike,
  opts?: TLGetShapeAtPointOptions
): TLShape | undefined

TLShape | undefined

getShapeClipPath(shape: TLShape | TLShapeId): string | undefined

const clipPath = editor.getShapeClipPath(shape)
const clipPath = editor.getShapeClipPath(shape.id)

string | undefined

getShapeGeometry<T extends Geometry2d>(
  shape: TLShape | TLShapeId,
  opts?: TLGeometryOpts
): T

editor.getShapeGeometry(myShape)
editor.getShapeGeometry(myShapeId)
editor.getShapeGeometry(myShapeId, { context: 'arrow' })

T

getShapeHandles<T extends TLShape>(shape: T | T['id']): TLHandle[] | undefined

editor.getShapeHandles(myShape)
editor.getShapeHandles(myShapeId)

TLHandle[] | undefined

getShapeLocalTransform(shape: TLShape | TLShapeId): Mat

editor.getShapeLocalTransform(myShape)

Mat

getShapeMask(shape: TLShape | TLShapeId): undefined | VecLike[]

const pageMask = editor.getShapeMask(shape.id)