tldraw 4.3.0-canary.e5f56251a468 → 4.3.0-canary.ea88b223b83a

package/src/lib/ui.css

@@ -609,25 +609,31 @@
 
 /* Submenu triggers */
 
-.tlui-menu__submenu__trigger[data-state='open']::after {
-	opacity: 1;
-	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+.tlui-menu__submenu__trigger {
+	--gradient-angle: 90deg;
 }
 
-.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
+.tlui-menu__submenu__trigger[data-direction='left'] {
+	--gradient-angle: 270deg;
+}
+
+.tlui-menu__submenu__trigger[data-state='open']::after {
 	opacity: 1;
-	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	background: linear-gradient(
+		var(--gradient-angle),
+		rgba(144, 144, 144, 0) 0%,
+		var(--tl-color-muted-2) 100%
+	);
 }
 
 @media (hover: hover) {
-	.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
+	.tlui-menu__submenu__trigger:is(:hover, [data-state='open'])::after {
 		opacity: 1;
-		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
-	}
-
-	.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
-		opacity: 1;
-		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+		background: linear-gradient(
+			var(--gradient-angle),
+			rgba(144, 144, 144, 0) 0%,
+			var(--tl-color-muted-2) 100%
+		);
 	}
 }
 
@@ -906,10 +912,8 @@
 	}
 }
 
