@atlaskit/editor-plugin-block-controls 3.10.0 → 3.10.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 (18) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/pm-plugins/utils/drag-handle-positions.js +8 -1
  3. package/dist/cjs/ui/consts.js +2 -1
  4. package/dist/cjs/ui/drag-handle.js +59 -19
  5. package/dist/cjs/ui/quick-insert-button.js +1 -1
  6. package/dist/es2019/pm-plugins/utils/drag-handle-positions.js +7 -0
  7. package/dist/es2019/ui/consts.js +1 -0
  8. package/dist/es2019/ui/drag-handle.js +61 -21
  9. package/dist/es2019/ui/quick-insert-button.js +1 -1
  10. package/dist/esm/pm-plugins/utils/drag-handle-positions.js +7 -0
  11. package/dist/esm/ui/consts.js +1 -0
  12. package/dist/esm/ui/drag-handle.js +61 -21
  13. package/dist/esm/ui/quick-insert-button.js +1 -1
  14. package/dist/types/pm-plugins/utils/drag-handle-positions.d.ts +1 -0
  15. package/dist/types/ui/consts.d.ts +1 -0
  16. package/dist/types-ts4.5/pm-plugins/utils/drag-handle-positions.d.ts +1 -0
  17. package/dist/types-ts4.5/ui/consts.d.ts +1 -0
  18. package/package.json +7 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 3.10.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#142214](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142214)
8
+ [`9643cb1c29edb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9643cb1c29edb) -
9
+ [ux] Improve and seperate sticky control masking into own gate
10
+
11
+ ## 3.10.1
12
+
13
+ ### Patch Changes
14
+
15
+ - [#140783](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140783)
16
+ [`a2d4bdd4841c5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a2d4bdd4841c5) -
17
+ [ux] Extend drag handle background with gradient to obscure adjacent node controls for contrast
18
+ - Updated dependencies
19
+
3
20
  ## 3.10.0
4
21
 
5
22
  ### Minor Changes
package/dist/cjs/pm-plugins/utils/drag-handle-positions.js CHANGED
@@ -3,7 +3,8 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.shouldBeSticky = exports.getTopPosition = exports.getNodeHeight = exports.getLeftPosition = exports.getControlHeightCSSValue = exports.getControlBottomCSSValue = void 0;
6
+ exports.shouldMaskNodeControls = exports.shouldBeSticky = exports.getTopPosition = exports.getNodeHeight = exports.getLeftPosition = exports.getControlHeightCSSValue = exports.getControlBottomCSSValue = void 0;
7
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
7
8
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
8
9
  var _consts = require("../../ui/consts");
9
10
  var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
@@ -72,4 +73,10 @@ var getControlHeightCSSValue = exports.getControlHeightCSSValue = function getCo
72
73
  } : {
73
74
  height: "".concat(nodeHeight || fallbackPxHeight, "px")
74
75
  };
76
+ };
77
+ var shouldMaskNodeControls = exports.shouldMaskNodeControls = function shouldMaskNodeControls(nodeType, isTopLevelNode) {
78
+ return (
79
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
80
+ isTopLevelNode && ['table'].includes(nodeType) && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_mask') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
81
+ );
75
82
  };
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.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = 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 = exports.BLOCK_MENU_WIDTH = exports.BLOCK_MENU_ENABLED = void 0;
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_WIDTH = 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 = exports.BLOCK_MENU_WIDTH = exports.BLOCK_MENU_ENABLED = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
10
10
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -34,6 +34,7 @@ var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJ
34
34
  * so we allow for some leniency to capture them all. e.g. Table is depth 3.
35
35
  */
36
36
  var DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
37
+ var STICKY_CONTROLS_TOP_MARGIN = exports.STICKY_CONTROLS_TOP_MARGIN = 8;
37
38
  var QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_HEIGHT = 24;
38
39
  var QUICK_INSERT_WIDTH = exports.QUICK_INSERT_WIDTH = 24;
