@atlaskit/editor-plugin-block-controls 7.17.2 → 7.18.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.18.1
+
+### Patch Changes
+
+- [`7b47062997f9b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7b47062997f9b) -
+  EDITOR-3793 Stop preserving selection on click into editor
+
+## 7.18.0
+
+### Minor Changes
+
+- [`6668fda9b38d7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6668fda9b38d7) -
+  ED-29716 add limited mode support to native anchor
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.17.2
 
 ### Patch Changes

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

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
+var _nodeAnchor = require("@atlaskit/editor-common/node-anchor");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -738,10 +739,17 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
           }
         },
         mouseover: function mouseover(view, event) {
-          var _api$limitedMode6;
+          var _api$limitedMode6, _getNodeIdProvider;
           if (api !== null && api !== void 0 && (_api$limitedMode6 = api.limitedMode) !== null && _api$limitedMode6 !== void 0 && (_api$limitedMode6 = _api$limitedMode6.sharedState.currentState()) !== null && _api$limitedMode6 !== void 0 && _api$limitedMode6.enabled) {
             return;
           }
+
+          // another layer of protection to prevent handling mouseover
+          // when native anchor with dnd is enabled in limited mode
+          // in case there are descripancies between getNodeIdProvider limited mode state
+          if ((_getNodeIdProvider = (0, _nodeAnchor.getNodeIdProvider)(view)) !== null && _getNodeIdProvider !== void 0 && _getNodeIdProvider.isLimitedMode() && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_native_anchor_patch_2')) {
+            return;
+          }
           (0, _handleMouseOver.handleMouseOver)(view, event, api);
           return false;
         },

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

@@ -8,6 +8,7 @@ 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 _styles = require("@atlaskit/editor-common/styles");
 var _selection = require("../utils/selection");
 var _editorCommands = require("./editor-commands");
 var _pluginKey = require("./plugin-key");
@@ -41,6 +42,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 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.
+ *
+ * https://hello.atlassian.net/wiki/spaces/egcuc/pages/6170822503/Block+Menu+Solution+for+multi-select+and+selection+preservation
  */
 var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugin = function createSelectionPreservationPlugin(api) {
   return function () {
@@ -56,7 +59,7 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
           var meta = (0, _utils.getSelectionPreservationMeta)(tr);
           var newState = _objectSpread({}, pluginState);
           if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'startPreserving') {
-            newState.preservedSelection = tr.selection;
+            newState.preservedSelection = (0, _selection.mapPreservedSelection)(tr.selection, tr);
           } else if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'stopPreserving') {
             newState.preservedSelection = undefined;
           }
@@ -94,11 +97,34 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
         return null;
       },
       props: {
-        handleKeyDown: function handleKeyDown(view, event) {
-          var _api$userIntent;
+        handleClick: function handleClick(view, pos, event) {
           var _ref = _pluginKey.selectionPreservationPluginKey.getState(view.state) || {},
             preservedSelection = _ref.preservedSelection;
 
+          // If there is no current preserved selection, do nothing
+          if (!preservedSelection) {
+            return false;
+          }
+          var clickedDragHandle = event.target instanceof HTMLElement && event.target.closest(_styles.DRAG_HANDLE_SELECTOR);
+
+          // When clicking a drag handle we continue preserving the selection
+          if (!clickedDragHandle) {
+            return false;
+          }
+
+          // Otherwise clicking anywhere else in the editor stops preserving the selection
+          var tr = view.state.tr;
+          (0, _editorCommands.stopPreservingSelection)({
+            tr: tr
+          });
+          view.dispatch(tr);
+          return false;
+        },
+        handleKeyDown: function handleKeyDown(view, event) {
+          var _api$userIntent;
+          var _ref2 = _pluginKey.selectionPreservationPluginKey.getState(view.state) || {},
+            preservedSelection = _ref2.preservedSelection;
+
           // If there is no current preserved selection, do nothing
           if (!preservedSelection) {
             return false;

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

@@ -97,19 +97,22 @@ var mapPreservedSelection = exports.mapPreservedSelection = function mapPreserve
     var to = mapping.map(selection.to);
     var isSelectionEmpty = from === to;
     var wasSelectionEmpty = selection.from === selection.to;
-    if (isSelectionEmpty) {
-      if (!wasSelectionEmpty) {
-        // If selection has become empty i.e. content has been deleted, stop preserving
-        return undefined;
-      }
-      // When preserving a cursor selection, just map the position without expanding
-      return new _state.TextSelection(tr.doc.resolve(from));
+    if (isSelectionEmpty && !wasSelectionEmpty) {
+      // If selection has become empty i.e. content has been deleted, stop preserving
+      return undefined;
     }
-
     // expand the text selection range to block boundaries, so as document changes occur the
     // selection always includes whole nodes
     var expanded = (0, _selection.expandToBlockRange)(tr.doc.resolve(from), tr.doc.resolve(to));
 
+    // If after expanding the selection it is still empty, return a single cursor selection at 'from'
+    var nodeAfter = expanded.$from.nodeAfter;
+    var nodeBefore = expanded.$to.nodeBefore;
+    var expandedSelectionEmpty = nodeAfter === nodeBefore && (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.content.size) === 0;
+    if (isSelectionEmpty && expandedSelectionEmpty) {
+      return _state.TextSelection.create(tr.doc, from);
+    }
+
     // collapse the expanded range to a valid selection range
     var _collapseToSelectionR = (0, _getSelection.collapseToSelectionRange)(expanded.$from, expanded.$to),
       $from = _collapseToSelectionR.$from,

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

@@ -1,6 +1,7 @@
 import rafSchedule from 'raf-schd';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
+import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
 import { isMeasuring, startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
@@ -742,10 +743,17 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           }
         },
         mouseover: (view, event) => {
-          var _api$limitedMode6, _api$limitedMode6$sha;
+          var _api$limitedMode6, _api$limitedMode6$sha, _getNodeIdProvider;
           if (api !== null && api !== void 0 && (_api$limitedMode6 = api.limitedMode) !== null && _api$limitedMode6 !== void 0 && (_api$limitedMode6$sha = _api$limitedMode6.sharedState.currentState()) !== null && _api$limitedMode6$sha !== void 0 && _api$limitedMode6$sha.enabled) {
             return;
           }
+
+          // another layer of protection to prevent handling mouseover
+          // when native anchor with dnd is enabled in limited mode
+          // in case there are descripancies between getNodeIdProvider limited mode state
+          if ((_getNodeIdProvider = getNodeIdProvider(view)) !== null && _getNodeIdProvider !== void 0 && _getNodeIdProvider.isLimitedMode() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && fg('platform_editor_native_anchor_patch_2')) {
+            return;
+          }
           handleMouseOver(view, event, api);
           return false;
         },

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

@@ -1,5 +1,6 @@
 import { logException } from '@atlaskit/editor-common/monitoring';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
 import { mapPreservedSelection } from '../utils/selection';
 import { stopPreservingSelection } from './editor-commands';
 import { selectionPreservationPluginKey } from './plugin-key';
@@ -32,6 +33,8 @@ import { getSelectionPreservationMeta, hasUserSelectionChange } from './utils';
  * 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.
+ *
+ * https://hello.atlassian.net/wiki/spaces/egcuc/pages/6170822503/Block+Menu+Solution+for+multi-select+and+selection+preservation
  */
 export const createSelectionPreservationPlugin = api => () => {
   return new SafePlugin({
@@ -48,7 +51,7 @@ export const createSelectionPreservationPlugin = api => () => {
           ...pluginState
         };
         if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'startPreserving') {
-          newState.preservedSelection = tr.selection;
+          newState.preservedSelection = mapPreservedSelection(tr.selection, tr);
         } else if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'stopPreserving') {
           newState.preservedSelection = undefined;
         }
@@ -86,6 +89,30 @@ export const createSelectionPreservationPlugin = api => () => {
       return null;
     },
     props: {
+      handleClick: (view, pos, event) => {
+        const {
+          preservedSelection
+        } = selectionPreservationPluginKey.getState(view.state) || {};
+
+        // If there is no current preserved selection, do nothing
+        if (!preservedSelection) {
+          return false;
+        }
+        const clickedDragHandle = event.target instanceof HTMLElement && event.target.closest(DRAG_HANDLE_SELECTOR);
+
+        // When clicking a drag handle we continue preserving the selection
+        if (!clickedDragHandle) {
+          return false;
+        }
+
+        // Otherwise clicking anywhere else in the editor stops preserving the selection
+        const tr = view.state.tr;
+        stopPreservingSelection({
+          tr
+        });
+        view.dispatch(tr);
+        return false;
+      },
       handleKeyDown: (view, event) => {
         var _api$userIntent, _api$userIntent$share;
         const {

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

@@ -93,19 +93,22 @@ export const mapPreservedSelection = (selection, tr) => {
     const to = mapping.map(selection.to);
     const isSelectionEmpty = from === to;
     const wasSelectionEmpty = selection.from === selection.to;
-    if (isSelectionEmpty) {
-      if (!wasSelectionEmpty) {
-        // If selection has become empty i.e. content has been deleted, stop preserving
-        return undefined;
-      }
-      // When preserving a cursor selection, just map the position without expanding
-      return new TextSelection(tr.doc.resolve(from));
+    if (isSelectionEmpty && !wasSelectionEmpty) {
+      // If selection has become empty i.e. content has been deleted, stop preserving
+      return undefined;
     }
-
     // expand the text selection range to block boundaries, so as document changes occur the
     // selection always includes whole nodes
     const expanded = expandToBlockRange(tr.doc.resolve(from), tr.doc.resolve(to));
 
+    // If after expanding the selection it is still empty, return a single cursor selection at 'from'
+    const nodeAfter = expanded.$from.nodeAfter;
+    const nodeBefore = expanded.$to.nodeBefore;
+    const expandedSelectionEmpty = nodeAfter === nodeBefore && (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.content.size) === 0;
+    if (isSelectionEmpty && expandedSelectionEmpty) {
+      return TextSelection.create(tr.doc, from);
+    }
+
     // collapse the expanded range to a valid selection range
     const {
       $from,

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

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import rafSchedule from 'raf-schd';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
+import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
 import { isMeasuring, startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
@@ -732,10 +733,17 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
           }
         },
         mouseover: function mouseover(view, event) {
-          var _api$limitedMode6;
+          var _api$limitedMode6, _getNodeIdProvider;
           if (api !== null && api !== void 0 && (_api$limitedMode6 = api.limitedMode) !== null && _api$limitedMode6 !== void 0 && (_api$limitedMode6 = _api$limitedMode6.sharedState.currentState()) !== null && _api$limitedMode6 !== void 0 && _api$limitedMode6.enabled) {
             return;
           }
+
+          // another layer of protection to prevent handling mouseover
+          // when native anchor with dnd is enabled in limited mode
+          // in case there are descripancies between getNodeIdProvider limited mode state
+          if ((_getNodeIdProvider = getNodeIdProvider(view)) !== null && _getNodeIdProvider !== void 0 && _getNodeIdProvider.isLimitedMode() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && fg('platform_editor_native_anchor_patch_2')) {
+            return;
+          }
           handleMouseOver(view, event, api);
           return false;
         },

package/dist/esm/pm-plugins/selection-preservation/pm-plugin.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 { logException } from '@atlaskit/editor-common/monitoring';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
 import { mapPreservedSelection } from '../utils/selection';
 import { stopPreservingSelection } from './editor-commands';
 import { selectionPreservationPluginKey } from './plugin-key';
@@ -35,6 +36,8 @@ import { getSelectionPreservationMeta, hasUserSelectionChange } from './utils';
  * 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.
+ *
+ * https://hello.atlassian.net/wiki/spaces/egcuc/pages/6170822503/Block+Menu+Solution+for+multi-select+and+selection+preservation
  */
 export var createSelectionPreservationPlugin = function createSelectionPreservationPlugin(api) {
   return function () {
@@ -50,7 +53,7 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
           var meta = getSelectionPreservationMeta(tr);
           var newState = _objectSpread({}, pluginState);
           if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'startPreserving') {
-            newState.preservedSelection = tr.selection;
+            newState.preservedSelection = mapPreservedSelection(tr.selection, tr);
           } else if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'stopPreserving') {
             newState.preservedSelection = undefined;
           }
@@ -88,11 +91,34 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
         return null;
       },
       props: {
-        handleKeyDown: function handleKeyDown(view, event) {
-          var _api$userIntent;
+        handleClick: function handleClick(view, pos, event) {
           var _ref = selectionPreservationPluginKey.getState(view.state) || {},
             preservedSelection = _ref.preservedSelection;
 
+          // If there is no current preserved selection, do nothing
+          if (!preservedSelection) {
+            return false;
+          }
+          var clickedDragHandle = event.target instanceof HTMLElement && event.target.closest(DRAG_HANDLE_SELECTOR);
+
+          // When clicking a drag handle we continue preserving the selection
+          if (!clickedDragHandle) {
+            return false;
+          }
+
+          // Otherwise clicking anywhere else in the editor stops preserving the selection
+          var tr = view.state.tr;
+          stopPreservingSelection({
+            tr: tr
+          });
+          view.dispatch(tr);
+          return false;
+        },
+        handleKeyDown: function handleKeyDown(view, event) {
+          var _api$userIntent;
+          var _ref2 = selectionPreservationPluginKey.getState(view.state) || {},
+            preservedSelection = _ref2.preservedSelection;
+
           // If there is no current preserved selection, do nothing
           if (!preservedSelection) {
             return false;

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

@@ -91,19 +91,22 @@ export var mapPreservedSelection = function mapPreservedSelection(selection, tr)
     var to = mapping.map(selection.to);
     var isSelectionEmpty = from === to;
     var wasSelectionEmpty = selection.from === selection.to;
-    if (isSelectionEmpty) {
-      if (!wasSelectionEmpty) {
-        // If selection has become empty i.e. content has been deleted, stop preserving
-        return undefined;
-      }
-      // When preserving a cursor selection, just map the position without expanding
-      return new TextSelection(tr.doc.resolve(from));
+    if (isSelectionEmpty && !wasSelectionEmpty) {
+      // If selection has become empty i.e. content has been deleted, stop preserving
+      return undefined;
     }
-
     // expand the text selection range to block boundaries, so as document changes occur the
     // selection always includes whole nodes
     var expanded = expandToBlockRange(tr.doc.resolve(from), tr.doc.resolve(to));
 
+    // If after expanding the selection it is still empty, return a single cursor selection at 'from'
+    var nodeAfter = expanded.$from.nodeAfter;
+    var nodeBefore = expanded.$to.nodeBefore;
+    var expandedSelectionEmpty = nodeAfter === nodeBefore && (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.content.size) === 0;
+    if (isSelectionEmpty && expandedSelectionEmpty) {
+      return TextSelection.create(tr.doc, from);
+    }
+
     // collapse the expanded range to a valid selection range
     var _collapseToSelectionR = collapseToSelectionRange(expanded.$from, expanded.$to),
       $from = _collapseToSelectionR.$from,

package/dist/types/pm-plugins/selection-preservation/pm-plugin.d.ts

@@ -29,5 +29,7 @@ import type { SelectionPreservationPluginState } from './types';
  * 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.
+ *
+ * https://hello.atlassian.net/wiki/spaces/egcuc/pages/6170822503/Block+Menu+Solution+for+multi-select+and+selection+preservation
  */
 export declare const createSelectionPreservationPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => () => SafePlugin<SelectionPreservationPluginState>;

package/dist/types-ts4.5/pm-plugins/selection-preservation/pm-plugin.d.ts

@@ -29,5 +29,7 @@ import type { SelectionPreservationPluginState } from './types';
  * 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.
+ *
+ * https://hello.atlassian.net/wiki/spaces/egcuc/pages/6170822503/Block+Menu+Solution+for+multi-select+and+selection+preservation
  */
 export declare const createSelectionPreservationPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined) => () => SafePlugin<SelectionPreservationPluginState>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.17.2",
+	"version": "7.18.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,7 +35,7 @@
 		"@atlaskit/editor-plugin-editor-disabled": "^6.1.0",
 		"@atlaskit/editor-plugin-feature-flags": "^5.0.0",
 		"@atlaskit/editor-plugin-interaction": "^11.0.0",
-		"@atlaskit/editor-plugin-limited-mode": "^3.1.0",
+		"@atlaskit/editor-plugin-limited-mode": "^3.2.0",
 		"@atlaskit/editor-plugin-metrics": "^7.1.0",
 		"@atlaskit/editor-plugin-quick-insert": "^6.2.0",
 		"@atlaskit/editor-plugin-selection": "^6.1.0",
@@ -66,7 +66,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.48.0",
+		"@atlaskit/editor-common": "^110.49.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -151,6 +151,9 @@
 		},
 		"platform_editor_native_anchor_patch_1": {
 			"type": "boolean"
+		},
+		"platform_editor_native_anchor_patch_2": {
+			"type": "boolean"
 		}
 	}
 }