v3.15.0

View on GitHub

This release adds npm create tldraw to bootstrap new tldraw projects. It also includes several small API additions, accessibility improvements, performance optimizations, and various bug fixes.

npm create tldraw

You can now run npm create tldraw in your terminal to bootstrap a new tldraw project from our starter templates.

Breaking changes

There are no breaking changes in this release.

User-facing changes

• Improve the 'Select All' action to select within the common parent of the current selection. For example, if you select a shape within a frame, it will select all the shapes within that frame but not the frame itself. (#6386)

• Add a user preference option to turn off keyboard shortcuts. (#6363)

API additions

• Add several new ShapeUtil callbacks for handle interactions. (#6489)

  • Handle drag start and end callbacks: onHandleDragStart and onHandleDragEnd.
  • Interaction cancellation callbacks: onTranslateCancel, onResizeCancel, onRotateCancel, and onHandleDragCancel.

• Allow custom JSX for icons in UI components. (#6486)

  This applies to tool and action overrides as well as our button and menu item components.

• Add the StateNode.addChild method for dynamically adding functionality to tools. (#6485)

• The DefaultSpinner component is now an SVG, and accepts SVG props like width, height, and className. (#6459)

• Add a missing export of HeartToolbarItem. (#6438)

Bug fixes

• Fix HTML entities escaping in pasted content. (#6396)

• Fix measurement of fixed-size text shapes and labels. (#6423)

• Fix an issue where text measurement could be wrong due to styles being leaked between measurements. (#6419)

• Fix an issue that would cause arrows between circles to sometimes render incorrectly. (#6417)

• Fix text outline rendering in exported SVGs. (#6371)

• Fix some edge cases where errors were thrown after reaching the maximum number of shapes. (#6359)

• Fix image toolbar reacting to camera movement. (#6375)

• Update fractional-indexing-jittered to address an issue with certain null values. See this PR. (#6479)

Performance improvements

• Prevent unnecessarily dropped frames. (#6464) (#6409)

• Optimize the useValue hook. (#6405)

• Optimize the useReactor hook. (#6383)

• Optimize frame rendering performance. (#6415)

Accessibility improvements

• Apply aria-hidden to more elements, and in more intelligent ways. (#6471) (#6437)

• Improve keyboard navigation. (#6446)

• Set role="radiogroup" on the ToggleGroup component. (#6435)

• Fix aria slider values and make dialogs scrollable via keyboard. (#6431)

• Fix several other minor accessibility issues. (#6358)

Other improvements

• Show max shapes alert when duplicating shapes. (#6411)

• Hide cropping toolbar while cropping. (#6376)