@atlaskit/editor-plugin-selection-extension 7.1.3 → 7.2.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 7.2.1
+
+### Patch Changes
+
+- [`5baa955ebe237`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5baa955ebe237) -
+  Add new menu section for all extensions (inc. loom and 1p, 3p extensions), add logic to hide menu
+  button completely when there are no menu-sections with no menu-items associated with it
+- Updated dependencies
+
+## 7.2.0
+
+### Minor Changes
+
+- [`ed556ceff1790`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ed556ceff1790) -
+  Update selectionExtension config to accept lozenge in menu button
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.1.3
 
 ### Patch Changes

package/dist/cjs/ui/toolbar-components/MenuItem.js

@@ -8,6 +8,9 @@ exports.MenuItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _main = require("../../pm-plugins/main");
 var _utils = require("../../pm-plugins/utils");
 var _types = require("../../types");
@@ -53,6 +56,11 @@ var MenuItem = exports.MenuItem = function MenuItem(_ref) {
       }),
       onClick: onClickHandle(extension),
       isDisabled: extension.isDisabled
-    }, extension.label);
+    }, extension.label, extension.lozenge && (0, _platformFeatureFlags.fg)('platform_editor_selection_extension_lozenge') && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      paddingInline: "space.100"
+    }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+      appearance: 'new'
+    }, extension.lozenge.label)));
   }));
 };

package/dist/cjs/ui/toolbar-components/register-inline-toolbar.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.registerInlineToolbar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _MenuItem = require("./MenuItem");
 var _ToolbarButton = require("./ToolbarButton");
 var _ToolbarMenu = require("./ToolbarMenu");
@@ -99,7 +100,7 @@ var registerInlineToolbar = exports.registerInlineToolbar = function registerInl
       parents: [{
         type: 'menu-section',
         // if we have a custom menu, place items in there, otherwise in the overflow menu
-        key: getToolbarItem ? menuSectionKey : _toolbar.SELECTION_EXTENSION_MENU_SECTION.key,
+        key: getToolbarItem ? menuSectionKey : (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_overflow_menu_update') ? _toolbar.OVERFLOW_EXTENSIONS_MENU_SECTION.key : _toolbar.SELECTION_EXTENSION_MENU_SECTION.key,
         rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
       }],
       component: function component() {

package/dist/cjs/ui/toolbar-components.js

@@ -8,6 +8,7 @@ exports.getToolbarComponents = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _MenuItem = require("./toolbar-components/MenuItem");
 var _registerInlineToolbar = require("./toolbar-components/register-inline-toolbar");
 var _migrateSelectionExtention = require("./utils/migrate-selection-extention");
@@ -52,7 +53,7 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
       rank: _toolbar.TOOLBAR_RANK[_toolbar.APPS_SECTION.key]
     }]
-  },
+  }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_overflow_menu_update') ? [] : [
   // also register a section inside the overflow menu for extensions which only have menu items
   {
     type: _toolbar.SELECTION_EXTENSION_MENU_SECTION.type,
@@ -62,10 +63,28 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       type: _toolbar.OVERFLOW_MENU.type,
       rank: _toolbar.OVERFLOW_MENU_RANK[_toolbar.SELECTION_EXTENSION_MENU_SECTION.key]
     }]
