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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/menu/SelectionExtensionDropdownItem.compiled.css +2 -0
  3. package/dist/cjs/ui/menu/SelectionExtensionDropdownItem.js +17 -14
  4. package/dist/es2019/ui/menu/SelectionExtensionDropdownItem.compiled.css +2 -0
  5. package/dist/es2019/ui/menu/SelectionExtensionDropdownItem.js +17 -14
  6. package/dist/esm/ui/menu/SelectionExtensionDropdownItem.compiled.css +2 -0
  7. package/dist/esm/ui/menu/SelectionExtensionDropdownItem.js +17 -14
  8. package/dist/types/ui/menu/SelectionExtensionDropdownItem.d.ts +4 -0
  9. package/dist/types-ts4.5/ui/menu/SelectionExtensionDropdownItem.d.ts +4 -0
  10. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-selection-extension
2
2
 
3
+ ## 10.3.23
4
+
5
+ ### Patch Changes
6
+
7
+ - [`47211917d90fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/47211917d90fc) -
8
+ Editor 5281 fix block menu icon cut off when zoom
9
+ - Updated dependencies
10
+
3
11
  ## 10.3.22
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/ui/menu/SelectionExtensionDropdownItem.compiled.css CHANGED
@@ -1,3 +1,4 @@
1
+ ._172sewfl svg{overflow-y:visible}
1
2
  ._18m915vq{overflow-y:hidden}
2
3
  ._18u01b66{margin-left:var(--ds-space-050,4px)}
3
4
  ._1bto1l2s{text-overflow:ellipsis}
@@ -5,5 +6,6 @@
5
6
  ._1o9zidpf{flex-shrink:0}
6
7
  ._1reo15vq{overflow-x:hidden}
7
8
  ._1ul9idpf{min-width:0}
9
+ ._1wrmewfl svg{overflow-x:visible}
8
10
  ._4cvr1h6o{align-items:center}
9
11
  ._o5721q9c{white-space:nowrap}
package/dist/cjs/ui/menu/SelectionExtensionDropdownItem.js CHANGED
@@ -22,6 +22,7 @@ var _types = require("../../types");
22
22
  var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
23
23
  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); }
24
24
  var styles = {
25
+ svgOverflow: "_1wrmewfl _172sewfl",
25
26
  contentWrapper: "_1e0c1txw _4cvr1h6o _1ul9idpf",
26
27
  label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
27
28
  lozenge: "_18u01b66 _1o9zidpf"
@@ -101,18 +102,26 @@ var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = fu
101
102
  setIsTruncated(el.scrollWidth > el.clientWidth);
102
103
  }
103
104
  }, []);
105
+
106
+ // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
107
+ // Adds size="small" to icons for better visual co nsistency in block menu.
108
+ // 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.
109
+ // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu,
110
+ // and always apply svgOverflowStyles wrapper for block-menu items.
111
+ 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;
112
+ var iconElement = IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
113
+ size: iconSize,
114
+ label: ""
115
+ }) : undefined;
116
+ var elemBeforeIcon = iconElement && extensionLocation === 'block-menu' && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_3') ? /*#__PURE__*/_react.default.createElement("span", {
117
+ className: (0, _runtime.ax)([styles.svgOverflow])
118
+ }, iconElement) : iconElement;
104
119
  if ((0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2')) {
105
120
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
106
121
  content: isTruncated ? dropdownItem.label : null,
107
122
  position: "top"
108
123
  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
109
- elemBefore: IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
110
- size:
111
- // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
112
- // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu
113
- (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,
114
- label: ""
115
- }) : undefined,
124
+ elemBefore: elemBeforeIcon,
116
125
  onClick: handleClick,
117
126
  isDisabled: dropdownItem.isDisabled
118
127
  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
@@ -131,13 +140,7 @@ var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = fu
131
140
  }, dropdownItem.lozenge.label)) : undefined)));
132
141
  }
133
142
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
134
- elemBefore: IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
135
- size:
136
- // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
137
- // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu
138
- (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,
139
- label: ""
140
- }) : undefined,
143
+ elemBefore: elemBeforeIcon,
141
144
  onClick: handleClick,
142
145
  isDisabled: dropdownItem.isDisabled
143
146
  }, dropdownItem.label, dropdownItem.lozenge ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
package/dist/es2019/ui/menu/SelectionExtensionDropdownItem.compiled.css CHANGED
@@ -1,3 +1,4 @@
1
+ ._172sewfl svg{overflow-y:visible}
1
2
  ._18m915vq{overflow-y:hidden}
2
3
  ._18u01b66{margin-left:var(--ds-space-050,4px)}
3
4
  ._1bto1l2s{text-overflow:ellipsis}
@@ -5,5 +6,6 @@
5
6
  ._1o9zidpf{flex-shrink:0}
6
7
  ._1reo15vq{overflow-x:hidden}
7
8
  ._1ul9idpf{min-width:0}
9
+ ._1wrmewfl svg{overflow-x:visible}
8
10
  ._4cvr1h6o{align-items:center}
9
11
  ._o5721q9c{white-space:nowrap}
package/dist/es2019/ui/menu/SelectionExtensionDropdownItem.js CHANGED
@@ -12,6 +12,7 @@ import { getSelectionAdfInfoNew, getSelectionTextInfoNew } from '../../pm-plugin
12
12
  import { SelectionExtensionActionTypes } from '../../types';
13
13
  import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
14
14
  const styles = {
15
+ svgOverflow: "_1wrmewfl _172sewfl",
15
16
  contentWrapper: "_1e0c1txw _4cvr1h6o _1ul9idpf",
16
17
  label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
17
18
  lozenge: "_18u01b66 _1o9zidpf"
@@ -92,18 +93,26 @@ export const SelectionExtensionDropdownItem = ({
92
93
  setIsTruncated(el.scrollWidth > el.clientWidth);
93
94
  }
94
95
  }, []);
96
+
97
+ // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
98
+ // Adds size="small" to icons for better visual co nsistency in block menu.
99
+ // 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.
100
+ // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu,
101
+ // and always apply svgOverflowStyles wrapper for block-menu items.
102
+ 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;
103
+ const iconElement = IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
104
+ size: iconSize,
105
+ label: ""
106
+ }) : undefined;
107
+ const elemBeforeIcon = iconElement && extensionLocation === 'block-menu' && fg('platform_editor_block_menu_v2_patch_3') ? /*#__PURE__*/React.createElement("span", {
108
+ className: ax([styles.svgOverflow])
109
+ }, iconElement) : iconElement;
95
110
  if (fg('platform_editor_block_menu_v2_patch_2')) {
96
111
  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
97
112
  content: isTruncated ? dropdownItem.label : null,
98
113
  position: "top"
99
114
  }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
100
- elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
101
- size:
102
- // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
103
- // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu
104
- (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && (fg('platform_editor_block_menu_v2_patch_1') || fg('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined,
105
- label: ""
106
- }) : undefined,
115
+ elemBefore: elemBeforeIcon,
107
116
  onClick: handleClick,
108
117
  isDisabled: dropdownItem.isDisabled
109
118
  }, /*#__PURE__*/React.createElement(Box, {
@@ -122,13 +131,7 @@ export const SelectionExtensionDropdownItem = ({
122
131
  }, dropdownItem.lozenge.label)) : undefined)));
123
132
  }
124
133
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
125
- elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
126
- size:
127
- // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
128
- // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu
129
- (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && (fg('platform_editor_block_menu_v2_patch_1') || fg('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined,
130
- label: ""
131
- }) : undefined,
134
+ elemBefore: elemBeforeIcon,
132
135
  onClick: handleClick,
133
136
  isDisabled: dropdownItem.isDisabled
134
137
  }, dropdownItem.label, dropdownItem.lozenge ? /*#__PURE__*/React.createElement(Box, {
package/dist/esm/ui/menu/SelectionExtensionDropdownItem.compiled.css CHANGED
@@ -1,3 +1,4 @@
1
+ ._172sewfl svg{overflow-y:visible}
1
2
  ._18m915vq{overflow-y:hidden}
2
3
  ._18u01b66{margin-left:var(--ds-space-050,4px)}
3
4
  ._1bto1l2s{text-overflow:ellipsis}
@@ -5,5 +6,6 @@
5
6
  ._1o9zidpf{flex-shrink:0}
6
7
  ._1reo15vq{overflow-x:hidden}
7
8
  ._1ul9idpf{min-width:0}
9
+ ._1wrmewfl svg{overflow-x:visible}
8
10
  ._4cvr1h6o{align-items:center}
9
11
  ._o5721q9c{white-space:nowrap}
package/dist/esm/ui/menu/SelectionExtensionDropdownItem.js CHANGED
@@ -13,6 +13,7 @@ import { getSelectionAdfInfoNew, getSelectionTextInfoNew } from '../../pm-plugin
13
13
  import { SelectionExtensionActionTypes } from '../../types';
14
14
  import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
15
15
  var styles = {
16
+ svgOverflow: "_1wrmewfl _172sewfl",
16
17
  contentWrapper: "_1e0c1txw _4cvr1h6o _1ul9idpf",
17
18
  label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
18
19
  lozenge: "_18u01b66 _1o9zidpf"
@@ -92,18 +93,26 @@ export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownI
92
93
  setIsTruncated(el.scrollWidth > el.clientWidth);
93
94
  }
94
95
  }, []);
96
+
97
+ // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
98
+ // Adds size="small" to icons for better visual co nsistency in block menu.
99
+ // 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.
100
+ // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu,
101
+ // and always apply svgOverflowStyles wrapper for block-menu items.
102
+ 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;
103
+ var iconElement = IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
104
+ size: iconSize,
105
+ label: ""
106
+ }) : undefined;
107
+ var elemBeforeIcon = iconElement && extensionLocation === 'block-menu' && fg('platform_editor_block_menu_v2_patch_3') ? /*#__PURE__*/React.createElement("span", {
108
+ className: ax([styles.svgOverflow])
109
+ }, iconElement) : iconElement;
95
110
  if (fg('platform_editor_block_menu_v2_patch_2')) {
96
111
  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
97
112
  content: isTruncated ? dropdownItem.label : null,
98
113
  position: "top"
99
114
  }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
100
- elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
101
- size:
102
- // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
103
- // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu
104
- (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && (fg('platform_editor_block_menu_v2_patch_1') || fg('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined,
105
- label: ""
106
- }) : undefined,
115
+ elemBefore: elemBeforeIcon,
107
116
  onClick: handleClick,
108
117
  isDisabled: dropdownItem.isDisabled
109
118
  }, /*#__PURE__*/React.createElement(Box, {
@@ -122,13 +131,7 @@ export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownI
122
131
  }, dropdownItem.lozenge.label)) : undefined)));
123
132
  }
124
133
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
125
- elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
126
- size:
127
- // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
128
- // To clean up: simplify conditional to just check if extensionLocation is inline-toolbar or block-menu
129
- (extensionLocation === 'inline-toolbar' || extensionLocation === 'block-menu') && (fg('platform_editor_block_menu_v2_patch_1') || fg('platform_editor_block_menu_v2_patch_3')) ? 'small' : undefined,
130
- label: ""
131
- }) : undefined,
134
+ elemBefore: elemBeforeIcon,
132
135
  onClick: handleClick,
133
136
  isDisabled: dropdownItem.isDisabled
134
137
  }, dropdownItem.label, dropdownItem.lozenge ? /*#__PURE__*/React.createElement(Box, {
package/dist/types/ui/menu/SelectionExtensionDropdownItem.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React from 'react';
2
6
  import type { ExtensionDropdownItemConfiguration } from '../../types';
3
7
  type SelectionExtensionDropdownItemProps = {
package/dist/types-ts4.5/ui/menu/SelectionExtensionDropdownItem.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React from 'react';
2
6
  import type { ExtensionDropdownItemConfiguration } from '../../types';
3
7
  type SelectionExtensionDropdownItemProps = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-selection-extension",
3
- "version": "10.3.22",
3
+ "version": "10.3.23",
4
4
  "description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -36,7 +36,7 @@
36
36
  "@atlaskit/css": "^0.19.0",
37
37
  "@atlaskit/editor-json-transformer": "^8.31.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^7.0.0",
39
- "@atlaskit/editor-plugin-block-controls": "^8.7.0",
39
+ "@atlaskit/editor-plugin-block-controls": "^8.8.0",
40
40
  "@atlaskit/editor-plugin-block-menu": "^6.1.0",
41
41
  "@atlaskit/editor-plugin-editor-viewmode": "^9.0.0",
42
42
  "@atlaskit/editor-plugin-editor-viewmode-effects": "^7.0.0",
@@ -52,7 +52,7 @@
52
52
  "@atlaskit/lozenge": "^13.4.0",
53
53
  "@atlaskit/platform-feature-flags": "^1.1.0",
54
54
  "@atlaskit/primitives": "^18.0.0",
55
- "@atlaskit/tmp-editor-statsig": "^32.0.0",
55
+ "@atlaskit/tmp-editor-statsig": "^32.6.0",
56
56
  "@atlaskit/tokens": "^11.0.0",
57
57
  "@babel/runtime": "^7.0.0",
58
58
  "lodash": "^4.17.21",
@@ -60,7 +60,7 @@
60
60
  "uuid": "^3.1.0"
61
61
  },
62
62
  "peerDependencies": {
63
- "@atlaskit/editor-common": "^111.20.0",
63
+ "@atlaskit/editor-common": "^111.23.0",
64
64
  "react": "^18.2.0"
65
65
  },
66
66
  "devDependencies": {