enhance: iframe component

tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx

@@ -1,4 +1,5 @@
 /* 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 { action, computed } from 'mobx'
@@ -21,15 +22,19 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
     url: '',
   }
 
+  canEdit = true
+
   @computed get url() {
     return this.props.url
   }
 
-  @action onIFrameSourceChange = (url: string) => {
+  @action onIFrameSourceChange = (url: string  | null;) => {
     this.update({ url })
   }
 
   ReactComponent = observer(({ events, isErasing, isEditing }: TLComponentProps) => {
+    const ref = React.useRef<HTMLIFrameElement>(null)
+
     return (
       <HTMLContainer
         style={{
@@ -55,11 +60,14 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
               }}
             >
               <iframe
+                ref={ref}
                 className="absolute inset-0 w-full h-full m-0"
                 width="100%"
                 height="100%"
+                onLoad={() => this.onIFrameSourceChange(ref.current.contentWindow.location.href)}
                 src={`${this.url}`}
                 frameBorder="0"
+                sandbox=""
               />
             </div>
           )}

tldraw/apps/tldraw-logseq/src/styles.css

@@ -818,11 +818,11 @@ html[data-theme='dark'] {
   width: 1px;
 }
 
-.tl-youtube-link {
-  border-radius: 8px;
+.tl-youtube-link,
+.tl-iframe-src {
+  @apply rounded-lg px-2 py-1;
   color: var(--ls-primary-text-color);
   box-shadow: 0 0 0 1px var(--ls-secondary-border-color);
-  padding: 4px 14px;
 }
 
 .tl-hitarea-stroke {