@atlaskit/editor-plugin-selection-extension 2.1.5 → 2.1.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 2.1.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.5
 
 ### Patch Changes

package/dist/cjs/selectionExtensionPlugin.js

@@ -5,14 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectionExtensionPlugin = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _main = require("./pm-plugins/main");
 var _SelectionExtensionComponentWrapper = require("./ui/extension/SelectionExtensionComponentWrapper");
 var _getBoundingBoxFromSelection = require("./ui/getBoundingBoxFromSelection");
-var _SelectionExtensionItems = require("./ui/toolbar/SelectionExtensionItems");
 var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
+  var editorViewRef = {
+    current: null
+  };
   return {
     name: 'selectionExtension',
     getSharedState: function getSharedState(editorState) {
@@ -63,7 +67,7 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
          *
          * Check whether plugin contains any selection extensions
          */
-        if (!extensions || extensions.length === 0) {
+        if (!(extensions !== null && extensions !== void 0 && extensions.firstParty) && !(extensions !== null && extensions !== void 0 && extensions.external)) {
           return;
         }
 
@@ -99,23 +103,22 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
         if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
           return;
         }
+        var getSelection = function getSelection(view) {
+          var currentSelection = state.selection;
+          var from = currentSelection.from,
+            to = currentSelection.to;
+          var text = state.doc.textBetween(from, to, '\n');
+          var coords = (0, _getBoundingBoxFromSelection.getBoundingBoxFromSelection)(view, from, to);
+          return {
+            text: text,
+            from: from,
+            to: to,
+            coords: coords
+          };
+        };
         var handleOnExtensionClick = function handleOnExtensionClick(view) {
           return function (extension) {
-            var currentSelection = state.selection;
-            var from = currentSelection.from,
-              to = currentSelection.to;
-            var text = state.doc.textBetween(from, to, '\n');
-            var coords = (0, _getBoundingBoxFromSelection.getBoundingBoxFromSelection)(view, from, to);
-            var selection = {
-              text: text,
-              selection: {
-                from: from,
-                to: to
-              },
-              coords: coords
-            };
-
-            // Render component here
+            var selection = getSelection(view);
             if (extension.component) {
               api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.setActiveExtension({
                 extension: extension,
@@ -123,35 +126,66 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
               }));
             }
             if (extension.onClick) {
-              extension.onClick(selection);
+              extension.onClick({
+                selection: selection
+              });
             }
           };
         };
+        var convertExtensionToDropdownMenuItem = function convertExtensionToDropdownMenuItem(extension, rank) {
+          var _extension$isDisabled;
+          return {
+            title: extension.name,
+            icon: extension.icon ? /*#__PURE__*/_react.default.createElement(extension.icon, {
+              label: ''
+            }) : undefined,
+            disabled: extension === null || extension === void 0 || (_extension$isDisabled = extension.isDisabled) === null || _extension$isDisabled === void 0 ? void 0 : _extension$isDisabled.call(extension, {
+              selection: editorViewRef.current ? getSelection(editorViewRef.current) : undefined
+            }),
+            rank: rank,
+            onClick: function onClick() {
+              editorViewRef.current && handleOnExtensionClick(editorViewRef.current)(extension);
+              return true;
+            }
+          };
+        };
+        var getFirstPartyExtensions = function getFirstPartyExtensions(extensions) {
+          return extensions.map(function (ext) {
+            return convertExtensionToDropdownMenuItem(ext, 30);
+          });
+        };
 
         /**
-         * Renders custom dropdown menu with active selection extensions
+         * Add a heading to the external extensions
          */
-        var selectionExtensionDropdown = {
-          type: 'custom',
-          supportsViewMode: true,
-          render: function render(view) {
-            var _api$analytics2;
-            if (!view) {
-              return;
-            }
-            return /*#__PURE__*/_react.default.createElement(_SelectionExtensionItems.SelectionExtensionItems, {
-              api: api,
-              editorView: view,
-              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
-              extensions: extensions,
-              onExtensionClick: handleOnExtensionClick(view)
+        var getExternalExtensions = function getExternalExtensions(extensions) {
+          var externalExtensions = [];
+          if (extensions !== null && extensions !== void 0 && extensions.length) {
+            externalExtensions = extensions.map(function (ext, index) {
+              return convertExtensionToDropdownMenuItem(ext);
             });
-          },
-          fallback: []
+            var externalExtensionsHeading = {
+              type: 'overflow-dropdown-heading',
+              title: 'Apps'
+            };
+            externalExtensions.unshift(externalExtensionsHeading);
+          }
+          return externalExtensions;
+        };
+        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: [selectionExtensionDropdown],
+          items: [{
+            type: 'separator',
+            fullHeight: true,
+            supportsViewMode: true
+          }, overflowMenu],
           rank: -6
         };
       }
@@ -162,6 +196,20 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
         plugin: function plugin() {
           return (0, _main.createPlugin)();
         }
+      }, {
+        name: 'selectionExtensionGetEditorViewReferencePlugin',
+        plugin: function plugin() {
+          return new _safePlugin.SafePlugin({
+            view: function view(editorView) {
+              editorViewRef.current = editorView;
+              return {
+                destroy: function destroy() {
+                  editorViewRef.current = null;
+                }
+              };
+            }
+          });
+        }
       }];
     }
   };

