[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
This commit is contained in:
parent
da62a1896c
commit
2b03a19f4a
5 changed files with 47 additions and 40 deletions
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
|
@ -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']),
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue