@atlaskit/editor-plugin-media-insert 22.0.0 → 23.1.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/editor-plugin-media-insert
 
+## 23.1.0
+
+### Minor Changes
+
+- [`1b208e1f7d8f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1b208e1f7d8f7) -
+  [ux] Adds the entry point for ai image generation to the media insert picker plugin as a new tab.
+  This feature is fully behind an experiment gate.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 23.0.0
+
+### Major Changes
+
+- [`901c87a57486e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/901c87a57486e) -
+  Removed `react-intl-next` alias and replaced all usages with `react-intl` directly.
+
+  What changed: The `react-intl-next` npm alias (which resolved to `react-intl@^5`) has been
+  removed. All imports now reference `react-intl` directly, and `peerDependencies` have been updated
+  to `"^5.25.1 || ^6.0.0 || ^7.0.0"`.
+
+  How consumer should update their code: Ensure `react-intl` is installed at a version satisfying
+  `^5.25.1 || ^6.0.0 || ^7.0.0`. If your application was using `react-intl-next` as an npm alias, it
+  can be safely removed. Replace any remaining `react-intl-next` imports with `react-intl`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.0.0
 
 ### Patch Changes

package/dist/cjs/mediaInsertPlugin.js

@@ -13,9 +13,34 @@ var _actions = require("./pm-plugins/actions");
 var _main = require("./pm-plugins/main");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _MediaInsertPicker = require("./ui/MediaInsertPicker");
+/**
+ * Per-editor-instance registry of insert tabs registered via
+ * `actions.registerInsertTab(...)`. Idempotent on `key` so that re-registering
+ * the same tab (e.g. on plugin re-init in dev / StrictMode) replaces rather
+ * than duplicates.
+ */
+var createInsertTabRegistry = function createInsertTabRegistry() {
+  var tabs = [];
+  return {
+    register: function register(tab) {
+      var existingIndex = tabs.findIndex(function (t) {
+        return t.key === tab.key;
+      });
+      if (existingIndex >= 0) {
+        tabs[existingIndex] = tab;
+      } else {
+        tabs.push(tab);
+      }
+    },
+    getAll: function getAll() {
+      return tabs;
+    }
+  };
+};
 var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
+  var insertTabRegistry = createInsertTabRegistry();
   return {
     name: 'mediaInsert',
     pmPlugins: function pmPlugins() {
@@ -48,6 +73,14 @@ var mediaInsertPlugin = exports.mediaInsertPlugin = function mediaInsertPlugin(_
         };
       }
     },
+    actions: {
+      registerInsertTab: function registerInsertTab(tab) {
+        return insertTabRegistry.register(tab);
+      },
+      getInsertTabs: function getInsertTabs() {
+        return insertTabRegistry.getAll();
+      }
+    },
     contentComponent: function contentComponent(_ref4) {
       var editorView = _ref4.editorView,
         dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent,

package/dist/cjs/ui/LocalMedia.js

@@ -10,7 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
@@ -55,7 +55,7 @@ var LocalMedia = exports.LocalMedia = /*#__PURE__*/_react.default.forwardRef(fun
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
     closeMediaInsertPicker = _ref.closeMediaInsertPicker,
     insertFile = _ref.insertFile;
-  var intl = (0, _reactIntlNext.useIntl)();
+  var intl = (0, _reactIntl.useIntl)();
   var strings = {
     upload: intl.formatMessage(_messages.mediaInsertMessages.upload),
     networkError: intl.formatMessage(_messages.mediaInsertMessages.localFileNetworkErrorMessage),

package/dist/cjs/ui/MediaCard.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MediaCard = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _mediaCard = require("@atlaskit/media-card");
 var maxDimensions = {
@@ -16,7 +16,7 @@ var maxDimensions = {
 var MediaCard = exports.MediaCard = function MediaCard(_ref) {
   var attrs = _ref.attrs,
     mediaProvider = _ref.mediaProvider;
-  var intl = (0, _reactIntlNext.useIntl)();
+  var intl = (0, _reactIntl.useIntl)();
   var mediaAlt = intl.formatMessage(_messages.mediaInsertMessages.mediaAlt);
   var dimensions = _react.default.useMemo(function () {
     return {

package/dist/cjs/ui/MediaFromURL.js

@@ -14,7 +14,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
@@ -106,7 +106,7 @@ function MediaFromURL(_ref) {
     isOnlyExternalLinks = _ref.isOnlyExternalLinks,
     customizedUrlValidation = _ref.customizedUrlValidation,
     customizedHelperMessage = _ref.customizedHelperMessage;
-  var intl = (0, _reactIntlNext.useIntl)();
+  var intl = (0, _reactIntl.useIntl)();
   var strings = {
     loadPreview: intl.formatMessage(_messages.mediaInsertMessages.loadPreview),
     insert: intl.formatMessage(_messages.mediaInsertMessages.insert),

package/dist/cjs/ui/MediaInsertPicker.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.MediaInsertPicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
+var _reactIntl = require("react-intl");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-selection");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -43,6 +43,7 @@ var CustomTabPanel = function CustomTabPanel(_ref) {
   );
 };
 var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_ref2) {
+  var _api$mediaInsert$acti, _api$mediaInsert, _api$mediaInsert$getI;
   var api = _ref2.api,
     editorView = _ref2.editorView,
     dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
@@ -57,6 +58,10 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     isOnlyExternalLinks = _ref2$isOnlyExternalL === void 0 ? false : _ref2$isOnlyExternalL,
     customizedUrlValidation = _ref2.customizedUrlValidation,
     customizedHelperMessage = _ref2.customizedHelperMessage;
+  // Tabs registered by other plugins via `api.mediaInsert.actions.registerInsertTab(...)`.
+  // Read once per render; the registry is mutated only at plugin setup time so this is stable
+  // for the lifetime of an editor instance.
+  var registeredTabs = (_api$mediaInsert$acti = api === null || api === void 0 || (_api$mediaInsert = api.mediaInsert) === null || _api$mediaInsert === void 0 || (_api$mediaInsert = _api$mediaInsert.actions) === null || _api$mediaInsert === void 0 || (_api$mediaInsert$getI = _api$mediaInsert.getInsertTabs) === null || _api$mediaInsert$getI === void 0 ? void 0 : _api$mediaInsert$getI.call(_api$mediaInsert)) !== null && _api$mediaInsert$acti !== void 0 ? _api$mediaInsert$acti : [];
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['media', 'mediaInsert'], function (states) {
       var _states$mediaState, _states$mediaInsertSt, _states$mediaInsertSt2;
       return {
@@ -79,7 +84,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
     targetRef = (0, _getDomRefFromSelection.getDomRefFromSelection)(editorView, _analytics.ACTION_SUBJECT_ID.PICKER_MEDIA, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
     mountPoint = popupsMountPoint;
   }
-  var intl = (0, _reactIntlNext.useIntl)();
+  var intl = (0, _reactIntl.useIntl)();
   var focusEditor = (0, _useFocusEditor.useFocusEditor)({
     editorView: editorView
   });
@@ -91,6 +96,11 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
   }
   var handleClose = function handleClose(exitMethod) {
     return function (event) {
+      // Same as AIImageGenerationPopup: react-select can detach the option
+      // before `click` fires, so withOuterListeners treats it as outside.
+      if (exitMethod === _analytics.INPUT_METHOD.MOUSE && event.target instanceof Node && !event.target.isConnected) {
+        return;
+      }
       event.preventDefault();
       if (dispatchAnalyticsEvent) {
         var payload = {
@@ -132,7 +142,11 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
       id: "media-insert-tab-navigation"
     }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       paddingBlockEnd: "space.150"
-    }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
+    }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)), registeredTabs.map(function (tab) {
+      return /*#__PURE__*/_react.default.createElement(_tabs.Tab, {
+        key: tab.key
+      }, tab.label);
+    }))), !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
       ref: autofocusRef,
       mediaProvider: mediaProvider
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -157,6 +171,22 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
       isOnlyExternalLinks: isOnlyExternalLinks,
       customizedUrlValidation: customizedUrlValidation,
       customizedHelperMessage: customizedHelperMessage
-    }))));
+    })), registeredTabs.map(function (_ref3) {
+      var key = _ref3.key,
+        TabComponent = _ref3.component;
+      return /*#__PURE__*/_react.default.createElement(CustomTabPanel, {
+        key: key
+      }, /*#__PURE__*/_react.default.createElement(TabComponent
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      , {
+        closeMediaInsertPicker: function closeMediaInsertPicker() {
+          _closeMediaInsertPicker();
+          focusEditor();
+        },
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        insertMediaSingle: insertMediaSingle,
+        mediaProvider: mediaProvider
+      }));
+    })));
   }));
 };

package/dist/es2019/mediaInsertPlugin.js

@@ -6,10 +6,32 @@ import { closeMediaInsertPicker, showMediaInsertPopup } from './pm-plugins/actio
 import { createPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { MediaInsertPicker } from './ui/MediaInsertPicker';
+
+/**
+ * Per-editor-instance registry of insert tabs registered via
+ * `actions.registerInsertTab(...)`. Idempotent on `key` so that re-registering
+ * the same tab (e.g. on plugin re-init in dev / StrictMode) replaces rather
+ * than duplicates.
+ */
+const createInsertTabRegistry = () => {
+  const tabs = [];
+  return {
+    register: tab => {
+      const existingIndex = tabs.findIndex(t => t.key === tab.key);
+      if (existingIndex >= 0) {
+        tabs[existingIndex] = tab;
+      } else {
+        tabs.push(tab);
+      }
+    },
+    getAll: () => tabs
+  };
+};
 export const mediaInsertPlugin = ({
   api,
   config
 }) => {
+  const insertTabRegistry = createInsertTabRegistry();
   return {
     name: 'mediaInsert',
     pmPlugins() {
@@ -38,6 +60,10 @@ export const mediaInsertPlugin = ({
         tr
       }) => showMediaInsertPopup(tr, mountInfo)
     },
+    actions: {
+      registerInsertTab: tab => insertTabRegistry.register(tab),
+      getInsertTabs: () => insertTabRegistry.getAll()
+    },
     contentComponent: ({
       editorView,
       dispatchAnalyticsEvent,

package/dist/es2019/ui/LocalMedia.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import Button from '@atlaskit/button/new';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { mediaInsertMessages } from '@atlaskit/editor-common/messages';

package/dist/es2019/ui/MediaCard.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import { Card, CardLoading } from '@atlaskit/media-card';
 const maxDimensions = {

package/dist/es2019/ui/MediaFromURL.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { Fragment } from 'react';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';

package/dist/es2019/ui/MediaInsertPicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -49,6 +49,11 @@ export const MediaInsertPicker = ({
   customizedUrlValidation,
   customizedHelperMessage
 }) => {
+  var _api$mediaInsert$acti, _api$mediaInsert, _api$mediaInsert$acti2, _api$mediaInsert$acti3;
+  // Tabs registered by other plugins via `api.mediaInsert.actions.registerInsertTab(...)`.
+  // Read once per render; the registry is mutated only at plugin setup time so this is stable
+  // for the lifetime of an editor instance.
+  const registeredTabs = (_api$mediaInsert$acti = api === null || api === void 0 ? void 0 : (_api$mediaInsert = api.mediaInsert) === null || _api$mediaInsert === void 0 ? void 0 : (_api$mediaInsert$acti2 = _api$mediaInsert.actions) === null || _api$mediaInsert$acti2 === void 0 ? void 0 : (_api$mediaInsert$acti3 = _api$mediaInsert$acti2.getInsertTabs) === null || _api$mediaInsert$acti3 === void 0 ? void 0 : _api$mediaInsert$acti3.call(_api$mediaInsert$acti2)) !== null && _api$mediaInsert$acti !== void 0 ? _api$mediaInsert$acti : [];
   const {
     mediaProvider,
     isOpen,
@@ -84,6 +89,11 @@ export const MediaInsertPicker = ({
     return null;
   }
   const handleClose = exitMethod => event => {
+    // Same as AIImageGenerationPopup: react-select can detach the option
+    // before `click` fires, so withOuterListeners treats it as outside.
+    if (exitMethod === INPUT_METHOD.MOUSE && event.target instanceof Node && !event.target.isConnected) {
+      return;
+    }
     event.preventDefault();
     if (dispatchAnalyticsEvent) {
       const payload = {
@@ -123,7 +133,9 @@ export const MediaInsertPicker = ({
     id: "media-insert-tab-navigation"
   }, /*#__PURE__*/React.createElement(Box, {
     paddingBlockEnd: "space.150"
-  }, /*#__PURE__*/React.createElement(TabList, null, !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), !isOnlyExternalLinks && /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
+  }, /*#__PURE__*/React.createElement(TabList, null, !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)), registeredTabs.map(tab => /*#__PURE__*/React.createElement(Tab, {
+    key: tab.key
+  }, tab.label)))), !isOnlyExternalLinks && /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
     ref: autofocusRef,
     mediaProvider: mediaProvider
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -148,5 +160,20 @@ export const MediaInsertPicker = ({
     isOnlyExternalLinks: isOnlyExternalLinks,
     customizedUrlValidation: customizedUrlValidation,
     customizedHelperMessage: customizedHelperMessage
-  }))))));
+  })), registeredTabs.map(({
+    key,
+    component: TabComponent
+  }) => /*#__PURE__*/React.createElement(CustomTabPanel, {
+    key: key
+  }, /*#__PURE__*/React.createElement(TabComponent
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+  , {
+    closeMediaInsertPicker: () => {
+      closeMediaInsertPicker();
+      focusEditor();
+    },
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    insertMediaSingle: insertMediaSingle,
+    mediaProvider: mediaProvider
+  })))))));
 };

