@atlaskit/editor-plugin-block-controls 3.19.11 → 3.19.12

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 (11) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/editor-commands/move-node.js +1 -1
  3. package/dist/cjs/pm-plugins/decorations-anchor.js +1 -2
  4. package/dist/cjs/ui/drag-handle.js +46 -29
  5. package/dist/es2019/editor-commands/move-node.js +1 -1
  6. package/dist/es2019/pm-plugins/decorations-anchor.js +1 -2
  7. package/dist/es2019/ui/drag-handle.js +19 -2
  8. package/dist/esm/editor-commands/move-node.js +1 -1
  9. package/dist/esm/pm-plugins/decorations-anchor.js +1 -2
  10. package/dist/esm/ui/drag-handle.js +19 -2
  11. package/package.json +2 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 3.19.12
4
+
5
+ ### Patch Changes
6
+
7
+ - [#175086](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175086)
8
+ [`8e86022627723`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e86022627723) -
9
+ Fix spacing between drag handle and table numbered column
10
+ - Updated dependencies
11
+
3
12
  ## 3.19.11
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/editor-commands/move-node.js CHANGED
@@ -430,7 +430,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
430
430
  api === null || api === void 0 || api.core.actions.focus();
431
431
  var $mappedTo = tr.doc.resolve(mappedTo);
432
432
  var expandAncestor = (0, _utils2.findParentNodeOfTypeClosestToPos)($to, [expand, nestedExpand]);
433
- if (expandAncestor && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6')) {
433
+ if (expandAncestor) {
434
434
  var wasExpandExpanded = _expand.expandedState.get(expandAncestor.node);
435
435
  var updatedExpandAncestor = (0, _utils2.findParentNodeOfTypeClosestToPos)($mappedTo, [expand, nestedExpand]);
436
436
  if (wasExpandExpanded !== undefined && updatedExpandAncestor) {
package/dist/cjs/pm-plugins/decorations-anchor.js CHANGED
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.shouldDescendIntoNode = exports.nodeDecorations = exports.findNodeDecs = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _view = require("@atlaskit/editor-prosemirror/view");
10
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
10
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
12
11
  var _decorationsCommon = require("./decorations-common");
13
12
  var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
@@ -18,7 +17,7 @@ var shouldDescendIntoNode = exports.shouldDescendIntoNode = function shouldDesce
18
17
  // Optimisation to avoid drawing node decorations for empty table cells
19
18
  if (['tableCell', 'tableHeader'].includes(node.type.name)) {
20
19
  var _node$firstChild;
21
- if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6') ? node.firstChild.childCount === 0 : true)) {
20
+ if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && node.firstChild.childCount === 0) {
22
21
  return false;
23
22
  }
24
23
  }
package/dist/cjs/ui/drag-handle.js CHANGED
@@ -20,6 +20,7 @@ var _styles = require("@atlaskit/editor-common/styles");
20
20
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
21
21
  var _state = require("@atlaskit/editor-prosemirror/state");
22
22
  var _utils = require("@atlaskit/editor-prosemirror/utils");
23
+ var _consts = require("@atlaskit/editor-shared-styles/consts");
23
24
  var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
24
25
  var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
25
26
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -33,7 +34,7 @@ var _analytics2 = require("../pm-plugins/utils/analytics");
33
34
  var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
34
35
  var _getSelection = require("../pm-plugins/utils/getSelection");
35
36
  var _selection = require("../pm-plugins/utils/selection");
36
- var _consts = require("./consts");
37
+ var _consts2 = require("./consts");
37
38
  var _dragPreview = require("./drag-preview");
38
39
  var _anchorName = require("./utils/anchor-name");
39
40
  var _visibilityContainer = require("./visibility-container");
@@ -74,6 +75,22 @@ var buttonWrapperStyles = (0, _react2.css)({
74
75
  boxSizing: 'border-box'
75
76
  }
76
77
  });
78
+ var buttonWrapperStylesPatch = (0, _react2.css)({
79
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
80
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
81
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
82
+ marginRight: -_consts.akEditorTableToolbarSize,
83
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
84
+ paddingRight: _consts.akEditorTableToolbarSize
85
+ },
86
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
87
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
88
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
89
+ marginRight: -_consts.akEditorTableToolbarSize,
90
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
91
+ paddingRight: _consts.akEditorTableToolbarSize
92
+ }
93
+ });
77
94
 
