fix custom/sound right click menu

DDguan2010 · DDguan2010 · commit 924dde225ede · 2026-05-29T23:36:07.000+08:00
diff --git a/src/addons/addons/folders/userscript.js b/src/addons/addons/folders/userscript.js
@@ -138,6 +138,21 @@ export default async function ({ addon, console, msg }) {
     return null;
   };
 
+  const getSpriteSelectorComponent = (element) => {
+    const candidates = [element, element && element.querySelector && element.querySelector(".react-contextmenu-wrapper")];
+    for (const candidate of candidates) {
+      let fiber = candidate && candidate[addon.tab.traps.getInternalKey(candidate)];
+      while (fiber) {
+        const component = fiber.stateNode;
+        if (component && component.props && component.props.dragType) {
+          return component;
+        }
+        fiber = fiber.return;
+      }
+    }
+    return null;
+  };
+
   const openFolderAsset = {
     assetId: "&__sa_folders_folder",
     encodeDataURI() {
@@ -747,7 +762,8 @@ export default async function ({ addon, console, msg }) {
   await addon.tab.scratchClassReady();
   addon.tab.createEditorContextMenu((ctxType, ctx) => {
     if (ctxType !== "sprite" && ctxType !== "costume" && ctxType !== "sound") return;
-    const component = ctx.target[addon.tab.traps.getInternalKey(ctx.target)].return.return.return.stateNode;
+    const component = getSpriteSelectorComponent(ctx.target);
+    if (!component) return;
     const data = getItemData(component.props);
     if (!data) return;
     if (typeof data.folder === "string") {
@@ -872,6 +888,11 @@ export default async function ({ addon, console, msg }) {
   });
 
   const patchSpriteSelectorItem = (SpriteSelectorItem) => {
+    if (SpriteSelectorItem.prototype.saFoldersPatched) {
+      return;
+    }
+    SpriteSelectorItem.prototype.saFoldersPatched = true;
+
     for (const method of ["handleDelete", "handleDuplicate", "handleExport"]) {
       const original = SpriteSelectorItem.prototype[method];
       SpriteSelectorItem.prototype[method] = function (...args) {
@@ -1351,7 +1372,11 @@ export default async function ({ addon, console, msg }) {
       reduxCondition: (state) => state.scratchGui.editorTab.activeTabIndex !== 0 && !state.scratchGui.mode.isPlayerOnly,
     });
     const sortableHOCInstance = getSortableHOCFromElement(selectorListItem);
+    const spriteSelectorItemInstance = getSpriteSelectorComponent(selectorListItem);
     verifySortableHOC(sortableHOCInstance);
+    if (spriteSelectorItemInstance) {
+      patchSpriteSelectorItem(spriteSelectorItemInstance.constructor);
+    }
     patchSortableHOC(sortableHOCInstance.constructor, TYPE_ASSETS);
     sortableHOCInstance.saInitialSetup();
   }
diff --git a/src/addons/contextmenu.js b/src/addons/contextmenu.js
@@ -30,6 +30,19 @@ const findBodyContextMenuById = (tab, menuId) => {
   ) || null;
 };
 
+const getSpriteSelectorProps = (tab, element) => {
+  const candidates = [element, element && element.querySelector && element.querySelector(".react-contextmenu-wrapper")];
+  for (const candidate of candidates) {
+    let fiber = candidate && candidate[tab.traps.getInternalKey(candidate)];
+    while (fiber) {
+      const props = fiber.stateNode && fiber.stateNode.props;
+      if (props && props.dragType) return props;
+      fiber = fiber.return;
+    }
+  }
+  return null;
+};
+
 const onReactContextMenu = function (e) {
   if (!e.target) return;
   const ctxTarget = e.target.closest(".react-contextmenu-wrapper");
@@ -55,9 +68,9 @@ const onReactContextMenu = function (e) {
     extra.itemId = props.id;
     extra.targetId = props.targetId;
     type = `monitor_${props.mode}`;
-  } else if (ctxTarget[this.traps.getInternalKey(ctxTarget)]?.return?.return?.return?.stateNode?.props?.dragType) {
+  } else if (getSpriteSelectorProps(this, ctxTarget)) {
     // SpriteSelectorItem which despite its name is used for costumes, sounds, backpacked script etc
-    const props = ctxTarget[this.traps.getInternalKey(ctxTarget)].return.return.return.stateNode.props;
+    const props = getSpriteSelectorProps(this, ctxTarget);
     type = props.dragType.toLowerCase();
     extra.name = props.name;
     extra.itemId = props.id;
@@ -98,7 +111,9 @@ const onReactContextMenu = function (e) {
       display: "block",
     });
 
-    itemElem.addEventListener("click", (e) => {
+    const activateItem = (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
       e.stopPropagation();
       window.dispatchEvent(
         new CustomEvent("REACT_CONTEXTMENU_HIDE", {
@@ -108,6 +123,14 @@ const onReactContextMenu = function (e) {
         })
       );
       item.callback(ctx);
+    };
+
+    itemElem.addEventListener("mousedown", activateItem);
+    itemElem.addEventListener("click", (e) => {
+      if (e.detail !== 0) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
     });
 
     this.appendToSharedSpace({
diff --git a/src/components/box/box.jsx b/src/components/box/box.jsx
@@ -100,7 +100,10 @@ Box.propTypes = {
      * A callback function whose first parameter is the underlying dom elements.
      * This call back will be executed immediately after the component is mounted or unmounted
      */
-    componentRef: PropTypes.func,
+    componentRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({current: PropTypes.any})
+    ]),
     /** https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction */
     direction: PropTypes.oneOf([
         'row', 'row-reverse', 'column', 'column-reverse'
diff --git a/src/components/context-menu/context-menu.jsx b/src/components/context-menu/context-menu.jsx
@@ -14,21 +14,30 @@ const StyledContextMenu = props => (
 const StyledMenuItem = props => (
     <MenuItem
         {...props}
-        attributes={{className: styles.menuItem}}
+        attributes={{
+            className: styles.menuItem,
+            onMouseDown: props.onMouseDown
+        }}
     />
 );
 
 const BorderedMenuItem = props => (
     <MenuItem
         {...props}
-        attributes={{className: classNames(styles.menuItem, styles.menuItemBordered)}}
+        attributes={{
+            className: classNames(styles.menuItem, styles.menuItemBordered),
+            onMouseDown: props.onMouseDown
+        }}
     />
 );
 
 const DangerousMenuItem = props => (
     <MenuItem
         {...props}
-        attributes={{className: classNames(styles.menuItem, styles.menuItemBordered, styles.menuItemDanger)}}
+        attributes={{
+            className: classNames(styles.menuItem, styles.menuItemBordered, styles.menuItemDanger),
+            onMouseDown: props.onMouseDown
+        }}
     />
 );
 
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 
 import DeleteButton from '../delete-button/delete-button.jsx';
 import styles from './sprite-selector-item.css';
-import {ContextMenuTrigger} from 'react-contextmenu';
+import {ContextMenuTrigger, hideMenu} from 'react-contextmenu';
 import {DangerousMenuItem, ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
 import {FormattedMessage} from 'react-intl';
 
@@ -19,10 +19,23 @@ const SpriteSelectorItem = props => {
     }
     const menuId = contextMenuIdRef.current;
 
+    const handleMenuMouseDown = onClick => event => {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onClick(event);
+        hideMenu();
+    };
+
     const menu = props.onDuplicateButtonClick || props.onDeleteButtonClick || props.onExportButtonClick ? (
         <ContextMenu id={menuId}>
             {props.onDuplicateButtonClick ? (
-                <MenuItem onClick={props.onDuplicateButtonClick}>
+                <MenuItem
+                    onClick={null}
+                    onMouseDown={handleMenuMouseDown(props.onDuplicateButtonClick)}
+                >
                     <FormattedMessage
                         defaultMessage="duplicate"
                         description="Menu item to duplicate in the right click menu"
@@ -31,7 +44,10 @@ const SpriteSelectorItem = props => {
                 </MenuItem>
             ) : null}
             {props.onExportButtonClick ? (
-                <MenuItem onClick={props.onExportButtonClick}>
+                <MenuItem
+                    onClick={null}
+                    onMouseDown={handleMenuMouseDown(props.onExportButtonClick)}
+                >
                     <FormattedMessage
                         defaultMessage="export"
                         description="Menu item to export the selected item"
@@ -40,7 +56,10 @@ const SpriteSelectorItem = props => {
                 </MenuItem>
             ) : null }
             {props.onRenameButtonClick ? (
-                <MenuItem onClick={props.onRenameButtonClick}>
+                <MenuItem
+                    onClick={null}
+                    onMouseDown={handleMenuMouseDown(props.onRenameButtonClick)}
+                >
                     <FormattedMessage
                         defaultMessage="rename"
                         description="Menu item to rename an item"
@@ -49,7 +68,10 @@ const SpriteSelectorItem = props => {
                 </MenuItem>
             ) : null}
             {props.onDeleteButtonClick ? (
-                <DangerousMenuItem onClick={props.onDeleteButtonClick}>
+                <DangerousMenuItem
+                    onClick={null}
+                    onMouseDown={handleMenuMouseDown(props.onDeleteButtonClick)}
+                >
                     <FormattedMessage
                         defaultMessage="delete"
                         description="Menu item to delete in the right click menu"
@@ -112,7 +134,7 @@ const SpriteSelectorItem = props => {
                     />
                 ) : null }
             </ContextMenuTrigger>
-            {menu && typeof document !== 'undefined' ? ReactDOM.createPortal(menu, document.body) : menu}
+            {menu && typeof document !== 'undefined' ? ReactDOM.createPortal(menu, document.body) : null}
         </React.Fragment>
     );
 };
@@ -123,6 +145,7 @@ SpriteSelectorItem.propTypes = {
     costumeURL: PropTypes.string,
     details: PropTypes.string,
     disableContextMenu: PropTypes.bool,
+    dragType: PropTypes.string,
     // eslint-disable-next-line react/forbid-prop-types
     id: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
@@ -133,7 +133,8 @@ class CostumeTab extends React.Component {
         this.setState({selectedCostumeIndex: costumeIndex});
     }
     handleDeleteCostume (costumeIndex) {
-        const restoreCostumeFun = this.props.vm.deleteCostume(costumeIndex);
+        const index = typeof costumeIndex === 'number' ? costumeIndex : this.state.selectedCostumeIndex;
+        const restoreCostumeFun = this.props.vm.deleteCostume(index);
         this.props.dispatchUpdateRestore({
             restoreFun: restoreCostumeFun,
             deletedItem: 'Costume'
diff --git a/src/containers/sound-tab.jsx b/src/containers/sound-tab.jsx
@@ -89,9 +89,10 @@ class SoundTab extends React.Component {
     }
 
     handleDeleteSound (soundIndex) {
-        const restoreFun = this.props.vm.deleteSound(soundIndex);
-        if (soundIndex >= this.state.selectedSoundIndex) {
-            this.setState({selectedSoundIndex: Math.max(0, soundIndex - 1)});
+        const index = typeof soundIndex === 'number' ? soundIndex : this.state.selectedSoundIndex;
+        const restoreFun = this.props.vm.deleteSound(index);
+        if (index >= this.state.selectedSoundIndex) {
+            this.setState({selectedSoundIndex: Math.max(0, index - 1)});
         }
         this.props.dispatchUpdateRestore({restoreFun, deletedItem: 'Sound'});
     }
diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx
@@ -91,6 +91,9 @@ class SpriteSelectorItem extends React.PureComponent {
         }
     }
     handleDelete (e) {
+        if (e && e.preventDefault) {
+            e.preventDefault();
+        }
         if (e && e.stopPropagation) {
             e.stopPropagation(); // To prevent from bubbling back to handleClick
         }
diff --git a/src/lib/tw-packager-integration-hoc.jsx b/src/lib/tw-packager-integration-hoc.jsx
@@ -37,7 +37,10 @@ const PackagerIntegrationHOC = function (WrappedComponent) {
                 return;
             }
 
-            const packagerData = e.data.p4;
+            const packagerData = e.data && typeof e.data === 'object' ? e.data.p4 : null;
+            if (!packagerData || typeof packagerData !== 'object') {
+                return;
+            }
             if (packagerData.type !== 'ready-for-import') {
                 return;
             }
diff --git a/translations/messages/node_modules/scratch-paint/src/components/mode-tools/mode-tools.json b/translations/messages/node_modules/scratch-paint/src/components/mode-tools/mode-tools.json
diff --git a/translations/messages/node_modules/scratch-paint/src/lib/messages.json b/translations/messages/node_modules/scratch-paint/src/lib/messages.json

Original file line number	Diff line number	Diff line change
`@@ -89,9 +89,10 @@ class SoundTab extends React.Component {`
`89`	`89`	`}`
`90`	`90`
`91`	`91`	`handleDeleteSound (soundIndex) {`
`92`		`- const restoreFun = this.props.vm.deleteSound(soundIndex);`
`93`		`- if (soundIndex >= this.state.selectedSoundIndex) {`
`94`		`- this.setState({selectedSoundIndex: Math.max(0, soundIndex - 1)});`
	`92`	`+ const index = typeof soundIndex === 'number' ? soundIndex : this.state.selectedSoundIndex;`
	`93`	`+ const restoreFun = this.props.vm.deleteSound(index);`
	`94`	`+ if (index >= this.state.selectedSoundIndex) {`
	`95`	`+ this.setState({selectedSoundIndex: Math.max(0, index - 1)});`
`95`	`96`	`}`
`96`	`97`	`this.props.dispatchUpdateRestore({restoreFun, deletedItem: 'Sound'});`
`97`	`98`	`}`
Original file line number	Diff line number	Diff line change
`@@ -91,6 +91,9 @@ class SpriteSelectorItem extends React.PureComponent {`
`91`	`91`	`}`
`92`	`92`	`}`
`93`	`93`	`handleDelete (e) {`
	`94`	`+ if (e && e.preventDefault) {`
	`95`	`+ e.preventDefault();`
	`96`	`+ }`
`94`	`97`	`if (e && e.stopPropagation) {`
`95`	`98`	`e.stopPropagation(); // To prevent from bubbling back to handleClick`
`96`	`99`	`}`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,10 @@ const PackagerIntegrationHOC = function (WrappedComponent) {`
`37`	`37`	`return;`
`38`	`38`	`}`
`39`	`39`
`40`		`- const packagerData = e.data.p4;`
	`40`	`+ const packagerData = e.data && typeof e.data === 'object' ? e.data.p4 : null;`
	`41`	`+ if (!packagerData \|\| typeof packagerData !== 'object') {`
	`42`	`+ return;`
	`43`	`+ }`
`41`	`44`	`if (packagerData.type !== 'ready-for-import') {`
`42`	`45`	`return;`
`43`	`46`	`}`