@atlaskit/editor-plugin-selection 30.0.14 → 30.0.15

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-selection
 
+## 30.0.15
+
+### Patch Changes
+
+- [`5115f648812e3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5115f648812e3) -
+  EDITOR-9978: Behind the `platform_editor_improve_inp_batch_2` experiment, reduce selection changes
+  and forced layout on clicks. Before calling `posAtCoords`, the gap cursor click handler now skips
+  clicks where it can never place a gap cursor: clicks on text or inline content, and clicks on an
+  atom node such as media. The media node view no longer re-dispatches a `mediaSingle` selection
+  that is already set.
+- Updated dependencies
+
 ## 30.0.14
 
 ### Patch Changes

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

@@ -9,6 +9,7 @@ exports.getMediaNearPos = getMediaNearPos;
 exports.isTextBlockNearPos = exports.isLeftCursor = exports.isIgnoredClick = void 0;
 var _constants = require("@atlaskit/editor-common/media-single/constants");
 var _selection = require("@atlaskit/editor-common/selection");
+var _selection2 = require("@atlaskit/editor-common/selection/gap-cursor/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _unsupportedContent = require("@atlaskit/editor-common/styles/unsupported-content");
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
@@ -90,7 +91,66 @@ function getLayoutModeFromTargetNode(node) {
   }
   return layout;
 }
-var isIgnoredClick = exports.isIgnoredClick = function isIgnoredClick(elem) {
+/**
+ * Whether `node`, starting at `start`, is an atom whose DOM contains the click target.
+ */
+var isClickInsideAtom = function isClickInsideAtom(elem, node, start, view) {
+  // ProseMirror counts text as an atom, but a text node can't contain an element.
+  if (!(node !== null && node !== void 0 && node.isAtom) || node.isText) {
+    return false;
+  }
+  var dom = view.nodeDOM(start);
+  return dom instanceof Node && dom.contains(elem);
+};
+
+/**
+ * Rule 1: no gap cursor can be placed for a click at `nodePos`.
+ *
+ * Skips clicks on text and inline atoms (mentions, emoji, status, dates, inline cards), where
+ * `nodePos` is inside a textblock. Inside a `mediaSingle` the handler places the gap cursor beside
+ * it instead, so clicks beside nested images aren't skipped.
+ */
+var cannotPlaceGapCursorAt = function cannotPlaceGapCursorAt($pos) {
+  return $pos.parent.type.name !== 'mediaSingle' && !_selection2.GapCursorSelection.valid($pos);
+};
+
+/**
+ * Rule 2: the click target is inside the DOM of the atom before or after `nodePos`.
+ *
+ * Skips clicks on block atoms (images, block and embed cards, extensions, dividers), which the
+ * handler already ignored via `posAtCoords.inside`. Clicks beside them, outside their DOM, aren't
+ * skipped.
+ */
+var isClickOnAdjacentAtom = function isClickOnAdjacentAtom(elem, $pos, view) {
+  var _nodeBefore$nodeSize;
+  var nodeAfter = $pos.nodeAfter,
+    nodeBefore = $pos.nodeBefore,
+    pos = $pos.pos;
+  return isClickInsideAtom(elem, nodeAfter, pos, view) || isClickInsideAtom(elem, nodeBefore, pos - ((_nodeBefore$nodeSize = nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.nodeSize) !== null && _nodeBefore$nodeSize !== void 0 ? _nodeBefore$nodeSize : 0), view);
+};
+
+/**
+ * Whether the gap cursor click handler would return false whatever `posAtCoords` returns, so the
+ * layout read can be skipped.
+ */
+var isClickWithoutGapCursor = function isClickWithoutGapCursor(elem, _ref) {
+  var view = _ref.view,
+    nodePos = _ref.nodePos;
+  var doc = view.state.doc;
+  if (nodePos < 0 || nodePos > doc.content.size) {
+    return false;
+  }
+  var $pos = doc.resolve(nodePos);
+  return cannotPlaceGapCursorAt($pos) || isClickOnAdjacentAtom(elem, $pos, view);
+};
+
+/**
+ * Whether a click should be left to other handlers instead of placing a gap cursor.
+ *
+ * Pass `clickContext` to also ignore clicks where no gap cursor can be placed: clicks on text or
+ * inline content, and clicks on an atom node such as media, cards or extensions.
+ */
+var isIgnoredClick = exports.isIgnoredClick = function isIgnoredClick(elem, clickContext) {
   if ((elem === null || elem === void 0 ? void 0 : elem.nodeName) === 'BUTTON' || elem !== null && elem !== void 0 && elem.closest('button')) {
     return true;
   }
@@ -100,6 +160,12 @@ var isIgnoredClick = exports.isIgnoredClick = function isIgnoredClick(elem) {
     return true;
   }
 
+  // check if no gap cursor can be placed for this click (text, inline content or an atom node).
+  // This runs before the table check so clicks inside tables are covered too.
+  if (elem && clickContext && isClickWithoutGapCursor(elem, clickContext)) {
+    return true;
+  }
+
   // check if target node has a parent table node
   var tableWrap;
   var node = elem;

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

@@ -103,9 +103,13 @@ var plugin = new _safePlugin.SafePlugin({
       var _$pos$parent;
       var target = event.target instanceof HTMLElement ? event.target : null;
       // Check the experiment first so the control group runs isIgnoredClick once, after
-      // posAtCoords, exactly as before.
+      // posAtCoords, exactly as before. Only this path passes { view, nodePos }, which also
+      // ignores clicks that can never place a gap cursor (text, inline content, atom nodes).
       var checkIgnoredClickFirst = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_improve_inp_batch_2');
-      if (checkIgnoredClickFirst && target && (0, _utils2.isIgnoredClick)(target)) {
+      if (checkIgnoredClickFirst && target && (0, _utils2.isIgnoredClick)(target, {
+        view: view,
+        nodePos: nodePos
+      })) {
         return false;
       }
 

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

@@ -1,5 +1,6 @@
 import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single/constants';
 import { Side } from '@atlaskit/editor-common/selection';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection/gap-cursor/selection';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { UnsupportedSharedCssClassName } from '@atlaskit/editor-common/styles/unsupported-content';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
@@ -77,7 +78,69 @@ export function getLayoutModeFromTargetNode(node) {
   }
   return layout;
 }
-export const isIgnoredClick = elem => {
+/**
+ * Whether `node`, starting at `start`, is an atom whose DOM contains the click target.
+ */
+const isClickInsideAtom = (elem, node, start, view) => {
+  // ProseMirror counts text as an atom, but a text node can't contain an element.
+  if (!(node !== null && node !== void 0 && node.isAtom) || node.isText) {
+    return false;
+  }
+  const dom = view.nodeDOM(start);
+  return dom instanceof Node && dom.contains(elem);
+};
+
+/**
+ * Rule 1: no gap cursor can be placed for a click at `nodePos`.
+ *
+ * Skips clicks on text and inline atoms (mentions, emoji, status, dates, inline cards), where
+ * `nodePos` is inside a textblock. Inside a `mediaSingle` the handler places the gap cursor beside
+ * it instead, so clicks beside nested images aren't skipped.
+ */
+const cannotPlaceGapCursorAt = $pos => $pos.parent.type.name !== 'mediaSingle' && !GapCursorSelection.valid($pos);
+
+/**
+ * Rule 2: the click target is inside the DOM of the atom before or after `nodePos`.
+ *
+ * Skips clicks on block atoms (images, block and embed cards, extensions, dividers), which the
+ * handler already ignored via `posAtCoords.inside`. Clicks beside them, outside their DOM, aren't
+ * skipped.
+ */
+const isClickOnAdjacentAtom = (elem, $pos, view) => {
+  var _nodeBefore$nodeSize;
+  const {
+    nodeAfter,
+    nodeBefore,
+    pos
+  } = $pos;
+  return isClickInsideAtom(elem, nodeAfter, pos, view) || isClickInsideAtom(elem, nodeBefore, pos - ((_nodeBefore$nodeSize = nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.nodeSize) !== null && _nodeBefore$nodeSize !== void 0 ? _nodeBefore$nodeSize : 0), view);
+};
+
+/**
+ * Whether the gap cursor click handler would return false whatever `posAtCoords` returns, so the
+ * layout read can be skipped.
+ */
+const isClickWithoutGapCursor = (elem, {
+  view,
+  nodePos
+}) => {
+  const {
+    doc
+  } = view.state;
+  if (nodePos < 0 || nodePos > doc.content.size) {
+    return false;
+  }
+  const $pos = doc.resolve(nodePos);
+  return cannotPlaceGapCursorAt($pos) || isClickOnAdjacentAtom(elem, $pos, view);
+};
+
+/**
+ * Whether a click should be left to other handlers instead of placing a gap cursor.
+ *
+ * Pass `clickContext` to also ignore clicks where no gap cursor can be placed: clicks on text or
+ * inline content, and clicks on an atom node such as media, cards or extensions.
+ */
+export const isIgnoredClick = (elem, clickContext) => {
   if ((elem === null || elem === void 0 ? void 0 : elem.nodeName) === 'BUTTON' || elem !== null && elem !== void 0 && elem.closest('button')) {
     return true;
   }
@@ -87,6 +150,12 @@ export const isIgnoredClick = elem => {
     return true;
   }
 
+  // check if no gap cursor can be placed for this click (text, inline content or an atom node).
+  // This runs before the table check so clicks inside tables are covered too.
+  if (elem && clickContext && isClickWithoutGapCursor(elem, clickContext)) {
+    return true;
+  }
+
   // check if target node has a parent table node
   let tableWrap;
   let node = elem;

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

@@ -100,9 +100,13 @@ const plugin = new SafePlugin({
       var _$pos$parent;
       const target = event.target instanceof HTMLElement ? event.target : null;
       // Check the experiment first so the control group runs isIgnoredClick once, after
-      // posAtCoords, exactly as before.
+      // posAtCoords, exactly as before. Only this path passes { view, nodePos }, which also
+      // ignores clicks that can never place a gap cursor (text, inline content, atom nodes).
       const checkIgnoredClickFirst = isExperimentEnabled('platform_editor_improve_inp_batch_2');
-      if (checkIgnoredClickFirst && target && isIgnoredClick(target)) {
+      if (checkIgnoredClickFirst && target && isIgnoredClick(target, {
+        view,
+        nodePos
+      })) {
         return false;
       }
 

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

@@ -1,5 +1,6 @@
 import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single/constants';
 import { Side } from '@atlaskit/editor-common/selection';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection/gap-cursor/selection';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { UnsupportedSharedCssClassName } from '@atlaskit/editor-common/styles/unsupported-content';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
@@ -81,7 +82,66 @@ export function getLayoutModeFromTargetNode(node) {
   }
   return layout;
 }
-export var isIgnoredClick = function isIgnoredClick(elem) {
+/**
+ * Whether `node`, starting at `start`, is an atom whose DOM contains the click target.
+ */
+var isClickInsideAtom = function isClickInsideAtom(elem, node, start, view) {
+  // ProseMirror counts text as an atom, but a text node can't contain an element.
+  if (!(node !== null && node !== void 0 && node.isAtom) || node.isText) {
+    return false;
+  }
+  var dom = view.nodeDOM(start);
+  return dom instanceof Node && dom.contains(elem);
+};
+
+/**
+ * Rule 1: no gap cursor can be placed for a click at `nodePos`.
+ *
+ * Skips clicks on text and inline atoms (mentions, emoji, status, dates, inline cards), where
+ * `nodePos` is inside a textblock. Inside a `mediaSingle` the handler places the gap cursor beside
+ * it instead, so clicks beside nested images aren't skipped.
+ */
+var cannotPlaceGapCursorAt = function cannotPlaceGapCursorAt($pos) {
+  return $pos.parent.type.name !== 'mediaSingle' && !GapCursorSelection.valid($pos);
+};
+
+/**
+ * Rule 2: the click target is inside the DOM of the atom before or after `nodePos`.
+ *
+ * Skips clicks on block atoms (images, block and embed cards, extensions, dividers), which the
+ * handler already ignored via `posAtCoords.inside`. Clicks beside them, outside their DOM, aren't
+ * skipped.
+ */
+var isClickOnAdjacentAtom = function isClickOnAdjacentAtom(elem, $pos, view) {
+  var _nodeBefore$nodeSize;
+  var nodeAfter = $pos.nodeAfter,
+    nodeBefore = $pos.nodeBefore,
+    pos = $pos.pos;
+  return isClickInsideAtom(elem, nodeAfter, pos, view) || isClickInsideAtom(elem, nodeBefore, pos - ((_nodeBefore$nodeSize = nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.nodeSize) !== null && _nodeBefore$nodeSize !== void 0 ? _nodeBefore$nodeSize : 0), view);
+};
+
+/**
+ * Whether the gap cursor click handler would return false whatever `posAtCoords` returns, so the
+ * layout read can be skipped.
+ */
+var isClickWithoutGapCursor = function isClickWithoutGapCursor(elem, _ref) {
+  var view = _ref.view,
+    nodePos = _ref.nodePos;
+  var doc = view.state.doc;
+  if (nodePos < 0 || nodePos > doc.content.size) {
+    return false;
+  }
+  var $pos = doc.resolve(nodePos);
+  return cannotPlaceGapCursorAt($pos) || isClickOnAdjacentAtom(elem, $pos, view);
+};
+
+/**
+ * Whether a click should be left to other handlers instead of placing a gap cursor.
+ *
+ * Pass `clickContext` to also ignore clicks where no gap cursor can be placed: clicks on text or
+ * inline content, and clicks on an atom node such as media, cards or extensions.
+ */
+export var isIgnoredClick = function isIgnoredClick(elem, clickContext) {
   if ((elem === null || elem === void 0 ? void 0 : elem.nodeName) === 'BUTTON' || elem !== null && elem !== void 0 && elem.closest('button')) {
     return true;
   }
@@ -91,6 +151,12 @@ export var isIgnoredClick = function isIgnoredClick(elem) {
     return true;
   }
 
+  // check if no gap cursor can be placed for this click (text, inline content or an atom node).
+  // This runs before the table check so clicks inside tables are covered too.
+  if (elem && clickContext && isClickWithoutGapCursor(elem, clickContext)) {
+    return true;
+  }
+
   // check if target node has a parent table node
   var tableWrap;
   var node = elem;

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

@@ -97,9 +97,13 @@ var plugin = new SafePlugin({
       var _$pos$parent;
       var target = event.target instanceof HTMLElement ? event.target : null;
       // Check the experiment first so the control group runs isIgnoredClick once, after
-      // posAtCoords, exactly as before.
+      // posAtCoords, exactly as before. Only this path passes { view, nodePos }, which also
+      // ignores clicks that can never place a gap cursor (text, inline content, atom nodes).
       var checkIgnoredClickFirst = isExperimentEnabled('platform_editor_improve_inp_batch_2');
-      if (checkIgnoredClickFirst && target && isIgnoredClick(target)) {
+      if (checkIgnoredClickFirst && target && isIgnoredClick(target, {
+        view: view,
+        nodePos: nodePos
+      })) {
         return false;
       }
 

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

@@ -1,8 +1,20 @@
 import { Side } from '@atlaskit/editor-common/selection';
 import type { Node as PMNode, ResolvedPos, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const isLeftCursor: (side: Side) => side is Side.LEFT;
 export declare function getMediaNearPos(doc: PMNode, $pos: ResolvedPos, schema: Schema, dir?: number): PMNode | null;
 export declare const isTextBlockNearPos: (doc: PMNode, schema: Schema, $pos: ResolvedPos, dir: number) => boolean;
 export declare function getLayoutModeFromTargetNode(node: PMNode): string;
-export declare const isIgnoredClick: (elem: HTMLElement | null) => boolean | null;
+type ClickContext = {
+    nodePos: number;
+    view: EditorView;
+};
+/**
+ * Whether a click should be left to other handlers instead of placing a gap cursor.
+ *
+ * Pass `clickContext` to also ignore clicks where no gap cursor can be placed: clicks on text or
+ * inline content, and clicks on an atom node such as media, cards or extensions.
+ */
+export declare const isIgnoredClick: (elem: HTMLElement | null, clickContext?: ClickContext) => boolean | null;
 export declare const getComputedStyleForLayoutMode: (dom: HTMLElement, node: PMNode | undefined | null, style: CSSStyleDeclaration) => CSSStyleDeclaration;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection",
-	"version": "30.0.14",
+	"version": "30.0.15",
 	"description": "Selection plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,11 +32,11 @@
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^134.8.0",
+		"@atlaskit/editor-common": "^134.9.0",
 		"react": "^18.2.0 || ^19.2.0"
 	},
 	"devDependencies": {
-		"@atlaskit/editor-common": "^134.8.0",
+		"@atlaskit/editor-common": "^134.9.0",
 		"react": "^19.2.0"
 	}
 }