@atlaskit/editor-plugin-paste 12.1.1 → 12.1.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-paste
 
+## 12.1.3
+
+### Patch Changes
+
+- [`dbe0d03cebcd7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dbe0d03cebcd7) -
+  Fix media copy/paste from rendered comments: only hoist external images from mediaSingle wrappers,
+  preserve internal media with valid file references so ProseMirror can reconstruct proper media
+  nodes. Remove debug console.log.
+- Updated dependencies
+
+## 12.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/media.js

@@ -146,6 +146,29 @@ function canContainImage(element) {
   return VALID_TAGS_CONTAINER.indexOf(element.tagName) !== -1;
 }
 
+/**
+ * Determines whether an `<img>` inside a mediaSingle wrapper should be hoisted
+ * out of the wrapper and treated as a standalone external image.
+ *
+ * This should only happen when:
+ * - The image source is external (data-source="external"), and
+ * - The media wrapper has no valid file reference (no data-id), meaning
+ *   ProseMirror cannot reconstruct a proper internal media node from the wrapper.
+ *
+ * When the wrapper has a valid file reference (e.g. internal media from Jira),
+ * we leave the wrapper intact so ProseMirror can reconstruct a proper internal media node with the file reference and fetch fresh auth tokens.
+ */
+function shouldHoistFromMediaSingle(imageTag) {
+  var _mediaNode$hasAttribu;
+  var isExternalSource = imageTag.getAttribute('data-source') === 'external';
+  if (!isExternalSource) {
+    return false;
+  }
+  var mediaNode = imageTag.closest('[data-node-type="media"]');
+  var hasFileReference = (_mediaNode$hasAttribu = mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.hasAttribute('data-id')) !== null && _mediaNode$hasAttribu !== void 0 ? _mediaNode$hasAttribu : false;
+  return !hasFileReference;
+}
+
 /**
  * Given a html string, we attempt to hoist any nested `<img>` tags,
  * not directly wrapped by a `<div>` as ProseMirror no-op's
@@ -188,6 +211,24 @@ var unwrapNestedMediaElements = exports.unwrapNestedMediaElements = function unw
       return;
     }
 
+    // when copying a jira comment that contains external image (data-source="external"),
+    // the 'media' div is like this:
+    // <div data-node-type="media"> has no data-id,
+    // But when copying a jira comment that contains image that was uploaded to Jira, the div is like this:
+    // <div data-node-type="media" data-type="file" data-id="dce9c14b-b857-41fd-9452-5f4ba3a4f679" data-collection="" data-file-name="Screenshot 2026-05-26 at 4.41.05 pm.png" data-file-size="1354355" data-file-mime-type="image/png">
+    // ProseMirror fails to parse the media node because it has no data-id,
+    // so we hoist the <img> to replace the entire mediaSingle wrapper
+    // so the editor can treat it as a plain external image and render/re-upload it correctly.
+    var mediaSingleWrapper = imageTag.closest('[data-node-type="mediaSingle"]');
+    if (mediaSingleWrapper && shouldHoistFromMediaSingle(imageTag) && (0, _expValEquals.expValEquals)('fix_copy_paste_external_media_renderer_to_editor', 'isEnabled', true)) {
+      // Hoist the <img> to replace the entire mediaSingle wrapper
+      if (mediaSingleWrapper.parentElement) {
+        mediaSingleWrapper.parentElement.insertBefore(imageTag, mediaSingleWrapper);
+        mediaSingleWrapper.remove();
+        return;
+      }
+    }
+
     // If either the parent or the image itself contains styles that would make
     // them invisible on copy, dont paste them.
     if (isElementInvisible(mediaParent) || isElementInvisible(imageTag)) {

package/dist/es2019/pm-plugins/media.js

@@ -142,6 +142,29 @@ function canContainImage(element) {
   return VALID_TAGS_CONTAINER.indexOf(element.tagName) !== -1;
 }
 
+/**
+ * Determines whether an `<img>` inside a mediaSingle wrapper should be hoisted
+ * out of the wrapper and treated as a standalone external image.
+ *
+ * This should only happen when:
+ * - The image source is external (data-source="external"), and
+ * - The media wrapper has no valid file reference (no data-id), meaning
+ *   ProseMirror cannot reconstruct a proper internal media node from the wrapper.
+ *
+ * When the wrapper has a valid file reference (e.g. internal media from Jira),
+ * we leave the wrapper intact so ProseMirror can reconstruct a proper internal media node with the file reference and fetch fresh auth tokens.
+ */
+function shouldHoistFromMediaSingle(imageTag) {
+  var _mediaNode$hasAttribu;
+  const isExternalSource = imageTag.getAttribute('data-source') === 'external';
+  if (!isExternalSource) {
+    return false;
+  }
+  const mediaNode = imageTag.closest('[data-node-type="media"]');
+  const hasFileReference = (_mediaNode$hasAttribu = mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.hasAttribute('data-id')) !== null && _mediaNode$hasAttribu !== void 0 ? _mediaNode$hasAttribu : false;
+  return !hasFileReference;
+}
+
 /**
  * Given a html string, we attempt to hoist any nested `<img>` tags,
  * not directly wrapped by a `<div>` as ProseMirror no-op's
@@ -184,6 +207,24 @@ export const unwrapNestedMediaElements = html => {
       return;
     }
 
+    // when copying a jira comment that contains external image (data-source="external"),
+    // the 'media' div is like this:
+    // <div data-node-type="media"> has no data-id,
+    // But when copying a jira comment that contains image that was uploaded to Jira, the div is like this:
+    // <div data-node-type="media" data-type="file" data-id="dce9c14b-b857-41fd-9452-5f4ba3a4f679" data-collection="" data-file-name="Screenshot 2026-05-26 at 4.41.05 pm.png" data-file-size="1354355" data-file-mime-type="image/png">
+    // ProseMirror fails to parse the media node because it has no data-id,
+    // so we hoist the <img> to replace the entire mediaSingle wrapper
+    // so the editor can treat it as a plain external image and render/re-upload it correctly.
+    const mediaSingleWrapper = imageTag.closest('[data-node-type="mediaSingle"]');
+    if (mediaSingleWrapper && shouldHoistFromMediaSingle(imageTag) && expValEquals('fix_copy_paste_external_media_renderer_to_editor', 'isEnabled', true)) {
+      // Hoist the <img> to replace the entire mediaSingle wrapper
+      if (mediaSingleWrapper.parentElement) {
+        mediaSingleWrapper.parentElement.insertBefore(imageTag, mediaSingleWrapper);
+        mediaSingleWrapper.remove();
+        return;
+      }
+    }
+
     // If either the parent or the image itself contains styles that would make
     // them invisible on copy, dont paste them.
     if (isElementInvisible(mediaParent) || isElementInvisible(imageTag)) {

package/dist/esm/pm-plugins/media.js

@@ -137,6 +137,29 @@ function canContainImage(element) {
   return VALID_TAGS_CONTAINER.indexOf(element.tagName) !== -1;
 }
 
+/**
+ * Determines whether an `<img>` inside a mediaSingle wrapper should be hoisted
+ * out of the wrapper and treated as a standalone external image.
+ *
+ * This should only happen when:
+ * - The image source is external (data-source="external"), and
+ * - The media wrapper has no valid file reference (no data-id), meaning
+ *   ProseMirror cannot reconstruct a proper internal media node from the wrapper.
+ *
+ * When the wrapper has a valid file reference (e.g. internal media from Jira),
+ * we leave the wrapper intact so ProseMirror can reconstruct a proper internal media node with the file reference and fetch fresh auth tokens.
+ */
+function shouldHoistFromMediaSingle(imageTag) {
+  var _mediaNode$hasAttribu;
+  var isExternalSource = imageTag.getAttribute('data-source') === 'external';
+  if (!isExternalSource) {
+    return false;
+  }
+  var mediaNode = imageTag.closest('[data-node-type="media"]');
+  var hasFileReference = (_mediaNode$hasAttribu = mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.hasAttribute('data-id')) !== null && _mediaNode$hasAttribu !== void 0 ? _mediaNode$hasAttribu : false;
+  return !hasFileReference;
+}
+
 /**
  * Given a html string, we attempt to hoist any nested `<img>` tags,
  * not directly wrapped by a `<div>` as ProseMirror no-op's
@@ -179,6 +202,24 @@ export var unwrapNestedMediaElements = function unwrapNestedMediaElements(html)
       return;
     }
 
+    // when copying a jira comment that contains external image (data-source="external"),
+    // the 'media' div is like this:
+    // <div data-node-type="media"> has no data-id,
+    // But when copying a jira comment that contains image that was uploaded to Jira, the div is like this:
+    // <div data-node-type="media" data-type="file" data-id="dce9c14b-b857-41fd-9452-5f4ba3a4f679" data-collection="" data-file-name="Screenshot 2026-05-26 at 4.41.05 pm.png" data-file-size="1354355" data-file-mime-type="image/png">
+    // ProseMirror fails to parse the media node because it has no data-id,
+    // so we hoist the <img> to replace the entire mediaSingle wrapper
+    // so the editor can treat it as a plain external image and render/re-upload it correctly.
+    var mediaSingleWrapper = imageTag.closest('[data-node-type="mediaSingle"]');
+    if (mediaSingleWrapper && shouldHoistFromMediaSingle(imageTag) && expValEquals('fix_copy_paste_external_media_renderer_to_editor', 'isEnabled', true)) {
+      // Hoist the <img> to replace the entire mediaSingle wrapper
+      if (mediaSingleWrapper.parentElement) {
+        mediaSingleWrapper.parentElement.insertBefore(imageTag, mediaSingleWrapper);
+        mediaSingleWrapper.remove();
+        return;
+      }
+    }
+
     // If either the parent or the image itself contains styles that would make
     // them invisible on copy, dont paste them.
     if (isElementInvisible(mediaParent) || isElementInvisible(imageTag)) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-paste",
-	"version": "12.1.1",
+	"version": "12.1.3",
 	"description": "Paste plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,29 +34,29 @@
 		"@atlaskit/editor-plugin-analytics": "^11.0.0",
 		"@atlaskit/editor-plugin-annotation": "^11.0.0",
 		"@atlaskit/editor-plugin-better-type-history": "^11.0.0",
-		"@atlaskit/editor-plugin-card": "^17.1.0",
+		"@atlaskit/editor-plugin-card": "^17.3.0",
 		"@atlaskit/editor-plugin-expand": "^12.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^10.0.0",
 		"@atlaskit/editor-plugin-list": "^13.0.0",
-		"@atlaskit/editor-plugin-media": "^13.1.0",
-		"@atlaskit/editor-plugin-mentions": "^13.1.0",
+		"@atlaskit/editor-plugin-media": "^13.4.0",
+		"@atlaskit/editor-plugin-mentions": "^13.3.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-tables": "^2.10.0",
-		"@atlaskit/flag": "^17.12.0",
+		"@atlaskit/flag": "^17.13.0",
 		"@atlaskit/icon": "^35.4.0",
 		"@atlaskit/insm": "^0.4.0",
 		"@atlaskit/media-client": "^36.3.0",
 		"@atlaskit/media-common": "^13.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^89.0.0",
-		"@atlaskit/tokens": "^13.1.0",
+		"@atlaskit/tmp-editor-statsig": "^91.0.0",
+		"@atlaskit/tokens": "^13.3.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.2.0",
+		"@atlaskit/editor-common": "^115.7.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"