78
95
  // update color to match quick insert button for new editor controls
79
96
  var dragHandleColor = (0, _react2.css)({
@@ -86,18 +103,18 @@ var dragHandleButtonStyles = (0, _react2.css)({
86
103
  justifyContent: 'center',
87
104
  alignItems: 'center',
88
105
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
89
- height: _consts.DRAG_HANDLE_HEIGHT,
106
+ height: _consts2.DRAG_HANDLE_HEIGHT,
90
107
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
91
- width: _consts.DRAG_HANDLE_WIDTH,
108
+ width: _consts2.DRAG_HANDLE_WIDTH,
92
109
  border: 'none',
93
110
  background: 'transparent',
94
111
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
95
- borderRadius: _consts.DRAG_HANDLE_BORDER_RADIUS,
112
+ borderRadius: _consts2.DRAG_HANDLE_BORDER_RADIUS,
96
113
  // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
97
114
  color: "var(--ds-icon, #44546F)",
98
115
  cursor: 'grab',
99
116
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
100
- zIndex: _consts.DRAG_HANDLE_ZINDEX,
117
+ zIndex: _consts2.DRAG_HANDLE_ZINDEX,
101
118
  outline: 'none',
102
119
  '&:hover': {
103
120
  backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
@@ -128,18 +145,18 @@ var dragHandleButtonStylesOld = (0, _react2.css)({
128
145
  justifyContent: 'center',
129
146
  alignItems: 'center',
130
147
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
131
- height: _consts.DRAG_HANDLE_HEIGHT,
148
+ height: _consts2.DRAG_HANDLE_HEIGHT,
132
149
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
133
- width: _consts.DRAG_HANDLE_WIDTH,
150
+ width: _consts2.DRAG_HANDLE_WIDTH,
134
151
  border: 'none',
135
152
  background: 'transparent',
136
153
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
137
- borderRadius: _consts.DRAG_HANDLE_BORDER_RADIUS,
154
+ borderRadius: _consts2.DRAG_HANDLE_BORDER_RADIUS,
138
155
  // when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
139
156
  color: "var(--ds-icon, #44546F)",
140
157
  cursor: 'grab',
141
158
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
142
- zIndex: _consts.DRAG_HANDLE_ZINDEX,
159
+ zIndex: _consts2.DRAG_HANDLE_ZINDEX,
143
160
  outline: 'none',
144
161
  '&:hover': {
145
162
  backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
@@ -164,14 +181,14 @@ var dragHandleContainerStyles = (0, _primitives.xcss)({
164
181
  });
165
182
  var tooltipContainerStyles = (0, _react2.css)({
166
183
  // 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"),
184
+ bottom: "-".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN, "px"),
168
185
  position: 'sticky',
169
186
  display: 'block',
170
187
  zIndex: 100 // card = 100
171
188
  });
172
189
  var tooltipContainerStylesStickyHeaderWithMask = (0, _react2.css)({
173
190
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
174
- top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
191
+ top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN, "px"),
175
192
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
176
193
  '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
177
194
  top: '0'
@@ -183,7 +200,7 @@ var tooltipContainerStylesStickyHeaderWithMask = (0, _react2.css)({
183
200
  });
184
201
  var tooltipContainerStylesStickyHeaderWithoutMask = (0, _react2.css)({
185
202
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
186
- top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
203
+ top: "".concat(_consts2.STICKY_CONTROLS_TOP_MARGIN, "px"),
187
204
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
188
205
  '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
189
206
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
@@ -230,23 +247,23 @@ var handleIconDragStart = function handleIconDragStart(e) {
230
247
  };
231
248
  var getNodeSpacingForPreview = function getNodeSpacingForPreview(node) {
232
249
  if (!node) {
233
- return _consts.spacingBetweenNodesForPreview['default'];
250
+ return _consts2.spacingBetweenNodesForPreview['default'];
234
251
  }
235
252
  var nodeTypeName = node.type.name;
236
253
  if (nodeTypeName === 'heading') {
237
- return _consts.spacingBetweenNodesForPreview["heading".concat(node.attrs.level)] || _consts.spacingBetweenNodesForPreview['default'];
254
+ return _consts2.spacingBetweenNodesForPreview["heading".concat(node.attrs.level)] || _consts2.spacingBetweenNodesForPreview['default'];
238
255
  }
239
- return _consts.spacingBetweenNodesForPreview[nodeTypeName] || _consts.spacingBetweenNodesForPreview['default'];
256
+ return _consts2.spacingBetweenNodesForPreview[nodeTypeName] || _consts2.spacingBetweenNodesForPreview['default'];
240
257
  };
241
258
  var getNodeMargins = function getNodeMargins(node) {
242
259
  if (!node) {
243
- return _consts.nodeMargins['default'];
260
+ return _consts2.nodeMargins['default'];
244
261
  }
245
262
  var nodeTypeName = node.type.name;
246
263
  if (nodeTypeName === 'heading') {
247
- return _consts.nodeMargins["heading".concat(node.attrs.level)] || _consts.nodeMargins['default'];
264
+ return _consts2.nodeMargins["heading".concat(node.attrs.level)] || _consts2.nodeMargins['default'];
248
265
  }
249
- return _consts.nodeMargins[nodeTypeName] || _consts.nodeMargins['default'];
266
+ return _consts2.nodeMargins[nodeTypeName] || _consts2.nodeMargins['default'];
250
267
  };
251
268
  var useDragHandlePluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
252
269
  var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
@@ -339,7 +356,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
339
356
  var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
340
357
  if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
341
358
  tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
342
- if (_consts.BLOCK_MENU_ENABLED && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
359
+ if (_consts2.BLOCK_MENU_ENABLED && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
343
360
  var _api$blockControls;
344
361
  api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
345
362
  anchorName: anchorName
@@ -348,7 +365,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
348
365
  });
349
366
  e.stopPropagation();
350
367
  }
351
- } else if (isTopLevelNode && $anchor.depth <= _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
368
+ } else if (isTopLevelNode && $anchor.depth <= _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
352
369
  var _api$blockControls2;
353
370
  var alignAnchorHeadToSel = (0, _selection.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
354
371
  var selectionWithExpandedHead = (0, _selection.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
@@ -637,11 +654,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
637
654
  if (supportsAnchor) {
638
655
  var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
639
656
  return _objectSpread({
640
- 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)"),
641
- 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)")
657
+ 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(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts2.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
658
+ top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_consts2.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)(nodeType), "px)")
642
659
  }, bottom);
643
660
  }
644
- var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
661
+ var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
645
662
  return _objectSpread({
646
663
  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),
647
664
  top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
@@ -683,11 +700,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
683
700
  if (supportsAnchor) {
684
701
  var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
685
702
  return _objectSpread({
686
- 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)"),
687
- 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)")
703
+ 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(_consts2.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts2.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts2.dragHandleGap)(nodeType, parentNodeType), "px)"),
704
+ top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_consts2.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts2.topPositionAdjustment)(nodeType), "px)")
688
705
  }, bottom);
689
706
  }
690
- var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
707
+ var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts2.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
691
708
  return _objectSpread({
692
709
  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),
693
710
  top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
@@ -768,7 +785,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
768
785
  }
769
786
  var mSelect = api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.multiSelectDnD;
770
787
  var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? view.state.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : view.state.selection.$anchor;
771
- if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > _consts.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
788
+ if (isShiftDown && (!isTopLevelNode || isTopLevelNode && $anchor.depth > _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH)) {
772
789
  setDragHandleDisabled(true);
773
790
  } else {
774
791
  setDragHandleDisabled(false);
@@ -905,7 +922,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
905
922
  });
906
923
  }
907
924
  }, (0, _react2.jsx)("span", {
908
- css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles]
925
+ css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
909
926
  }, renderButton()))));
