From f4b4ecb52672164395885f42e02bb666c9486554 Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Fri, 5 May 2023 12:58:26 +0300
Subject: [PATCH] fix: allow interactions with published embeds

---
 tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx  | 5 +++--
 tldraw/apps/tldraw-logseq/src/lib/shapes/TweetShape.tsx   | 2 +-
 tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx | 6 ++++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
index 939f8da63e..fa01a2be8f 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
@@ -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',
           }}
         >
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/TweetShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/TweetShape.tsx
index 77d560ef5b..25b237c470 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/TweetShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/TweetShape.tsx
@@ -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',
           }}
         >
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx
index 0d636fd5ca..0efecdbbe2 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx
@@ -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`,
           }}