@tldraw/editor 4.2.2 → 4.2.3

package/editor.css

@@ -607,6 +607,7 @@ input,
 	pointer-events: all;
 	white-space: pre-wrap;
 	overflow-wrap: break-word;
+	text-shadow: var(--tl-text-outline);
 }
 
 .tl-text-wrapper[data-font='draw'] {
@@ -708,7 +709,7 @@ input,
 	resize: none;
 	border: none;
 	user-select: none;
-	contain: layout style paint;
+	contain: style paint;
 	/* N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers") is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs. */
 	unicode-bidi: plaintext;
 	-webkit-user-select: none;
@@ -769,6 +770,7 @@ input,
 	justify-content: center;
 	align-items: center;
 	color: var(--tl-color-text);
+	text-shadow: var(--tl-text-outline);
 	line-height: inherit;
 	position: absolute;
 	inset: 0px;
@@ -968,14 +970,6 @@ input,
 	display: block;
 }
 
-.tl-text__outline {
-	text-shadow: var(--tl-text-outline);
-}
-
-.tl-text__no-outline {
-	text-shadow: none;
-}
-
 /* --------------------- Loading -------------------- */
 
 .tl-loading {
@@ -1140,12 +1134,14 @@ input,
 	fill: none;
 }
 
-.tl-container[data-coarse='true'] .tl-handle__bg:active {
-	fill: var(--tl-color-selection-fill);
-}
+@media (pointer: coarse) {
+	.tl-handle__bg:active {
+		fill: var(--tl-color-selection-fill);
+	}
 
-.tl-container[data-coarse='true'] .tl-handle__create {
-	opacity: 1;
+	.tl-handle__create {
+		opacity: 1;
+	}
 }
 
 .tl-rotate-corner:not(:hover),
@@ -1221,6 +1217,7 @@ input,
 	align-items: center;
 	text-align: center;
 	color: var(--tl-color-text);
+	text-shadow: var(--tl-text-outline);
 }
 
 .tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