39
40
  var QUICK_INSERT_DIMENSIONS = exports.QUICK_INSERT_DIMENSIONS = {
package/dist/cjs/ui/drag-handle.js CHANGED
@@ -47,6 +47,33 @@ var iconWrapperStyles = (0, _primitives.xcss)({
47
47
  justifyContent: 'center',
48
48
  alignItems: 'center'
49
49
  });
50
+ var buttonWrapperStyles = (0, _react2.css)({
51
+ display: 'flex',
52
+ justifyContent: 'center',
53
+ alignItems: 'center',
54
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
55
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
56
+ background: "linear-gradient(to bottom, ".concat("var(--ds-surface, #FFFFFF)", " 90%, transparent)"),
57
+ marginBottom: "var(--ds-space-negative-200, -16px)",
58
+ paddingBottom: "var(--ds-space-200, 16px)",
59
+ marginTop: "var(--ds-space-negative-400, -32px)",
60
+ paddingTop: "calc(".concat("var(--ds-space-400, 32px)", " - 1px)"),
61
+ marginRight: "var(--ds-space-negative-150, -12px)",
62
+ paddingRight: "var(--ds-space-150, 12px)",
63
+ boxSizing: 'border-box'
64
+ },
65
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
66
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
67
+ background: "linear-gradient(to bottom, ".concat("var(--ds-surface, #FFFFFF)", " 90%, transparent)"),
68
+ marginBottom: "var(--ds-space-negative-200, -16px)",
69
+ paddingBottom: "var(--ds-space-200, 16px)",
70
+ marginTop: "var(--ds-space-negative-400, -32px)",
71
+ paddingTop: "calc(".concat("var(--ds-space-400, 32px)", " - 1px)"),
72
+ marginRight: "var(--ds-space-negative-150, -12px)",
73
+ paddingRight: "var(--ds-space-150, 12px)",
74
+ boxSizing: 'border-box'
75
+ }
76
+ });
50
77
 
51
78
  // update color to match quick insert button for new editor controls
52
79
  var dragHandleColor = (0, _react2.css)({
@@ -136,21 +163,31 @@ var dragHandleContainerStyles = (0, _primitives.xcss)({
136
163
  boxSizing: 'border-box'
137
164
  });
138
165
  var tooltipContainerStyles = (0, _react2.css)({
139
- top: '8px',
140
- bottom: '-8px',
166
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
167
+ bottom: "-".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
141
168
  position: 'sticky',
142
- zIndex: 'card'
169
+ zIndex: 100 // card = 100
143
170
  });
144
- var tooltipContainerStylesStickyHeader = (0, _react2.css)({
171
+ var tooltipContainerStylesStickyHeaderWithMask = (0, _react2.css)({
172
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
173
+ top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
145
174
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
146
175
  '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
147
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
148
- top: _styles.tableControlsSpacing
176
+ top: '0'
177
+ },
178
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
179
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
180
+ top: '0'
149
181
  }
150
182
  });
151
-
152
- // We need this to work around adjacent breakout marks wrapping the controls widget decorations
153
- var tooltipContainerStylesStickyHeaderWithMarksFix = (0, _react2.css)({
183
+ var tooltipContainerStylesStickyHeaderWithoutMask = (0, _react2.css)({
184
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
185
+ top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
186
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
187
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
188
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
189
+ top: _styles.tableControlsSpacing
190
+ },
154
191
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
155
192
  '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
156
193
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
@@ -564,13 +601,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
564
601
  var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
565
602
  var isSticky = (0, _dragHandlePositions.shouldBeSticky)(nodeType);
566
603
  if (supportsAnchor) {
567
- var bottom = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
604
+ var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
568
605
  return _objectSpread({
569
606
  left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
570
607
  top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)")
571
608
  }, bottom);
572
609
  }
573
- var height = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
610
+ var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
574
611
  return _objectSpread({
575
612
  left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
576
613
  top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
@@ -712,14 +749,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
712
749
  // eslint-disable-next-line @atlaskit/design-system/no-html-button
713
750
  (0, _react2.jsx)("button", {
714
751
  type: "button",
715
- css: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
752
+ css: [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
716
753
  // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
717
754
  // See https://product-fabric.atlassian.net/browse/ED-26266
718
755
  _browser.browser.gecko && (0, _platformFeatureFlags.fg)('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
719
756
  ref: buttonRef
720
757
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
721
758
  ,
722
- style: !(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') && positionStyles || {},
759
+ style: !((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls')) && positionStyles || {},
723
760
  onClick: handleOnClick,
724
761
  onMouseDown: handleMouseDown,
725
762
  onKeyDown: handleKeyDown
@@ -730,7 +767,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
730
767
  "data-editor-block-ctrl-drag-handle": true,
731
768
  "data-testid": "block-ctrl-drag-handle"
732
769
  }, (0, _react2.jsx)(_primitives.Box, {
733
- as: "span",
734
770
  xcss: iconWrapperStyles
735
771
  // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
736
772
  ,
@@ -752,7 +788,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
752
788
  as: "span",
753
789
  testId: "block-ctrl-drag-handle-container"
754
790
  }, (0, _react2.jsx)("span", {
755
- css: [tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
791
+ css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
756
792
  }, (0, _react2.jsx)(_tooltip.default, {
757
793
  content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
758
794
  helpDescriptors: helpDescriptors
@@ -765,7 +801,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
765
801
  priority: 'important'
766
802
  });
767
803
  }
768
- }, renderButton())));
804
+ }, (0, _react2.jsx)("span", {
805
+ css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles]
806
+ }, renderButton()))));
769
807
  };
770
808
  var stickyWithoutTooltip = function stickyWithoutTooltip() {
771
809
  return (0, _react2.jsx)(_primitives.Box
@@ -776,8 +814,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
776
814
  as: "span",
777
815
  testId: "block-ctrl-drag-handle-container"
778
816
  }, (0, _react2.jsx)("span", {
779
- css: [tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
780
- }, renderButton()));
817
+ css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
818
+ }, (0, _react2.jsx)("span", {
819
+ css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles]
820
+ }, renderButton())));
781
821
  };
782
822
  var buttonWithTooltip = function buttonWithTooltip() {
783
823
  return (0, _react2.jsx)(_tooltip.default, {
@@ -796,7 +836,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
796
836
  var isTooltip = !dragHandleDisabled && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873');
797
837
  var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
798
838
  var render = isTooltip ? buttonWithTooltip() : renderButton();
799
- return (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? stickyRender : render;
839
+ return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? stickyRender : render;
800
840
  };
801
841
  var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref8) {
802
842
  var view = _ref8.view,
package/dist/cjs/ui/quick-insert-button.js CHANGED
@@ -309,7 +309,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
309
309
  testId: "editor-quick-insert-button",
310
310
  type: "button",
311
311
  "aria-label": formatMessage(_messages.blockControlsMessages.insert),
312
- xcss: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
312
+ xcss: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? stickyButtonStyles : buttonStyles, isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
313
313
  onClick: handleQuickInsert,
314
314
  onMouseDown: handleMouseDown,
315
315
  isDisabled: !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && isTypeAheadOpen
package/dist/es2019/pm-plugins/utils/drag-handle-positions.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { fg } from '@atlaskit/platform-feature-flags';
1
2
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
2
3
  import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
3
4
  const STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
@@ -64,4 +65,10 @@ export const getControlHeightCSSValue = (nodeHeight, isSticky, isTopLevelNode, f
64
65
  } : {
65
66
  height: `${nodeHeight || fallbackPxHeight}px`
66
67
  };
68
+ };
69
+ export const shouldMaskNodeControls = (nodeType, isTopLevelNode) => {
70
+ return (
71
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
72
+ isTopLevelNode && ['table'].includes(nodeType) && fg('platform_editor_controls_sticky_controls') && fg('platform_editor_controls_sticky_mask') && editorExperiment('platform_editor_controls', 'variant1')
73
+ );
67
74
  };
package/dist/es2019/ui/consts.js CHANGED
@@ -25,6 +25,7 @@ export const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
25
25
  * so we allow for some leniency to capture them all. e.g. Table is depth 3.
26
26
  */
27
27
  export const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
28
+ export const STICKY_CONTROLS_TOP_MARGIN = 8;
28
29
  export const QUICK_INSERT_HEIGHT = 24;
29
30
  export const QUICK_INSERT_WIDTH = 24;
30
31
  export const QUICK_INSERT_DIMENSIONS = {
package/dist/es2019/ui/drag-handle.js CHANGED
@@ -27,10 +27,10 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
27
27
  import Tooltip from '@atlaskit/tooltip';
28
28
  import { key } from '../pm-plugins/main';
29
29
  import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
30
- import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
30
+ import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
31
31
  import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
32
32
  import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
33
- import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
33
+ import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, topPositionAdjustment } from './consts';
34
34
  import { dragPreview } from './drag-preview';
35
35
  import { refreshAnchorName } from './utils/anchor-name';
36
36
  import { VisibilityContainer } from './visibility-container';
@@ -39,6 +39,33 @@ const iconWrapperStyles = xcss({
39
39
  justifyContent: 'center',
40
40
  alignItems: 'center'
41
41
  });
42
+ const buttonWrapperStyles = css({
43
+ display: 'flex',
44
+ justifyContent: 'center',
45
+ alignItems: 'center',
46
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
47
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
48
+ background: `linear-gradient(to bottom, ${"var(--ds-surface, #FFFFFF)"} 90%, transparent)`,
49
+ marginBottom: "var(--ds-space-negative-200, -16px)",
50
+ paddingBottom: "var(--ds-space-200, 16px)",
51
+ marginTop: "var(--ds-space-negative-400, -32px)",
52
+ paddingTop: `calc(${"var(--ds-space-400, 32px)"} - 1px)`,
53
+ marginRight: "var(--ds-space-negative-150, -12px)",
54
+ paddingRight: "var(--ds-space-150, 12px)",
55
+ boxSizing: 'border-box'
56
+ },
57
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
58
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
59
+ background: `linear-gradient(to bottom, ${"var(--ds-surface, #FFFFFF)"} 90%, transparent)`,
60
+ marginBottom: "var(--ds-space-negative-200, -16px)",
61
+ paddingBottom: "var(--ds-space-200, 16px)",
62
+ marginTop: "var(--ds-space-negative-400, -32px)",
63
+ paddingTop: `calc(${"var(--ds-space-400, 32px)"} - 1px)`,
64
+ marginRight: "var(--ds-space-negative-150, -12px)",
65
+ paddingRight: "var(--ds-space-150, 12px)",
66
+ boxSizing: 'border-box'
67
+ }
68
+ });
42
69
 
