tldraw 4.2.0-next.47462e908ff5 → 4.2.0-next.6aa322101785

package/src/lib/ui/hooks/useClipboardEvents.ts

@@ -586,6 +586,8 @@ async function handleClipboardThings(editor: Editor, things: ClipboardThing[], p
  * @public
  */
 const handleNativeOrMenuCopy = async (editor: Editor) => {
+	const navigator =
+		editor.getContainer().ownerDocument?.defaultView?.navigator ?? globalThis.navigator
 	const content = await editor.resolveAssetsInContent(
 		editor.getContentFromCurrentPage(editor.getSelectedShapeIds())
 	)
@@ -713,6 +715,7 @@ export function useMenuClipboardEvents() {
 /** @public */
 export function useNativeClipboardEvents() {
 	const editor = useEditor()
+	const ownerDocument = editor.getContainer().ownerDocument
 	const trackEvent = useUiEvents()
 
 	const appIsFocused = useValue('editor.isFocused', () => editor.getInstanceState().isFocused, [
@@ -817,16 +820,16 @@ export function useNativeClipboardEvents() {
 			trackEvent('paste', { source: 'kbd' })
 		}
 
-		document.addEventListener('copy', copy)
-		document.addEventListener('cut', cut)
-		document.addEventListener('paste', paste)
-		document.addEventListener('pointerup', pointerUpHandler)
+		ownerDocument?.addEventListener('copy', copy)
+		ownerDocument?.addEventListener('cut', cut)
+		ownerDocument?.addEventListener('paste', paste)
+		ownerDocument?.addEventListener('pointerup', pointerUpHandler)
 
 		return () => {
-			document.removeEventListener('copy', copy)
-			document.removeEventListener('cut', cut)
-			document.removeEventListener('paste', paste)
-			document.removeEventListener('pointerup', pointerUpHandler)
+			ownerDocument?.removeEventListener('copy', copy)
+			ownerDocument?.removeEventListener('cut', cut)
+			ownerDocument?.removeEventListener('paste', paste)
+			ownerDocument?.removeEventListener('pointerup', pointerUpHandler)
 		}
-	}, [editor, trackEvent, appIsFocused])
+	}, [editor, trackEvent, appIsFocused, ownerDocument])
 }

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '4.2.0-next.47462e908ff5'
+export const version = '4.2.0-next.6aa322101785'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-10-17T10:30:50.909Z',
-	patch: '2025-10-17T10:30:50.909Z',
+	minor: '2025-11-05T10:36:19.691Z',
+	patch: '2025-11-05T10:36:19.691Z',
 }

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

@@ -8,7 +8,6 @@ import {
 } from '@tiptap/core'
 import Code from '@tiptap/extension-code'
 import Highlight from '@tiptap/extension-highlight'
-import Link from '@tiptap/extension-link'
 import { Node } from '@tiptap/pm/model'
 import StarterKit from '@tiptap/starter-kit'
 import {
@@ -35,6 +34,7 @@ export const KeyboardShiftEnterTweakExtension = Extension.create({
 
 // We change the default Code to override what's in the StarterKit.
 // It allows for other attributes/extensions.
+// @ts-ignore this is fine.
 Code.config.excludes = undefined
 
 // We want the highlighting to take precedence over bolding/italics/links
@@ -52,10 +52,10 @@ export const tipTapDefaultExtensions: Extensions = [
 		blockquote: false,
 		codeBlock: false,
 		horizontalRule: false,
-	}),
-	Link.configure({
-		openOnClick: false,
-		autolink: true,
+		link: {
+			openOnClick: false,
+			autolink: true,
+		},
 	}),
 	Highlight,
 	KeyboardShiftEnterTweakExtension,

package/src/test/customSnapping.test.tsx

@@ -2,6 +2,7 @@ import {
 	BaseBoxShapeUtil,
 	IndexKey,
 	Polyline2d,
+	ShapeUtil,
 	TLAnyShapeUtilConstructor,
 	TLBaseShape,
 	TLHandle,
@@ -541,3 +542,187 @@ describe('custom handle snapping', () => {
 		})
 	})
 })
