@atlaskit/editor-plugin-extension 5.0.0 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-extension
 
+## 5.0.1
+
+### 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
+- Updated dependencies
+
 ## 5.0.0
 
 ### Major Changes

package/dist/cjs/extensionPlugin.js

@@ -8,6 +8,7 @@ exports.extensionPlugin = void 0;
 var _adfSchema = require("@atlaskit/adf-schema");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./editor-actions/actions");
 var _commands = require("./editor-commands/commands");
 var _extensionApi = require("./pm-plugins/extension-api");
@@ -179,7 +180,8 @@ var extensionPlugin = exports.extensionPlugin = function extensionPlugin(_ref) {
         breakoutEnabled: options.breakoutEnabled,
         hoverDecoration: _api === null || _api === void 0 || (_api$decorations = _api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration,
         applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange,
-        editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics4 = _api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions
+        editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics4 = _api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
+        extensionApi: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _api : undefined
       }),
       contextPanel: !(0, _platformFeatureFlags.fg)('platform_editor_ai_object_sidebar_injection') ? (0, _contextPanel.getContextPanel)(function () {
         var _editorViewRef$curren;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getToolbarConfig = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
 var _styles = require("@atlaskit/editor-common/styles");
@@ -13,6 +14,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _contentWidthNarrow = _interopRequireDefault(require("@atlaskit/icon/core/content-width-narrow"));
 var _contentWidthWide = _interopRequireDefault(require("@atlaskit/icon/core/content-width-wide"));
+var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
 var _expandHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/expand-horizontal"));
@@ -139,7 +141,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
       editorAnalyticsAPI = extensionApi === null || extensionApi === void 0 || (_extensionApi$analyti = extensionApi.analytics) === null || _extensionApi$analyti === void 0 ? void 0 : _extensionApi$analyti.actions;
     }
     if (extensionState && !extensionState.showContextPanel && extensionState.element) {
-      var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4, _hoverDecoration5, _hoverDecoration6, _hoverDecoration7, _hoverDecoration8;
+      var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4;
       var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
       var editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
       var breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
@@ -215,13 +217,13 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
             left: nextPos.left
           };
         },