43
70
  // update color to match quick insert button for new editor controls
44
71
  const dragHandleColor = css({
@@ -128,21 +155,31 @@ const dragHandleContainerStyles = xcss({
128
155
  boxSizing: 'border-box'
129
156
  });
130
157
  const tooltipContainerStyles = css({
131
- top: '8px',
132
- bottom: '-8px',
158
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
159
+ bottom: `-${STICKY_CONTROLS_TOP_MARGIN}px`,
133
160
  position: 'sticky',
134
- zIndex: 'card'
161
+ zIndex: 100 // card = 100
135
162
  });
136
- const tooltipContainerStylesStickyHeader = css({
163
+ const tooltipContainerStylesStickyHeaderWithMask = css({
164
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
165
+ top: `${STICKY_CONTROLS_TOP_MARGIN}px`,
137
166
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
138
167
  '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
139
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
140
- top: tableControlsSpacing
168
+ top: '0'
169
+ },
170
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
171
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
172
+ top: '0'
141
173
  }
142
174
  });
143
-
144
- // We need this to work around adjacent breakout marks wrapping the controls widget decorations
145
- const tooltipContainerStylesStickyHeaderWithMarksFix = css({
175
+ const tooltipContainerStylesStickyHeaderWithoutMask = css({
176
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
177
+ top: `${STICKY_CONTROLS_TOP_MARGIN}px`,
178
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
179
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
180
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
181
+ top: tableControlsSpacing
182
+ },
146
183
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
147
184
  '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
148
185
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
@@ -553,14 +590,14 @@ export const DragHandle = ({
553
590
  const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
554
591
  const isSticky = shouldBeSticky(nodeType);
555
592
  if (supportsAnchor) {
556
- const bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
593
+ const bottom = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
557
594
  return {
558
595
  left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
559
596
  top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(nodeType)}px)`,
560
597
  ...bottom
561
598
  };
562
599
  }
563
- const height = fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
600
+ const height = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
564
601
  return {
565
602
  left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
566
603
  top: getTopPosition(dom, nodeType),
@@ -699,14 +736,14 @@ export const DragHandle = ({
699
736
  // eslint-disable-next-line @atlaskit/design-system/no-html-button
700
737
  jsx("button", {
701
738
  type: "button",
702
- css: [fg('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
739
+ css: [editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
703
740
  // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
704
741
  // See https://product-fabric.atlassian.net/browse/ED-26266
705
742
  browser.gecko && fg('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
706
743
  ref: buttonRef
707
744
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
708
745
  ,
709
- style: !fg('platform_editor_controls_sticky_controls') && positionStyles || {},
746
+ style: !(editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls')) && positionStyles || {},
710
747
  onClick: handleOnClick,
711
748
  onMouseDown: handleMouseDown,
712
749
  onKeyDown: handleKeyDown
@@ -717,7 +754,6 @@ export const DragHandle = ({
717
754
  "data-editor-block-ctrl-drag-handle": true,
718
755
  "data-testid": "block-ctrl-drag-handle"
719
756
  }, jsx(Box, {
720
- as: "span",
721
757
  xcss: iconWrapperStyles
722
758
  // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
723
759
  ,
@@ -736,7 +772,7 @@ export const DragHandle = ({
736
772
  as: "span",
737
773
  testId: "block-ctrl-drag-handle-container"
738
774
  }, jsx("span", {
739
- css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
775
+ css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
740
776
  }, jsx(Tooltip, {
741
777
  content: jsx(TooltipContentWithMultipleShortcuts, {
742
778
  helpDescriptors: helpDescriptors
@@ -749,7 +785,9 @@ export const DragHandle = ({
749
785
  priority: 'important'
750
786
  });
751
787
  }
752
- }, renderButton())));
788
+ }, jsx("span", {
789
+ css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
790
+ }, renderButton()))));
753
791
  const stickyWithoutTooltip = () => jsx(Box
754
792
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
755
793
  , {
@@ -758,8 +796,10 @@ export const DragHandle = ({
758
796
  as: "span",
759
797
  testId: "block-ctrl-drag-handle-container"
760
798
  }, jsx("span", {
761
- css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
762
- }, renderButton()));
799
+ css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
800
+ }, jsx("span", {
801
+ css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
802
+ }, renderButton())));
763
803
  const buttonWithTooltip = () => jsx(Tooltip, {
764
804
  content: jsx(TooltipContentWithMultipleShortcuts, {
765
805
  helpDescriptors: helpDescriptors
@@ -775,7 +815,7 @@ export const DragHandle = ({
775
815
  const isTooltip = !dragHandleDisabled && fg('platform_editor_element_drag_and_drop_ed_23873');
776
816
  const stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
777
817
  const render = isTooltip ? buttonWithTooltip() : renderButton();
778
- return fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
818
+ return editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
779
819
  };
780
820
  export const DragHandleWithVisibility = ({
781
821
  view,
package/dist/es2019/ui/quick-insert-button.js CHANGED
@@ -299,7 +299,7 @@ export const TypeAheadControl = ({
299
299
  testId: "editor-quick-insert-button",
300
300
  type: "button",
301
301
  "aria-label": formatMessage(messages.insert),
302
- xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
302
+ xcss: [fg('platform_editor_controls_sticky_controls') ? stickyButtonStyles : buttonStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
303
303
  onClick: handleQuickInsert,
304
304
  onMouseDown: handleMouseDown,
305
305
  isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen
package/dist/esm/pm-plugins/utils/drag-handle-positions.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { fg } from '@atlaskit/platform-feature-flags';
1
2
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
2
3
  import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
3
4
  var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
@@ -66,4 +67,10 @@ export var getControlHeightCSSValue = function getControlHeightCSSValue(nodeHeig
66
67
  } : {
67
68
  height: "".concat(nodeHeight || fallbackPxHeight, "px")
68
69
  };
70
+ };
71
+ export var shouldMaskNodeControls = function shouldMaskNodeControls(nodeType, isTopLevelNode) {
72
+ return (
73
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
74
+ isTopLevelNode && ['table'].includes(nodeType) && fg('platform_editor_controls_sticky_controls') && fg('platform_editor_controls_sticky_mask') && editorExperiment('platform_editor_controls', 'variant1')
75
+ );
69
76
  };
package/dist/esm/ui/consts.js CHANGED
@@ -27,6 +27,7 @@ export var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
27
27
  * so we allow for some leniency to capture them all. e.g. Table is depth 3.
28
28
  */
29
29
  export var DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
30
+ export var STICKY_CONTROLS_TOP_MARGIN = 8;
30
31
  export var QUICK_INSERT_HEIGHT = 24;
31
32
  export var QUICK_INSERT_WIDTH = 24;
32
33
  export var QUICK_INSERT_DIMENSIONS = {
package/dist/esm/ui/drag-handle.js CHANGED
@@ -32,10 +32,10 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
32
32
  import Tooltip from '@atlaskit/tooltip';
33
33
  import { key } from '../pm-plugins/main';
34
34
  import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
35
- import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
35
+ import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
36
36
  import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
37
37
  import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
38
- import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
38
+ import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, topPositionAdjustment } from './consts';
39
39
  import { dragPreview } from './drag-preview';
40
40
  import { refreshAnchorName } from './utils/anchor-name';
41
41
  import { VisibilityContainer } from './visibility-container';
@@ -44,6 +44,33 @@ var iconWrapperStyles = xcss({
44
44
  justifyContent: 'center',
45
45
  alignItems: 'center'
46
46
  });
47
+ var buttonWrapperStyles = css({
48
+ display: 'flex',
49
+ justifyContent: 'center',
50
+ alignItems: 'center',
51
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
52
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
53
+ background: "linear-gradient(to bottom, ".concat("var(--ds-surface, #FFFFFF)", " 90%, transparent)"),
54
+ marginBottom: "var(--ds-space-negative-200, -16px)",
55
+ paddingBottom: "var(--ds-space-200, 16px)",
56
+ marginTop: "var(--ds-space-negative-400, -32px)",
57
+ paddingTop: "calc(".concat("var(--ds-space-400, 32px)", " - 1px)"),
58
+ marginRight: "var(--ds-space-negative-150, -12px)",
59
+ paddingRight: "var(--ds-space-150, 12px)",
60
+ boxSizing: 'border-box'
61
+ },
62
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
63
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
64
+ background: "linear-gradient(to bottom, ".concat("var(--ds-surface, #FFFFFF)", " 90%, transparent)"),
65
+ marginBottom: "var(--ds-space-negative-200, -16px)",
66
+ paddingBottom: "var(--ds-space-200, 16px)",
67
+ marginTop: "var(--ds-space-negative-400, -32px)",
68
+ paddingTop: "calc(".concat("var(--ds-space-400, 32px)", " - 1px)"),
69
+ marginRight: "var(--ds-space-negative-150, -12px)",
70
+ paddingRight: "var(--ds-space-150, 12px)",
71
+ boxSizing: 'border-box'
72
+ }
73
+ });
47
74
 
48
75
  // update color to match quick insert button for new editor controls
49
76
  var dragHandleColor = css({
@@ -133,21 +160,31 @@ var dragHandleContainerStyles = xcss({
133
160
  boxSizing: 'border-box'
134
161
  });
135
162
  var tooltipContainerStyles = css({
136
- top: '8px',
137
- bottom: '-8px',
163
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
164
+ bottom: "-".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
138
165
  position: 'sticky',
139
- zIndex: 'card'
166
+ zIndex: 100 // card = 100
140
167
  });
141
- var tooltipContainerStylesStickyHeader = css({
168
+ var tooltipContainerStylesStickyHeaderWithMask = css({
169
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
170
+ top: "".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
142
171
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
143
172
  '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
144
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
145
- top: tableControlsSpacing
173
+ top: '0'
174
+ },
175
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
176
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
177
+ top: '0'
146
178
  }
147
179
  });
148
-
149
- // We need this to work around adjacent breakout marks wrapping the controls widget decorations
150
- var tooltipContainerStylesStickyHeaderWithMarksFix = css({
180
+ var tooltipContainerStylesStickyHeaderWithoutMask = css({
181
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
182
+ top: "".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
183
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
184
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
185
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
186
+ top: tableControlsSpacing
187
+ },
151
188
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
152
189
  '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
153
190
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
@@ -561,13 +598,13 @@ export var DragHandle = function DragHandle(_ref) {
561
598
  var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
562
599
  var isSticky = shouldBeSticky(nodeType);
563
600
  if (supportsAnchor) {
564
- var bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
601
+ var bottom = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
565
602
  return _objectSpread({
566
603
  left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
567
604
  top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)")
568
605
  }, bottom);
569
606
  }
570
- var height = fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
607
+ var height = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
571
608
  return _objectSpread({
572
609
  left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
573
610
  top: getTopPosition(dom, nodeType)
@@ -709,14 +746,14 @@ export var DragHandle = function DragHandle(_ref) {
709
746
  // eslint-disable-next-line @atlaskit/design-system/no-html-button
710
747
  jsx("button", {
711
748
  type: "button",
712
- css: [fg('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
749
+ css: [editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
713
750
  // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
714
751
  // See https://product-fabric.atlassian.net/browse/ED-26266
715
752
  browser.gecko && fg('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
716
753
  ref: buttonRef
717
754
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
718
755
  ,
719
- style: !fg('platform_editor_controls_sticky_controls') && positionStyles || {},
756
+ style: !(editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls')) && positionStyles || {},
720
757
  onClick: handleOnClick,
721
758
  onMouseDown: handleMouseDown,
722
759
  onKeyDown: handleKeyDown
@@ -727,7 +764,6 @@ export var DragHandle = function DragHandle(_ref) {
727
764
  "data-editor-block-ctrl-drag-handle": true,
728
765
  "data-testid": "block-ctrl-drag-handle"
729
766
  }, jsx(Box, {
730
- as: "span",
731
767
  xcss: iconWrapperStyles
732
768
  // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
733
769
  ,
@@ -749,7 +785,7 @@ export var DragHandle = function DragHandle(_ref) {
749
785
  as: "span",
750
786
  testId: "block-ctrl-drag-handle-container"
751
787
  }, jsx("span", {
752
- css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
788
+ css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
753
789
  }, jsx(Tooltip, {
754
790
  content: jsx(TooltipContentWithMultipleShortcuts, {
755
791
  helpDescriptors: helpDescriptors
@@ -762,7 +798,9 @@ export var DragHandle = function DragHandle(_ref) {
762
798
  priority: 'important'
763
799
  });
764
800
  }
765
- }, renderButton())));
801
+ }, jsx("span", {
802
+ css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
803
+ }, renderButton()))));
766
804
  };
767
805
  var stickyWithoutTooltip = function stickyWithoutTooltip() {
768
806
  return jsx(Box
@@ -773,8 +811,10 @@ export var DragHandle = function DragHandle(_ref) {
773
811
  as: "span",
774
812
  testId: "block-ctrl-drag-handle-container"
775
813
  }, jsx("span", {
776
- css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
777
- }, renderButton()));
814
+ css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
815
+ }, jsx("span", {
816
+ css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
817
+ }, renderButton())));
778
818
  };
779
819
  var buttonWithTooltip = function buttonWithTooltip() {
780
820
  return jsx(Tooltip, {
@@ -793,7 +833,7 @@ export var DragHandle = function DragHandle(_ref) {
793
833
  var isTooltip = !dragHandleDisabled && fg('platform_editor_element_drag_and_drop_ed_23873');
794
834
  var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
795
835
  var render = isTooltip ? buttonWithTooltip() : renderButton();
796
- return fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
836
+ return editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
797
837
  };
798
838
  export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref8) {
799
839
  var view = _ref8.view,
package/dist/esm/ui/quick-insert-button.js CHANGED
@@ -303,7 +303,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
303
303
  testId: "editor-quick-insert-button",
304
304
  type: "button",
305
305
  "aria-label": formatMessage(messages.insert),
306
- xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
306
+ xcss: [fg('platform_editor_controls_sticky_controls') ? stickyButtonStyles : buttonStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
307
307
  onClick: handleQuickInsert,
308
308
  onMouseDown: handleMouseDown,
309
309
  isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen
package/dist/types/pm-plugins/utils/drag-handle-positions.d.ts CHANGED
@@ -9,3 +9,4 @@ export declare const getControlBottomCSSValue: (anchor: string, isSticky: boolea
9
9
  export declare const getControlHeightCSSValue: (nodeHeight: number, isSticky: boolean, isTopLevelNode: boolean, fallbackPxHeight: string, isLayoutColumn?: boolean) => {
10
10
  height: string;
11
11
  };
12
+ export declare const shouldMaskNodeControls: (nodeType: string, isTopLevelNode: boolean) => boolean;
package/dist/types/ui/consts.d.ts CHANGED
@@ -22,6 +22,7 @@ export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
22
22
  * so we allow for some leniency to capture them all. e.g. Table is depth 3.
23
23
  */
24
24
  export declare const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
25
+ export declare const STICKY_CONTROLS_TOP_MARGIN = 8;
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/pm-plugins/utils/drag-handle-positions.d.ts CHANGED
@@ -9,3 +9,4 @@ export declare const getControlBottomCSSValue: (anchor: string, isSticky: boolea
9
9
  export declare const getControlHeightCSSValue: (nodeHeight: number, isSticky: boolean, isTopLevelNode: boolean, fallbackPxHeight: string, isLayoutColumn?: boolean) => {
10
10
  height: string;
11
11
  };
12
+ export declare const shouldMaskNodeControls: (nodeType: string, isTopLevelNode: boolean) => boolean;
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
  * so we allow for some leniency to capture them all. e.g. Table is depth 3.
23
23
  */
24
24
  export declare const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
25
+ export declare const STICKY_CONTROLS_TOP_MARGIN = 8;
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": "3.10.0",
3
+ "version": "3.10.2",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@atlaskit/adf-schema": "^47.6.0",
36
- "@atlaskit/editor-common": "^103.7.0",
36
+ "@atlaskit/editor-common": "^103.8.0",
37
37
  "@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
39
39
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -53,8 +53,8 @@
53
53
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.1.0",
54
54
  "@atlaskit/primitives": "^14.4.0",
55
55
  "@atlaskit/theme": "^18.0.0",
56
- "@atlaskit/tmp-editor-statsig": "^4.8.0",
57
- "@atlaskit/tokens": "^4.7.0",
56
+ "@atlaskit/tmp-editor-statsig": "^4.10.0",
57
+ "@atlaskit/tokens": "^4.8.0",
58
58
  "@atlaskit/tooltip": "^20.0.0",
59
59
  "@babel/runtime": "^7.0.0",
60
60
  "@emotion/react": "^11.7.1",
@@ -175,6 +175,9 @@
175
175
  },
176
176
  "platform_editor_controls_patch_5": {
177
177
  "type": "boolean"
178
+ },
179
+ "platform_editor_controls_sticky_mask": {
180
+ "type": "boolean"
178
181
  }
179
182
  }
180
183
  }