package/dist/esm/mediaInsertPlugin.js

@@ -6,9 +6,35 @@ import { closeMediaInsertPicker as _closeMediaInsertPicker, showMediaInsertPopup
 import { createPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { MediaInsertPicker } from './ui/MediaInsertPicker';
+
+/**
+ * Per-editor-instance registry of insert tabs registered via
+ * `actions.registerInsertTab(...)`. Idempotent on `key` so that re-registering
+ * the same tab (e.g. on plugin re-init in dev / StrictMode) replaces rather
+ * than duplicates.
+ */
+var createInsertTabRegistry = function createInsertTabRegistry() {
+  var tabs = [];
+  return {
+    register: function register(tab) {
+      var existingIndex = tabs.findIndex(function (t) {
+        return t.key === tab.key;
+      });
+      if (existingIndex >= 0) {
+        tabs[existingIndex] = tab;
+      } else {
+        tabs.push(tab);
+      }
+    },
+    getAll: function getAll() {
+      return tabs;
+    }
+  };
+};
 export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
+  var insertTabRegistry = createInsertTabRegistry();
   return {
     name: 'mediaInsert',
     pmPlugins: function pmPlugins() {
@@ -41,6 +67,14 @@ export var mediaInsertPlugin = function mediaInsertPlugin(_ref) {
         };
       }
     },
+    actions: {
+      registerInsertTab: function registerInsertTab(tab) {
+        return insertTabRegistry.register(tab);
+      },
+      getInsertTabs: function getInsertTabs() {
+        return insertTabRegistry.getAll();
+      }
+    },
     contentComponent: function contentComponent(_ref4) {
       var editorView = _ref4.editorView,
         dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent,

package/dist/esm/ui/LocalMedia.js

@@ -4,7 +4,7 @@ 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; }
 import React, { useCallback } from 'react';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import Button from '@atlaskit/button/new';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { mediaInsertMessages } from '@atlaskit/editor-common/messages';

package/dist/esm/ui/MediaCard.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
 import { Card, CardLoading } from '@atlaskit/media-card';
 var maxDimensions = {

package/dist/esm/ui/MediaFromURL.js

@@ -8,7 +8,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
 import React, { Fragment } from 'react';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';

package/dist/esm/ui/MediaInsertPicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { useIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
@@ -34,6 +34,7 @@ var CustomTabPanel = function CustomTabPanel(_ref) {
   );
 };
 export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
+  var _api$mediaInsert$acti, _api$mediaInsert, _api$mediaInsert$getI;
   var api = _ref2.api,
     editorView = _ref2.editorView,
     dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
@@ -48,6 +49,10 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
     isOnlyExternalLinks = _ref2$isOnlyExternalL === void 0 ? false : _ref2$isOnlyExternalL,
     customizedUrlValidation = _ref2.customizedUrlValidation,
     customizedHelperMessage = _ref2.customizedHelperMessage;
+  // Tabs registered by other plugins via `api.mediaInsert.actions.registerInsertTab(...)`.
+  // Read once per render; the registry is mutated only at plugin setup time so this is stable
+  // for the lifetime of an editor instance.
+  var registeredTabs = (_api$mediaInsert$acti = api === null || api === void 0 || (_api$mediaInsert = api.mediaInsert) === null || _api$mediaInsert === void 0 || (_api$mediaInsert = _api$mediaInsert.actions) === null || _api$mediaInsert === void 0 || (_api$mediaInsert$getI = _api$mediaInsert.getInsertTabs) === null || _api$mediaInsert$getI === void 0 ? void 0 : _api$mediaInsert$getI.call(_api$mediaInsert)) !== null && _api$mediaInsert$acti !== void 0 ? _api$mediaInsert$acti : [];
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['media', 'mediaInsert'], function (states) {
       var _states$mediaState, _states$mediaInsertSt, _states$mediaInsertSt2;
       return {
@@ -82,6 +87,11 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
   }
   var handleClose = function handleClose(exitMethod) {
     return function (event) {
+      // Same as AIImageGenerationPopup: react-select can detach the option
+      // before `click` fires, so withOuterListeners treats it as outside.
+      if (exitMethod === INPUT_METHOD.MOUSE && event.target instanceof Node && !event.target.isConnected) {
+        return;
+      }
       event.preventDefault();
       if (dispatchAnalyticsEvent) {
         var payload = {
@@ -123,7 +133,11 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
       id: "media-insert-tab-navigation"
     }, /*#__PURE__*/React.createElement(Box, {
       paddingBlockEnd: "space.150"
-    }, /*#__PURE__*/React.createElement(TabList, null, !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), !isOnlyExternalLinks && /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
+    }, /*#__PURE__*/React.createElement(TabList, null, !isOnlyExternalLinks && /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)), registeredTabs.map(function (tab) {
+      return /*#__PURE__*/React.createElement(Tab, {
+        key: tab.key
+      }, tab.label);
+    }))), !isOnlyExternalLinks && /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
       ref: autofocusRef,
       mediaProvider: mediaProvider
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -148,6 +162,22 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
       isOnlyExternalLinks: isOnlyExternalLinks,
       customizedUrlValidation: customizedUrlValidation,
       customizedHelperMessage: customizedHelperMessage
-    }))));
+    })), registeredTabs.map(function (_ref3) {
+      var key = _ref3.key,
+        TabComponent = _ref3.component;
+      return /*#__PURE__*/React.createElement(CustomTabPanel, {
+        key: key
+      }, /*#__PURE__*/React.createElement(TabComponent
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      , {
+        closeMediaInsertPicker: function closeMediaInsertPicker() {
+          _closeMediaInsertPicker();
+          focusEditor();
+        },
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        insertMediaSingle: insertMediaSingle,
+        mediaProvider: mediaProvider
+      }));
+    })));
   }));
 };

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { mediaInsertPlugin } from './mediaInsertPlugin';
-export type { MediaInsertPlugin, MediaInsertPluginState, MediaInsertPluginDependencies, MediaInsertPluginCommands, MediaInsertPluginConfig, } from './mediaInsertPluginType';
+export type { MediaInsertPlugin, MediaInsertPluginState, MediaInsertPluginDependencies, MediaInsertPluginCommands, MediaInsertPluginConfig, MediaInsertPluginActions, MediaInsertTabProps, RegisterInsertTab, } from './mediaInsertPluginType';

