From b746f900263968a273b4fadde5816db9defa8623 Mon Sep 17 00:00:00 2001
From: Manuel Martin <manmartin@mozilla.com>
Date: Thu, 30 Nov 2023 11:46:07 +0100
Subject: [PATCH] Look for the holdable media root when grabbing an object

---
 src/systems/hold-system.js |  7 ++++---
 src/utils/load-image.tsx   | 10 +++++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/systems/hold-system.js b/src/systems/hold-system.js
index 5d3ad4ccdf..72316e506a 100644
--- a/src/systems/hold-system.js
+++ b/src/systems/hold-system.js
@@ -13,13 +13,14 @@ import {
   HeldHandLeft,
   AEntity,
   Networked,
-  MediaContentBounds
+  MediaLoader,
+  Deletable
 } from "../bit-components";
 import { canMove } from "../utils/permissions-utils";
 import { canMove as canMoveEntity } from "../utils/bit-permissions-utils";
 import { isPinned } from "../bit-systems/networking";
 import { takeOwnership } from "../utils/take-ownership";
-import { findAncestorWithComponent } from "../utils/bit-utils";
+import { findAncestorWithComponents } from "../utils/bit-utils";
 
 const GRAB_REMOTE_RIGHT = paths.actions.cursor.right.grab;
 const DROP_REMOTE_RIGHT = paths.actions.cursor.right.drop;
@@ -78,7 +79,7 @@ function grab(world, userinput, queryHovered, held, grabPath) {
   const hovered = queryHovered(world)[0];
 
   // Special path for Dropped/Pasted Media with new loader enabled. Check the comment above.
-  const mediaRoot = findAncestorWithComponent(world, MediaContentBounds, hovered);
+  const mediaRoot = findAncestorWithComponents(world, [Deletable, MediaLoader, Holdable], hovered);
   const target = mediaRoot ? mediaRoot : hovered;
   const isEntityPinned = isPinned(target) || isAEntityPinned(world, target);
 
diff --git a/src/utils/load-image.tsx b/src/utils/load-image.tsx
index d3c0ce0c5f..17730faf30 100644
--- a/src/utils/load-image.tsx
+++ b/src/utils/load-image.tsx
@@ -60,5 +60,13 @@ export function* loadImage(world: HubsWorld, eid: EntityID, url: string, content
 
   ObjectMenuTarget.flags[eid] |= ObjectMenuTargetFlags.Flat;
 
-  return renderAsEntity(world, <entity name="Image" image={imageDef} objectMenuTarget={{ isFlat: true }} />);
+  return renderAsEntity(
+    world,
+    <entity
+      name="Image"
+      image={imageDef}
+      objectMenuTarget={{ isFlat: true }}
+      grabbable={{ cursor: true, hand: false }}
+    />
+  );
 }