package/dist/es2019/selectionExtensionPlugin.js

@@ -1,12 +1,15 @@
 import React from 'react';
-import { selectionExtensionPluginKey, createPlugin } from './pm-plugins/main';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { createPlugin, selectionExtensionPluginKey } from './pm-plugins/main';
 import { SelectionExtensionComponentWrapper } from './ui/extension/SelectionExtensionComponentWrapper';
 import { getBoundingBoxFromSelection } from './ui/getBoundingBoxFromSelection';
-import { SelectionExtensionItems } from './ui/toolbar/SelectionExtensionItems';
 export const selectionExtensionPlugin = ({
   api,
   config
 }) => {
+  const editorViewRef = {
+    current: null
+  };
   return {
     name: 'selectionExtension',
     getSharedState(editorState) {
@@ -58,7 +61,7 @@ export const selectionExtensionPlugin = ({
          *
          * Check whether plugin contains any selection extensions
          */
-        if (!extensions || extensions.length === 0) {
+        if (!(extensions !== null && extensions !== void 0 && extensions.firstParty) && !(extensions !== null && extensions !== void 0 && extensions.external)) {
           return;
         }
 
@@ -94,7 +97,7 @@ export const selectionExtensionPlugin = ({
         if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
           return;
         }
-        const handleOnExtensionClick = view => extension => {
+        const getSelection = view => {
           const {
             selection: currentSelection
           } = state;
@@ -104,16 +107,15 @@ export const selectionExtensionPlugin = ({
           } = currentSelection;
           const text = state.doc.textBetween(from, to, '\n');
           const coords = getBoundingBoxFromSelection(view, from, to);
-          const selection = {
+          return {
             text,
-            selection: {
-              from,
-              to
-            },
+            from,
+            to,
             coords
           };
-
-          // Render component here
+        };
+        const handleOnExtensionClick = view => extension => {
+          const selection = getSelection(view);
           if (extension.component) {
             api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.setActiveExtension({
               extension,
@@ -121,34 +123,61 @@ export const selectionExtensionPlugin = ({
             }));
           }
           if (extension.onClick) {
-            extension.onClick(selection);
+            extension.onClick({
+              selection
+            });
           }
         };
+        const convertExtensionToDropdownMenuItem = (extension, rank) => {
+          var _extension$isDisabled;
+          return {
+            title: extension.name,
+            icon: extension.icon ? /*#__PURE__*/React.createElement(extension.icon, {
+              label: ''
+            }) : undefined,
+            disabled: extension === null || extension === void 0 ? void 0 : (_extension$isDisabled = extension.isDisabled) === null || _extension$isDisabled === void 0 ? void 0 : _extension$isDisabled.call(extension, {
+              selection: editorViewRef.current ? getSelection(editorViewRef.current) : undefined
+            }),
+            rank,
+            onClick: () => {
+              editorViewRef.current && handleOnExtensionClick(editorViewRef.current)(extension);
+              return true;
+            }
+          };
+        };
+        const getFirstPartyExtensions = extensions => {
+          return extensions.map(ext => convertExtensionToDropdownMenuItem(ext, 30));
+        };
 
         /**
-         * Renders custom dropdown menu with active selection extensions
+         * Add a heading to the external extensions
          */
-        const selectionExtensionDropdown = {
-          type: 'custom',
+        const getExternalExtensions = extensions => {
+          let externalExtensions = [];
+          if (extensions !== null && extensions !== void 0 && extensions.length) {
+            externalExtensions = extensions.map((ext, index) => convertExtensionToDropdownMenuItem(ext));
+            const externalExtensionsHeading = {
+              type: 'overflow-dropdown-heading',
+              title: 'Apps'
+            };
+            externalExtensions.unshift(externalExtensionsHeading);
+          }
+          return externalExtensions;
+        };
+        const groupedExtensionsArray = [...getFirstPartyExtensions(extensions.firstParty || []), ...getExternalExtensions(extensions.external || [])];
+        const overflowMenu = {
+          type: 'overflow-dropdown',
+          dropdownWidth: 240,
           supportsViewMode: true,
-          render: view => {
-            var _api$analytics2;
-            if (!view) {
-              return;
-            }
-            return /*#__PURE__*/React.createElement(SelectionExtensionItems, {
-              api: api,
-              editorView: view,
-              editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
-              extensions: extensions,
-              onExtensionClick: handleOnExtensionClick(view)
-            });
-          },
-          fallback: []
+          options: groupedExtensionsArray
         };
         return {
           isToolbarAbove: true,
-          items: [selectionExtensionDropdown],
+          items: [{
+            type: 'separator',
+            fullHeight: true,
+            supportsViewMode: true
+          }, overflowMenu],
           rank: -6
         };
       }
@@ -156,6 +185,20 @@ export const selectionExtensionPlugin = ({
     pmPlugins: () => [{
       name: 'selectionExtension',
       plugin: () => createPlugin()
+    }, {
+      name: 'selectionExtensionGetEditorViewReferencePlugin',
+      plugin: () => {
+        return new SafePlugin({
+          view: editorView => {
+            editorViewRef.current = editorView;
+            return {
+              destroy: () => {
+                editorViewRef.current = null;
+              }
+            };
+          }
+        });
+      }
     }]
   };
 };

package/dist/esm/selectionExtensionPlugin.js

@@ -1,11 +1,15 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
-import { selectionExtensionPluginKey, createPlugin } from './pm-plugins/main';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { createPlugin, selectionExtensionPluginKey } from './pm-plugins/main';
 import { SelectionExtensionComponentWrapper } from './ui/extension/SelectionExtensionComponentWrapper';
 import { getBoundingBoxFromSelection } from './ui/getBoundingBoxFromSelection';
-import { SelectionExtensionItems } from './ui/toolbar/SelectionExtensionItems';
 export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
+  var editorViewRef = {
+    current: null
+  };
   return {
     name: 'selectionExtension',
     getSharedState: function getSharedState(editorState) {
@@ -56,7 +60,7 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
          *
          * Check whether plugin contains any selection extensions
          */
-        if (!extensions || extensions.length === 0) {
+        if (!(extensions !== null && extensions !== void 0 && extensions.firstParty) && !(extensions !== null && extensions !== void 0 && extensions.external)) {
           return;
         }
 
@@ -92,23 +96,22 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
         if (selectionExtensionState !== null && selectionExtensionState !== void 0 && selectionExtensionState.activeExtension) {
           return;
         }
+        var getSelection = function getSelection(view) {
+          var currentSelection = state.selection;
+          var from = currentSelection.from,
+            to = currentSelection.to;
+          var text = state.doc.textBetween(from, to, '\n');
+          var coords = getBoundingBoxFromSelection(view, from, to);
+          return {
+            text: text,
+            from: from,
+            to: to,
+            coords: coords
+          };
+        };
         var handleOnExtensionClick = function handleOnExtensionClick(view) {
           return function (extension) {
-            var currentSelection = state.selection;
-            var from = currentSelection.from,
-              to = currentSelection.to;
-            var text = state.doc.textBetween(from, to, '\n');
-            var coords = getBoundingBoxFromSelection(view, from, to);
-            var selection = {
-              text: text,
-              selection: {
-                from: from,
-                to: to
-              },
-              coords: coords
-            };
-
-            // Render component here
+            var selection = getSelection(view);
             if (extension.component) {
               api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.selectionExtension.commands.setActiveExtension({
                 extension: extension,
@@ -116,35 +119,66 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
               }));
             }
             if (extension.onClick) {
-              extension.onClick(selection);
+              extension.onClick({
+                selection: selection
+              });
             }
           };
         };
+        var convertExtensionToDropdownMenuItem = function convertExtensionToDropdownMenuItem(extension, rank) {
+          var _extension$isDisabled;
+          return {
+            title: extension.name,
+            icon: extension.icon ? /*#__PURE__*/React.createElement(extension.icon, {
+              label: ''
+            }) : undefined,
+            disabled: extension === null || extension === void 0 || (_extension$isDisabled = extension.isDisabled) === null || _extension$isDisabled === void 0 ? void 0 : _extension$isDisabled.call(extension, {
+              selection: editorViewRef.current ? getSelection(editorViewRef.current) : undefined
+            }),
+            rank: rank,
+            onClick: function onClick() {
+              editorViewRef.current && handleOnExtensionClick(editorViewRef.current)(extension);
+              return true;
+            }
+          };
+        };
+        var getFirstPartyExtensions = function getFirstPartyExtensions(extensions) {
+          return extensions.map(function (ext) {
+            return convertExtensionToDropdownMenuItem(ext, 30);
+          });
+        };
 
         /**
-         * Renders custom dropdown menu with active selection extensions
+         * Add a heading to the external extensions
          */
-        var selectionExtensionDropdown = {
-          type: 'custom',
-          supportsViewMode: true,
-          render: function render(view) {
-            var _api$analytics2;
-            if (!view) {
-              return;
-            }
-            return /*#__PURE__*/React.createElement(SelectionExtensionItems, {
-              api: api,
-              editorView: view,
-              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
-              extensions: extensions,
-              onExtensionClick: handleOnExtensionClick(view)
+        var getExternalExtensions = function getExternalExtensions(extensions) {
+          var externalExtensions = [];
+          if (extensions !== null && extensions !== void 0 && extensions.length) {
+            externalExtensions = extensions.map(function (ext, index) {
+              return convertExtensionToDropdownMenuItem(ext);
             });
-          },
-          fallback: []
+            var externalExtensionsHeading = {
+              type: 'overflow-dropdown-heading',
+              title: 'Apps'
+            };
+            externalExtensions.unshift(externalExtensionsHeading);
+          }
+          return externalExtensions;
+        };
+        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: [selectionExtensionDropdown],
+          items: [{
+            type: 'separator',
+            fullHeight: true,
+            supportsViewMode: true
+          }, overflowMenu],
           rank: -6
         };
       }
@@ -155,6 +189,20 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
         plugin: function plugin() {
           return createPlugin();
         }
+      }, {
+        name: 'selectionExtensionGetEditorViewReferencePlugin',
+        plugin: function plugin() {
+          return new SafePlugin({
+            view: function view(editorView) {
+              editorViewRef.current = editorView;
+              return {
+                destroy: function destroy() {
+                  editorViewRef.current = null;
+                }
+              };
+            }
+          });
+        }
       }];
     }
   };

package/dist/types/selectionExtensionPluginType.d.ts

@@ -1,8 +1,8 @@
-import type { NextEditorPlugin, OptionalPlugin, EditorCommand } from '@atlaskit/editor-common/types';
+import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
-import type { SelectionExtensionPluginConfiguration, SelectionExtensionPluginState, SelectionExtensionContract, SelectionExtensionSelectType } from './types';
+import type { SelectionExtension, SelectionExtensionPluginConfiguration, SelectionExtensionPluginState, SelectionExtensionSelectionInfo } from './types';
 export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
     pluginConfiguration: SelectionExtensionPluginConfiguration | undefined;
     dependencies: [
@@ -13,8 +13,8 @@ export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
     sharedState: SelectionExtensionPluginState | null;
     commands: {
         setActiveExtension: ({ extension, selection, }: {
-            extension: SelectionExtensionContract;
-            selection: SelectionExtensionSelectType;
+            extension: SelectionExtension;
+            selection: SelectionExtensionSelectionInfo;
         }) => EditorCommand;
         clearActiveExtension: () => EditorCommand;
     };

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

@@ -6,25 +6,40 @@ export type MenuItemsType = Array<{
 }>;
 export type SelectionExtensionComponentProps = {
     closeExtension: () => void;
-    selection: SelectionExtensionSelectType;
+    selection: SelectionExtensionSelectionInfo;
 };
-export type SelectionExtensionSelectType = {
+export type SelectionExtensionCallbackOptions = {
+    selection?: SelectionExtensionSelectionInfo;
+};
+export type SelectionExtensionSelectionInfo = {
     text: string;
-    selection: {
-        from: number;
-        to: number;
-    };
+    from: number;
+    to: number;
     coords: SelectionExtensionCoords;
 };
-export type SelectionExtensionContract = {
+export type SelectionCoords = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+export type SelectionExtension = {
     name: string;
-    onClick?: (params: SelectionExtensionSelectType) => void;
+    icon?: React.ComponentType<React.PropsWithChildren<{
+        label: string;
+    }>>;
+    isDisabled?: (params: SelectionExtensionCallbackOptions) => boolean;
+    onClick?: (params: SelectionExtensionCallbackOptions) => void;
     component?: React.ComponentType<SelectionExtensionComponentProps>;
 };
+export type SelectionExtensions = {
+    firstParty?: SelectionExtension[];
+    external?: SelectionExtension[];
+};
 type SelectionExtensionModes = ViewMode | ContentMode;
 export type SelectionExtensionPluginConfiguration = {
     pageModes?: SelectionExtensionModes | SelectionExtensionModes[];
-    extensions?: SelectionExtensionContract[];
+    extensions?: SelectionExtensions;
 };
 export type SelectionExtensionCoords = {
     left: number;
@@ -39,7 +54,7 @@ export declare enum SelectionExtensionActionTypes {
 }
 export type UpdateActiveExtensionAction = {
     type: SelectionExtensionActionTypes.SET_ACTIVE_EXTENSION;
-    extension: SelectionExtensionContract;
+    extension: SelectionExtension;
 } | {
     type: SelectionExtensionActionTypes.UPDATE_ACTIVE_EXTENSION_COORDS;
     coords: SelectionExtensionCoords;
@@ -48,8 +63,8 @@ export type UpdateActiveExtensionAction = {
 };
 export type SelectionExtensionPluginState = {
     activeExtension?: {
-        extension: SelectionExtensionContract;
-        selection: SelectionExtensionSelectType;
+        extension: SelectionExtension;
+        selection: SelectionExtensionSelectionInfo;
         coords: SelectionExtensionCoords;
     };
 };

package/dist/types/ui/toolbar/SelectionExtensionItems.d.ts

@@ -8,13 +8,13 @@ import { type EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SelectionExtensionPlugin } from '../../selectionExtensionPluginType';
-import type { SelectionExtensionContract } from '../../types';
+import type { SelectionExtension } from '../../types';
 type SelectionExtensionItemsProps = {
     editorView: EditorView;
     api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
-    extensions: SelectionExtensionContract[];
-    onExtensionClick: (extension: SelectionExtensionContract) => void;
+    extensions: SelectionExtension[];
+    onExtensionClick: (extension: SelectionExtension) => void;
 } & WrappedComponentProps;
 export declare const SelectionExtensionItemsComponent: ({ extensions, onExtensionClick, editorAnalyticsAPI, }: SelectionExtensionItemsProps) => React.JSX.Element;
 export declare const SelectionExtensionItems: React.FC<import("react-intl-next").WithIntlProps<SelectionExtensionItemsProps>> & {

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

@@ -1,8 +1,8 @@
-import type { NextEditorPlugin, OptionalPlugin, EditorCommand } from '@atlaskit/editor-common/types';
+import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
-import type { SelectionExtensionPluginConfiguration, SelectionExtensionPluginState, SelectionExtensionContract, SelectionExtensionSelectType } from './types';
+import type { SelectionExtension, SelectionExtensionPluginConfiguration, SelectionExtensionPluginState, SelectionExtensionSelectionInfo } from './types';
 export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
     pluginConfiguration: SelectionExtensionPluginConfiguration | undefined;
     dependencies: [
@@ -13,8 +13,8 @@ export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
     sharedState: SelectionExtensionPluginState | null;
     commands: {
         setActiveExtension: ({ extension, selection, }: {
-            extension: SelectionExtensionContract;
-            selection: SelectionExtensionSelectType;
+            extension: SelectionExtension;
+            selection: SelectionExtensionSelectionInfo;
         }) => EditorCommand;
         clearActiveExtension: () => EditorCommand;
     };

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

@@ -6,25 +6,40 @@ export type MenuItemsType = Array<{
 }>;
 export type SelectionExtensionComponentProps = {
     closeExtension: () => void;
-    selection: SelectionExtensionSelectType;
+    selection: SelectionExtensionSelectionInfo;
 };
-export type SelectionExtensionSelectType = {
+export type SelectionExtensionCallbackOptions = {
+    selection?: SelectionExtensionSelectionInfo;
+};
+export type SelectionExtensionSelectionInfo = {
     text: string;
-    selection: {
-        from: number;
-        to: number;
-    };
+    from: number;
+    to: number;
     coords: SelectionExtensionCoords;
 };
-export type SelectionExtensionContract = {
+export type SelectionCoords = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+export type SelectionExtension = {
     name: string;
-    onClick?: (params: SelectionExtensionSelectType) => void;
+    icon?: React.ComponentType<React.PropsWithChildren<{
+        label: string;
+    }>>;
+    isDisabled?: (params: SelectionExtensionCallbackOptions) => boolean;
+    onClick?: (params: SelectionExtensionCallbackOptions) => void;
     component?: React.ComponentType<SelectionExtensionComponentProps>;
 };
+export type SelectionExtensions = {
+    firstParty?: SelectionExtension[];
+    external?: SelectionExtension[];
+};
 type SelectionExtensionModes = ViewMode | ContentMode;
 export type SelectionExtensionPluginConfiguration = {
     pageModes?: SelectionExtensionModes | SelectionExtensionModes[];
-    extensions?: SelectionExtensionContract[];
+    extensions?: SelectionExtensions;
 };
 export type SelectionExtensionCoords = {
     left: number;
@@ -39,7 +54,7 @@ export declare enum SelectionExtensionActionTypes {
 }
 export type UpdateActiveExtensionAction = {
     type: SelectionExtensionActionTypes.SET_ACTIVE_EXTENSION;
-    extension: SelectionExtensionContract;
+    extension: SelectionExtension;
 } | {
     type: SelectionExtensionActionTypes.UPDATE_ACTIVE_EXTENSION_COORDS;
     coords: SelectionExtensionCoords;
@@ -48,8 +63,8 @@ export type UpdateActiveExtensionAction = {
 };
 export type SelectionExtensionPluginState = {
     activeExtension?: {
-        extension: SelectionExtensionContract;
-        selection: SelectionExtensionSelectType;
+        extension: SelectionExtension;
+        selection: SelectionExtensionSelectionInfo;
         coords: SelectionExtensionCoords;
     };
 };

package/dist/types-ts4.5/ui/toolbar/SelectionExtensionItems.d.ts

@@ -8,13 +8,13 @@ import { type EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SelectionExtensionPlugin } from '../../selectionExtensionPluginType';
-import type { SelectionExtensionContract } from '../../types';
+import type { SelectionExtension } from '../../types';
 type SelectionExtensionItemsProps = {
     editorView: EditorView;
     api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
-    extensions: SelectionExtensionContract[];
-    onExtensionClick: (extension: SelectionExtensionContract) => void;
+    extensions: SelectionExtension[];
+    onExtensionClick: (extension: SelectionExtension) => void;
 } & WrappedComponentProps;
 export declare const SelectionExtensionItemsComponent: ({ extensions, onExtensionClick, editorAnalyticsAPI, }: SelectionExtensionItemsProps) => React.JSX.Element;
 export declare const SelectionExtensionItems: React.FC<import("react-intl-next").WithIntlProps<SelectionExtensionItemsProps>> & {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-extension",
-	"version": "2.1.5",
+	"version": "2.1.6",
 	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,13 +36,14 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^102.4.0",
-		"@atlaskit/editor-plugin-analytics": "^2.1.0",
+		"@atlaskit/editor-common": "^102.13.0",
+		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-selection-toolbar": "^2.0.0",
+		"@atlaskit/editor-plugin-selection-toolbar": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/icon": "^25.0.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/icon": "^25.2.0",
+		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/tmp-editor-statsig": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1",
 		"uuid": "^3.1.0"