package/dist/types/mediaInsertPluginType.d.ts

@@ -1,8 +1,49 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
+import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { MediaPlugin } from '@atlaskit/editor-plugin-media';
-import type { CustomizedHelperMessage } from './types';
+import type { CustomizedHelperMessage, InsertMediaSingle } from './types';
+/**
+ * Props provided to a registered insert tab inside the media insert picker.
+ *
+ * The picker owns the popup chrome and provides the editor-side context
+ * needed to insert media; the registering plugin provides the actual UI.
+ */
+export type MediaInsertTabProps = {
+    closeMediaInsertPicker: () => void;
+    dispatchAnalyticsEvent?: (payload: AnalyticsEventPayload) => void;
+    insertMediaSingle: InsertMediaSingle;
+    mediaProvider: MediaProvider;
+};
+/**
+ * Descriptor for an insert tab registered onto the media insert picker via
+ * `api.mediaInsert.actions.registerInsertTab(...)`.
+ *
+ * Other plugins (typically private `@atlassian/*` plugins like
+ * `editor-plugin-ai-image-generation`) call `registerInsertTab` from inside
+ * their own setup so the public `editor-plugin-media-insert` package never
+ * needs to import them directly.
+ */
+export type RegisterInsertTab = {
+    /**
+     * Stable identifier for this tab. Used to de-duplicate registrations so
+     * calling `registerInsertTab` with the same key twice replaces the prior
+     * registration rather than appending a duplicate tab.
+     */
+    key: string;
+    /**
+     * Label rendered inside the tab. Typically a `<FormattedMessage />` so the
+     * registering plugin owns its own i18n.
+     */
+    label: ReactNode;
+    /**
+     * Component rendered inside the picker when this tab is active.
+     */
+    component: ComponentType<MediaInsertTabProps>;
+};
 export type MediaInsertPluginState = {
     isOpen?: boolean;
     mountInfo?: {
@@ -21,6 +62,29 @@ export type MediaInsertPluginCommands = {
         ref: HTMLElement;
     }) => EditorCommand;
 };
