@atlaskit/editor-plugin-block-controls 1.10.4 → 1.10.6

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.10.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#127749](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127749)
8
+ [`2709d717d9040`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2709d717d9040) -
9
+ [ux] Dismiss dnd tooltip when cursor exits handle
10
+
11
+ ## 1.10.5
12
+
13
+ ### Patch Changes
14
+
15
+ - [#127275](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127275)
16
+ [`45778c5f2adf8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/45778c5f2adf8) -
17
+ ED-24384 Clean up remove wrap feature flag
18
+ - [#127431](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127431)
19
+ [`8e4cdcd49d713`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8e4cdcd49d713) -
20
+ ED-24475 Clean up feature flags in getSelection.ts
21
+
3
22
  ## 1.10.4
4
23
 
5
24
  ### Patch Changes
@@ -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.nodeDecorations = exports.mouseMoveWrapperDecorations = exports.emptyParagraphNodeDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = void 0;
7
+ exports.nodeDecorations = exports.emptyParagraphNodeDecorations = exports.dropTargetDecorations = exports.dragHandleDecoration = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("react");
10
10
  var _bindEventListener = require("bind-event-listener");
@@ -14,7 +14,6 @@ var _view = require("@atlaskit/editor-prosemirror/view");
14
14
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
15
  var _dragHandle = require("../ui/drag-handle");
16
16
  var _dropTarget = require("../ui/drop-target");
17
- var _mouseMoveWrapper = require("../ui/mouse-move-wrapper");
18
17
  var _validation = require("../utils/validation");
19
18
  var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
20
19
  var NESTED_DEPTH = (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? 100 : 0;
@@ -138,14 +137,8 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
138
137
  } else {
139
138
  anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
140
139
  }
141
- var style;
142
- if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
143
- style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;");
144
- } else {
145
- style = "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '');
146
- }
147
140
  decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node2 = {
148
- style: style
141
+ style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;")
149
142
  }, (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), (0, _defineProperty2.default)(_Decoration$node2, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node2), {
150
143
  type: 'node-decoration'
151
144
  }));
@@ -153,45 +146,6 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
153
146
  });
154
147
  return decs;
155
148
  };
156
- /**
157
- * Setting up decorations around each node to track mousemove events into each node
158
- * When a mouseenter event is triggered on the node, we will set the activeNode to the node
159
- * And show the drag handle
160
- */
161
- var mouseMoveWrapperDecorations = exports.mouseMoveWrapperDecorations = function mouseMoveWrapperDecorations(newState, api) {
162
- var decs = [];
163
- unmountDecorations('data-blocks-decoration-container');
164
- newState.doc.descendants(function (node, pos, _parent, index) {
165
- // Do not render a mouse move wrapper for nodes that have wrapping - this causes wrapping to break
166
- var hasWrapping = node.attrs.layout === 'wrap-left' || node.attrs.layout === 'wrap-right';
167
- if (hasWrapping) {
168
- return false;
169
- }
170
- var anchorName = "--node-anchor-".concat(node.type.name, "-").concat(index);
171
- decs.push(_view.Decoration.widget(pos, function (view, getPos) {
172
- var element = document.createElement('div');
173
- element.setAttribute('data-blocks-decoration-container', 'true');
174
- element.setAttribute('style', 'clear: unset;');
175
- _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_mouseMoveWrapper.MouseMoveWrapper, {
176
- view: view,
177
- api: api,
178
- anchorName: anchorName,
179
- nodeType: node.type.name,
180
- getPos: getPos
181
- }), element);
182
- return element;
183
- }, {
184
- type: 'mouse-move-wrapper',
185
- side: -1,
186
- ignoreSelection: true,
187
- stopEvent: function stopEvent(e) {
188
- return true;
189
- }
190
- }));
191
- return false;
192
- });
193
- return decs;
194
- };
195
149
  var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(api, getIntl, pos, anchorName, nodeType, handleOptions) {
196
150
  var unbind;
197
151
  var elementType = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24150') ? 'span' : 'div';
@@ -212,11 +166,10 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
212
166
  if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896')) {
213
167
  unmountDecorations('data-blocks-drag-handle-container');
214
168
  }
215
- if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
216
- // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
217
- // due to margins applied to other nodes eg. Headings
218
- element.style.clear = 'unset';
219
- }
169
+
170
+ // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
171
+ // due to margins applied to other nodes eg. Headings
172
+ element.style.clear = 'unset';
220
173
  _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
221
174
  value: getIntl()
222
175
  }, /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
@@ -132,23 +132,20 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
132
132
  decorations = decorations.remove(oldHandle);
133
133
  }
134
134
  var isDecsMissing = false;
135
- var isHandleMissing = false;
136
135
  var isDropTargetsMissing = false;
137
- if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
138
- // Ensure decorations stay in sync when nodes are added or removed from the doc
139
- isHandleMissing = !(meta !== null && meta !== void 0 && meta.activeNode) && !decorations.find().some(function (_ref6) {
140
- var spec = _ref6.spec;
141
- return spec.id === 'drag-handle';
142
- });
143
- var decsLength = decorations.find().filter(function (_ref7) {
144
- var spec = _ref7.spec;
145
- return spec.id !== 'drag-handle';
146
- }).length;
136
+ // Ensure decorations stay in sync when nodes are added or removed from the doc
137
+ var isHandleMissing = !(meta !== null && meta !== void 0 && meta.activeNode) && !decorations.find().some(function (_ref6) {
138
+ var spec = _ref6.spec;
139
+ return spec.id === 'drag-handle';
140
+ });
141
+ var decsLength = decorations.find().filter(function (_ref7) {
142
+ var spec = _ref7.spec;
143
+ return spec.id !== 'drag-handle';
144
+ }).length;
147
145
 
148
- //TODO: Fix this logic for nested scenarios
149
- if (!(0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
150
- isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
151
- }
146
+ //TODO: Fix this logic for nested scenarios
147
+ if (!(0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested')) {
148
+ isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
152
149
  }
153
150
  if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24372')) {
154
151
  var dropTargetLen = decorations.find().filter(function (_ref8) {
@@ -188,12 +185,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
188
185
  decorations = _view.DecorationSet.create(newState.doc, []);
189
186
  }
190
187
  var nodeDecs = (0, _decorations.nodeDecorations)(newState);
191
- if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
192
- decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(nodeDecs));
193
- } else {
194
- var mouseWrapperDecs = (0, _decorations.mouseMoveWrapperDecorations)(newState, api);
195
- decorations = decorations.add(newState.doc, [].concat((0, _toConsumableArray2.default)(nodeDecs), (0, _toConsumableArray2.default)(mouseWrapperDecs)));
196
- }
188
+ decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(nodeDecs));
197
189
 
198
190
  // Note: Quite often the handle is not in the right position after a node is moved
199
191
  // it is safer for now to not show it when a node is moved
@@ -424,9 +416,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
424
416
  }
425
417
  },
426
418
  mouseover: function mouseover(view, event) {
427
- if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
428
- (0, _handleMouseOver.handleMouseOver)(view, event, api);
429
- }
419
+ (0, _handleMouseOver.handleMouseOver)(view, event, api);
430
420
  return false;
431
421
  },
432
422
  keydown: function keydown(view, event) {
@@ -459,74 +449,42 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
459
449
  view: function view(editorView) {
460
450
  var dom = editorView.dom;
461
451
  var editorContentArea = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
462
- var resizeObserverHeight;
463
- var resizeObserverWidth;
464
- if (!(0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
465
- // Use ResizeObserver to observe height changes
466
- resizeObserverHeight = new ResizeObserver((0, _rafSchd.default)(function (entries) {
467
- var _entries$;
468
- var editorHeight = (_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.contentBoxSize[0]) === null || _entries$ === void 0 ? void 0 : _entries$.blockSize;
469
452
 
470
- // Update the plugin state when the height changes
471
- var pluginState = key.getState(editorView.state);
472
- if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
473
- var isResizerResizing = !!dom.querySelector('.is-resizing');
474
- var transaction = editorView.state.tr;
475
- if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
476
- transaction.setMeta('is-resizer-resizing', isResizerResizing);
477
- }
478
- if (!isResizerResizing && editorHeight) {
453
+ // Use ResizeObserver to observe width changes
454
+ var resizeObserverWidth = new ResizeObserver((0, _rafSchd.default)(function (entries) {
455
+ var editorContentArea = entries[0].target;
456
+ var editorWidthRight = editorContentArea.getBoundingClientRect().right;
457
+ var editorWidthLeft = editorContentArea.getBoundingClientRect().left;
458
+
459
+ // Update the plugin state when the height changes
460
+ var pluginState = key.getState(editorView.state);
461
+ if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
462
+ var isResizerResizing = !!dom.querySelector('.is-resizing');
463
+ var transaction = editorView.state.tr;
464
+ if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
465
+ transaction.setMeta('is-resizer-resizing', isResizerResizing);
466
+ }
467
+ if (!isResizerResizing) {
468
+ if ((0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23394')) {
479
469
  transaction.setMeta(key, {
480
- editorHeight: editorHeight
470
+ editorWidthLeft: editorWidthLeft,
471
+ editorWidthRight: editorWidthRight
481
472
  });
482
473
  }
483
- editorView.dispatch(transaction);
484
- }
485
- }));
486
-
487
- // Start observing the editor DOM element
488
- resizeObserverHeight.observe(dom);
489
- }
490
- if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
491
- // Use ResizeObserver to observe width changes
492
- resizeObserverWidth = new ResizeObserver((0, _rafSchd.default)(function (entries) {
493
- var editorContentArea = entries[0].target;
494
- var editorWidthRight = editorContentArea.getBoundingClientRect().right;
495
- var editorWidthLeft = editorContentArea.getBoundingClientRect().left;
496
-
497
- // Update the plugin state when the height changes
498
- var pluginState = key.getState(editorView.state);
499
- if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
500
- var isResizerResizing = !!dom.querySelector('.is-resizing');
501
- var transaction = editorView.state.tr;
502
- if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.isResizerResizing) !== isResizerResizing) {
503
- transaction.setMeta('is-resizer-resizing', isResizerResizing);
504
- }
505
- if (!isResizerResizing) {
506
- if ((0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23394')) {
507
- transaction.setMeta(key, {
508
- editorWidthLeft: editorWidthLeft,
509
- editorWidthRight: editorWidthRight
510
- });
511
- }
512
- }
513
- editorView.dispatch(transaction);
514
474
  }
515
- }));
516
- if (editorContentArea && (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23394')) {
517
- resizeObserverWidth.observe(editorContentArea);
475
+ editorView.dispatch(transaction);
518
476
  }
477
+ }));
478
+ if (editorContentArea && (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23394')) {
479
+ resizeObserverWidth.observe(editorContentArea);
519
480
  }
520
481
 
521
482
  // Start pragmatic monitors
522
483
  var pragmaticCleanup = destroyFn(api);
523
484
  return {
524
485
  destroy: function destroy() {
525
- if (!(0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
526
- resizeObserverHeight.unobserve(dom);
527
- }
528
- if (editorContentArea && (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
529
- (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23394') && resizeObserverWidth.unobserve(editorContentArea);
486
+ if (editorContentArea && (0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23394')) {
487
+ resizeObserverWidth.unobserve(editorContentArea);
530
488
  }
531
489
  pragmaticCleanup();
532
490
  }
@@ -68,7 +68,7 @@ var selectedStyles = (0, _react2.css)({
68
68
  color: "var(--ds-icon-selected, #0C66E4)"
69
69
  });
70
70
  var DragHandleInternal = function DragHandleInternal(_ref) {
71
- var _api$core2, _api$analytics2, _api$core5, _api$core7;
71
+ var _api$core2, _api$analytics2, _api$core4, _api$core6;
72
72
  var view = _ref.view,
73
73
  api = _ref.api,
74
74
  getPos = _ref.getPos,
@@ -137,32 +137,13 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
137
137
  view.focus();
138
138
  }, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos, start, nodeType]);
139
139
 
140
- // handleMouseDown required along with onClick to ensure the correct selection
141
- // is set immediately when the drag handle is clicked. Otherwise browser native
142
- // drag and drop can take over and cause unpredictable behaviour.
140
+ // TODO - This needs to be investigated further. Drag preview generation is not always working
141
+ // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
142
+ // but ensures the preview is generated correctly.
143
143
  var handleMouseDown = (0, _react.useCallback)(function () {
144
144
  var _api$core3;
145
145
  api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
146
146
  var tr = _ref3.tr;
147
- if (start === undefined) {
148
- return tr;
149
- }
150
- tr = (0, _utils.selectNode)(tr, start, nodeType);
151
- tr.setMeta(_main.key, {
152
- pos: start
153
- });
154
- return tr;
155
- });
156
- view.focus();
157
- }, [start, api, view, nodeType]);
158
-
159
- // TODO - This needs to be investigated further. Drag preview generation is not always working
160
- // as expected with a node selection. This workaround sets the selection to the node on mouseDown,
161
- // but ensures the preview is generated correctly.
162
- var handleMouseDownWrapperRemoved = (0, _react.useCallback)(function () {
163
- var _api$core4;
164
- api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref4) {
165
- var tr = _ref4.tr;
166
147
  var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
167
148
  if (startPos === undefined) {
168
149
  return tr;
@@ -179,16 +160,16 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
179
160
  });
180
161
  return tr;
181
162
  });
182
- }, [api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions, getPos, start]);
163
+ }, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos, start]);
183
164
  var handleKeyDown = (0, _react.useCallback)(function (e) {
184
165
  if ((0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
185
166
  // allow user to use spacebar to select the node
186
167
 
187
168
  if (!e.repeat && e.key === ' ') {
188
- var _api$core6;
169
+ var _api$core5;
189
170
  var startPos = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24304') ? getPos() : start;
190
- api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref5) {
191
- var tr = _ref5.tr;
171
+ api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref4) {
172
+ var tr = _ref4.tr;
192
173
  if (startPos === undefined) {
193
174
  return tr;
194
175
  }
@@ -212,7 +193,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
212
193
  view.focus();
213
194
  }
214
195
  }
215
- }, [getPos, start, api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 ? void 0 : _api$core7.actions, view]);
196
+ }, [getPos, start, api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, view]);
216
197
  (0, _react.useEffect)(function () {
217
198
  var element = buttonRef.current;
218
199
  if (!element) {
@@ -226,11 +207,11 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
226
207
  start: start
227
208
  };
228
209
  },
229
- onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
230
- var nativeSetDragImage = _ref6.nativeSetDragImage;
210
+ onGenerateDragPreview: function onGenerateDragPreview(_ref5) {
211
+ var nativeSetDragImage = _ref5.nativeSetDragImage;
231
212
  (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
232
- render: function render(_ref7) {
233
- var container = _ref7.container;
213
+ render: function render(_ref6) {
214
+ var container = _ref6.container;
234
215
  var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(anchorName, "\"]"));
235
216
  if (!dom) {
236
217
  return;
@@ -241,13 +222,13 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
241
222
  });
242
223
  },
243
224
  onDragStart: function onDragStart() {
244
- var _api$core8;
225
+ var _api$core7;
245
226
  if (start === undefined) {
246
227
  return;
247
228
  }
248
- api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref8) {
229
+ api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref7) {
249
230
  var _api$blockControls, _api$analytics3;
250
- var tr = _ref8.tr;
231
+ var tr = _ref7.tr;
251
232
  api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(start, anchorName, nodeType)({
252
233
  tr: tr
253
234
  });
@@ -292,20 +273,14 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
292
273
  }
293
274
  }
294
275
  if (supportsAnchor) {
295
- return (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
276
+ return {
296
277
  left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
297
278
  top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
298
- } : {
299
- left: hasResizer || isExtension || isBlockCard || isEmbedCard ? (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates) : "calc(anchor(".concat(anchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType), "px)"),
300
- top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? "calc(anchor(".concat(anchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)") : anchorName.includes('table') ? "calc(anchor(".concat(anchorName, " start) + ").concat(_consts.DRAG_HANDLE_HEIGHT, "px)") : "anchor(".concat(anchorName, " start)")
301
279
  };
302
280
  }
303
- return (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? {
281
+ return {
304
282
  left: hasResizer || isExtension || isEmbedCard || isBlockCard && innerContainer ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates),
305
283
  top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
306
- } : {
307
- left: (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, macroInteractionUpdates),
308
- top: (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_ed_23674') ? (0, _dragHandlePositions.getTopPosition)(dom, nodeType) : (0, _dragHandlePositions.getTopPosition)(dom)
309
284
  };
310
285
  }, [anchorName, nodeType, view, blockCardWidth, macroInteractionUpdates]);
311
286
  var _useState5 = (0, _react.useState)({
@@ -381,7 +356,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
381
356
  ,
382
357
  style: (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23896') ? newPositionStyles : positionStyles,
383
358
  onClick: handleOnClick,
384
- onMouseDown: (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? handleMouseDownWrapperRemoved : handleMouseDown,
359
+ onMouseDown: handleMouseDown,
385
360
  onKeyDown: handleKeyDown,
386
361
  "data-testid": "block-ctrl-drag-handle"
387
362
  }, (0, _react2.jsx)(_dragHandler.default, {
@@ -394,6 +369,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
394
369
  content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
395
370
  helpDescriptors: helpDescriptors
396
371
  }),
372
+ ignoreTooltipPointerEvents: true,
397
373
  onShow: function onShow() {
398
374
  var _api$accessibilityUti;
399
375
  api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 || _api$accessibilityUti.actions.ariaNotify(message, {
@@ -19,10 +19,7 @@ var dragPreview = exports.dragPreview = function dragPreview(container, dom, nod
19
19
  container.style.pointerEvents = 'none';
20
20
  var parent = document.createElement('div');
21
21
  // ProseMirror class is required to make sure the cloned dom is styled correctly
22
- parent.classList.add('ProseMirror');
23
- if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
24
- parent.classList.add('block-ctrl-drag-preview');
25
- }
22
+ parent.classList.add('ProseMirror', 'block-ctrl-drag-preview');
26
23
  var embedCard = dom.querySelector('.embedCardView-content-wrap');
27
24
  var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension' || !!embedCard;
28
25
  if ((0, _platformFeatureFlags.fg)('platform_editor_elements_drag_and_drop_ed_23189')) {
@@ -130,6 +130,6 @@ var getTextNodeStyle = function getTextNodeStyle() {
130
130
  };
131
131
  var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
132
132
  return (0, _react.jsx)(_react.Global, {
133
- styles: [globalStyles, (0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2') ? (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone : false, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
133
+ styles: [globalStyles, (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_nested') ? extendedHoverZoneNested : extendedHoverZone, getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix]
134
134
  });
135
135
  };
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.selectNode = exports.getSelection = void 0;
7
7
  var _state = require("@atlaskit/editor-prosemirror/state");
8
8
  var _utils = require("@atlaskit/editor-tables/utils");
9
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
9
  var getSelection = exports.getSelection = function getSelection(tr, start) {
11
10
  var node = tr.doc.nodeAt(start);
12
11
  var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
@@ -22,7 +21,7 @@ var getSelection = exports.getSelection = function getSelection(tr, start) {
22
21
  } else if (
23
22
  // Even though mediaGroup is not selectable,
24
23
  // we need a quick way to make all child media nodes appear as selected without the need for a custom selection
25
- (node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup' && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23842')) {
24
+ (node === null || node === void 0 ? void 0 : node.type.name) === 'mediaGroup') {
26
25
  return new _state.NodeSelection($startPos);
27
26
  } else {
28
27
  // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
@@ -31,28 +30,16 @@ var getSelection = exports.getSelection = function getSelection(tr, start) {
31
30
  var foundInlineNode = false;
32
31
  var inlineNodeEndPos = 0;
33
32
  tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n, pos) {
34
- if ((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23905')) {
35
- if (n.isInline) {
36
- inlineNodeEndPos = pos + n.nodeSize;
37
- }
38
- if (n.isInline && !foundInlineNode) {
39
- inlineNodePos = pos;
40
- foundInlineNode = true;
41
- }
42
- } else {
43
- if (foundInlineNode) {
44
- return false;
45
- }
46
- if (n.isInline) {
47
- inlineNodePos = pos;
48
- foundInlineNode = true;
49
- return false;
50
- }
33
+ if (n.isInline) {
34
+ inlineNodeEndPos = pos + n.nodeSize;
35
+ }
36
+ if (n.isInline && !foundInlineNode) {
37
+ inlineNodePos = pos;
38
+ foundInlineNode = true;
51
39
  }
52
40
  return true;
53
41
  });
54
- var inlineNodeDepth = inlineNodePos - start;
55
- return new _state.TextSelection(tr.doc.resolve((0, _platformFeatureFlags.fg)('platform.editor.elements.drag-and-drop-ed-23905') ? inlineNodeEndPos : start + nodeSize - inlineNodeDepth), tr.doc.resolve(inlineNodePos));
42
+ return new _state.TextSelection(tr.doc.resolve(inlineNodeEndPos), tr.doc.resolve(inlineNodePos));
56
43
  }
57
44
  };
58
45
  var selectNode = exports.selectNode = function selectNode(tr, start, nodeType) {
@@ -6,7 +6,6 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import { DragHandle } from '../ui/drag-handle';
8
8
  import { DropTarget } from '../ui/drop-target';
9
- import { MouseMoveWrapper } from '../ui/mouse-move-wrapper';
10
9
  import { canMoveToIndex } from '../utils/validation';
11
10
  const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn'];
12
11
  const NESTED_DEPTH = fg('platform_editor_elements_dnd_nested') ? 100 : 0;
@@ -130,14 +129,8 @@ export const nodeDecorations = newState => {
130
129
  } else {
131
130
  anchorName = `--node-anchor-${node.type.name}-${index}`;
132
131
  }
133
- let style;
134
- if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
135
- style = `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}; position: relative; z-index: 1;`;
136
- } else {
137
- style = `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}`;
138
- }
139
132
  decs.push(Decoration.node(pos, pos + node.nodeSize, {
140
- style,
133
+ style: `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}; position: relative; z-index: 1;`,
141
134
  ['data-drag-handler-anchor-name']: anchorName,
142
135
  ['data-drag-handler-node-type']: node.type.name,
143
136
  ['data-drag-handler-anchor-depth']: `${depth}`
@@ -148,45 +141,6 @@ export const nodeDecorations = newState => {
148
141
  });
149
142
  return decs;
150
143
  };
151
- /**
152
- * Setting up decorations around each node to track mousemove events into each node
153
- * When a mouseenter event is triggered on the node, we will set the activeNode to the node
154
- * And show the drag handle
155
- */
156
- export const mouseMoveWrapperDecorations = (newState, api) => {
157
- const decs = [];
158
- unmountDecorations('data-blocks-decoration-container');
159
- newState.doc.descendants((node, pos, _parent, index) => {
160
- // Do not render a mouse move wrapper for nodes that have wrapping - this causes wrapping to break
161
- const hasWrapping = node.attrs.layout === 'wrap-left' || node.attrs.layout === 'wrap-right';
162
- if (hasWrapping) {
163
- return false;
164
- }
165
- const anchorName = `--node-anchor-${node.type.name}-${index}`;
166
- decs.push(Decoration.widget(pos, (view, getPos) => {
167
- const element = document.createElement('div');
168
- element.setAttribute('data-blocks-decoration-container', 'true');
169
- element.setAttribute('style', 'clear: unset;');
170
- ReactDOM.render( /*#__PURE__*/createElement(MouseMoveWrapper, {
171
- view,
172
- api,
173
- anchorName,
174
- nodeType: node.type.name,
175
- getPos
176
- }), element);
177
- return element;
178
- }, {
179
- type: 'mouse-move-wrapper',
180
- side: -1,
181
- ignoreSelection: true,
182
- stopEvent: e => {
183
- return true;
184
- }
185
- }));
186
- return false;
187
- });
188
- return decs;
189
- };
190
144
  export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, handleOptions) => {
191
145
  let unbind;
192
146
  const elementType = fg('platform_editor_element_drag_and_drop_ed_24150') ? 'span' : 'div';
@@ -207,11 +161,10 @@ export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, ha
207
161
  if (fg('platform_editor_element_drag_and_drop_ed_23896')) {
208
162
  unmountDecorations('data-blocks-drag-handle-container');
209
163
  }
210
- if (fg('platform.editor.elements.drag-and-drop-remove-wrapper_fyqr2')) {
211
- // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
212
- // due to margins applied to other nodes eg. Headings
213
- element.style.clear = 'unset';
214
- }
164
+
165
+ // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
166
+ // due to margins applied to other nodes eg. Headings
167
+ element.style.clear = 'unset';
215
168
  ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
216
169
  value: getIntl()
217
170
  }, /*#__PURE__*/createElement(DragHandle, {