@atlaskit/editor-plugin-block-controls 3.10.1 → 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 (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/pm-plugins/utils/drag-handle-positions.js +1 -1
  3. package/dist/cjs/ui/drag-handle.js +43 -32
  4. package/dist/es2019/pm-plugins/utils/drag-handle-positions.js +1 -1
  5. package/dist/es2019/ui/drag-handle.js +43 -32
  6. package/dist/esm/pm-plugins/utils/drag-handle-positions.js +1 -1
  7. package/dist/esm/ui/drag-handle.js +43 -32
  8. package/package.json +7 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
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
+
3
11
  ## 3.10.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/pm-plugins/utils/drag-handle-positions.js CHANGED
@@ -77,6 +77,6 @@ var getControlHeightCSSValue = exports.getControlHeightCSSValue = function getCo
77
77
  var shouldMaskNodeControls = exports.shouldMaskNodeControls = function shouldMaskNodeControls(nodeType, isTopLevelNode) {
78
78
  return (
79
79
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
80
- isTopLevelNode && ['table'].includes(nodeType) && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
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
81
  );
82
82
  };
package/dist/cjs/ui/drag-handle.js CHANGED
@@ -47,18 +47,32 @@ var iconWrapperStyles = (0, _primitives.xcss)({
47
47
  justifyContent: 'center',
48
48
  alignItems: 'center'
49
49
  });
50
- var extendedIconWrapperStyles = (0, _react2.css)({
50
+ var buttonWrapperStyles = (0, _react2.css)({
51
51
  display: 'flex',
52
52
  justifyContent: 'center',
53
53
  alignItems: 'center',
54
- background: "var(--ds-surface, #FFFFFF)",
55
- marginBottom: "var(--ds-space-negative-100, -8px)",
56
- paddingBottom: "var(--ds-space-100, 8px)",
57
- marginTop: "var(--ds-space-negative-100, -8px)",
58
- paddingTop: "var(--ds-space-100, 8px)",
59
- marginRight: "var(--ds-space-negative-100, -8px)",
60
- paddingRight: "var(--ds-space-100, 8px)",
61
- borderRadius: '6px'
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
+ }
62
76
  });
63
77
 
64
78
  // update color to match quick insert button for new editor controls
@@ -149,34 +163,35 @@ var dragHandleContainerStyles = (0, _primitives.xcss)({
149
163
  boxSizing: 'border-box'
150
164
  });
151
165
  var tooltipContainerStyles = (0, _react2.css)({
152
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
153
- top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
154
166
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
155
167
  bottom: "-".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
156
168
  position: 'sticky',
157
169
  zIndex: 100 // card = 100
158
170
  });
159
- var tooltipContainerStylesWithNodeControls = (0, _react2.css)({
160
- top: '0',
171
+ var tooltipContainerStylesStickyHeaderWithMask = (0, _react2.css)({
161
172
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
162
- bottom: "-".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
163
- position: 'sticky',
164
- zIndex: 100 // card = 100
165
- });
166
- var tooltipContainerStylesStickyHeader = (0, _react2.css)({
173
+ top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
167
174
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
168
175
  '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
169
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
170
- top: _styles.tableControlsSpacing - _consts.STICKY_CONTROLS_TOP_MARGIN
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'
171
181
  }
172
182
  });
173
-
174
- // We need this to work around adjacent breakout marks wrapping the controls widget decorations
175
- 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
+ },
176
191
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
177
192
  '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
178
193
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
179
- top: _styles.tableControlsSpacing - _consts.STICKY_CONTROLS_TOP_MARGIN
194
+ top: _styles.tableControlsSpacing
180
195
  }
181
196
  });
182
197
  var dragHandleMultiLineSelectionFixFirefox = (0, _react2.css)({
@@ -773,7 +788,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
773
788
  as: "span",
774
789
  testId: "block-ctrl-drag-handle-container"
775
790
  }, (0, _react2.jsx)("span", {
776
- css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : 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]
777
792
  }, (0, _react2.jsx)(_tooltip.default, {
778
793
  content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
779
794
  helpDescriptors: helpDescriptors
@@ -787,9 +802,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
787
802
  });
788
803
  }
789
804
  }, (0, _react2.jsx)("span", {
790
- css:
791
- // eslint-disable-next-line @atlaskit/platform/no-preconditioning
792
- (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && extendedIconWrapperStyles
805
+ css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles]
793
806
  }, renderButton()))));
794
807
  };
795
808
  var stickyWithoutTooltip = function stickyWithoutTooltip() {
@@ -801,11 +814,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
801
814
  as: "span",
802
815
  testId: "block-ctrl-drag-handle-container"
803
816
  }, (0, _react2.jsx)("span", {
804
- css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
817
+ css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
805
818
  }, (0, _react2.jsx)("span", {
806
- css:
807
- // eslint-disable-next-line @atlaskit/platform/no-preconditioning
808
- (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && extendedIconWrapperStyles
819
+ css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles]
809
820
  }, renderButton())));
810
821
  };
