@atlaskit/editor-plugin-block-controls 2.27.0 → 2.27.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.27.1
+
+### Patch Changes
+
+- [#112996](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112996)
+  [`e76ab95452657`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e76ab95452657) -
+  ED-26395: Added tests for canMoveSliceToIndex, and fix drop target showing when first node is p,
+  second node table, drop into panel
+
 ## 2.27.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/decorations-drop-target.js

@@ -8,6 +8,7 @@ exports.findDropTargetDecs = exports.dropTargetDecorations = exports.createLayou
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _uuid = _interopRequireDefault(require("uuid"));
+var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -166,6 +167,15 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
     prevNodeStack.push(node);
   };
   var isAdvancedLayoutsPreRelease2 = (0, _experiments.editorExperiment)('advanced_layouts', true);
+
+  // For deciding to show drop targets or not when multiple nodes are selected
+  var selection = newState.selection;
+  var _expandSelectionBound = (0, _selection.expandSelectionBounds)(selection.$anchor, selection.$head),
+    expandedAnchor = _expandSelectionBound.$anchor,
+    expandedHead = _expandSelectionBound.$head;
+  var selectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
+  var selectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
+  var handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom && activeNodePos <= selectionTo;
   newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var depth = 0;
     // drop target deco at the end position
@@ -200,10 +210,6 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
 
       // When multi select is on, validate all the nodes in the selection instead of just the handle node
       if (isMultiSelect) {
-        var selection = newState.selection;
-        var selectionFrom = selection.$from.pos;
-        var selectionTo = selection.$to.pos;
-        var handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom - 1 && activeNodePos <= selectionTo;
         var selectionSlice = newState.doc.slice(selectionFrom, selectionTo, false);
         var selectionSliceChildCount = selectionSlice.content.childCount;
         var canDropSingleNode = true;
@@ -211,7 +217,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
 
         // when there is only one node in the slice, use the same logic as when multi select is not on
         if (selectionSliceChildCount > 1 && handleInsideSelection) {
-          canDropMultipleNodes = (0, _validation.canMoveSliceToIndex)(selectionSlice, selectionFrom, newState.doc, parent, index, $pos);
+          canDropMultipleNodes = (0, _validation.canMoveSliceToIndex)(selectionSlice, selectionFrom, parent, index, $pos);
         } else {
           canDropSingleNode = !!(activePMNode && (0, _validation.canMoveNodeToIndex)(parent, index, activePMNode, $pos, node));
         }

package/dist/cjs/pm-plugins/utils/getSelection.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setCursorPositionAtMovedNode = exports.selectNode = exports.rootTaskListDepth = exports.rootListDepth = exports.isHandleInSelection = exports.getSelection = exports.getInlineNodePos = void 0;
+exports.setCursorPositionAtMovedNode = exports.selectNode = exports.rootTaskListDepth = exports.rootListDepth = exports.isHandleCorrelatedToSelection = exports.getSelection = exports.getInlineNodePos = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -100,7 +100,7 @@ var setCursorPositionAtMovedNode = exports.setCursorPositionAtMovedNode = functi
  * @param handlePos
  * @returns
  */
-var isHandleInSelection = exports.isHandleInSelection = function isHandleInSelection(state, selection, handlePos) {
+var isHandleCorrelatedToSelection = exports.isHandleCorrelatedToSelection = function isHandleCorrelatedToSelection(state, selection, handlePos) {
   if (selection.empty) {
     return false;
   }

package/dist/cjs/pm-plugins/utils/validation.js

@@ -121,8 +121,9 @@ function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos,
   }
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }
-function canMoveSliceToIndex(slice, sliceFromPos, doc, destParent, indexIntoParent, $destNodePos, destNode) {
+function canMoveSliceToIndex(slice, sliceFromPos, destParent, indexIntoParent, $destNodePos, destNode) {
   var canMoveNodes = true;
+  var doc = $destNodePos.doc;
   var nodesPos = [];
   for (var i = 0; i < slice.content.childCount; i++) {
     var node = slice.content.maybeChild(i);

package/dist/cjs/ui/drag-handle.js

@@ -401,7 +401,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     if (!isMultiSelect || typeof start !== 'number' || !selection) {
       return;
     }
-    setDragHandleSelected((0, _getSelection.isHandleInSelection)(view.state, selection, start));
+    setDragHandleSelected((0, _getSelection.isHandleCorrelatedToSelection)(view.state, selection, start));
   }, [start, selection, view.state]);
   var helpDescriptors = isTopLevelNode && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility') ? [{
     description: formatMessage(_messages.blockControlsMessages.dragToMove)

package/dist/es2019/pm-plugins/decorations-drop-target.js

@@ -1,5 +1,6 @@
 import { createElement } from 'react';
 import uuid from 'uuid';
+import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -153,6 +154,16 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
     prevNodeStack.push(node);
   };
   const isAdvancedLayoutsPreRelease2 = editorExperiment('advanced_layouts', true);
+
+  // For deciding to show drop targets or not when multiple nodes are selected
+  const selection = newState.selection;
+  const {
+    $anchor: expandedAnchor,
+    $head: expandedHead
+  } = expandSelectionBounds(selection.$anchor, selection.$head);
+  const selectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
+  const selectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
+  const handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom && activeNodePos <= selectionTo;
   newState.doc.nodesBetween(docFrom, docTo, (node, pos, parent, index) => {
     let depth = 0;
     // drop target deco at the end position
@@ -187,10 +198,6 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
 
       // When multi select is on, validate all the nodes in the selection instead of just the handle node
       if (isMultiSelect) {
-        const selection = newState.selection;
-        const selectionFrom = selection.$from.pos;
-        const selectionTo = selection.$to.pos;
-        const handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom - 1 && activeNodePos <= selectionTo;
         const selectionSlice = newState.doc.slice(selectionFrom, selectionTo, false);
         const selectionSliceChildCount = selectionSlice.content.childCount;
         let canDropSingleNode = true;
@@ -198,7 +205,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
 
         // when there is only one node in the slice, use the same logic as when multi select is not on
         if (selectionSliceChildCount > 1 && handleInsideSelection) {
-          canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, newState.doc, parent, index, $pos);
+          canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, parent, index, $pos);
         } else {
           canDropSingleNode = !!(activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $pos, node));
         }

package/dist/es2019/pm-plugins/utils/getSelection.js

@@ -96,7 +96,7 @@ export const setCursorPositionAtMovedNode = (tr, start) => {
  * @param handlePos
  * @returns
  */
-export const isHandleInSelection = (state, selection, handlePos) => {
+export const isHandleCorrelatedToSelection = (state, selection, handlePos) => {
   if (selection.empty) {
     return false;
   }

package/dist/es2019/pm-plugins/utils/validation.js

@@ -114,8 +114,9 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
   }
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }
-export function canMoveSliceToIndex(slice, sliceFromPos, doc, destParent, indexIntoParent, $destNodePos, destNode) {
+export function canMoveSliceToIndex(slice, sliceFromPos, destParent, indexIntoParent, $destNodePos, destNode) {
   let canMoveNodes = true;
+  const doc = $destNodePos.doc;
   const nodesPos = [];
   for (let i = 0; i < slice.content.childCount; i++) {
     const node = slice.content.maybeChild(i);

package/dist/es2019/ui/drag-handle.js

@@ -24,7 +24,7 @@ import { key } from '../pm-plugins/main';
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { getLeftPosition, getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
 import { getNestedNodePosition } from '../pm-plugins/utils/getNestedNodePosition';
-import { isHandleInSelection, selectNode } from '../pm-plugins/utils/getSelection';
+import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 const iconWrapperStyles = xcss({
@@ -383,7 +383,7 @@ export const DragHandle = ({
     if (!isMultiSelect || typeof start !== 'number' || !selection) {
       return;
     }
-    setDragHandleSelected(isHandleInSelection(view.state, selection, start));
+    setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
   }, [start, selection, view.state]);
   let helpDescriptors = isTopLevelNode && fg('platform_editor_advanced_layouts_accessibility') ? [{
     description: formatMessage(blockControlsMessages.dragToMove)

package/dist/esm/pm-plugins/decorations-drop-target.js

@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { createElement } from 'react';
 import uuid from 'uuid';
+import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -159,6 +160,15 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
     prevNodeStack.push(node);
   };
   var isAdvancedLayoutsPreRelease2 = editorExperiment('advanced_layouts', true);
+
+  // For deciding to show drop targets or not when multiple nodes are selected
+  var selection = newState.selection;
+  var _expandSelectionBound = expandSelectionBounds(selection.$anchor, selection.$head),
+    expandedAnchor = _expandSelectionBound.$anchor,
+    expandedHead = _expandSelectionBound.$head;
+  var selectionFrom = Math.min(expandedAnchor.pos, expandedHead.pos);
+  var selectionTo = Math.max(expandedAnchor.pos, expandedHead.pos);
+  var handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom && activeNodePos <= selectionTo;
   newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var depth = 0;
     // drop target deco at the end position
@@ -193,10 +203,6 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
 
       // When multi select is on, validate all the nodes in the selection instead of just the handle node
       if (isMultiSelect) {
-        var selection = newState.selection;
-        var selectionFrom = selection.$from.pos;
-        var selectionTo = selection.$to.pos;
-        var handleInsideSelection = activeNodePos !== undefined && activeNodePos >= selectionFrom - 1 && activeNodePos <= selectionTo;
         var selectionSlice = newState.doc.slice(selectionFrom, selectionTo, false);
         var selectionSliceChildCount = selectionSlice.content.childCount;
         var canDropSingleNode = true;
@@ -204,7 +210,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
 
         // when there is only one node in the slice, use the same logic as when multi select is not on
         if (selectionSliceChildCount > 1 && handleInsideSelection) {
-          canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, newState.doc, parent, index, $pos);
+          canDropMultipleNodes = canMoveSliceToIndex(selectionSlice, selectionFrom, parent, index, $pos);
         } else {
           canDropSingleNode = !!(activePMNode && canMoveNodeToIndex(parent, index, activePMNode, $pos, node));
         }

package/dist/esm/pm-plugins/utils/getSelection.js

@@ -94,7 +94,7 @@ export var setCursorPositionAtMovedNode = function setCursorPositionAtMovedNode(
  * @param handlePos
  * @returns
  */
-export var isHandleInSelection = function isHandleInSelection(state, selection, handlePos) {
+export var isHandleCorrelatedToSelection = function isHandleCorrelatedToSelection(state, selection, handlePos) {
   if (selection.empty) {
     return false;
   }

package/dist/esm/pm-plugins/utils/validation.js

@@ -112,8 +112,9 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
   }
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }
-export function canMoveSliceToIndex(slice, sliceFromPos, doc, destParent, indexIntoParent, $destNodePos, destNode) {
+export function canMoveSliceToIndex(slice, sliceFromPos, destParent, indexIntoParent, $destNodePos, destNode) {
   var canMoveNodes = true;
+  var doc = $destNodePos.doc;
   var nodesPos = [];
   for (var i = 0; i < slice.content.childCount; i++) {
     var node = slice.content.maybeChild(i);

package/dist/esm/ui/drag-handle.js

@@ -29,7 +29,7 @@ import { key } from '../pm-plugins/main';
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { getLeftPosition, getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
 import { getNestedNodePosition } from '../pm-plugins/utils/getNestedNodePosition';
-import { isHandleInSelection, selectNode } from '../pm-plugins/utils/getSelection';
+import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 var iconWrapperStyles = xcss({
@@ -396,7 +396,7 @@ export var DragHandle = function DragHandle(_ref) {
     if (!isMultiSelect || typeof start !== 'number' || !selection) {
       return;
     }
-    setDragHandleSelected(isHandleInSelection(view.state, selection, start));
+    setDragHandleSelected(isHandleCorrelatedToSelection(view.state, selection, start));
   }, [start, selection, view.state]);
   var helpDescriptors = isTopLevelNode && fg('platform_editor_advanced_layouts_accessibility') ? [{
     description: formatMessage(blockControlsMessages.dragToMove)

package/dist/types/pm-plugins/utils/getSelection.d.ts

@@ -14,6 +14,6 @@ export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: numb
  * @param handlePos
  * @returns
  */
-export declare const isHandleInSelection: (state: EditorState, selection: Selection, handlePos: number) => boolean;
+export declare const isHandleCorrelatedToSelection: (state: EditorState, selection: Selection, handlePos: number) => boolean;
 export declare const rootListDepth: (itemPos: ResolvedPos) => number | undefined;
 export declare const rootTaskListDepth: (taskListPos: ResolvedPos) => number | undefined;

package/dist/types/pm-plugins/utils/validation.d.ts

@@ -17,4 +17,4 @@ export declare const transformExpandToNestedExpand: (expandNode: PMNode) => PMNo
 export declare const transformSliceExpandToNestedExpand: (slice: Slice) => Slice | null;
 export declare const memoizedTransformExpandToNestedExpand: import("memoize-one").MemoizedFn<(node: PMNode) => PMNode | null>;
 export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;
-export declare function canMoveSliceToIndex(slice: Slice, sliceFromPos: number, doc: PMNode, destParent: PMNode, indexIntoParent: number, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;
+export declare function canMoveSliceToIndex(slice: Slice, sliceFromPos: number, destParent: PMNode, indexIntoParent: number, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;

package/dist/types-ts4.5/pm-plugins/utils/getSelection.d.ts

@@ -14,6 +14,6 @@ export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: numb
  * @param handlePos
  * @returns
  */
-export declare const isHandleInSelection: (state: EditorState, selection: Selection, handlePos: number) => boolean;
+export declare const isHandleCorrelatedToSelection: (state: EditorState, selection: Selection, handlePos: number) => boolean;
 export declare const rootListDepth: (itemPos: ResolvedPos) => number | undefined;
 export declare const rootTaskListDepth: (taskListPos: ResolvedPos) => number | undefined;

package/dist/types-ts4.5/pm-plugins/utils/validation.d.ts

@@ -17,4 +17,4 @@ export declare const transformExpandToNestedExpand: (expandNode: PMNode) => PMNo
 export declare const transformSliceExpandToNestedExpand: (slice: Slice) => Slice | null;
 export declare const memoizedTransformExpandToNestedExpand: import("memoize-one").MemoizedFn<(node: PMNode) => PMNode | null>;
 export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;
-export declare function canMoveSliceToIndex(slice: Slice, sliceFromPos: number, doc: PMNode, destParent: PMNode, indexIntoParent: number, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;
+export declare function canMoveSliceToIndex(slice: Slice, sliceFromPos: number, destParent: PMNode, indexIntoParent: number, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.27.0",
+	"version": "2.27.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",