@atlaskit/editor-plugin-selection 1.5.6 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-selection
 
+## 1.6.0
+
+### Minor Changes
+
+- [#169428](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169428)
+  [`dc52eec1d2269`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dc52eec1d2269) -
+  [ux] ED-25865 Auto include inline node as a part of selection when selection ends on an inline
+  node
+- [#169428](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169428)
+  [`ded743b539788`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ded743b539788) -
+  [ux] ED-25865 auto expand selection to include inline node
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.5.6
 
 ### Patch Changes

package/dist/cjs/pm-plugins/auto-expand-selection-range-on-inline-node-key.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.autoExpandSelectionRangeOnInlineNodePluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var autoExpandSelectionRangeOnInlineNodePluginKey = exports.autoExpandSelectionRangeOnInlineNodePluginKey = new _state.PluginKey('autoExpandSelectionRangeOnInlineNodePlugin');

package/dist/cjs/pm-plugins/auto-expand-selection-range-on-inline-node-main.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAutoExpandSelectionRangeOnInlineNodePlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _autoExpandSelectionRangeOnInlineNodeKey = require("./auto-expand-selection-range-on-inline-node-key");
+var createAutoExpandSelectionRangeOnInlineNodePlugin = exports.createAutoExpandSelectionRangeOnInlineNodePlugin = function createAutoExpandSelectionRangeOnInlineNodePlugin() {
+  var mouseDownElement = null;
+  return new _safePlugin.SafePlugin({
+    key: _autoExpandSelectionRangeOnInlineNodeKey.autoExpandSelectionRangeOnInlineNodePluginKey,
+    props: {
+      handleDOMEvents: {
+        mousedown: function mousedown(_view, event) {
+          mouseDownElement = event.target;
+        },
+        mouseup: function mouseup(view, event) {
+          var mouseUpElement = event.target;
+
+          // terminate early if mouse down and mouse up elements are the same -> e.g a click event
+          if (mouseDownElement === mouseUpElement) {
+            return;
+          }
+
+          // terminate early if mouse up event is not fired on inline node
+          if (!isMouseUpOnSupportedNode(mouseUpElement)) {
+            return;
+          }
+          var dispatch = view.dispatch,
+            state = view.state;
+          var selection = state.selection;
+
+          // terminate early if current selection is on a node
+          if (selection instanceof _state.NodeSelection) {
+            return;
+          }
+
+          // only expand range when experiment is enabled, also fire exposure events here
+          if ((0, _experiments.editorExperiment)('expand_selection_range_to_include_inline_node', true, {
+            exposure: true
+          })) {
+            // find the document position of the mouse up element
+            var elementStartPosition = view.posAtDOM(mouseUpElement, 0);
+
+            // find out the direction of selection
+            var isAnchorBeforeElement = selection.$anchor.pos <= elementStartPosition;
+            var expandedSelectionHeadPosition = isAnchorBeforeElement ? elementStartPosition + 1 : elementStartPosition;
+
+            // expand the selection to include the mouse up element
+            var tr = state.tr.setSelection(_state.TextSelection.create(state.doc, selection.$anchor.pos, expandedSelectionHeadPosition));
+            dispatch(tr);
+          }
+        }
+      }
+    }
+  });
+};
+var isMouseUpOnSupportedNode = function isMouseUpOnSupportedNode(mouseUpElement) {
+  var supportedNodes = ['emoji', 'status', 'date', 'mention', 'inlineCard'];
+  var supportedNodeViewContentClassNamesList = supportedNodes.map(function (nodeType) {
+    return ".".concat(nodeType, "View-content-wrap");
+  }).join(', ');
+  return !!mouseUpElement.closest(supportedNodeViewContentClassNamesList);
+};

package/dist/cjs/selectionPlugin.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.selectionPlugin = exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _autoExpandSelectionRangeOnInlineNodeMain = require("./pm-plugins/auto-expand-selection-range-on-inline-node-main");
 var _commands = require("./pm-plugins/commands");
 var _gapCursorKeymap = _interopRequireDefault(require("./pm-plugins/gap-cursor-keymap"));
 var _gapCursorMain = _interopRequireDefault(require("./pm-plugins/gap-cursor-main"));
@@ -77,6 +78,11 @@ var selectionPlugin = exports.selectionPlugin = function selectionPlugin(_ref2)
         plugin: function plugin() {
           return (0, _markBoundaryCursorMain.createMarkBoundaryCursorPlugin)();
         }
+      }] : []), (0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('editor_auto_expand_selection_on_inline_node') ? [{
+        name: 'autoExpandSelectionRangeOnInlineNode',
+        plugin: function plugin() {
+          return (0, _autoExpandSelectionRangeOnInlineNodeMain.createAutoExpandSelectionRangeOnInlineNodePlugin)();
+        }
       }] : []));
     }
   };