910
927
  };
911
928
  var stickyWithoutTooltip = function stickyWithoutTooltip() {
@@ -919,7 +936,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
919
936
  }, (0, _react2.jsx)("span", {
920
937
  css: [tooltipContainerStyles, (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
921
938
  }, (0, _react2.jsx)("span", {
922
- css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles]
939
+ css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && buttonWrapperStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
923
940
  }, renderButton())));
924
941
  };
925
942
  var buttonWithTooltip = function buttonWithTooltip() {
package/dist/es2019/editor-commands/move-node.js CHANGED
@@ -434,7 +434,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
434
434
  api === null || api === void 0 ? void 0 : api.core.actions.focus();
435
435
  const $mappedTo = tr.doc.resolve(mappedTo);
436
436
  const expandAncestor = findParentNodeOfTypeClosestToPos($to, [expand, nestedExpand]);
437
- if (expandAncestor && fg('platform_editor_element_dnd_nested_fix_patch_6')) {
437
+ if (expandAncestor) {
438
438
  const wasExpandExpanded = expandedState.get(expandAncestor.node);
439
439
  const updatedExpandAncestor = findParentNodeOfTypeClosestToPos($mappedTo, [expand, nestedExpand]);
440
440
  if (wasExpandExpanded !== undefined && updatedExpandAncestor) {
package/dist/es2019/pm-plugins/decorations-anchor.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
2
- import { fg } from '@atlaskit/platform-feature-flags';
3
2
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
4
3
  import { NESTED_DEPTH, getNodeAnchor, getNodeTypeWithLevel, TYPE_NODE_DEC } from './decorations-common';
5
4
  const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
@@ -10,7 +9,7 @@ export const shouldDescendIntoNode = node => {
10
9
  // Optimisation to avoid drawing node decorations for empty table cells
11
10
  if (['tableCell', 'tableHeader'].includes(node.type.name)) {
12
11
  var _node$firstChild;
13
- if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && (fg('platform_editor_element_dnd_nested_fix_patch_6') ? node.firstChild.childCount === 0 : true)) {
12
+ if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && node.firstChild.childCount === 0) {
14
13
  return false;
15
14
  }
16
15
  }
package/dist/es2019/ui/drag-handle.js CHANGED
@@ -17,6 +17,7 @@ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
17
17
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
18
18
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
19
19
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
20
+ import { akEditorTableToolbarSize } from '@atlaskit/editor-shared-styles/consts';
20
21
  import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
21
22
  import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
22
23
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -66,6 +67,22 @@ const buttonWrapperStyles = css({
66
67
  boxSizing: 'border-box'
67
68
  }
68
69
  });
70
+ const buttonWrapperStylesPatch = css({
71
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
72
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
73
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
74
+ marginRight: -akEditorTableToolbarSize,
75
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
76
+ paddingRight: akEditorTableToolbarSize
77
+ },
78
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
79
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
80
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
81
+ marginRight: -akEditorTableToolbarSize,
82
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
83
+ paddingRight: akEditorTableToolbarSize
84
+ }
85
+ });
69
86
 
70
87
  // update color to match quick insert button for new editor controls
71
88
  const dragHandleColor = css({
@@ -889,7 +906,7 @@ export const DragHandle = ({
889
906
  });
890
907
  }
891
908
  }, jsx("span", {
892
- css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
909
+ css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, fg('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
893
910
  }, renderButton()))));