-  }].concat((0, _toConsumableArray2.default)(extensionToolbarComponents), (0, _toConsumableArray2.default)(registerFirstPartyExtensions(api, firstPartyExtensions)), (0, _toConsumableArray2.default)(registerExternalExtensions(api, externalExtensions)));
+  }]), (0, _toConsumableArray2.default)(extensionToolbarComponents), (0, _toConsumableArray2.default)(registerFirstPartyExtensions(api, firstPartyExtensions)), (0, _toConsumableArray2.default)(registerExternalExtensions(api, externalExtensions)));
 };
 var registerFirstPartyExtensions = function registerFirstPartyExtensions(api, extensions) {
   var components = [];
+  if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_overflow_menu_update')) {
+    components.push({
+      type: _toolbar.FIRST_PARTY_EXTENSIONS_MENU_ITEM.type,
+      key: _toolbar.FIRST_PARTY_EXTENSIONS_MENU_ITEM.key,
+      parents: [{
+        type: _toolbar.OVERFLOW_EXTENSIONS_MENU_SECTION.type,
+        key: _toolbar.OVERFLOW_EXTENSIONS_MENU_SECTION.key,
+        rank: _toolbar.OVERFLOW_EXTENSIONS_MENU_SECTION_RANK[_toolbar.FIRST_PARTY_EXTENSIONS_MENU_ITEM.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, {
+          api: api,
+          extensionMenuItems: extensions
+        });
+      }
+    });
+    return components;
+  }
   components.push({
     type: 'menu-item',
     key: 'first-party-extensions-menu-item',
@@ -85,6 +104,24 @@ var registerFirstPartyExtensions = function registerFirstPartyExtensions(api, ex
 };
 var registerExternalExtensions = function registerExternalExtensions(api, extensions) {
   var components = [];
+  if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_overflow_menu_update')) {
+    components.push({
+      type: _toolbar.EXTERNAL_EXTENSIONS_MENU_ITEM.type,
+      key: _toolbar.EXTERNAL_EXTENSIONS_MENU_ITEM.key,
+      parents: [{
+        type: _toolbar.OVERFLOW_EXTENSIONS_MENU_SECTION.type,
+        key: _toolbar.OVERFLOW_EXTENSIONS_MENU_SECTION.key,
+        rank: _toolbar.OVERFLOW_EXTENSIONS_MENU_SECTION_RANK[_toolbar.EXTERNAL_EXTENSIONS_MENU_ITEM.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, {
+          api: api,
+          extensionMenuItems: extensions
+        });
+      }
+    });
+    return components;
+  }
   components.push({
     type: 'menu-item',
     key: 'external-extensions-menu-item',

package/dist/es2019/ui/toolbar-components/MenuItem.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { selectionExtensionPluginKey } from '../../pm-plugins/main';
 import { getSelectionAdfInfoNew, getSelectionTextInfo } from '../../pm-plugins/utils';
 import { SelectionExtensionActionTypes } from '../../types';
@@ -48,6 +51,11 @@ export const MenuItem = ({
       }),
       onClick: onClickHandle(extension),
       isDisabled: extension.isDisabled
-    }, extension.label);
+    }, extension.label, extension.lozenge && fg('platform_editor_selection_extension_lozenge') && /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      paddingInline: "space.100"
+    }, /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: 'new'
+    }, extension.lozenge.label)));
   }));
 };

