Add iframe interactions

Author: Yann Leflour

ui-sketcher-webview/src/PreviewShape.tsx

@@ -50,8 +50,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
     );
 
     const isLoading = false;
-    // @ts-expect-error TODO: remove this when stable v2
-    const isEditing = useIsEditing();
+    const isEditing = useIsEditing(shape.id);
     const { source } = shape.props;
 
     return (
@@ -73,18 +72,49 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
             <DefaultSpinner />
           </div>
         ) : (
-          <iframe
-            src={source}
-            width={toDomPrecision(shape.props.w)}
-            height={toDomPrecision(shape.props.h)}
-            draggable={false}
-            style={{
-              pointerEvents: isEditing ? "auto" : "none",
-              boxShadow,
-              border: "1px solid var(--color-panel-contrast)",
-              borderRadius: "var(--radius-2)",
-            }}
-          />
+          <>
+            <iframe
+              src={source}
+              width={toDomPrecision(shape.props.w)}
+              height={toDomPrecision(shape.props.h)}
+              draggable={false}
+              style={{
+                pointerEvents: isEditing ? "auto" : "none",
+                boxShadow,
+                border: "1px solid var(--color-panel-contrast)",
+                borderRadius: "var(--radius-2)",
+              }}
+            />
+            <div
+              style={{
+                textAlign: "center",
+                position: "absolute",
+                bottom: isEditing ? -40 : 0,
+                padding: 4,
+                fontFamily: "inherit",
+                fontSize: 12,
+                left: 0,
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                pointerEvents: "none",
+              }}
+            >
+              <span
+                style={{
+                  background: "var(--color-panel)",
+                  padding: "4px 12px",
+                  borderRadius: 99,
+                  border: "1px solid var(--color-muted-1)",
+                }}
+              >
+                {isEditing
+                  ? "Click the canvas to exit"
+                  : "Double click to interact"}
+              </span>
+            </div>
+          </>
         )}
       </HTMLContainer>
     );