894
911
  const stickyWithoutTooltip = () => jsx(Box
895
912
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -901,7 +918,7 @@ export const DragHandle = ({
901
918
  }, jsx("span", {
902
919
  css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
903
920
  }, jsx("span", {
904
- css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
921
+ css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, fg('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
905
922
  }, renderButton())));
906
923
  const buttonWithTooltip = () => jsx(Tooltip, {
907
924
  content: jsx(TooltipContentWithMultipleShortcuts, {
package/dist/esm/editor-commands/move-node.js CHANGED
@@ -424,7 +424,7 @@ export var moveNode = function moveNode(api) {
424
424
  api === null || api === void 0 || api.core.actions.focus();
425
425
  var $mappedTo = tr.doc.resolve(mappedTo);
426
426
  var expandAncestor = findParentNodeOfTypeClosestToPos($to, [expand, nestedExpand]);
427
- if (expandAncestor && fg('platform_editor_element_dnd_nested_fix_patch_6')) {
427
+ if (expandAncestor) {
428
428
  var wasExpandExpanded = expandedState.get(expandAncestor.node);
429
429
  var updatedExpandAncestor = findParentNodeOfTypeClosestToPos($mappedTo, [expand, nestedExpand]);
430
430
  if (wasExpandExpanded !== undefined && updatedExpandAncestor) {
package/dist/esm/pm-plugins/decorations-anchor.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
3
- import { fg } from '@atlaskit/platform-feature-flags';
4
3
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
5
4
  import { NESTED_DEPTH, getNodeAnchor, getNodeTypeWithLevel, TYPE_NODE_DEC } from './decorations-common';
6
5
  var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'listItem', 'caption', 'layoutColumn'];
@@ -11,7 +10,7 @@ export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
11
10
  // Optimisation to avoid drawing node decorations for empty table cells
12
11
  if (['tableCell', 'tableHeader'].includes(node.type.name)) {
13
12
  var _node$firstChild;
14
- if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && (fg('platform_editor_element_dnd_nested_fix_patch_6') ? node.firstChild.childCount === 0 : true)) {
13
+ if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph' && node.firstChild.childCount === 0) {
15
14
  return false;
16
15
  }
17
16
  }
package/dist/esm/ui/drag-handle.js CHANGED
@@ -22,6 +22,7 @@ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
22
22
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
23
23
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
24
24
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
25
+ import { akEditorTableToolbarSize } from '@atlaskit/editor-shared-styles/consts';
25
26
  import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
26
27
  import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
27
28
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -71,6 +72,22 @@ var buttonWrapperStyles = css({
71
72
  boxSizing: 'border-box'
72
73
  }
73
74
  });
75
+ var buttonWrapperStylesPatch = css({
76
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
77
+ '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
78
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
79
+ marginRight: -akEditorTableToolbarSize,
80
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
81
+ paddingRight: akEditorTableToolbarSize
82
+ },
83
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
84
+ '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls [data-number-column="true"] tr.sticky) &': {
85
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
86
+ marginRight: -akEditorTableToolbarSize,
87
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
88
+ paddingRight: akEditorTableToolbarSize
89
+ }
90
+ });
74
91
 
75
92
  // update color to match quick insert button for new editor controls
76
93
  var dragHandleColor = css({
@@ -902,7 +919,7 @@ export var DragHandle = function DragHandle(_ref) {
902
919
  });
903
920
  }
904
921
  }, jsx("span", {
905
- css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
922
+ css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, fg('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
906
923
  }, renderButton()))));
907
924
  };
908
925
  var stickyWithoutTooltip = function stickyWithoutTooltip() {
@@ -916,7 +933,7 @@ export var DragHandle = function DragHandle(_ref) {
916
933
  }, jsx("span", {
917
934
  css: [tooltipContainerStyles, shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithMask, !shouldMaskNodeControls(nodeType, isTopLevelNode) && tooltipContainerStylesStickyHeaderWithoutMask]
918
935
  }, jsx("span", {
919
- css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles]
936
+ css: [shouldMaskNodeControls(nodeType, isTopLevelNode) && buttonWrapperStyles, fg('platform_editor_controls_patch_15') && buttonWrapperStylesPatch]
920
937
  }, renderButton())));
921
938
  };
922
939
  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.19.11",
3
+ "version": "3.19.12",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -56,7 +56,7 @@
56
56
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
57
57
  "@atlaskit/primitives": "^14.10.0",
58
58
  "@atlaskit/theme": "^18.0.0",
59
- "@atlaskit/tmp-editor-statsig": "^8.4.0",
59
+ "@atlaskit/tmp-editor-statsig": "^8.5.0",
60
60
  "@atlaskit/tokens": "^5.4.0",
61
61
  "@atlaskit/tooltip": "^20.3.0",
62
62
  "@babel/runtime": "^7.0.0",
@@ -114,9 +114,6 @@
114
114
  "platform_editor_element_drag_and_drop_ed_23873": {
115
115
  "type": "boolean"
116
116
  },
117
- "platform_editor_element_dnd_nested_fix_patch_6": {
118
- "type": "boolean"
119
- },
120
117
  "platform_editor_use_nested_table_pm_nodes": {
121
118
  "type": "boolean"
122
119
  },