fix: allow interactions with published embeds

This commit is contained in:
Konstantinos Kaloutas
2023-05-05 12:58:26 +03:00
committed by Gabriel Horner
parent 8eb1c1f439
commit f4b4ecb526
3 changed files with 8 additions and 5 deletions

View File

@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import * as React from 'react'
import { TLBoxShape, TLBoxShapeProps } from '@tldraw/core'
import { HTMLContainer, TLComponentProps } from '@tldraw/react'
import { HTMLContainer, TLComponentProps, useApp } from '@tldraw/react'
import { action } from 'mobx'
import { observer } from 'mobx-react-lite'
@@ -37,6 +37,7 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
ReactComponent = observer(({ events, isErasing, isEditing }: TLComponentProps) => {
const ref = React.useRef<HTMLIFrameElement>(null)
const app = useApp<Shape>()
return (
<HTMLContainer
@@ -50,7 +51,7 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
<div
className="tl-iframe-container"
style={{
pointerEvents: isEditing ? 'all' : 'none',
pointerEvents: isEditing || app.readOnly ? 'all' : 'none',
userSelect: 'none',
}}
>

View File

@@ -85,7 +85,7 @@ export class TweetShape extends TLBoxShape<TweetShapeProps> {
<div
className="rounded-xl w-full h-full relative shadow-xl tl-tweet-container"
style={{
pointerEvents: isEditing ? 'all' : 'none',
pointerEvents: isEditing || app.readOnly ? 'all' : 'none',
userSelect: 'none',
}}
>

View File

@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { TLBoxShape, TLBoxShapeProps } from '@tldraw/core'
import { HTMLContainer, TLComponentProps } from '@tldraw/react'
import { HTMLContainer, TLComponentProps, useApp} from '@tldraw/react'
import { action, computed } from 'mobx'
import { observer } from 'mobx-react-lite'
import { withClampedStyles } from './style-props'
@@ -45,6 +45,8 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
}
ReactComponent = observer(({ events, isErasing, isEditing, isSelected }: TLComponentProps) => {
const app = useApp<Shape>()
return (
<HTMLContainer
style={{
@@ -57,7 +59,7 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
<div
className="rounded-lg w-full h-full relative overflow-hidden shadow-xl tl-youtube-container"
style={{
pointerEvents: isEditing ? 'all' : 'none',
pointerEvents: isEditing || app.readOnly ? 'all' : 'none',
userSelect: 'none',
background: `url('https://img.youtube.com/vi/${this.embedId}/mqdefault.jpg') no-repeat center/cover`,
}}