@atlaskit/editor-plugin-selection-extension 1.0.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-selection-extension

package/LICENSE.md

@@ -0,0 +1,11 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/README.md

@@ -0,0 +1,30 @@
+# Editor plugin selection extension
+
+Selection Extension plugin for confluence
+
+**Note:** This component is designed for internal Atlassian development.
+External contributors will be able to use this component but will not be able to submit issues.
+
+## Install
+---
+- **Install** - *yarn add @atlaskit/editor-plugin-selection-extension*
+- **npm** - [@atlaskit/editor-plugin-selection-extension](https://www.npmjs.com/package/@atlaskit/editor-plugin-selection-extension)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-selection-extension)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-selection-extension/dist/)
+
+## Usage
+---
+**Internal use only**
+
+@atlaskit/editor-plugin-selection-extension is intended for internal use by the @atlaskit/editor-core and as a plugin dependency of the Editor within your product.
+
+Direct use of this component is not supported.
+
+Please see [Atlaskit - Editor plugin analytics](https://atlaskit.atlassian.com/packages/editor/editor-plugin-selection-extension) for documentation and examples for this package.
+
+## Support
+---
+For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
+## License
+---
+ Please see [Atlassian Frontend - License](https://developer.atlassian.com/cloud/framework/atlassian-frontend/#license) for more licensing information.

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "selectionExtensionPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _selectionExtensionPlugin.selectionExtensionPlugin;
+  }
+});
+var _selectionExtensionPlugin = require("./selectionExtensionPlugin");

package/dist/cjs/selectionExtensionPlugin.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectionExtensionPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SelectionExtensionItems = require("./ui/toolbar/SelectionExtensionItems");
+var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
+  var api = _ref.api,
+    config = _ref.config;
+  return {
+    name: 'selectionExtension',
+    pluginsOptions: {
+      selectionToolbar: function selectionToolbar(state) {
+        var _api$editorViewMode;
+        if (!config) {
+          return;
+        }
+        var pageModes = config.pageModes,
+          extensions = config.extensions;
+
+        /**
+         * Extensions Config Validation
+         *
+         * Check whether plugin contains any selection extensions
+         */
+        if (!extensions || extensions.length === 0) {
+          return;
+        }
+
+        /**
+         * Content Mode Validation
+         *
+         * Check if pageModes is provided and matches against current content mode
+         *
+         * TODO: This will eventially transition from mode to contentMode
+         */
+        var editorContentMode = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode;
+        if (pageModes) {
+          // Early Exit: consumer has set pageModes but editorContentMode is undefined
+          if (!editorContentMode) {
+            return;
+          }
+
+          // Simplify traversion of pageModes which can be string or array of strings
+          var showOnModesCollection = Array.isArray(pageModes) ? pageModes : [pageModes];
+
+          // Early Exit: consumer has set pageModes but current editorContentMode is not in the collection
+          if (!showOnModesCollection.includes(editorContentMode)) {
+            return;
+          }
+        }
+        var handleOnExtensionClick = function handleOnExtensionClick(extension) {
+          var selection = state.selection;
+          var from = selection.from,
+            to = selection.to;
+          var text = state.doc.textBetween(from, to, '\n');
+
+          // TODO: Probably some validator logic here
+          extension.onClick({
+            text: text,
+            selection: {
+              from: from,
+              to: to
+            }
+          });
+        };
+
+        /**
+         * Renders custom dropdown menu with active selection extensions
+         */
+        var selectionExtensionDropdown = {
+          type: 'custom',
+          supportsViewMode: true,
+          render: function render(view) {
+            var _api$analytics;
+            if (!view) {
+              return;
+            }
+            return /*#__PURE__*/_react.default.createElement(_SelectionExtensionItems.SelectionExtensionItems, {
+              api: api,
+              editorView: view,
+              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+              extensions: extensions,
+              onExtensionClick: handleOnExtensionClick
+            });
+          },
+          fallback: []
+        };
+        return {
+          isToolbarAbove: true,
+          items: [selectionExtensionDropdown],
+          rank: -6
+        };
+      }
+    }
+  };
+};

