@atlaskit/editor-plugin-media 2.3.21 → 2.3.22

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-media
 
+## 2.3.22
+
+### Patch Changes
+
+- [#137128](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137128)
+  [`9717d76a633ca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9717d76a633ca) -
+  [ux] Fix media custom toolbar position issue
+- [#137153](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137153)
+  [`105ebf2f4f54b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/105ebf2f4f54b) -
+  [ED-27125] This change is adding a feature gate to use the functional components for media nodes
+  which will resolve the bug of attachment duplication when copying and pasting.
+- Updated dependencies
+
 ## 2.3.21
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaGroup.js

@@ -348,7 +348,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
             if (!mediaProvider) {
               return null;
             }
-            if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single')) {
+            if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single') || (0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single_jira')) {
               return /*#__PURE__*/_react.default.createElement(_mediaGroupNext.MediaGroupNext, {
                 node: _this3.node,
                 getPos: getPos,

package/dist/cjs/nodeviews/mediaSingle.js

@@ -565,7 +565,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
   var mediaProvider = (0, _react.useMemo)(function () {
     return mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined;
   }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
-  if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single')) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single') || (0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single_jira')) {
     return (0, _react2.jsx)(_mediaSingleNext.MediaSingleNodeNext, {
       width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
       lineLength: (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0,

package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -1075,7 +1075,7 @@ var ResizableMediaSingleToggle = function ResizableMediaSingleToggle(_ref9) {
     viewMediaClientConfig = _ref9.viewMediaClientConfig,
     width = _ref9.width,
     forceHandlePositioning = _ref9.forceHandlePositioning;
-  if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single')) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single') || (0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single_jira')) {
     return (0, _react2.jsx)(ResizableMediaSingleNextFunctional, {
       allowBreakoutSnapPoints: allowBreakoutSnapPoints
       // eslint-disable-next-line react/no-children-prop

package/dist/cjs/ui/toolbar/alt-text.js

@@ -95,7 +95,8 @@ var getAltTextDropdownOption = exports.getAltTextDropdownOption = function getAl
       onClick: (0, _commands.openMediaAltTextMenu)(editorAnalyticsAPI),
       icon: /*#__PURE__*/_react.default.createElement(_text.default, {
         label: ""
-      })
+      }),
+      testId: 'media-alt-text-dropdown-option'
     }];
   }
   return [];

package/dist/cjs/ui/toolbar/index.js

@@ -720,11 +720,14 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     return;
   }
   var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
+  var isSelectedNodeMediaSingle = state.selection instanceof _state2.NodeSelection && state.selection.node.type === mediaSingle;
   var baseToolbar = {
     title: 'Media floating controls',
     nodeType: nodeType,
     getDomRef: function getDomRef() {
-      return mediaPluginState.element;
+      var _mediaPluginState$ele;
+      var element = isSelectedNodeMediaSingle && (0, _platformFeatureFlags.fg)('platform_editor_media_single_toolbar_target') ? ((_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(".".concat(_styles.MediaSingleNodeSelector))) || mediaPluginState.element : mediaPluginState.element;
+      return element;
     }
   };
   if (allowLinking && mediaLinkingState && mediaLinkingState.visible && (0, _linking3.shouldShowMediaLinkToolbar)(state)) {
@@ -767,21 +770,21 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     var _pluginInjectionApi$a8, _pluginInjectionApi$f2;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
-      var _mediaPluginState$ele;
+      var _mediaPluginState$ele2;
       var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
+      return (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(selector);
     };
     items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     items = (0, _mediaInline2.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
     baseToolbar.getDomRef = function () {
-      var _mediaPluginState$ele2;
+      var _mediaPluginState$ele3;
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaSingleNodeSelector));
+      var element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(".".concat(_styles.MediaSingleNodeSelector));
       return element || mediaPluginState.element;
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);

package/dist/es2019/nodeviews/mediaGroup.js

@@ -296,7 +296,7 @@ class MediaGroupNodeView extends ReactNodeView {
           if (!mediaProvider) {
             return null;
           }
-          if (fg('platform_editor_react18_phase2__media_single')) {
+          if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
             return /*#__PURE__*/React.createElement(MediaGroupNext, {
               node: this.node,
               getPos: getPos,

package/dist/es2019/nodeviews/mediaSingle.js

@@ -480,7 +480,7 @@ const MediaSingleNodeWrapper = ({
     editorViewModeState
   } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']);
   const mediaProvider = useMemo(() => mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
-  if (fg('platform_editor_react18_phase2__media_single')) {
+  if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
     return jsx(MediaSingleNodeNext, {
       width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
       lineLength: (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0,

package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -983,7 +983,7 @@ const ResizableMediaSingleToggle = ({
   width,
   forceHandlePositioning
 }) => {
-  if (fg('platform_editor_react18_phase2__media_single')) {
+  if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
     return jsx(ResizableMediaSingleNextFunctional, {
       allowBreakoutSnapPoints: allowBreakoutSnapPoints
       // eslint-disable-next-line react/no-children-prop

package/dist/es2019/ui/toolbar/alt-text.js

@@ -91,7 +91,8 @@ export const getAltTextDropdownOption = (state, formatMessage, allowAltTextOnIma
       onClick: openMediaAltTextMenu(editorAnalyticsAPI),
       icon: /*#__PURE__*/React.createElement(TextIcon, {
         label: ""
-      })
+      }),
+      testId: 'media-alt-text-dropdown-option'
     }];
   }
   return [];

package/dist/es2019/ui/toolbar/index.js

@@ -717,10 +717,15 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     return;
   }
   const nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
+  const isSelectedNodeMediaSingle = state.selection instanceof NodeSelection && state.selection.node.type === mediaSingle;
   const baseToolbar = {
     title: 'Media floating controls',
     nodeType,
-    getDomRef: () => mediaPluginState.element
+    getDomRef: () => {
+      var _mediaPluginState$ele;
+      const element = isSelectedNodeMediaSingle && fg('platform_editor_media_single_toolbar_target') ? ((_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(`.${MediaSingleNodeSelector}`)) || mediaPluginState.element : mediaPluginState.element;
+      return element;
+    }
   };
   if (allowLinking && mediaLinkingState && mediaLinkingState.visible && shouldShowMediaLinkToolbar(state)) {
     const linkingToolbar = getLinkingToolbar(baseToolbar, mediaLinkingState, state, intl, pluginInjectionApi, providerFactory);
@@ -764,21 +769,21 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     var _pluginInjectionApi$a8, _pluginInjectionApi$f3, _pluginInjectionApi$f4;
     const mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = () => {
-      var _mediaPluginState$ele;
+      var _mediaPluginState$ele2;
       const selector = mediaFilmstripItemDOMSelector(mediaOffset);
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
+      return (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(selector);
     };
     items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
     baseToolbar.getDomRef = () => {
-      var _mediaPluginState$ele2;
+      var _mediaPluginState$ele3;
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      const element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(`.${MediaSingleNodeSelector}`);
+      const element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(`.${MediaSingleNodeSelector}`);
       return element || mediaPluginState.element;
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);

package/dist/esm/nodeviews/mediaGroup.js

@@ -341,7 +341,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
             if (!mediaProvider) {
               return null;
             }
-            if (fg('platform_editor_react18_phase2__media_single')) {
+            if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
               return /*#__PURE__*/React.createElement(MediaGroupNext, {
                 node: _this3.node,
                 getPos: getPos,

package/dist/esm/nodeviews/mediaSingle.js

@@ -560,7 +560,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
   var mediaProvider = useMemo(function () {
     return mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined;
   }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
-  if (fg('platform_editor_react18_phase2__media_single')) {
+  if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
     return jsx(MediaSingleNodeNext, {
       width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
       lineLength: (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0,

package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -1068,7 +1068,7 @@ var ResizableMediaSingleToggle = function ResizableMediaSingleToggle(_ref9) {
     viewMediaClientConfig = _ref9.viewMediaClientConfig,
     width = _ref9.width,
     forceHandlePositioning = _ref9.forceHandlePositioning;
-  if (fg('platform_editor_react18_phase2__media_single')) {
+  if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
     return jsx(ResizableMediaSingleNextFunctional, {
       allowBreakoutSnapPoints: allowBreakoutSnapPoints
       // eslint-disable-next-line react/no-children-prop

package/dist/esm/ui/toolbar/alt-text.js

@@ -88,7 +88,8 @@ export var getAltTextDropdownOption = function getAltTextDropdownOption(state, f
       onClick: openMediaAltTextMenu(editorAnalyticsAPI),
       icon: /*#__PURE__*/React.createElement(TextIcon, {
         label: ""
-      })
+      }),
+      testId: 'media-alt-text-dropdown-option'
     }];
   }
   return [];

package/dist/esm/ui/toolbar/index.js

@@ -710,11 +710,14 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     return;
   }
   var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
+  var isSelectedNodeMediaSingle = state.selection instanceof NodeSelection && state.selection.node.type === mediaSingle;
   var baseToolbar = {
     title: 'Media floating controls',
     nodeType: nodeType,
     getDomRef: function getDomRef() {
-      return mediaPluginState.element;
+      var _mediaPluginState$ele;
+      var element = isSelectedNodeMediaSingle && fg('platform_editor_media_single_toolbar_target') ? ((_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(".".concat(MediaSingleNodeSelector))) || mediaPluginState.element : mediaPluginState.element;
+      return element;
     }
   };
   if (allowLinking && mediaLinkingState && mediaLinkingState.visible && shouldShowMediaLinkToolbar(state)) {
@@ -757,21 +760,21 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     var _pluginInjectionApi$a8, _pluginInjectionApi$f2;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
-      var _mediaPluginState$ele;
+      var _mediaPluginState$ele2;
       var selector = mediaFilmstripItemDOMSelector(mediaOffset);
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
+      return (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(selector);
     };
     items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
     baseToolbar.getDomRef = function () {
-      var _mediaPluginState$ele2;
+      var _mediaPluginState$ele3;
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(MediaSingleNodeSelector));
+      var element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(".".concat(MediaSingleNodeSelector));
       return element || mediaPluginState.element;
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "2.3.21",
+	"version": "2.3.22",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -129,6 +129,9 @@
 		"platform_editor_react18_phase2__media_single": {
 			"type": "boolean"
 		},
+		"platform_editor_react18_phase2__media_single_jira": {
+			"type": "boolean"
+		},
 		"platform_media_cross_client_copy": {
 			"type": "boolean"
 		},
@@ -176,6 +179,9 @@
 		},
 		"platform_editor_remove_media_inline_feature_flag": {
 			"type": "boolean"
+		},
+		"platform_editor_media_single_toolbar_target": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {