@atlaskit/editor-plugin-block-controls 7.18.2 → 7.18.3

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/handle-mouse-over.js +34 -7
  3. package/dist/cjs/ui/drag-handle.js +92 -61
  4. package/dist/es2019/pm-plugins/handle-mouse-over.js +34 -7
  5. package/dist/es2019/ui/drag-handle.js +57 -25
  6. package/dist/esm/pm-plugins/handle-mouse-over.js +34 -7
  7. package/dist/esm/ui/drag-handle.js +92 -61
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 7.18.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`d9c44f54ebae0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d9c44f54ebae0) -
8
+ Editor-4011-Updated handleKeyDownNew to use the preservedSelection logic
9
+ - Updated dependencies
10
+
3
11
  ## 7.18.2
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/pm-plugins/handle-mouse-over.js CHANGED
@@ -14,6 +14,7 @@ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equa
14
14
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
15
15
  var _domAttrName = require("../ui/utils/dom-attr-name");
16
16
  var _decorationsAnchor = require("./decorations-anchor");
17
+ var _pluginKey = require("./selection-preservation/plugin-key");
17
18
  var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(target) {
18
19
  if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
19
20
  var _target$parentElement;
@@ -49,7 +50,8 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
49
50
  isDragging = _ref.isDragging,
50
51
  activeNode = _ref.activeNode,
51
52
  isMenuOpen = _ref.isMenuOpen,
52
- originalAnchorName = _ref.menuTriggerBy;
53
+ originalAnchorName = _ref.menuTriggerBy,
54
+ blockMenuOptions = _ref.blockMenuOptions;
53
55
  var _ref2 = (api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.sharedState.currentState()) || {
54
56
  editorDisabled: false
55
57
  },
@@ -173,17 +175,42 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
173
175
  if (nodeType) {
174
176
  // platform_editor_controls note: enables quick insert
175
177
  if (toolbarFlagsEnabled) {
176
- var _api$core, _api$blockControls2;
177
- api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
178
+ if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
179
+ var _selectionPreservatio;
180
+ var selection = (_selectionPreservatio = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
181
+ var nodeTypes = [];
182
+ selection === null || selection === void 0 || selection.$from.doc.nodesBetween(selection.from, selection.to, function (node, pos) {
183
+ if (pos < selection.from) {
184
+ // ignore parent node
185
+ return true;
186
+ }
187
+ nodeTypes.push(node.type.name);
188
+
189
+ // only care about the top level (relatively in the range) nodes
190
+ return false;
191
+ });
192
+ var isMultipleSelected = nodeTypes.length > 1;
193
+
194
+ // Only execute when selection is not a multi-selection, block menu is open, and menu is opened via keyboard
195
+ // as when it is a multi-selection, the showDragHandleAt command interfere with selection
196
+ // sometimes makes the multi-selection not continous after block menu is opened with keyboard
197
+ if (!(isMultipleSelected && isMenuOpen && blockMenuOptions !== null && blockMenuOptions !== void 0 && blockMenuOptions.openedViaKeyboard)) {
198
+ var _api$core, _api$blockControls2;
199
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
200
+ }
201
+ } else {
202
+ var _api$core2, _api$blockControls3;
203
+ api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
204
+ }
178
205
  } else {
179
- var _api$core2, _api$blockControls3;
180
- api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType));
206
+ var _api$core3, _api$blockControls4;
207
+ api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.showDragHandleAt(targetPos, anchorName, nodeType));
181
208
  }
182
209
  if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
183
210
  var _api$userIntent;
184
211
  if (isMenuOpen && originalAnchorName && (api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'blockMenuOpen') {
185
- var _api$core3, _api$blockControls4;
186
- api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.toggleBlockMenu());
212
+ var _api$core4, _api$blockControls5;
213
+ api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.toggleBlockMenu());
187
214
  }
188
215
  }
189
216
  }
package/dist/cjs/ui/drag-handle.js CHANGED
@@ -376,18 +376,49 @@ var getExpandedSelectionRange = function getExpandedSelectionRange(_ref) {
376
376
  var $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
377
377
  return (0, _selection.expandToBlockRange)($from, $to);
378
378
  };
379
- var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
380
- var _api$core4;
381
- var view = _ref2.view,
382
- api = _ref2.api,
383
- formatMessage = _ref2.formatMessage,
384
- getPos = _ref2.getPos,
385
- anchorName = _ref2.anchorName,
379
+ /**
380
+ * Updates the transaction with preserved selection logic.
381
+ * Sets selection to expanded selection range if it encompasses the clicked drag handle,
382
+ * otherwise selects the clicked drag handle's node only.
383
+ */
384
+ var expandAndUpdateSelection = function expandAndUpdateSelection(_ref2) {
385
+ var tr = _ref2.tr,
386
+ selection = _ref2.selection,
387
+ startPos = _ref2.startPos,
388
+ isShiftPressed = _ref2.isShiftPressed,
386
389
  nodeType = _ref2.nodeType,
387
- handleOptions = _ref2.handleOptions,
388
- _ref2$isTopLevelNode = _ref2.isTopLevelNode,
389
- isTopLevelNode = _ref2$isTopLevelNode === void 0 ? true : _ref2$isTopLevelNode,
390
- anchorRectCache = _ref2.anchorRectCache;
390
+ api = _ref2.api;
391
+ var resolvedStartPos = tr.doc.resolve(startPos);
392
+ var expandedRange = getExpandedSelectionRange({
393
+ doc: tr.doc,
394
+ selection: selection,
395
+ resolvedStartPos: resolvedStartPos,
396
+ isShiftPressed: isShiftPressed
397
+ });
398
+
399
+ // Set selection to expanded selection range if it encompases the clicked drag handle
400
+ if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiNodeRange(expandedRange.range)) {
401
+ var collapsed = (0, _getSelection.collapseToSelectionRange)(expandedRange.$from, expandedRange.$to);
402
+
403
+ // Then create a selection from the start of the first node to the end of the last node
404
+ tr.setSelection(_state.TextSelection.create(tr.doc, Math.min(selection.from, collapsed.$from.pos), Math.max(selection.to, collapsed.$to.pos)));
405
+ } else {
406
+ // Select the clicked drag handle's node only
407
+ (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
408
+ }
409
+ };
410
+ var DragHandle = exports.DragHandle = function DragHandle(_ref3) {
411
+ var _api$core4;
412
+ var view = _ref3.view,
413
+ api = _ref3.api,
414
+ formatMessage = _ref3.formatMessage,
415
+ getPos = _ref3.getPos,
416
+ anchorName = _ref3.anchorName,
417
+ nodeType = _ref3.nodeType,
418
+ handleOptions = _ref3.handleOptions,
419
+ _ref3$isTopLevelNode = _ref3.isTopLevelNode,
420
+ isTopLevelNode = _ref3$isTopLevelNode === void 0 ? true : _ref3$isTopLevelNode,
421
+ anchorRectCache = _ref3.anchorRectCache;
391
422
  var buttonRef = (0, _react.useRef)(null);
392
423
  var _useState = (0, _react.useState)(false),
393
424
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -450,9 +481,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
450
481
  }, [anchorName, nodeType, view.dom]);
451
482
  var handleOnClickNew = (0, _react.useCallback)(function (e) {
452
483
  var _api$core;
453
- api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
484
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref4) {
454
485
  var _selectionPreservatio, _api$analytics, _resolvedStartPos$nod, _api$blockControls, _api$blockControls2;
455
- var tr = _ref3.tr;
486
+ var tr = _ref4.tr;
456
487
  var startPos = getPos();
457
488
  if (startPos === undefined) {
458
489
  return tr;
@@ -469,23 +500,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
469
500
  nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
470
501
  }
471
502
  })(tr);
472
- var expandedRange = getExpandedSelectionRange({
473
- doc: tr.doc,
503
+ expandAndUpdateSelection({
504
+ tr: tr,
474
505
  selection: selection,
475
- resolvedStartPos: resolvedStartPos,
476
- isShiftPressed: e.shiftKey
506
+ startPos: startPos,
507
+ isShiftPressed: e.shiftKey,
508
+ nodeType: nodeType,
509
+ api: api
477
510
  });
478
-
479
- // Set selection to expanded selection range if it encompases the clicked drag handle
480
- if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiNodeRange(expandedRange.range)) {
481
- var collapsed = (0, _getSelection.collapseToSelectionRange)(expandedRange.$from, expandedRange.$to);
482
-
483
- // Then create a selection from the start of the first node to the end of the last node
484
- tr.setSelection(_state.TextSelection.create(tr.doc, Math.min(selection.from, collapsed.$from.pos), Math.max(selection.to, collapsed.$to.pos)));
485
- } else {
486
- // Select the clicked drag handle's node only
487
- tr = (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
488
- }
489
511
  api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.startPreservingSelection()({
490
512
  tr: tr
491
513
  });
@@ -510,9 +532,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
510
532
  if (!isMultiSelect) {
511
533
  setDragHandleSelected(!dragHandleSelected);
512
534
  }
513
- api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
535
+ api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref5) {
514
536
  var _api$blockControls$sh, _api$analytics2;
515
- var tr = _ref4.tr;
537
+ var tr = _ref5.tr;
516
538
  var startPos = getPos();
517
539
  if (startPos === undefined) {
518
540
  return tr;
@@ -552,8 +574,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
552
574
  if (!e.repeat && e.key === ' ') {
553
575
  var _api$core3;
554
576
  var startPos = getPos();
555
- api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
556
- var tr = _ref5.tr;
577
+ api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref6) {
578
+ var tr = _ref6.tr;
557
579
  if (startPos === undefined) {
558
580
  return tr;
559
581
  }
@@ -587,15 +609,23 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
587
609
  e.preventDefault();
588
610
  e.stopPropagation();
589
611
  var startPos = getPos();
590
- api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
591
- var _api$blockControls4, _api$userIntent;
592
- var tr = _ref6.tr;
612
+ api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref7) {
613
+ var _selectionPreservatio2, _api$blockControls4, _api$blockControls5, _api$userIntent;
614
+ var tr = _ref7.tr;
593
615
  if (startPos === undefined) {
594
616
  return tr;
595
617
  }
596
- tr = (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
597
- !isMultiSelect && tr.setMeta(_main.key, {
598
- pos: startPos
618
+ var selection = ((_selectionPreservatio2 = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection) || tr.selection;
619
+ expandAndUpdateSelection({
620
+ tr: tr,
621
+ selection: selection,
622
+ startPos: startPos,
623
+ isShiftPressed: e.shiftKey,
624
+ nodeType: nodeType,
625
+ api: api
626
+ });
627
+ api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.startPreservingSelection()({
628
+ tr: tr
599
629
  });
600
630
  var rootPos = (0, _experiments.editorExperiment)('platform_synced_block', true) ? tr.doc.resolve(startPos).before(1) : undefined;
601
631
  var triggerByNode = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_synced_block', 'isEnabled', true) ? {
@@ -603,7 +633,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
603
633
  pos: startPos,
604
634
  rootPos: rootPos
605
635
  } : undefined;
606
- api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.toggleBlockMenu({
636
+ api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.toggleBlockMenu({
607
637
  anchorName: anchorName,
608
638
  triggerByNode: triggerByNode,
609
639
  openedViaKeyboard: true
@@ -615,6 +645,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
615
645
  });
616
646
  return tr;
617
647
  });
648
+ view.focus();
618
649
  } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
619
650
  return pressed;
620
651
  })) {
@@ -622,7 +653,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
622
653
  // return focus to editor to resume editing from caret position
623
654
  view.focus();
624
655
  }
625
- }, [getPos, api, nodeType, isMultiSelect, anchorName, view]);
656
+ }, [getPos, api, nodeType, anchorName, view]);
626
657
  (0, _react.useEffect)(function () {
627
658
  var element = buttonRef.current;
628
659
  if (!element) {
@@ -636,21 +667,21 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
636
667
  start: start
637
668
  };
638
669
  },
639
- onGenerateDragPreview: function onGenerateDragPreview(_ref7) {
670
+ onGenerateDragPreview: function onGenerateDragPreview(_ref8) {
640
671
  var _api$blockControls$sh2;
641
- var nativeSetDragImage = _ref7.nativeSetDragImage;
672
+ var nativeSetDragImage = _ref8.nativeSetDragImage;
642
673
  if (isMultiSelect) {
643
674
  var _api$core6;
644
- api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref8) {
645
- var tr = _ref8.tr;
675
+ api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref9) {
676
+ var tr = _ref9.tr;
646
677
  var handlePos = getPos();
647
678
  if (typeof handlePos !== 'number') {
648
679
  return tr;
649
680
  }
650
681
  var newHandlePosCheck = (0, _getSelection.isHandleCorrelatedToSelection)(view.state, tr.selection, handlePos);
651
682
  if (!tr.selection.empty && newHandlePosCheck) {
652
- var _api$blockControls5;
653
- api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.setMultiSelectPositions()({
683
+ var _api$blockControls6;
684
+ api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setMultiSelectPositions()({
654
685
  tr: tr
655
686
  });
656
687
  } else {
@@ -720,8 +751,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
720
751
  };
721
752
  }
722
753
  },
723
- render: function render(_ref9) {
724
- var container = _ref9.container;
754
+ render: function render(_ref0) {
755
+ var container = _ref0.container;
725
756
  var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
726
757
  if (!dom) {
727
758
  return;
@@ -757,9 +788,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
757
788
  if (start === undefined) {
758
789
  return;
759
790
  }
760
- api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref0) {
761
- var _api$blockControls$sh3, _api$blockControls6, _api$analytics3;
762
- var tr = _ref0.tr;
791
+ api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref1) {
792
+ var _api$blockControls$sh3, _api$blockControls7, _api$analytics3;
793
+ var tr = _ref1.tr;
763
794
  var nodeTypes, hasSelectedMultipleNodes;
764
795
  var resolvedMovingNode = tr.doc.resolve(start);
765
796
  var maybeNode = resolvedMovingNode.nodeAfter;
@@ -772,7 +803,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
772
803
  nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
773
804
  hasSelectedMultipleNodes = false;
774
805
  }
775
- api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setNodeDragged(getPos, anchorName, nodeType)({
806
+ api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 || _api$blockControls7.commands.setNodeDragged(getPos, anchorName, nodeType)({
776
807
  tr: tr
777
808
  });
778
809
  tr.setMeta('scrollIntoView', false);
@@ -1153,15 +1184,15 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
1153
1184
  var render = isTooltip ? buttonWithTooltip() : renderButton();
1154
1185
  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? stickyRender : render;
1155
1186
  };
1156
- var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref1) {
1157
- var view = _ref1.view,
1158
- api = _ref1.api,
1159
- formatMessage = _ref1.formatMessage,
1160
- getPos = _ref1.getPos,
1161
- anchorName = _ref1.anchorName,
1162
- nodeType = _ref1.nodeType,
1163
- handleOptions = _ref1.handleOptions,
1164
- anchorRectCache = _ref1.anchorRectCache;
1187
+ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref10) {
1188
+ var view = _ref10.view,
1189
+ api = _ref10.api,
1190
+ formatMessage = _ref10.formatMessage,
1191
+ getPos = _ref10.getPos,
1192
+ anchorName = _ref10.anchorName,
1193
+ nodeType = _ref10.nodeType,
1194
+ handleOptions = _ref10.handleOptions,
1195
+ anchorRectCache = _ref10.anchorRectCache;
1165
1196
  return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
1166
1197
  api: api
1167
1198
  }, (0, _react2.jsx)(DragHandle, {
package/dist/es2019/pm-plugins/handle-mouse-over.js CHANGED
@@ -6,6 +6,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
6
6
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
7
7
  import { getAnchorAttrName, getTypeNameAttrName, getTypeNameFromDom, NODE_ANCHOR_ATTR_NAME } from '../ui/utils/dom-attr-name';
8
8
  import { IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT, IGNORE_NODES_NEXT } from './decorations-anchor';
9
+ import { selectionPreservationPluginKey } from './selection-preservation/plugin-key';
9
10
  const isEmptyNestedParagraphOrHeading = target => {
10
11
  if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
11
12
  var _target$parentElement;
@@ -39,7 +40,8 @@ export const handleMouseOver = (view, event, api) => {
39
40
  isDragging,
40
41
  activeNode,
41
42
  isMenuOpen,
42
- menuTriggerBy: originalAnchorName
43
+ menuTriggerBy: originalAnchorName,
44
+ blockMenuOptions
43
45
  } = (api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {};
44
46
  const {
45
47
  editorDisabled
@@ -165,17 +167,42 @@ export const handleMouseOver = (view, event, api) => {
165
167
  if (nodeType) {
166
168
  // platform_editor_controls note: enables quick insert
167
169
  if (toolbarFlagsEnabled) {
168
- var _api$core, _api$blockControls2, _rootPos, _rootAnchorName, _rootNodeType;
169
- api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, (_rootPos = rootPos) !== null && _rootPos !== void 0 ? _rootPos : targetPos, (_rootAnchorName = rootAnchorName) !== null && _rootAnchorName !== void 0 ? _rootAnchorName : anchorName, (_rootNodeType = rootNodeType) !== null && _rootNodeType !== void 0 ? _rootNodeType : nodeType));
170
+ if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
171
+ var _selectionPreservatio;
172
+ const selection = (_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
173
+ const nodeTypes = [];
174
+ selection === null || selection === void 0 ? void 0 : selection.$from.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
175
+ if (pos < selection.from) {
176
+ // ignore parent node
177
+ return true;
178
+ }
179
+ nodeTypes.push(node.type.name);
180
+
181
+ // only care about the top level (relatively in the range) nodes
182
+ return false;
183
+ });
184
+ const isMultipleSelected = nodeTypes.length > 1;
185
+
186
+ // Only execute when selection is not a multi-selection, block menu is open, and menu is opened via keyboard
187
+ // as when it is a multi-selection, the showDragHandleAt command interfere with selection
188
+ // sometimes makes the multi-selection not continous after block menu is opened with keyboard
189
+ if (!(isMultipleSelected && isMenuOpen && blockMenuOptions !== null && blockMenuOptions !== void 0 && blockMenuOptions.openedViaKeyboard)) {
190
+ var _api$core, _api$blockControls2, _rootPos, _rootAnchorName, _rootNodeType;
191
+ api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, (_rootPos = rootPos) !== null && _rootPos !== void 0 ? _rootPos : targetPos, (_rootAnchorName = rootAnchorName) !== null && _rootAnchorName !== void 0 ? _rootAnchorName : anchorName, (_rootNodeType = rootNodeType) !== null && _rootNodeType !== void 0 ? _rootNodeType : nodeType));
192
+ }
193
+ } else {
194
+ var _api$core2, _api$blockControls3, _rootPos2, _rootAnchorName2, _rootNodeType2;
195
+ api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, (_rootPos2 = rootPos) !== null && _rootPos2 !== void 0 ? _rootPos2 : targetPos, (_rootAnchorName2 = rootAnchorName) !== null && _rootAnchorName2 !== void 0 ? _rootAnchorName2 : anchorName, (_rootNodeType2 = rootNodeType) !== null && _rootNodeType2 !== void 0 ? _rootNodeType2 : nodeType));
196
+ }
170
197
  } else {
171
- var _api$core2, _api$blockControls3;
172
- api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType));
198
+ var _api$core3, _api$blockControls4;
199
+ api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.showDragHandleAt(targetPos, anchorName, nodeType));
173
200
  }
174
201
  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
175
202
  var _api$userIntent, _api$userIntent$share;
176
203
  if (isMenuOpen && originalAnchorName && (api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : (_api$userIntent$share = _api$userIntent.sharedState.currentState()) === null || _api$userIntent$share === void 0 ? void 0 : _api$userIntent$share.currentUserIntent) === 'blockMenuOpen') {
177
- var _api$core3, _api$blockControls4;
178
- api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.toggleBlockMenu());
204
+ var _api$core4, _api$blockControls5;
205
+ api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.toggleBlockMenu());
179
206
  }
180
207
  }
181
208
  }
package/dist/es2019/ui/drag-handle.js CHANGED
@@ -372,6 +372,38 @@ const getExpandedSelectionRange = ({
372
372
  const $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
373
373
  return expandToBlockRange($from, $to);
374
374
  };
375
+ /**
376
+ * Updates the transaction with preserved selection logic.
377
+ * Sets selection to expanded selection range if it encompasses the clicked drag handle,
378
+ * otherwise selects the clicked drag handle's node only.
379
+ */
380
+ const expandAndUpdateSelection = ({
381
+ tr,
382
+ selection,
383
+ startPos,
384
+ isShiftPressed,
385
+ nodeType,
386
+ api
387
+ }) => {
388
+ const resolvedStartPos = tr.doc.resolve(startPos);
389
+ const expandedRange = getExpandedSelectionRange({
390
+ doc: tr.doc,
391
+ selection,
392
+ resolvedStartPos,
393
+ isShiftPressed
394
+ });
395
+
396
+ // Set selection to expanded selection range if it encompases the clicked drag handle
397
+ if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiNodeRange(expandedRange.range)) {
398
+ const collapsed = collapseToSelectionRange(expandedRange.$from, expandedRange.$to);
399
+
400
+ // Then create a selection from the start of the first node to the end of the last node
401
+ tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, collapsed.$from.pos), Math.max(selection.to, collapsed.$to.pos)));
402
+ } else {
403
+ // Select the clicked drag handle's node only
404
+ selectNode(tr, startPos, nodeType, api);
405
+ }
406
+ };
375
407
  export const DragHandle = ({
376
408
  view,
377
409
  api,
@@ -447,23 +479,14 @@ export const DragHandle = ({
447
479
  nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
448
480
  }
449
481
  })(tr);
450
- const expandedRange = getExpandedSelectionRange({
451
- doc: tr.doc,
482
+ expandAndUpdateSelection({
483
+ tr,
452
484
  selection,
453
- resolvedStartPos,
454
- isShiftPressed: e.shiftKey
485
+ startPos,
486
+ isShiftPressed: e.shiftKey,
487
+ nodeType,
488
+ api
455
489
  });
456
-
457
- // Set selection to expanded selection range if it encompases the clicked drag handle
458
- if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiNodeRange(expandedRange.range)) {
459
- const collapsed = collapseToSelectionRange(expandedRange.$from, expandedRange.$to);
460
-
461
- // Then create a selection from the start of the first node to the end of the last node
462
- tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, collapsed.$from.pos), Math.max(selection.to, collapsed.$to.pos)));
463
- } else {
464
- // Select the clicked drag handle's node only
465
- tr = selectNode(tr, startPos, nodeType, api);
466
- }
467
490
  api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.startPreservingSelection()({
468
491
  tr
469
492
  });
@@ -568,13 +591,21 @@ export const DragHandle = ({
568
591
  api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
569
592
  tr
570
593
  }) => {
571
- var _api$blockControls4, _api$userIntent;
594
+ var _selectionPreservatio2, _api$blockControls4, _api$blockControls5, _api$userIntent;
572
595
  if (startPos === undefined) {
573
596
  return tr;
574
597
  }
575
- tr = selectNode(tr, startPos, nodeType, api);
576
- !isMultiSelect && tr.setMeta(key, {
577
- pos: startPos
598
+ const selection = ((_selectionPreservatio2 = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection) || tr.selection;
599
+ expandAndUpdateSelection({
600
+ tr,
601
+ selection,
602
+ startPos,
603
+ isShiftPressed: e.shiftKey,
604
+ nodeType,
605
+ api
606
+ });
607
+ api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.startPreservingSelection()({
608
+ tr
578
609
  });
579
610
  const rootPos = editorExperiment('platform_synced_block', true) ? tr.doc.resolve(startPos).before(1) : undefined;
580
611
  const triggerByNode = expValEqualsNoExposure('platform_synced_block', 'isEnabled', true) ? {
@@ -582,7 +613,7 @@ export const DragHandle = ({
582
613
  pos: startPos,
583
614
  rootPos
584
615
  } : undefined;
585
- api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.toggleBlockMenu({
616
+ api === null || api === void 0 ? void 0 : (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.toggleBlockMenu({
586
617
  anchorName,
587
618
  triggerByNode,
588
619
  openedViaKeyboard: true
@@ -594,12 +625,13 @@ export const DragHandle = ({
594
625
  });
595
626
  return tr;
596
627
  });
628
+ view.focus();
597
629
  } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(pressed => pressed)) {
598
630
  // If not trying to press shortcut keys,
599
631
  // return focus to editor to resume editing from caret position
600
632
  view.focus();
601
633
  }
602
- }, [getPos, api, nodeType, isMultiSelect, anchorName, view]);
634
+ }, [getPos, api, nodeType, anchorName, view]);
603
635
  useEffect(() => {
604
636
  const element = buttonRef.current;
605
637
  if (!element) {
@@ -626,8 +658,8 @@ export const DragHandle = ({
626
658
  }
627
659
  const newHandlePosCheck = isHandleCorrelatedToSelection(view.state, tr.selection, handlePos);
628
660
  if (!tr.selection.empty && newHandlePosCheck) {
629
- var _api$blockControls5;
630
- api === null || api === void 0 ? void 0 : (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.setMultiSelectPositions()({
661
+ var _api$blockControls6;
662
+ api === null || api === void 0 ? void 0 : (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 ? void 0 : _api$blockControls6.commands.setMultiSelectPositions()({
631
663
  tr
632
664
  });
633
665
  } else {
@@ -742,7 +774,7 @@ export const DragHandle = ({
742
774
  api === null || api === void 0 ? void 0 : (_api$core7 = api.core) === null || _api$core7 === void 0 ? void 0 : _api$core7.actions.execute(({
743
775
  tr
744
776
  }) => {
745
- var _api$blockControls$sh3, _api$blockControls6, _api$analytics3;
777
+ var _api$blockControls$sh3, _api$blockControls7, _api$analytics3;
746
778
  let nodeTypes, hasSelectedMultipleNodes;
747
779
  const resolvedMovingNode = tr.doc.resolve(start);
748
780
  const maybeNode = resolvedMovingNode.nodeAfter;
@@ -755,7 +787,7 @@ export const DragHandle = ({
755
787
  nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
756
788
  hasSelectedMultipleNodes = false;
757
789
  }
758
- api === null || api === void 0 ? void 0 : (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 ? void 0 : _api$blockControls6.commands.setNodeDragged(getPos, anchorName, nodeType)({
790
+ api === null || api === void 0 ? void 0 : (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 ? void 0 : _api$blockControls7.commands.setNodeDragged(getPos, anchorName, nodeType)({
759
791
  tr
760
792
  });
761
793
  tr.setMeta('scrollIntoView', false);
package/dist/esm/pm-plugins/handle-mouse-over.js CHANGED
@@ -7,6 +7,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
7
7
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
8
8
  import { getAnchorAttrName, getTypeNameAttrName, getTypeNameFromDom, NODE_ANCHOR_ATTR_NAME } from '../ui/utils/dom-attr-name';
9
9
  import { IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT, IGNORE_NODES_NEXT } from './decorations-anchor';
10
+ import { selectionPreservationPluginKey } from './selection-preservation/plugin-key';
10
11
  var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(target) {
11
12
  if (target instanceof HTMLHeadingElement || target instanceof HTMLParagraphElement) {
12
13
  var _target$parentElement;
@@ -42,7 +43,8 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
42
43
  isDragging = _ref.isDragging,
43
44
  activeNode = _ref.activeNode,
44
45
  isMenuOpen = _ref.isMenuOpen,
45
- originalAnchorName = _ref.menuTriggerBy;
46
+ originalAnchorName = _ref.menuTriggerBy,
47
+ blockMenuOptions = _ref.blockMenuOptions;
46
48
  var _ref2 = (api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.sharedState.currentState()) || {
47
49
  editorDisabled: false
48
50
  },
@@ -166,17 +168,42 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
166
168
  if (nodeType) {
167
169
  // platform_editor_controls note: enables quick insert
168
170
  if (toolbarFlagsEnabled) {
169
- var _api$core, _api$blockControls2;
170
- api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
171
+ if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
172
+ var _selectionPreservatio;
173
+ var selection = (_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
174
+ var nodeTypes = [];
175
+ selection === null || selection === void 0 || selection.$from.doc.nodesBetween(selection.from, selection.to, function (node, pos) {
176
+ if (pos < selection.from) {
177
+ // ignore parent node
178
+ return true;
179
+ }
180
+ nodeTypes.push(node.type.name);
181
+
182
+ // only care about the top level (relatively in the range) nodes
183
+ return false;
184
+ });
185
+ var isMultipleSelected = nodeTypes.length > 1;
186
+
187
+ // Only execute when selection is not a multi-selection, block menu is open, and menu is opened via keyboard
188
+ // as when it is a multi-selection, the showDragHandleAt command interfere with selection
189
+ // sometimes makes the multi-selection not continous after block menu is opened with keyboard
190
+ if (!(isMultipleSelected && isMenuOpen && blockMenuOptions !== null && blockMenuOptions !== void 0 && blockMenuOptions.openedViaKeyboard)) {
191
+ var _api$core, _api$blockControls2;
192
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
193
+ }
194
+ } else {
195
+ var _api$core2, _api$blockControls3;
196
+ api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
197
+ }
171
198
  } else {
172
- var _api$core2, _api$blockControls3;
173
- api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType));
199
+ var _api$core3, _api$blockControls4;
200
+ api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.showDragHandleAt(targetPos, anchorName, nodeType));
174
201
  }
175
202
  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
176
203
  var _api$userIntent;
177
204
  if (isMenuOpen && originalAnchorName && (api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'blockMenuOpen') {
178
- var _api$core3, _api$blockControls4;
179
- api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.toggleBlockMenu());
205
+ var _api$core4, _api$blockControls5;
206
+ api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.toggleBlockMenu());
180
207
  }
181
208
  }
182
209
  }
package/dist/esm/ui/drag-handle.js CHANGED
@@ -373,18 +373,49 @@ var getExpandedSelectionRange = function getExpandedSelectionRange(_ref) {
373
373
  var $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
374
374
  return expandToBlockRange($from, $to);
375
375
  };
376
- export var DragHandle = function DragHandle(_ref2) {
377
- var _api$core4;
378
- var view = _ref2.view,
379
- api = _ref2.api,
380
- formatMessage = _ref2.formatMessage,
381
- getPos = _ref2.getPos,
382
- anchorName = _ref2.anchorName,
376
+ /**
377
+ * Updates the transaction with preserved selection logic.
378
+ * Sets selection to expanded selection range if it encompasses the clicked drag handle,
379
+ * otherwise selects the clicked drag handle's node only.
380
+ */
381
+ var expandAndUpdateSelection = function expandAndUpdateSelection(_ref2) {
382
+ var tr = _ref2.tr,
383
+ selection = _ref2.selection,
384
+ startPos = _ref2.startPos,
385
+ isShiftPressed = _ref2.isShiftPressed,
383
386
  nodeType = _ref2.nodeType,
384
- handleOptions = _ref2.handleOptions,
385
- _ref2$isTopLevelNode = _ref2.isTopLevelNode,
386
- isTopLevelNode = _ref2$isTopLevelNode === void 0 ? true : _ref2$isTopLevelNode,
387
- anchorRectCache = _ref2.anchorRectCache;
387
+ api = _ref2.api;
388
+ var resolvedStartPos = tr.doc.resolve(startPos);
389
+ var expandedRange = getExpandedSelectionRange({
390
+ doc: tr.doc,
391
+ selection: selection,
392
+ resolvedStartPos: resolvedStartPos,
393
+ isShiftPressed: isShiftPressed
394
+ });
395
+
396
+ // Set selection to expanded selection range if it encompases the clicked drag handle
397
+ if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiNodeRange(expandedRange.range)) {
398
+ var collapsed = collapseToSelectionRange(expandedRange.$from, expandedRange.$to);
399
+
400
+ // Then create a selection from the start of the first node to the end of the last node
401
+ tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, collapsed.$from.pos), Math.max(selection.to, collapsed.$to.pos)));
402
+ } else {
403
+ // Select the clicked drag handle's node only
404
+ selectNode(tr, startPos, nodeType, api);
405
+ }
406
+ };
407
+ export var DragHandle = function DragHandle(_ref3) {
408
+ var _api$core4;
409
+ var view = _ref3.view,
410
+ api = _ref3.api,
411
+ formatMessage = _ref3.formatMessage,
412
+ getPos = _ref3.getPos,
413
+ anchorName = _ref3.anchorName,
414
+ nodeType = _ref3.nodeType,
415
+ handleOptions = _ref3.handleOptions,
416
+ _ref3$isTopLevelNode = _ref3.isTopLevelNode,
417
+ isTopLevelNode = _ref3$isTopLevelNode === void 0 ? true : _ref3$isTopLevelNode,
418
+ anchorRectCache = _ref3.anchorRectCache;
388
419
  var buttonRef = useRef(null);
389
420
  var _useState = useState(false),
390
421
  _useState2 = _slicedToArray(_useState, 2),
@@ -447,9 +478,9 @@ export var DragHandle = function DragHandle(_ref2) {
447
478
  }, [anchorName, nodeType, view.dom]);
448
479
  var handleOnClickNew = useCallback(function (e) {
449
480
  var _api$core;
450
- api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
481
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref4) {
451
482
  var _selectionPreservatio, _api$analytics, _resolvedStartPos$nod, _api$blockControls, _api$blockControls2;
452
- var tr = _ref3.tr;
483
+ var tr = _ref4.tr;
453
484
  var startPos = getPos();
454
485
  if (startPos === undefined) {
455
486
  return tr;
@@ -466,23 +497,14 @@ export var DragHandle = function DragHandle(_ref2) {
466
497
  nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
467
498
  }
468
499
  })(tr);
469
- var expandedRange = getExpandedSelectionRange({
470
- doc: tr.doc,
500
+ expandAndUpdateSelection({
501
+ tr: tr,
471
502
  selection: selection,
472
- resolvedStartPos: resolvedStartPos,
473
- isShiftPressed: e.shiftKey
503
+ startPos: startPos,
504
+ isShiftPressed: e.shiftKey,
505
+ nodeType: nodeType,
506
+ api: api
474
507
  });
475
-
476
- // Set selection to expanded selection range if it encompases the clicked drag handle
477
- if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiNodeRange(expandedRange.range)) {
478
- var collapsed = collapseToSelectionRange(expandedRange.$from, expandedRange.$to);
479
-
480
- // Then create a selection from the start of the first node to the end of the last node
481
- tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, collapsed.$from.pos), Math.max(selection.to, collapsed.$to.pos)));
482
- } else {
483
- // Select the clicked drag handle's node only
484
- tr = selectNode(tr, startPos, nodeType, api);
485
- }
486
508
  api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.startPreservingSelection()({
487
509
  tr: tr
488
510
  });
@@ -507,9 +529,9 @@ export var DragHandle = function DragHandle(_ref2) {
507
529
  if (!isMultiSelect) {
508
530
  setDragHandleSelected(!dragHandleSelected);
509
531
  }
510
- api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref4) {
532
+ api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref5) {
511
533
  var _api$blockControls$sh, _api$analytics2;
512
- var tr = _ref4.tr;
534
+ var tr = _ref5.tr;
513
535
  var startPos = getPos();
514
536
  if (startPos === undefined) {
515
537
  return tr;
@@ -549,8 +571,8 @@ export var DragHandle = function DragHandle(_ref2) {
549
571
  if (!e.repeat && e.key === ' ') {
550
572
  var _api$core3;
551
573
  var startPos = getPos();
552
- api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref5) {
553
- var tr = _ref5.tr;
574
+ api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref6) {
575
+ var tr = _ref6.tr;
554
576
  if (startPos === undefined) {
555
577
  return tr;
556
578
  }
@@ -584,15 +606,23 @@ export var DragHandle = function DragHandle(_ref2) {
584
606
  e.preventDefault();
585
607
  e.stopPropagation();
586
608
  var startPos = getPos();
587
- api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref6) {
588
- var _api$blockControls4, _api$userIntent;
589
- var tr = _ref6.tr;
609
+ api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref7) {
610
+ var _selectionPreservatio2, _api$blockControls4, _api$blockControls5, _api$userIntent;
611
+ var tr = _ref7.tr;
590
612
  if (startPos === undefined) {
591
613
  return tr;
592
614
  }
593
- tr = selectNode(tr, startPos, nodeType, api);
594
- !isMultiSelect && tr.setMeta(key, {
595
- pos: startPos
615
+ var selection = ((_selectionPreservatio2 = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection) || tr.selection;
616
+ expandAndUpdateSelection({
617
+ tr: tr,
618
+ selection: selection,
619
+ startPos: startPos,
620
+ isShiftPressed: e.shiftKey,
621
+ nodeType: nodeType,
622
+ api: api
623
+ });
624
+ api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.startPreservingSelection()({
625
+ tr: tr
596
626
  });
597
627
  var rootPos = editorExperiment('platform_synced_block', true) ? tr.doc.resolve(startPos).before(1) : undefined;
598
628
  var triggerByNode = expValEqualsNoExposure('platform_synced_block', 'isEnabled', true) ? {
@@ -600,7 +630,7 @@ export var DragHandle = function DragHandle(_ref2) {
600
630
  pos: startPos,
601
631
  rootPos: rootPos
602
632
  } : undefined;
603
- api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || _api$blockControls4.commands.toggleBlockMenu({
633
+ api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.toggleBlockMenu({
604
634
  anchorName: anchorName,
605
635
  triggerByNode: triggerByNode,
606
636
  openedViaKeyboard: true
@@ -612,6 +642,7 @@ export var DragHandle = function DragHandle(_ref2) {
612
642
  });
613
643
  return tr;
614
644
  });
645
+ view.focus();
615
646
  } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
616
647
  return pressed;
617
648
  })) {
@@ -619,7 +650,7 @@ export var DragHandle = function DragHandle(_ref2) {
619
650
  // return focus to editor to resume editing from caret position
620
651
  view.focus();
621
652
  }
622
- }, [getPos, api, nodeType, isMultiSelect, anchorName, view]);
653
+ }, [getPos, api, nodeType, anchorName, view]);
623
654
  useEffect(function () {
624
655
  var element = buttonRef.current;
625
656
  if (!element) {
@@ -633,21 +664,21 @@ export var DragHandle = function DragHandle(_ref2) {
633
664
  start: start
634
665
  };
635
666
  },
636
- onGenerateDragPreview: function onGenerateDragPreview(_ref7) {
667
+ onGenerateDragPreview: function onGenerateDragPreview(_ref8) {
637
668
  var _api$blockControls$sh2;
638
- var nativeSetDragImage = _ref7.nativeSetDragImage;
669
+ var nativeSetDragImage = _ref8.nativeSetDragImage;
639
670
  if (isMultiSelect) {
640
671
  var _api$core6;
641
- api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref8) {
642
- var tr = _ref8.tr;
672
+ api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref9) {
673
+ var tr = _ref9.tr;
643
674
  var handlePos = getPos();
644
675
  if (typeof handlePos !== 'number') {
645
676
  return tr;
646
677
  }
647
678
  var newHandlePosCheck = isHandleCorrelatedToSelection(view.state, tr.selection, handlePos);
648
679
  if (!tr.selection.empty && newHandlePosCheck) {
649
- var _api$blockControls5;
650
- api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.setMultiSelectPositions()({
680
+ var _api$blockControls6;
681
+ api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setMultiSelectPositions()({
651
682
  tr: tr
652
683
  });
653
684
  } else {
@@ -717,8 +748,8 @@ export var DragHandle = function DragHandle(_ref2) {
717
748
  };
718
749
  }
719
750
  },
720
- render: function render(_ref9) {
721
- var container = _ref9.container;
751
+ render: function render(_ref0) {
752
+ var container = _ref0.container;
722
753
  var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
723
754
  if (!dom) {
724
755
  return;
@@ -754,9 +785,9 @@ export var DragHandle = function DragHandle(_ref2) {
754
785
  if (start === undefined) {
755
786
  return;
756
787
  }
757
- api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref0) {
758
- var _api$blockControls$sh3, _api$blockControls6, _api$analytics3;
759
- var tr = _ref0.tr;
788
+ api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref1) {
789
+ var _api$blockControls$sh3, _api$blockControls7, _api$analytics3;
790
+ var tr = _ref1.tr;
760
791
  var nodeTypes, hasSelectedMultipleNodes;
761
792
  var resolvedMovingNode = tr.doc.resolve(start);
762
793
  var maybeNode = resolvedMovingNode.nodeAfter;
@@ -769,7 +800,7 @@ export var DragHandle = function DragHandle(_ref2) {
769
800
  nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
770
801
  hasSelectedMultipleNodes = false;
771
802
  }
772
- api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setNodeDragged(getPos, anchorName, nodeType)({
803
+ api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 || _api$blockControls7.commands.setNodeDragged(getPos, anchorName, nodeType)({
773
804
  tr: tr
774
805
  });
775
806
  tr.setMeta('scrollIntoView', false);
@@ -1150,15 +1181,15 @@ export var DragHandle = function DragHandle(_ref2) {
1150
1181
  var render = isTooltip ? buttonWithTooltip() : renderButton();
1151
1182
  return editorExperiment('platform_editor_controls', 'variant1') ? stickyRender : render;
1152
1183
  };
1153
- export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref1) {
1154
- var view = _ref1.view,
1155
- api = _ref1.api,
1156
- formatMessage = _ref1.formatMessage,
1157
- getPos = _ref1.getPos,
1158
- anchorName = _ref1.anchorName,
1159
- nodeType = _ref1.nodeType,
1160
- handleOptions = _ref1.handleOptions,
1161
- anchorRectCache = _ref1.anchorRectCache;
1184
+ export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref10) {
1185
+ var view = _ref10.view,
1186
+ api = _ref10.api,
1187
+ formatMessage = _ref10.formatMessage,
1188
+ getPos = _ref10.getPos,
1189
+ anchorName = _ref10.anchorName,
1190
+ nodeType = _ref10.nodeType,
1191
+ handleOptions = _ref10.handleOptions,
1192
+ anchorRectCache = _ref10.anchorRectCache;
1162
1193
  return jsx(VisibilityContainer, {
1163
1194
  api: api
1164
1195
  }, jsx(DragHandle, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "7.18.2",
3
+ "version": "7.18.3",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -54,7 +54,7 @@
54
54
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
55
55
  "@atlaskit/primitives": "^17.0.0",
56
56
  "@atlaskit/theme": "^21.0.0",
57
- "@atlaskit/tmp-editor-statsig": "^16.2.0",
57
+ "@atlaskit/tmp-editor-statsig": "^16.3.0",
58
58
  "@atlaskit/tokens": "^9.0.0",
59
59
  "@atlaskit/tooltip": "^20.11.0",
60
60
  "@babel/runtime": "^7.0.0",