tldraw 4.1.0-canary.b1f18f73aceb → 4.1.0-canary.b34d5b101192

package/src/lib/defaultEmbedDefinitions.ts

@@ -428,7 +428,8 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		toEmbedUrl: (url) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.pathname.match(/\/@([^/]+)\/([^/]+)/)) {
-				return `${url}?embed=true`
+				urlObj.searchParams.append('embed', 'true')
+				return urlObj.href
 			}
 			return
 		},

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'
@@ -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/bookmark/BookmarkShapeUtil.tsx

@@ -1,17 +1,12 @@
 import {
-	AssetRecordType,
 	BaseBoxShapeUtil,
-	Editor,
 	HTMLContainer,
 	T,
-	TLAssetId,
 	TLBookmarkAsset,
 	TLBookmarkShape,
 	TLBookmarkShapeProps,
 	bookmarkShapeMigrations,
 	bookmarkShapeProps,
-	debounce,
-	getHashForString,
 	lerp,
 	tlenv,
 	toDomPrecision,
@@ -24,11 +19,13 @@ import { convertCommonTitleHTMLEntities } from '../../utils/text/text'
 import { HyperlinkButton } from '../shared/HyperlinkButton'
 import { LINK_ICON } from '../shared/icons-editor'
 import { getRotatedBoxShadow } from '../shared/rotated-box-shadow'
-
-const BOOKMARK_WIDTH = 300
-const BOOKMARK_HEIGHT = 320
-const BOOKMARK_JUST_URL_HEIGHT = 46
-const SHORT_BOOKMARK_HEIGHT = 101
+import {
+	BOOKMARK_HEIGHT,
+	BOOKMARK_WIDTH,
+	getHumanReadableAddress,
+	setBookmarkHeight,
+	updateBookmarkAssetOnUrlChange,
+} from './bookmarks'
 
 /** @public */
 export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
@@ -86,7 +83,7 @@ export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
 	}
 
 	override onBeforeCreate(next: TLBookmarkShape) {
-		return getBookmarkSize(this.editor, next)
+		return setBookmarkHeight(this.editor, next)
 	}
 
 	override onBeforeUpdate(prev: TLBookmarkShape, shape: TLBookmarkShape) {
@@ -99,7 +96,7 @@ export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
 		}
 
 		if (prev.props.assetId !== shape.props.assetId) {
-			return getBookmarkSize(this.editor, shape)
+			return setBookmarkHeight(this.editor, shape)
 		}
 	}
 	override getInterpolatedProps(
@@ -218,103 +215,3 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 		</HTMLContainer>
 	)
 }
-
-function getBookmarkSize(editor: Editor, shape: TLBookmarkShape) {
-	const asset = (
-		shape.props.assetId ? editor.getAsset(shape.props.assetId) : null
-	) as TLBookmarkAsset
-
-	let h = BOOKMARK_HEIGHT
-
-	if (asset) {
-		if (!asset.props.image) {
-			if (!asset.props.title) {
-				h = BOOKMARK_JUST_URL_HEIGHT
-			} else {
-				h = SHORT_BOOKMARK_HEIGHT
-			}
-		}
-	}
-
-	return {
-		...shape,
-		props: {
-			...shape.props,
-			h,
-		},
-	}
-}
-
-/** @internal */
-export const getHumanReadableAddress = (shape: TLBookmarkShape) => {
-	try {
-		const url = new URL(shape.props.url)
-		// we want the hostname without any www
-		return url.hostname.replace(/^www\./, '')
-	} catch {
-		return shape.props.url
-	}
-}
-
-function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {
-	const { url } = shape.props
-
-	// Derive the asset id from the URL
-	const assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))
-
-	if (editor.getAsset(assetId)) {
-		// Existing asset for this URL?
-		if (shape.props.assetId !== assetId) {
-			editor.updateShapes<TLBookmarkShape>([
-				{
-					id: shape.id,
-					type: shape.type,
-					props: { assetId },
-				},
-			])
-		}
-	} else {
-		// No asset for this URL?
-
-		// First, clear out the existing asset reference
-		editor.updateShapes<TLBookmarkShape>([
-			{
-				id: shape.id,
-				type: shape.type,
-				props: { assetId: null },
-			},
-		])
-
-		// Then try to asyncronously create a new one
-		createBookmarkAssetOnUrlChange(editor, shape)
-	}
-}
-
-const createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TLBookmarkShape) => {
-	if (editor.isDisposed) return
-
-	const { url } = shape.props
-
-	// Create the asset using the external content manager's createAssetFromUrl method.
-	// This may be overwritten by the user (for example, we overwrite it on tldraw.com)
-	const asset = await editor.getAssetForExternalContent({ type: 'url', url })
-
-	if (!asset) {
-		// No asset? Just leave the bookmark as a null assetId.
-		return
-	}
-
-	editor.run(() => {
-		// Create the new asset
-		editor.createAssets([asset])
-
-		// And update the shape
-		editor.updateShapes<TLBookmarkShape>([
-			{
-				id: shape.id,
-				type: shape.type,
-				props: { assetId: asset.id },
-			},
-		])
-	})
-}, 500)