package/dist/es2019/pm-plugins/auto-expand-selection-range-on-inline-node-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const autoExpandSelectionRangeOnInlineNodePluginKey = new PluginKey('autoExpandSelectionRangeOnInlineNodePlugin');

package/dist/es2019/pm-plugins/auto-expand-selection-range-on-inline-node-main.js

@@ -0,0 +1,63 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { autoExpandSelectionRangeOnInlineNodePluginKey } from './auto-expand-selection-range-on-inline-node-key';
+export const createAutoExpandSelectionRangeOnInlineNodePlugin = () => {
+  let mouseDownElement = null;
+  return new SafePlugin({
+    key: autoExpandSelectionRangeOnInlineNodePluginKey,
+    props: {
+      handleDOMEvents: {
+        mousedown: (_view, event) => {
+          mouseDownElement = event.target;
+        },
+        mouseup: (view, event) => {
+          const mouseUpElement = event.target;
+
+          // terminate early if mouse down and mouse up elements are the same -> e.g a click event
+          if (mouseDownElement === mouseUpElement) {
+            return;
+          }
+
+          // terminate early if mouse up event is not fired on inline node
+          if (!isMouseUpOnSupportedNode(mouseUpElement)) {
+            return;
+          }
+          const {
+            dispatch,
+            state
+          } = view;
+          const {
+            selection
+          } = state;
+
+          // terminate early if current selection is on a node
+          if (selection instanceof NodeSelection) {
+            return;
+          }
+
+          // only expand range when experiment is enabled, also fire exposure events here
+          if (editorExperiment('expand_selection_range_to_include_inline_node', true, {
+            exposure: true
+          })) {
+            // find the document position of the mouse up element
+            const elementStartPosition = view.posAtDOM(mouseUpElement, 0);
+
+            // find out the direction of selection
+            const isAnchorBeforeElement = selection.$anchor.pos <= elementStartPosition;
+            const expandedSelectionHeadPosition = isAnchorBeforeElement ? elementStartPosition + 1 : elementStartPosition;
+
+            // expand the selection to include the mouse up element
+            const tr = state.tr.setSelection(TextSelection.create(state.doc, selection.$anchor.pos, expandedSelectionHeadPosition));
+            dispatch(tr);
+          }
+        }
+      }
+    }
+  });
+};
+const isMouseUpOnSupportedNode = mouseUpElement => {
+  const supportedNodes = ['emoji', 'status', 'date', 'mention', 'inlineCard'];
+  const supportedNodeViewContentClassNamesList = supportedNodes.map(nodeType => `.${nodeType}View-content-wrap`).join(', ');
+  return !!mouseUpElement.closest(supportedNodeViewContentClassNamesList);
+};

package/dist/es2019/selectionPlugin.js

@@ -1,4 +1,5 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+import { createAutoExpandSelectionRangeOnInlineNodePlugin } from './pm-plugins/auto-expand-selection-range-on-inline-node-main';
 import { selectNearNode } from './pm-plugins/commands';
 import gapCursorKeymapPlugin from './pm-plugins/gap-cursor-keymap';
 import gapCursorPlugin from './pm-plugins/gap-cursor-main';
@@ -60,6 +61,9 @@ export const selectionPlugin = ({
     }, ...(fg('platform_editor_mark_boundary_cursor') ? [{
       name: 'markBoundaryCursor',
       plugin: () => createMarkBoundaryCursorPlugin()
+    }] : []), ...(fg('editor_auto_expand_selection_on_inline_node') ? [{
+      name: 'autoExpandSelectionRangeOnInlineNode',
+      plugin: () => createAutoExpandSelectionRangeOnInlineNodePlugin()
     }] : [])];
   }
 });

package/dist/esm/pm-plugins/auto-expand-selection-range-on-inline-node-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var autoExpandSelectionRangeOnInlineNodePluginKey = new PluginKey('autoExpandSelectionRangeOnInlineNodePlugin');

package/dist/esm/pm-plugins/auto-expand-selection-range-on-inline-node-main.js

