v3.12.0

View on GitHub

Release Notes

v3.12.0 of the tldraw SDK includes several bug fixes and API improvements. The main feature development focus was on accessibility, building on initial work in v3.11.0 which added a focus ring.

Accessibility features

  • You can now move your selection between shapes using the keyboard (using Tab and Cmd/Ctrl+Arrow) (#5761)
  • Screen reader support for tool changes (#5634)
  • Screen reader support for shape selection changes (#5773)
  • Shapes can now be resized using the keyboard (using Cmd/Ctrl+Alt+Shift with the +/- keys) (#5826)
  • More of our UI elements have the correct role applied, and use the correct semantic html5 tags (#5847)

Accessibility is something we’ve been researching internally for a while now, investing in some R&D projects to see what’s possible on a 2D canvas. We’re continuing to mature our processes around accessibility with an eye on achieving WCAG in the near future.

API additions

  • Frames can now have color. Set the showColors option on the FrameShapeUtil class to display colorful borders and labels for frames. (#5283)

    import { FrameShapeUtil, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

const shapeUtils = [FrameShapeUtil.configure({ showColors: true })]

export default function App() {
	return (
		`<div className="tldraw__editor">`
			<Tldraw shapeUtils={shapeUtils}>`</Tldraw>`
		`</div>`
	)
}

  • There’s a new getShapeVisibility prop to replace isShapeHidden, which is now deprecated. getShapeVisibility allows a child of a hidden parent to override its parent and become visible. See the Layer Panel Example. (#5762)

  • The Geometry2d class has a couple of new helper methods for calculating intersection points (intersectLineSegment and intersectCircle), a new helper method for applying a transformation matrix (transform), and new filtering options to allow excluding certain parts of geometry from calculations. (#5754)

  • We now individually export two of our default Tiptap extensions (for rich text) (#5874)

    • KeyboardShiftEnterTweakExtension which inserts a normal line break when pressing shift+enter (tldraw doesn’t support soft breaks).
    • TextDirection which ensures the text directionality is saved and reinstated correctly.

Other improvements

  • The syntax for defining keyboard shortcuts is now more intuitive (#5605)
  • Store.mergeRemoteChanges is now atomic, and side effects are triggered in the correct scopes. (#5801)
  • Drawing is now smoother on slower CPUs by using getCoalescedEvents. (#5898)
  • We now allow overriding the asset urls for the icons used by the Embed shape to be null/empty in cases where the Embed shape is not needed. This prevents tldraw downloading a handful of icon assets that would never be used. (#5736)
  • YouTube embeds now support the t/start/loop parameters. (#5726)

Bug fixes

  • SVGs can now be pasted in Firefox. (#5789)
  • Text exports from pages that include TailwindCSS no longer have unexpected borders. (#5792)
  • Pasting images now triggers just one ‘create’ effect per image shape, before it would trigger a ‘create’ and then immediately an ‘update’. (#5800)
  • Pasting shapes from Miro no longer crashes tldraw. (#5790)
  • Setting zoomSpeed in camera options no longer breaks zooming on safari trackpads and multitouch pinch to zoom. (#5771)
  • Fix a minor style issue in the PeopleMenu component. (#5753)
  • Resolve some performance regressions related to rich text. (#5743) (#5735) (#5734)
  • Group2D.getSvgPathData() now sets the starting points of its children correctly. (#5580)
  • Resolve a performance regression related to drawing on an iPad (#5888)
  • Prevent a crash when trying to render UI for tools that have been removed (#5849)

Breaking changes

No breaking changes!

Authors

Prev
v3.13.0
Next
v3.11.0