package/dist/cjs/selectionExtensionPluginType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/toolbar/SelectionExtensionDropdownMenu.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectionExtensionDropdownMenu = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _SelectionExtensionDropdownMenuButton = require("./SelectionExtensionDropdownMenuButton");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var SelectionExtensionDropdownMenuComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var items = _ref.items,
+    onItemActivated = _ref.onItemActivated;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isMenuOpen = _useState2[0],
+    setIsMenuOpen = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenuWithKeyboardNavigation, {
+    section: {
+      hasSeparator: true
+    },
+    isOpen: isMenuOpen,
+    items: items,
+    fitHeight: 188,
+    fitWidth: 136,
+    onItemActivated: onItemActivated,
+    "data-testid": "selection-extension-dropdown-menu"
+  }, /*#__PURE__*/_react.default.createElement(_SelectionExtensionDropdownMenuButton.SelectionExtensionDropdownMenuButton, {
+    "data-testid": "selection-extension-dropdown-button",
+    onClick: function onClick() {
+      return setIsMenuOpen(!isMenuOpen);
+    }
+  }));
+});
+var SelectionExtensionDropdownMenu = exports.SelectionExtensionDropdownMenu = (0, _reactIntlNext.injectIntl)(SelectionExtensionDropdownMenuComponent);

package/dist/cjs/ui/toolbar/SelectionExtensionDropdownMenuButton.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectionExtensionDropdownMenuButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _apps = _interopRequireDefault(require("@atlaskit/icon/core/apps"));
+var SelectionExtensionDropdownMenuButtonComponent = function SelectionExtensionDropdownMenuButtonComponent(_ref) {
+  var onClick = _ref.onClick;
+  return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_apps.default, {
+    label: "selection extension dropdown"
+  }));
+};
+var SelectionExtensionDropdownMenuButton = exports.SelectionExtensionDropdownMenuButton = (0, _reactIntlNext.injectIntl)(SelectionExtensionDropdownMenuButtonComponent);