package/dist/es2019/ui/toolbar-components/register-inline-toolbar.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { SELECTION_EXTENSION_MENU_SECTION, APPS_SECTION } from '@atlaskit/editor-common/toolbar';
+import { SELECTION_EXTENSION_MENU_SECTION, APPS_SECTION, OVERFLOW_EXTENSIONS_MENU_SECTION } from '@atlaskit/editor-common/toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItem } from './MenuItem';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarMenu } from './ToolbarMenu';
@@ -95,7 +96,7 @@ export const registerInlineToolbar = ({
       parents: [{
         type: 'menu-section',
         // if we have a custom menu, place items in there, otherwise in the overflow menu
-        key: getToolbarItem ? menuSectionKey : SELECTION_EXTENSION_MENU_SECTION.key,
+        key: getToolbarItem ? menuSectionKey : fg('platform_editor_toolbar_aifc_overflow_menu_update') ? OVERFLOW_EXTENSIONS_MENU_SECTION.key : SELECTION_EXTENSION_MENU_SECTION.key,
         rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
       }],
       component: () => {

package/dist/es2019/ui/toolbar-components.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { APPS_SECTION, OVERFLOW_MENU, OVERFLOW_MENU_RANK, SELECTION_EXTENSION_MENU_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { APPS_SECTION, EXTERNAL_EXTENSIONS_MENU_ITEM, FIRST_PARTY_EXTENSIONS_MENU_ITEM, OVERFLOW_EXTENSIONS_MENU_SECTION, OVERFLOW_EXTENSIONS_MENU_SECTION_RANK, OVERFLOW_MENU, OVERFLOW_MENU_RANK, SELECTION_EXTENSION_MENU_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItem } from './toolbar-components/MenuItem';
 import { registerInlineToolbar } from './toolbar-components/register-inline-toolbar';
 import { migrateSelectionExtensionToMenuItem } from './utils/migrate-selection-extention';
@@ -35,7 +36,7 @@ export const getToolbarComponents = ({
       key: TOOLBARS.PRIMARY_TOOLBAR,
       rank: TOOLBAR_RANK[APPS_SECTION.key]
     }]
-  },
+  }, ...(fg('platform_editor_toolbar_aifc_overflow_menu_update') ? [] : [
   // also register a section inside the overflow menu for extensions which only have menu items
   {
     type: SELECTION_EXTENSION_MENU_SECTION.type,
@@ -45,10 +46,28 @@ export const getToolbarComponents = ({
       type: OVERFLOW_MENU.type,
       rank: OVERFLOW_MENU_RANK[SELECTION_EXTENSION_MENU_SECTION.key]
     }]
-  }, ...extensionToolbarComponents, ...registerFirstPartyExtensions(api, firstPartyExtensions), ...registerExternalExtensions(api, externalExtensions)];
+  }]), ...extensionToolbarComponents, ...registerFirstPartyExtensions(api, firstPartyExtensions), ...registerExternalExtensions(api, externalExtensions)];
 };
 const registerFirstPartyExtensions = (api, extensions) => {
   const components = [];
+  if (fg('platform_editor_toolbar_aifc_overflow_menu_update')) {
+    components.push({
+      type: FIRST_PARTY_EXTENSIONS_MENU_ITEM.type,
+      key: FIRST_PARTY_EXTENSIONS_MENU_ITEM.key,
+      parents: [{
+        type: OVERFLOW_EXTENSIONS_MENU_SECTION.type,
+        key: OVERFLOW_EXTENSIONS_MENU_SECTION.key,
+        rank: OVERFLOW_EXTENSIONS_MENU_SECTION_RANK[FIRST_PARTY_EXTENSIONS_MENU_ITEM.key]
+      }],
+      component: () => {
+        return /*#__PURE__*/React.createElement(MenuItem, {
+          api: api,
+          extensionMenuItems: extensions
+        });
+      }
+    });
+    return components;
+  }
   components.push({
     type: 'menu-item',
     key: 'first-party-extensions-menu-item',
@@ -68,6 +87,24 @@ const registerFirstPartyExtensions = (api, extensions) => {
 };
 const registerExternalExtensions = (api, extensions) => {
   const components = [];
+  if (fg('platform_editor_toolbar_aifc_overflow_menu_update')) {
+    components.push({
+      type: EXTERNAL_EXTENSIONS_MENU_ITEM.type,
+      key: EXTERNAL_EXTENSIONS_MENU_ITEM.key,
+      parents: [{
+        type: OVERFLOW_EXTENSIONS_MENU_SECTION.type,
+        key: OVERFLOW_EXTENSIONS_MENU_SECTION.key,
+        rank: OVERFLOW_EXTENSIONS_MENU_SECTION_RANK[EXTERNAL_EXTENSIONS_MENU_ITEM.key]
+      }],
+      component: () => {
+        return /*#__PURE__*/React.createElement(MenuItem, {
+          api: api,
+          extensionMenuItems: extensions
+        });
+      }
+    });
+    return components;
+  }
   components.push({
     type: 'menu-item',
     key: 'external-extensions-menu-item',

package/dist/esm/ui/toolbar-components/MenuItem.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { selectionExtensionPluginKey } from '../../pm-plugins/main';
 import { getSelectionAdfInfoNew, getSelectionTextInfo } from '../../pm-plugins/utils';
 import { SelectionExtensionActionTypes } from '../../types';
@@ -46,6 +49,11 @@ export var MenuItem = function MenuItem(_ref) {
       }),
       onClick: onClickHandle(extension),
       isDisabled: extension.isDisabled
-    }, extension.label);
+    }, extension.label, extension.lozenge && fg('platform_editor_selection_extension_lozenge') && /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      paddingInline: "space.100"
+    }, /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: 'new'
+    }, extension.lozenge.label)));
   }));
 };