811
822
  var buttonWithTooltip = function buttonWithTooltip() {
package/dist/es2019/pm-plugins/utils/drag-handle-positions.js CHANGED
@@ -69,6 +69,6 @@ export const getControlHeightCSSValue = (nodeHeight, isSticky, isTopLevelNode, f
69
69
  export const shouldMaskNodeControls = (nodeType, isTopLevelNode) => {
70
70
  return (
71
71
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
72
- isTopLevelNode && ['table'].includes(nodeType) && fg('platform_editor_controls_sticky_controls') && editorExperiment('platform_editor_controls', 'variant1')
72
+ isTopLevelNode && ['table'].includes(nodeType) && fg('platform_editor_controls_sticky_controls') && fg('platform_editor_controls_sticky_mask') && editorExperiment('platform_editor_controls', 'variant1')
73
73
  );
74
74
  };
package/dist/es2019/ui/drag-handle.js CHANGED
@@ -39,18 +39,32 @@ const iconWrapperStyles = xcss({
39
39
  justifyContent: 'center',
40
40
  alignItems: 'center'
41
41
  });
42
- const extendedIconWrapperStyles = css({
42
+ const buttonWrapperStyles = css({
43
43
  display: 'flex',
44
44
  justifyContent: 'center',
45
45
  alignItems: 'center',
46
- background: "var(--ds-surface, #FFFFFF)",
47
- marginBottom: "var(--ds-space-negative-100, -8px)",
48
- paddingBottom: "var(--ds-space-100, 8px)",
49
- marginTop: "var(--ds-space-negative-100, -8px)",
50
- paddingTop: "var(--ds-space-100, 8px)",
51
- marginRight: "var(--ds-space-negative-100, -8px)",
52
- paddingRight: "var(--ds-space-100, 8px)",
53
- borderRadius: '6px'
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
+ }
54
68
  });
55
69
 
56
70
  // update color to match quick insert button for new editor controls
@@ -141,34 +155,35 @@ const dragHandleContainerStyles = xcss({
141
155
  boxSizing: 'border-box'
142
156
  });
143
157
  const tooltipContainerStyles = css({
144
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
145
- top: `${STICKY_CONTROLS_TOP_MARGIN}px`,
146
158
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
147
159
  bottom: `-${STICKY_CONTROLS_TOP_MARGIN}px`,
148
160
  position: 'sticky',
149
161
  zIndex: 100 // card = 100
150
162
  });
151
- const tooltipContainerStylesWithNodeControls = css({
152
- top: '0',
163
+ const tooltipContainerStylesStickyHeaderWithMask = css({
153
164
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
154
- bottom: `-${STICKY_CONTROLS_TOP_MARGIN}px`,
155
- position: 'sticky',
156
- zIndex: 100 // card = 100
157
- });
158
- const tooltipContainerStylesStickyHeader = css({
165
+ top: `${STICKY_CONTROLS_TOP_MARGIN}px`,
159
166
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
160
167
  '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
161
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
162
- top: tableControlsSpacing - STICKY_CONTROLS_TOP_MARGIN
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'
163
173
  }
164
174
  });
165
-
166
- // We need this to work around adjacent breakout marks wrapping the controls widget decorations
167
- 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
+ },
168
183
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
169
184
  '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
170
185
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
171
- top: tableControlsSpacing - STICKY_CONTROLS_TOP_MARGIN
186
+ top: tableControlsSpacing
172
187
  }
173
188
  });
