tldraw 4.1.0-canary.e4499a57ef5b → 4.1.0-canary.e87046ba1a0c

package/src/lib/defaultEmbedDefinitions.ts

@@ -35,6 +35,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 			}
 			return
 		},
+		embedOnPaste: false,
 	},
 	{
 		type: 'figma',
@@ -65,6 +66,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 			}
 			return
 		},
+		embedOnPaste: true,
 	},
 	{
 		type: 'google_maps',
@@ -116,6 +118,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 			}
 			return
 		},
+		embedOnPaste: true,
 	},
 	{
 		type: 'val_town',
@@ -144,6 +147,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 			}
 			return
 		},
+		embedOnPaste: true,
 	},
 	{
 		type: 'codesandbox',
@@ -170,6 +174,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 			}
 			return
 		},
+		embedOnPaste: true,
 	},
 	{
 		type: 'codepen',
@@ -198,6 +203,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 			}
 			return
 		},
+		embedOnPaste: true,
 	},
 	{
 		type: 'scratch',
@@ -206,6 +212,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		width: 520,
 		height: 400,
 		doesResize: false,
+		embedOnPaste: true,
 		toEmbedUrl: (url) => {
 			const SCRATCH_URL_REGEXP = /https?:\/\/scratch.mit.edu\/projects\/([^/]+)/
 			const matches = url.match(SCRATCH_URL_REGEXP)
@@ -237,6 +244,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 			'allow-popups-to-escape-sandbox': true,
 		},
 		isAspectRatioLocked: true,
+		embedOnPaste: true,
 		toEmbedUrl: (url) => {
 			const urlObj = safeParseUrl(url)
 			if (!urlObj) return
@@ -303,6 +311,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		overridePermissions: {
 			'allow-popups-to-escape-sandbox': true,
 		},
+		embedOnPaste: true,
 		toEmbedUrl: (url) => {
 			const urlObj = safeParseUrl(url)
 			const cidQs = urlObj?.searchParams.get('cid')
@@ -347,6 +356,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		overridePermissions: {
 			'allow-popups-to-escape-sandbox': true,
 		},
+		embedOnPaste: true,
 		toEmbedUrl: (url) => {
 			const urlObj = safeParseUrl(url)
 
@@ -381,6 +391,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		width: 720,
 		height: 500,
 		doesResize: true,
+		embedOnPaste: true,
 		// Security warning:
 		// Gists allow adding .json extensions to the URL which return JSONP.
 		// Furthermore, the JSONP can include callbacks that execute arbitrary JavaScript.
@@ -413,10 +424,12 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		width: 720,
 		height: 500,
 		doesResize: true,
+		embedOnPaste: true,
 		toEmbedUrl: (url) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.pathname.match(/\/@([^/]+)\/([^/]+)/)) {
-				return `${url}?embed=true`
+				urlObj.searchParams.append('embed', 'true')
+				return urlObj.href
 			}
 			return
 		},
@@ -440,6 +453,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		width: 720,
 		height: 500,
 		doesResize: true,
+		embedOnPaste: true,
 		toEmbedUrl: (url) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.pathname.match(/^\/map\//)) {
@@ -465,6 +479,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		minHeight: 500,
 		overrideOutlineRadius: 12,
 		doesResize: true,
+		embedOnPaste: true,
 		toEmbedUrl: (url) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.pathname.match(/^\/(artist|album)\//)) {
@@ -488,6 +503,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		height: 360,
 		doesResize: true,
 		isAspectRatioLocked: true,
+		embedOnPaste: true,
 		toEmbedUrl: (url) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.hostname === 'vimeo.com') {
@@ -510,29 +526,6 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 			return
 		},
 	},
-	{
-		type: 'excalidraw',
-		title: 'Excalidraw',
-		hostnames: ['excalidraw.com'],
-		width: 720,
-		height: 500,
-		doesResize: true,
-		isAspectRatioLocked: true,
-		toEmbedUrl: (url) => {
-			const urlObj = safeParseUrl(url)
-			if (urlObj && urlObj.hash.match(/#room=/)) {
-				return url
-			}
-			return
-		},
-		fromEmbedUrl: (url) => {
-			const urlObj = safeParseUrl(url)
-			if (urlObj && urlObj.hash.match(/#room=/)) {
-				return url
-			}
-			return
-		},
-	},
 	{
 		type: 'observable',
 		title: 'Observable',
@@ -542,6 +535,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		doesResize: true,
 		isAspectRatioLocked: false,
 		backgroundColor: '#fff',
+		embedOnPaste: true,
 		toEmbedUrl: (url) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.pathname.match(/^\/@([^/]+)\/([^/]+)\/?$/)) {
@@ -573,6 +567,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		width: 700,
 		height: 450,
 		doesResize: true,
+		embedOnPaste: true,
 		toEmbedUrl: (url) => {
 			const urlObj = safeParseUrl(url)
 			if (
@@ -673,6 +668,7 @@ export interface EmbedDefinition {
 	readonly overridePermissions?: TLEmbedShapePermissions
 	readonly instructionLink?: string
 	readonly backgroundColor?: string
+	readonly embedOnPaste?: boolean
 	// TODO: FIXME this is ugly be required because some embeds have their own border radius for example spotify embeds
 	readonly overrideOutlineRadius?: number
 	// eslint-disable-next-line @typescript-eslint/method-signature-style

package/src/lib/defaultExternalContentHandlers.ts

@@ -31,6 +31,7 @@ import {
 	toRichText,
 } from '@tldraw/editor'
 import { EmbedDefinition } from './defaultEmbedDefinitions'
+import { createBookmarkFromUrl } from './shapes/bookmark/bookmarks'
 import { EmbedShapeUtil } from './shapes/embed/EmbedShapeUtil'
 import { getCroppedImageDataForReplacedImage } from './shapes/shared/crop'
 import { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from './shapes/shared/default-shape-constants'
@@ -382,7 +383,7 @@ export async function defaultHandleExternalFileContent(
 ) {
 	const { acceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES, toasts, msg } = options
 	if (files.length > editor.options.maxFilesAtOnce) {
-		toasts.addToast({ title: msg('assets.files.amount-too-big'), severity: 'error' })
+		toasts.addToast({ title: msg('assets.files.amount-too-many'), severity: 'error' })
 		return
 	}
 
@@ -557,7 +558,7 @@ export async function defaultHandleExternalUrlContent(
 	const embedUtil = editor.getShapeUtil('embed') as EmbedShapeUtil | undefined
 	const embedInfo = embedUtil?.getEmbedDefinition(url)
 
-	if (embedInfo) {
+	if (embedInfo && embedInfo.definition.embedOnPaste !== false) {
 		return editor.putExternalContent({
 			type: 'embed',
 			url: embedInfo.url,
@@ -572,42 +573,16 @@ export async function defaultHandleExternalUrlContent(
 			? editor.inputs.currentPagePoint
 			: editor.getViewportPageBounds().center)
 
-	const assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))
-	const shape = createEmptyBookmarkShape(editor, url, position)
-
-	// Use an existing asset if we have one, or else else create a new one
-	let asset = editor.getAsset(assetId) as TLAsset
-	let shouldAlsoCreateAsset = false
-	if (!asset) {
-		shouldAlsoCreateAsset = true
-		try {
-			const bookmarkAsset = await editor.getAssetForExternalContent({ type: 'url', url })
-			if (!bookmarkAsset) throw Error('Could not create an asset')
-			asset = bookmarkAsset
-		} catch {
-			toasts.addToast({
-				title: msg('assets.url.failed'),
-				severity: 'error',
-			})
-			return
-		}
-	}
-
-	editor.run(() => {
-		if (shouldAlsoCreateAsset) {
-			editor.createAssets([asset])
-		}
+	// Use the new function to create the bookmark
+	const result = await createBookmarkFromUrl(editor, { url, center: position })
 
-		editor.updateShapes([
-			{
-				id: shape.id,
-				type: shape.type,
-				props: {
-					assetId: asset.id,
-				},
-			},
-		])
-	})
+	if (!result.ok) {
+		toasts.addToast({
+			title: msg('assets.url.failed'),
+			severity: 'error',
+		})
+		return
+	}
 }
 
 /** @public */

package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts

@@ -1,7 +1,7 @@
 import { HALF_PI, TLArrowShape, TLShapeId, createShapeId, toRichText } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
-import { createOrUpdateArrowBinding, getArrowBindings } from './shared'
+import { createOrUpdateArrowBinding, getArrowBindings, getArrowInfo } from './shared'
 
 let editor: TestEditor
 
@@ -620,3 +620,213 @@ describe('Arrow export bounds', () => {
 		expect(arrow.props.richText).not.toBeNull()
 	})
 })
+
+describe('Arrow terminal positioning bug fix', () => {
+	const data = {
+		document: {
+			store: {
+				'shape:1Hm61DGAsY0uqEO-kt75l': {
+					x: 637.2890625,
+					y: 383.9296875,
+					rotation: 0,
+					isLocked: false,
+					opacity: 1,
+					meta: {},
+					id: 'shape:1Hm61DGAsY0uqEO-kt75l',
+					type: 'geo',
+					props: {
+						w: 230.66796875,
+						h: 114.796875,
+						geo: 'rectangle',
+						dash: 'draw',
+						growY: 0,
+						url: '',
+						scale: 1,
+						color: 'black',
+						labelColor: 'black',
+						fill: 'none',
+						size: 'm',
+						font: 'draw',
+						align: 'middle',
+						verticalAlign: 'middle',
+						richText: {
+							type: 'doc',
+							content: [
+								{
+									type: 'paragraph',
+								},
+							],
+						},
+					},
+					parentId: 'page:page',
+					index: 'a1',
+					typeName: 'shape',
+				},
+				'binding:nekxhMCGaoEJO98DEqWgo': {
+					meta: {},
+					id: 'binding:nekxhMCGaoEJO98DEqWgo',
+					type: 'arrow',
+					fromId: 'shape:j0HKQihjBXqMqgVhfRhDS',
+					toId: 'shape:1Hm61DGAsY0uqEO-kt75l',
+					props: {
+						isPrecise: true,
+						isExact: false,
+						normalizedAnchor: {
+							x: 0.13182672605036325,
+							y: 0.8036953858717844,
+						},
+						snap: 'none',
+						terminal: 'start',
+					},
+					typeName: 'binding',
+				},
+				'binding:kWamalL_QSq_kFPZDgp7Z': {
+					meta: {},
+					id: 'binding:kWamalL_QSq_kFPZDgp7Z',
+					type: 'arrow',
+					fromId: 'shape:j0HKQihjBXqMqgVhfRhDS',
+					toId: 'shape:1Hm61DGAsY0uqEO-kt75l',
+					props: {
+						isPrecise: true,
+						isExact: false,
+						normalizedAnchor: {
+							x: 0.7138744475114731,
+							y: 0.45797604464407243,
+						},
+						snap: 'none',
+						terminal: 'end',
+					},
+					typeName: 'binding',
+				},
+				'shape:j0HKQihjBXqMqgVhfRhDS': {
+					x: 665.296875,
+					y: 477.59765625,
+					rotation: 0,
+					isLocked: false,
+					opacity: 1,
+					meta: {},
+					id: 'shape:j0HKQihjBXqMqgVhfRhDS',
+					type: 'arrow',
+					props: {
+						kind: 'arc',
+						elbowMidPoint: 0.5,
+						dash: 'draw',
+						size: 'm',
+						fill: 'none',
+						color: 'black',
+						labelColor: 'black',
+						bend: 0,
+						start: {
+							x: 0,
+							y: 0,
+						},
+						end: {
+							x: 2,
+							y: 0,
+						},
+						arrowheadStart: 'none',
+						arrowheadEnd: 'arrow',
+						richText: {
+							type: 'doc',
+							content: [
+								{
+									type: 'paragraph',
+								},
+							],
+						},
+						labelPosition: 0.5,
+						font: 'draw',
+						scale: 1,
+					},
+					parentId: 'page:page',
+					index: 'a2lbpzZG',
+					typeName: 'shape',
+				},
+				'page:page': {
+					meta: {},
+					id: 'page:page',
+					name: 'Page 1',
+					index: 'a1',
+					typeName: 'page',
+				},
+				'document:document': {
+					gridSize: 10,
+					name: '',
+					meta: {},
+					id: 'document:document',
+					typeName: 'document',
+				},
+			},
+			schema: {
+				schemaVersion: 2,
+				sequences: {
+					'com.tldraw.store': 5,
+					'com.tldraw.asset': 1,
+					'com.tldraw.camera': 1,
+					'com.tldraw.document': 2,
+					'com.tldraw.instance': 25,
+					'com.tldraw.instance_page_state': 5,
+					'com.tldraw.page': 1,
+					'com.tldraw.instance_presence': 6,
+					'com.tldraw.pointer': 1,
+					'com.tldraw.shape': 4,
+					'com.tldraw.asset.bookmark': 2,
+					'com.tldraw.asset.image': 5,
+					'com.tldraw.asset.video': 5,
+					'com.tldraw.shape.group': 0,
+					'com.tldraw.shape.text': 3,
+					'com.tldraw.shape.bookmark': 2,
+					'com.tldraw.shape.draw': 2,
+					'com.tldraw.shape.geo': 10,
+					'com.tldraw.shape.note': 9,
+					'com.tldraw.shape.line': 5,
+					'com.tldraw.shape.frame': 1,
+					'com.tldraw.shape.arrow': 7,
+					'com.tldraw.shape.highlight': 1,
+					'com.tldraw.shape.embed': 4,
+					'com.tldraw.shape.image': 5,
+					'com.tldraw.shape.video': 4,
+					'com.tldraw.binding.arrow': 1,
+				},
+			},
+		},
+		session: {
+			version: 0,
+			currentPageId: 'page:page',
+			exportBackground: true,
+			isFocusMode: false,
+			isDebugMode: false,
+			isToolLocked: false,
+			isGridMode: false,
+			pageStates: [
+				{
+					pageId: 'page:page',
+					camera: {
+						x: 0,
+						y: 0,
+						z: 1,
+					},
+					selectedShapeIds: ['shape:j0HKQihjBXqMqgVhfRhDS'],
+					focusedGroupId: null,
+				},
+			],
+		},
+	}
+
+	it('should position straight arrow terminals on shape boundary, not text label boundary', () => {
+		// Create a geo shape with text label
+		editor.loadSnapshot(data as any)
+
+		const arrow = editor.getShape('shape:j0HKQihjBXqMqgVhfRhDS' as TLShapeId) as TLArrowShape
+		expect(arrow).toBeDefined()
+
+		expect(getArrowBindings(editor, arrow)).toMatchObject({
+			end: { props: { isPrecise: true } },
+			start: { props: { isPrecise: true } },
+		})
+
+		const info = getArrowInfo(editor, arrow)
+		expect(info?.start.handle).toEqual(info?.start.point)
+		expect(info?.end.handle).toEqual(info?.end.point)
+	})
+})

package/src/lib/shapes/arrow/ArrowShapeUtil.tsx

@@ -144,6 +144,9 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 	override hideSelectionBoundsFg() {
 		return true
 	}
+	override hideInMinimap() {
+		return true
+	}
 
 	override canBeLaidOut(shape: TLArrowShape, info: TLShapeUtilCanBeLaidOutOpts) {
 		if (info.type === 'flip') {

package/src/lib/shapes/arrow/curved-arrow.ts

@@ -154,7 +154,10 @@ export function getCurvedArrowInfo(
 		}
 		if (!point) {
 			if (isClosed) {
-				const nearestPoint = startShapeInfo.geometry.nearestPoint(startInStartShapeLocalSpace)
+				const nearestPoint = startShapeInfo.geometry.nearestPoint(startInStartShapeLocalSpace, {
+					includeInternal: false,
+					includeLabels: false,
+				})
 				if (Vec.DistMin(nearestPoint, startInStartShapeLocalSpace, 1)) {
 					point = nearestPoint
 				}
@@ -233,7 +236,10 @@ export function getCurvedArrowInfo(
 		}
 		if (!point) {
 			if (isClosed) {
-				const nearestPoint = endShapeInfo.geometry.nearestPoint(endInEndShapeLocalSpace)
+				const nearestPoint = endShapeInfo.geometry.nearestPoint(endInEndShapeLocalSpace, {
+					includeInternal: false,
+					includeLabels: false,
+				})
 				if (Vec.DistMin(nearestPoint, endInEndShapeLocalSpace, 1)) {
 					point = nearestPoint
 				}

package/src/lib/shapes/arrow/straight-arrow.ts

@@ -248,7 +248,11 @@ function updateArrowheadPointWithBoundShape(
 	if (targetInt === undefined) {
 		// No intersection? The arrowhead point will be at the arrow terminal.
 		// if we _almost_ hit the target, just put the arrowhead at the target.
-		targetInt = targetShapeInfo.geometry.nearestPoint(targetTo)
+		targetInt = targetShapeInfo.geometry.nearestPoint(targetTo, {
+			includeLabels: false,
+			includeInternal: false,
+		})
+
 		if (!Vec.DistMin(targetInt, targetTo, 1)) {
 			return
 		}