package/src/lib/shapes/bookmark/bookmarks.ts

@@ -0,0 +1,170 @@
+import {
+	AssetRecordType,
+	Editor,
+	Result,
+	TLAssetId,
+	TLBookmarkAsset,
+	TLBookmarkShape,
+	TLShapePartial,
+	createShapeId,
+	debounce,
+	getHashForString,
+} from '@tldraw/editor'
+
+export const BOOKMARK_WIDTH = 300
+export const BOOKMARK_HEIGHT = 320
+const BOOKMARK_JUST_URL_HEIGHT = 46
+const SHORT_BOOKMARK_HEIGHT = 101
+
+export function getBookmarkHeight(editor: Editor, assetId?: TLAssetId | null) {
+	const asset = (assetId ? editor.getAsset(assetId) : null) as TLBookmarkAsset | null
+
+	if (asset) {
+		if (!asset.props.image) {
+			if (!asset.props.title) {
+				return BOOKMARK_JUST_URL_HEIGHT
+			} else {
+				return SHORT_BOOKMARK_HEIGHT
+			}
+		}
+	}
+
+	return BOOKMARK_HEIGHT
+}
+
+export function setBookmarkHeight(editor: Editor, shape: TLBookmarkShape) {
+	return {
+		...shape,
+		props: { ...shape.props, h: getBookmarkHeight(editor, shape.props.assetId) },
+	}
+}
+
+/** @internal */
+export const getHumanReadableAddress = (shape: TLBookmarkShape) => {
+	try {
+		const url = new URL(shape.props.url)
+		// we want the hostname without any www
+		return url.hostname.replace(/^www\./, '')
+	} catch {
+		return shape.props.url
+	}
+}
+
+export function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {
+	const { url } = shape.props
+
+	// Derive the asset id from the URL
+	const assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))
+
+	if (editor.getAsset(assetId)) {
+		// Existing asset for this URL?
+		if (shape.props.assetId !== assetId) {
+			editor.updateShapes<TLBookmarkShape>([
+				{
+					id: shape.id,
+					type: shape.type,
+					props: { assetId },
+				},
+			])
+		}
+	} else {
+		// No asset for this URL?
+
+		// First, clear out the existing asset reference
+		editor.updateShapes<TLBookmarkShape>([
+			{
+				id: shape.id,
+				type: shape.type,
+				props: { assetId: null },
+			},
+		])
+
+		// Then try to asyncronously create a new one
+		createBookmarkAssetOnUrlChange(editor, shape)
+	}
+}
+
+const createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TLBookmarkShape) => {
+	if (editor.isDisposed) return
+
+	const { url } = shape.props
+
+	// Create the asset using the external content manager's createAssetFromUrl method.
+	// This may be overwritten by the user (for example, we overwrite it on tldraw.com)
+	const asset = await editor.getAssetForExternalContent({ type: 'url', url })
+
+	if (!asset) {
+		// No asset? Just leave the bookmark as a null assetId.
+		return
+	}
+
+	editor.run(() => {
+		// Create the new asset
+		editor.createAssets([asset])
+
+		// And update the shape
+		editor.updateShapes<TLBookmarkShape>([
+			{
+				id: shape.id,
+				type: shape.type,
+				props: { assetId: asset.id },
+			},
+		])
+	})
+}, 500)
+
+/**
+ * Creates a bookmark shape from a URL with unfurled metadata.
+ *
+ * @returns A Result containing the created bookmark shape or an error
+ * @public
+ */
+
+export async function createBookmarkFromUrl(
+	editor: Editor,
+	{
+		url,
+		center = editor.getViewportPageBounds().center,
+	}: {
+		url: string
+		center?: { x: number; y: number }
+	}
+): Promise<Result<TLBookmarkShape, string>> {
+	try {
+		// Create the bookmark asset with unfurled metadata
+		const asset = await editor.getAssetForExternalContent({ type: 'url', url })
+
+		// Create the bookmark shape
+		const shapeId = createShapeId()
+		const shapePartial: TLShapePartial<TLBookmarkShape> = {
+			id: shapeId,
+			type: 'bookmark',
+			x: center.x - BOOKMARK_WIDTH / 2,
+			y: center.y - BOOKMARK_HEIGHT / 2,
+			rotation: 0,
+			opacity: 1,
+			props: {
+				url,
+				assetId: asset?.id || null,
+				w: BOOKMARK_WIDTH,
+				h: getBookmarkHeight(editor, asset?.id),
+			},
+		}
+
+		editor.run(() => {
+			// Create the asset if we have one
+			if (asset) {
+				editor.createAssets([asset])
+			}
+
+			// Create the shape
+			editor.createShapes([shapePartial])
+		})
+
+		// Get the created shape
+		const createdShape = editor.getShape(shapeId) as TLBookmarkShape
+		return Result.ok(createdShape)
+	} catch (error) {
+		return Result.err(error instanceof Error ? error.message : 'Failed to create bookmark')
+	}
+}

