@atlaskit/editor-plugin-block-controls 7.17.0 → 7.17.2

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 (16) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/pm-plugins/utils/getSelection.js +2 -3
  3. package/dist/cjs/ui/consts.js +2 -1
  4. package/dist/cjs/ui/drag-handle.js +43 -1
  5. package/dist/cjs/ui/quick-insert-button.js +47 -1
  6. package/dist/es2019/pm-plugins/utils/getSelection.js +2 -3
  7. package/dist/es2019/ui/consts.js +1 -0
  8. package/dist/es2019/ui/drag-handle.js +44 -2
  9. package/dist/es2019/ui/quick-insert-button.js +48 -2
  10. package/dist/esm/pm-plugins/utils/getSelection.js +2 -3
  11. package/dist/esm/ui/consts.js +1 -0
  12. package/dist/esm/ui/drag-handle.js +44 -2
  13. package/dist/esm/ui/quick-insert-button.js +48 -2
  14. package/dist/types/ui/consts.d.ts +1 -0
  15. package/dist/types-ts4.5/ui/consts.d.ts +1 -0
  16. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 7.17.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`77a65164e7b77`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/77a65164e7b77) -
8
+ [ux] EDITOR-3439 update drag handle top pos for new sticky header solution
9
+ - Updated dependencies
10
+
11
+ ## 7.17.1
12
+
13
+ ### Patch Changes
14
+
15
+ - [`d5e222a3c15bc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d5e222a3c15bc) -
16
+ [ux] EDITOR-3945 Blockquote NodeSelection support
17
+ - Updated dependencies
18
+
3
19
  ## 7.17.0
4
20
 
5
21
  ### Minor Changes
package/dist/cjs/pm-plugins/utils/getSelection.js CHANGED
@@ -92,17 +92,16 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
92
92
  return false;
93
93
  }
94
94
  var isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
95
- var isBlockQuoteEmpty = nodeName === 'blockquote' && (node === null || node === void 0 ? void 0 : node.textContent) === '';
96
95
  var isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && selectionEmpty && (node === null || node === void 0 ? void 0 : node.textContent) === '';
97
96
 
98
97
  // if block menu and empty line format menu are enabled,
99
98
  // we want to set the selection to avoid the selection goes to the top of the document
100
- if ((isParagraphHeadingEmpty || isBlockQuoteEmpty || isListEmpty) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
99
+ if ((isParagraphHeadingEmpty || isListEmpty) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
101
100
  return _state.TextSelection.create(doc, start + 1, start + 1);
102
101
  }
103
102
  var isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(doc, start, nodeSize);
104
103
  var isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(doc, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(doc, start, nodeSize);
105
- if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
104
+ if (isNodeSelection && (nodeName !== 'blockquote' || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
106
105
  // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
107
106
  ['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
108
107
  return new _state.NodeSelection(doc.resolve(start));
package/dist/cjs/ui/consts.js CHANGED
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
7
+ exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _styles = require("@atlaskit/editor-common/styles");
10
10
  var _utils = require("@atlaskit/editor-common/utils");
@@ -36,6 +36,7 @@ var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJ
36
36
  */
37
37
  var DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
38
38
  var STICKY_CONTROLS_TOP_MARGIN = exports.STICKY_CONTROLS_TOP_MARGIN = 8;
39
+ var STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = 24;
39
40
  var QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_HEIGHT = 24;
40
41
  var QUICK_INSERT_WIDTH = exports.QUICK_INSERT_WIDTH = 24;
41
42
  var QUICK_INSERT_DIMENSIONS = exports.QUICK_INSERT_DIMENSIONS = {
package/dist/cjs/ui/drag-handle.js CHANGED
@@ -229,6 +229,48 @@ var tooltipContainerStylesStickyHeaderWithMask = (0, _react2.css)({
229
229
  top: '0'
230
230
  }
231
231
  });
232
+ var tooltipContainerStylesImprovedStickyHeaderWithMask = (0, _react2.css)({
233
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
234
+ top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN, "px"),
235
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
236
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
237
+ top: '0'
238
+ },
239
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
240
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
241
+ top: '0'
242
+ },
243
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
244
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
245
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
246
+ top: _styles.tableControlsSpacing
247
+ },
248
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
249
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
250
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
251
+ top: _styles.tableControlsSpacing
252
+ },
253
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
254
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
255
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
256
+ top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
257
+ },
258
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
259
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
260
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
261
+ top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
262
+ },
263
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
264
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
265
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
266
+ top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
267
+ },
268
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
269
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-mark-name="fragment"] > [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
270
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
271
+ top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
272
+ }
273
+ });
232
274
  var tooltipContainerStylesStickyHeaderWithoutMask = (0, _react2.css)({
233
275
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
234
276
  top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN, "px"),
@@ -1061,7 +1103,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
1061
1103
  as: "span",
1062
1104
  testId: "block-ctrl-drag-handle-container"
1063
1105
  }, (0, _react2.jsx)("span", {
1064
- css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
1106
+ css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && ((0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_6') ? tooltipContainerStylesImprovedStickyHeaderWithMask : tooltipContainerStylesStickyHeaderWithMask), !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
1065
1107
  }, (0, _react2.jsx)(_tooltip.default, {
1066
1108
  content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
1067
1109
  helpDescriptors: helpDescriptors
package/dist/cjs/ui/quick-insert-button.js CHANGED
@@ -93,6 +93,28 @@ var tooltipContainerStylesStickyHeader = (0, _react2.css)({
93
93
  top: _styles.tableControlsSpacing
94
94
  }
95
95
  });
96
+ var tooltipContainerImprovedStylesStickyHeader = (0, _react2.css)({
97
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
98
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
99
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
100
+ top: _styles.tableControlsSpacing
101
+ },
102
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
103
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
104
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
105
+ top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
106
+ },
107
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
108
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
109
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
110
+ top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
111
+ },
112
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
113
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
114
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
115
+ top: _styles.tableControlsSpacing
116
+ }
117
+ });
96
118
 
97
119
  // We need this to work around adjacent breakout marks wrapping the controls widget decorations
98
120
  var tooltipContainerStylesStickyHeaderWithMarksFix = (0, _react2.css)({
@@ -103,6 +125,30 @@ var tooltipContainerStylesStickyHeaderWithMarksFix = (0, _react2.css)({
103
125
  }
104
126
  });
105
127
 
128
+ // We need this to work around adjacent breakout marks wrapping the controls widget decorations
129
+ var tooltipContainerStylesImprovedStickyHeaderWithMarksFix = (0, _react2.css)({
130
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
131
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
132
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
133
+ top: _styles.tableControlsSpacing
134
+ },
135
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
136
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
137
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
138
+ top: _styles.tableControlsSpacing
139
+ },
140
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
141
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
142
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
143
+ top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
144
+ },
145
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
146
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
147
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
148
+ top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
149
+ }
150
+ });
151
+
106
152
  // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
107
153
 
108
154
  var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref) {
@@ -305,7 +351,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
305
351
  style: positionStyles,
306
352
  xcss: [containerStaticStyles]
307
353
  }, (0, _react2.jsx)("span", {
308
- css: [tooltipContainerStyles, tooltipContainerStylesStickyHeader, tooltipContainerStylesStickyHeaderWithMarksFix]
354
+ css: [tooltipContainerStyles, (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_6') ? tooltipContainerImprovedStylesStickyHeader : tooltipContainerStylesStickyHeader, (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_6') ? tooltipContainerStylesImprovedStickyHeaderWithMarksFix : tooltipContainerStylesStickyHeaderWithMarksFix]
309
355
  }, tooltipPressable()));
310
356
  };
311
357
  var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5) {
package/dist/es2019/pm-plugins/utils/getSelection.js CHANGED
@@ -87,17 +87,16 @@ const newGetSelection = (doc, selectionEmpty, start) => {
87
87
  return false;
88
88
  }
89
89
  const isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
90
- const isBlockQuoteEmpty = nodeName === 'blockquote' && (node === null || node === void 0 ? void 0 : node.textContent) === '';
91
90
  const isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && selectionEmpty && (node === null || node === void 0 ? void 0 : node.textContent) === '';
92
91
 
93
92
  // if block menu and empty line format menu are enabled,
94
93
  // we want to set the selection to avoid the selection goes to the top of the document
95
- if ((isParagraphHeadingEmpty || isBlockQuoteEmpty || isListEmpty) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
94
+ if ((isParagraphHeadingEmpty || isListEmpty) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
96
95
  return TextSelection.create(doc, start + 1, start + 1);
97
96
  }
98
97
  const isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(doc, start, nodeSize);
99
98
  const isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(doc, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(doc, start, nodeSize);
100
- if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
99
+ if (isNodeSelection && (nodeName !== 'blockquote' || expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
101
100
  // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
102
101
  ['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
103
102
  return new NodeSelection(doc.resolve(start));
package/dist/es2019/ui/consts.js CHANGED
@@ -27,6 +27,7 @@ export const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
27
27
  */
28
28
  export const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
29
29
  export const STICKY_CONTROLS_TOP_MARGIN = 8;
30
+ export const STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = 24;
30
31
  export const QUICK_INSERT_HEIGHT = 24;
31
32
  export const QUICK_INSERT_WIDTH = 24;
32
33
  export const QUICK_INSERT_DIMENSIONS = {
package/dist/es2019/ui/drag-handle.js CHANGED
@@ -37,7 +37,7 @@ import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics
37
37
  import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
38
38
  import { collapseToSelectionRange, isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
39
39
  import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
40
- import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, topPositionAdjustment } from './consts';
40
+ import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
41
41
  import { dragPreview } from './drag-preview';
42
42
  import { refreshAnchorName } from './utils/anchor-name';
43
43
  import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -224,6 +224,48 @@ const tooltipContainerStylesStickyHeaderWithMask = css({
224
224
  top: '0'
225
225
  }
226
226
  });
227
+ const tooltipContainerStylesImprovedStickyHeaderWithMask = css({
228
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
229
+ top: `${STICKY_CONTROLS_TOP_MARGIN}px`,
230
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
231
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
232
+ top: '0'
233
+ },
234
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
235
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
236
+ top: '0'
237
+ },
238
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
239
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
240
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
241
+ top: tableControlsSpacing
242
+ },
243
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
244
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
245
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
246
+ top: tableControlsSpacing
247
+ },
248
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
249
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
250
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
251
+ top: `${STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER}px`
252
+ },
253
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
254
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
255
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
256
+ top: `${STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER}px`
257
+ },
258
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
259
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
260
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
261
+ top: `${STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER}px`
262
+ },
263
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
264
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-mark-name="fragment"] > [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
265
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
266
+ top: `${STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER}px`
267
+ }
268
+ });
227
269
  const tooltipContainerStylesStickyHeaderWithoutMask = css({
228
270
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
229
271
  top: `${STICKY_CONTROLS_TOP_MARGIN}px`,
@@ -1043,7 +1085,7 @@ export const DragHandle = ({
1043
1085
  as: "span",
1044
1086
  testId: "block-ctrl-drag-handle-container"
1045
1087
  }, jsx("span", {
1046
- css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
1088
+ css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_6') ? tooltipContainerStylesImprovedStickyHeaderWithMask : tooltipContainerStylesStickyHeaderWithMask), !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
1047
1089
  }, jsx(Tooltip, {
1048
1090
  content: jsx(TooltipContentWithMultipleShortcuts, {
1049
1091
  helpDescriptors: helpDescriptors
package/dist/es2019/ui/quick-insert-button.js CHANGED
@@ -24,7 +24,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
24
24
  import Tooltip from '@atlaskit/tooltip';
25
25
  import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
26
26
  import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
27
- import { QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, topPositionAdjustment } from './consts';
27
+ import { QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
28
28
  import { refreshAnchorName } from './utils/anchor-name';
29
29
  import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
30
30
  import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -84,6 +84,28 @@ const tooltipContainerStylesStickyHeader = css({
84
84
  top: tableControlsSpacing
85
85
  }
86
86
  });
87
+ const tooltipContainerImprovedStylesStickyHeader = css({
88
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
89
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
90
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
91
+ top: tableControlsSpacing
92
+ },
93
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
94
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
95
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
96
+ top: `${STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER}px`
97
+ },
98
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
99
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
100
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
101
+ top: `${STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER}px`
102
+ },
103
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
104
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
105
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
106
+ top: tableControlsSpacing
107
+ }
108
+ });
87
109
 
88
110
  // We need this to work around adjacent breakout marks wrapping the controls widget decorations
89
111
  const tooltipContainerStylesStickyHeaderWithMarksFix = css({
@@ -94,6 +116,30 @@ const tooltipContainerStylesStickyHeaderWithMarksFix = css({
94
116
  }
95
117
  });
96
118
 
119
+ // We need this to work around adjacent breakout marks wrapping the controls widget decorations
120
+ const tooltipContainerStylesImprovedStickyHeaderWithMarksFix = css({
121
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
122
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
123
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
124
+ top: tableControlsSpacing
125
+ },
126
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
127
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
128
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
129
+ top: tableControlsSpacing
130
+ },
131
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
132
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
133
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
134
+ top: `${STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER}px`
135
+ },
136
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
137
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
138
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
139
+ top: `${STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER}px`
140
+ }
141
+ });
142
+
97
143
  // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
98
144
 
99
145
  export const TypeAheadControl = ({
@@ -299,7 +345,7 @@ export const TypeAheadControl = ({
299
345
  style: positionStyles,
300
346
  xcss: [containerStaticStyles]
301
347
  }, jsx("span", {
302
- css: [tooltipContainerStyles, tooltipContainerStylesStickyHeader, tooltipContainerStylesStickyHeaderWithMarksFix]
348
+ css: [tooltipContainerStyles, expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_6') ? tooltipContainerImprovedStylesStickyHeader : tooltipContainerStylesStickyHeader, expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_6') ? tooltipContainerStylesImprovedStickyHeaderWithMarksFix : tooltipContainerStylesStickyHeaderWithMarksFix]
303
349
  }, tooltipPressable()));
304
350
  };
305
351
  export const QuickInsertWithVisibility = ({
package/dist/esm/pm-plugins/utils/getSelection.js CHANGED
@@ -86,17 +86,16 @@ var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
86
86
  return false;
87
87
  }
88
88
  var isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
89
- var isBlockQuoteEmpty = nodeName === 'blockquote' && (node === null || node === void 0 ? void 0 : node.textContent) === '';
90
89
  var isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && selectionEmpty && (node === null || node === void 0 ? void 0 : node.textContent) === '';
91
90
 
92
91
  // if block menu and empty line format menu are enabled,
93
92
  // we want to set the selection to avoid the selection goes to the top of the document
94
- if ((isParagraphHeadingEmpty || isBlockQuoteEmpty || isListEmpty) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
93
+ if ((isParagraphHeadingEmpty || isListEmpty) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
95
94
  return TextSelection.create(doc, start + 1, start + 1);
96
95
  }
97
96
  var isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(doc, start, nodeSize);
98
97
  var isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(doc, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(doc, start, nodeSize);
99
- if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
98
+ if (isNodeSelection && (nodeName !== 'blockquote' || expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
100
99
  // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
101
100
  ['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
102
101
  return new NodeSelection(doc.resolve(start));
package/dist/esm/ui/consts.js CHANGED
@@ -29,6 +29,7 @@ export var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
29
29
  */
30
30
  export var DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
31
31
  export var STICKY_CONTROLS_TOP_MARGIN = 8;
32
+ export var STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = 24;
32
33
  export var QUICK_INSERT_HEIGHT = 24;
33
34
  export var QUICK_INSERT_WIDTH = 24;
34
35
  export var QUICK_INSERT_DIMENSIONS = {
package/dist/esm/ui/drag-handle.js CHANGED
@@ -42,7 +42,7 @@ import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics
42
42
  import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
43
43
  import { collapseToSelectionRange, isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
44
44
  import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
45
- import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, topPositionAdjustment } from './consts';
45
+ import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
46
46
  import { dragPreview } from './drag-preview';
47
47
  import { refreshAnchorName } from './utils/anchor-name';
48
48
  import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -226,6 +226,48 @@ var tooltipContainerStylesStickyHeaderWithMask = css({
226
226
  top: '0'
227
227
  }
228
228
  });
229
+ var tooltipContainerStylesImprovedStickyHeaderWithMask = css({
230
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
231
+ top: "".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
232
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
233
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
234
+ top: '0'
235
+ },
236
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
237
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
238
+ top: '0'
239
+ },
240
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
241
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
242
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
243
+ top: tableControlsSpacing
244
+ },
245
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
246
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
247
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
248
+ top: tableControlsSpacing
249
+ },
250
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
251
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
252
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
253
+ top: "".concat(STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
254
+ },
255
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
256
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
257
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
258
+ top: "".concat(STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
259
+ },
260
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
261
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
262
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
263
+ top: "".concat(STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
264
+ },
265
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
266
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-mark-name="fragment"] > [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
267
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
268
+ top: "".concat(STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
269
+ }
270
+ });
229
271
  var tooltipContainerStylesStickyHeaderWithoutMask = css({
230
272
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
231
273
  top: "".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
@@ -1058,7 +1100,7 @@ export var DragHandle = function DragHandle(_ref2) {
1058
1100
  as: "span",
1059
1101
  testId: "block-ctrl-drag-handle-container"
1060
1102
  }, jsx("span", {
1061
- css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
1103
+ css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_6') ? tooltipContainerStylesImprovedStickyHeaderWithMask : tooltipContainerStylesStickyHeaderWithMask), !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
1062
1104
  }, jsx(Tooltip, {
1063
1105
  content: jsx(TooltipContentWithMultipleShortcuts, {
1064
1106
  helpDescriptors: helpDescriptors
package/dist/esm/ui/quick-insert-button.js CHANGED
@@ -28,7 +28,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
28
28
  import Tooltip from '@atlaskit/tooltip';
29
29
  import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
30
30
  import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
31
- import { QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, topPositionAdjustment } from './consts';
31
+ import { QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
32
32
  import { refreshAnchorName } from './utils/anchor-name';
33
33
  import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
34
34
  import { getAnchorAttrName } from './utils/dom-attr-name';
@@ -88,6 +88,28 @@ var tooltipContainerStylesStickyHeader = css({
88
88
  top: tableControlsSpacing
89
89
  }
90
90
  });
91
+ var tooltipContainerImprovedStylesStickyHeader = css({
92
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
93
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
94
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
95
+ top: tableControlsSpacing
96
+ },
97
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
98
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
99
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
100
+ top: "".concat(STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
101
+ },
102
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
103
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
104
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
105
+ top: "".concat(STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
106
+ },
107
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
108
+ '[data-blocks-quick-insert-container]:has(~ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
109
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
110
+ top: tableControlsSpacing
111
+ }
112
+ });
91
113
 
92
114
  // We need this to work around adjacent breakout marks wrapping the controls widget decorations
93
115
  var tooltipContainerStylesStickyHeaderWithMarksFix = css({
@@ -98,6 +120,30 @@ var tooltipContainerStylesStickyHeaderWithMarksFix = css({
98
120
  }
99
121
  });
100
122
 
123
+ // We need this to work around adjacent breakout marks wrapping the controls widget decorations
124
+ var tooltipContainerStylesImprovedStickyHeaderWithMarksFix = css({
125
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
126
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
127
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
128
+ top: tableControlsSpacing
129
+ },
130
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
131
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
132
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
133
+ top: tableControlsSpacing
134
+ },
135
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
136
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
137
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
138
+ top: "".concat(STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
139
+ },
140
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
141
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-quick-insert-container]):has(~ [data-prosemirror-mark-name="fragment"] >[data-prosemirror-node-name="table"] tr.pm-table-row-native-sticky.pm-table-row-native-sticky-active) &': {
142
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
143
+ top: "".concat(STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, "px")
144
+ }
145
+ });
146
+
101
147
  // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
102
148
 
103
149
  export var TypeAheadControl = function TypeAheadControl(_ref) {
@@ -300,7 +346,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
300
346
  style: positionStyles,
301
347
  xcss: [containerStaticStyles]
302
348
  }, jsx("span", {
303
- css: [tooltipContainerStyles, tooltipContainerStylesStickyHeader, tooltipContainerStylesStickyHeaderWithMarksFix]
349
+ css: [tooltipContainerStyles, expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_6') ? tooltipContainerImprovedStylesStickyHeader : tooltipContainerStylesStickyHeader, expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_6') ? tooltipContainerStylesImprovedStickyHeaderWithMarksFix : tooltipContainerStylesStickyHeaderWithMarksFix]
304
350
  }, tooltipPressable()));
305
351
  };
306
352
  export var QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5) {
package/dist/types/ui/consts.d.ts CHANGED
@@ -22,6 +22,7 @@ export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
22
22
  */
23
23
  export declare const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
24
24
  export declare const STICKY_CONTROLS_TOP_MARGIN = 8;
25
+ export declare const STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = 24;
25
26
  export declare const QUICK_INSERT_HEIGHT = 24;
26
27
  export declare const QUICK_INSERT_WIDTH = 24;
27
28
  export declare const QUICK_INSERT_DIMENSIONS: {
package/dist/types-ts4.5/ui/consts.d.ts CHANGED
@@ -22,6 +22,7 @@ export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
22
22
  */
23
23
  export declare const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
24
24
  export declare const STICKY_CONTROLS_TOP_MARGIN = 8;
25
+ export declare const STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = 24;
25
26
  export declare const QUICK_INSERT_HEIGHT = 24;
26
27
  export declare const QUICK_INSERT_WIDTH = 24;
27
28
  export declare const QUICK_INSERT_DIMENSIONS: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "7.17.0",
3
+ "version": "7.17.2",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -54,7 +54,7 @@
54
54
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
55
55
  "@atlaskit/primitives": "^17.0.0",
56
56
  "@atlaskit/theme": "^21.0.0",
57
- "@atlaskit/tmp-editor-statsig": "^16.0.0",
57
+ "@atlaskit/tmp-editor-statsig": "^16.2.0",
58
58
  "@atlaskit/tokens": "^9.0.0",
59
59
  "@atlaskit/tooltip": "^20.11.0",
60
60
  "@babel/runtime": "^7.0.0",
@@ -66,7 +66,7 @@
66
66
  "uuid": "^3.1.0"
67
67
  },
68
68
  "peerDependencies": {
69
- "@atlaskit/editor-common": "^110.47.0",
69
+ "@atlaskit/editor-common": "^110.48.0",
70
70
  "react": "^18.2.0",
71
71
  "react-dom": "^18.2.0",
72
72
  "react-intl-next": "npm:react-intl@^5.18.1"
@@ -146,6 +146,9 @@
146
146
  "platform_editor_toolbar_aifc_user_intent_fix": {
147
147
  "type": "boolean"
148
148
  },
149
+ "platform_editor_table_sticky_header_patch_6": {
150
+ "type": "boolean"
151
+ },
149
152
  "platform_editor_native_anchor_patch_1": {
150
153
  "type": "boolean"
151
154
  }