package/dist/cjs/ui/toolbar/SelectionExtensionItems.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectionExtensionItemsComponent = exports.SelectionExtensionItems = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _uuid = require("uuid");
+var _SelectionExtensionDropdownMenu = require("./SelectionExtensionDropdownMenu");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * @jsxRuntime classic
+ * @jsx
+ */
+var transformExtensionsToItems = function transformExtensionsToItems(extensions) {
+  var extensionToItems = extensions.map(function (extension) {
+    return {
+      content: extension.name,
+      value: {
+        name: extension.id
+      }
+    };
+  });
+  return [{
+    items: extensionToItems
+  }];
+};
+var SelectionExtensionItemsComponent = exports.SelectionExtensionItemsComponent = function SelectionExtensionItemsComponent(_ref) {
+  var extensions = _ref.extensions,
+    onExtensionClick = _ref.onExtensionClick;
+  var extensionsWithIdentifier = (0, _react.useMemo)(function () {
+    return extensions.map(function (extension) {
+      return _objectSpread(_objectSpread({}, extension), {}, {
+        id: (0, _uuid.v4)()
+      });
+    });
+  }, [extensions]);
+  var items = (0, _react.useMemo)(function () {
+    return transformExtensionsToItems(extensionsWithIdentifier);
+  }, [extensionsWithIdentifier]);
+  var handleOnItemActivated = function handleOnItemActivated(_ref2) {
+    var item = _ref2.item;
+    var extension = extensionsWithIdentifier.find(function (ext) {
+      return ext.id === item.value.name;
+    });
+    if (extension) {
+      onExtensionClick(extension);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_SelectionExtensionDropdownMenu.SelectionExtensionDropdownMenu, {
+    items: items,
+    onItemActivated: handleOnItemActivated
+  });
+};
+var SelectionExtensionItems = exports.SelectionExtensionItems = (0, _reactIntlNext.injectIntl)(SelectionExtensionItemsComponent);

package/dist/es2019/index.js

@@ -0,0 +1,4 @@
+// Disable no-re-export rule for entry point files
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+export { selectionExtensionPlugin } from './selectionExtensionPlugin';

package/dist/es2019/selectionExtensionPlugin.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { SelectionExtensionItems } from './ui/toolbar/SelectionExtensionItems';
+export const selectionExtensionPlugin = ({
+  api,
+  config
+}) => {
+  return {
+    name: 'selectionExtension',
+    pluginsOptions: {
+      selectionToolbar: state => {
+        var _api$editorViewMode, _api$editorViewMode$s;
+        if (!config) {
+          return;
+        }
+        const {
+          pageModes,
+          extensions
+        } = config;
+
+        /**
+         * Extensions Config Validation
+         *
+         * Check whether plugin contains any selection extensions
+         */
+        if (!extensions || extensions.length === 0) {
+          return;
+        }
+
+        /**
+         * Content Mode Validation
+         *
+         * Check if pageModes is provided and matches against current content mode
+         *
+         * TODO: This will eventially transition from mode to contentMode
+         */
+        const editorContentMode = api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode;
+        if (pageModes) {
+          // Early Exit: consumer has set pageModes but editorContentMode is undefined
+          if (!editorContentMode) {
+            return;
+          }
+
+          // Simplify traversion of pageModes which can be string or array of strings
+          const showOnModesCollection = Array.isArray(pageModes) ? pageModes : [pageModes];
+
+          // Early Exit: consumer has set pageModes but current editorContentMode is not in the collection
+          if (!showOnModesCollection.includes(editorContentMode)) {
+            return;
+          }
+        }
+        const handleOnExtensionClick = extension => {
+          const {
+            selection
+          } = state;
+          const {
+            from,
+            to
+          } = selection;
+          const text = state.doc.textBetween(from, to, '\n');
+
+          // TODO: Probably some validator logic here
+          extension.onClick({
+            text,
+            selection: {
+              from,
+              to
+            }
+          });
+        };
+
+        /**
+         * Renders custom dropdown menu with active selection extensions
+         */
+        const selectionExtensionDropdown = {
+          type: 'custom',
+          supportsViewMode: true,
+          render: view => {
+            var _api$analytics;
+            if (!view) {
+              return;
+            }
+            return /*#__PURE__*/React.createElement(SelectionExtensionItems, {
+              api: api,
+              editorView: view,
+              editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+              extensions: extensions,
+              onExtensionClick: handleOnExtensionClick
+            });
+          },
+          fallback: []
+        };
+        return {
+          isToolbarAbove: true,
+          items: [selectionExtensionDropdown],
+          rank: -6
+        };
+      }
+    }
+  };
+};

package/dist/es2019/selectionExtensionPluginType.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/toolbar/SelectionExtensionDropdownMenu.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { SelectionExtensionDropdownMenuButton } from './SelectionExtensionDropdownMenuButton';
+const SelectionExtensionDropdownMenuComponent = /*#__PURE__*/React.memo(({
+  items,
+  onItemActivated
+}) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    section: {
+      hasSeparator: true
+    },
+    isOpen: isMenuOpen,
+    items: items,
+    fitHeight: 188,
+    fitWidth: 136,
+    onItemActivated: onItemActivated,
+    "data-testid": "selection-extension-dropdown-menu"
+  }, /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenuButton, {
+    "data-testid": "selection-extension-dropdown-button",
+    onClick: () => setIsMenuOpen(!isMenuOpen)
+  }));
+});
+export const SelectionExtensionDropdownMenu = injectIntl(SelectionExtensionDropdownMenuComponent);

package/dist/es2019/ui/toolbar/SelectionExtensionDropdownMenuButton.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import AppsIcon from '@atlaskit/icon/core/apps';
+const SelectionExtensionDropdownMenuButtonComponent = ({
+  onClick
+}) => {
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(AppsIcon, {
+    label: "selection extension dropdown"
+  }));
+};
+export const SelectionExtensionDropdownMenuButton = injectIntl(SelectionExtensionDropdownMenuButtonComponent);

package/dist/es2019/ui/toolbar/SelectionExtensionItems.js

@@ -0,0 +1,45 @@
+/**
+ * @jsxRuntime classic
+ * @jsx
+ */
+
+import React, { useMemo } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { v4 as uuid } from 'uuid';
+import { SelectionExtensionDropdownMenu } from './SelectionExtensionDropdownMenu';
+const transformExtensionsToItems = extensions => {
+  const extensionToItems = extensions.map(extension => {
+    return {
+      content: extension.name,
+      value: {
+        name: extension.id
+      }
+    };
+  });
+  return [{
+    items: extensionToItems
+  }];
+};
+export const SelectionExtensionItemsComponent = ({
+  extensions,
+  onExtensionClick
+}) => {
+  const extensionsWithIdentifier = useMemo(() => extensions.map(extension => ({
+    ...extension,
+    id: uuid()
+  })), [extensions]);
+  const items = useMemo(() => transformExtensionsToItems(extensionsWithIdentifier), [extensionsWithIdentifier]);
+  const handleOnItemActivated = ({
+    item
+  }) => {
+    const extension = extensionsWithIdentifier.find(ext => ext.id === item.value.name);
+    if (extension) {
+      onExtensionClick(extension);
+    }
+  };
+  return /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenu, {
+    items: items,
+    onItemActivated: handleOnItemActivated
+  });
+};
+export const SelectionExtensionItems = injectIntl(SelectionExtensionItemsComponent);

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+// Disable no-re-export rule for entry point files
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+export { selectionExtensionPlugin } from './selectionExtensionPlugin';

package/dist/esm/selectionExtensionPlugin.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { SelectionExtensionItems } from './ui/toolbar/SelectionExtensionItems';
+export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
+  var api = _ref.api,
+    config = _ref.config;
+  return {
+    name: 'selectionExtension',
+    pluginsOptions: {
+      selectionToolbar: function selectionToolbar(state) {
+        var _api$editorViewMode;
+        if (!config) {
+          return;
+        }
+        var pageModes = config.pageModes,
+          extensions = config.extensions;
+
+        /**
+         * Extensions Config Validation
+         *
+         * Check whether plugin contains any selection extensions
+         */
+        if (!extensions || extensions.length === 0) {
+          return;
+        }
+
+        /**
+         * Content Mode Validation
+         *
+         * Check if pageModes is provided and matches against current content mode
+         *
+         * TODO: This will eventially transition from mode to contentMode
+         */
+        var editorContentMode = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode;
+        if (pageModes) {
+          // Early Exit: consumer has set pageModes but editorContentMode is undefined
+          if (!editorContentMode) {
+            return;
+          }
+
+          // Simplify traversion of pageModes which can be string or array of strings
+          var showOnModesCollection = Array.isArray(pageModes) ? pageModes : [pageModes];
+
+          // Early Exit: consumer has set pageModes but current editorContentMode is not in the collection
+          if (!showOnModesCollection.includes(editorContentMode)) {
+            return;
+          }
+        }
+        var handleOnExtensionClick = function handleOnExtensionClick(extension) {
+          var selection = state.selection;
+          var from = selection.from,
+            to = selection.to;
+          var text = state.doc.textBetween(from, to, '\n');
+
+          // TODO: Probably some validator logic here
+          extension.onClick({
+            text: text,
+            selection: {
+              from: from,
+              to: to
+            }
+          });
+        };
+
+        /**
+         * Renders custom dropdown menu with active selection extensions
+         */
+        var selectionExtensionDropdown = {
+          type: 'custom',
+          supportsViewMode: true,
+          render: function render(view) {
+            var _api$analytics;
+            if (!view) {
+              return;
+            }
+            return /*#__PURE__*/React.createElement(SelectionExtensionItems, {
+              api: api,
+              editorView: view,
+              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+              extensions: extensions,
+              onExtensionClick: handleOnExtensionClick
+            });
+          },
+          fallback: []
+        };
+        return {
+          isToolbarAbove: true,
+          items: [selectionExtensionDropdown],
+          rank: -6
+        };
+      }
+    }
+  };
+};

package/dist/esm/selectionExtensionPluginType.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/toolbar/SelectionExtensionDropdownMenu.js

@@ -0,0 +1,30 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { SelectionExtensionDropdownMenuButton } from './SelectionExtensionDropdownMenuButton';
+var SelectionExtensionDropdownMenuComponent = /*#__PURE__*/React.memo(function (_ref) {
+  var items = _ref.items,
+    onItemActivated = _ref.onItemActivated;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMenuOpen = _useState2[0],
+    setIsMenuOpen = _useState2[1];
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    section: {
+      hasSeparator: true
+    },
+    isOpen: isMenuOpen,
+    items: items,
+    fitHeight: 188,
+    fitWidth: 136,
+    onItemActivated: onItemActivated,
+    "data-testid": "selection-extension-dropdown-menu"
+  }, /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenuButton, {
+    "data-testid": "selection-extension-dropdown-button",
+    onClick: function onClick() {
+      return setIsMenuOpen(!isMenuOpen);
+    }
+  }));
+});
+export var SelectionExtensionDropdownMenu = injectIntl(SelectionExtensionDropdownMenuComponent);

