[fix] embeds switching / tldraw embed (#1792)

This PR:
- fixes switching between an embed and a link (it's moved to the edit
menu for now, so a bit buried).
- fixes the tldraw embed

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Try to embed a tldraw url into a room.

### Release Notes

- [fix] tldraw embeds

packages/tldraw/src/lib/ui/hooks/useActions.tsx

@@ -286,18 +286,19 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 						newPos.rot(-shape.rotation)
 						newPos.add(new Vec2d(shape.props.w / 2 - 300 / 2, shape.props.h / 2 - 320 / 2)) // see bookmark shape util
 						newPos.rot(shape.rotation)
-
-						createList.push({
+						const partial: TLShapePartial<TLBookmarkShape> = {
 							id: createShapeId(),
 							type: 'bookmark',
 							rotation: shape.rotation,
 							x: newPos.x,
 							y: newPos.y,
+							opacity: 1,
 							props: {
 								url: shape.props.url,
-								opacity: '1',
 							},
-						})
+						}
+
+						createList.push(partial)
 						deleteList.push(shape.id)
 					}
 

packages/tldraw/src/lib/ui/hooks/useContextMenuSchema.tsx

@@ -59,35 +59,6 @@ export const TLUiContextMenuSchemaProvider = track(function TLUiContextMenuSchem
 
 	const oneSelected = selectedCount > 0
 
-	// const oneEmbedSelected = useValue(
-	// 	'oneEmbedSelected',
-	// 	() => {
-	// 		if (editor.selectedShapeIds.length !== 1) return false
-	// 		return editor.selectedShapeIds.some((selectedId) => {
-	// 			const shape = editor.getShape(selectedId)
-	// 			return shape && editor.isShapeOfType<TLEmbedShape>(shape, 'embed') && shape.props.url
-	// 		})
-	// 	},
-	// 	[]
-	// )
-
-	// const oneEmbeddableBookmarkSelected = useValue(
-	// 	'oneEmbeddableBookmarkSelected',
-	// 	() => {
-	// 		if (editor.selectedShapeIds.length !== 1) return false
-	// 		return editor.selectedShapeIds.some((selectedId) => {
-	// 			const shape = editor.getShape(selectedId)
-	// 			return (
-	// 				shape &&
-	// 				editor.isShapeOfType<TLBookmarkShape>(shape, 'bookmark') &&
-	// 				shape.props.url &&
-	// 				getEmbedInfo(shape.props.url)
-	// 			)
-	// 		})
-	// 	},
-	// 	[]
-	// )
-
 	const twoSelected = selectedCount > 1
 	const threeSelected = selectedCount > 2
 	const threeStackableItems = useThreeStackableItems()
@@ -112,9 +83,6 @@ export const TLUiContextMenuSchemaProvider = track(function TLUiContextMenuSchem
 		let contextTLUiMenuSchema: TLUiContextTTLUiMenuSchemaContextType = compactMenuItems([
 			menuGroup(
 				'selection',
-				// oneEmbedSelected && menuItem(actions['open-embed-link']),
-				// oneEmbedSelected && !isShapeLocked && menuItem(actions['convert-to-bookmark']),
-				// oneEmbeddableBookmarkSelected && menuItem(actions['convert-to-embed']),
 				showAutoSizeToggle && menuItem(actions['toggle-auto-size']),
 				showEditLink && !isShapeLocked && menuItem(actions['edit-link']),
 				oneSelected && !isShapeLocked && menuItem(actions['duplicate']),

packages/tldraw/src/lib/ui/hooks/useMenuSchema.tsx

@@ -1,5 +1,6 @@
-import { Editor, compact, useEditor, useValue } from '@tldraw/editor'
+import { Editor, TLBookmarkShape, TLEmbedShape, compact, useEditor, useValue } from '@tldraw/editor'
 import React, { useMemo } from 'react'
+import { getEmbedInfo } from '../../utils/embeds'
 import {
 	TLUiMenuSchema,
 	menuCustom,
@@ -77,6 +78,35 @@ export function TLUiMenuSchemaProvider({ overrides, children }: TLUiMenuSchemaPr
 	const canRedo = useCanRedo()
 	const isZoomedTo100 = useValue('isZoomedTo100', () => editor.zoomLevel === 1, [editor])
 
+	const oneEmbedSelected = useValue(
+		'oneEmbedSelected',
+		() => {
+			const { onlySelectedShape } = editor
+			if (!onlySelectedShape) return false
+			return !!(
+				editor.isShapeOfType<TLEmbedShape>(onlySelectedShape, 'embed') &&
+				onlySelectedShape.props.url &&
+				!editor.isShapeOrAncestorLocked(onlySelectedShape)
+			)
+		},
+		[]
+	)
+
+	const oneEmbeddableBookmarkSelected = useValue(
+		'oneEmbeddableBookmarkSelected',
+		() => {
+			const { onlySelectedShape } = editor
+			if (!onlySelectedShape) return false
+			return !!(
+				editor.isShapeOfType<TLBookmarkShape>(onlySelectedShape, 'bookmark') &&
+				onlySelectedShape.props.url &&
+				getEmbedInfo(onlySelectedShape.props.url) &&
+				!editor.isShapeOrAncestorLocked(onlySelectedShape)
+			)
+		},
+		[]
+	)
+
 	const menuSchema = useMemo<TLUiMenuSchema>(() => {
 		const menuSchema = compact([
 			menuGroup(
@@ -144,7 +174,13 @@ export function TLUiMenuSchemaProvider({ overrides, children }: TLUiMenuSchemaPr
 						allowGroup && menuItem(actions['group']),
 						allowUngroup && menuItem(actions['ungroup'])
 					),
-					menuGroup('delete-group', menuItem(actions['delete'], { disabled: !oneSelected }))
+					menuGroup('delete-group', menuItem(actions['delete'], { disabled: !oneSelected })),
+					menuGroup(
+						'embeds',
+						oneEmbedSelected && menuItem(actions['open-embed-link']),
+						oneEmbedSelected && menuItem(actions['convert-to-bookmark']),
+						oneEmbeddableBookmarkSelected && menuItem(actions['convert-to-embed'])
+					)
 				),
 				menuSubmenu(
 					'view',
@@ -217,6 +253,8 @@ export function TLUiMenuSchemaProvider({ overrides, children }: TLUiMenuSchemaPr
 		exportBackground,
 		isDebugMode,
 		isZoomedTo100,
+		oneEmbeddableBookmarkSelected,
+		oneEmbedSelected,
 	])
 
 	return (

packages/tlschema/api-report.md

@@ -204,7 +204,7 @@ export const drawShapeProps: {
 export const EMBED_DEFINITIONS: readonly [{
     readonly type: "tldraw";
     readonly title: "tldraw";
-    readonly hostnames: readonly ["beta.tldraw.com", "lite.tldraw.com", "www.tldraw.com"];
+    readonly hostnames: readonly ["beta.tldraw.com", "tldraw.com"];
     readonly minWidth: 300;
     readonly minHeight: 300;
     readonly width: 720;

packages/tlschema/src/shapes/TLEmbedShape.ts

@@ -18,7 +18,7 @@ export const EMBED_DEFINITIONS = [
 	{
 		type: 'tldraw',
 		title: 'tldraw',
-		hostnames: ['beta.tldraw.com', 'lite.tldraw.com', 'www.tldraw.com'],
+		hostnames: ['beta.tldraw.com', 'tldraw.com'],
 		minWidth: 300,
 		minHeight: 300,
 		width: 720,