updated EmbedShape to default to drag rather than interact when selected

src/shapes/EmbedShapeUtil.tsx

@@ -135,6 +135,8 @@ export class EmbedShape extends BaseBoxShapeUtil<IEmbedShape> {
   }
 
   component(shape: IEmbedShape) {
+    const isSelected = this.editor.getSelectedShapeIds().includes(shape.id)
+    
     const [inputUrl, setInputUrl] = useState(shape.props.url || "")
     const [error, setError] = useState("")
     const [copyStatus, setCopyStatus] = useState(false)
@@ -187,7 +189,7 @@ export class EmbedShape extends BaseBoxShapeUtil<IEmbedShape> {
     }
 
     const contentStyle = {
-      pointerEvents: "all" as const,
+      pointerEvents: isSelected ? "none" as const : "all" as const,
       width: "100%",
       height: "100%",
       border: "1px solid #D3D3D3",
@@ -327,13 +329,20 @@ export class EmbedShape extends BaseBoxShapeUtil<IEmbedShape> {
             loading="lazy"
             referrerPolicy="no-referrer"
             onLoad={(e) => {
-              // Add message listener for iframe communication
-              window.addEventListener("message", (event) => {
-                const iframe = e.currentTarget as HTMLIFrameElement
+              // Only add listener if we have a valid iframe
+              const iframe = e.currentTarget as HTMLIFrameElement
+              if (!iframe) return;
+
+              const messageHandler = (event: MessageEvent) => {
                 if (event.source === iframe.contentWindow) {
                   handleIframeInteraction(event.data)
                 }
-              })
+              }
+
+              window.addEventListener("message", messageHandler)
+              
+              // Clean up listener when iframe changes
+              return () => window.removeEventListener("message", messageHandler)
             }}
           />
         </div>

src/ui/overrides.tsx

@@ -12,6 +12,33 @@ export const overrides: TLUiOverrides = {
   tools(editor, tools) {
     return {
       ...tools,
+      select: {
+        ...tools.select,
+        onPointerDown: (info: any) => {
+          const shape = editor.getShapeAtPoint(info.point)
+          if (shape && editor.getSelectedShapeIds().includes(shape.id)) {
+            // If clicking on a selected shape, initiate drag behavior
+            editor.dispatch({
+              type: "pointer",
+              name: "pointer_down",
+              point: info.point,
+              button: info.button,
+              shiftKey: info.shiftKey,
+              altKey: info.altKey,
+              ctrlKey: info.ctrlKey,
+              metaKey: info.metaKey,
+              pointerId: info.pointerId,
+              target: "shape",
+              shape,
+              isPen: false,
+              accelKey: info.ctrlKey || info.metaKey,
+            })
+            return
+          }
+          // Otherwise, use default select tool behavior
+          ;(tools.select as any).onPointerDown?.(info)
+        },
+      },
       VideoChat: {
         id: "VideoChat",
         icon: "video",