package/dist/esm/ui/toolbar/SelectionExtensionDropdownMenuButton.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import AppsIcon from '@atlaskit/icon/core/apps';
+var SelectionExtensionDropdownMenuButtonComponent = function SelectionExtensionDropdownMenuButtonComponent(_ref) {
+  var onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(AppsIcon, {
+    label: "selection extension dropdown"
+  }));
+};
+export var SelectionExtensionDropdownMenuButton = injectIntl(SelectionExtensionDropdownMenuButtonComponent);

package/dist/esm/ui/toolbar/SelectionExtensionItems.js

@@ -0,0 +1,53 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @jsxRuntime classic
+ * @jsx
+ */
+
+import React, { useMemo } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { v4 as uuid } from 'uuid';
+import { SelectionExtensionDropdownMenu } from './SelectionExtensionDropdownMenu';
+var transformExtensionsToItems = function transformExtensionsToItems(extensions) {
+  var extensionToItems = extensions.map(function (extension) {
+    return {
+      content: extension.name,
+      value: {
+        name: extension.id
+      }
+    };
+  });
+  return [{
+    items: extensionToItems
+  }];
+};
+export var SelectionExtensionItemsComponent = function SelectionExtensionItemsComponent(_ref) {
+  var extensions = _ref.extensions,
+    onExtensionClick = _ref.onExtensionClick;
+  var extensionsWithIdentifier = useMemo(function () {
+    return extensions.map(function (extension) {
+      return _objectSpread(_objectSpread({}, extension), {}, {
+        id: uuid()
+      });
+    });
+  }, [extensions]);
+  var items = useMemo(function () {
+    return transformExtensionsToItems(extensionsWithIdentifier);
+  }, [extensionsWithIdentifier]);
+  var handleOnItemActivated = function handleOnItemActivated(_ref2) {
+    var item = _ref2.item;
+    var extension = extensionsWithIdentifier.find(function (ext) {
+      return ext.id === item.value.name;
+    });
+    if (extension) {
+      onExtensionClick(extension);
+    }
+  };
+  return /*#__PURE__*/React.createElement(SelectionExtensionDropdownMenu, {
+    items: items,
+    onItemActivated: handleOnItemActivated
+  });
+};
+export var SelectionExtensionItems = injectIntl(SelectionExtensionItemsComponent);

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { selectionExtensionPlugin } from './selectionExtensionPlugin';
+export type { SelectionExtensionPlugin } from './selectionExtensionPluginType';

package/dist/types/selectionExtensionPlugin.d.ts

@@ -0,0 +1,2 @@
+import type { SelectionExtensionPlugin } from './selectionExtensionPluginType';
+export declare const selectionExtensionPlugin: SelectionExtensionPlugin;

package/dist/types/selectionExtensionPluginType.d.ts