-        items: [].concat((0, _toConsumableArray2.default)(editButtonArray), (0, _toConsumableArray2.default)(breakoutButtonArray), [{
+        items: [].concat((0, _toConsumableArray2.default)(editButtonArray), (0, _toConsumableArray2.default)(breakoutButtonArray), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [{
           type: 'separator',
           hidden: editButtonArray.length === 0 && breakoutButtonArray.length === 0
         }, {
           type: 'extensions-placeholder',
           separator: 'end'
-        }], (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [{
+        }, {
           type: 'copy-button',
           items: [{
             state: state,
@@ -246,28 +248,27 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
           tabIndex: null,
           confirmDialog: confirmDialog
         }] : [{
-          id: 'editor.extension.delete',
-          type: 'button',
-          icon: _delete.default,
-          iconFallback: _remove.default,
-          appearance: 'danger',
-          onClick: (0, _commands.removeExtension)(editorAnalyticsAPI),
-          onMouseEnter: (_hoverDecoration5 = hoverDecoration) === null || _hoverDecoration5 === void 0 ? void 0 : _hoverDecoration5(nodeType, true),
-          onMouseLeave: (_hoverDecoration6 = hoverDecoration) === null || _hoverDecoration6 === void 0 ? void 0 : _hoverDecoration6(nodeType, false),
-          onFocus: (_hoverDecoration7 = hoverDecoration) === null || _hoverDecoration7 === void 0 ? void 0 : _hoverDecoration7(nodeType, true),
-          onBlur: (_hoverDecoration8 = hoverDecoration) === null || _hoverDecoration8 === void 0 ? void 0 : _hoverDecoration8(nodeType, false),
-          focusEditoronEnter: true,
-          title: formatMessage(_messages.default.remove),
-          tabIndex: null,
-          confirmDialog: confirmDialog
-        }, {
-          type: 'separator'
+          type: 'separator',
+          fullHeight: true
         }, {
-          type: 'copy-button',
-          items: [{
-            state: state,
-            formatMessage: intl.formatMessage,
-            nodeType: nodeType
+          type: 'overflow-dropdown',
+          options: [{
+            title: 'Copy',
+            onClick: function onClick() {
+              var _extensionApi$core, _extensionApi$floatin;
+              extensionApi === null || extensionApi === void 0 || (_extensionApi$core = extensionApi.core) === null || _extensionApi$core === void 0 || _extensionApi$core.actions.execute( // @ts-ignore
+              extensionApi === null || extensionApi === void 0 || (_extensionApi$floatin = extensionApi.floatingToolbar) === null || _extensionApi$floatin === void 0 ? void 0 : _extensionApi$floatin.commands.copyNode(nodeType));
+              return true;
+            },
+            icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
+              label: "Copy"
+            })
+          }, {
+            title: 'Delete',
+            onClick: (0, _commands.removeExtension)(editorAnalyticsAPI),
+            icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
+              label: "Delete"
+            })
           }]
         }])),
         scrollable: true

package/dist/es2019/extensionPlugin.js

@@ -1,6 +1,7 @@
 import { extension, extensionFrame, inlineExtension, multiBodiedExtension } from '@atlaskit/adf-schema';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createEditSelectedExtensionAction, insertOrReplaceBodiedExtension, insertOrReplaceExtension } from './editor-actions/actions';
 import { forceAutoSave } from './editor-commands/commands';
 import { createExtensionAPI } from './pm-plugins/extension-api';
@@ -167,7 +168,8 @@ export const extensionPlugin = ({
         breakoutEnabled: options.breakoutEnabled,
         hoverDecoration: api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration,
         applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel4 = api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange,
-        editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions
+        editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
+        extensionApi: editorExperiment('platform_editor_controls', 'variant1') ? api : undefined
       }),
       contextPanel: !fg('platform_editor_ai_object_sidebar_injection') ? getContextPanel(() => {
         var _editorViewRef$curren;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { messages } from '@atlaskit/editor-common/extensions';
 import commonMessages from '@atlaskit/editor-common/messages';
 import { BODIED_EXT_MBE_MARGIN_TOP } from '@atlaskit/editor-common/styles';
@@ -5,6 +6,7 @@ import { getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/edit
 import { findParentNodeOfType, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import ContentWidthNarrowIcon from '@atlaskit/icon/core/content-width-narrow';
 import ContentWidthWideIcon from '@atlaskit/icon/core/content-width-wide';
+import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import EditIcon from '@atlaskit/icon/core/edit';
 import ExpandHorizontalIcon from '@atlaskit/icon/core/expand-horizontal';
@@ -145,7 +147,7 @@ export const getToolbarConfig = ({
     editorAnalyticsAPI = extensionApi === null || extensionApi === void 0 ? void 0 : (_extensionApi$analyti = extensionApi.analytics) === null || _extensionApi$analyti === void 0 ? void 0 : _extensionApi$analyti.actions;
   }
   if (extensionState && !extensionState.showContextPanel && extensionState.element) {
-    var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4, _hoverDecoration5, _hoverDecoration6, _hoverDecoration7, _hoverDecoration8;
+    var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4;
     const nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
     const editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
     const breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
@@ -217,13 +219,13 @@ export const getToolbarConfig = ({
           left: nextPos.left
         };
       },
-      items: [...editButtonArray, ...breakoutButtonArray, {
+      items: [...editButtonArray, ...breakoutButtonArray, ...(editorExperiment('platform_editor_controls', 'control') ? [{
         type: 'separator',
         hidden: editButtonArray.length === 0 && breakoutButtonArray.length === 0
       }, {
         type: 'extensions-placeholder',
         separator: 'end'
-      }, ...(editorExperiment('platform_editor_controls', 'control') ? [{
+      }, {
         type: 'copy-button',
         items: [{
           state,
@@ -248,28 +250,27 @@ export const getToolbarConfig = ({
         tabIndex: null,
         confirmDialog
       }] : [{
-        id: 'editor.extension.delete',
-        type: 'button',
-        icon: DeleteIcon,
-        iconFallback: RemoveIcon,
-        appearance: 'danger',
-        onClick: removeExtension(editorAnalyticsAPI),
-        onMouseEnter: (_hoverDecoration5 = hoverDecoration) === null || _hoverDecoration5 === void 0 ? void 0 : _hoverDecoration5(nodeType, true),
-        onMouseLeave: (_hoverDecoration6 = hoverDecoration) === null || _hoverDecoration6 === void 0 ? void 0 : _hoverDecoration6(nodeType, false),
-        onFocus: (_hoverDecoration7 = hoverDecoration) === null || _hoverDecoration7 === void 0 ? void 0 : _hoverDecoration7(nodeType, true),
-        onBlur: (_hoverDecoration8 = hoverDecoration) === null || _hoverDecoration8 === void 0 ? void 0 : _hoverDecoration8(nodeType, false),
-        focusEditoronEnter: true,
-        title: formatMessage(commonMessages.remove),
-        tabIndex: null,
-        confirmDialog
-      }, {
-        type: 'separator'
+        type: 'separator',
+        fullHeight: true
       }, {
-        type: 'copy-button',
-        items: [{
-          state,
-          formatMessage: intl.formatMessage,
-          nodeType
+        type: 'overflow-dropdown',
+        options: [{
+          title: 'Copy',
+          onClick: () => {
+            var _extensionApi$core, _extensionApi$floatin;
+            extensionApi === null || extensionApi === void 0 ? void 0 : (_extensionApi$core = extensionApi.core) === null || _extensionApi$core === void 0 ? void 0 : _extensionApi$core.actions.execute( // @ts-ignore
+            extensionApi === null || extensionApi === void 0 ? void 0 : (_extensionApi$floatin = extensionApi.floatingToolbar) === null || _extensionApi$floatin === void 0 ? void 0 : _extensionApi$floatin.commands.copyNode(nodeType));
+            return true;
+          },
+          icon: /*#__PURE__*/React.createElement(CopyIcon, {
+            label: "Copy"
+          })
+        }, {
+          title: 'Delete',
+          onClick: removeExtension(editorAnalyticsAPI),
+          icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+            label: "Delete"
+          })
         }]
       }])],
       scrollable: true

package/dist/esm/extensionPlugin.js

@@ -1,6 +1,7 @@
 import { extension, extensionFrame, inlineExtension, multiBodiedExtension } from '@atlaskit/adf-schema';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createEditSelectedExtensionAction, insertOrReplaceBodiedExtension as _insertOrReplaceBodiedExtension, insertOrReplaceExtension as _insertOrReplaceExtension } from './editor-actions/actions';
 import { forceAutoSave } from './editor-commands/commands';
 import { createExtensionAPI } from './pm-plugins/extension-api';
@@ -171,7 +172,8 @@ export var extensionPlugin = function extensionPlugin(_ref) {
         breakoutEnabled: options.breakoutEnabled,
         hoverDecoration: _api === null || _api === void 0 || (_api$decorations = _api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration,
         applyChangeToContextPanel: _api === null || _api === void 0 || (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange,
-        editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics4 = _api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions
+        editorAnalyticsAPI: _api === null || _api === void 0 || (_api$analytics4 = _api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
+        extensionApi: editorExperiment('platform_editor_controls', 'variant1') ? _api : undefined
       }),
       contextPanel: !fg('platform_editor_ai_object_sidebar_injection') ? getContextPanel(function () {
         var _editorViewRef$curren;

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

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React from 'react';
 import { messages } from '@atlaskit/editor-common/extensions';
 import commonMessages from '@atlaskit/editor-common/messages';
 import { BODIED_EXT_MBE_MARGIN_TOP } from '@atlaskit/editor-common/styles';
@@ -6,6 +7,7 @@ import { getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource }
 import { findParentNodeOfType, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import ContentWidthNarrowIcon from '@atlaskit/icon/core/content-width-narrow';
 import ContentWidthWideIcon from '@atlaskit/icon/core/content-width-wide';
+import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import EditIcon from '@atlaskit/icon/core/edit';
 import ExpandHorizontalIcon from '@atlaskit/icon/core/expand-horizontal';
@@ -132,7 +134,7 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
       editorAnalyticsAPI = extensionApi === null || extensionApi === void 0 || (_extensionApi$analyti = extensionApi.analytics) === null || _extensionApi$analyti === void 0 ? void 0 : _extensionApi$analyti.actions;
     }
     if (extensionState && !extensionState.showContextPanel && extensionState.element) {
-      var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4, _hoverDecoration5, _hoverDecoration6, _hoverDecoration7, _hoverDecoration8;
+      var _hoverDecoration, _hoverDecoration2, _hoverDecoration3, _hoverDecoration4;
       var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
       var editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
       var breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
@@ -208,13 +210,13 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
             left: nextPos.left
           };
         },
-        items: [].concat(_toConsumableArray(editButtonArray), _toConsumableArray(breakoutButtonArray), [{
+        items: [].concat(_toConsumableArray(editButtonArray), _toConsumableArray(breakoutButtonArray), _toConsumableArray(editorExperiment('platform_editor_controls', 'control') ? [{
           type: 'separator',
           hidden: editButtonArray.length === 0 && breakoutButtonArray.length === 0
         }, {
           type: 'extensions-placeholder',
           separator: 'end'
-        }], _toConsumableArray(editorExperiment('platform_editor_controls', 'control') ? [{
+        }, {
           type: 'copy-button',
           items: [{
             state: state,
@@ -239,28 +241,27 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
           tabIndex: null,
           confirmDialog: confirmDialog
         }] : [{
-          id: 'editor.extension.delete',
-          type: 'button',
-          icon: DeleteIcon,
-          iconFallback: RemoveIcon,
-          appearance: 'danger',
-          onClick: removeExtension(editorAnalyticsAPI),
-          onMouseEnter: (_hoverDecoration5 = hoverDecoration) === null || _hoverDecoration5 === void 0 ? void 0 : _hoverDecoration5(nodeType, true),
-          onMouseLeave: (_hoverDecoration6 = hoverDecoration) === null || _hoverDecoration6 === void 0 ? void 0 : _hoverDecoration6(nodeType, false),
-          onFocus: (_hoverDecoration7 = hoverDecoration) === null || _hoverDecoration7 === void 0 ? void 0 : _hoverDecoration7(nodeType, true),
-          onBlur: (_hoverDecoration8 = hoverDecoration) === null || _hoverDecoration8 === void 0 ? void 0 : _hoverDecoration8(nodeType, false),
-          focusEditoronEnter: true,
-          title: formatMessage(commonMessages.remove),
-          tabIndex: null,
-          confirmDialog: confirmDialog
-        }, {
-          type: 'separator'
+          type: 'separator',
+          fullHeight: true
         }, {
-          type: 'copy-button',
-          items: [{
-            state: state,
-            formatMessage: intl.formatMessage,
-            nodeType: nodeType
+          type: 'overflow-dropdown',
+          options: [{
+            title: 'Copy',
+            onClick: function onClick() {
+              var _extensionApi$core, _extensionApi$floatin;
+              extensionApi === null || extensionApi === void 0 || (_extensionApi$core = extensionApi.core) === null || _extensionApi$core === void 0 || _extensionApi$core.actions.execute( // @ts-ignore
+              extensionApi === null || extensionApi === void 0 || (_extensionApi$floatin = extensionApi.floatingToolbar) === null || _extensionApi$floatin === void 0 ? void 0 : _extensionApi$floatin.commands.copyNode(nodeType));
+              return true;
+            },
+            icon: /*#__PURE__*/React.createElement(CopyIcon, {
+              label: "Copy"
+            })
+          }, {
+            title: 'Delete',
+            onClick: removeExtension(editorAnalyticsAPI),
+            icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+              label: "Delete"
+            })
           }]
         }])),
         scrollable: true

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-extension",
-	"version": "5.0.0",
+	"version": "5.0.1",
 	"description": "editor-plugin-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -50,7 +50,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/radio": "^8.0.0",
-		"@atlaskit/section-message": "^8.0.0",
+		"@atlaskit/section-message": "^8.1.0",
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/smart-user-picker": "^8.0.0",
 		"@atlaskit/spinner": "^18.0.0",