diff --git a/packages/tldraw/src/lib/ui/hooks/useActions.tsx b/packages/tldraw/src/lib/ui/hooks/useActions.tsx index 889182088..0e888490b 100644 --- a/packages/tldraw/src/lib/ui/hooks/useActions.tsx +++ b/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 = { 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) } diff --git a/packages/tldraw/src/lib/ui/hooks/useContextMenuSchema.tsx b/packages/tldraw/src/lib/ui/hooks/useContextMenuSchema.tsx index 11dc475f4..b1ceb85d6 100644 --- a/packages/tldraw/src/lib/ui/hooks/useContextMenuSchema.tsx +++ b/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(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(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']), diff --git a/packages/tldraw/src/lib/ui/hooks/useMenuSchema.tsx b/packages/tldraw/src/lib/ui/hooks/useMenuSchema.tsx index b4e73f06b..1481ac219 100644 --- a/packages/tldraw/src/lib/ui/hooks/useMenuSchema.tsx +++ b/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(onlySelectedShape, 'embed') && + onlySelectedShape.props.url && + !editor.isShapeOrAncestorLocked(onlySelectedShape) + ) + }, + [] + ) + + const oneEmbeddableBookmarkSelected = useValue( + 'oneEmbeddableBookmarkSelected', + () => { + const { onlySelectedShape } = editor + if (!onlySelectedShape) return false + return !!( + editor.isShapeOfType(onlySelectedShape, 'bookmark') && + onlySelectedShape.props.url && + getEmbedInfo(onlySelectedShape.props.url) && + !editor.isShapeOrAncestorLocked(onlySelectedShape) + ) + }, + [] + ) + const menuSchema = useMemo(() => { 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 ( diff --git a/packages/tlschema/api-report.md b/packages/tlschema/api-report.md index 38ab72857..e97d82e97 100644 --- a/packages/tlschema/api-report.md +++ b/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; diff --git a/packages/tlschema/src/shapes/TLEmbedShape.ts b/packages/tlschema/src/shapes/TLEmbedShape.ts index 2ab98de3b..d91c74e1c 100644 --- a/packages/tlschema/src/shapes/TLEmbedShape.ts +++ b/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,