fix: remove foreignObject from bubble canvas clone to prevent tainted canvas

packages/scratch-gui/src/lib/blocks-screenshot.js

@@ -171,10 +171,14 @@ const buildExportSVG = async function (workspace, bbox, scale, width, height, pa
     canvasClone.setAttribute('transform', canvasTransform);
     svg.appendChild(canvasClone);
 
-    // Clone bubble canvas (comment bubbles) with the same transform
+    // Clone bubble canvas (comment bubbles) with the same transform.
+    // Remove <foreignObject> elements which contain HTML <textarea> for editing;
+    // they cause tainted canvas errors when the SVG is loaded via blob URL.
+    // The visible comment text is already in <text> elements, so nothing is lost.
     const bubbleCanvas = workspace.svgBubbleCanvas_;
     if (bubbleCanvas && bubbleCanvas.children.length > 0) {
         const bubbleClone = bubbleCanvas.cloneNode(true);
+        bubbleClone.querySelectorAll('foreignObject').forEach(fo => fo.remove());
         bubbleClone.setAttribute('transform', canvasTransform);
         svg.appendChild(bubbleClone);
     }

packages/scratch-gui/test/unit/lib/blocks-screenshot.test.js

@@ -12,7 +12,7 @@ jest.mock('../../../src/lib/download-blob', () => jest.fn());
 import downloadBlob from '../../../src/lib/download-blob';
 
 // Helper: create a mock Blockly workspace
-const makeMockWorkspace = ({boundingBox = null, scale = 1, bubbleChildren = 0} = {}) => {
+const makeMockWorkspace = ({boundingBox = null, scale = 1, bubbleChildren = 0, withForeignObject = false} = {}) => {
     const svgNS = 'http://www.w3.org/2000/svg';
     const svg = document.createElementNS(svgNS, 'svg');
     const group = document.createElementNS(svgNS, 'g');
@@ -27,6 +27,13 @@ const makeMockWorkspace = ({boundingBox = null, scale = 1, bubbleChildren = 0} =
         rect.setAttribute('height', '20');
         bubbleGroup.appendChild(rect);
     }
+    if (withForeignObject) {
+        const fo = document.createElementNS(svgNS, 'foreignObject');
+        fo.setAttribute('class', 'scratchCommentForeignObject');
+        const body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body');
+        fo.appendChild(body);
+        bubbleGroup.appendChild(fo);
+    }
     return {
         getBlocksBoundingBox: jest.fn(() => boundingBox),
         scale,
@@ -166,6 +173,17 @@ describe('buildExportSVG', () => {
         expect(rectMatches.length).toBeGreaterThanOrEqual(4);
     });
 
+    test('strips foreignObject elements from bubble canvas clone to avoid tainted canvas', async () => {
+        const workspace = makeMockWorkspace({
+            boundingBox: {x: 0, y: 0, width: 200, height: 100},
+            bubbleChildren: 1,
+            withForeignObject: true
+        });
+        const bbox = {x: 0, y: 0, width: 200, height: 100};
+        const svgStr = await buildExportSVG(workspace, bbox, 1, 232, 132);
+        expect(svgStr).not.toMatch(/foreignObject/);
+    });
+
     test('does not include bubble canvas when it has no children', async () => {
         const workspace = makeMockWorkspace({
             boundingBox: {x: 0, y: 0, width: 200, height: 100},