package/dist/esm/ui/toolbar-components/register-inline-toolbar.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { SELECTION_EXTENSION_MENU_SECTION, APPS_SECTION } from '@atlaskit/editor-common/toolbar';
+import { SELECTION_EXTENSION_MENU_SECTION, APPS_SECTION, OVERFLOW_EXTENSIONS_MENU_SECTION } from '@atlaskit/editor-common/toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItem } from './MenuItem';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarMenu } from './ToolbarMenu';
@@ -92,7 +93,7 @@ export var registerInlineToolbar = function registerInlineToolbar(_ref) {
       parents: [{
         type: 'menu-section',
         // if we have a custom menu, place items in there, otherwise in the overflow menu
-        key: getToolbarItem ? menuSectionKey : SELECTION_EXTENSION_MENU_SECTION.key,
+        key: getToolbarItem ? menuSectionKey : fg('platform_editor_toolbar_aifc_overflow_menu_update') ? OVERFLOW_EXTENSIONS_MENU_SECTION.key : SELECTION_EXTENSION_MENU_SECTION.key,
         rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
       }],
       component: function component() {

package/dist/esm/ui/toolbar-components.js

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
-import { APPS_SECTION, OVERFLOW_MENU, OVERFLOW_MENU_RANK, SELECTION_EXTENSION_MENU_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { APPS_SECTION, EXTERNAL_EXTENSIONS_MENU_ITEM, FIRST_PARTY_EXTENSIONS_MENU_ITEM, OVERFLOW_EXTENSIONS_MENU_SECTION, OVERFLOW_EXTENSIONS_MENU_SECTION_RANK, OVERFLOW_MENU, OVERFLOW_MENU_RANK, SELECTION_EXTENSION_MENU_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItem } from './toolbar-components/MenuItem';
 import { registerInlineToolbar } from './toolbar-components/register-inline-toolbar';
 import { migrateSelectionExtensionToMenuItem } from './utils/migrate-selection-extention';
@@ -45,7 +46,7 @@ export var getToolbarComponents = function getToolbarComponents(_ref) {
       key: TOOLBARS.PRIMARY_TOOLBAR,
       rank: TOOLBAR_RANK[APPS_SECTION.key]
     }]
-  },
+  }].concat(_toConsumableArray(fg('platform_editor_toolbar_aifc_overflow_menu_update') ? [] : [
   // also register a section inside the overflow menu for extensions which only have menu items
   {
     type: SELECTION_EXTENSION_MENU_SECTION.type,
@@ -55,10 +56,28 @@ export var getToolbarComponents = function getToolbarComponents(_ref) {
       type: OVERFLOW_MENU.type,
       rank: OVERFLOW_MENU_RANK[SELECTION_EXTENSION_MENU_SECTION.key]
     }]
-  }].concat(_toConsumableArray(extensionToolbarComponents), _toConsumableArray(registerFirstPartyExtensions(api, firstPartyExtensions)), _toConsumableArray(registerExternalExtensions(api, externalExtensions)));
+  }]), _toConsumableArray(extensionToolbarComponents), _toConsumableArray(registerFirstPartyExtensions(api, firstPartyExtensions)), _toConsumableArray(registerExternalExtensions(api, externalExtensions)));
 };
 var registerFirstPartyExtensions = function registerFirstPartyExtensions(api, extensions) {
   var components = [];
+  if (fg('platform_editor_toolbar_aifc_overflow_menu_update')) {
+    components.push({
+      type: FIRST_PARTY_EXTENSIONS_MENU_ITEM.type,
+      key: FIRST_PARTY_EXTENSIONS_MENU_ITEM.key,
+      parents: [{
+        type: OVERFLOW_EXTENSIONS_MENU_SECTION.type,
+        key: OVERFLOW_EXTENSIONS_MENU_SECTION.key,
+        rank: OVERFLOW_EXTENSIONS_MENU_SECTION_RANK[FIRST_PARTY_EXTENSIONS_MENU_ITEM.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/React.createElement(MenuItem, {
+          api: api,
+          extensionMenuItems: extensions
+        });
+      }
+    });
+    return components;
+  }
   components.push({
     type: 'menu-item',
     key: 'first-party-extensions-menu-item',
@@ -78,6 +97,24 @@ var registerFirstPartyExtensions = function registerFirstPartyExtensions(api, ex
 };
 var registerExternalExtensions = function registerExternalExtensions(api, extensions) {
   var components = [];
+  if (fg('platform_editor_toolbar_aifc_overflow_menu_update')) {
+    components.push({
+      type: EXTERNAL_EXTENSIONS_MENU_ITEM.type,
+      key: EXTERNAL_EXTENSIONS_MENU_ITEM.key,
+      parents: [{
+        type: OVERFLOW_EXTENSIONS_MENU_SECTION.type,
+        key: OVERFLOW_EXTENSIONS_MENU_SECTION.key,
+        rank: OVERFLOW_EXTENSIONS_MENU_SECTION_RANK[EXTERNAL_EXTENSIONS_MENU_ITEM.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/React.createElement(MenuItem, {
+          api: api,
+          extensionMenuItems: extensions
+        });
+      }
+    });
+    return components;
+  }
   components.push({
     type: 'menu-item',
     key: 'external-extensions-menu-item',

package/dist/types/types/index.d.ts

@@ -155,6 +155,12 @@ export type ExtensionMenuItemConfiguration = {
     }>>;
     isDisabled?: boolean;
     label: string;
+    /**
+     * Optional lozenge to display next to the label in the menu
+     */
+    lozenge?: {
+        label: string;
+    };
     onClick?: () => void;
     /**
      * Optional menu-section to declare grouping - only used for menu items

package/dist/types-ts4.5/types/index.d.ts

@@ -155,6 +155,12 @@ export type ExtensionMenuItemConfiguration = {
     }>>;
     isDisabled?: boolean;
     label: string;
+    /**
+     * Optional lozenge to display next to the label in the menu
+     */
+    lozenge?: {
+        label: string;
+    };
     onClick?: () => void;
     /**
      * Optional menu-section to declare grouping - only used for menu items

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-extension",
-	"version": "7.1.3",
+	"version": "7.2.1",
 	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -47,16 +47,18 @@
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.18.0",
 		"@atlaskit/icon": "^29.0.0",
+		"@atlaskit/lozenge": "^13.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
-		"@atlaskit/tmp-editor-statsig": "^14.5.0",
+		"@atlaskit/primitives": "^16.4.0",
+		"@atlaskit/tmp-editor-statsig": "^14.8.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
 		"react-intl-next": "npm:react-intl@^5.18.1",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.38.0",
+		"@atlaskit/editor-common": "^110.40.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
@@ -106,8 +108,14 @@
 		"platform_editor_use_preferences_plugin": {
 			"type": "boolean"
 		},
+		"platform_editor_selection_extension_lozenge": {
+			"type": "boolean"
+		},
 		"platform_editor_selection_extension_improvement": {
 			"type": "boolean"
+		},
+		"platform_editor_toolbar_aifc_overflow_menu_update": {
+			"type": "boolean"
 		}
 	}
 }