+export type MediaInsertPluginActions = {
+    /**
+     * Returns the list of insert tabs that have been registered with the
+     * picker. Order matches registration order.
+     */
+    getInsertTabs: () => RegisterInsertTab[];
+    /**
+     * Register an additional tab inside the media insert picker. Idempotent
+     * by `key`: re-registering with the same key replaces the prior entry.
+     *
+     * Intended to be called from another plugin's setup, e.g.:
+     *
+     * ```tsx
+     * // inside aiImageGenerationPlugin
+     * api?.mediaInsert?.actions.registerInsertTab({
+     *   key: 'ai-image-generation',
+     *   label: <FormattedMessage {...messages.generateTabTitle} />,
+     *   component: MediaInsertImageGenerationTab,
+     * });
+     * ```
+     */
+    registerInsertTab: (tab: RegisterInsertTab) => void;
+};
 export type MediaInsertPluginConfig = {
     customizedHelperMessage?: CustomizedHelperMessage;
     customizedUrlValidation?: (input: string) => boolean;
@@ -55,6 +119,7 @@ export type MediaInsertPluginConfig = {
     isOnlyExternalLinks?: boolean;
 };
 export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
+    actions: MediaInsertPluginActions;
     commands: MediaInsertPluginCommands;
     dependencies: MediaInsertPluginDependencies;
     pluginConfiguration: MediaInsertPluginConfig | undefined;

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

@@ -1,2 +1,2 @@
 export { mediaInsertPlugin } from './mediaInsertPlugin';
-export type { MediaInsertPlugin, MediaInsertPluginState, MediaInsertPluginDependencies, MediaInsertPluginCommands, MediaInsertPluginConfig, } from './mediaInsertPluginType';
+export type { MediaInsertPlugin, MediaInsertPluginState, MediaInsertPluginDependencies, MediaInsertPluginCommands, MediaInsertPluginConfig, MediaInsertPluginActions, MediaInsertTabProps, RegisterInsertTab, } from './mediaInsertPluginType';

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

@@ -1,8 +1,49 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
+import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { MediaPlugin } from '@atlaskit/editor-plugin-media';
-import type { CustomizedHelperMessage } from './types';
+import type { CustomizedHelperMessage, InsertMediaSingle } from './types';
+/**
+ * Props provided to a registered insert tab inside the media insert picker.
+ *
+ * The picker owns the popup chrome and provides the editor-side context
+ * needed to insert media; the registering plugin provides the actual UI.
+ */
+export type MediaInsertTabProps = {
+    closeMediaInsertPicker: () => void;
+    dispatchAnalyticsEvent?: (payload: AnalyticsEventPayload) => void;
+    insertMediaSingle: InsertMediaSingle;
+    mediaProvider: MediaProvider;
+};
+/**
+ * Descriptor for an insert tab registered onto the media insert picker via
+ * `api.mediaInsert.actions.registerInsertTab(...)`.
+ *
+ * Other plugins (typically private `@atlassian/*` plugins like
+ * `editor-plugin-ai-image-generation`) call `registerInsertTab` from inside
+ * their own setup so the public `editor-plugin-media-insert` package never
+ * needs to import them directly.
+ */
+export type RegisterInsertTab = {
+    /**
+     * Stable identifier for this tab. Used to de-duplicate registrations so
+     * calling `registerInsertTab` with the same key twice replaces the prior
+     * registration rather than appending a duplicate tab.
+     */
+    key: string;
+    /**
+     * Label rendered inside the tab. Typically a `<FormattedMessage />` so the
+     * registering plugin owns its own i18n.
+     */
+    label: ReactNode;
+    /**
+     * Component rendered inside the picker when this tab is active.
+     */
+    component: ComponentType<MediaInsertTabProps>;
+};
 export type MediaInsertPluginState = {
     isOpen?: boolean;
     mountInfo?: {
@@ -21,6 +62,29 @@ export type MediaInsertPluginCommands = {
         ref: HTMLElement;
     }) => EditorCommand;
 };
+export type MediaInsertPluginActions = {
+    /**
+     * Returns the list of insert tabs that have been registered with the
+     * picker. Order matches registration order.
+     */
+    getInsertTabs: () => RegisterInsertTab[];
+    /**
+     * Register an additional tab inside the media insert picker. Idempotent
+     * by `key`: re-registering with the same key replaces the prior entry.
+     *
+     * Intended to be called from another plugin's setup, e.g.:
+     *
+     * ```tsx
+     * // inside aiImageGenerationPlugin
+     * api?.mediaInsert?.actions.registerInsertTab({
+     *   key: 'ai-image-generation',
+     *   label: <FormattedMessage {...messages.generateTabTitle} />,
+     *   component: MediaInsertImageGenerationTab,
+     * });
+     * ```
+     */
+    registerInsertTab: (tab: RegisterInsertTab) => void;
+};
 export type MediaInsertPluginConfig = {
     customizedHelperMessage?: CustomizedHelperMessage;
     customizedUrlValidation?: (input: string) => boolean;
@@ -55,6 +119,7 @@ export type MediaInsertPluginConfig = {
     isOnlyExternalLinks?: boolean;
 };
 export type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', {
+    actions: MediaInsertPluginActions;
     commands: MediaInsertPluginCommands;
     dependencies: MediaInsertPluginDependencies;
     pluginConfiguration: MediaInsertPluginConfig | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media-insert",
-	"version": "22.0.0",
+	"version": "23.1.0",
 	"description": "Media Insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,31 +21,31 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.5.0",
+		"@atlaskit/adf-schema": "^52.7.0",
 		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/editor-plugin-analytics": "^9.0.0",
-		"@atlaskit/editor-plugin-media": "^11.0.0",
+		"@atlaskit/editor-plugin-analytics": "^10.0.0",
+		"@atlaskit/editor-plugin-media": "^12.2.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/icon": "^34.2.0",
-		"@atlaskit/media-card": "^80.0.0",
-		"@atlaskit/media-client": "^36.0.0",
-		"@atlaskit/media-client-react": "^5.0.0",
-		"@atlaskit/media-picker": "^71.0.0",
+		"@atlaskit/icon": "^34.3.0",
+		"@atlaskit/media-card": "^80.4.0",
+		"@atlaskit/media-client": "^36.1.0",
+		"@atlaskit/media-client-react": "^5.1.0",
+		"@atlaskit/media-picker": "^71.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/tabs": "^19.1.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@babel/runtime": "^7.0.0",
-		"react-intl-next": "npm:react-intl@^5.18.1"
+		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^113.0.0",
+		"@atlaskit/editor-common": "^114.14.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"react-dom": "^18.2.0",
+		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"techstack": {
 		"@atlassian/frontend": {
@@ -92,5 +92,8 @@
 		"platform_editor_nov_a11y_fixes": {
 			"type": "boolean"
 		}
+	},
+	"devDependencies": {
+		"react-intl": "^6.6.2"
 	}
 }