Fixed the pasting of images to not have to be in its own slot; it can…

… be in the middle of an existing text slot with content (which is then split correctly).

src/components/LabelSlot.vue

@@ -1121,13 +1121,10 @@ export default Vue.extend({
             const inputSpanField = document.getElementById(this.UID) as HTMLSpanElement;
             const {selectionStart, selectionEnd} = getFocusedEditableSlotTextSelectionStartEnd(this.UID);
             if (type.startsWith("image")) {
-                // We currently only allow image paste if it will occupy whole slot:
-                if (selectionStart == 0 && selectionEnd == (inputSpanField.textContent?.length ?? 0)) {
-                    this.appStore.addNewSlot(parseLabelSlotUID(this.UID), type, "", "", SlotType.media, false, content);
-                    this.$nextTick(() => {
-                        this.appStore.leftRightKey({key: "ArrowRight"});
-                    });
-                }
+                this.appStore.addNewSlot(parseLabelSlotUID(this.UID), type, inputSpanField.textContent?.substring(0, selectionStart) ?? "", inputSpanField.textContent?.substring(selectionEnd) ?? "", SlotType.media, false, content);
+                this.$nextTick(() => {
+                    this.appStore.leftRightKey({key: "ArrowRight"});
+                });
                 return;
             }
             

src/helpers/editor.ts

@@ -247,7 +247,9 @@ export function getFrameLabelSlotLiteralCodeAndFocus(frameLabelStruct: HTMLEleme
                 imageLiterals.push({code: code, mediaType: spanElement.getAttribute("data-mediaType") ?? ""});
             }
             // Media literals are considered to be one character wise:
-            focusSpanPos += 1;
+            if (!foundFocusSpan) {
+                focusSpanPos += 1;
+            }
             return;
         }
         if(delimiters && (delimiters.startSlotUID == spanElement.id || delimiters.stopSlotUID == spanElement.id)){

tests/cypress/e2e/media-literals.cy.ts

@@ -213,6 +213,30 @@ describe("Paste image literals", () => {
             checkGraphicsCanvasContent("paste-and-color-pick-with-delete");
         });
     });
+
+    it("Can paste image in existing slot", () => {
+        cy.readFile("public/graphics_images/cat-test.jpg", null).then((catJPEG) => {
+            focusEditorPasteAndClear();
+            enterImports();
+            cy.get("body").type(" set_background(dontget_pixel(270,150");
+            cy.wait(1000);
+            // Then we go back to between "dont" and "get":
+            for (let i = 0; i < "get_pixel(270,150".length; i++) {
+                cy.get("body").type("{leftarrow}");
+            }
+            // Then we paste:
+            (cy.focused() as any).paste(catJPEG, "image/jpeg");
+            cy.wait(1000);
+            // Then we type a dot:
+            cy.get("body").type(".");
+            // Then we go back to before the image and delete the "dont":
+            cy.get("body").type("{leftarrow}{leftarrow}{backspace}{backspace}{backspace}{backspace}");
+            cy.wait(1000);
+
+            executeCode();
+            checkGraphicsCanvasContent("paste-in-text");
+        });
+    });
 
     // TODO check the downloaded Python file (and check for double data: item) (and ideally re-load the images as images from the .py)
 });