package/src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx

@@ -132,7 +132,7 @@ export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T ext
 				<TldrawUiToolbarToggleGroup
 					data-testid={`style.${uiType}`}
 					type="single"
-					value={value.type === 'shared' ? value.value : undefined}
+					value={value.type === 'shared' ? value.value : null}
 					asChild
 				>
 					<Layout>

package/src/lib/ui/context/actions.tsx

@@ -5,6 +5,7 @@ import {
 	Editor,
 	HALF_PI,
 	PageRecordType,
+	Result,
 	TLBookmarkShape,
 	TLEmbedShape,
 	TLFrameShape,
@@ -24,6 +25,7 @@ import {
 	useMaybeEditor,
 } from '@tldraw/editor'
 import * as React from 'react'
+import { createBookmarkFromUrl } from '../../shapes/bookmark/bookmarks'
 import { fitFrameToContent, removeFrame } from '../../utils/frames/frames'
 import { generateShapeAnnouncementMessage } from '../components/A11y'
 import { EditLinkDialog } from '../components/EditLinkDialog'
@@ -387,45 +389,39 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 			{
 				id: 'convert-to-bookmark',
 				label: 'action.convert-to-bookmark',
-				onSelect(source) {
+				async onSelect(source) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					editor.run(() => {
-						trackEvent('convert-to-bookmark', { source })
-						const shapes = editor.getSelectedShapes()
+					trackEvent('convert-to-bookmark', { source })
+					const shapes = editor.getSelectedShapes()
 
-						const createList: TLShapePartial[] = []
-						const deleteList: TLShapeId[] = []
-						for (const shape of shapes) {
-							if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
-								continue
+					const markId = editor.markHistoryStoppingPoint('convert shapes to bookmark')
 
-							const newPos = new Vec(shape.x, shape.y)
-							newPos.rot(-shape.rotation)
-							newPos.add(new Vec(shape.props.w / 2 - 300 / 2, shape.props.h / 2 - 320 / 2)) // see bookmark shape util
-							newPos.rot(shape.rotation)
-							const partial: TLShapePartial<TLBookmarkShape> = {
-								id: createShapeId(),
-								type: 'bookmark',
-								rotation: shape.rotation,
-								x: newPos.x,
-								y: newPos.y,
-								opacity: 1,
-								props: {
-									url: shape.props.url,
-								},
-							}
+					const creationPromises: Promise<Result<any, any>>[] = []
 
-							createList.push(partial)
-							deleteList.push(shape.id)
-						}
+					for (const shape of shapes) {
+						if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
+							continue
 
-						editor.markHistoryStoppingPoint('convert shapes to bookmark')
+						const center = editor.getShapePageBounds(shape)?.center
 
-						// Should be able to create the shape since we're about to delete the other other
-						editor.deleteShapes(deleteList)
-						editor.createShapes(createList)
+						if (!center) continue
+						editor.deleteShapes([shape.id])
+
+						creationPromises.push(
+							createBookmarkFromUrl(editor, { url: shape.props.url, center }).then((res) => {
+								if (!res.ok) {
+									throw new Error(res.error)
+								}
+								return res
+							})
+						)
+					}
+
+					await Promise.all(creationPromises).catch((error) => {
+						editor.bailToMark(markId)
+						console.error(error)
 					})
 				},
 			},

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.1.0-canary.b1f18f73aceb'
+export const version = '4.1.0-canary.b34d5b101192'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-10-08T15:07:09.545Z',
-	patch: '2025-10-08T15:07:09.545Z',
+	minor: '2025-10-13T16:12:17.929Z',
+	patch: '2025-10-13T16:12:17.929Z',
 }

package/src/lib/utils/embeds/embeds.test.ts

@@ -275,6 +275,14 @@ const MATCH_URL_TEST_URLS: (MatchUrlTestNoMatchDef | MatchUrlTestMatchDef)[] = [
 			embedUrl: `https://replit.com/@omar/Blob-Generator?embed=true`,
 		},
 	},
+	{
+		url: 'https://replit.com/@omar/Blob-Generator#index.html',
+		match: true,
+		output: {
+			type: 'replit',
+			embedUrl: `https://replit.com/@omar/Blob-Generator?embed=true#index.html`,
+		},
+	},
 	{
 		url: 'https://replit.com/foobar',
 		match: false,
@@ -599,6 +607,14 @@ const MATCH_EMBED_TEST_URLS: (MatchEmbedTestMatchDef | MatchEmbedTestNoMatchDef)
 			url: `https://replit.com/@omar/Blob-Generator`,
 		},
 	},