-@media (any-pointer: coarse) {
-	.tlui-page_menu__item__submenu > .tlui-button {
-		opacity: 1;
-	}
+.tl-container[data-coarse='true'] .tlui-page_menu__item__submenu > .tlui-button {
+	opacity: 1;
 }
 
 .tlui-button__icon {
@@ -948,16 +952,15 @@
 
 .tlui-offline-indicator {
 	display: flex;
-	flex-direction: row;
-	gap: var(--tl-space-3);
-	color: var(--tl-color-text);
-	background-color: var(--tl-color-low);
-	border: 3px solid var(--tl-color-background);
-	padding: 0px var(--tl-space-5);
-	height: 42px;
+	color: var(--tl-color-background);
+	background-color: var(--tl-color-text);
+	border: none;
+	width: 32px;
+	height: 32px;
 	align-items: center;
 	justify-content: center;
 	border-radius: 99px;
+	cursor: default;
 	opacity: 0;
 	animation: tl-fade-in;
 	animation-duration: 0.12s;
@@ -1275,6 +1278,7 @@ tldraw? probably.
 	position: relative;
 	background: var(--tl-color-panel);
 	box-shadow: var(--tl-shadow-2);
+	contain: layout style paint;
 }
 
 .tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {

package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap

@@ -730,20 +730,11 @@ exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
       "isComplete": false,
       "isPen": false,
       "scale": 1,
+      "scaleX": 1,
+      "scaleY": 1,
       "segments": [
         {
-          "points": [
-            {
-              "x": 0,
-              "y": 0,
-              "z": 0.5,
-            },
-            {
-              "x": 0.0001,
-              "y": 0.0001,
-              "z": 0.5,
-            },
-          ],
+          "points": "AAAAAAA4jgaOBgA4",
           "type": "free",
         },
       ],
@@ -770,20 +761,11 @@ exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
       "isComplete": false,
       "isPen": false,
       "scale": 1,
+      "scaleX": 1,
+      "scaleY": 1,
       "segments": [
         {
-          "points": [
-            {
-              "x": 0,
-              "y": 0,
-              "z": 0.5,
-            },
-            {
-              "x": 0.0001,
-              "y": 0.0001,
-              "z": 0.5,
-            },
-          ],
+          "points": "AAAAAAA4jgaOBgA4",
           "type": "free",
         },
       ],
@@ -1393,20 +1375,11 @@ exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
       "isComplete": false,
       "isPen": false,
       "scale": 1,
+      "scaleX": 1,
+      "scaleY": 1,
       "segments": [
         {
-          "points": [
-            {
-              "x": 0,
-              "y": 0,
-              "z": 0.5,
-            },
-            {
-              "x": 0.0001,
-              "y": 0.0001,
-              "z": 0.5,
-            },
-          ],
+          "points": "AAAAAAA4jgaOBgA4",
           "type": "free",
         },
       ],
@@ -1433,20 +1406,11 @@ exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
       "isComplete": false,
       "isPen": false,
       "scale": 1,
+      "scaleX": 1,
+      "scaleY": 1,
       "segments": [
         {
-          "points": [
-            {
-              "x": 0,
-              "y": 0,
-              "z": 0.5,
-            },
-            {
-              "x": 0.0001,
-              "y": 0.0001,
-              "z": 0.5,
-            },
-          ],
+          "points": "AAAAAAA4jgaOBgA4",
           "type": "free",
         },
       ],

package/src/lib/utils/excalidraw/putExcalidrawContent.ts

@@ -16,7 +16,9 @@ import {
 	TLShapeId,
 	Vec,
 	VecLike,
+	VecModel,
 	ZERO_INDEX_KEY,
+	b64Vecs,
 	compact,
 	createBindingId,
 	createShapeId,
@@ -149,6 +151,13 @@ export async function putExcalidrawContent(
 				break
 			}
 			case 'freedraw': {
+				const points: VecModel[] = element.points.map(([x, y, z = 0.5]: number[]) => ({
+					x,
+					y,
+					z,
+				}))
+				const base64Points = b64Vecs.encodePoints(points)
+
 				tldrawContent.shapes.push({
 					...base,
 					type: 'draw',
@@ -160,11 +169,7 @@ export async function putExcalidrawContent(
 						segments: [
 							{
 								type: 'free',
-								points: element.points.map(([x, y, z = 0.5]: number[]) => ({
-									x,
-									y,
-									z,
-								})),
+								points: base64Points,
 							},
 						],
 					},
@@ -329,7 +334,7 @@ export async function putExcalidrawContent(
 		index = getIndexAbove(index)
 	}
 
-	const p = point ?? (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : undefined)
+	const p = point ?? (editor.inputs.getShiftKey() ? editor.inputs.getCurrentPagePoint() : undefined)
 
 	editor.putContentOntoCurrentPage(tldrawContent, {
 		point: p,

package/src/lib/utils/test-helpers.ts

@@ -0,0 +1,60 @@
+import type { TLDrawShapeSegment, VecModel } from '@tldraw/editor'
+import { b64Vecs, compressLegacySegments } from '@tldraw/editor'
+
+/**
+ * Helper function to convert draw shape points from VecModel[] to base64 string.
+ * This is useful for tests that create draw shapes with the legacy array format.
+ *
+ * @example
+ * ```ts
+ * const segments = [{ type: 'free', points: pointsToBase64([{x: 0, y: 0, z: 0.5}]) }]
+ * ```
+ *
+ * @public
+ */
+export function pointsToBase64(points: VecModel[]): string {
+	return b64Vecs.encodePoints(points)
+}
+
+/**
+ * Helper function to convert base64 string back to VecModel[] points.
+ * This is useful for tests that need to inspect draw shape points.
+ *
+ * @example
+ * ```ts
+ * const points = base64ToPoints(shape.props.segments[0].points)
+ * expect(points[0].x).toBe(0)
+ * ```
+ *
+ * @public
+ */
+export function base64ToPoints(base64: string): VecModel[] {
+	return b64Vecs.decodePoints(base64)
+}
+
+/**
+ * Helper function to create draw shape segments from legacy array format.
+ * This allows tests to use the old format while the shape uses the new base64 format.
+ *
+ * @example
+ * ```ts
+ * editor.createShapes([{
+ *   type: 'draw',
+ *   props: {
+ *     segments: createDrawSegments([[{x: 0, y: 0}, {x: 10, y: 10}]])
+ *   }
+ * }])
+ * ```
+ * @public
+ */
+export function createDrawSegments(
+	pointArrays: VecModel[][],
+	type: 'free' | 'straight' = 'free'
+): TLDrawShapeSegment[] {
+	return compressLegacySegments(
+		pointArrays.map((points) => ({
+			type,
+			points,
+		}))
+	)
+}

package/src/lib/utils/text/richText.ts

@@ -1,15 +1,16 @@
 import {
 	Extension,
 	Extensions,
+	extensions,
 	generateHTML,
 	generateJSON,
 	generateText,
 	JSONContent,
 } from '@tiptap/core'
-import Code from '@tiptap/extension-code'
-import Highlight from '@tiptap/extension-highlight'
+import { Code } from '@tiptap/extension-code'
+import { Highlight } from '@tiptap/extension-highlight'
 import { Node } from '@tiptap/pm/model'
-import StarterKit from '@tiptap/starter-kit'
+import { StarterKit } from '@tiptap/starter-kit'
 import {
 	Editor,
 	getOwnProperty,
@@ -19,7 +20,6 @@ import {
 	WeakCache,
 } from '@tldraw/editor'
 import { DefaultFontFaces } from '../../shapes/shared/defaultFonts'
-import { TextDirection } from './textDirection'
 
 /** @public */
 export const KeyboardShiftEnterTweakExtension = Extension.create({
@@ -59,7 +59,11 @@ export const tipTapDefaultExtensions: Extensions = [
 	}),
 	Highlight,
 	KeyboardShiftEnterTweakExtension,
-	TextDirection,
+
+	// N.B. We disable the text direction core extension in RichTextArea,
+	// but we add it back in again here in our own extensions list so that
+	// people can omit/override it if they want to.
+	extensions.TextDirection.configure({ direction: 'auto' }),
 ]
 
 // todo: bust this if the editor changes, too
@@ -88,7 +92,6 @@ export function renderHtmlFromRichText(editor: Editor, richText: TLRichText) {
  * @param editor - The editor instance.
  * @param richText - The rich text content.
  *
- *
  * @public
  */
 export function renderHtmlFromRichTextForMeasurement(editor: Editor, richText: TLRichText) {
@@ -111,7 +114,6 @@ export function isEmptyRichText(richText: TLRichText) {
  * @param editor - The editor instance.
  * @param richText - The rich text content.
  *
- *
  * @public
  */
 export function renderPlaintextFromRichText(editor: Editor, richText: TLRichText) {
@@ -131,7 +133,6 @@ export function renderPlaintextFromRichText(editor: Editor, richText: TLRichText
  * @param editor - The editor instance.
  * @param richText - The rich text content.
  *
- *
  * @public
  */
 export function renderRichTextFromHTML(editor: Editor, html: string): TLRichText {

package/src/lib/utils/tldr/buildFromV1Document.ts

@@ -17,6 +17,7 @@ import {
 	TLShapeId,
 	Vec,
 	VecModel,
+	b64Vecs,
 	clamp,
 	createShapeId,
 	fetch,
@@ -370,6 +371,9 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 								break
 							}
 
+							const points = v1Shape.points.map(getV2Point)
+							const base64Points = b64Vecs.encodePoints(points)
+
 							editor.createShapes([
 								{
 									...inCommon,
@@ -381,7 +385,10 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 										dash: getV2Dash(v1Shape.style.dash),
 										isPen: false,
 										isComplete: v1Shape.isComplete,
-										segments: [{ type: 'free', points: v1Shape.points.map(getV2Point) }],
+										segments: [{ type: 'free', points: base64Points }],
+										scale: 1,
+										scaleX: 1,
+										scaleY: 1,
 									},
 								},
 							])
@@ -518,7 +525,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 					const util = editor.getShapeUtil<TLArrowShape>('arrow')
 
 					// dumb but necessary
-					editor.inputs.ctrlKey = false
+					editor.inputs.setCtrlKey(false)
 
 					for (const handleId of ['start', 'end'] as const) {
 						const bindingId = v1Shape.handles[handleId].bindingId

package/src/test/Editor.test.tsx

@@ -143,17 +143,17 @@ describe('shapes that are moved to another page', () => {
 it('Begins dragging from pointer move', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(2, 2)
-	expect(editor.inputs.isDragging).toBe(false)
+	expect(editor.inputs.getIsDragging()).toBe(false)
 	editor.pointerMove(10, 10)
-	expect(editor.inputs.isDragging).toBe(true)
+	expect(editor.inputs.getIsDragging()).toBe(true)
 })
 
 it('Begins dragging from wheel', () => {
 	editor.pointerDown(0, 0)
 	editor.wheel(2, 2)
-	expect(editor.inputs.isDragging).toBe(false)
+	expect(editor.inputs.getIsDragging()).toBe(false)
 	editor.wheel(10, 10)
-	expect(editor.inputs.isDragging).toBe(true)
+	expect(editor.inputs.getIsDragging()).toBe(true)
 })
 
 it('Does not create an undo stack item when first clicking on an empty canvas', () => {
@@ -266,36 +266,47 @@ describe('Editor.TickManager', () => {
 		// usually this is called by the app's tick manager, using the elapsed time
 		// between two animation frames, but we're calling it directly here.
 		const tick = (ms: number) => {
-			// @ts-ignore
-			editor._tickManager.updatePointerVelocity(ms)
+			editor.inputs.updatePointerVelocity(ms)
 		}
 
 		// 1. pointer velocity should be 0 when there is no movement
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0, y: 0 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({ x: 0, y: 0 })
 
 		editor.pointerMove(10, 10)
 
 		// 2. moving is not enough, we also need to wait a frame before the velocity is updated
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0, y: 0 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({ x: 0, y: 0 })
 
 		// 3. once time passes, the pointer velocity should be updated
 		tick(16)
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.3125, y: 0.3125 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
+			x: 0.3125,
+			y: 0.3125,
+		})
 
 		// 4. let's do it again, it should be updated again. move, tick, measure
 		editor.pointerMove(20, 20)
 		tick(16)
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.46875, y: 0.46875 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
+			x: 0.46875,
+			y: 0.46875,
+		})
 
 		// 5. if we tick again without movement, the velocity should decay
 		tick(16)
 
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.23437, y: 0.23437 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
+			x: 0.23437,
+			y: 0.23437,
+		})
 
 		// 6. if updatePointerVelocity is (for whatever reason) called with an elapsed time of zero milliseconds, it should be ignored
 		tick(0)
 
-		expect(editor.inputs.pointerVelocity.toJson()).toCloselyMatchObject({ x: 0.23437, y: 0.23437 })
+		expect(editor.inputs.getPointerVelocity().toJson()).toCloselyMatchObject({
+			x: 0.23437,
+			y: 0.23437,
+		})
 	})
 })
 
@@ -677,9 +688,9 @@ describe('middle-click panning', () => {
 			button: 1,
 		})
 		editor.pointerMove(100, 100)
-		expect(editor.inputs.isPanning).toBe(true)
+		expect(editor.inputs.getIsPanning()).toBe(true)
 		editor.pointerUp(100, 100)
-		expect(editor.inputs.isPanning).toBe(false)
+		expect(editor.inputs.getIsPanning()).toBe(false)
 	})
 
 	it('does not clear thee isPanning state if the space bar is down', () => {
@@ -688,51 +699,51 @@ describe('middle-click panning', () => {
 			button: 1,
 		})
 		editor.pointerMove(100, 100)
-		expect(editor.inputs.isPanning).toBe(true)
+		expect(editor.inputs.getIsPanning()).toBe(true)
 		editor.keyDown(' ')
 		editor.pointerUp(100, 100, {
 			button: 1,
 		})
-		expect(editor.inputs.isPanning).toBe(true)
+		expect(editor.inputs.getIsPanning()).toBe(true)
 
 		editor.keyUp(' ')
-		expect(editor.inputs.isPanning).toBe(false)
+		expect(editor.inputs.getIsPanning()).toBe(false)
 	})
 })
 
 describe('dragging', () => {
 	it('drags correctly at 100% zoom', () => {
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 0).pointerDown()
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 1)
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 5)
-		expect(editor.inputs.isDragging).toBe(true)
+		expect(editor.inputs.getIsDragging()).toBe(true)
 	})
 
 	it('drags correctly at 150% zoom', () => {
 		editor.setCamera({ x: 0, y: 0, z: 8 }).forceTick()
 
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 0).pointerDown()
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 2)
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 5)
-		expect(editor.inputs.isDragging).toBe(true)
+		expect(editor.inputs.getIsDragging()).toBe(true)
 	})
 
 	it('drags correctly at 50% zoom', () => {
 		editor.setCamera({ x: 0, y: 0, z: 0.1 }).forceTick()
 
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 0).pointerDown()
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 2)
-		expect(editor.inputs.isDragging).toBe(false)
+		expect(editor.inputs.getIsDragging()).toBe(false)
 		editor.pointerMove(0, 5)
-		expect(editor.inputs.isDragging).toBe(true)
+		expect(editor.inputs.getIsDragging()).toBe(true)
 	})
 })
 

package/src/test/EraserTool.test.ts

@@ -1,5 +1,6 @@
 import { createShapeId } from '@tldraw/editor'
 import { vi } from 'vitest'
+import { createDrawSegments } from './test-jsx'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -72,18 +73,15 @@ beforeEach(() => {
 			x: 0,
 			y: 300,
 			props: {
-				segments: [
-					{
-						type: 'free',
-						points: [
-							{ x: 0, y: 0 },
-							{ x: 2, y: 50 },
-							{ x: 10, y: 100 },
-							{ x: 48, y: 100 },
-							{ x: 100, y: 100 },
-						],
-					},
-				],
+				segments: createDrawSegments([
+					[
+						{ x: 0, y: 0 },
+						{ x: 2, y: 50 },
+						{ x: 10, y: 100 },
+						{ x: 48, y: 100 },
+						{ x: 100, y: 100 },
+					],
+				]),
 			},
 		},
 	])