directly import embedded blocks from a smart pic if the pic is dragged and dropped onto a scripting area or palette

otherwise import the pic as costume (with embedded blocks)

HISTORY.md

@@ -56,6 +56,9 @@
 * **Translation Updates:**
     * German
 
+### 2022-07-04
+* blocks, gui: directly import embedded blocks from a smart pic if the pic is dragged and dropped onto a scripting area or palette - otherwise import the pic as costume (with embedded blocks)
+
 ### 2022-07-01
 * extensions: added a slash-suffix to the EDC url allow-list entry 
 

snap.html

@@ -16,11 +16,11 @@
         <script src="src/morphic.js?version=2022-04-26"></script>
         <script src="src/symbols.js?version=2021-03-03"></script>
         <script src="src/widgets.js?version=2021-17-09"></script>
-        <script src="src/blocks.js?version=2022-06-28"></script>
+        <script src="src/blocks.js?version=2022-07-04"></script>
         <script src="src/threads.js?version=2022-06-29"></script>
         <script src="src/objects.js?version=2022-06-28"></script>
         <script src="src/scenes.js?version=2022-03-03"></script>
-        <script src="src/gui.js?version=2022-05-19"></script>
+        <script src="src/gui.js?version=2022-07-04"></script>
         <script src="src/paint.js?version=2021-07-05"></script>
         <script src="src/lists.js?version=2022-05-19"></script>
         <script src="src/byob.js?version=2022-06-29"></script>

src/blocks.js

@@ -161,7 +161,7 @@ CostumeIconMorph, SoundIconMorph, SVG_Costume, embedMetadataPNG*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.blocks = '2022-June-28';
+modules.blocks = '2022-July-04';
 
 var SyntaxElementMorph;
 var BlockMorph;
@@ -8537,6 +8537,16 @@ ScriptsMorph.prototype.selectForEdit = function () {
     return this;
 };
 
+ScriptsMorph.prototype.droppedImage = function (aCanvas, name, embeddedData) {
+    var ide = this.parentThatIsA(IDE_Morph),
+        blockEditor = this.parentThatIsA(BlockEditorMorph);
+    if (!ide && blockEditor) {
+        ide = blockEditor.target.parentThatIsA(IDE_Morph);
+    }
+    if (!ide) {return; }
+    ide.droppedImage(aCanvas, name, embeddedData, 'scripts');
+};
+
 // ScriptsMorph keyboard support
 
 ScriptsMorph.prototype.edit = function (pos) {

src/gui.js

@@ -80,13 +80,13 @@ BlockLabelPlaceHolderMorph, SpeechBubbleMorph, XML_Element, WatcherMorph, WHITE,
 BlockRemovalDialogMorph,TableMorph, isSnapObject, isRetinaEnabled, SliderMorph,
 disableRetinaSupport, enableRetinaSupport, isRetinaSupported, MediaRecorder,
 Animation, BoxMorph, BlockDialogMorph, RingMorph, Project, ZERO, BLACK,
-BlockVisibilityDialogMorph, ThreadManager*/
+BlockVisibilityDialogMorph, ThreadManager, isString*/
 
 /*jshint esversion: 6*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.gui = '2022-May-19';
+modules.gui = '2022-July-04';
 
 // Declarations
 
@@ -1309,6 +1309,10 @@ IDE_Morph.prototype.createCategories = function () {
     this.categories.buttons = [];
     this.categories.isVisible = flag;
 
+    this.categories.droppedImage = (aCanvas, name, embeddedData) => {
+        this.droppedImage(aCanvas, name, embeddedData, 'categories');
+    };
+
     this.categories.refresh = function () {
         this.buttons.forEach(cat => {
             cat.refresh();
@@ -1594,6 +1598,10 @@ IDE_Morph.prototype.createPalette = function (forSearching) {
         }
     };
 
+    this.palette.droppedImage = (aCanvas, name, embeddedData) => {
+        this.droppedImage(aCanvas, name, embeddedData, 'palette');
+    };
+
     this.palette.setWidth(this.logo.width());
     this.add(this.palette);
     return this.palette;
@@ -2471,7 +2479,7 @@ IDE_Morph.prototype.endBulkDrop = function () {
     this.bulkDropInProgress = false;
 };
 
-IDE_Morph.prototype.droppedImage = function (aCanvas, name, embeddedData) {
+IDE_Morph.prototype.droppedImage = function (aCanvas, name, embeddedData, src) {
     var costume = new Costume(
         aCanvas,
         this.currentSprite.newCostumeName(
@@ -2491,6 +2499,18 @@ IDE_Morph.prototype.droppedImage = function (aCanvas, name, embeddedData) {
         return;
     }
 
+    // directly import embedded blocks if the image was dropped on
+    // a scripting area or the palette, otherwise import as costume
+    // (with embedded data)
+    if (isString(embeddedData) &&
+        ['scripts', 'palette', 'categories'].includes(src) &&
+        embeddedData[0] === '<' &&
+        ['blocks', 'block', 'script'].some(tag =>
+            embeddedData.slice(1).startsWith(tag))
+    ) {
+        return this.droppedText(embeddedData, name, '');
+    }
+
     costume.embeddedData = embeddedData || null;
     this.currentSprite.addCostume(costume);
     this.currentSprite.wearCostume(costume);