@atlaskit/editor-plugin-block-controls 7.7.1 → 7.7.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.7.3
+
+### Patch Changes
+
+- [`aa5913a5d4962`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aa5913a5d4962) -
+  [ux] EDITOR-2679 Fix multiselect collapsing issues for drag handle selections and block menu
+- Updated dependencies
+
+## 7.7.2
+
+### Patch Changes
+
+- [`a05464ea42678`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a05464ea42678) -
+  EDITOR-2791 bump adf-schema
+- Updated dependencies
+
 ## 7.7.1
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -20,6 +20,8 @@ var _moveNodeUtils = require("./editor-commands/utils/move-node-utils");
 var _firstNodeDecPlugin = require("./pm-plugins/first-node-dec-plugin");
 var _pmPlugin = require("./pm-plugins/interaction-tracking/pm-plugin");
 var _main = require("./pm-plugins/main");
+var _editorCommands = require("./pm-plugins/selection-preservation/editor-commands");
+var _pmPlugin2 = require("./pm-plugins/selection-preservation/pm-plugin");
 var _getSelection = require("./pm-plugins/utils/getSelection");
 var _blockMenu = _interopRequireDefault(require("./ui/block-menu"));
 var _dragHandleMenu = require("./ui/drag-handle-menu");
@@ -45,6 +47,12 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           plugin: _pmPlugin.createInteractionTrackingPlugin
         });
       }
+      if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+        pmPlugins.push({
+          name: 'blockControlsSelectionPreservationPlugin',
+          plugin: _pmPlugin2.createSelectionPreservationPlugin
+        });
+      }
 
       // platform_editor_controls note: quick insert rendering fixes
       if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
@@ -239,6 +247,12 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       },
       moveNodeWithBlockMenu: function moveNodeWithBlockMenu(direction) {
         return (0, _moveNodeWithBlockMenu2.moveNodeWithBlockMenu)(api, direction);
+      },
+      startPreservingSelection: function startPreservingSelection() {
+        return _editorCommands.startPreservingSelection;
+      },
+      stopPreservingSelection: function stopPreservingSelection() {
+        return _editorCommands.stopPreservingSelection;
       }
     },
     getSharedState: function getSharedState(editorState) {

package/dist/cjs/pm-plugins/main.js

@@ -771,8 +771,11 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
               api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
             }
             if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-              var _api$blockControls$sh2;
-              if (api !== null && api !== void 0 && (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh2 !== void 0 && _api$blockControls$sh2.isSelectedViaDragHandle) {
+              var _api$blockControls$sh2, _api$blockControls$sh3;
+              var isBlockMenuOpen = (api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.isMenuOpen) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
+              // when block menu is just open, and we press arrow keys, we want to use the arrow keys to navigate the block menu
+              // in this scenario, isSelectedViaDragHandle should not be set to false
+              if (api !== null && api !== void 0 && (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh3 !== void 0 && _api$blockControls$sh3.isSelectedViaDragHandle && !isBlockMenuOpen) {
                 api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
               }
             }
@@ -795,8 +798,11 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
               api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(_isDragHandle));
             }
             if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-              var _api$blockControls$sh3;
-              if (api !== null && api !== void 0 && (_api$blockControls$sh3 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh3 !== void 0 && _api$blockControls$sh3.isSelectedViaDragHandle) {
+              var _api$blockControls$sh4, _api$blockControls$sh5;
+              var _isBlockMenuOpen = (api === null || api === void 0 || (_api$blockControls$sh4 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh4 === void 0 ? void 0 : _api$blockControls$sh4.isMenuOpen) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true);
+              // when block menu is just open, and we press arrow keys, we want to use the arrow keys to navigate the block menu
+              // in this scenario, isSelectedViaDragHandle should not be set to false
+              if (api !== null && api !== void 0 && (_api$blockControls$sh5 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh5 !== void 0 && _api$blockControls$sh5.isSelectedViaDragHandle && !_isBlockMenuOpen) {
                 api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
               }
             }

package/dist/cjs/pm-plugins/selection-preservation/editor-commands.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stopPreservingSelection = exports.startPreservingSelection = void 0;
+var _pluginKey = require("./plugin-key");
+/**
+ * Start preserving the selection when a UI interaction requires it
+ *
+ * e.g., block menu open, drag-and-drop in progress
+ */
+var startPreservingSelection = exports.startPreservingSelection = function startPreservingSelection(_ref) {
+  var tr = _ref.tr;
+  var meta = {
+    type: 'startPreserving'
+  };
+  return tr.setMeta(_pluginKey.selectionPreservationPluginKey, meta);
+};
+
+/**
+ * Stop preserving the selection when a UI interaction completes
+ *
+ * e.g., block menu closed, drag-and-drop ended
+ */
+var stopPreservingSelection = exports.stopPreservingSelection = function stopPreservingSelection(_ref2) {
+  var tr = _ref2.tr;
+  var meta = {
+    type: 'stopPreserving'
+  };
+  return tr.setMeta(_pluginKey.selectionPreservationPluginKey, meta);
+};

package/dist/cjs/pm-plugins/selection-preservation/plugin-key.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectionPreservationPluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var selectionPreservationPluginKey = exports.selectionPreservationPluginKey = new _state.PluginKey('selectionPreservationPlugin');

package/dist/cjs/pm-plugins/selection-preservation/pm-plugin.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSelectionPreservationPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _editorCommands = require("./editor-commands");
+var _pluginKey = require("./plugin-key");
+var _utils = require("./utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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) { (0, _defineProperty2.default)(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; }
+/**
+ * Selection Preservation Plugin for ProseMirror Editor
+ *
+ * Solves a ProseMirror limitation where TextSelection cannot include positions at node boundaries
+ * (like media/images). When a selection spans text + media nodes, subsequent transactions cause
+ * ProseMirror to collapse the selection to the nearest inline position, excluding the media node.
+ * This is problematic for features like block menus and drag-and-drop that need stable multi-node
+ * selections while performing operations.
+ *
+ * The plugin works in three phases:
+ * (1) Explicitly save a selection via startPreservingSelection() when opening block menus or starting drag operations.
+ * (2) Map the saved selection through document changes to keep positions valid.
+ * (3) Detect when transactions collapse the selection and restore it via appendTransaction().
+ *
+ * Stops preserving via stopPreservingSelection() when the menu closes or operation completes.
+ *
+ * Commands: startPreservingSelection() to begin preservation, stopPreservingSelection() to end it.
+ *
+ * NOTE: Only use when the UI blocks user selection changes. For example: when a block menu overlay
+ * is open (editor becomes non-interactive), during drag-and-drop operations (user is mid-drag), or
+ * when modal dialogs are active. In these states, any selection changes are from ProseMirror's
+ * internal behavior (not user input) and should be prevented. Do not use during normal editing.
+ */
+var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugin = function createSelectionPreservationPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: _pluginKey.selectionPreservationPluginKey,
+    state: {
+      init: function init() {
+        return {
+          preservedSelection: undefined
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = (0, _utils.getSelectionPreservationMeta)(tr);
+        var newState = _objectSpread({}, pluginState);
+        if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'startPreserving') {
+          newState.preservedSelection = new _state.TextSelection(tr.selection.$from, tr.selection.$to);
+        } else if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'stopPreserving') {
+          newState.preservedSelection = undefined;
+        }
+        if (newState.preservedSelection && tr.docChanged) {
+          var mapped = new _state.TextSelection(newState.preservedSelection.$from, newState.preservedSelection.$to);
+          mapped.map(tr.doc, tr.mapping);
+          if (mapped.from >= 0 && mapped.to <= tr.doc.content.size && mapped.from !== mapped.to) {
+            newState.preservedSelection = mapped;
+          } else if (mapped.from === mapped.to) {
+            // If selection has collapsed to a cursor, e.g. after deleting the selection, stop preserving
+            newState.preservedSelection = undefined;
+          }
+        }
+        return newState;
+      }
+    },
+    appendTransaction: function appendTransaction(transactions, _oldState, newState) {
+      var pluginState = _pluginKey.selectionPreservationPluginKey.getState(newState);
+      var savedSel = pluginState === null || pluginState === void 0 ? void 0 : pluginState.preservedSelection;
+      if (!savedSel) {
+        return null;
+      }
+      if ((0, _utils.hasUserSelectionChange)(transactions)) {
+        // Auto-stop if user explicitly changes selection
+        return (0, _editorCommands.stopPreservingSelection)({
+          tr: newState.tr
+        });
+      }
+      var currSel = newState.selection;
+      var wasEmptySelection = savedSel.from === savedSel.to;
+      var selectionUnchanged = currSel.from === savedSel.from && currSel.to === savedSel.to;
+      var selectionInvalid = savedSel.from < 0 || savedSel.to > newState.doc.content.size;
+      if (wasEmptySelection || selectionUnchanged || selectionInvalid) {
+        return null;
+      }
+      try {
+        return newState.tr.setSelection(_state.TextSelection.create(newState.doc, savedSel.from, savedSel.to));
+      } catch (error) {
+        (0, _monitoring.logException)(error, {
+          location: 'editor-plugin-block-controls/SelectionPreservationPlugin'
+        });
+      }
+      return null;
+    }
+  });
+};

package/dist/cjs/pm-plugins/selection-preservation/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/pm-plugins/selection-preservation/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasUserSelectionChange = exports.getSelectionPreservationMeta = void 0;
+var _pluginKey = require("./plugin-key");
+/**
+ * Detects if any of the transactions include user-driven selection changes.
+ *
+ * @param transactions The list of transactions to check.
+ * @returns True if any transaction includes a user-driven selection change, otherwise false.
+ */
+var hasUserSelectionChange = exports.hasUserSelectionChange = function hasUserSelectionChange(transactions) {
+  return transactions.some(function (tr) {
+    return tr.getMeta('pointer') || tr.getMeta('uiEvent') || tr.getMeta('paste') || tr.getMeta('cut') || tr.getMeta('composition') ||
+    // IME input
+    // Keyboard events that change selection
+    tr.getMeta('addToHistory') && tr.selectionSet;
+  });
+};
+var getSelectionPreservationMeta = exports.getSelectionPreservationMeta = function getSelectionPreservationMeta(tr) {
+  return tr.getMeta(_pluginKey.selectionPreservationPluginKey);
+};