tldraw 4.1.0-canary.54e71ea20e0d → 4.1.0-canary.55679d7781d6

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

@@ -29,12 +29,27 @@ export interface StylePanelDoubleDropdownPickerProps<T extends string> {
 	onValueChange?(style: StyleProp<T>, value: T): void
 }
 
-function DoubleDropdownPickerInner<T extends string>(
+function StylePanelDoubleDropdownPickerInner<T extends string>(
+	props: StylePanelDoubleDropdownPickerProps<T>
+) {
+	const msg = useTranslation()
+	return (
+		<div className="tlui-style-panel__double-select-picker">
+			<div title={msg(props.label)} className="tlui-style-panel__double-select-picker-label">
+				{msg(props.label)}
+			</div>
+			<TldrawUiToolbar orientation="horizontal" label={msg(props.label)}>
+				<StylePanelDoubleDropdownPickerInline {...props} />
+			</TldrawUiToolbar>
+		</div>
+	)
+}
+
+function StylePanelDoubleDropdownPickerInlineInner<T extends string>(
 	props: StylePanelDoubleDropdownPickerProps<T>
 ) {
 	const ctx = useStylePanelContext()
 	const {
-		label,
 		uiTypeA,
 		uiTypeB,
 		labelA,
@@ -70,100 +85,100 @@ function DoubleDropdownPickerInner<T extends string>(
 	const idA = `style panel ${uiTypeA} A`
 	const idB = `style panel ${uiTypeB} B`
 	return (
-		<div className="tlui-style-panel__double-select-picker">
-			<div title={msg(label)} className="tlui-style-panel__double-select-picker-label">
-				{msg(label)}
-			</div>
-			<TldrawUiToolbar orientation="horizontal" label={msg(label)}>
-				<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>
-					<TldrawUiPopoverTrigger>
-						<TldrawUiToolbarButton
-							type="icon"
-							data-testid={`style.${uiTypeA}`}
-							title={
-								msg(labelA) +
-								' — ' +
-								(valueA === null || valueA.type === 'mixed'
-									? msg('style-panel.mixed')
-									: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))
-							}
-						>
-							<TldrawUiButtonIcon icon={iconA} small invertIcon />
-						</TldrawUiToolbarButton>
-					</TldrawUiPopoverTrigger>
-					<TldrawUiPopoverContent side="left" align="center" sideOffset={80} alignOffset={0}>
-						<TldrawUiToolbar orientation="grid" label={msg(labelA)}>
-							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
-								{itemsA.map((item) => {
-									return (
-										<TldrawUiToolbarButton
-											data-testid={`style.${uiTypeA}.${item.value}`}
-											type="icon"
-											key={item.value}
-											onClick={() => {
-												onValueChange(styleA, item.value)
-												tlmenus.deleteOpenMenu(idA, editor.contextId)
-												setIsOpenA(false)
-											}}
-											title={`${msg(labelA)} — ${msg(`${uiTypeA}-style.${item.value}`)}`}
-										>
-											<TldrawUiButtonIcon icon={item.icon} invertIcon />
-										</TldrawUiToolbarButton>
-									)
-								})}
-							</TldrawUiMenuContextProvider>
-						</TldrawUiToolbar>
-					</TldrawUiPopoverContent>
-				</TldrawUiPopover>
-				<TldrawUiPopover id={idB} open={isOpenB} onOpenChange={setIsOpenB}>
-					<TldrawUiPopoverTrigger>
-						<TldrawUiToolbarButton
-							type="icon"
-							data-testid={`style.${uiTypeB}`}
-							title={
-								msg(labelB) +
-								' — ' +
-								(valueB === null || valueB.type === 'mixed'
-									? msg('style-panel.mixed')
-									: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))
-							}
-						>
-							<TldrawUiButtonIcon icon={iconB} small />
-						</TldrawUiToolbarButton>
-					</TldrawUiPopoverTrigger>
-					<TldrawUiPopoverContent side="left" align="center" sideOffset={116} alignOffset={0}>
-						<TldrawUiToolbar orientation="grid" label={msg(labelB)}>
-							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
-								{itemsB.map((item) => {
-									return (
-										<TldrawUiToolbarButton
-											key={item.value}
-											type="icon"
-											title={`${msg(labelB)} — ${msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)}`}
-											data-testid={`style.${uiTypeB}.${item.value}`}
-											onClick={() => {
-												onValueChange(styleB, item.value)
-												tlmenus.deleteOpenMenu(idB, editor.contextId)
-												setIsOpenB(false)
-											}}
-										>
-											<TldrawUiButtonIcon icon={item.icon} />
-										</TldrawUiToolbarButton>
-									)
-								})}
-							</TldrawUiMenuContextProvider>
-						</TldrawUiToolbar>
-					</TldrawUiPopoverContent>
-				</TldrawUiPopover>
-			</TldrawUiToolbar>
-		</div>
+		<>
+			<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>
+				<TldrawUiPopoverTrigger>
+					<TldrawUiToolbarButton
+						type="icon"
+						data-testid={`style.${uiTypeA}`}
+						title={
+							msg(labelA) +
+							' — ' +
+							(valueA === null || valueA.type === 'mixed'
+								? msg('style-panel.mixed')
+								: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))
+						}
+					>
+						<TldrawUiButtonIcon icon={iconA} small invertIcon />
+					</TldrawUiToolbarButton>
+				</TldrawUiPopoverTrigger>
+				<TldrawUiPopoverContent side="left" align="center" sideOffset={80} alignOffset={0}>
+					<TldrawUiToolbar orientation="grid" label={msg(labelA)}>
+						<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
+							{itemsA.map((item) => {
+								return (
+									<TldrawUiToolbarButton
+										data-testid={`style.${uiTypeA}.${item.value}`}
+										type="icon"
+										key={item.value}
+										onClick={() => {
+											onValueChange(styleA, item.value)
+											tlmenus.deleteOpenMenu(idA, editor.contextId)
+											setIsOpenA(false)
+										}}
+										title={`${msg(labelA)} — ${msg(`${uiTypeA}-style.${item.value}`)}`}
+									>
+										<TldrawUiButtonIcon icon={item.icon} invertIcon />
+									</TldrawUiToolbarButton>
+								)
+							})}
+						</TldrawUiMenuContextProvider>
+					</TldrawUiToolbar>
+				</TldrawUiPopoverContent>
+			</TldrawUiPopover>
+			<TldrawUiPopover id={idB} open={isOpenB} onOpenChange={setIsOpenB}>
+				<TldrawUiPopoverTrigger>
+					<TldrawUiToolbarButton
+						type="icon"
+						data-testid={`style.${uiTypeB}`}
+						title={
+							msg(labelB) +
+							' — ' +
+							(valueB === null || valueB.type === 'mixed'
+								? msg('style-panel.mixed')
+								: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))
+						}
+					>
+						<TldrawUiButtonIcon icon={iconB} small />
+					</TldrawUiToolbarButton>
+				</TldrawUiPopoverTrigger>
+				<TldrawUiPopoverContent side="left" align="center" sideOffset={116} alignOffset={0}>
+					<TldrawUiToolbar orientation="grid" label={msg(labelB)}>
+						<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
+							{itemsB.map((item) => {
+								return (
+									<TldrawUiToolbarButton
+										key={item.value}
+										type="icon"
+										title={`${msg(labelB)} — ${msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)}`}
+										data-testid={`style.${uiTypeB}.${item.value}`}
+										onClick={() => {
+											onValueChange(styleB, item.value)
+											tlmenus.deleteOpenMenu(idB, editor.contextId)
+											setIsOpenB(false)
+										}}
+									>
+										<TldrawUiButtonIcon icon={item.icon} />
+									</TldrawUiToolbarButton>
+								)
+							})}
+						</TldrawUiMenuContextProvider>
+					</TldrawUiToolbar>
+				</TldrawUiPopoverContent>
+			</TldrawUiPopover>
+		</>
 	)
 }
 
 // need to memo like this to get generics
 /** @public @react */
