@atlaskit/editor-plugin-selection 3.0.0 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-selection
 
+## 3.0.2
+
+### Patch Changes
+
+- [#184967](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/184967)
+  [`c868ad3f120c0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c868ad3f120c0) -
+  [ux] Fix bug: pressing right arrow from listItem in layout/extended/panel skips next listItem and
+  selects container instead
+- Updated dependencies
+
+## 3.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.0.0
 
 ### Major Changes

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSelectionAtStartOfParentNode = exports.isSelectionAtEndOfParentNode = exports.isSelectableContainerNode = exports.isSelectableChildNode = exports.getNodesToDecorateFromSelection = exports.getDecorations = exports.findSelectableContainerParent = exports.findSelectableContainerBefore = exports.findSelectableContainerAfter = exports.findLastChildNodeToSelect = exports.findFirstChildNodeToSelect = void 0;
+exports.isSelectionAtStartOfParentNode = exports.isSelectionAtEndOfParentNode = exports.isSelectableContainerNode = exports.isSelectableChildNode = exports.isListItemWithinContainerNotAtEnd = exports.isContainerNode = exports.getNodesToDecorateFromSelection = exports.getDecorations = exports.findTopLevelList = exports.findSelectableContainerParent = exports.findSelectableContainerBefore = exports.findSelectableContainerAfter = exports.findLastChildNodeToSelect = exports.findFirstChildNodeToSelect = void 0;
 exports.shouldRecalcDecorations = shouldRecalcDecorations;
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -11,6 +11,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../types");
 var getDecorations = exports.getDecorations = function getDecorations(tr, manualSelection) {
   var selection = tr.selection;
@@ -248,13 +249,93 @@ var isSelectionAtStartOfParentNode = exports.isSelectionAtStartOfParentNode = fu
   return (0, _selection.isSelectionAtStartOfNode)($pos, (_findSelectableContai = findSelectableContainerParent(selection)) === null || _findSelectableContai === void 0 ? void 0 : _findSelectableContai.node);
 };
 var isSelectionAtEndOfParentNode = exports.isSelectionAtEndOfParentNode = function isSelectionAtEndOfParentNode($pos, selection) {
+  // If the current position is at the end of its parent node's content.
   var isAtTheEndOfCurrentLevel = $pos.parent.content.size === $pos.parentOffset;
   if (!isAtTheEndOfCurrentLevel) {
     return false;
   }
+
+  // If at the root or parent is selectable, we're at the end
   if ($pos.depth === 0 || _state.NodeSelection.isSelectable($pos.parent)) {
     return isAtTheEndOfCurrentLevel;
   }
+
+  // Handle lists: if in a list inside container and not at the end, return false
+  if ((0, _utils2.hasParentNode)(_utils.isListItemNode)(selection) && isListItemWithinContainerNotAtEnd($pos, selection) && (0, _platformFeatureFlags.fg)('platform_editor_fix_right_arrow_bug_list_in_layout')) {
+    return false;
+  }
+
+  // Default: if at end of parent's parent
   var $after = $pos.doc.resolve($pos.after());
   return $after.parent.content.size === $after.parentOffset;
+};
+
+/**
+ * Determines if the current selection is inside a list item within a container and not at the end of the parent list.
+ *
+ * This is useful for handling edge cases where the selection is within a list inside a container structure,
+ * and we need to know if the selection is not at the logical end of the parent list node.
+ */
+var isListItemWithinContainerNotAtEnd = exports.isListItemWithinContainerNotAtEnd = function isListItemWithinContainerNotAtEnd($pos, selection) {
+  var isInContainerNode = (0, _utils2.hasParentNode)(isContainerNode)(selection);
+  if (!isInContainerNode) {
+    return false;
+  }
+  var parentList = (0, _utils2.findParentNodeClosestToPos)($pos, _utils.isListItemNode);
+  if (!parentList) {
+    return false;
+  }
+  var $parentListPos = $pos.doc.resolve(parentList.pos);
+  var topLevelList = findTopLevelList($pos);
+  if (!topLevelList) {
+    return false;
+  }
+  var $afterTopLevelList = $pos.doc.resolve(topLevelList.pos + topLevelList.node.nodeSize);
+  var nodeAfterTopLevelList = $afterTopLevelList.nodeAfter;
+  var grandParentList = (0, _utils2.findParentNodeClosestToPos)($pos.doc.resolve($parentListPos.before()), _utils.isListItemNode);
+  var grandParentListPos = grandParentList ? $pos.doc.resolve(grandParentList.pos) : undefined;
+  var isLastListItemInParent =
+  // Check if the current list item is the last child in its parent list
+  $parentListPos.index() === $parentListPos.parent.childCount - 1 && (
+  // Check if there is no grandparent list, or if the grandparent list item is also the last child in its parent
+  !grandParentList || grandParentListPos && grandParentListPos.index() === grandParentListPos.parent.childCount - 1);
+  if (!isLastListItemInParent || nodeAfterTopLevelList) {
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Determines if the given node is a Container (layoutColumn, panel, expand) node.
+ */
+var isContainerNode = exports.isContainerNode = function isContainerNode(node) {
+  var _node$type;
+  var _ref3 = (node === null || node === void 0 || (_node$type = node.type) === null || _node$type === void 0 || (_node$type = _node$type.schema) === null || _node$type === void 0 ? void 0 : _node$type.nodes) || {},
+    layoutColumn = _ref3.layoutColumn,
+    panel = _ref3.panel,
+    expand = _ref3.expand;
+  return Boolean(node && node.type && [panel, expand, layoutColumn].includes(node.type));
+};
+
+/**
+ * Finds the top-level List ancestor of the given position.
+ * Returns the node and its position if found, otherwise returns undefined.
+ */
+var findTopLevelList = exports.findTopLevelList = function findTopLevelList(pos) {
+  var _pos$doc$type$schema$ = pos.doc.type.schema.nodes,
+    bulletList = _pos$doc$type$schema$.bulletList,
+    orderedList = _pos$doc$type$schema$.orderedList;
+  var currentDepth = pos.depth;
+  var topLevelList;
+  while (currentDepth > 0) {
+    var node = pos.node(currentDepth);
+    if ([bulletList, orderedList].includes(node.type)) {
+      topLevelList = {
+        node: node,
+        pos: pos.before(currentDepth)
+      };
+    }
+    currentDepth--;
+  }
+  return topLevelList;
 };

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

@@ -1,9 +1,10 @@
 import { isIgnored as isIgnoredByGapCursor, isSelectionAtStartOfNode } from '@atlaskit/editor-common/selection';
-import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { isEmptyParagraph, isListItemNode } from '@atlaskit/editor-common/utils';
 import { AllSelection, NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { findParentNode, flatten } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNode, findParentNodeClosestToPos, flatten, hasParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { selectionPluginKey } from '../types';
 export const getDecorations = (tr, manualSelection) => {
   let selection = tr.selection;
@@ -237,13 +238,95 @@ export const isSelectionAtStartOfParentNode = ($pos, selection) => {
   return isSelectionAtStartOfNode($pos, (_findSelectableContai = findSelectableContainerParent(selection)) === null || _findSelectableContai === void 0 ? void 0 : _findSelectableContai.node);
 };
 export const isSelectionAtEndOfParentNode = ($pos, selection) => {
+  // If the current position is at the end of its parent node's content.
   const isAtTheEndOfCurrentLevel = $pos.parent.content.size === $pos.parentOffset;
   if (!isAtTheEndOfCurrentLevel) {
     return false;
   }
+
+  // If at the root or parent is selectable, we're at the end
   if ($pos.depth === 0 || NodeSelection.isSelectable($pos.parent)) {
     return isAtTheEndOfCurrentLevel;
   }
+
+  // Handle lists: if in a list inside container and not at the end, return false
+  if (hasParentNode(isListItemNode)(selection) && isListItemWithinContainerNotAtEnd($pos, selection) && fg('platform_editor_fix_right_arrow_bug_list_in_layout')) {
+    return false;
+  }
+
+  // Default: if at end of parent's parent
   const $after = $pos.doc.resolve($pos.after());
   return $after.parent.content.size === $after.parentOffset;
+};
+
+/**
+ * Determines if the current selection is inside a list item within a container and not at the end of the parent list.
+ *
+ * This is useful for handling edge cases where the selection is within a list inside a container structure,
+ * and we need to know if the selection is not at the logical end of the parent list node.
+ */
+export const isListItemWithinContainerNotAtEnd = ($pos, selection) => {
+  const isInContainerNode = hasParentNode(isContainerNode)(selection);
+  if (!isInContainerNode) {
+    return false;
+  }
+  const parentList = findParentNodeClosestToPos($pos, isListItemNode);
+  if (!parentList) {
+    return false;
+  }
+  const $parentListPos = $pos.doc.resolve(parentList.pos);
+  const topLevelList = findTopLevelList($pos);
+  if (!topLevelList) {
+    return false;
+  }
+  const $afterTopLevelList = $pos.doc.resolve(topLevelList.pos + topLevelList.node.nodeSize);
+  const nodeAfterTopLevelList = $afterTopLevelList.nodeAfter;
+  const grandParentList = findParentNodeClosestToPos($pos.doc.resolve($parentListPos.before()), isListItemNode);
+  const grandParentListPos = grandParentList ? $pos.doc.resolve(grandParentList.pos) : undefined;
+  const isLastListItemInParent =
+  // Check if the current list item is the last child in its parent list
+  $parentListPos.index() === $parentListPos.parent.childCount - 1 && (
+  // Check if there is no grandparent list, or if the grandparent list item is also the last child in its parent
+  !grandParentList || grandParentListPos && grandParentListPos.index() === grandParentListPos.parent.childCount - 1);
+  if (!isLastListItemInParent || nodeAfterTopLevelList) {
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Determines if the given node is a Container (layoutColumn, panel, expand) node.
+ */
+export const isContainerNode = node => {
+  var _node$type, _node$type$schema;
+  const {
+    layoutColumn,
+    panel,
+    expand
+  } = (node === null || node === void 0 ? void 0 : (_node$type = node.type) === null || _node$type === void 0 ? void 0 : (_node$type$schema = _node$type.schema) === null || _node$type$schema === void 0 ? void 0 : _node$type$schema.nodes) || {};
+  return Boolean(node && node.type && [panel, expand, layoutColumn].includes(node.type));
+};
+
+/**
+ * Finds the top-level List ancestor of the given position.
+ * Returns the node and its position if found, otherwise returns undefined.
+ */
+export const findTopLevelList = pos => {
+  const {
+    bulletList,
+    orderedList
+  } = pos.doc.type.schema.nodes;
+  let currentDepth = pos.depth;
+  let topLevelList;
+  while (currentDepth > 0) {
+    const node = pos.node(currentDepth);
+    if ([bulletList, orderedList].includes(node.type)) {
+      topLevelList = {
+        node,
+        pos: pos.before(currentDepth)
+      };
+    }
+    currentDepth--;
+  }
+  return topLevelList;
 };

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

@@ -1,9 +1,10 @@
 import { isIgnored as isIgnoredByGapCursor, isSelectionAtStartOfNode } from '@atlaskit/editor-common/selection';
-import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { isEmptyParagraph, isListItemNode } from '@atlaskit/editor-common/utils';
 import { AllSelection, NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { findParentNode, flatten } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNode, findParentNodeClosestToPos, flatten, hasParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { selectionPluginKey } from '../types';
 export var getDecorations = function getDecorations(tr, manualSelection) {
   var selection = tr.selection;
@@ -241,13 +242,93 @@ export var isSelectionAtStartOfParentNode = function isSelectionAtStartOfParentN
   return isSelectionAtStartOfNode($pos, (_findSelectableContai = findSelectableContainerParent(selection)) === null || _findSelectableContai === void 0 ? void 0 : _findSelectableContai.node);
 };
 export var isSelectionAtEndOfParentNode = function isSelectionAtEndOfParentNode($pos, selection) {
+  // If the current position is at the end of its parent node's content.
   var isAtTheEndOfCurrentLevel = $pos.parent.content.size === $pos.parentOffset;
   if (!isAtTheEndOfCurrentLevel) {
     return false;
   }
+
+  // If at the root or parent is selectable, we're at the end
   if ($pos.depth === 0 || NodeSelection.isSelectable($pos.parent)) {
     return isAtTheEndOfCurrentLevel;
   }
+
+  // Handle lists: if in a list inside container and not at the end, return false
+  if (hasParentNode(isListItemNode)(selection) && isListItemWithinContainerNotAtEnd($pos, selection) && fg('platform_editor_fix_right_arrow_bug_list_in_layout')) {
+    return false;
+  }
+
+  // Default: if at end of parent's parent
   var $after = $pos.doc.resolve($pos.after());
   return $after.parent.content.size === $after.parentOffset;
+};
+
+/**
+ * Determines if the current selection is inside a list item within a container and not at the end of the parent list.
+ *
+ * This is useful for handling edge cases where the selection is within a list inside a container structure,
+ * and we need to know if the selection is not at the logical end of the parent list node.
+ */
+export var isListItemWithinContainerNotAtEnd = function isListItemWithinContainerNotAtEnd($pos, selection) {
+  var isInContainerNode = hasParentNode(isContainerNode)(selection);
+  if (!isInContainerNode) {
+    return false;
+  }
+  var parentList = findParentNodeClosestToPos($pos, isListItemNode);
+  if (!parentList) {
+    return false;
+  }
+  var $parentListPos = $pos.doc.resolve(parentList.pos);
+  var topLevelList = findTopLevelList($pos);
+  if (!topLevelList) {
+    return false;
+  }
+  var $afterTopLevelList = $pos.doc.resolve(topLevelList.pos + topLevelList.node.nodeSize);
+  var nodeAfterTopLevelList = $afterTopLevelList.nodeAfter;
+  var grandParentList = findParentNodeClosestToPos($pos.doc.resolve($parentListPos.before()), isListItemNode);
+  var grandParentListPos = grandParentList ? $pos.doc.resolve(grandParentList.pos) : undefined;
+  var isLastListItemInParent =
+  // Check if the current list item is the last child in its parent list
+  $parentListPos.index() === $parentListPos.parent.childCount - 1 && (
+  // Check if there is no grandparent list, or if the grandparent list item is also the last child in its parent
+  !grandParentList || grandParentListPos && grandParentListPos.index() === grandParentListPos.parent.childCount - 1);
+  if (!isLastListItemInParent || nodeAfterTopLevelList) {
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Determines if the given node is a Container (layoutColumn, panel, expand) node.
+ */
+export var isContainerNode = function isContainerNode(node) {
+  var _node$type;
+  var _ref3 = (node === null || node === void 0 || (_node$type = node.type) === null || _node$type === void 0 || (_node$type = _node$type.schema) === null || _node$type === void 0 ? void 0 : _node$type.nodes) || {},
+    layoutColumn = _ref3.layoutColumn,
+    panel = _ref3.panel,
+    expand = _ref3.expand;
+  return Boolean(node && node.type && [panel, expand, layoutColumn].includes(node.type));
+};
+
+/**
+ * Finds the top-level List ancestor of the given position.
+ * Returns the node and its position if found, otherwise returns undefined.
+ */
+export var findTopLevelList = function findTopLevelList(pos) {
+  var _pos$doc$type$schema$ = pos.doc.type.schema.nodes,
+    bulletList = _pos$doc$type$schema$.bulletList,
+    orderedList = _pos$doc$type$schema$.orderedList;
+  var currentDepth = pos.depth;
+  var topLevelList;
+  while (currentDepth > 0) {
+    var node = pos.node(currentDepth);
+    if ([bulletList, orderedList].includes(node.type)) {
+      topLevelList = {
+        node: node,
+        pos: pos.before(currentDepth)
+      };
+    }
+    currentDepth--;
+  }
+  return topLevelList;
 };

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

@@ -57,3 +57,22 @@ export declare const findFirstChildNodeToSelect: (parent: PmNode) => NodeWithPos
 export declare const findLastChildNodeToSelect: (parent: PmNode) => NodeWithPos | undefined;
 export declare const isSelectionAtStartOfParentNode: ($pos: ResolvedPos, selection: Selection) => boolean;
 export declare const isSelectionAtEndOfParentNode: ($pos: ResolvedPos, selection: Selection) => boolean;
+/**
+ * Determines if the current selection is inside a list item within a container and not at the end of the parent list.
+ *
+ * This is useful for handling edge cases where the selection is within a list inside a container structure,
+ * and we need to know if the selection is not at the logical end of the parent list node.
+ */
+export declare const isListItemWithinContainerNotAtEnd: ($pos: ResolvedPos, selection: Selection) => boolean;
+/**
+ * Determines if the given node is a Container (layoutColumn, panel, expand) node.
+ */
+export declare const isContainerNode: (node: PmNode | null | undefined) => boolean;
+/**
+ * Finds the top-level List ancestor of the given position.
+ * Returns the node and its position if found, otherwise returns undefined.
+ */
+export declare const findTopLevelList: (pos: ResolvedPos) => {
+    node: PmNode;
+    pos: number;
+} | undefined;

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

@@ -57,3 +57,22 @@ export declare const findFirstChildNodeToSelect: (parent: PmNode) => NodeWithPos
 export declare const findLastChildNodeToSelect: (parent: PmNode) => NodeWithPos | undefined;
 export declare const isSelectionAtStartOfParentNode: ($pos: ResolvedPos, selection: Selection) => boolean;
 export declare const isSelectionAtEndOfParentNode: ($pos: ResolvedPos, selection: Selection) => boolean;
+/**
+ * Determines if the current selection is inside a list item within a container and not at the end of the parent list.
+ *
+ * This is useful for handling edge cases where the selection is within a list inside a container structure,
+ * and we need to know if the selection is not at the logical end of the parent list node.
+ */
+export declare const isListItemWithinContainerNotAtEnd: ($pos: ResolvedPos, selection: Selection) => boolean;
+/**
+ * Determines if the given node is a Container (layoutColumn, panel, expand) node.
+ */
+export declare const isContainerNode: (node: PmNode | null | undefined) => boolean;
+/**
+ * Finds the top-level List ancestor of the given position.
+ * Returns the node and its position if found, otherwise returns undefined.
+ */
+export declare const findTopLevelList: (pos: ResolvedPos) => {
+    node: PmNode;
+    pos: number;
+} | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection",
-	"version": "3.0.0",
+	"version": "3.0.2",
 	"description": "Selection plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -24,12 +24,12 @@
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^8.7.0",
-		"@atlaskit/tokens": "^5.4.0",
+		"@atlaskit/tmp-editor-statsig": "^9.5.0",
+		"@atlaskit/tokens": "^5.5.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.6.0",
+		"@atlaskit/editor-common": "^107.7.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
@@ -86,6 +86,9 @@
 		},
 		"platform_editor_nested_tables_gap_cursor": {
 			"type": "boolean"
+		},
+		"platform_editor_fix_right_arrow_bug_list_in_layout": {
+			"type": "boolean"
 		}
 	}
 }