@@ -0,0 +1,33 @@
+import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import { type MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { ContentMode, EditorViewModePlugin, ViewMode } from '@atlaskit/editor-plugin-editor-viewmode';
+import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
+export type MenuItemsType = Array<{
+    items: MenuItem[];
+}>;
+export type SelectionExtensionContract = {
+    name: string;
+    onClick: (params: {
+        text: string;
+        selection: {
+            from: number;
+            to: number;
+        };
+    }) => void;
+    validator?: (value: unknown) => boolean;
+};
+type SelectionExtensionModes = ViewMode | ContentMode;
+type SelectionExtensionPluginConfiguration = {
+    pageModes?: SelectionExtensionModes | SelectionExtensionModes[];
+    extensions?: SelectionExtensionContract[];
+};
+export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
+    pluginConfiguration: SelectionExtensionPluginConfiguration | undefined;
+    dependencies: [
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<EditorViewModePlugin>,
+        SelectionToolbarPlugin
+    ];
+}>;
+export {};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { type MenuItem } from '@atlaskit/editor-common/ui-menu';
+import { type MenuItemsType } from '../../selectionExtensionPluginType';
+export type SelectionExtensionDropdownMenuProps = {
+    items: MenuItemsType;
+    onItemActivated?: (attrs: {
+        item: MenuItem;
+        shouldCloseMenu?: boolean;
+    }) => void;
+} & WrappedComponentProps;
+export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl-next").WithIntlProps<{
+    items: MenuItemsType;
+    onItemActivated?: ((attrs: {
+        item: MenuItem;
+        shouldCloseMenu?: boolean;
+    }) => void) | undefined;
+} & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<{
+        items: MenuItemsType;
+        onItemActivated?: ((attrs: {
+            item: MenuItem;
+            shouldCloseMenu?: boolean;
+        }) => void) | undefined;
+    } & WrappedComponentProps>;
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+type SelectionExtensionDropdownMenuButtonProps = React.ComponentProps<typeof ToolbarButton> & WrappedComponentProps;
+export declare const SelectionExtensionDropdownMenuButton: React.FC<import("react-intl-next").WithIntlProps<SelectionExtensionDropdownMenuButtonProps>> & {
+    WrappedComponent: React.ComponentType<SelectionExtensionDropdownMenuButtonProps>;
+};
+export {};

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

@@ -0,0 +1,22 @@
+/**
+ * @jsxRuntime classic
+ * @jsx
+ */
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+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, SelectionExtensionContract } from '../../selectionExtensionPluginType';
+type SelectionExtensionItemsProps = {
+    editorView: EditorView;
+    api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined;
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
+    extensions: SelectionExtensionContract[];
+    onExtensionClick: (extension: SelectionExtensionContract) => void;
+} & WrappedComponentProps;
+export declare const SelectionExtensionItemsComponent: ({ extensions, onExtensionClick, }: SelectionExtensionItemsProps) => React.JSX.Element;
+export declare const SelectionExtensionItems: React.FC<import("react-intl-next").WithIntlProps<SelectionExtensionItemsProps>> & {
+    WrappedComponent: React.ComponentType<SelectionExtensionItemsProps>;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export { selectionExtensionPlugin } from './selectionExtensionPlugin';
+export type { SelectionExtensionPlugin } from './selectionExtensionPluginType';

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

@@ -0,0 +1,2 @@
+import type { SelectionExtensionPlugin } from './selectionExtensionPluginType';
+export declare const selectionExtensionPlugin: SelectionExtensionPlugin;

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

@@ -0,0 +1,33 @@
+import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import { type MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { ContentMode, EditorViewModePlugin, ViewMode } from '@atlaskit/editor-plugin-editor-viewmode';
+import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
+export type MenuItemsType = Array<{
+    items: MenuItem[];
+}>;
+export type SelectionExtensionContract = {
+    name: string;
+    onClick: (params: {
+        text: string;
+        selection: {
+            from: number;
+            to: number;
+        };
+    }) => void;
+    validator?: (value: unknown) => boolean;
+};
+type SelectionExtensionModes = ViewMode | ContentMode;
+type SelectionExtensionPluginConfiguration = {
+    pageModes?: SelectionExtensionModes | SelectionExtensionModes[];
+    extensions?: SelectionExtensionContract[];
+};
+export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
+    pluginConfiguration: SelectionExtensionPluginConfiguration | undefined;
+    dependencies: [
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<EditorViewModePlugin>,
+        SelectionToolbarPlugin
+    ];
+}>;
+export {};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { type MenuItem } from '@atlaskit/editor-common/ui-menu';
+import { type MenuItemsType } from '../../selectionExtensionPluginType';
+export type SelectionExtensionDropdownMenuProps = {
+    items: MenuItemsType;
+    onItemActivated?: (attrs: {
+        item: MenuItem;
+        shouldCloseMenu?: boolean;
+    }) => void;
+} & WrappedComponentProps;
+export declare const SelectionExtensionDropdownMenu: React.FC<import("react-intl-next").WithIntlProps<{
+    items: MenuItemsType;
+    onItemActivated?: ((attrs: {
+        item: MenuItem;
+        shouldCloseMenu?: boolean;
+    }) => void) | undefined;
+} & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<{
+        items: MenuItemsType;
+        onItemActivated?: ((attrs: {
+            item: MenuItem;
+            shouldCloseMenu?: boolean;
+        }) => void) | undefined;
+    } & WrappedComponentProps>;
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+type SelectionExtensionDropdownMenuButtonProps = React.ComponentProps<typeof ToolbarButton> & WrappedComponentProps;
+export declare const SelectionExtensionDropdownMenuButton: React.FC<import("react-intl-next").WithIntlProps<SelectionExtensionDropdownMenuButtonProps>> & {
+    WrappedComponent: React.ComponentType<SelectionExtensionDropdownMenuButtonProps>;
+};
+export {};

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

@@ -0,0 +1,22 @@
+/**
+ * @jsxRuntime classic
+ * @jsx
+ */
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+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, SelectionExtensionContract } from '../../selectionExtensionPluginType';
+type SelectionExtensionItemsProps = {
+    editorView: EditorView;
+    api: ExtractInjectionAPI<SelectionExtensionPlugin> | undefined;
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
+    extensions: SelectionExtensionContract[];
+    onExtensionClick: (extension: SelectionExtensionContract) => void;
+} & WrappedComponentProps;
+export declare const SelectionExtensionItemsComponent: ({ extensions, onExtensionClick, }: SelectionExtensionItemsProps) => React.JSX.Element;
+export declare const SelectionExtensionItems: React.FC<import("react-intl-next").WithIntlProps<SelectionExtensionItemsProps>> & {
+    WrappedComponent: React.ComponentType<SelectionExtensionItemsProps>;
+};
+export {};