174
189
  const dragHandleMultiLineSelectionFixFirefox = css({
@@ -757,7 +772,7 @@ export const DragHandle = ({
757
772
  as: "span",
758
773
  testId: "block-ctrl-drag-handle-container"
759
774
  }, jsx("span", {
760
- css: [shouldMaskNodeControls(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : 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]
761
776
  }, jsx(Tooltip, {
762
777
  content: jsx(TooltipContentWithMultipleShortcuts, {
763
778
  helpDescriptors: helpDescriptors
@@ -771,9 +786,7 @@ export const DragHandle = ({
771
786
  });
772
787
  }
773
788
  }, jsx("span", {
774
- css:
775
- // eslint-disable-next-line @atlaskit/platform/no-preconditioning
776
- shouldMaskNodeControls(nodeType, isTopLevelNode) && extendedIconWrapperStyles
789
+ css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
777
790
  }, renderButton()))));
778
791
  const stickyWithoutTooltip = () => jsx(Box
779
792
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -783,11 +796,9 @@ export const DragHandle = ({
783
796
  as: "span",
784
797
  testId: "block-ctrl-drag-handle-container"
785
798
  }, jsx("span", {
786
- css: [shouldMaskNodeControls(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
799
+ css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
787
800
  }, jsx("span", {
788
- css:
789
- // eslint-disable-next-line @atlaskit/platform/no-preconditioning
790
- shouldMaskNodeControls(nodeType, isTopLevelNode) && extendedIconWrapperStyles
801
+ css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
791
802
  }, renderButton())));
792
803
  const buttonWithTooltip = () => jsx(Tooltip, {
793
804
  content: jsx(TooltipContentWithMultipleShortcuts, {
package/dist/esm/pm-plugins/utils/drag-handle-positions.js CHANGED
@@ -71,6 +71,6 @@ export var getControlHeightCSSValue = function getControlHeightCSSValue(nodeHeig
71
71
  export var shouldMaskNodeControls = function shouldMaskNodeControls(nodeType, isTopLevelNode) {
72
72
  return (
73
73
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
74
- isTopLevelNode && ['table'].includes(nodeType) && fg('platform_editor_controls_sticky_controls') && editorExperiment('platform_editor_controls', 'variant1')
74
+ isTopLevelNode && ['table'].includes(nodeType) && fg('platform_editor_controls_sticky_controls') && fg('platform_editor_controls_sticky_mask') && editorExperiment('platform_editor_controls', 'variant1')
75
75
  );
76
76
  };
package/dist/esm/ui/drag-handle.js CHANGED
@@ -44,18 +44,32 @@ var iconWrapperStyles = xcss({
44
44
  justifyContent: 'center',
45
45
  alignItems: 'center'
46
46
  });
47
- var extendedIconWrapperStyles = css({
47
+ var buttonWrapperStyles = css({
48
48
  display: 'flex',
49
49
  justifyContent: 'center',
50
50
  alignItems: 'center',
51
- background: "var(--ds-surface, #FFFFFF)",
52
- marginBottom: "var(--ds-space-negative-100, -8px)",
53
- paddingBottom: "var(--ds-space-100, 8px)",
54
- marginTop: "var(--ds-space-negative-100, -8px)",
55
- paddingTop: "var(--ds-space-100, 8px)",
56
- marginRight: "var(--ds-space-negative-100, -8px)",
57
- paddingRight: "var(--ds-space-100, 8px)",
58
- borderRadius: '6px'
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
+ }
59
73
  });
60
74
 
61
75
  // update color to match quick insert button for new editor controls
@@ -146,34 +160,35 @@ var dragHandleContainerStyles = xcss({
146
160
  boxSizing: 'border-box'
147
161
  });
148
162
  var tooltipContainerStyles = css({
149
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
150
- top: "".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
151
163
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
152
164
  bottom: "-".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
153
165
  position: 'sticky',
154
166
  zIndex: 100 // card = 100
155
167
  });
156
- var tooltipContainerStylesWithNodeControls = css({
157
- top: '0',
168
+ var tooltipContainerStylesStickyHeaderWithMask = css({
158
169
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
159
- bottom: "-".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
160
- position: 'sticky',
161
- zIndex: 100 // card = 100
162
- });
163
- var tooltipContainerStylesStickyHeader = css({
170
+ top: "".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
164
171
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
165
172
  '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
166
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
167
- top: tableControlsSpacing - STICKY_CONTROLS_TOP_MARGIN
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'
168
178
  }
169
179
  });
170
-
171
- // We need this to work around adjacent breakout marks wrapping the controls widget decorations
172
- 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
+ },
173
188
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
174
189
  '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
175
190
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
176
- top: tableControlsSpacing - STICKY_CONTROLS_TOP_MARGIN
191
+ top: tableControlsSpacing
177
192
  }
178
193
  });
179
194
  var dragHandleMultiLineSelectionFixFirefox = css({
@@ -770,7 +785,7 @@ export var DragHandle = function DragHandle(_ref) {
770
785
  as: "span",
771
786
  testId: "block-ctrl-drag-handle-container"
772
787
  }, jsx("span", {
773
- css: [shouldMaskNodeControls(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : 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]
774
789
  }, jsx(Tooltip, {
775
790
  content: jsx(TooltipContentWithMultipleShortcuts, {
776
791
  helpDescriptors: helpDescriptors
@@ -784,9 +799,7 @@ export var DragHandle = function DragHandle(_ref) {
784
799
  });
785
800
  }
786
801
  }, jsx("span", {
787
- css:
788
- // eslint-disable-next-line @atlaskit/platform/no-preconditioning
789
- shouldMaskNodeControls(nodeType, isTopLevelNode) && extendedIconWrapperStyles
802
+ css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
790
803
  }, renderButton()))));
791
804
  };
792
805
  var stickyWithoutTooltip = function stickyWithoutTooltip() {
@@ -798,11 +811,9 @@ export var DragHandle = function DragHandle(_ref) {
798
811
  as: "span",
799
812
  testId: "block-ctrl-drag-handle-container"
800
813
  }, jsx("span", {
801
- css: [shouldMaskNodeControls(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
814
+ css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
802
815
  }, jsx("span", {
803
- css:
804
- // eslint-disable-next-line @atlaskit/platform/no-preconditioning
805
- shouldMaskNodeControls(nodeType, isTopLevelNode) && extendedIconWrapperStyles
816
+ css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
806
817
  }, renderButton())));
807
818
  };
808
819
  var buttonWithTooltip = function buttonWithTooltip() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "3.10.1",
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.9.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
  }