@@ -1449,6 +1446,7 @@ input,
 }
 
 .tl-note__container > .tl-text-label {
+	text-shadow: none;
 	color: currentColor;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -47,15 +47,15 @@
     "context": "yarn run -T tsx ../../internal/scripts/context.ts"
   },
   "dependencies": {
-    "@tiptap/core": "^3.12.1",
-    "@tiptap/pm": "^3.12.1",
-    "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "4.2.2",
-    "@tldraw/state-react": "4.2.2",
-    "@tldraw/store": "4.2.2",
-    "@tldraw/tlschema": "4.2.2",
-    "@tldraw/utils": "4.2.2",
-    "@tldraw/validate": "4.2.2",
+    "@tiptap/core": "3.6.2",
+    "@tiptap/pm": "3.6.2",
+    "@tiptap/react": "3.6.2",
+    "@tldraw/state": "4.2.3",
+    "@tldraw/state-react": "4.2.3",
+    "@tldraw/store": "4.2.3",
+    "@tldraw/tlschema": "4.2.3",
+    "@tldraw/utils": "4.2.3",
+    "@tldraw/validate": "4.2.3",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",
@@ -65,22 +65,20 @@
     "is-plain-object": "^5.0.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0 || ^19.2.1",
-    "react-dom": "^18.2.0 || ^19.2.1"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "devDependencies": {
     "@peculiar/webcrypto": "^1.5.0",
-    "@testing-library/dom": "^10.0.0",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/react": "^15.0.7",
     "@types/benchmark": "^2.1.5",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^18.3.18",
     "@types/wicg-file-system-access": "^2020.9.8",
     "benchmark": "^2.1.4",
     "fake-indexeddb": "^4.0.2",
     "lazyrepo": "0.0.0-alpha.27",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "resize-observer-polyfill": "^1.5.1",
     "vitest": "^3.2.4"
   },

package/src/index.ts

@@ -146,7 +146,6 @@ export {
 	type TLFontFaceSource,
 } from './lib/editor/managers/FontManager/FontManager'
 export { HistoryManager } from './lib/editor/managers/HistoryManager/HistoryManager'
-export { InputsManager } from './lib/editor/managers/InputsManager/InputsManager'
 export {
 	ScribbleManager,
 	type ScribbleItem,
@@ -169,7 +168,6 @@ export {
 	type TLMeasureTextOpts,
 	type TLMeasureTextSpanOpts,
 } from './lib/editor/managers/TextManager/TextManager'
-export { TickManager } from './lib/editor/managers/TickManager/TickManager'
 export { UserPreferencesManager } from './lib/editor/managers/UserPreferencesManager/UserPreferencesManager'
 export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapes/BaseBoxShapeUtil'
 export { GroupShapeUtil } from './lib/editor/shapes/group/GroupShapeUtil'
@@ -180,7 +178,6 @@ export {
 	type TLDragShapesOutInfo,
 	type TLDragShapesOverInfo,
 	type TLDropShapesOverInfo,
-	type TLEditStartInfo,
 	type TLGeometryOpts,
 	type TLHandleDragInfo,
 	type TLResizeInfo,
@@ -285,7 +282,7 @@ export {
 	type SvgExportDef,
 } from './lib/editor/types/SvgExportContext'
 export { getSvgAsImage } from './lib/exports/getSvgAsImage'
-export { tlenv, tlenvReactive } from './lib/globals/environment'
+export { tlenv } from './lib/globals/environment'
 export { tlmenus } from './lib/globals/menus'
 export { tltime } from './lib/globals/time'
 export {

package/src/lib/components/ErrorBoundary.tsx

@@ -12,7 +12,7 @@ const initialState = { error: null }
 
 /** @public */
 export class ErrorBoundary extends React.Component<
-	React.PropsWithChildren<TLErrorBoundaryProps>,
+	React.PropsWithRef<React.PropsWithChildren<TLErrorBoundaryProps>>,
 	{ error: Error | null }
 > {
 	static getDerivedStateFromError(error: Error) {

package/src/lib/components/GeometryDebuggingView.tsx

@@ -1,9 +1,23 @@
 import { track } from '@tldraw/state-react'
 import { modulate } from '@tldraw/utils'
+import { useEffect, useState } from 'react'
 import { useEditor } from '../hooks/useEditor'
 import { Geometry2d } from '../primitives/geometry/Geometry2d'
 import { Group2d } from '../primitives/geometry/Group2d'
 
+function useTick(isEnabled = true) {
+	const [_, setTick] = useState(0)
+	const editor = useEditor()
+	useEffect(() => {
+		if (!isEnabled) return
+		const update = () => setTick((tick) => tick + 1)
+		editor.on('tick', update)
+		return () => {
+			editor.off('tick', update)
+		}
+	}, [editor, isEnabled])
+}
+
 export const GeometryDebuggingView = track(function GeometryDebuggingView({
 	showStroke = true,
 	showVertices = true,
@@ -15,9 +29,13 @@ export const GeometryDebuggingView = track(function GeometryDebuggingView({
 }) {
 	const editor = useEditor()
 
+	useTick(showClosestPointOnOutline)
+
 	const zoomLevel = editor.getZoomLevel()
 	const renderingShapes = editor.getRenderingShapes()
-	const currentPagePoint = editor.inputs.getCurrentPagePoint()
+	const {
+		inputs: { currentPagePoint },
+	} = editor
 
 	return (
 		<svg

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -86,7 +86,6 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 			const transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(
 				x + offset
 			)}px,${toDomPrecision(y + offset)}px)`
-
 			setStyleProperty(rHtmlLayer.current, 'transform', transform)
 			setStyleProperty(rHtmlLayer2.current, 'transform', transform)
 		},
@@ -210,7 +209,7 @@ function GridWrapper() {
 function ScribbleWrapper() {
 	const editor = useEditor()
 	const scribbles = useValue('scribbles', () => editor.getInstanceState().scribbles, [editor])
-	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
 	const { Scribble } = useEditorComponents()
 
 	if (!(Scribble && scribbles.length)) return null
@@ -243,7 +242,7 @@ function ZoomBrushWrapper() {
 function SnapIndicatorWrapper() {
 	const editor = useEditor()
 	const lines = useValue('snapLines', () => editor.snaps.getIndicators(), [editor])
-	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
 	const { SnapIndicator } = useEditorComponents()
 
 	if (!(SnapIndicator && lines.length > 0)) return null
@@ -284,7 +283,7 @@ function HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {
 	const editor = useEditor()
 	const { Handles } = useEditorComponents()
 
-	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
 
 	const isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [
 		editor,

package/src/lib/constants.ts

@@ -31,3 +31,5 @@ export const LEFT_MOUSE_BUTTON = 0
 export const RIGHT_MOUSE_BUTTON = 2
 export const MIDDLE_MOUSE_BUTTON = 1
 export const STYLUS_ERASER_BUTTON = 5
+
+export const ZOOM_TO_FIT_PADDING = 128

package/src/lib/editor/Editor.test.ts

@@ -6,25 +6,25 @@ import {
 	Rectangle2d,
 	ShapeUtil,
 	T,
-	TLShape,
+	TLBaseShape,
 	createShapeId,
 	createTLStore,
 } from '../..'
 import { Editor } from './Editor'
 import { StateNode } from './tools/StateNode'
 
-const MY_CUSTOM_SHAPE_TYPE = 'my-custom-shape'
-
-declare module '@tldraw/tlschema' {
-	export interface TLGlobalShapePropsMap {
-		[MY_CUSTOM_SHAPE_TYPE]: { w: number; h: number; text: string | undefined; isFilled: boolean }
+type ICustomShape = TLBaseShape<
+	'my-custom-shape',
+	{
+		w: number
+		h: number
+		text: string | undefined
+		isFilled: boolean
 	}
-}
-
-type ICustomShape = TLShape<typeof MY_CUSTOM_SHAPE_TYPE>
+>
 
 class CustomShape extends ShapeUtil<ICustomShape> {
-	static override type = MY_CUSTOM_SHAPE_TYPE
+	static override type = 'my-custom-shape' as const
 	static override props: RecordProps<ICustomShape> = {
 		w: T.number,
 		h: T.number,
@@ -925,146 +925,6 @@ describe('replaceExternalContent', () => {
 	})
 })
 
-describe('dispatch event emission', () => {
-	let testEditor: Editor
-
-	beforeEach(() => {
-		testEditor = new Editor({
-			shapeUtils: [CustomShape],
-			bindingUtils: [],
-			tools: [],
-			store: createTLStore({ shapeUtils: [CustomShape], bindingUtils: [] }),
-			getContainer: () => document.body,
-		})
-		// Ensure camera is unlocked so events are processed
-		testEditor.setCameraOptions({ isLocked: false })
-	})
-
-	it('emits wheel events through the event emitter', () => {
-		const eventHandler = vi.fn()
-		testEditor.on('event', eventHandler)
-
-		const wheelEvent = {
-			type: 'wheel' as const,
-			name: 'wheel' as const,
-			delta: { x: 0, y: 10, z: 0 },
-			point: { x: 100, y: 100, z: 1 },
-			shiftKey: false,
-			altKey: false,
-			ctrlKey: false,
-			metaKey: false,
-			accelKey: false,
-		}
-
-		testEditor.dispatch(wheelEvent)
-		// Wheel events are batched for the next tick, so emit a tick to flush them
-		testEditor.emit('tick', 16)
-
-		expect(eventHandler).toHaveBeenCalledWith(wheelEvent)
-	})
-
-	it('emits pinch_start events through the event emitter', () => {
-		const eventHandler = vi.fn()
-		testEditor.on('event', eventHandler)
-
-		const pinchStartEvent = {
-			type: 'pinch' as const,
-			name: 'pinch_start' as const,
-			point: { x: 100, y: 100, z: 1 },
-			delta: { x: 0, y: 0, z: 0 },
-			shiftKey: false,
-			altKey: false,
-			ctrlKey: false,
-			metaKey: false,
-			accelKey: false,
-		}
-
-		testEditor.dispatch(pinchStartEvent)
-		// Pinch events are batched for the next tick, so emit a tick to flush them
-		testEditor.emit('tick', 16)
-
-		expect(eventHandler).toHaveBeenCalledWith(pinchStartEvent)
-	})
-
-	it('emits pinch events through the event emitter', () => {
-		const eventHandler = vi.fn()
-		testEditor.on('event', eventHandler)
-
-		// First dispatch pinch_start to set isPinching
-		const pinchStartEvent = {
-			type: 'pinch' as const,
-			name: 'pinch_start' as const,
-			point: { x: 100, y: 100, z: 1 },
-			delta: { x: 0, y: 0, z: 0 },
-			shiftKey: false,
-			altKey: false,
-			ctrlKey: false,
-			metaKey: false,
-			accelKey: false,
-		}
-		testEditor.dispatch(pinchStartEvent)
-		testEditor.emit('tick', 16)
-
-		eventHandler.mockClear()
-
-		const pinchEvent = {
-			type: 'pinch' as const,
-			name: 'pinch' as const,
-			point: { x: 100, y: 100, z: 1.5 },
-			delta: { x: 10, y: 10, z: 0 },
-			shiftKey: false,
-			altKey: false,
-			ctrlKey: false,
-			metaKey: false,
-			accelKey: false,
-		}
-
-		testEditor.dispatch(pinchEvent)
-		testEditor.emit('tick', 16)
-
-		expect(eventHandler).toHaveBeenCalledWith(pinchEvent)
-	})
-
-	it('emits pinch_end events through the event emitter', () => {
-		const eventHandler = vi.fn()
-		testEditor.on('event', eventHandler)
-
-		// First dispatch pinch_start to set isPinching
-		const pinchStartEvent = {
-			type: 'pinch' as const,
-			name: 'pinch_start' as const,
-			point: { x: 100, y: 100, z: 1 },
-			delta: { x: 0, y: 0, z: 0 },
-			shiftKey: false,
-			altKey: false,
-			ctrlKey: false,
-			metaKey: false,
-			accelKey: false,
-		}
-		testEditor.dispatch(pinchStartEvent)
-		testEditor.emit('tick', 16)
-
-		eventHandler.mockClear()
-
-		const pinchEndEvent = {
-			type: 'pinch' as const,
-			name: 'pinch_end' as const,
-			point: { x: 100, y: 100, z: 1.5 },
-			delta: { x: 0, y: 0, z: 0 },
-			shiftKey: false,
-			altKey: false,
-			ctrlKey: false,
-			metaKey: false,
-			accelKey: false,
-		}
-
-		testEditor.dispatch(pinchEndEvent)
-		testEditor.emit('tick', 16)
-
-		expect(eventHandler).toHaveBeenCalledWith(pinchEndEvent)
-	})
-})
-
 describe('setTool', () => {
 	class CustomToolA extends StateNode {
 		static override id = 'custom-tool-a'