tldraw 4.1.0-canary.ccd6179e1cb2 → 4.1.0-canary.d0d868ee0e4c

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'
@@ -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,7 +1,5 @@
 import {
-	AssetRecordType,
 	BaseBoxShapeUtil,
-	Editor,
 	HTMLContainer,
 	T,
 	TLAssetId,
@@ -10,8 +8,6 @@ import {
 	TLBookmarkShapeProps,
 	bookmarkShapeMigrations,
 	bookmarkShapeProps,
-	debounce,
-	getHashForString,
 	lerp,
 	tlenv,
 	toDomPrecision,
@@ -24,11 +20,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> {
@@ -71,22 +69,18 @@ export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
 	}
 
 	override component(shape: TLBookmarkShape) {
-		return <BookmarkShapeComponent shape={shape} />
+		const { assetId, url, h } = shape.props
+		const rotation = this.editor.getShapePageTransform(shape)!.rotation()
+
+		return <BookmarkShapeComponent assetId={assetId} url={url} h={h} rotation={rotation} />
 	}
 
 	override indicator(shape: TLBookmarkShape) {
-		return (
-			<rect
-				width={toDomPrecision(shape.props.w)}
-				height={toDomPrecision(shape.props.h)}
-				rx="6"
-				ry="6"
-			/>
-		)
+		return <BookmarkIndicatorComponent w={shape.props.w} h={shape.props.h} />
 	}
 
 	override onBeforeCreate(next: TLBookmarkShape) {
-		return getBookmarkSize(this.editor, next)
+		return setBookmarkHeight(this.editor, next)
 	}
 
 	override onBeforeUpdate(prev: TLBookmarkShape, shape: TLBookmarkShape) {
@@ -99,7 +93,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(
@@ -115,18 +109,30 @@ export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
 	}
 }
 
-function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
+export function BookmarkIndicatorComponent({ w, h }: { w: number; h: number }) {
+	return <rect width={toDomPrecision(w)} height={toDomPrecision(h)} rx="6" ry="6" />
+}
+
+export function BookmarkShapeComponent({
+	assetId,
+	rotation,
+	url,
+	h,
+	showImageContainer = true,
+}: {
+	assetId: TLAssetId | null
+	rotation: number
+	h: number
+	url: string
+	showImageContainer?: boolean
+}) {
 	const editor = useEditor()
 
-	const asset = (
-		shape.props.assetId ? editor.getAsset(shape.props.assetId) : null
-	) as TLBookmarkAsset
+	const asset = assetId ? (editor.getAsset(assetId) as TLBookmarkAsset) : null
 
 	const isSafariExport = !!useSvgExportContext() && tlenv.isSafari
 
-	const pageRotation = editor.getShapePageTransform(shape)!.rotation()
-
-	const address = getHumanReadableAddress(shape)
+	const address = getHumanReadableAddress(url)
 
 	const [isFaviconValid, setIsFaviconValid] = useState(true)
 	const onFaviconError = () => setIsFaviconValid(false)
@@ -146,11 +152,11 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 					isSafariExport && 'tl-bookmark__container--safariExport'
 				)}
 				style={{
-					boxShadow: isSafariExport ? undefined : getRotatedBoxShadow(pageRotation),
-					maxHeight: shape.props.h,
+					boxShadow: isSafariExport ? undefined : getRotatedBoxShadow(rotation),
+					maxHeight: h,
 				}}
 			>
-				{(!asset || asset.props.image) && (
+				{showImageContainer && (!asset || asset.props.image) && (
 					<div className="tl-bookmark__image_container">
 						{asset ? (
 							<img
@@ -163,21 +169,31 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 						) : (
 							<div className="tl-bookmark__placeholder" />
 						)}
-						{asset?.props.image && <HyperlinkButton url={shape.props.url} />}
+						{asset?.props.image && <HyperlinkButton url={url} />}
 					</div>
 				)}
 				<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={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>
 					) : null}
 					<a
 						className="tl-bookmark__link"
-						href={shape.props.url || ''}
+						href={url || ''}
 						target="_blank"
 						rel="noopener noreferrer"
 						draggable={false}
@@ -208,103 +224,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
+export 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 = (url: string) => {
+	try {
+		const objUrl = new URL(url)
+		// we want the hostname without any www
+		return objUrl.hostname.replace(/^www\./, '')
+	} catch {
+		return 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')
+	}
+}