@atlaskit/editor-plugin-selection-extension 10.3.22 → 10.3.24

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 10.3.24
+
+### Patch Changes
+
+- [`0a3f1913cc452`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0a3f1913cc452) -
+  Skip tracking experience for extension item transform
+- Updated dependencies
+
+## 10.3.23
+
+### Patch Changes
+
+- [`47211917d90fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/47211917d90fc) -
+  Editor 5281 fix block menu icon cut off when zoom
+- Updated dependencies
+
 ## 10.3.22
 
 ### Patch Changes

package/dist/cjs/ui/menu/SelectionExtensionDropdownItem.compiled.css

@@ -1,3 +1,4 @@
+._172sewfl svg{overflow-y:visible}
 ._18m915vq{overflow-y:hidden}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
 ._1bto1l2s{text-overflow:ellipsis}
@@ -5,5 +6,6 @@
 ._1o9zidpf{flex-shrink:0}
 ._1reo15vq{overflow-x:hidden}
 ._1ul9idpf{min-width:0}
+._1wrmewfl svg{overflow-x:visible}
 ._4cvr1h6o{align-items:center}
 ._o5721q9c{white-space:nowrap}

package/dist/cjs/ui/menu/SelectionExtensionDropdownItem.js

@@ -12,6 +12,7 @@ var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -22,6 +23,7 @@ var _types = require("../../types");
 var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
+  svgOverflow: "_1wrmewfl _172sewfl",
   contentWrapper: "_1e0c1txw _4cvr1h6o _1ul9idpf",
   label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
   lozenge: "_18u01b66 _1o9zidpf"
@@ -101,20 +103,29 @@ var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = fu
       setIsTruncated(el.scrollWidth > el.clientWidth);
     }
   }, []);
+
+  // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
+  // Adds size="small" to icons for better visual co	nsistency in block menu.
+  // Adds overflow: visible to SVGs to fix when view port is in different zoom level, sometimes the right edge of the icon is cut off.
+  // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu,
+  // and always apply svgOverflowStyles wrapper for block-menu items.
+  var iconSize = (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && ((0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_1') || (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined;
+  var iconElement = IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
+    size: iconSize,
+    label: ""
+  }) : undefined;
+  var elemBeforeIcon = iconElement && extensionLocation === 'block-menu' && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_3') ? /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)([styles.svgOverflow])
+  }, iconElement) : iconElement;
   if ((0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2')) {
     return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
       content: isTruncated ? dropdownItem.label : null,
       position: "top"
     }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-      elemBefore: IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
-        size:
-        // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
-        // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu
-        (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && ((0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_1') || (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined,
-        label: ""
-      }) : undefined,
+      elemBefore: elemBeforeIcon,
       onClick: handleClick,
-      isDisabled: dropdownItem.isDisabled
+      isDisabled: dropdownItem.isDisabled,
+      testId: _blockMenu.EXTENSION_MENU_ITEM_TEST_ID
     }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       as: "span",
       xcss: styles.contentWrapper,
@@ -131,13 +142,8 @@ var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = fu
     }, dropdownItem.lozenge.label)) : undefined)));
   }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
-    elemBefore: IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
-      size:
-      // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
-      // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu
-      (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && ((0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_1') || (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined,
-      label: ""
-    }) : undefined,
+    elemBefore: elemBeforeIcon,
+    testId: _blockMenu.EXTENSION_MENU_ITEM_TEST_ID,
     onClick: handleClick,
     isDisabled: dropdownItem.isDisabled
   }, dropdownItem.label, dropdownItem.lozenge ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {

package/dist/cjs/ui/menu/SelectionExtensionNestedDropdownMenu.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectionExtensionNestedDropdownMenu = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -47,6 +48,7 @@ var SelectionExtensionNestedDropdownMenu = exports.SelectionExtensionNestedDropd
     });
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
+    testId: _blockMenu.EXTENSION_MENU_ITEM_TEST_ID,
     text: nestedDropdownMenu.label,
     elemBefore: IconComponent ?
     /*#__PURE__*/

package/dist/es2019/ui/menu/SelectionExtensionDropdownItem.compiled.css

@@ -1,3 +1,4 @@
+._172sewfl svg{overflow-y:visible}
 ._18m915vq{overflow-y:hidden}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
 ._1bto1l2s{text-overflow:ellipsis}
@@ -5,5 +6,6 @@
 ._1o9zidpf{flex-shrink:0}
 ._1reo15vq{overflow-x:hidden}
 ._1ul9idpf{min-width:0}
+._1wrmewfl svg{overflow-x:visible}
 ._4cvr1h6o{align-items:center}
 ._o5721q9c{white-space:nowrap}

package/dist/es2019/ui/menu/SelectionExtensionDropdownItem.js

@@ -3,6 +3,7 @@ import "./SelectionExtensionDropdownItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef, useState } from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { EXTENSION_MENU_ITEM_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { ToolbarDropdownItem, ToolbarTooltip } from '@atlaskit/editor-toolbar';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -12,6 +13,7 @@ import { getSelectionAdfInfoNew, getSelectionTextInfoNew } from '../../pm-plugin
 import { SelectionExtensionActionTypes } from '../../types';
 import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
 const styles = {
+  svgOverflow: "_1wrmewfl _172sewfl",
   contentWrapper: "_1e0c1txw _4cvr1h6o _1ul9idpf",
   label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
   lozenge: "_18u01b66 _1o9zidpf"
@@ -92,20 +94,29 @@ export const SelectionExtensionDropdownItem = ({
       setIsTruncated(el.scrollWidth > el.clientWidth);
     }
   }, []);
+
+  // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
+  // Adds size="small" to icons for better visual co	nsistency in block menu.
+  // Adds overflow: visible to SVGs to fix when view port is in different zoom level, sometimes the right edge of the icon is cut off.
+  // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu,
+  // and always apply svgOverflowStyles wrapper for block-menu items.
+  const iconSize = (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && (fg('platform_editor_block_menu_v2_patch_1') || fg('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined;
+  const iconElement = IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
+    size: iconSize,
+    label: ""
+  }) : undefined;
+  const elemBeforeIcon = iconElement && extensionLocation === 'block-menu' && fg('platform_editor_block_menu_v2_patch_3') ? /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.svgOverflow])
+  }, iconElement) : iconElement;
   if (fg('platform_editor_block_menu_v2_patch_2')) {
     return /*#__PURE__*/React.createElement(ToolbarTooltip, {
       content: isTruncated ? dropdownItem.label : null,
       position: "top"
     }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-      elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
-        size:
-        // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
-        // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu
-        (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && (fg('platform_editor_block_menu_v2_patch_1') || fg('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined,
-        label: ""
-      }) : undefined,
+      elemBefore: elemBeforeIcon,
       onClick: handleClick,
-      isDisabled: dropdownItem.isDisabled
+      isDisabled: dropdownItem.isDisabled,
+      testId: EXTENSION_MENU_ITEM_TEST_ID
     }, /*#__PURE__*/React.createElement(Box, {
       as: "span",
       xcss: styles.contentWrapper,
@@ -122,13 +133,8 @@ export const SelectionExtensionDropdownItem = ({
     }, dropdownItem.lozenge.label)) : undefined)));
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-    elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
-      size:
-      // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
-      // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu
-      (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && (fg('platform_editor_block_menu_v2_patch_1') || fg('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined,
-      label: ""
-    }) : undefined,
+    elemBefore: elemBeforeIcon,
+    testId: EXTENSION_MENU_ITEM_TEST_ID,
     onClick: handleClick,
     isDisabled: dropdownItem.isDisabled
   }, dropdownItem.label, dropdownItem.lozenge ? /*#__PURE__*/React.createElement(Box, {

package/dist/es2019/ui/menu/SelectionExtensionNestedDropdownMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { EXTENSION_MENU_ITEM_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -41,6 +42,7 @@ export const SelectionExtensionNestedDropdownMenu = ({
     });
   };
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    testId: EXTENSION_MENU_ITEM_TEST_ID,
     text: nestedDropdownMenu.label,
     elemBefore: IconComponent ?
     /*#__PURE__*/

package/dist/esm/ui/menu/SelectionExtensionDropdownItem.compiled.css

@@ -1,3 +1,4 @@
+._172sewfl svg{overflow-y:visible}
 ._18m915vq{overflow-y:hidden}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
 ._1bto1l2s{text-overflow:ellipsis}
@@ -5,5 +6,6 @@
 ._1o9zidpf{flex-shrink:0}
 ._1reo15vq{overflow-x:hidden}
 ._1ul9idpf{min-width:0}
+._1wrmewfl svg{overflow-x:visible}
 ._4cvr1h6o{align-items:center}
 ._o5721q9c{white-space:nowrap}

package/dist/esm/ui/menu/SelectionExtensionDropdownItem.js

@@ -4,6 +4,7 @@ import "./SelectionExtensionDropdownItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef, useState } from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { EXTENSION_MENU_ITEM_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { ToolbarDropdownItem, ToolbarTooltip } from '@atlaskit/editor-toolbar';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -13,6 +14,7 @@ import { getSelectionAdfInfoNew, getSelectionTextInfoNew } from '../../pm-plugin
 import { SelectionExtensionActionTypes } from '../../types';
 import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
 var styles = {
+  svgOverflow: "_1wrmewfl _172sewfl",
   contentWrapper: "_1e0c1txw _4cvr1h6o _1ul9idpf",
   label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
   lozenge: "_18u01b66 _1o9zidpf"
@@ -92,20 +94,29 @@ export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownI
       setIsTruncated(el.scrollWidth > el.clientWidth);
     }
   }, []);
+
+  // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
+  // Adds size="small" to icons for better visual co	nsistency in block menu.
+  // Adds overflow: visible to SVGs to fix when view port is in different zoom level, sometimes the right edge of the icon is cut off.
+  // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu,
+  // and always apply svgOverflowStyles wrapper for block-menu items.
+  var iconSize = (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && (fg('platform_editor_block_menu_v2_patch_1') || fg('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined;
+  var iconElement = IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
+    size: iconSize,
+    label: ""
+  }) : undefined;
+  var elemBeforeIcon = iconElement && extensionLocation === 'block-menu' && fg('platform_editor_block_menu_v2_patch_3') ? /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.svgOverflow])
+  }, iconElement) : iconElement;
   if (fg('platform_editor_block_menu_v2_patch_2')) {
     return /*#__PURE__*/React.createElement(ToolbarTooltip, {
       content: isTruncated ? dropdownItem.label : null,
       position: "top"
     }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-      elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
-        size:
-        // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
-        // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu
-        (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && (fg('platform_editor_block_menu_v2_patch_1') || fg('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined,
-        label: ""
-      }) : undefined,
+      elemBefore: elemBeforeIcon,
       onClick: handleClick,
-      isDisabled: dropdownItem.isDisabled
+      isDisabled: dropdownItem.isDisabled,
+      testId: EXTENSION_MENU_ITEM_TEST_ID
     }, /*#__PURE__*/React.createElement(Box, {
       as: "span",
       xcss: styles.contentWrapper,
@@ -122,13 +133,8 @@ export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownI
     }, dropdownItem.lozenge.label)) : undefined)));
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-    elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
-      size:
-      // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
-      // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu
-      (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && (fg('platform_editor_block_menu_v2_patch_1') || fg('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined,
-      label: ""
-    }) : undefined,
+    elemBefore: elemBeforeIcon,
+    testId: EXTENSION_MENU_ITEM_TEST_ID,
     onClick: handleClick,
     isDisabled: dropdownItem.isDisabled
   }, dropdownItem.label, dropdownItem.lozenge ? /*#__PURE__*/React.createElement(Box, {

package/dist/esm/ui/menu/SelectionExtensionNestedDropdownMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { EXTENSION_MENU_ITEM_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -40,6 +41,7 @@ export var SelectionExtensionNestedDropdownMenu = function SelectionExtensionNes
     });
   };
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    testId: EXTENSION_MENU_ITEM_TEST_ID,
     text: nestedDropdownMenu.label,
     elemBefore: IconComponent ?
     /*#__PURE__*/

package/dist/types/ui/menu/SelectionExtensionDropdownItem.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import type { ExtensionDropdownItemConfiguration } from '../../types';
 type SelectionExtensionDropdownItemProps = {

package/dist/types-ts4.5/ui/menu/SelectionExtensionDropdownItem.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import type { ExtensionDropdownItemConfiguration } from '../../types';
 type SelectionExtensionDropdownItemProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-extension",
-	"version": "10.3.22",
+	"version": "10.3.24",
 	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,7 +36,7 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-plugin-analytics": "^7.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^8.7.0",
+		"@atlaskit/editor-plugin-block-controls": "^8.8.0",
 		"@atlaskit/editor-plugin-block-menu": "^6.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^9.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode-effects": "^7.0.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/lozenge": "^13.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^32.0.0",
+		"@atlaskit/tmp-editor-statsig": "^32.11.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
@@ -60,7 +60,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.20.0",
+		"@atlaskit/editor-common": "^111.24.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {