@atlaskit/editor-plugin-selection 2.1.2 → 2.1.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-selection
 
+## 2.1.4
+
+### Patch Changes
+
+- [#132086](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132086)
+  [`0c61b5cc7a789`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0c61b5cc7a789) -
+  [ux] ED-27255 Fix bug which prevented the gap cursor from appearing sometimes when a table is
+  nested in another table, layout or expand
+
+## 2.1.3
+
+### Patch Changes
+
+- [#129221](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129221)
+  [`aad9678b8d08a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aad9678b8d08a) -
+  [ux] ED-25490 Fixes an issue where it was not possible to select block nodes at the top of the
+  document if they contain content.
+- Updated dependencies
+
 ## 2.1.2
 
 ### Patch Changes

package/dist/cjs/pm-plugins/events/keydown.js

@@ -137,6 +137,15 @@ function createOnKeydown(_ref4) {
     if (!(event instanceof KeyboardEvent)) {
       return false;
     }
+
+    // Override the default behaviour to make sure that the selection always extends to
+    // the start of the document and not just the first inline position.
+    if (event.shiftKey && event.metaKey && event.key === 'ArrowUp') {
+      var selection = _state.TextSelection.create(view.state.doc, view.state.selection.$anchor.pos, 0);
+      view.dispatch(view.state.tr.setSelection(selection));
+      event.preventDefault();
+      return true;
+    }
     if (isSelectionLineShortcutWhenCursorIsInsideInlineNode(view, event)) {
       return true;
     }

package/dist/cjs/pm-plugins/events/mouseout.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isValidSelection = isValidSelection;
+exports.onMouseOut = onMouseOut;
+var _state = require("@atlaskit/editor-prosemirror/state");
+function isValidSelection(selection) {
+  if (selection.empty) {
+    return false;
+  }
+  var $anchor = selection.$anchor,
+    $head = selection.$head;
+
+  // Head must be at the start of its parent node's content
+  if ($head.parentOffset !== 0) {
+    return false;
+  }
+
+  // Head must be nested (e.g., in a panel > paragraph, not directly in doc)
+  if ($head.depth <= 1) {
+    return false;
+  }
+
+  // Head must be in the first top-level block (before depth 1 is 0)
+  if ($head.before(1) !== 0) {
+    return false;
+  }
+
+  // Selection must not span within a shared deeper structure
+  if ($head.sharedDepth($anchor.pos) !== 0) {
+    return false;
+  }
+
+  // Head must be in the first block at every level
+  var isFirstBlockInTree = true;
+  for (var i = $head.depth - 1; i >= 0; i--) {
+    if ($head.index(i) !== 0) {
+      isFirstBlockInTree = false;
+      break;
+    }
+  }
+  if (!isFirstBlockInTree) {
+    return false;
+  }
+  return true;
+}
+function onMouseOut(view, event) {
+  // Only trigger during a mouse drag
+  if (event.buttons === 0) {
+    return false;
+  }
+  if (view.state.selection instanceof _state.TextSelection && isValidSelection(view.state.selection)) {
+    // Set selection with head at document start (position 0)
+    var selection = new _state.TextSelection(view.state.doc.resolve(view.state.selection.$anchor.pos), view.state.doc.resolve(0));
+    view.dispatch(view.state.tr.setSelection(selection));
+    return true;
+  }
+  return false;
+}

package/dist/cjs/pm-plugins/gap-cursor/utils/place-gap-cursor.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.toDOM = void 0;
 var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
 var _selection = require("@atlaskit/editor-common/selection");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../utils");
 /**
  * We have a couple of nodes that require us to compute style
@@ -90,7 +91,10 @@ var toDOM = exports.toDOM = function toDOM(view, getPos) {
     if (nodeStart !== 0 || layoutMode || (node === null || node === void 0 ? void 0 : node.type.name) === 'table') {
       gapCursor.style.marginTop = style.getPropertyValue('margin-top');
     }
-    if (layoutMode) {
+
+    // Tables nested inside other elements such as layouts, expands and other tables do not have fixed width
+    var isNestedTable = (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_gap_cursor') ? (node === null || node === void 0 ? void 0 : node.type.name) === 'table' && selection.$to.depth > 0 : false;
+    if (layoutMode && !isNestedTable) {
       gapCursor.setAttribute('layout', layoutMode);
       var breakoutModeStyle = (0, _utils.getComputedStyleForLayoutMode)(dom, node, style);
       gapCursor.style.width = "".concat(measureWidth(breakoutModeStyle), "px");

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

@@ -11,6 +11,7 @@ var _types = require("../types");
 var _actions = require("./actions");
 var _createSelectionBetween = require("./events/create-selection-between");
 var _keydown = require("./events/keydown");
+var _mouseout = require("./events/mouseout");
 var _pluginFactory = require("./plugin-factory");
 var _utils = require("./utils");
 var getInitialState = exports.getInitialState = function getInitialState(state) {
@@ -72,7 +73,10 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
       handleDOMEvents: {
         keydown: (0, _keydown.createOnKeydown)({
           __livePage: options.__livePage
-        })
+        }),
+        // Without this event, it is not possible to click and drag to select the first node in the
+        // document if the node is a block with content (e.g. a panel with a paragraph inside).
+        mouseout: _mouseout.onMouseOut
       }
     }
   });

package/dist/es2019/pm-plugins/events/keydown.js

@@ -135,6 +135,15 @@ export function createOnKeydown({
     if (!(event instanceof KeyboardEvent)) {
       return false;
     }
+
+    // Override the default behaviour to make sure that the selection always extends to
+    // the start of the document and not just the first inline position.
+    if (event.shiftKey && event.metaKey && event.key === 'ArrowUp') {
+      const selection = TextSelection.create(view.state.doc, view.state.selection.$anchor.pos, 0);
+      view.dispatch(view.state.tr.setSelection(selection));
+      event.preventDefault();
+      return true;
+    }
     if (isSelectionLineShortcutWhenCursorIsInsideInlineNode(view, event)) {
       return true;
     }

package/dist/es2019/pm-plugins/events/mouseout.js

@@ -0,0 +1,56 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export function isValidSelection(selection) {
+  if (selection.empty) {
+    return false;
+  }
+  const {
+    $anchor,
+    $head
+  } = selection;
+
+  // Head must be at the start of its parent node's content
+  if ($head.parentOffset !== 0) {
+    return false;
+  }
+
+  // Head must be nested (e.g., in a panel > paragraph, not directly in doc)
+  if ($head.depth <= 1) {
+    return false;
+  }
+
+  // Head must be in the first top-level block (before depth 1 is 0)
+  if ($head.before(1) !== 0) {
+    return false;
+  }
+
+  // Selection must not span within a shared deeper structure
+  if ($head.sharedDepth($anchor.pos) !== 0) {
+    return false;
+  }
+
+  // Head must be in the first block at every level
+  let isFirstBlockInTree = true;
+  for (let i = $head.depth - 1; i >= 0; i--) {
+    if ($head.index(i) !== 0) {
+      isFirstBlockInTree = false;
+      break;
+    }
+  }
+  if (!isFirstBlockInTree) {
+    return false;
+  }
+  return true;
+}
+export function onMouseOut(view, event) {
+  // Only trigger during a mouse drag
+  if (event.buttons === 0) {
+    return false;
+  }
+  if (view.state.selection instanceof TextSelection && isValidSelection(view.state.selection)) {
+    // Set selection with head at document start (position 0)
+    const selection = new TextSelection(view.state.doc.resolve(view.state.selection.$anchor.pos), view.state.doc.resolve(0));
+    view.dispatch(view.state.tr.setSelection(selection));
+    return true;
+  }
+  return false;
+}

package/dist/es2019/pm-plugins/gap-cursor/utils/place-gap-cursor.js

@@ -1,4 +1,5 @@
 import { Side } from '@atlaskit/editor-common/selection';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getComputedStyleForLayoutMode, getLayoutModeFromTargetNode, isLeftCursor } from '../utils';
 
 /**
@@ -81,7 +82,10 @@ export const toDOM = (view, getPos) => {
     if (nodeStart !== 0 || layoutMode || (node === null || node === void 0 ? void 0 : node.type.name) === 'table') {
       gapCursor.style.marginTop = style.getPropertyValue('margin-top');
     }
-    if (layoutMode) {
+
+    // Tables nested inside other elements such as layouts, expands and other tables do not have fixed width
+    const isNestedTable = fg('platform_editor_nested_tables_gap_cursor') ? (node === null || node === void 0 ? void 0 : node.type.name) === 'table' && selection.$to.depth > 0 : false;
+    if (layoutMode && !isNestedTable) {
       gapCursor.setAttribute('layout', layoutMode);
       const breakoutModeStyle = getComputedStyleForLayoutMode(dom, node, style);
       gapCursor.style.width = `${measureWidth(breakoutModeStyle)}px`;

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

@@ -5,6 +5,7 @@ import { selectionPluginKey } from '../types';
 import { SelectionActionTypes } from './actions';
 import { onCreateSelectionBetween } from './events/create-selection-between';
 import { createOnKeydown } from './events/keydown';
+import { onMouseOut } from './events/mouseout';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { getDecorations, shouldRecalcDecorations } from './utils';
 export const getInitialState = state => ({
@@ -65,7 +66,10 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) =>
       handleDOMEvents: {
         keydown: createOnKeydown({
           __livePage: options.__livePage
-        })
+        }),
+        // Without this event, it is not possible to click and drag to select the first node in the
+        // document if the node is a block with content (e.g. a panel with a paragraph inside).
+        mouseout: onMouseOut
       }
     }
   });

package/dist/esm/pm-plugins/events/keydown.js

@@ -132,6 +132,15 @@ export function createOnKeydown(_ref4) {
     if (!(event instanceof KeyboardEvent)) {
       return false;
     }
+
+    // Override the default behaviour to make sure that the selection always extends to
+    // the start of the document and not just the first inline position.
+    if (event.shiftKey && event.metaKey && event.key === 'ArrowUp') {
+      var selection = TextSelection.create(view.state.doc, view.state.selection.$anchor.pos, 0);
+      view.dispatch(view.state.tr.setSelection(selection));
+      event.preventDefault();
+      return true;
+    }
     if (isSelectionLineShortcutWhenCursorIsInsideInlineNode(view, event)) {
       return true;
     }

package/dist/esm/pm-plugins/events/mouseout.js

@@ -0,0 +1,54 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export function isValidSelection(selection) {
+  if (selection.empty) {
+    return false;
+  }
+  var $anchor = selection.$anchor,
+    $head = selection.$head;
+
+  // Head must be at the start of its parent node's content
+  if ($head.parentOffset !== 0) {
+    return false;
+  }
+
+  // Head must be nested (e.g., in a panel > paragraph, not directly in doc)
+  if ($head.depth <= 1) {
+    return false;
+  }
+
+  // Head must be in the first top-level block (before depth 1 is 0)
+  if ($head.before(1) !== 0) {
+    return false;
+  }
+
+  // Selection must not span within a shared deeper structure
+  if ($head.sharedDepth($anchor.pos) !== 0) {
+    return false;
+  }
+
+  // Head must be in the first block at every level
+  var isFirstBlockInTree = true;
+  for (var i = $head.depth - 1; i >= 0; i--) {
+    if ($head.index(i) !== 0) {
+      isFirstBlockInTree = false;
+      break;
+    }
+  }
+  if (!isFirstBlockInTree) {
+    return false;
+  }
+  return true;
+}
+export function onMouseOut(view, event) {
+  // Only trigger during a mouse drag
+  if (event.buttons === 0) {
+    return false;
+  }
+  if (view.state.selection instanceof TextSelection && isValidSelection(view.state.selection)) {
+    // Set selection with head at document start (position 0)
+    var selection = new TextSelection(view.state.doc.resolve(view.state.selection.$anchor.pos), view.state.doc.resolve(0));
+    view.dispatch(view.state.tr.setSelection(selection));
+    return true;
+  }
+  return false;
+}

package/dist/esm/pm-plugins/gap-cursor/utils/place-gap-cursor.js

@@ -1,5 +1,6 @@
 import _toArray from "@babel/runtime/helpers/toArray";
 import { Side } from '@atlaskit/editor-common/selection';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getComputedStyleForLayoutMode, getLayoutModeFromTargetNode, isLeftCursor } from '../utils';
 
 /**
@@ -84,7 +85,10 @@ export var toDOM = function toDOM(view, getPos) {
     if (nodeStart !== 0 || layoutMode || (node === null || node === void 0 ? void 0 : node.type.name) === 'table') {
       gapCursor.style.marginTop = style.getPropertyValue('margin-top');
     }
-    if (layoutMode) {
+
+    // Tables nested inside other elements such as layouts, expands and other tables do not have fixed width
+    var isNestedTable = fg('platform_editor_nested_tables_gap_cursor') ? (node === null || node === void 0 ? void 0 : node.type.name) === 'table' && selection.$to.depth > 0 : false;
+    if (layoutMode && !isNestedTable) {
       gapCursor.setAttribute('layout', layoutMode);
       var breakoutModeStyle = getComputedStyleForLayoutMode(dom, node, style);
       gapCursor.style.width = "".concat(measureWidth(breakoutModeStyle), "px");

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

@@ -5,6 +5,7 @@ import { selectionPluginKey } from '../types';
 import { SelectionActionTypes } from './actions';
 import { onCreateSelectionBetween } from './events/create-selection-between';
 import { createOnKeydown } from './events/keydown';
+import { onMouseOut } from './events/mouseout';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { getDecorations, shouldRecalcDecorations } from './utils';
 export var getInitialState = function getInitialState(state) {
@@ -66,7 +67,10 @@ export var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent
       handleDOMEvents: {
         keydown: createOnKeydown({
           __livePage: options.__livePage
-        })
+        }),
+        // Without this event, it is not possible to click and drag to select the first node in the
+        // document if the node is a block with content (e.g. a panel with a paragraph inside).
+        mouseout: onMouseOut
       }
     }
   });

package/dist/types/pm-plugins/events/mouseout.d.ts

@@ -0,0 +1,4 @@
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare function isValidSelection(selection: Selection): boolean;
+export declare function onMouseOut(view: EditorView, event: MouseEvent): boolean;

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

@@ -0,0 +1,4 @@
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare function isValidSelection(selection: Selection): boolean;
+export declare function onMouseOut(view: EditorView, event: MouseEvent): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection",
-	"version": "2.1.2",
+	"version": "2.1.4",
 	"description": "Selection plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -20,12 +20,12 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^102.8.0",
+		"@atlaskit/editor-common": "^102.13.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^4.0.0",
+		"@atlaskit/tmp-editor-statsig": "^4.4.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0"
 	},
@@ -92,6 +92,9 @@
 		},
 		"platform_editor_lcm_inline_node_selection_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_nested_tables_gap_cursor": {
+			"type": "boolean"
 		}
 	}
 }