@atlaskit/editor-plugin-block-controls 7.18.0 → 7.18.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.18.2
+
+### Patch Changes
+
+- [`275b01c2a180f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/275b01c2a180f) -
+  EDITOR-3911 fix key handling while preserving selection
+
+## 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

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;
@@ -111,15 +137,18 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
           }
           var blockMenuOpen = (api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'blockMenuOpen';
 
-          // When block menu isn't open and user presses any key, stop preserving selection
-          if (!blockMenuOpen) {
-            var tr = view.state.tr;
-            (0, _editorCommands.stopPreservingSelection)({
-              tr: tr
-            });
-            view.dispatch(tr);
-            return false;
+          // When block menu is open, prevent all key events to avoid changing selection or editing content
+          if (blockMenuOpen) {
+            return true;
           }
+
+          // When block menu isn't open and user presses any key, stop preserving selection
+          var tr = view.state.tr;
+          (0, _editorCommands.stopPreservingSelection)({
+            tr: tr
+          });
+          view.dispatch(tr);
+          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/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 {
@@ -104,15 +131,18 @@ export const createSelectionPreservationPlugin = api => () => {
         }
         const blockMenuOpen = (api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : (_api$userIntent$share = _api$userIntent.sharedState.currentState()) === null || _api$userIntent$share === void 0 ? void 0 : _api$userIntent$share.currentUserIntent) === 'blockMenuOpen';
 
-        // When block menu isn't open and user presses any key, stop preserving selection
-        if (!blockMenuOpen) {
-          const tr = view.state.tr;
-          stopPreservingSelection({
-            tr
-          });
-          view.dispatch(tr);
-          return false;
+        // When block menu is open, prevent all key events to avoid changing selection or editing content
+        if (blockMenuOpen) {
+          return true;
         }
+
+        // When block menu isn't open and user presses any key, stop preserving selection
+        const tr = view.state.tr;
+        stopPreservingSelection({
+          tr
+        });
+        view.dispatch(tr);
+        return false;
       }
     }
   });

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/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;
@@ -105,15 +131,18 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
           }
           var blockMenuOpen = (api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'blockMenuOpen';
 
-          // When block menu isn't open and user presses any key, stop preserving selection
-          if (!blockMenuOpen) {
-            var tr = view.state.tr;
-            stopPreservingSelection({
-              tr: tr
-            });
-            view.dispatch(tr);
-            return false;
+          // When block menu is open, prevent all key events to avoid changing selection or editing content
+          if (blockMenuOpen) {
+            return true;
           }
+
+          // When block menu isn't open and user presses any key, stop preserving selection
+          var tr = view.state.tr;
+          stopPreservingSelection({
+            tr: tr
+          });
+          view.dispatch(tr);
+          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.18.0",
+	"version": "7.18.2",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",