Fix importing blocks with extensions from backpack

Author: GarboMuffin

src/containers/blocks.jsx

@@ -42,6 +42,7 @@ import {
 } from '../reducers/editor-tab';
 import AddonHooks from '../addons/hooks.js';
 import LoadScratchBlocksHOC from '../lib/tw-load-scratch-blocks-hoc.jsx';
+import {findTopBlock} from '../lib/backpack/code-payload.js';
 
 // TW: Strings we add to scratch-blocks are localized here
 const messages = defineMessages({
@@ -628,9 +629,9 @@ class Blocks extends React.Component {
     handleDrop (dragInfo) {
         fetch(dragInfo.payload.bodyUrl)
             .then(response => response.json())
-            .then(blocks => {
-                // based on https://github.com/ScratchAddons/ScratchAddons/pull/7028/files
-                const topBlock = blocks.find(block => block.topLevel);
+            .then(payload => {
+                // based on https://github.com/ScratchAddons/ScratchAddons/pull/7028
+                const topBlock = findTopBlock(payload);
                 if (topBlock) {
                     const metrics = this.props.workspaceMetrics.targets[this.props.vm.editingTarget.id];
                     if (metrics) {
@@ -643,7 +644,7 @@ class Blocks extends React.Component {
                         topBlock.y = (-metrics.scrollY - top + y) / metrics.scale;
                     }
                 }
-                return this.props.vm.shareBlocksToTarget(blocks, this.props.vm.editingTarget.id);
+                return this.props.vm.shareBlocksToTarget(payload, this.props.vm.editingTarget.id);
             })
             .then(() => {
                 this.props.vm.refreshWorkspace();

src/containers/target-pane.jsx

@@ -24,6 +24,7 @@ import {fetchSprite, fetchCode} from '../lib/backpack-api';
 import randomizeSpritePosition from '../lib/randomize-sprite-position';
 import downloadBlob from '../lib/download-blob';
 import log from '../lib/log';
+import {findTopBlock} from '../lib/backpack/code-payload.js';
 
 class TargetPane extends React.Component {
     constructor (props) {
@@ -166,9 +167,9 @@ class TargetPane extends React.Component {
             this.props.onReceivedBlocks(true);
         }
     }
-    shareBlocks (blocks, targetId, optFromTargetId) {
+    shareBlocks (payload, targetId, optFromTargetId) {
         // Position the top-level block based on the scroll position.
-        const topBlock = blocks.find(block => block.topLevel);
+        const topBlock = findTopBlock(payload);
         if (topBlock) {
             let metrics;
             if (this.props.workspaceMetrics.targets[targetId]) {
@@ -196,7 +197,7 @@ class TargetPane extends React.Component {
             topBlock.y = posY / scale;
         }
 
-        return this.props.vm.shareBlocksToTarget(blocks, targetId, optFromTargetId);
+        return this.props.vm.shareBlocksToTarget(payload, targetId, optFromTargetId);
     }
     handleDrop (dragInfo) {
         const {sprite: targetId} = this.props.hoveredTarget;

src/lib/backpack/code-payload.js

@@ -20,4 +20,12 @@ const codePayload = ({blockObjects, topBlockId}) => {
         });
 };
 
-export default codePayload;
+const findTopBlock = payload => {
+    const blocks = payload.extensionURLs ? payload.blocks : payload;
+    return blocks.find(i => i.topLevel);
+};
+
+export {
+    codePayload as default,
+    findTopBlock
+};