@atlaskit/editor-plugin-card 5.3.4 → 5.3.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-card
 
+## 5.3.5
+
+### Patch Changes
+
+- [#128122](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128122)
+  [`552a7081e75d7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/552a7081e75d7) -
+  [ux] ED-27167 Move copy and delete button to overflow menu for datasource floating toolbar
+- Updated dependencies
+
 ## 5.3.4
 
 ### Patch Changes

package/dist/cjs/ui/toolbar.js

@@ -256,7 +256,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         lpLinkPicker: lpLinkPicker
       })];
     } else if (shouldRenderDatasourceToolbar) {
-      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance);
+      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, pluginInjectionApi);
     } else {
       var _pluginInjectionApi$c;
       var inlineCard = state.schema.nodes.inlineCard;
@@ -429,7 +429,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         }, {
           type: 'overflow-dropdown',
           options: [{
-            title: 'Copy',
+            title: intl.formatMessage(_messages.default.copyToClipboard),
             onClick: function onClick() {
               var _pluginInjectionApi$c2, _pluginInjectionApi$f;
               pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 || _pluginInjectionApi$c2.actions.execute( // @ts-ignore
@@ -437,13 +437,13 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               return true;
             },
             icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
-              label: "Copy"
+              label: intl.formatMessage(_messages.default.copyToClipboard)
             })
           }, {
-            title: 'Delete',
+            title: intl.formatMessage(_messages.default.delete),
             onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
             icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
-              label: "Delete"
+              label: intl.formatMessage(_messages.default.delete)
             })
           }]
         }];
@@ -478,7 +478,7 @@ var getSettingsButton = exports.getSettingsButton = function getSettingsButton(i
     target: '_blank'
   };
 };
-var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance) {
+var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, pluginInjectionApi) {
   var _node$attrs2;
   var toolbarItems = [];
   var canShowAppearanceSwitch = function canShowAppearanceSwitch() {
@@ -574,36 +574,68 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(_messages.linkMessages.openLink),
       onClick: visitCardLink(editorAnalyticsApi)
+    });
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+      toolbarItems.push({
+        type: 'separator'
+      });
+    }
+  }
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+    toolbarItems.push({
+      type: 'copy-button',
+      supportsViewMode: true,
+      items: [{
+        state: state,
+        formatMessage: intl.formatMessage,
+        nodeType: node.type
+      }]
     }, {
       type: 'separator'
+    }, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
+      type: 'separator'
+    }, {
+      id: 'editor.link.delete',
+      focusEditoronEnter: true,
+      type: 'button',
+      appearance: 'danger',
+      icon: _delete.default,
+      iconFallback: _remove.default,
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      title: intl.formatMessage(_messages.default.remove),
+      onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
     });
+  } else {
+    toolbarItems.push({
+      type: 'separator',
+      fullHeight: true
+    });
+    var overflowMenuConfig = [{
+      type: 'overflow-dropdown',
+      options: [{
+        title: intl.formatMessage(_messages.default.copyToClipboard),
+        onClick: function onClick() {
+          var _pluginInjectionApi$c3, _pluginInjectionApi$f2;
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 || _pluginInjectionApi$c3.actions.execute( // @ts-ignore
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.commands.copyNode(node.type));
+          return true;
+        },
+        icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
+          label: intl.formatMessage(_messages.default.copyToClipboard)
+        })
+      }, {
+        title: intl.formatMessage(_messages.default.delete),
+        onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
+        icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
+          label: intl.formatMessage(_messages.default.delete)
+        })
+      }]
+    }];
+    toolbarItems.push.apply(toolbarItems, overflowMenuConfig);
   }
-  toolbarItems.push({
-    type: 'copy-button',
-    supportsViewMode: true,
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: node.type
-    }]
-  }, {
-    type: 'separator'
-  }, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
-    type: 'separator'
-  }, {
-    id: 'editor.link.delete',
-    focusEditoronEnter: true,
-    type: 'button',
-    appearance: 'danger',
-    icon: _delete.default,
-    iconFallback: _remove.default,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
-    title: intl.formatMessage(_messages.default.remove),
-    onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-  });
   return toolbarItems;
 };
 var shouldRenderToolbarPulse = exports.shouldRenderToolbarPulse = function shouldRenderToolbarPulse(embedEnabled, appearance, status, isDiscoverabilityEnabled) {

package/dist/es2019/ui/toolbar.js

@@ -248,7 +248,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       lpLinkPicker
     })];
   } else if (shouldRenderDatasourceToolbar) {
-    return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance);
+    return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, pluginInjectionApi);
   } else {
     var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$c3;
     const {
@@ -419,7 +419,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       }, {
         type: 'overflow-dropdown',
         options: [{
-          title: 'Copy',
+          title: intl.formatMessage(commonMessages.copyToClipboard),
           onClick: () => {
             var _pluginInjectionApi$c4, _pluginInjectionApi$f;
             pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute( // @ts-ignore
@@ -427,13 +427,13 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
             return true;
           },
           icon: /*#__PURE__*/React.createElement(CopyIcon, {
-            label: "Copy"
+            label: intl.formatMessage(commonMessages.copyToClipboard)
           })
         }, {
-          title: 'Delete',
+          title: intl.formatMessage(commonMessages.delete),
           onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
           icon: /*#__PURE__*/React.createElement(DeleteIcon, {
-            label: "Delete"
+            label: intl.formatMessage(commonMessages.delete)
           })
         }]
       }];
@@ -467,7 +467,7 @@ export const getSettingsButton = (intl, editorAnalyticsApi, userPreferencesLink)
     target: '_blank'
   };
 };
-const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance) => {
+const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, pluginInjectionApi) => {
   var _node$attrs2;
   const toolbarItems = [];
   const canShowAppearanceSwitch = () => {
@@ -563,36 +563,68 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       className: 'hyperlink-open-link',
       title: intl.formatMessage(linkMessages.openLink),
       onClick: visitCardLink(editorAnalyticsApi)
+    });
+    if (editorExperiment('platform_editor_controls', 'control')) {
+      toolbarItems.push({
+        type: 'separator'
+      });
+    }
+  }
+  if (editorExperiment('platform_editor_controls', 'control')) {
+    toolbarItems.push({
+      type: 'copy-button',
+      supportsViewMode: true,
+      items: [{
+        state,
+        formatMessage: intl.formatMessage,
+        nodeType: node.type
+      }]
     }, {
       type: 'separator'
+    }, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
+      type: 'separator'
+    }, {
+      id: 'editor.link.delete',
+      focusEditoronEnter: true,
+      type: 'button',
+      appearance: 'danger',
+      icon: DeleteIcon,
+      iconFallback: RemoveIcon,
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      title: intl.formatMessage(commonMessages.remove),
+      onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
+    });
+  } else {
+    toolbarItems.push({
+      type: 'separator',
+      fullHeight: true
     });
+    const overflowMenuConfig = [{
+      type: 'overflow-dropdown',
+      options: [{
+        title: intl.formatMessage(commonMessages.copyToClipboard),
+        onClick: () => {
+          var _pluginInjectionApi$c5, _pluginInjectionApi$f2;
+          pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === void 0 ? void 0 : _pluginInjectionApi$c5.actions.execute( // @ts-ignore
+          pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.commands.copyNode(node.type));
+          return true;
+        },
+        icon: /*#__PURE__*/React.createElement(CopyIcon, {
+          label: intl.formatMessage(commonMessages.copyToClipboard)
+        })
+      }, {
+        title: intl.formatMessage(commonMessages.delete),
+        onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
+        icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+          label: intl.formatMessage(commonMessages.delete)
+        })
+      }]
+    }];
+    toolbarItems.push(...overflowMenuConfig);
   }
-  toolbarItems.push({
-    type: 'copy-button',
-    supportsViewMode: true,
-    items: [{
-      state,
-      formatMessage: intl.formatMessage,
-      nodeType: node.type
-    }]
-  }, {
-    type: 'separator'
-  }, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
-    type: 'separator'
-  }, {
-    id: 'editor.link.delete',
-    focusEditoronEnter: true,
-    type: 'button',
-    appearance: 'danger',
-    icon: DeleteIcon,
-    iconFallback: RemoveIcon,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
-    title: intl.formatMessage(commonMessages.remove),
-    onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-  });
   return toolbarItems;
 };
 export const shouldRenderToolbarPulse = (embedEnabled, appearance, status, isDiscoverabilityEnabled) => {

package/dist/esm/ui/toolbar.js

@@ -246,7 +246,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         lpLinkPicker: lpLinkPicker
       })];
     } else if (shouldRenderDatasourceToolbar) {
-      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance);
+      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, pluginInjectionApi);
     } else {
       var _pluginInjectionApi$c;
       var inlineCard = state.schema.nodes.inlineCard;
@@ -419,7 +419,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         }, {
           type: 'overflow-dropdown',
           options: [{
-            title: 'Copy',
+            title: intl.formatMessage(commonMessages.copyToClipboard),
             onClick: function onClick() {
               var _pluginInjectionApi$c2, _pluginInjectionApi$f;
               pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 || _pluginInjectionApi$c2.actions.execute( // @ts-ignore
@@ -427,13 +427,13 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               return true;
             },
             icon: /*#__PURE__*/React.createElement(CopyIcon, {
-              label: "Copy"
+              label: intl.formatMessage(commonMessages.copyToClipboard)
             })
           }, {
-            title: 'Delete',
+            title: intl.formatMessage(commonMessages.delete),
             onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
             icon: /*#__PURE__*/React.createElement(DeleteIcon, {
-              label: "Delete"
+              label: intl.formatMessage(commonMessages.delete)
             })
           }]
         }];
@@ -468,7 +468,7 @@ export var getSettingsButton = function getSettingsButton(intl, editorAnalyticsA
     target: '_blank'
   };
 };
-var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance) {
+var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, pluginInjectionApi) {
   var _node$attrs2;
   var toolbarItems = [];
   var canShowAppearanceSwitch = function canShowAppearanceSwitch() {
@@ -564,36 +564,68 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(linkMessages.openLink),
       onClick: visitCardLink(editorAnalyticsApi)
+    });
+    if (editorExperiment('platform_editor_controls', 'control')) {
+      toolbarItems.push({
+        type: 'separator'
+      });
+    }
+  }
+  if (editorExperiment('platform_editor_controls', 'control')) {
+    toolbarItems.push({
+      type: 'copy-button',
+      supportsViewMode: true,
+      items: [{
+        state: state,
+        formatMessage: intl.formatMessage,
+        nodeType: node.type
+      }]
     }, {
       type: 'separator'
+    }, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
+      type: 'separator'
+    }, {
+      id: 'editor.link.delete',
+      focusEditoronEnter: true,
+      type: 'button',
+      appearance: 'danger',
+      icon: DeleteIcon,
+      iconFallback: RemoveIcon,
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      title: intl.formatMessage(commonMessages.remove),
+      onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
     });
+  } else {
+    toolbarItems.push({
+      type: 'separator',
+      fullHeight: true
+    });
+    var overflowMenuConfig = [{
+      type: 'overflow-dropdown',
+      options: [{
+        title: intl.formatMessage(commonMessages.copyToClipboard),
+        onClick: function onClick() {
+          var _pluginInjectionApi$c3, _pluginInjectionApi$f2;
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 || _pluginInjectionApi$c3.actions.execute( // @ts-ignore
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.commands.copyNode(node.type));
+          return true;
+        },
+        icon: /*#__PURE__*/React.createElement(CopyIcon, {
+          label: intl.formatMessage(commonMessages.copyToClipboard)
+        })
+      }, {
+        title: intl.formatMessage(commonMessages.delete),
+        onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
+        icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+          label: intl.formatMessage(commonMessages.delete)
+        })
+      }]
+    }];
+    toolbarItems.push.apply(toolbarItems, overflowMenuConfig);
   }
-  toolbarItems.push({
-    type: 'copy-button',
-    supportsViewMode: true,
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: node.type
-    }]
-  }, {
-    type: 'separator'
-  }, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
-    type: 'separator'
-  }, {
-    id: 'editor.link.delete',
-    focusEditoronEnter: true,
-    type: 'button',
-    appearance: 'danger',
-    icon: DeleteIcon,
-    iconFallback: RemoveIcon,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
-    title: intl.formatMessage(commonMessages.remove),
-    onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-  });
   return toolbarItems;
 };
 export var shouldRenderToolbarPulse = function shouldRenderToolbarPulse(embedEnabled, appearance, status, isDiscoverabilityEnabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "5.3.4",
+	"version": "5.3.5",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",