+	{
+		embedUrl: 'https://replit.com/@omar/Blob-Generator?embed=true#index.html',
+		match: true,
+		output: {
+			type: 'replit',
+			url: `https://replit.com/@omar/Blob-Generator#index.html`,
+		},
+	},
 	{
 		embedUrl: 'https://replit.com/@omar/Blob-Generator',
 		match: false,

package/src/test/bookmark-shapes.test.ts

@@ -1,5 +1,6 @@
 import { TLBookmarkShape, createShapeId } from '@tldraw/editor'
-import { getHumanReadableAddress } from '../lib/shapes/bookmark/BookmarkShapeUtil'
+import { vi } from 'vitest'
+import { createBookmarkFromUrl, getHumanReadableAddress } from '../lib/shapes/bookmark/bookmarks'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -132,3 +133,124 @@ describe('The URL formatter', () => {
 		expect(newBookmark.props.h).toBe(320)
 	})
 })
+
+describe('createBookmarkFromUrl', () => {
+	it('creates a bookmark shape with unfurled metadata', async () => {
+		const url = 'https://example.com'
+		const center = { x: 100, y: 200 }
+
+		// Mock the asset creation to return a test asset
+		const mockAsset = {
+			id: 'asset:test-asset-id' as any,
+			typeName: 'asset' as const,
+			type: 'bookmark' as const,
+			props: {
+				src: url,
+				title: 'Example Site',
+				description: 'An example website',
+				image: 'https://example.com/image.jpg',
+				favicon: 'https://example.com/favicon.ico',
+			},
+			meta: {},
+		}
+
+		// Mock the getAssetForExternalContent method
+		vi.spyOn(editor, 'getAssetForExternalContent').mockResolvedValue(mockAsset)
+
+		const result = await createBookmarkFromUrl(editor, { url, center })
+
+		assert(result.ok, 'Failed to create bookmark')
+		const shape = result.value
+		expect(shape.type).toBe('bookmark')
+		expect(shape.props.url).toBe(url)
+		expect(shape.props.assetId).toBe('asset:test-asset-id')
+		expect(shape.props.w).toBe(300)
+		expect(shape.props.h).toBe(320)
+		expect(shape.x).toBe(center.x - 150) // BOOKMARK_WIDTH / 2
+		expect(shape.y).toBe(center.y - 160) // BOOKMARK_HEIGHT / 2
+
+		// Verify the shape was created in the editor
+		const createdShape = editor.getShape(result.value.id)
+		expect(createdShape).toBeDefined()
+		expect(createdShape?.type).toBe('bookmark')
+
+		// Verify the asset was created
+		const createdAsset = editor.getAsset('asset:test-asset-id' as any)
+		expect(createdAsset).toBeDefined()
+		expect(createdAsset?.type).toBe('bookmark')
+	})
+
+	it('creates a bookmark shape with default center when no center provided', async () => {
+		const url = 'https://example.com'
+		const viewportCenter = { x: 500, y: 300 }
+
+		// Mock getViewportPageBounds to return a known center
+		vi.spyOn(editor, 'getViewportPageBounds').mockReturnValue({
+			x: 0,
+			y: 0,
+			w: 1000,
+			h: 600,
+			center: viewportCenter,
+		} as any)
+
+		const mockAsset = {
+			id: 'asset:test-asset-id' as any,
+			typeName: 'asset' as const,
+			type: 'bookmark' as const,
+			props: {
+				src: url,
+				title: 'Example Site',
+				description: 'An example website',
+				image: '',
+				favicon: '',
+			},
+			meta: {},
+		}
+
+		vi.spyOn(editor, 'getAssetForExternalContent').mockResolvedValue(mockAsset)
+
+		const result = await createBookmarkFromUrl(editor, { url })
+
+		assert(result.ok, 'Failed to create bookmark')
+		const shape = result.value
+		expect(shape.x).toBe(viewportCenter.x - 150)
+		expect(shape.y).toBe(viewportCenter.y - 160)
+	})
+
+	it('handles asset creation failure gracefully', async () => {
+		const url = 'https://invalid-url.com'
+		const center = { x: 100, y: 200 }
+
+		// Mock the asset creation to fail
+		vi.spyOn(editor, 'getAssetForExternalContent').mockRejectedValue(new Error('Failed to fetch'))
+
+		const result = await createBookmarkFromUrl(editor, { url, center })
+
+		assert(!result.ok, 'Failed to create bookmark')
+		expect(result.error).toBe('Failed to fetch')
+
+		// Verify no shape was created
+		const shapes = editor.getCurrentPageShapes()
+		expect(shapes).toHaveLength(0)
+	})
+
+	it('creates bookmark shape even when asset creation returns null', async () => {
+		const url = 'https://example.com'
+		const center = { x: 100, y: 200 }
+
+		// Mock the asset creation to return null
+		vi.spyOn(editor, 'getAssetForExternalContent').mockResolvedValue(null as any)
+
+		const result = await createBookmarkFromUrl(editor, { url, center })
+
+		assert(result.ok, 'Failed to create bookmark')
+		const shape = result.value
+		expect(shape.type).toBe('bookmark')
+		expect(shape.props.url).toBe(url)
+		expect(shape.props.assetId).toBe(null)
+
+		// Verify the shape was created
+		const createdShape = editor.getShape(result.value.id)
+		expect(createdShape).toBeDefined()
+	})
+})