package/package.json

@@ -0,0 +1,101 @@
+{
+	"name": "@atlaskit/editor-plugin-selection-extension",
+	"version": "1.0.0",
+	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"atlassian": {
+		"team": "Editor: Core Experiences",
+		"runReact18": true,
+		"website": {
+			"name": "EditorPluginSelectionExtension",
+			"category": "Layout and structure"
+		}
+	},
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-monorepo",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"typesVersions": {
+		">=4.5 <5.4": {
+			"*": [
+				"dist/types-ts4.5/*",
+				"dist/types-ts4.5/index.d.ts"
+			]
+		}
+	},
+	"sideEffects": [
+		"*.compiled.css"
+	],
+	"atlaskit:src": "src/index.ts",
+	"af:exports": {
+		".": "./src/index.ts"
+	},
+	"dependencies": {
+		"@atlaskit/editor-common": "^99.9.0",
+		"@atlaskit/editor-plugin-analytics": "^1.10.2",
+		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
+		"@atlaskit/editor-plugin-selection-toolbar": "^1.6.1",
+		"@atlaskit/editor-prosemirror": "6.2.1",
+		"@atlaskit/icon": "^23.4.0",
+		"@atlaskit/primitives": "^13.3.0",
+		"@babel/runtime": "^7.0.0",
+		"react-intl-next": "npm:react-intl@^5.18.1",
+		"uuid": "^3.1.0"
+	},
+	"peerDependencies": {
+		"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
+	},
+	"devDependencies": {
+		"@af/integration-testing": "*",
+		"@af/visual-regression": "*",
+		"@atlaskit/ssr": "*",
+		"@atlaskit/visual-regression": "*",
+		"@testing-library/react": "^13.4.0",
+		"react-dom": "^18.2.0",
+		"typescript": "~5.4.2",
+		"wait-for-expect": "^1.2.0"
+	},
+	"techstack": {
+		"@atlassian/frontend": {
+			"code-structure": [
+				"editor-plugin"
+			],
+			"import-structure": [
+				"atlassian-conventions"
+			],
+			"circular-dependencies": [
+				"file-and-folder-level"
+			]
+		},
+		"@repo/internal": {
+			"dom-events": "use-bind-event-listener",
+			"analytics": [
+				"analytics-next"
+			],
+			"design-tokens": [
+				"color"
+			],
+			"theming": [
+				"react-context"
+			],
+			"ui-components": [
+				"lite-mode"
+			],
+			"deprecation": [
+				"no-deprecated-imports"
+			],
+			"styling": [
+				"static",
+				"compiled"
+			],
+			"imports": [
+				"import-no-extraneous-disable-for-examples-and-docs"
+			]
+		}
+	}
+}