@atlaskit/editor-plugin-panel 4.2.2 → 4.2.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-panel
 
+## 4.2.3
+
+### Patch Changes
+
+- [#123010](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123010)
+  [`de55801631775`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/de55801631775) -
+  [ux] Move copy/delete to overflow menu on editor floating toolbar
+
 ## 4.2.2
 
 ### Patch Changes

package/dist/cjs/ui/toolbar.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.panelIconMap = exports.getToolbarItems = exports.getToolbarConfig = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
@@ -14,6 +15,7 @@ var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/message
 var _panel = require("@atlaskit/editor-common/panel");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _discovery = _interopRequireDefault(require("@atlaskit/icon/core/discovery"));
@@ -54,7 +56,7 @@ var panelIconMap = exports.panelIconMap = (0, _defineProperty2.default)((0, _def
   shortName: ':tip:',
   id: 'atlassian-tip'
 });
-var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state) {
+var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state, api) {
   // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
   var items = [{
     id: 'editor.panel.info',
@@ -275,36 +277,31 @@ var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatM
       tabIndex: null
     });
   } else {
-    items.push({
-      type: 'separator'
+    var overflowMenuConfig = [{
+      type: 'separator',
+      fullHeight: true
     }, {
-      id: 'editor.panel.delete',
-      type: 'button',
-      appearance: 'danger',
-      focusEditoronEnter: true,
-      icon: _delete.default,
-      iconFallback: _remove.default,
-      onClick: (0, _actions.removePanel)(editorAnalyticsAPI),
-      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
-      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
-      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
-      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
-      title: formatMessage(_messages.default.remove),
-      tabIndex: null
-    });
-    if (state) {
-      items.push({
-        type: 'separator'
-      });
-      items.push({
-        type: 'copy-button',
-        items: [{
-          state: state,
-          formatMessage: formatMessage,
-          nodeType: panelNodeType
-        }]
-      });
-    }
+      type: 'overflow-dropdown',
+      options: [{
+        title: 'Copy',
+        onClick: function onClick() {
+          var _api$core, _api$floatingToolbar;
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute( // @ts-ignore
+          api === null || api === void 0 || (_api$floatingToolbar = api.floatingToolbar) === null || _api$floatingToolbar === void 0 ? void 0 : _api$floatingToolbar.commands.copyNode(panelNodeType));
+          return true;
+        },
+        icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
+          label: "Copy"
+        })
+      }, {
+        title: 'Delete',
+        onClick: (0, _actions.removePanel)(editorAnalyticsAPI),
+        icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
+          label: "Delete"
+        })
+      }]
+    }];
+    items.push.apply(items, overflowMenuConfig);
   }
   return items;
 };
@@ -326,7 +323,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
     };
 
     // force toolbar to be turned on
-    var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state);
+    var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? api : undefined);
     var getDomRef = function getDomRef(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);
       var element = (0, _utils.findDomRefAtPos)(panelObject.pos, domAtPos);

package/dist/es2019/ui/toolbar.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
@@ -5,6 +6,7 @@ import commonMessages, { panelMessages as messages } from '@atlaskit/editor-comm
 import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
 import { DEFAULT_BORDER_COLOR, panelBackgroundPalette } from '@atlaskit/editor-common/ui-color';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import CopyIcon from '@atlaskit/icon/core/copy';
 import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import DiscoveryIcon from '@atlaskit/icon/core/discovery';
@@ -48,7 +50,7 @@ export const panelIconMap = {
     id: 'atlassian-tip'
   }
 };
-export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state) => {
+export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state, api) => {
   // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
   const items = [{
     id: 'editor.panel.info',
@@ -259,36 +261,31 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
       tabIndex: null
     });
   } else {
-    items.push({
-      type: 'separator'
+    const overflowMenuConfig = [{
+      type: 'separator',
+      fullHeight: true
     }, {
-      id: 'editor.panel.delete',
-      type: 'button',
-      appearance: 'danger',
-      focusEditoronEnter: true,
-      icon: DeleteIcon,
-      iconFallback: RemoveIcon,
-      onClick: removePanel(editorAnalyticsAPI),
-      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
-      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
-      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
-      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
-      title: formatMessage(commonMessages.remove),
-      tabIndex: null
-    });
-    if (state) {
-      items.push({
-        type: 'separator'
-      });
-      items.push({
-        type: 'copy-button',
-        items: [{
-          state,
-          formatMessage,
-          nodeType: panelNodeType
-        }]
-      });
-    }
+      type: 'overflow-dropdown',
+      options: [{
+        title: 'Copy',
+        onClick: () => {
+          var _api$core, _api$floatingToolbar;
+          api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute( // @ts-ignore
+          api === null || api === void 0 ? void 0 : (_api$floatingToolbar = api.floatingToolbar) === null || _api$floatingToolbar === void 0 ? void 0 : _api$floatingToolbar.commands.copyNode(panelNodeType));
+          return true;
+        },
+        icon: /*#__PURE__*/React.createElement(CopyIcon, {
+          label: "Copy"
+        })
+      }, {
+        title: 'Delete',
+        onClick: removePanel(editorAnalyticsAPI),
+        icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+          label: "Delete"
+        })
+      }]
+    }];
+    items.push(...overflowMenuConfig);
   }
   return items;
 };
@@ -310,7 +307,7 @@ export const getToolbarConfig = (state, intl, options = {}, providerFactory, api
     };
 
     // force toolbar to be turned on