@@ -0,0 +1,61 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { autoExpandSelectionRangeOnInlineNodePluginKey } from './auto-expand-selection-range-on-inline-node-key';
+export var createAutoExpandSelectionRangeOnInlineNodePlugin = function createAutoExpandSelectionRangeOnInlineNodePlugin() {
+  var mouseDownElement = null;
+  return new SafePlugin({
+    key: autoExpandSelectionRangeOnInlineNodePluginKey,
+    props: {
+      handleDOMEvents: {
+        mousedown: function mousedown(_view, event) {
+          mouseDownElement = event.target;
+        },
+        mouseup: function mouseup(view, event) {
+          var mouseUpElement = event.target;
+
+          // terminate early if mouse down and mouse up elements are the same -> e.g a click event
+          if (mouseDownElement === mouseUpElement) {
+            return;
+          }
+
+          // terminate early if mouse up event is not fired on inline node
+          if (!isMouseUpOnSupportedNode(mouseUpElement)) {
+            return;
+          }
+          var dispatch = view.dispatch,
+            state = view.state;
+          var selection = state.selection;
+
+          // terminate early if current selection is on a node
+          if (selection instanceof NodeSelection) {
+            return;
+          }
+
+          // only expand range when experiment is enabled, also fire exposure events here
+          if (editorExperiment('expand_selection_range_to_include_inline_node', true, {
+            exposure: true
+          })) {
+            // find the document position of the mouse up element
+            var elementStartPosition = view.posAtDOM(mouseUpElement, 0);
+
+            // find out the direction of selection
+            var isAnchorBeforeElement = selection.$anchor.pos <= elementStartPosition;
+            var expandedSelectionHeadPosition = isAnchorBeforeElement ? elementStartPosition + 1 : elementStartPosition;
+
+            // expand the selection to include the mouse up element
+            var tr = state.tr.setSelection(TextSelection.create(state.doc, selection.$anchor.pos, expandedSelectionHeadPosition));
+            dispatch(tr);
+          }
+        }
+      }
+    }
+  });
+};
+var isMouseUpOnSupportedNode = function isMouseUpOnSupportedNode(mouseUpElement) {
+  var supportedNodes = ['emoji', 'status', 'date', 'mention', 'inlineCard'];
+  var supportedNodeViewContentClassNamesList = supportedNodes.map(function (nodeType) {
+    return ".".concat(nodeType, "View-content-wrap");
+  }).join(', ');
+  return !!mouseUpElement.closest(supportedNodeViewContentClassNamesList);
+};

package/dist/esm/selectionPlugin.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { fg } from '@atlaskit/platform-feature-flags';
+import { createAutoExpandSelectionRangeOnInlineNodePlugin } from './pm-plugins/auto-expand-selection-range-on-inline-node-main';
 import { selectNearNode as _selectNearNode } from './pm-plugins/commands';
 import gapCursorKeymapPlugin from './pm-plugins/gap-cursor-keymap';
 import gapCursorPlugin from './pm-plugins/gap-cursor-main';
@@ -70,6 +71,11 @@ export var selectionPlugin = function selectionPlugin(_ref2) {
         plugin: function plugin() {
           return createMarkBoundaryCursorPlugin();
         }
+      }] : []), _toConsumableArray(fg('editor_auto_expand_selection_on_inline_node') ? [{
+        name: 'autoExpandSelectionRangeOnInlineNode',
+        plugin: function plugin() {
+          return createAutoExpandSelectionRangeOnInlineNodePlugin();
+        }
       }] : []));
     }
   };

package/dist/types/pm-plugins/auto-expand-selection-range-on-inline-node-key.d.ts

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const autoExpandSelectionRangeOnInlineNodePluginKey: PluginKey<any>;

package/dist/types/pm-plugins/auto-expand-selection-range-on-inline-node-main.d.ts

@@ -0,0 +1,2 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare const createAutoExpandSelectionRangeOnInlineNodePlugin: () => SafePlugin<any>;

package/dist/types-ts4.5/pm-plugins/auto-expand-selection-range-on-inline-node-key.d.ts

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const autoExpandSelectionRangeOnInlineNodePluginKey: PluginKey<any>;

package/dist/types-ts4.5/pm-plugins/auto-expand-selection-range-on-inline-node-main.d.ts

@@ -0,0 +1,2 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare const createAutoExpandSelectionRangeOnInlineNodePlugin: () => SafePlugin<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection",
-	"version": "1.5.6",
+	"version": "1.6.0",
 	"description": "Selection plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "2.24.0",
+		"@atlaskit/tmp-editor-statsig": "2.25.0",
 		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0"
 	},
@@ -89,6 +89,9 @@
 		},
 		"platform_editor_fix_drag_and_drop_lists": {
 			"type": "boolean"
+		},
+		"editor_auto_expand_selection_on_inline_node": {
+			"type": "boolean"
 		}
 	}
 }