[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:
Steve Ruiz 2023-08-03 15:55:46 +01:00 committed by GitHub
parent da62a1896c
commit 2b03a19f4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 47 additions and 40 deletions

View file

@ -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)
}

View file

@ -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']),

View file

@ -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 (

View file

@ -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;

View file

@ -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,