-    const items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state);
+    const items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state, editorExperiment('platform_editor_controls', 'variant1') ? api : undefined);
     const getDomRef = editorView => {
       const domAtPos = editorView.domAtPos.bind(editorView);
       const element = findDomRefAtPos(panelObject.pos, domAtPos);

package/dist/esm/ui/toolbar.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
 import { PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
@@ -8,6 +9,7 @@ import commonMessages, { panelMessages as messages } from '@atlaskit/editor-comm
 import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
 import { DEFAULT_BORDER_COLOR, panelBackgroundPalette } from '@atlaskit/editor-common/ui-color';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import CopyIcon from '@atlaskit/icon/core/copy';
 import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import DiscoveryIcon from '@atlaskit/icon/core/discovery';
@@ -44,7 +46,7 @@ export var panelIconMap = _defineProperty(_defineProperty(_defineProperty(_defin
   shortName: ':tip:',
   id: 'atlassian-tip'
 });
-export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state) {
+export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state, api) {
   // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
   var items = [{
     id: 'editor.panel.info',
@@ -265,36 +267,31 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
       tabIndex: null
     });
   } else {
-    items.push({
-      type: 'separator'
+    var overflowMenuConfig = [{
+      type: 'separator',
+      fullHeight: true
     }, {
-      id: 'editor.panel.delete',
-      type: 'button',
-      appearance: 'danger',
-      focusEditoronEnter: true,
-      icon: DeleteIcon,
-      iconFallback: RemoveIcon,
-      onClick: removePanel(editorAnalyticsAPI),
-      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
-      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
-      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
-      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
-      title: formatMessage(commonMessages.remove),
-      tabIndex: null
-    });
-    if (state) {
-      items.push({
-        type: 'separator'
-      });
-      items.push({
-        type: 'copy-button',
-        items: [{
-          state: state,
-          formatMessage: formatMessage,
-          nodeType: panelNodeType
-        }]
-      });
-    }
+      type: 'overflow-dropdown',
+      options: [{
+        title: 'Copy',
+        onClick: function onClick() {
+          var _api$core, _api$floatingToolbar;
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute( // @ts-ignore
+          api === null || api === void 0 || (_api$floatingToolbar = api.floatingToolbar) === null || _api$floatingToolbar === void 0 ? void 0 : _api$floatingToolbar.commands.copyNode(panelNodeType));
+          return true;
+        },
+        icon: /*#__PURE__*/React.createElement(CopyIcon, {
+          label: "Copy"
+        })
+      }, {
+        title: 'Delete',
+        onClick: removePanel(editorAnalyticsAPI),
+        icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+          label: "Delete"
+        })
+      }]
+    }];
+    items.push.apply(items, overflowMenuConfig);
   }
   return items;
 };
@@ -316,7 +313,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl) {
     };
 
     // force toolbar to be turned on
-    var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state);
+    var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state, editorExperiment('platform_editor_controls', 'variant1') ? api : undefined);
     var getDomRef = function getDomRef(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);
       var element = findDomRefAtPos(panelObject.pos, domAtPos);

package/dist/types/ui/toolbar.d.ts

@@ -11,5 +11,5 @@ import type { EmojiInfo, PanelPluginOptions } from '../panelPluginType';
 export declare const panelIconMap: {
     [key in Exclude<PanelType, PanelType.CUSTOM>]: EmojiInfo;
 };
-export declare const getToolbarItems: (formatMessage: IntlShape['formatMessage'], panelNodeType: NodeType, isCustomPanelEnabled: boolean, isCustomPanelEditable: boolean, providerFactory: ProviderFactory, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, activePanelType?: string, activePanelColor?: string, activePanelIcon?: string, state?: EditorState) => FloatingToolbarItem<Command>[];
+export declare const getToolbarItems: (formatMessage: IntlShape['formatMessage'], panelNodeType: NodeType, isCustomPanelEnabled: boolean, isCustomPanelEditable: boolean, providerFactory: ProviderFactory, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, activePanelType?: string, activePanelColor?: string, activePanelIcon?: string, state?: EditorState, api?: ExtractInjectionAPI<PanelPlugin>) => FloatingToolbarItem<Command>[];
 export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, options: PanelPluginOptions | undefined, providerFactory: ProviderFactory, api: ExtractInjectionAPI<PanelPlugin> | undefined) => FloatingToolbarConfig | undefined;

package/dist/types-ts4.5/ui/toolbar.d.ts

@@ -11,5 +11,5 @@ import type { EmojiInfo, PanelPluginOptions } from '../panelPluginType';
 export declare const panelIconMap: {
     [key in Exclude<PanelType, PanelType.CUSTOM>]: EmojiInfo;
 };
-export declare const getToolbarItems: (formatMessage: IntlShape['formatMessage'], panelNodeType: NodeType, isCustomPanelEnabled: boolean, isCustomPanelEditable: boolean, providerFactory: ProviderFactory, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, activePanelType?: string, activePanelColor?: string, activePanelIcon?: string, state?: EditorState) => FloatingToolbarItem<Command>[];
+export declare const getToolbarItems: (formatMessage: IntlShape['formatMessage'], panelNodeType: NodeType, isCustomPanelEnabled: boolean, isCustomPanelEditable: boolean, providerFactory: ProviderFactory, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, activePanelType?: string, activePanelColor?: string, activePanelIcon?: string, state?: EditorState, api?: ExtractInjectionAPI<PanelPlugin>) => FloatingToolbarItem<Command>[];
 export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, options: PanelPluginOptions | undefined, providerFactory: ProviderFactory, api: ExtractInjectionAPI<PanelPlugin> | undefined) => FloatingToolbarConfig | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-panel",
-	"version": "4.2.2",
+	"version": "4.2.3",
 	"description": "Panel plugin for @atlaskit/editor-core.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",