+
+describe('custom adjacent handle for shift snapping', () => {
+	type BezierShape = TLBaseShape<
+		'bezier',
+		{
+			start: VecModel
+			cp1: VecModel
+			cp2: VecModel
+			end: VecModel
+		}
+	>
+
+	class BezierShapeUtil extends ShapeUtil<BezierShape> {
+		static override type = 'bezier'
+		override getDefaultProps() {
+			return {
+				start: { x: 0, y: 0 },
+				cp1: { x: 50, y: 0 },
+				cp2: { x: 50, y: 100 },
+				end: { x: 100, y: 100 },
+			}
+		}
+		override component() {
+			throw new Error('Method not implemented.')
+		}
+		override indicator() {
+			throw new Error('Method not implemented.')
+		}
+		override getGeometry() {
+			return new Polyline2d({ points: [] })
+		}
+
+		override getHandles(shape: BezierShape): TLHandle[] {
+			return [
+				{
+					id: 'start',
+					type: 'vertex',
+					index: 'a0' as IndexKey,
+					x: shape.props.start.x,
+					y: shape.props.start.y,
+				},
+				{
+					id: 'cp1',
+					type: 'vertex',
+					index: 'a1' as IndexKey,
+					x: shape.props.cp1.x,
+					y: shape.props.cp1.y,
+					snapReferenceHandleId: 'start', // cp1 snaps relative to start
+				},
+				{
+					id: 'cp2',
+					type: 'vertex',
+					index: 'a2' as IndexKey,
+					x: shape.props.cp2.x,
+					y: shape.props.cp2.y,
+					snapReferenceHandleId: 'end', // cp2 snaps relative to end
+				},
+				{
+					id: 'end',
+					type: 'vertex',
+					index: 'a3' as IndexKey,
+					x: shape.props.end.x,
+					y: shape.props.end.y,
+				},
+			]
+		}
+
+		override onHandleDrag(shape: BezierShape, { handle }: TLHandleDragInfo<BezierShape>) {
+			return {
+				...shape,
+				props: {
+					...shape.props,
+					[handle.id]: { x: handle.x, y: handle.y },
+				},
+			}
+		}
+	}
+
+	const shapeUtils = [BezierShapeUtil] as TLAnyShapeUtilConstructor[]
+
+	let editor: TestEditor
+	let ids: Record<string, TLShapeId>
+
+	beforeEach(() => {
+		editor = new TestEditor({ shapeUtils })
+		ids = editor.createShapesFromJsx([
+			<TL.bezier
+				ref="bezier"
+				x={0}
+				y={0}
+				w={100}
+				h={100}
+				start={{ x: 0, y: 0 }}
+				cp1={{ x: 50, y: 0 }}
+				cp2={{ x: 50, y: 100 }}
+				end={{ x: 100, y: 100 }}
+			/>,
+		])
+	})
+
+	test('cp1 snaps angle relative to start point when using custom adjacent handle', () => {
+		editor.select(ids.bezier)
+		const bezier = editor.getShape<BezierShape>(ids.bezier)!
+		const cp1Handle = editor.getShapeHandles(bezier)!.find((h) => h.id === 'cp1')!
+
+		// Start dragging cp1 handle
+		editor.pointerDown(cp1Handle.x, cp1Handle.y, {
+			target: 'handle',
+			shape: bezier,
+			handle: cp1Handle,
+		})
+
+		// Move with shift key - should snap angle relative to start (0, 0) not cp2
+		editor.pointerMove(60, 20, { shiftKey: true })
+
+		const updatedBezier = editor.getShape<BezierShape>(ids.bezier)!
+		const cp1Pos = updatedBezier.props.cp1
+		const startPos = updatedBezier.props.start
+
+		// The angle from start to cp1 should be snapped to nearest 15 degrees
+		const angle = Math.atan2(cp1Pos.y - startPos.y, cp1Pos.x - startPos.x)
+		const degrees = (angle * 180) / Math.PI
+
+		// Should snap to a multiple of 15 degrees (snapAngle uses 24 divisions = 15 degrees)
+		const remainder = ((degrees % 15) + 15) % 15
+		expect(Math.min(remainder, 15 - remainder)).toBeLessThan(1)
+	})
+
+	test('cp2 snaps angle relative to end point when using custom adjacent handle', () => {
+		editor.select(ids.bezier)
+		const bezier = editor.getShape<BezierShape>(ids.bezier)!
+		const cp2Handle = editor.getShapeHandles(bezier)!.find((h) => h.id === 'cp2')!
+
+		// Start dragging cp2 handle
+		editor.pointerDown(cp2Handle.x, cp2Handle.y, {
+			target: 'handle',
+			shape: bezier,
+			handle: cp2Handle,
+		})
+
+		// Move with shift key - should snap angle relative to end (100, 100)
+		editor.pointerMove(80, 80, { shiftKey: true })
+
+		const updatedBezier = editor.getShape<BezierShape>(ids.bezier)!
+		const cp2Pos = updatedBezier.props.cp2
+		const endPos = updatedBezier.props.end
+
+		// The angle from end to cp2 should be snapped to nearest 15 degrees
+		const angle = Math.atan2(cp2Pos.y - endPos.y, cp2Pos.x - endPos.x)
+		const degrees = (angle * 180) / Math.PI
+
+		// Should snap to a multiple of 15 degrees
+		const remainder = ((degrees % 15) + 15) % 15
+		expect(Math.min(remainder, 15 - remainder)).toBeLessThan(1)
+	})
+
+	test('default handles use default adjacent handle logic', () => {
+		editor.select(ids.bezier)
+		const bezier = editor.getShape<BezierShape>(ids.bezier)!
+		const startHandle = editor.getShapeHandles(bezier)!.find((h) => h.id === 'start')!
+
+		// Start dragging start handle
+		editor.pointerDown(startHandle.x, startHandle.y, {
+			target: 'handle',
+			shape: bezier,
+			handle: startHandle,
+		})
+
+		// Move with shift key - should use default logic (next vertex handle = cp1)
+		editor.pointerMove(10, 10, { shiftKey: true })
+
+		const updatedBezier = editor.getShape<BezierShape>(ids.bezier)!
+		const startPos = updatedBezier.props.start
+		const cp1Pos = updatedBezier.props.cp1
+
+		// The angle from cp1 to start should be snapped to nearest 15 degrees
+		const angle = Math.atan2(startPos.y - cp1Pos.y, startPos.x - cp1Pos.x)
+		const degrees = (angle * 180) / Math.PI
+
+		// Should snap to a multiple of 15 degrees
+		const remainder = ((degrees % 15) + 15) % 15
+		expect(Math.min(remainder, 15 - remainder)).toBeLessThan(1)
+	})
+})