@atlaskit/editor-plugin-block-controls 7.2.2 → 7.2.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.2.4
+
+### Patch Changes
+
+- [`dc211dc1927b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dc211dc1927b5) -
+  [ux] ED-29232: Fixed issues with block menu for file
+- Updated dependencies
+
+## 7.2.3
+
+### Patch Changes
+
+- [`c02f3cc8759b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c02f3cc8759b5) -
+  [ux] Updates handleOnClick of a drag handle. When blockquote has a codeblock inside, we set
+  NodeSelection instead of range selection when blockquote's drag handle is clicked.
+
 ## 7.2.2
 
 ### Patch Changes

package/dist/cjs/editor-commands/utils/move-node-utils.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getShouldMoveNode = exports.getPosWhenMoveNodeUp = exports.getPosWhenMoveNodeDown = exports.getCurrentNodePosFromDragHandleSelection = exports.canMoveNodeUpOrDown = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _getNestedNodePosition = require("../../pm-plugins/utils/getNestedNodePosition");
@@ -21,6 +22,10 @@ var getCurrentNodePosFromDragHandleSelection = exports.getCurrentNodePosFromDrag
     // We only move table node if it's fully selected
     // to avoid shortcut collision with table drag and drop
     currentNodePos = (_findTable$pos = (_findTable = (0, _utils.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+  } else if (selection instanceof _state.NodeSelection && selection.node.type === schema.nodes.media && selection.node.attrs.type === 'file' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+    // When a file is selected, it is actually wrapped in a media group
+    // return the position of the media group , as the group is the node that we want to move up or down
+    currentNodePos = selection.$from.pos - 1;
   } else if (!(selection instanceof _selection.GapCursorSelection)) {
     // 2. caret cursor is inside the node
     // 3. the start of the selection is inside the 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.isHandleCorrelatedToSelection = exports.getSelection = exports.getInlineNodePos = void 0;
+exports.setCursorPositionAtMovedNode = exports.selectNode = exports.rootTaskListDepth = exports.rootListDepth = exports.isNodeWithCodeBlock = exports.isHandleCorrelatedToSelection = exports.getSelection = exports.getInlineNodePos = void 0;
 var _selection2 = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -33,6 +33,16 @@ var getInlineNodePos = exports.getInlineNodePos = function getInlineNodePos(tr,
     inlineNodeEndPos: inlineNodeEndPos
   };
 };
+var isNodeWithCodeBlock = exports.isNodeWithCodeBlock = function isNodeWithCodeBlock(tr, start, nodeSize) {
+  var $startPos = tr.doc.resolve(start);
+  var hasCodeBlock = false;
+  tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n) {
+    if (['codeBlock'].includes(n.type.name)) {
+      hasCodeBlock = true;
+    }
+  });
+  return hasCodeBlock;
+};
 var isNodeWithMediaOrExtension = function isNodeWithMediaOrExtension(tr, start, nodeSize) {
   var $startPos = tr.doc.resolve(start);
   var hasMediaOrExtension = false;

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

@@ -36,7 +36,7 @@ var _main = require("../pm-plugins/main");
 var _analytics2 = require("../pm-plugins/utils/analytics");
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
 var _getSelection = require("../pm-plugins/utils/getSelection");
-var _selection = require("../pm-plugins/utils/selection");
+var _selection2 = require("../pm-plugins/utils/selection");
 var _consts2 = require("./consts");
 var _dragPreview = require("./drag-preview");
 var _anchorName = require("./utils/anchor-name");
@@ -357,7 +357,20 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
       var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
       if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
-        tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
+        if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+          var node = tr.doc.nodeAt(startPos);
+          var nodeSize = node ? node.nodeSize : 1;
+          // It this will be required in other places, where selectNode is used, we should
+          // move it inside of the newGetSelection in the selectNode
+          if (nodeType === 'blockquote' && (0, _getSelection.isNodeWithCodeBlock)(tr, startPos, nodeSize)) {
+            var _selection = new _state.NodeSelection(tr.doc.resolve(startPos));
+            tr.setSelection(_selection);
+          } else {
+            tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
+          }
+        } else {
+          tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
+        }
         if (_consts2.BLOCK_MENU_ENABLED && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
           var _api$blockControls;
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
@@ -379,8 +392,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         }
       } else if (isTopLevelNode && $anchor.depth <= _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
         var _api$blockControls3;
-        var alignAnchorHeadToSel = (0, _selection.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
-        var selectionWithExpandedHead = (0, _selection.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
+        var alignAnchorHeadToSel = (0, _selection2.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
+        var selectionWithExpandedHead = (0, _selection2.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
         tr.setSelection(selectionWithExpandedHead);
         api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.setMultiSelectPositions()({
           tr: tr

package/dist/es2019/editor-commands/utils/move-node-utils.js

@@ -1,4 +1,5 @@
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { getNestedNodePosition } from '../../pm-plugins/utils/getNestedNodePosition';
@@ -16,6 +17,10 @@ export const getCurrentNodePosFromDragHandleSelection = ({
     // We only move table node if it's fully selected
     // to avoid shortcut collision with table drag and drop
     currentNodePos = (_findTable$pos = (_findTable = findTable(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+  } else if (selection instanceof NodeSelection && selection.node.type === schema.nodes.media && selection.node.attrs.type === 'file' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    // When a file is selected, it is actually wrapped in a media group
+    // return the position of the media group , as the group is the node that we want to move up or down
+    currentNodePos = selection.$from.pos - 1;
   } else if (!(selection instanceof GapCursorSelection)) {
     // 2. caret cursor is inside the node
     // 3. the start of the selection is inside the node

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

@@ -27,6 +27,16 @@ export const getInlineNodePos = (tr, start, nodeSize) => {
     inlineNodeEndPos
   };
 };
+export const isNodeWithCodeBlock = (tr, start, nodeSize) => {
+  const $startPos = tr.doc.resolve(start);
+  let hasCodeBlock = false;
+  tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, n => {
+    if (['codeBlock'].includes(n.type.name)) {
+      hasCodeBlock = true;
+    }
+  });
+  return hasCodeBlock;
+};
 const isNodeWithMediaOrExtension = (tr, start, nodeSize) => {
   const $startPos = tr.doc.resolve(start);
   let hasMediaOrExtension = false;

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

@@ -15,7 +15,7 @@ import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaK
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { tableControlsSpacing, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorTableToolbarSize, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles/consts';
 import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
@@ -33,7 +33,7 @@ import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { key } from '../pm-plugins/main';
 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 { isHandleCorrelatedToSelection, isNodeWithCodeBlock, selectNode } from '../pm-plugins/utils/getSelection';
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
 import { BLOCK_MENU_ENABLED, 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';
@@ -337,7 +337,20 @@ export const DragHandle = ({
       const mSelect = api === null || api === void 0 ? void 0 : (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
       const $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
       if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
-        tr = selectNode(tr, startPos, nodeType);
+        if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+          const node = tr.doc.nodeAt(startPos);
+          const nodeSize = node ? node.nodeSize : 1;
+          // It this will be required in other places, where selectNode is used, we should
+          // move it inside of the newGetSelection in the selectNode
+          if (nodeType === 'blockquote' && isNodeWithCodeBlock(tr, startPos, nodeSize)) {
+            const selection = new NodeSelection(tr.doc.resolve(startPos));
+            tr.setSelection(selection);
+          } else {
+            tr = selectNode(tr, startPos, nodeType);
+          }
+        } else {
+          tr = selectNode(tr, startPos, nodeType);
+        }
         if (BLOCK_MENU_ENABLED && editorExperiment('platform_editor_controls', 'variant1')) {
           var _api$blockControls;
           api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu({

package/dist/esm/editor-commands/utils/move-node-utils.js

@@ -1,4 +1,5 @@
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { getNestedNodePosition } from '../../pm-plugins/utils/getNestedNodePosition';
@@ -15,6 +16,10 @@ export var getCurrentNodePosFromDragHandleSelection = function getCurrentNodePos
     // We only move table node if it's fully selected
     // to avoid shortcut collision with table drag and drop
     currentNodePos = (_findTable$pos = (_findTable = findTable(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+  } else if (selection instanceof NodeSelection && selection.node.type === schema.nodes.media && selection.node.attrs.type === 'file' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    // When a file is selected, it is actually wrapped in a media group
+    // return the position of the media group , as the group is the node that we want to move up or down
+    currentNodePos = selection.$from.pos - 1;
   } else if (!(selection instanceof GapCursorSelection)) {
     // 2. caret cursor is inside the node
     // 3. the start of the selection is inside the node

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

@@ -27,6 +27,16 @@ export var getInlineNodePos = function getInlineNodePos(tr, start, nodeSize) {
     inlineNodeEndPos: inlineNodeEndPos
   };
 };
+export var isNodeWithCodeBlock = function isNodeWithCodeBlock(tr, start, nodeSize) {
+  var $startPos = tr.doc.resolve(start);
+  var hasCodeBlock = false;
+  tr.doc.nodesBetween($startPos.pos, $startPos.pos + nodeSize, function (n) {
+    if (['codeBlock'].includes(n.type.name)) {
+      hasCodeBlock = true;
+    }
+  });
+  return hasCodeBlock;
+};
 var isNodeWithMediaOrExtension = function isNodeWithMediaOrExtension(tr, start, nodeSize) {
   var $startPos = tr.doc.resolve(start);
   var hasMediaOrExtension = false;

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

@@ -20,7 +20,7 @@ import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaK
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { tableControlsSpacing, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorTableToolbarSize, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles/consts';
 import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
@@ -38,7 +38,7 @@ import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { key } from '../pm-plugins/main';
 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 { isHandleCorrelatedToSelection, isNodeWithCodeBlock, selectNode } from '../pm-plugins/utils/getSelection';
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
 import { BLOCK_MENU_ENABLED, 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';
@@ -354,7 +354,20 @@ export var DragHandle = function DragHandle(_ref) {
       var mSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
       var $anchor = (mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) !== undefined ? tr.doc.resolve(mSelect === null || mSelect === void 0 ? void 0 : mSelect.anchor) : tr.selection.$anchor;
       if (!isMultiSelect || tr.selection.empty || !e.shiftKey) {
-        tr = selectNode(tr, startPos, nodeType);
+        if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+          var node = tr.doc.nodeAt(startPos);
+          var nodeSize = node ? node.nodeSize : 1;
+          // It this will be required in other places, where selectNode is used, we should
+          // move it inside of the newGetSelection in the selectNode
+          if (nodeType === 'blockquote' && isNodeWithCodeBlock(tr, startPos, nodeSize)) {
+            var _selection = new NodeSelection(tr.doc.resolve(startPos));
+            tr.setSelection(_selection);
+          } else {
+            tr = selectNode(tr, startPos, nodeType);
+          }
+        } else {
+          tr = selectNode(tr, startPos, nodeType);
+        }
         if (BLOCK_MENU_ENABLED && editorExperiment('platform_editor_controls', 'variant1')) {
           var _api$blockControls;
           api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({

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

@@ -4,6 +4,7 @@ export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize
     inlineNodeEndPos: number;
     inlineNodePos: number;
 };
+export declare const isNodeWithCodeBlock: (tr: Transaction, start: number, nodeSize: number) => boolean;
 export declare const getSelection: (tr: Transaction, start: number) => false | NodeSelection | TextSelection;
 export declare const selectNode: (tr: Transaction, start: number, nodeType: string) => Transaction;
 export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: number) => Transaction;

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

@@ -4,6 +4,7 @@ export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize
     inlineNodeEndPos: number;
     inlineNodePos: number;
 };
+export declare const isNodeWithCodeBlock: (tr: Transaction, start: number, nodeSize: number) => boolean;
 export declare const getSelection: (tr: Transaction, start: number) => false | NodeSelection | TextSelection;
 export declare const selectNode: (tr: Transaction, start: number, nodeType: string) => Transaction;
 export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: number) => Transaction;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.2.2",
+	"version": "7.2.4",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,14 +37,14 @@
 		"@atlaskit/editor-plugin-limited-mode": "^3.0.0",
 		"@atlaskit/editor-plugin-metrics": "^7.0.0",
 		"@atlaskit/editor-plugin-quick-insert": "^6.0.0",
-		"@atlaskit/editor-plugin-selection": "^6.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^6.1.0",
+		"@atlaskit/editor-plugin-selection": "^6.1.0",
+		"@atlaskit/editor-plugin-type-ahead": "^6.3.0",
 		"@atlaskit/editor-plugin-user-intent": "^4.0.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^28.3.0",
+		"@atlaskit/icon": "^28.4.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.0.0",
+		"@atlaskit/tmp-editor-statsig": "^13.4.0",
 		"@atlaskit/tokens": "^6.4.0",
 		"@atlaskit/tooltip": "^20.5.0",
 		"@babel/runtime": "^7.0.0",
@@ -64,7 +64,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.4.0",
+		"@atlaskit/editor-common": "^110.7.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"