@atlaskit/editor-plugin-selection-extension 2.4.5 → 2.4.7

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 2.4.7
+
+### Patch Changes
+
+- [#177823](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177823)
+  [`8bd9bca774e4f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8bd9bca774e4f) -
+  Extend selection extension API to support dynamic loading of extension configuration
+- Updated dependencies
+
+## 2.4.6
+
+### Patch Changes
+
+- [#175281](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175281)
+  [`f720d2c80d128`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f720d2c80d128) -
+  [ux] Fix inconsistent references in getSelection to state that could cause unhandled exceptions
+
 ## 2.4.5
 
 ### Patch Changes

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSelectionInfo = void 0;
+var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _editorTables = require("@atlaskit/editor-tables");
+var getSelectedRect = function getSelectedRect(selection) {
+  var $anchorCell = selection.$anchorCell,
+    $headCell = selection.$headCell;
+  var table = $anchorCell.node(-1);
+  var map = _editorTables.TableMap.get(table);
+  var start = $anchorCell.start(-1);
+  var rect = map.rectBetween($anchorCell.pos - start, $headCell.pos - start);
+  return rect;
+};
+var getSelectionInfoFromSameNode = function getSelectionInfoFromSameNode(selection) {
+  var $from = selection.$from,
+    $to = selection.$to;
+  return {
+    selectedNode: $from.node(),
+    selectionRanges: [{
+      start: {
+        pointer: "/content/".concat($from.index(), "/text"),
+        position: $from.parentOffset
+      },
+      end: {
+        pointer: "/content/".concat($from.index(), "/text"),
+        position: $to.parentOffset - 1
+      }
+    }]
+  };
+};
+var getSelectionInfoFromCellSelection = function getSelectionInfoFromCellSelection(selection) {
+  var selectedNode = selection.$anchorCell.node(-1);
+  var selectionRanges = [];
+  var rect = getSelectedRect(selection);
+  for (var row = rect.top; row < rect.bottom; row++) {
+    selectionRanges.push({
+      start: {
+        pointer: "/content/".concat(row, "/content/").concat(rect.left)
+      },
+      end: {
+        pointer: "/content/".concat(row, "/content/").concat(rect.right - 1)
+      }
+    });
+  }
+  return {
+    selectedNode: selectedNode,
+    selectionRanges: selectionRanges
+  };
+};
+var getSelectionInfo = exports.getSelectionInfo = function getSelectionInfo(state) {
+  var selection = state.selection;
+  var selectionInfo = {
+    selectedNode: selection.$from.node(),
+    selectionRanges: []
+  };
+  if (selection instanceof _state.TextSelection) {
+    var $from = selection.$from,
+      $to = selection.$to;
+    if ($from.parent === $to.parent) {
+      selectionInfo = getSelectionInfoFromSameNode(selection);
+    } else {
+      // TODO: ED-28405 - when selection spans multiple nodes including nested node, we need to iterate through the nodes
+    }
+  } else if (selection instanceof _editorTables.CellSelection) {
+    selectionInfo = getSelectionInfoFromCellSelection(selection);
+  }
+  var serializer = new _editorJsonTransformer.JSONTransformer();
+  var selectedNodeAdf = serializer.encodeNode(selectionInfo.selectedNode);
+  return {
+    selectedNodeAdf: selectedNodeAdf,
+    selectionRanges: selectionInfo.selectionRanges
+  };
+};

package/dist/cjs/selectionExtensionPlugin.js

@@ -9,15 +9,20 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = _interopRequireDefault(require("react"));
 var _messages = require("@atlaskit/editor-common/messages");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _main = require("./pm-plugins/main");
+var _utils = require("./pm-plugins/utils");
 var _SelectionExtensionComponentWrapper = require("./ui/extension/SelectionExtensionComponentWrapper");
 var _getBoundingBoxFromSelection = require("./ui/getBoundingBoxFromSelection");
+var _selectionToolbar2 = require("./ui/selectionToolbar");
 var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
   var editorViewRef = {
     current: null
   };
+  var cachedSelection;
+  var cachedOverflowMenuOptions;
   return {
     name: 'selectionExtension',
     getSharedState: function getSharedState(editorState) {
@@ -109,7 +114,8 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
           var currentSelection = view.state.selection;
           var from = currentSelection.from,
             to = currentSelection.to;
-          var text = state.doc.textBetween(from, to, '\n');
+          var currentState = (0, _platformFeatureFlags.fg)('platform_editor_fix_get_selection_state_mismatch') ? view.state : state;
+          var text = currentState.doc.textBetween(from, to, '\n');
           var coords = (0, _getBoundingBoxFromSelection.getBoundingBoxFromSelection)(view, from, to);
           return {
             text: text,
@@ -127,10 +133,23 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
                 selection: selection
               }));
             }
-            if (extension.onClick) {
-              extension.onClick({
-                selection: selection
-              });
+            var onClickCallbackOptions = {
+              selection: selection
+            };
+            if ((0, _platformFeatureFlags.fg)('platform_editor_selection_extension_api_v2')) {
+              var _extension$onClick;
+              var _getSelectionInfo = (0, _utils.getSelectionInfo)(view.state),
+                selectedNodeAdf = _getSelectionInfo.selectedNodeAdf,
+                selectionRanges = _getSelectionInfo.selectionRanges;
+              onClickCallbackOptions = {
+                selectedNodeAdf: selectedNodeAdf,
+                selectionRanges: selectionRanges
+              };
+              (_extension$onClick = extension.onClick) === null || _extension$onClick === void 0 || _extension$onClick.call(extension, onClickCallbackOptions);
+            } else {
+              if (extension.onClick) {
+                extension.onClick(onClickCallbackOptions);
+              }
             }
           };
         };
@@ -151,8 +170,32 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
             }
           };
         };
+        var getConfigFromExtensionCallback = function getConfigFromExtensionCallback(extension) {
+          if (typeof extension === 'function') {
+            var _getSelectionInfo2 = (0, _utils.getSelectionInfo)(state),
+              selectedNodeAdf = _getSelectionInfo2.selectedNodeAdf,
+              selectionRanges = _getSelectionInfo2.selectionRanges;
+            return extension({
+              selectedNodeAdf: selectedNodeAdf,
+              selectionRanges: selectionRanges
+            });
+          }
+          return extension;
+        };
+        var prefilterExtensions = function prefilterExtensions(extensions) {
+          // this is to prevent integration issues when passing in a function as an extension
+          // but not having platform_editor_selection_extension_api_v2 FG on
+          if (!(0, _platformFeatureFlags.fg)('platform_editor_selection_extension_api_v2')) {
+            return extensions.filter(function (ext) {
+              return typeof ext !== 'function';
+            });
+          }
+          return extensions;
+        };
         var getFirstPartyExtensions = function getFirstPartyExtensions(extensions) {
-          return extensions.map(function (ext) {
+          var prefilteredExtensions = prefilterExtensions(extensions);
+          return prefilteredExtensions.map(function (extension) {
+            var ext = (0, _platformFeatureFlags.fg)('platform_editor_selection_extension_api_v2') ? getConfigFromExtensionCallback(extension) : extension;
             return convertExtensionToDropdownMenuItem(ext, 30);
           });
         };
@@ -161,9 +204,11 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
          * Add a heading to the external extensions
          */
         var getExternalExtensions = function getExternalExtensions(extensions) {
+          var prefilteredExtensions = prefilterExtensions(extensions);
           var externalExtensions = [];
-          if (extensions !== null && extensions !== void 0 && extensions.length) {
-            externalExtensions = extensions.map(function (ext, index) {
+          if (prefilteredExtensions !== null && prefilteredExtensions !== void 0 && prefilteredExtensions.length) {
+            externalExtensions = prefilteredExtensions.map(function (extension) {
+              var ext = (0, _platformFeatureFlags.fg)('platform_editor_selection_extension_api_v2') ? getConfigFromExtensionCallback(extension) : extension;
               return convertExtensionToDropdownMenuItem(ext);
             });
             var externalExtensionsHeading = {
@@ -174,22 +219,13 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
           }
           return externalExtensions;
         };
+        if (cachedOverflowMenuOptions && state.selection.eq(cachedSelection) && (0, _platformFeatureFlags.fg)('platform_editor_selection_extension_api_v2')) {
+          return (0, _selectionToolbar2.selectionToolbar)(cachedOverflowMenuOptions);
+        }
         var groupedExtensionsArray = [].concat((0, _toConsumableArray2.default)(getFirstPartyExtensions(extensions.firstParty || [])), (0, _toConsumableArray2.default)(getExternalExtensions(extensions.external || [])));
-        var overflowMenu = {
-          type: 'overflow-dropdown',
-          dropdownWidth: 240,
-          supportsViewMode: true,
-          options: groupedExtensionsArray
-        };
-        return {
-          isToolbarAbove: true,
-          items: [{
-            type: 'separator',
-            fullHeight: true,
-            supportsViewMode: true
-          }, overflowMenu],
-          rank: -6
-        };
+        cachedOverflowMenuOptions = groupedExtensionsArray;
+        cachedSelection = state.selection;
+        return (0, _selectionToolbar2.selectionToolbar)(groupedExtensionsArray);
       }
     },
     pmPlugins: function pmPlugins() {

package/dist/cjs/types/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectionExtensionActionTypes = void 0;
+// inspired by content api operation https://bitbucket.org/atlassian/pf-adf-service/src/master/src/lib/update/types.ts
 /**
  * @private
  * @deprecated Use {@link SelectionExtensionPluginOptions} instead.

package/dist/cjs/ui/selectionToolbar.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectionToolbar = void 0;
+var selectionToolbar = exports.selectionToolbar = function selectionToolbar(options) {
+  return {
+    isToolbarAbove: true,
+    items: [{
+      type: 'separator',
+      fullHeight: true,
+      supportsViewMode: true
+    }, {
+      type: 'overflow-dropdown',
+      dropdownWidth: 240,
+      supportsViewMode: true,
+      options: options
+    }],
+    rank: -6
+  };
+};

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

@@ -0,0 +1,78 @@
+import { JSONTransformer } from '@atlaskit/editor-json-transformer';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { CellSelection, TableMap } from '@atlaskit/editor-tables';
+const getSelectedRect = selection => {
+  const {
+    $anchorCell,
+    $headCell
+  } = selection;
+  const table = $anchorCell.node(-1);
+  const map = TableMap.get(table);
+  const start = $anchorCell.start(-1);
+  const rect = map.rectBetween($anchorCell.pos - start, $headCell.pos - start);
+  return rect;
+};
+const getSelectionInfoFromSameNode = selection => {
+  const {
+    $from,
+    $to
+  } = selection;
+  return {
+    selectedNode: $from.node(),
+    selectionRanges: [{
+      start: {
+        pointer: `/content/${$from.index()}/text`,
+        position: $from.parentOffset
+      },
+      end: {
+        pointer: `/content/${$from.index()}/text`,
+        position: $to.parentOffset - 1
+      }
+    }]
+  };
+};
+const getSelectionInfoFromCellSelection = selection => {
+  const selectedNode = selection.$anchorCell.node(-1);
+  const selectionRanges = [];
+  const rect = getSelectedRect(selection);
+  for (let row = rect.top; row < rect.bottom; row++) {
+    selectionRanges.push({
+      start: {
+        pointer: `/content/${row}/content/${rect.left}`
+      },
+      end: {
+        pointer: `/content/${row}/content/${rect.right - 1}`
+      }
+    });
+  }
+  return {
+    selectedNode,
+    selectionRanges
+  };
+};
+export const getSelectionInfo = state => {
+  const selection = state.selection;
+  let selectionInfo = {
+    selectedNode: selection.$from.node(),
+    selectionRanges: []
+  };
+  if (selection instanceof TextSelection) {
+    const {
+      $from,
+      $to
+    } = selection;
+    if ($from.parent === $to.parent) {
+      selectionInfo = getSelectionInfoFromSameNode(selection);
+    } else {
+      // TODO: ED-28405 - when selection spans multiple nodes including nested node, we need to iterate through the nodes
+    }
+  } else if (selection instanceof CellSelection) {
+    selectionInfo = getSelectionInfoFromCellSelection(selection);
+  }
+  const serializer = new JSONTransformer();
+  const selectedNodeAdf = serializer.encodeNode(selectionInfo.selectedNode);
+  return {
+    selectedNodeAdf,
+    selectionRanges: selectionInfo.selectionRanges
+  };
+};

package/dist/es2019/selectionExtensionPlugin.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { selectionExtensionMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createPlugin, selectionExtensionPluginKey } from './pm-plugins/main';
+import { getSelectionInfo } from './pm-plugins/utils';
 import { SelectionExtensionComponentWrapper } from './ui/extension/SelectionExtensionComponentWrapper';
 import { getBoundingBoxFromSelection } from './ui/getBoundingBoxFromSelection';
+import { selectionToolbar } from './ui/selectionToolbar';
 export const selectionExtensionPlugin = ({
   api,
   config
@@ -11,6 +14,8 @@ export const selectionExtensionPlugin = ({
   const editorViewRef = {
     current: null
   };
+  let cachedSelection;
+  let cachedOverflowMenuOptions;
   return {
     name: 'selectionExtension',
     getSharedState(editorState) {
@@ -107,7 +112,8 @@ export const selectionExtensionPlugin = ({
             from,
             to
           } = currentSelection;
-          const text = state.doc.textBetween(from, to, '\n');
+          const currentState = fg('platform_editor_fix_get_selection_state_mismatch') ? view.state : state;
+          const text = currentState.doc.textBetween(from, to, '\n');
           const coords = getBoundingBoxFromSelection(view, from, to);
           return {
             text,
@@ -124,10 +130,24 @@ export const selectionExtensionPlugin = ({
               selection
             }));
           }
-          if (extension.onClick) {
-            extension.onClick({
-              selection
-            });
+          let onClickCallbackOptions = {
+            selection
+          };
+          if (fg('platform_editor_selection_extension_api_v2')) {
+            var _extension$onClick;
+            const {
+              selectedNodeAdf,
+              selectionRanges
+            } = getSelectionInfo(view.state);
+            onClickCallbackOptions = {
+              selectedNodeAdf,
+              selectionRanges
+            };
+            (_extension$onClick = extension.onClick) === null || _extension$onClick === void 0 ? void 0 : _extension$onClick.call(extension, onClickCallbackOptions);
+          } else {
+            if (extension.onClick) {
+              extension.onClick(onClickCallbackOptions);
+            }
           }
         };
         const convertExtensionToDropdownMenuItem = (extension, rank) => {
@@ -147,17 +167,46 @@ export const selectionExtensionPlugin = ({
             }
           };
         };
+        const getConfigFromExtensionCallback = extension => {
+          if (typeof extension === 'function') {
+            const {
+              selectedNodeAdf,
+              selectionRanges
+            } = getSelectionInfo(state);
+            return extension({
+              selectedNodeAdf,
+              selectionRanges
+            });
+          }
+          return extension;
+        };
+        const prefilterExtensions = extensions => {
+          // this is to prevent integration issues when passing in a function as an extension
+          // but not having platform_editor_selection_extension_api_v2 FG on
+          if (!fg('platform_editor_selection_extension_api_v2')) {
+            return extensions.filter(ext => typeof ext !== 'function');
+          }
+          return extensions;
+        };
         const getFirstPartyExtensions = extensions => {
-          return extensions.map(ext => convertExtensionToDropdownMenuItem(ext, 30));
+          const prefilteredExtensions = prefilterExtensions(extensions);
+          return prefilteredExtensions.map(extension => {
+            const ext = fg('platform_editor_selection_extension_api_v2') ? getConfigFromExtensionCallback(extension) : extension;
+            return convertExtensionToDropdownMenuItem(ext, 30);
+          });
         };
 
         /**
          * Add a heading to the external extensions
          */
         const getExternalExtensions = extensions => {
+          const prefilteredExtensions = prefilterExtensions(extensions);
           let externalExtensions = [];
-          if (extensions !== null && extensions !== void 0 && extensions.length) {
-            externalExtensions = extensions.map((ext, index) => convertExtensionToDropdownMenuItem(ext));
+          if (prefilteredExtensions !== null && prefilteredExtensions !== void 0 && prefilteredExtensions.length) {
+            externalExtensions = prefilteredExtensions.map(extension => {
+              const ext = fg('platform_editor_selection_extension_api_v2') ? getConfigFromExtensionCallback(extension) : extension;
+              return convertExtensionToDropdownMenuItem(ext);
+            });
             const externalExtensionsHeading = {
               type: 'overflow-dropdown-heading',
               title: intl.formatMessage(selectionExtensionMessages.externalExtensionsHeading)
@@ -166,22 +215,13 @@ export const selectionExtensionPlugin = ({
           }
           return externalExtensions;
         };
+        if (cachedOverflowMenuOptions && state.selection.eq(cachedSelection) && fg('platform_editor_selection_extension_api_v2')) {
+          return selectionToolbar(cachedOverflowMenuOptions);
+        }
         const groupedExtensionsArray = [...getFirstPartyExtensions(extensions.firstParty || []), ...getExternalExtensions(extensions.external || [])];
-        const overflowMenu = {
-          type: 'overflow-dropdown',
-          dropdownWidth: 240,
-          supportsViewMode: true,
-          options: groupedExtensionsArray
-        };
-        return {
-          isToolbarAbove: true,
-          items: [{
-            type: 'separator',
-            fullHeight: true,
-            supportsViewMode: true
-          }, overflowMenu],
-          rank: -6
-        };
+        cachedOverflowMenuOptions = groupedExtensionsArray;
+        cachedSelection = state.selection;
+        return selectionToolbar(groupedExtensionsArray);
       }
     },
     pmPlugins: () => [{

package/dist/es2019/types/index.js

@@ -1,3 +1,5 @@
+// inspired by content api operation https://bitbucket.org/atlassian/pf-adf-service/src/master/src/lib/update/types.ts
+
 /**
  * @private
  * @deprecated Use {@link SelectionExtensionPluginOptions} instead.

package/dist/es2019/ui/selectionToolbar.js

@@ -0,0 +1,14 @@
+export const selectionToolbar = options => ({
+  isToolbarAbove: true,
+  items: [{
+    type: 'separator',
+    fullHeight: true,
+    supportsViewMode: true
+  }, {
+    type: 'overflow-dropdown',
+    dropdownWidth: 240,
+    supportsViewMode: true,
+    options
+  }],
+  rank: -6
+});

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

@@ -0,0 +1,72 @@
+import { JSONTransformer } from '@atlaskit/editor-json-transformer';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { CellSelection, TableMap } from '@atlaskit/editor-tables';
+var getSelectedRect = function getSelectedRect(selection) {
+  var $anchorCell = selection.$anchorCell,
+    $headCell = selection.$headCell;
+  var table = $anchorCell.node(-1);
+  var map = TableMap.get(table);
+  var start = $anchorCell.start(-1);
+  var rect = map.rectBetween($anchorCell.pos - start, $headCell.pos - start);
+  return rect;
+};
+var getSelectionInfoFromSameNode = function getSelectionInfoFromSameNode(selection) {
+  var $from = selection.$from,
+    $to = selection.$to;
+  return {
+    selectedNode: $from.node(),
+    selectionRanges: [{
+      start: {
+        pointer: "/content/".concat($from.index(), "/text"),
+        position: $from.parentOffset
+      },
+      end: {
+        pointer: "/content/".concat($from.index(), "/text"),
+        position: $to.parentOffset - 1
+      }
+    }]
+  };
+};
+var getSelectionInfoFromCellSelection = function getSelectionInfoFromCellSelection(selection) {
+  var selectedNode = selection.$anchorCell.node(-1);
+  var selectionRanges = [];
+  var rect = getSelectedRect(selection);
+  for (var row = rect.top; row < rect.bottom; row++) {
+    selectionRanges.push({
+      start: {
+        pointer: "/content/".concat(row, "/content/").concat(rect.left)
+      },
+      end: {
+        pointer: "/content/".concat(row, "/content/").concat(rect.right - 1)
+      }
+    });
+  }
+  return {
+    selectedNode: selectedNode,
+    selectionRanges: selectionRanges
+  };
+};
+export var getSelectionInfo = function getSelectionInfo(state) {
+  var selection = state.selection;
+  var selectionInfo = {
+    selectedNode: selection.$from.node(),
+    selectionRanges: []
+  };
+  if (selection instanceof TextSelection) {
+    var $from = selection.$from,
+      $to = selection.$to;
+    if ($from.parent === $to.parent) {
+      selectionInfo = getSelectionInfoFromSameNode(selection);
+    } else {
+      // TODO: ED-28405 - when selection spans multiple nodes including nested node, we need to iterate through the nodes
+    }
+  } else if (selection instanceof CellSelection) {
+    selectionInfo = getSelectionInfoFromCellSelection(selection);
+  }
+  var serializer = new JSONTransformer();
+  var selectedNodeAdf = serializer.encodeNode(selectionInfo.selectedNode);
+  return {
+    selectedNodeAdf: selectedNodeAdf,
+    selectionRanges: selectionInfo.selectionRanges
+  };
+};

package/dist/esm/selectionExtensionPlugin.js

@@ -2,15 +2,20 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
 import { selectionExtensionMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createPlugin, selectionExtensionPluginKey } from './pm-plugins/main';
+import { getSelectionInfo } from './pm-plugins/utils';
 import { SelectionExtensionComponentWrapper } from './ui/extension/SelectionExtensionComponentWrapper';
 import { getBoundingBoxFromSelection } from './ui/getBoundingBoxFromSelection';
+import { selectionToolbar as _selectionToolbar } from './ui/selectionToolbar';
 export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
   var editorViewRef = {
     current: null
   };
+  var cachedSelection;
+  var cachedOverflowMenuOptions;
   return {
     name: 'selectionExtension',
     getSharedState: function getSharedState(editorState) {
@@ -102,7 +107,8 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
           var currentSelection = view.state.selection;
           var from = currentSelection.from,
             to = currentSelection.to;
-          var text = state.doc.textBetween(from, to, '\n');
+          var currentState = fg('platform_editor_fix_get_selection_state_mismatch') ? view.state : state;
+          var text = currentState.doc.textBetween(from, to, '\n');
           var coords = getBoundingBoxFromSelection(view, from, to);
           return {
             text: text,
@@ -120,10 +126,23 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
                 selection: selection
               }));
             }
-            if (extension.onClick) {
-              extension.onClick({
-                selection: selection
-              });
+            var onClickCallbackOptions = {
+              selection: selection
+            };
+            if (fg('platform_editor_selection_extension_api_v2')) {
+              var _extension$onClick;
+              var _getSelectionInfo = getSelectionInfo(view.state),
+                selectedNodeAdf = _getSelectionInfo.selectedNodeAdf,
+                selectionRanges = _getSelectionInfo.selectionRanges;
+              onClickCallbackOptions = {
+                selectedNodeAdf: selectedNodeAdf,
+                selectionRanges: selectionRanges
+              };
+              (_extension$onClick = extension.onClick) === null || _extension$onClick === void 0 || _extension$onClick.call(extension, onClickCallbackOptions);
+            } else {
+              if (extension.onClick) {
+                extension.onClick(onClickCallbackOptions);
+              }
             }
           };
         };
@@ -144,8 +163,32 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
             }
           };
         };
+        var getConfigFromExtensionCallback = function getConfigFromExtensionCallback(extension) {
+          if (typeof extension === 'function') {
+            var _getSelectionInfo2 = getSelectionInfo(state),
+              selectedNodeAdf = _getSelectionInfo2.selectedNodeAdf,
+              selectionRanges = _getSelectionInfo2.selectionRanges;
+            return extension({
+              selectedNodeAdf: selectedNodeAdf,
+              selectionRanges: selectionRanges
+            });
+          }
+          return extension;
+        };
+        var prefilterExtensions = function prefilterExtensions(extensions) {
+          // this is to prevent integration issues when passing in a function as an extension
+          // but not having platform_editor_selection_extension_api_v2 FG on
+          if (!fg('platform_editor_selection_extension_api_v2')) {
+            return extensions.filter(function (ext) {
+              return typeof ext !== 'function';
+            });
+          }
+          return extensions;
+        };
         var getFirstPartyExtensions = function getFirstPartyExtensions(extensions) {
-          return extensions.map(function (ext) {
+          var prefilteredExtensions = prefilterExtensions(extensions);
+          return prefilteredExtensions.map(function (extension) {
+            var ext = fg('platform_editor_selection_extension_api_v2') ? getConfigFromExtensionCallback(extension) : extension;
             return convertExtensionToDropdownMenuItem(ext, 30);
           });
         };
@@ -154,9 +197,11 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
          * Add a heading to the external extensions
          */
         var getExternalExtensions = function getExternalExtensions(extensions) {
+          var prefilteredExtensions = prefilterExtensions(extensions);
           var externalExtensions = [];
-          if (extensions !== null && extensions !== void 0 && extensions.length) {
-            externalExtensions = extensions.map(function (ext, index) {
+          if (prefilteredExtensions !== null && prefilteredExtensions !== void 0 && prefilteredExtensions.length) {
+            externalExtensions = prefilteredExtensions.map(function (extension) {
+              var ext = fg('platform_editor_selection_extension_api_v2') ? getConfigFromExtensionCallback(extension) : extension;
               return convertExtensionToDropdownMenuItem(ext);
             });
             var externalExtensionsHeading = {
@@ -167,22 +212,13 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
           }
           return externalExtensions;
         };
+        if (cachedOverflowMenuOptions && state.selection.eq(cachedSelection) && fg('platform_editor_selection_extension_api_v2')) {
+          return _selectionToolbar(cachedOverflowMenuOptions);
+        }
         var groupedExtensionsArray = [].concat(_toConsumableArray(getFirstPartyExtensions(extensions.firstParty || [])), _toConsumableArray(getExternalExtensions(extensions.external || [])));
-        var overflowMenu = {
-          type: 'overflow-dropdown',
-          dropdownWidth: 240,
-          supportsViewMode: true,
-          options: groupedExtensionsArray
-        };
-        return {
-          isToolbarAbove: true,
-          items: [{
-            type: 'separator',
-            fullHeight: true,
-            supportsViewMode: true
-          }, overflowMenu],
-          rank: -6
-        };
+        cachedOverflowMenuOptions = groupedExtensionsArray;
+        cachedSelection = state.selection;
+        return _selectionToolbar(groupedExtensionsArray);
       }
     },
     pmPlugins: function pmPlugins() {

package/dist/esm/types/index.js

@@ -1,3 +1,5 @@
+// inspired by content api operation https://bitbucket.org/atlassian/pf-adf-service/src/master/src/lib/update/types.ts
+
 /**
  * @private
  * @deprecated Use {@link SelectionExtensionPluginOptions} instead.

package/dist/esm/ui/selectionToolbar.js

@@ -0,0 +1,16 @@
+export var selectionToolbar = function selectionToolbar(options) {
+  return {
+    isToolbarAbove: true,
+    items: [{
+      type: 'separator',
+      fullHeight: true,
+      supportsViewMode: true
+    }, {
+      type: 'overflow-dropdown',
+      dropdownWidth: 240,
+      supportsViewMode: true,
+      options: options
+    }],
+    rank: -6
+  };
+};

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

@@ -0,0 +1,3 @@
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type SelectionExtensionFnOptions } from '../../types';
+export declare const getSelectionInfo: (state: EditorState) => SelectionExtensionFnOptions;

package/dist/types/types/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { type MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { ViewMode } from '@atlaskit/editor-plugin-editor-viewmode';
 export type MenuItemsType = Array<{
@@ -10,6 +11,8 @@ export type SelectionExtensionComponentProps = {
 };
 export type SelectionExtensionCallbackOptions = {
     selection?: SelectionExtensionSelectionInfo;
+    selectedNodeAdf?: ADFEntity;
+    selectionRanges?: SelectionRange[];
 };
 export type SelectionExtensionSelectionInfo = {
     text: string;
@@ -32,9 +35,23 @@ export type SelectionExtension = {
     onClick?: (params: SelectionExtensionCallbackOptions) => void;
     component?: React.ComponentType<SelectionExtensionComponentProps>;
 };
+export type SelectionPointer = {
+    pointer: string;
+    position?: number;
+};
+export type SelectionRange = {
+    start: SelectionPointer;
+    end: SelectionPointer;
+};
+export type SelectionExtensionFnOptions = {
+    selectedNodeAdf: ADFEntity;
+    selectionRanges: SelectionRange[];
+};
+export type SelectionExtensionFn = ({ selectedNodeAdf, selectionRanges, }: SelectionExtensionFnOptions) => SelectionExtension;
+export type SelectionExtensionConfig = SelectionExtension | SelectionExtensionFn;
 export type SelectionExtensions = {
-    firstParty?: SelectionExtension[];
-    external?: SelectionExtension[];
+    firstParty?: SelectionExtensionConfig[];
+    external?: SelectionExtensionConfig[];
 };
 type SelectionExtensionModes = ViewMode;
 export type SelectionExtensionPluginOptions = {

package/dist/types/ui/selectionToolbar.d.ts

@@ -0,0 +1,18 @@
+import { type Command, type FloatingToolbarOverflowDropdownOptions } from '@atlaskit/editor-common/types';
+export declare const selectionToolbar: (options: FloatingToolbarOverflowDropdownOptions<Command>) => {
+    isToolbarAbove: boolean;
+    items: ({
+        type: "separator";
+        fullHeight: boolean;
+        supportsViewMode: boolean;
+        dropdownWidth?: undefined;
+        options?: undefined;
+    } | {
+        type: "overflow-dropdown";
+        dropdownWidth: number;
+        supportsViewMode: boolean;
+        options: FloatingToolbarOverflowDropdownOptions<Command>;
+        fullHeight?: undefined;
+    })[];
+    rank: number;
+};

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

@@ -0,0 +1,3 @@
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type SelectionExtensionFnOptions } from '../../types';
+export declare const getSelectionInfo: (state: EditorState) => SelectionExtensionFnOptions;

package/dist/types-ts4.5/types/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { type MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { ViewMode } from '@atlaskit/editor-plugin-editor-viewmode';
 export type MenuItemsType = Array<{
@@ -10,6 +11,8 @@ export type SelectionExtensionComponentProps = {
 };
 export type SelectionExtensionCallbackOptions = {
     selection?: SelectionExtensionSelectionInfo;
+    selectedNodeAdf?: ADFEntity;
+    selectionRanges?: SelectionRange[];
 };
 export type SelectionExtensionSelectionInfo = {
     text: string;
@@ -32,9 +35,23 @@ export type SelectionExtension = {
     onClick?: (params: SelectionExtensionCallbackOptions) => void;
     component?: React.ComponentType<SelectionExtensionComponentProps>;
 };
+export type SelectionPointer = {
+    pointer: string;
+    position?: number;
+};
+export type SelectionRange = {
+    start: SelectionPointer;
+    end: SelectionPointer;
+};
+export type SelectionExtensionFnOptions = {
+    selectedNodeAdf: ADFEntity;
+    selectionRanges: SelectionRange[];
+};
+export type SelectionExtensionFn = ({ selectedNodeAdf, selectionRanges, }: SelectionExtensionFnOptions) => SelectionExtension;
+export type SelectionExtensionConfig = SelectionExtension | SelectionExtensionFn;
 export type SelectionExtensions = {
-    firstParty?: SelectionExtension[];
-    external?: SelectionExtension[];
+    firstParty?: SelectionExtensionConfig[];
+    external?: SelectionExtensionConfig[];
 };
 type SelectionExtensionModes = ViewMode;
 export type SelectionExtensionPluginOptions = {

package/dist/types-ts4.5/ui/selectionToolbar.d.ts

@@ -0,0 +1,18 @@
+import { type Command, type FloatingToolbarOverflowDropdownOptions } from '@atlaskit/editor-common/types';
+export declare const selectionToolbar: (options: FloatingToolbarOverflowDropdownOptions<Command>) => {
+    isToolbarAbove: boolean;
+    items: ({
+        type: "separator";
+        fullHeight: boolean;
+        supportsViewMode: boolean;
+        dropdownWidth?: undefined;
+        options?: undefined;
+    } | {
+        type: "overflow-dropdown";
+        dropdownWidth: number;
+        supportsViewMode: boolean;
+        options: FloatingToolbarOverflowDropdownOptions<Command>;
+        fullHeight?: undefined;
+    })[];
+    rank: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-extension",
-	"version": "2.4.5",
+	"version": "2.4.7",
 	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -9,7 +9,6 @@
 	},
 	"atlassian": {
 		"team": "Editor: Core Experiences",
-		"runReact18": true,
 		"website": {
 			"name": "EditorPluginSelectionExtension",
 			"category": "Layout and structure"
@@ -36,15 +35,18 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^107.0.0",
+		"@atlaskit/adf-utils": "^19.20.0",
+		"@atlaskit/editor-common": "^107.6.0",
+		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
-		"@atlaskit/editor-plugin-selection-toolbar": "^3.7.0",
+		"@atlaskit/editor-plugin-selection-toolbar": "^3.8.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/icon": "^27.0.0",
+		"@atlaskit/editor-tables": "^2.9.0",
+		"@atlaskit/icon": "^27.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.9.0",
-		"@atlaskit/tmp-editor-statsig": "^8.0.0",
+		"@atlaskit/primitives": "^14.10.0",
+		"@atlaskit/tmp-editor-statsig": "^8.7.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1",
 		"uuid": "^3.1.0"
@@ -99,5 +101,13 @@
 				"import-no-extraneous-disable-for-examples-and-docs"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform_editor_selection_extension_api_v2": {
+			"type": "boolean"
+		},
+		"platform_editor_fix_get_selection_state_mismatch": {
+			"type": "boolean"
+		}
 	}
 }