-export const StylePanelDoubleDropdownPicker = React.memo(DoubleDropdownPickerInner) as <
+export const StylePanelDoubleDropdownPicker = React.memo(StylePanelDoubleDropdownPickerInner) as <
 	T extends string,
 >(
 	props: StylePanelDoubleDropdownPickerProps<T>
 ) => React.JSX.Element
+
+/** @public @react */
+export const StylePanelDoubleDropdownPickerInline = React.memo(
+	StylePanelDoubleDropdownPickerInlineInner
+) as <T extends string>(props: StylePanelDoubleDropdownPickerProps<T>) => React.JSX.Element

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

@@ -28,7 +28,21 @@ export interface StylePanelDropdownPickerProps<T extends string> {
 	onValueChange?(style: StyleProp<T>, value: T): void
 }
 
-function DropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {
+function StylePanelDropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {
+	const msg = useTranslation()
+	const toolbarLabel = props.label
+		? msg(props.label)
+		: msg(`style-panel.${props.stylePanelType}` as TLUiTranslationKey)
+	return (
+		<TldrawUiToolbar label={toolbarLabel}>
+			<StylePanelDropdownPickerInline {...props} />
+		</TldrawUiToolbar>
+	)
+}
+
+function StylePanelDropdownPickerInlineInner<T extends string>(
+	props: StylePanelDropdownPickerProps<T>
+) {
 	const ctx = useStylePanelContext()
 	const {
 		id,
@@ -60,60 +74,67 @@ function DropdownPickerInner<T extends string>(props: StylePanelDropdownPickerPr
 
 	const popoverId = `style panel ${id}`
 	return (
-		<TldrawUiToolbar label={stylePanelName}>
-			<TldrawUiPopover
-				id={popoverId}
-				open={isOpen}
-				onOpenChange={setIsOpen}
-				className="tlui-style-panel__dropdown-picker"
-			>
-				<TldrawUiPopoverTrigger>
-					<TldrawUiToolbarButton
-						type={type}
-						data-testid={`style.${uiType}`}
-						data-direction="left"
-						title={titleStr}
-					>
-						{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}
-						<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />
-					</TldrawUiToolbarButton>
-				</TldrawUiPopoverTrigger>
-				<TldrawUiPopoverContent side="left" align="center">
-					<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>
-						<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
-							{items.map((item) => {
-								return (
-									<TldrawUiToolbarButton
-										key={item.value}
-										type="icon"
-										data-testid={`style.${uiType}.${item.value}`}
-										title={
-											stylePanelName +
-											' — ' +
-											msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
-										}
-										isActive={icon === item.icon}
-										onClick={() => {
-											ctx.onHistoryMark('select style dropdown item')
-											onValueChange(style, item.value)
-											tlmenus.deleteOpenMenu(popoverId, editor.contextId)
-											setIsOpen(false)
-										}}
-									>
-										<TldrawUiButtonIcon icon={item.icon} />
-									</TldrawUiToolbarButton>
-								)
-							})}
-						</TldrawUiMenuContextProvider>
-					</TldrawUiToolbar>
-				</TldrawUiPopoverContent>
-			</TldrawUiPopover>
-		</TldrawUiToolbar>
+		<TldrawUiPopover
+			id={popoverId}
+			open={isOpen}
+			onOpenChange={setIsOpen}
+			className="tlui-style-panel__dropdown-picker"
+		>
+			<TldrawUiPopoverTrigger>
+				<TldrawUiToolbarButton
+					type={type}
+					data-testid={`style.${uiType}`}
+					data-direction="left"
+					title={titleStr}
+				>
+					{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}
+					<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />
+				</TldrawUiToolbarButton>
+			</TldrawUiPopoverTrigger>
+			<TldrawUiPopoverContent side="left" align="center">
+				<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>
+					<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
+						{items.map((item) => {
+							return (
+								<TldrawUiToolbarButton
+									key={item.value}
+									type="icon"
+									data-testid={`style.${uiType}.${item.value}`}
+									title={
+										stylePanelName +
+										' — ' +
+										msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
+									}
+									isActive={icon === item.icon}
+									onClick={() => {
+										ctx.onHistoryMark('select style dropdown item')
+										onValueChange(style, item.value)
+										tlmenus.deleteOpenMenu(popoverId, editor.contextId)
+										setIsOpen(false)
+									}}
+								>
+									<TldrawUiButtonIcon icon={item.icon} />
+								</TldrawUiToolbarButton>
+							)
+						})}
+					</TldrawUiMenuContextProvider>
+				</TldrawUiToolbar>
+			</TldrawUiPopoverContent>
+		</TldrawUiPopover>
 	)
 }
 
 // need to export like this to get generics
 /** @public @react */
-export const StylePanelDropdownPicker = React.memo(DropdownPickerInner) as <T extends string>(
+export const StylePanelDropdownPicker = React.memo(StylePanelDropdownPickerInner) as <
+	T extends string,
+>(
+	props: StylePanelDropdownPickerProps<T>
+) => React.JSX.Element
+
+/** @public @react */
+export const StylePanelDropdownPickerInline = React.memo(StylePanelDropdownPickerInlineInner) as <
+	T extends string,
+>(
 	props: StylePanelDropdownPickerProps<T>
 ) => React.JSX.Element

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.54e71ea20e0d'
+export const version = '4.1.0-canary.55679d7781d6'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-09-30T10:45:56.956Z',
-	patch: '2025-09-30T10:45:56.956Z',
+	minor: '2025-10-15T10:10:43.277Z',
+	patch: '2025-10-15T10:10:43.277Z',
 }

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,
@@ -347,23 +355,6 @@ const MATCH_URL_TEST_URLS: (MatchUrlTestNoMatchDef | MatchUrlTestMatchDef)[] = [
 		url: 'https://vimeo.com/foobar',
 		match: false,
 	},
-	// excalidraw
-	{
-		url: 'https://excalidraw.com/#room=asdkjashdkjhaskdjh,sadkjhakjshdkjahd',
-		match: true,
-		output: {
-			type: 'excalidraw',
-			embedUrl: `https://excalidraw.com/#room=asdkjashdkjhaskdjh,sadkjhakjshdkjahd`,
-		},
-	},
-	{
-		url: 'https://excalidraw.com',
-		match: false,
-	},
-	{
-		url: 'https://excalidraw.com/help',
-		match: false,
-	},
 	//desmos
 	{
 		url: 'https://www.desmos.com/calculator/js9hryvejc',
@@ -599,6 +590,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,
@@ -671,23 +670,6 @@ const MATCH_EMBED_TEST_URLS: (MatchEmbedTestMatchDef | MatchEmbedTestNoMatchDef)
 		embedUrl: 'https://vimeo.com/foobar',
 		match: false,
 	},
-	// excalidraw
-	{
-		embedUrl: 'https://excalidraw.com/#room=asdkjashdkjhaskdjh,sadkjhakjshdkjahd',
-		match: true,
-		output: {
-			type: 'excalidraw',
-			url: `https://excalidraw.com/#room=asdkjashdkjhaskdjh,sadkjhakjshdkjahd`,
-		},
-	},
-	{
-		embedUrl: 'https://excalidraw.com',
-		match: false,
-	},
-	{
-		embedUrl: 'https://excalidraw.com/help',
-		match: false,
-	},
 	// desmos
 	{
 		embedUrl: 'https://www.desmos.com/calculator/js9hryvejc?embed',