@atlaskit/editor-plugin-block-controls 7.11.1 → 7.11.3

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

@@ -4,14 +4,14 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-export var getInlineNodePos = function getInlineNodePos(tr, start, nodeSize) {
-  var $startPos = tr.doc.resolve(start);
+export var getInlineNodePos = function getInlineNodePos(doc, start, nodeSize) {
+  var $startPos = doc.resolve(start);
   // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
   // Find the first inline node in the node
   var inlineNodePos = start;
   var foundInlineNode = false;
   var inlineNodeEndPos = 0;
-  tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n, pos) {
+  doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n, pos) {
     if (n.isInline) {
       inlineNodeEndPos = pos + n.nodeSize;
     }
@@ -36,10 +36,10 @@ export var isNodeWithCodeBlock = function isNodeWithCodeBlock(tr, start, nodeSiz
   });
   return hasCodeBlock;
 };
-var isNodeWithMediaOrExtension = function isNodeWithMediaOrExtension(tr, start, nodeSize) {
-  var $startPos = tr.doc.resolve(start);
+var isNodeWithMediaOrExtension = function isNodeWithMediaOrExtension(doc, start, nodeSize) {
+  var $startPos = doc.resolve(start);
   var hasMediaOrExtension = false;
-  tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n) {
+  doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n) {
     if (['media', 'extension'].includes(n.type.name)) {
       hasMediaOrExtension = true;
     }
@@ -52,8 +52,8 @@ var oldGetSelection = function oldGetSelection(tr, start) {
   var nodeSize = node ? node.nodeSize : 1;
   var $startPos = tr.doc.resolve(start);
   var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
-  var isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(tr, start, nodeSize);
-  var isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(tr, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(tr, start, nodeSize);
+  var isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(tr.doc, start, nodeSize);
+  var isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(tr.doc, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(tr.doc, start, nodeSize);
   if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
   // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
   ['decisionList', 'layoutColumn'].includes(nodeName || '')) {
@@ -69,55 +69,55 @@ var oldGetSelection = function oldGetSelection(tr, start) {
   } else if (nodeName === 'taskList') {
     return TextSelection.create(tr.doc, start, start + nodeSize);
   } else {
-    var _getInlineNodePos = getInlineNodePos(tr, start, nodeSize),
+    var _getInlineNodePos = getInlineNodePos(tr.doc, start, nodeSize),
       inlineNodePos = _getInlineNodePos.inlineNodePos,
       inlineNodeEndPos = _getInlineNodePos.inlineNodeEndPos;
     return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
   }
 };
-var newGetSelection = function newGetSelection(tr, start) {
-  var node = tr.doc.nodeAt(start);
+var newGetSelection = function newGetSelection(doc, selectionEmpty, start) {
+  var node = doc.nodeAt(start);
   var isNodeSelection = node && NodeSelection.isSelectable(node);
   var nodeSize = node ? node.nodeSize : 1;
   var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
 
   // this is a fix for empty paragraph selection - put first to avoid any extra work
-  if (nodeName === 'paragraph' && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && !expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+  if (nodeName === 'paragraph' && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && !expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
     return false;
   }
-  var isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
+  var isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && selectionEmpty && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
   var isBlockQuoteEmpty = nodeName === 'blockquote' && (node === null || node === void 0 ? void 0 : node.textContent) === '';
-  var isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.textContent) === '';
+  var isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && selectionEmpty && (node === null || node === void 0 ? void 0 : node.textContent) === '';
 
   // if block menu and empty line format menu are enabled,
   // we want to set the selection to avoid the selection goes to the top of the document
   if ((isParagraphHeadingEmpty || isBlockQuoteEmpty || isListEmpty) && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
-    return TextSelection.create(tr.doc, start + 1, start + 1);
+    return TextSelection.create(doc, start + 1, start + 1);
   }
-  var isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(tr, start, nodeSize);
-  var isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(tr, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(tr, start, nodeSize);
+  var isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(doc, start, nodeSize);
+  var isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(doc, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(doc, start, nodeSize);
   if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||
   // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
   ['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
-    return new NodeSelection(tr.doc.resolve(start));
+    return new NodeSelection(doc.resolve(start));
   }
 
   // if mediaGroup only has a single child, we want to select the child
   if (nodeName === 'mediaGroup') {
-    var $mediaStartPos = tr.doc.resolve(start + 1);
+    var $mediaStartPos = doc.resolve(start + 1);
     return new NodeSelection($mediaStartPos);
   }
   if (nodeName === 'taskList' && !expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
-    return TextSelection.create(tr.doc, start, start + nodeSize);
+    return TextSelection.create(doc, start, start + nodeSize);
   }
-  var _getInlineNodePos2 = getInlineNodePos(tr, start, nodeSize),
+  var _getInlineNodePos2 = getInlineNodePos(doc, start, nodeSize),
     inlineNodePos = _getInlineNodePos2.inlineNodePos,
     inlineNodeEndPos = _getInlineNodePos2.inlineNodeEndPos;
-  return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
+  return new TextSelection(doc.resolve(inlineNodePos), doc.resolve(inlineNodeEndPos));
 };
 export var getSelection = function getSelection(tr, start, api) {
   if (areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
-    return newGetSelection(tr, start);
+    return newGetSelection(tr.doc, tr.selection.empty, start);
   }
   return oldGetSelection(tr, start);
 };
@@ -152,7 +152,7 @@ export var setCursorPositionAtMovedNode = function setCursorPositionAtMovedNode(
     tr.setSelection(_selection);
     return tr;
   }
-  var _getInlineNodePos3 = getInlineNodePos(tr, start, nodeSize),
+  var _getInlineNodePos3 = getInlineNodePos(tr.doc, start, nodeSize),
     inlineNodeEndPos = _getInlineNodePos3.inlineNodeEndPos;
   selection = new TextSelection(tr.doc.resolve(inlineNodeEndPos));
   tr.setSelection(selection);
@@ -214,4 +214,30 @@ export var rootTaskListDepth = function rootTaskListDepth(taskListPos) {
     }
   }
   return depth;
+};
+
+/**
+ * Collapses the given $from and $to resolved positions to the nearest valid selection range.
+ *
+ * Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
+ *
+ * @param $from the resolved start position
+ * @param $to the resolved end position
+ * @returns An object containing the collapsed $from and $to resolved positions
+ */
+export var collapseToSelectionRange = function collapseToSelectionRange($from, $to) {
+  var _$to$nodeBefore$nodeS, _$to$nodeBefore;
+  // Get the selections that would be made for the first and last node in the range
+  // We re-use the getSelection logic as it already handles various node types and edge cases
+  // always pass true for selectionEmpty to emulate a cursor selection within the node
+  var firstNodeSelection = newGetSelection($from.doc, true, $from.pos);
+  var lastNodeSize = (_$to$nodeBefore$nodeS = (_$to$nodeBefore = $to.nodeBefore) === null || _$to$nodeBefore === void 0 ? void 0 : _$to$nodeBefore.nodeSize) !== null && _$to$nodeBefore$nodeS !== void 0 ? _$to$nodeBefore$nodeS : 0;
+  var lastNodeStartPos = $to.pos - lastNodeSize;
+  var lastNodeSelection = newGetSelection($from.doc, true, lastNodeStartPos);
+
+  // Return a selection spanning from the start of the first node selection to the end of the last node selection
+  return {
+    $from: $from.doc.resolve(firstNodeSelection ? firstNodeSelection.from : $from.pos),
+    $to: $to.doc.resolve(lastNodeSelection ? lastNodeSelection.to : $to.pos)
+  };
 };

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

@@ -41,7 +41,7 @@ import { key } from '../pm-plugins/main';
 import { selectionPreservationPluginKey } from '../pm-plugins/selection-preservation/plugin-key';
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
-import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
+import { collapseToSelectionRange, isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
@@ -434,7 +434,10 @@ export var DragHandle = function DragHandle(_ref2) {
 
       // Set selection to expanded selection range if it encompases the clicked drag handle
       if (range && isPosWithinRange(startPos, range) && isMultiNodeRange(range)) {
-        tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, range.start), Math.max(selection.to, range.end)));
+        var collapsed = collapseToSelectionRange(tr.doc.resolve(range.start), tr.doc.resolve(range.end));
+
+        // Then create a selection from the start of the first node to the end of the last node
+        tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, collapsed ? collapsed.$from.pos : range.start), Math.max(selection.to, collapsed ? collapsed.$to.pos : range.end)));
       } else {
         // Select the clicked drag handle's node only
         tr = selectNode(tr, startPos, nodeType, api);

package/dist/types/blockControlsPluginType.d.ts

@@ -162,6 +162,7 @@ export type BlockControlsMeta = {
     editorBlurred: boolean;
     editorHeight: number;
     nodeMoved: boolean;
+    nodeMovedOffset: number;
     type: string;
 };
 export type MoveNodeMethod = INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT | INPUT_METHOD.BLOCK_MENU;

package/dist/types/pm-plugins/main.d.ts

@@ -5,7 +5,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import type { ActiveDropTargetNode, BlockControlsPlugin, PluginState } from '../blockControlsPluginType';
+import type { ActiveDropTargetNode, BlockControlsMeta, BlockControlsPlugin, PluginState } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const key: PluginKey<PluginState>;
 export interface FlagType {
@@ -61,3 +61,4 @@ export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin
     lastDragCancelled: any;
     isSelectedViaDragHandle: any;
 }>;
+export declare const getBlockControlsMeta: (tr: ReadonlyTransaction) => BlockControlsMeta | undefined;

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

@@ -1,8 +1,8 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { type ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import { type EditorState, NodeSelection, TextSelection, type Transaction, type Selection } from '@atlaskit/editor-prosemirror/state';
+import { type Node as PMNode, type ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import { type EditorState, NodeSelection, type Selection, TextSelection, type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { BlockControlsPlugin } from '../../blockControlsPluginType';
-export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize: number) => {
+export declare const getInlineNodePos: (doc: PMNode, start: number, nodeSize: number) => {
     inlineNodeEndPos: number;
     inlineNodePos: number;
 };
@@ -20,3 +20,16 @@ export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: numb
 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;
+/**
+ * Collapses the given $from and $to resolved positions to the nearest valid selection range.
+ *
+ * Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
+ *
+ * @param $from the resolved start position
+ * @param $to the resolved end position
+ * @returns An object containing the collapsed $from and $to resolved positions
+ */
+export declare const collapseToSelectionRange: ($from: ResolvedPos, $to: ResolvedPos) => {
+    $from: ResolvedPos;
+    $to: ResolvedPos;
+};

package/dist/types-ts4.5/blockControlsPluginType.d.ts

@@ -162,6 +162,7 @@ export type BlockControlsMeta = {
     editorBlurred: boolean;
     editorHeight: number;
     nodeMoved: boolean;
+    nodeMovedOffset: number;
     type: string;
 };
 export type MoveNodeMethod = INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT | INPUT_METHOD.BLOCK_MENU;

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

@@ -5,7 +5,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import type { ActiveDropTargetNode, BlockControlsPlugin, PluginState } from '../blockControlsPluginType';
+import type { ActiveDropTargetNode, BlockControlsMeta, BlockControlsPlugin, PluginState } from '../blockControlsPluginType';
 import { AnchorRectCache } from './utils/anchor-utils';
 export declare const key: PluginKey<PluginState>;
 export interface FlagType {
@@ -61,3 +61,4 @@ export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin
     lastDragCancelled: any;
     isSelectedViaDragHandle: any;
 }>;
+export declare const getBlockControlsMeta: (tr: ReadonlyTransaction) => BlockControlsMeta | undefined;

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

@@ -1,8 +1,8 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { type ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import { type EditorState, NodeSelection, TextSelection, type Transaction, type Selection } from '@atlaskit/editor-prosemirror/state';
+import { type Node as PMNode, type ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import { type EditorState, NodeSelection, type Selection, TextSelection, type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { BlockControlsPlugin } from '../../blockControlsPluginType';
-export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize: number) => {
+export declare const getInlineNodePos: (doc: PMNode, start: number, nodeSize: number) => {
     inlineNodeEndPos: number;
     inlineNodePos: number;
 };
@@ -20,3 +20,16 @@ export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: numb
 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;
+/**
+ * Collapses the given $from and $to resolved positions to the nearest valid selection range.
+ *
+ * Will retract the from and to positions to nearest inline positions at node boundaries only if needed.
+ *
+ * @param $from the resolved start position
+ * @param $to the resolved end position
+ * @returns An object containing the collapsed $from and $to resolved positions
+ */
+export declare const collapseToSelectionRange: ($from: ResolvedPos, $to: ResolvedPos) => {
+    $from: ResolvedPos;
+    $to: ResolvedPos;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.11.1",
+	"version": "7.11.3",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,7 +28,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.4.0",
+		"@atlaskit/adf-schema": "^51.5.1",
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/editor-plugin-accessibility-utils": "^6.0.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^14.4.0",
+		"@atlaskit/tmp-editor-statsig": "^14.5.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.10.0",
 		"@babel/runtime": "^7.0.0",
@@ -66,7 +66,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.36.0",
+		"@atlaskit/editor-common": "^110.38.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"