tldraw 4.1.0-canary.e2133d922c9e → 4.1.0-canary.e259b517a450

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') {
@@ -518,6 +534,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		height: 500,
 		doesResize: true,
 		isAspectRatioLocked: true,
+		embedOnPaste: true,
 		toEmbedUrl: (url) => {
 			const urlObj = safeParseUrl(url)
 			if (urlObj && urlObj.hash.match(/#room=/)) {
@@ -542,6 +559,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 +591,7 @@ export const DEFAULT_EMBED_DEFINITIONS = [
 		width: 700,
 		height: 450,
 		doesResize: true,
+		embedOnPaste: true,
 		toEmbedUrl: (url) => {
 			const urlObj = safeParseUrl(url)
 			if (
@@ -673,6 +692,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'
@@ -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.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/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(
@@ -168,9 +165,19 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 				)}
 				<div className="tl-bookmark__copy_container">
 					{asset?.props.title ? (
-						<h2 className="tl-bookmark__heading">
-							{convertCommonTitleHTMLEntities(asset.props.title)}
-						</h2>
+						<a
+							className="tl-bookmark__link"
+							href={shape.props.url || ''}
+							target="_blank"
+							rel="noopener noreferrer"
+							draggable={false}
+							onPointerDown={markAsHandledOnShiftKey}
+							onPointerUp={markAsHandledOnShiftKey}
+						>
+							<h2 className="tl-bookmark__heading">
+								{convertCommonTitleHTMLEntities(asset.props.title)}
+							</h2>
+						</a>
 					) : null}
 					{asset?.props.description && asset?.props.image ? (
 						<p className="tl-bookmark__description">{asset.props.description}</p>
@@ -208,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/shapes/line/LineShapeUtil.tsx

@@ -48,6 +48,9 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
 	override hideSelectionBoundsBg() {
 		return true
 	}
+	override hideInMinimap() {
+		return true
+	}
 
 	override getDefaultProps(): TLLineShape['props'] {
 		const [start, end] = getIndices(2)

package/src/lib/shapes/text/TextShapeTool.test.ts

@@ -86,6 +86,80 @@ describe('When in idle state', () => {
 		editor.cancel()
 		editor.expectToBeIn('select.idle')
 	})
+
+	it('starts editing selected text shape on Enter key', () => {
+		// Create a text shape using the same method as other tests
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.setCurrentTool('text')
+		editor.pointerDown(0, 0)
+		editor.pointerUp()
+		editor.expectToBeIn('select.editing_shape')
+
+		// Update the text shape with some content
+		editor.updateShapes<TLTextShape>([
+			{
+				...editor.getCurrentPageShapes()[0]!,
+				type: 'text',
+				props: { richText: toRichText('Hello') },
+			},
+		])
+
+		// Exit editing mode
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+
+		// Verify the text shape exists and is selected
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		const textShape = editor.getCurrentPageShapes()[0]
+		expect(textShape.type).toBe('text')
+		editor.setSelectedShapes([textShape])
+
+		// Switch to text tool and press Enter
+		editor.setCurrentTool('text')
+		editor.expectToBeIn('text.idle')
+		editor.keyDown('Enter')
+
+		// Should transition to editing the selected text shape
+		editor.expectToBeIn('select.editing_shape')
+		expect(editor.getEditingShapeId()).toBe(textShape.id)
+	})
+
+	it('starts editing selected text shape on numpad Enter key', () => {
+		// Create a text shape using the same method as other tests
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.setCurrentTool('text')
+		editor.pointerDown(0, 0)
+		editor.pointerUp()
+		editor.expectToBeIn('select.editing_shape')
+
+		// Update the text shape with some content
+		editor.updateShapes<TLTextShape>([
+			{
+				...editor.getCurrentPageShapes()[0]!,
+				type: 'text',
+				props: { richText: toRichText('Hello') },
+			},
+		])
+
+		// Exit editing mode
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+
+		// Verify the text shape exists and is selected
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		const textShape = editor.getCurrentPageShapes()[0]
+		expect(textShape.type).toBe('text')
+		editor.setSelectedShapes([textShape])
+
+		// Switch to text tool and press numpad Enter
+		editor.setCurrentTool('text')
+		editor.expectToBeIn('text.idle')
+		editor.keyDown('Enter', { code: 'NumpadEnter' })
+
+		// Should transition to editing the selected text shape
+		editor.expectToBeIn('select.editing_shape')
+		expect(editor.getEditingShapeId()).toBe(textShape.id)
+	})
 })
 
 describe('When in the pointing state', () => {

package/src/lib/tools/SelectTool/childStates/Crop/children/Idle.ts

@@ -143,7 +143,7 @@ export class Idle extends StateNode {
 	}
 
 	override onKeyUp(info: TLKeyboardEventInfo) {
-		switch (info.code) {
+		switch (info.key) {
 			case 'Enter': {
 				this.editor.setCroppingShape(null)
 				this.editor.setCurrentTool('select.idle', {})