@atlaskit/editor-plugin-media-insert 30.1.4 → 31.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/mediaInsertPlugin.js +11 -4
  3. package/dist/cjs/ui/MediaInsertPicker.js +80 -79
  4. package/dist/cjs/ui/quick-insert/MediaInsertQuickInsertMenuItem.js +9 -3
  5. package/dist/es2019/mediaInsertPlugin.js +11 -4
  6. package/dist/es2019/ui/MediaInsertPicker.js +79 -77
  7. package/dist/es2019/ui/quick-insert/MediaInsertQuickInsertMenuItem.js +9 -3
  8. package/dist/esm/mediaInsertPlugin.js +11 -4
  9. package/dist/esm/ui/MediaInsertPicker.js +80 -79
  10. package/dist/esm/ui/quick-insert/MediaInsertQuickInsertMenuItem.js +9 -3
  11. package/dist/types/mediaInsertPluginType.d.ts +10 -0
  12. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/editor-plugin-media-insert
2
2
 
3
+ ## 31.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 31.0.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`ab79746656fb4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ab79746656fb4) -
14
+ [ux] Add shared media insert tab ranks, allow registered tabs to define a numeric rank, and move
15
+ the AI image generation Create tab to the third position when the
16
+ `platform_editor_ai_image_generation_improvement_ex` experiment is enabled.
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies
21
+
3
22
  ## 30.1.4
4
23
 
5
24
  ### Patch Changes
package/dist/cjs/mediaInsertPlugin.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.mediaInsertPlugin = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _analytics = require("@atlaskit/editor-common/analytics");
10
+ var _rank = require("@atlaskit/editor-common/media-insert/rank");
10
11
  var _messages = require("@atlaskit/editor-common/messages");
11
12
  var _quickInsert = require("@atlaskit/editor-common/quick-insert");
12
13
  var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
@@ -16,11 +17,17 @@ var _pluginKey = require("./pm-plugins/plugin-key");
16
17
  var _MediaInsertPicker = require("./ui/MediaInsertPicker");
17
18
  var _getMediaInsertQuickInsertComponents = require("./ui/quick-insert/getMediaInsertQuickInsertComponents");
18
19
  var getInitialMediaInsertTab = function getInitialMediaInsertTab(registeredTabs, isOnlyExternalLinks) {
19
- var registeredTab = registeredTabs[0];
20
- if (registeredTab) {
21
- return registeredTab.key;
20
+ var _firstRegisteredTab$r;
21
+ var initialBuiltInTab = isOnlyExternalLinks ? _analytics.MEDIA_INSERT_TAB.LINK : _analytics.MEDIA_INSERT_TAB.UPLOAD;
22
+ var initialBuiltInRank = isOnlyExternalLinks ? _rank.MEDIA_INSERT_TAB_RANK[_analytics.MEDIA_INSERT_TAB.LINK] : _rank.MEDIA_INSERT_TAB_RANK[_analytics.MEDIA_INSERT_TAB.UPLOAD];
23
+ var firstRegisteredTab = registeredTabs.reduce(function (firstTab, tab) {
24
+ var _tab$rank, _firstTab$rank;
25
+ return !firstTab || ((_tab$rank = tab.rank) !== null && _tab$rank !== void 0 ? _tab$rank : _rank.DEFAULT_MEDIA_INSERT_TAB_RANK) < ((_firstTab$rank = firstTab.rank) !== null && _firstTab$rank !== void 0 ? _firstTab$rank : _rank.DEFAULT_MEDIA_INSERT_TAB_RANK) ? tab : firstTab;
26
+ }, undefined);
27
+ if (firstRegisteredTab && ((_firstRegisteredTab$r = firstRegisteredTab.rank) !== null && _firstRegisteredTab$r !== void 0 ? _firstRegisteredTab$r : _rank.DEFAULT_MEDIA_INSERT_TAB_RANK) < initialBuiltInRank) {
28
+ return firstRegisteredTab.key;
22
29
  }
23
- return isOnlyExternalLinks ? _analytics.MEDIA_INSERT_TAB.LINK : _analytics.MEDIA_INSERT_TAB.UPLOAD;
30
+ return initialBuiltInTab;
24
31
  };
25
32
 
26
33
  /**
package/dist/cjs/ui/MediaInsertPicker.js CHANGED
@@ -12,6 +12,7 @@ var _reactIntl = require("react-intl");
12
12
  var _analytics = require("@atlaskit/editor-common/analytics");
13
13
  var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-selection");
14
14
  var _hooks = require("@atlaskit/editor-common/hooks");
15
+ var _rank = require("@atlaskit/editor-common/media-insert/rank");
15
16
  var _messages = require("@atlaskit/editor-common/messages");
16
17
  var _ui = require("@atlaskit/editor-common/ui");
17
18
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -50,9 +51,6 @@ var getNextTabIndexForKey = function getNextTabIndexForKey(currentTabIndex, tabC
50
51
  }
51
52
  return undefined;
52
53
  };
53
- var getLinkTabIndex = function getLinkTabIndex(registeredTabCount, isOnlyExternalLinks) {
54
- return registeredTabCount + (isOnlyExternalLinks ? 0 : 1);
55
- };
56
54
  var TabWithAnalytics = function TabWithAnalytics(_ref) {
57
55
  var children = _ref.children,
58
56
  onSelectTabForAnalytics = _ref.onSelectTabForAnalytics,
@@ -122,7 +120,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
122
120
  popupsMountPoint = _ref3.popupsMountPoint,
123
121
  popupsBoundariesElement = _ref3.popupsBoundariesElement,
124
122
  popupsScrollableElement = _ref3.popupsScrollableElement,
125
- _closeMediaInsertPicker = _ref3.closeMediaInsertPicker,
123
+ closeMediaInsertPicker = _ref3.closeMediaInsertPicker,
126
124
  insertMediaSingle = _ref3.insertMediaSingle,
127
125
  insertExternalMediaSingle = _ref3.insertExternalMediaSingle,
128
126
  insertFile = _ref3.insertFile,
@@ -163,26 +161,43 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
163
161
  var _useUnholyAutofocus = (0, _useUnholyAutofocus2.useUnholyAutofocus)(),
164
162
  autofocusRef = _useUnholyAutofocus.autofocusRef,
165
163
  onPositionCalculated = _useUnholyAutofocus.onPositionCalculated;
166
- var tabCount = registeredTabs.length + (isOnlyExternalLinks ? 1 : 2);
167
- var linkTabIndex = getLinkTabIndex(registeredTabs.length, isOnlyExternalLinks);
168
- var getTabAnalyticsMetadata = _react.default.useCallback(function (selectedTabIndex) {
169
- var registeredTab = registeredTabs[selectedTabIndex];
170
- if (registeredTab) {
171
- return {
172
- selectedTab: registeredTab.key,
173
- selectedTabIndex: selectedTabIndex
174
- };
175
- }
176
- var uploadTabIndex = registeredTabs.length;
177
- if (!isOnlyExternalLinks && selectedTabIndex === uploadTabIndex) {
178
- return {
179
- selectedTab: _analytics.MEDIA_INSERT_TAB.UPLOAD,
180
- selectedTabIndex: selectedTabIndex
181
- };
164
+ var orderedTabs = _react.default.useMemo(function () {
165
+ var tabs = [];
166
+ var tieBreaker = 0;
167
+ if (!isOnlyExternalLinks) {
168
+ tabs.push({
169
+ key: _analytics.MEDIA_INSERT_TAB.UPLOAD,
170
+ rank: _rank.MEDIA_INSERT_TAB_RANK[_analytics.MEDIA_INSERT_TAB.UPLOAD],
171
+ tieBreaker: tieBreaker++,
172
+ type: 'upload'
173
+ });
182
174
  }
183
- if (selectedTabIndex === linkTabIndex) {
175
+ tabs.push({
176
+ key: _analytics.MEDIA_INSERT_TAB.LINK,
177
+ rank: _rank.MEDIA_INSERT_TAB_RANK[_analytics.MEDIA_INSERT_TAB.LINK],
178
+ tieBreaker: tieBreaker++,
179
+ type: 'link'
180
+ });
181
+ registeredTabs.forEach(function (registeredTab) {
182
+ var _registeredTab$rank;
183
+ tabs.push({
184
+ key: registeredTab.key,
185
+ rank: (_registeredTab$rank = registeredTab.rank) !== null && _registeredTab$rank !== void 0 ? _registeredTab$rank : _rank.DEFAULT_MEDIA_INSERT_TAB_RANK,
186
+ registeredTab: registeredTab,
187
+ tieBreaker: tieBreaker++,
188
+ type: 'registered'
189
+ });
190
+ });
191
+ return tabs.sort(function (a, b) {
192
+ return a.rank - b.rank || a.tieBreaker - b.tieBreaker;
193
+ });
194
+ }, [isOnlyExternalLinks, registeredTabs]);
195
+ var tabCount = orderedTabs.length;
196
+ var getTabAnalyticsMetadata = _react.default.useCallback(function (selectedTabIndex) {
197
+ var selectedTab = orderedTabs[selectedTabIndex];
198
+ if (selectedTab) {
184
199
  return {
185
- selectedTab: _analytics.MEDIA_INSERT_TAB.LINK,
200
+ selectedTab: selectedTab.key,
186
201
  selectedTabIndex: selectedTabIndex
187
202
  };
188
203
  }
@@ -190,7 +205,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
190
205
  selectedTab: 'unknown',
191
206
  selectedTabIndex: selectedTabIndex
192
207
  };
193
- }, [isOnlyExternalLinks, linkTabIndex, registeredTabs]);
208
+ }, [orderedTabs]);
194
209
  var selectedTabAnalyticsMetadataRef = _react.default.useRef(getTabAnalyticsMetadata(0));
195
210
  var tabsAnalyticsContext = _react.default.useMemo(function () {
196
211
  return {
@@ -277,12 +292,18 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
277
292
  };
278
293
  dispatchAnalyticsEvent(payload);
279
294
  }
280
- _closeMediaInsertPicker(); // Focuses editor on unmount
295
+ closeMediaInsertPicker(); // Focuses editor on unmount
281
296
  if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker')) {
282
297
  focusEditor();
283
298
  }
284
299
  };
285
300
  };
301
+ var closePickerAndFocusEditor = function closePickerAndFocusEditor() {
302
+ closeMediaInsertPicker(); // Focuses editor on unmount
303
+ if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker')) {
304
+ focusEditor();
305
+ }
306
+ };
286
307
  var fileTabTitle = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(_messages.mediaInsertMessages.uploadTabTitle) : intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle);
287
308
  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
288
309
  ariaLabel: intl.formatMessage(_messages.mediaInsertMessages.mediaPickerPopupAriaLabel)
@@ -311,69 +332,49 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
311
332
  onChange: handleTabChange
312
333
  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
313
334
  paddingBlockEnd: "space.150"
314
- }, /*#__PURE__*/_react.default.createElement(_tabList.default, null, registeredTabs.map(function (tab, index) {
335
+ }, /*#__PURE__*/_react.default.createElement(_tabList.default, null, orderedTabs.map(function (tab, index) {
315
336
  return /*#__PURE__*/_react.default.createElement(TabWithAnalytics, {
316
337
  key: tab.key,
317
338
  onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
318
339
  selectedTabIndex: index,
319
340
  tabCount: tabCount
320
- }, tab.label);
321
- }), !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(TabWithAnalytics, {
322
- onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
323
- selectedTabIndex: registeredTabs.length,
324
- tabCount: tabCount
325
- }, fileTabTitle), /*#__PURE__*/_react.default.createElement(TabWithAnalytics, {
326
- onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
327
- selectedTabIndex: linkTabIndex,
328
- tabCount: tabCount
329
- }, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), registeredTabs.map(function (_ref4) {
330
- var key = _ref4.key,
331
- TabComponent = _ref4.component;
341
+ }, tab.type === 'registered' ? tab.registeredTab.label : tab.type === 'upload' ? fileTabTitle : intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle));
342
+ }))), orderedTabs.map(function (tab) {
343
+ if (tab.type === 'registered') {
344
+ var TabComponent = tab.registeredTab.component;
345
+ return /*#__PURE__*/_react.default.createElement(CustomTabPanel, {
346
+ key: tab.key,
347
+ disablePaddingBlockEnd: true
348
+ }, /*#__PURE__*/_react.default.createElement(TabComponent, {
349
+ closeMediaInsertPicker: closePickerAndFocusEditor,
350
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
351
+ insertMediaSingle: insertMediaSingle,
352
+ mediaProvider: mediaProvider
353
+ }));
354
+ }
355
+ if (tab.type === 'upload') {
356
+ return /*#__PURE__*/_react.default.createElement(CustomTabPanel, {
357
+ key: tab.key
358
+ }, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
359
+ ref: autofocusRef,
360
+ mediaProvider: mediaProvider,
361
+ closeMediaInsertPicker: closePickerAndFocusEditor,
362
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
363
+ insertFile: insertFile
364
+ }));
365
+ }
332
366
  return /*#__PURE__*/_react.default.createElement(CustomTabPanel, {
333
- key: key,
334
- disablePaddingBlockEnd: true
335
- }, /*#__PURE__*/_react.default.createElement(TabComponent
336
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
337
- , {
338
- closeMediaInsertPicker: function closeMediaInsertPicker() {
339
- _closeMediaInsertPicker(); // Focuses editor on unmount
340
- if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker')) {
341
- focusEditor();
342
- }
343
- },
367
+ key: tab.key
368
+ }, /*#__PURE__*/_react.default.createElement(_MediaFromURL.MediaFromURL, {
369
+ mediaProvider: mediaProvider,
344
370
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
371
+ closeMediaInsertPicker: closePickerAndFocusEditor,
345
372
  insertMediaSingle: insertMediaSingle,
346
- mediaProvider: mediaProvider
373
+ insertExternalMediaSingle: insertExternalMediaSingle,
374
+ isOnlyExternalLinks: isOnlyExternalLinks,
375
+ customizedUrlValidation: customizedUrlValidation,
376
+ customizedHelperMessage: customizedHelperMessage
347
377
  }));
348
- }), !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
349
- ref: autofocusRef,
350
- mediaProvider: mediaProvider
351
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
352
- ,
353
- closeMediaInsertPicker: function closeMediaInsertPicker() {
354
- _closeMediaInsertPicker(); // Focuses editor on unmount
355
- if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker')) {
356
- focusEditor();
357
- }
358
- },
359
- dispatchAnalyticsEvent: dispatchAnalyticsEvent,
360
- insertFile: insertFile
361
- })), /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_MediaFromURL.MediaFromURL, {
362
- mediaProvider: mediaProvider,
363
- dispatchAnalyticsEvent: dispatchAnalyticsEvent
364
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
365
- ,
366
- closeMediaInsertPicker: function closeMediaInsertPicker() {
367
- _closeMediaInsertPicker(); // Focuses editor on unmount
368
- if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_fix_focus_MediaInsertPicker')) {
369
- focusEditor();
370
- }
371
- },
372
- insertMediaSingle: insertMediaSingle,
373
- insertExternalMediaSingle: insertExternalMediaSingle,
374
- isOnlyExternalLinks: isOnlyExternalLinks,
375
- customizedUrlValidation: customizedUrlValidation,
376
- customizedHelperMessage: customizedHelperMessage
377
- }))));
378
+ })));
378
379
  }));
379
380
  };
package/dist/cjs/ui/quick-insert/MediaInsertQuickInsertMenuItem.js CHANGED
@@ -8,6 +8,7 @@ exports.MediaInsertQuickInsertMenuItem = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _reactIntl = require("react-intl");
10
10
  var _analytics = require("@atlaskit/editor-common/analytics");
11
+ var _rank = require("@atlaskit/editor-common/media-insert/rank");
11
12
  var _messages = require("@atlaskit/editor-common/messages");
12
13
  var _quickInsert = require("@atlaskit/editor-common/quick-insert");
13
14
  var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
@@ -21,20 +22,25 @@ var MediaInsertQuickInsertMenuItem = exports.MediaInsertQuickInsertMenuItem = fu
21
22
  var _useQuickInsertContex = (0, _useQuickInsertContext.useQuickInsertContext)(),
22
23
  isOffline = _useQuickInsertContex.isOffline;
23
24
  var onSelect = (0, _react.useCallback)(function (_ref2) {
24
- var _api$mediaInsert, _api$mediaInsert2, _api$analytics, _ref3;
25
+ var _api$mediaInsert, _api$mediaInsert2, _api$analytics, _firstRegisteredTab$r;
25
26
  var insert = _ref2.insert;
26
27
  var tr = insert('');
27
28
  api === null || api === void 0 || (_api$mediaInsert = api.mediaInsert) === null || _api$mediaInsert === void 0 || _api$mediaInsert.commands.showMediaInsertPopup()({
28
29
  tr: tr
29
30
  });
30
- var firstRegisteredTab = api === null || api === void 0 || (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.actions.getInsertTabs()[0];
31
+ var initialBuiltInTab = config !== null && config !== void 0 && config.isOnlyExternalLinks ? _analytics.MEDIA_INSERT_TAB.LINK : _analytics.MEDIA_INSERT_TAB.UPLOAD;
32
+ var initialBuiltInRank = config !== null && config !== void 0 && config.isOnlyExternalLinks ? _rank.MEDIA_INSERT_TAB_RANK[_analytics.MEDIA_INSERT_TAB.LINK] : _rank.MEDIA_INSERT_TAB_RANK[_analytics.MEDIA_INSERT_TAB.UPLOAD];
33
+ var firstRegisteredTab = api === null || api === void 0 || (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.actions.getInsertTabs().reduce(function (firstTab, tab) {
34
+ var _tab$rank, _firstTab$rank;
35
+ return !firstTab || ((_tab$rank = tab.rank) !== null && _tab$rank !== void 0 ? _tab$rank : _rank.DEFAULT_MEDIA_INSERT_TAB_RANK) < ((_firstTab$rank = firstTab.rank) !== null && _firstTab$rank !== void 0 ? _firstTab$rank : _rank.DEFAULT_MEDIA_INSERT_TAB_RANK) ? tab : firstTab;
36
+ }, undefined);
31
37
  api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
32
38
  action: _analytics.ACTION.OPENED,
33
39
  actionSubject: _analytics.ACTION_SUBJECT.PICKER,
34
40
  actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_MEDIA,
35
41
  attributes: {
36
42
  inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
37
- openedTab: (_ref3 = firstRegisteredTab === null || firstRegisteredTab === void 0 ? void 0 : firstRegisteredTab.key) !== null && _ref3 !== void 0 ? _ref3 : config !== null && config !== void 0 && config.isOnlyExternalLinks ? _analytics.MEDIA_INSERT_TAB.LINK : _analytics.MEDIA_INSERT_TAB.UPLOAD
43
+ openedTab: firstRegisteredTab && ((_firstRegisteredTab$r = firstRegisteredTab.rank) !== null && _firstRegisteredTab$r !== void 0 ? _firstRegisteredTab$r : _rank.DEFAULT_MEDIA_INSERT_TAB_RANK) < initialBuiltInRank ? firstRegisteredTab.key : initialBuiltInTab
38
44
  },
39
45
  eventType: _analytics.EVENT_TYPE.UI
40
46
  })(tr);
package/dist/es2019/mediaInsertPlugin.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, INSERT_MEDIA_VIA, MEDIA_INSERT_TAB } from '@atlaskit/editor-common/analytics';
3
+ import { DEFAULT_MEDIA_INSERT_TAB_RANK, MEDIA_INSERT_TAB_RANK } from '@atlaskit/editor-common/media-insert/rank';
3
4
  import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
4
5
  import { IconImages } from '@atlaskit/editor-common/quick-insert';
5
6
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
@@ -9,11 +10,17 @@ import { pluginKey } from './pm-plugins/plugin-key';
9
10
  import { MediaInsertPicker } from './ui/MediaInsertPicker';
10
11
  import { getMediaInsertQuickInsertComponents } from './ui/quick-insert/getMediaInsertQuickInsertComponents';
11
12
  const getInitialMediaInsertTab = (registeredTabs, isOnlyExternalLinks) => {
12
- const registeredTab = registeredTabs[0];
13
- if (registeredTab) {
14
- return registeredTab.key;
13
+ var _firstRegisteredTab$r;
14
+ const initialBuiltInTab = isOnlyExternalLinks ? MEDIA_INSERT_TAB.LINK : MEDIA_INSERT_TAB.UPLOAD;
15
+ const initialBuiltInRank = isOnlyExternalLinks ? MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.LINK] : MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.UPLOAD];
16
+ const firstRegisteredTab = registeredTabs.reduce((firstTab, tab) => {
17
+ var _tab$rank, _firstTab$rank;
18
+ return !firstTab || ((_tab$rank = tab.rank) !== null && _tab$rank !== void 0 ? _tab$rank : DEFAULT_MEDIA_INSERT_TAB_RANK) < ((_firstTab$rank = firstTab.rank) !== null && _firstTab$rank !== void 0 ? _firstTab$rank : DEFAULT_MEDIA_INSERT_TAB_RANK) ? tab : firstTab;
19
+ }, undefined);
20
+ if (firstRegisteredTab && ((_firstRegisteredTab$r = firstRegisteredTab.rank) !== null && _firstRegisteredTab$r !== void 0 ? _firstRegisteredTab$r : DEFAULT_MEDIA_INSERT_TAB_RANK) < initialBuiltInRank) {
21
+ return firstRegisteredTab.key;
15
22
  }
16
- return isOnlyExternalLinks ? MEDIA_INSERT_TAB.LINK : MEDIA_INSERT_TAB.UPLOAD;
23
+ return initialBuiltInTab;
17
24
  };
18
25
 
19
26
  /**
package/dist/es2019/ui/MediaInsertPicker.js CHANGED
@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
4
4
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MEDIA_INSERT_TAB } from '@atlaskit/editor-common/analytics';
5
5
  import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
6
6
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
7
+ import { DEFAULT_MEDIA_INSERT_TAB_RANK, MEDIA_INSERT_TAB_RANK } from '@atlaskit/editor-common/media-insert/rank';
7
8
  import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
8
9
  import { PlainOutsideClickTargetRefContext, Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
9
10
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
@@ -38,7 +39,6 @@ const getNextTabIndexForKey = (currentTabIndex, tabCount, key) => {
38
39
  }
39
40
  return undefined;
40
41
  };
41
- const getLinkTabIndex = (registeredTabCount, isOnlyExternalLinks) => registeredTabCount + (isOnlyExternalLinks ? 0 : 1);
42
42
  const TabWithAnalytics = ({
43
43
  children,
44
44
  onSelectTabForAnalytics,
@@ -153,26 +153,41 @@ export const MediaInsertPicker = ({
153
153
  autofocusRef,
154
154
  onPositionCalculated
155
155
  } = useUnholyAutofocus();
156
- const tabCount = registeredTabs.length + (isOnlyExternalLinks ? 1 : 2);
157
- const linkTabIndex = getLinkTabIndex(registeredTabs.length, isOnlyExternalLinks);
158
- const getTabAnalyticsMetadata = React.useCallback(selectedTabIndex => {
159
- const registeredTab = registeredTabs[selectedTabIndex];
160
- if (registeredTab) {
161
- return {
162
- selectedTab: registeredTab.key,
163
- selectedTabIndex
164
- };
165
- }
166
- const uploadTabIndex = registeredTabs.length;
167
- if (!isOnlyExternalLinks && selectedTabIndex === uploadTabIndex) {
168
- return {
169
- selectedTab: MEDIA_INSERT_TAB.UPLOAD,
170
- selectedTabIndex
171
- };
156
+ const orderedTabs = React.useMemo(() => {
157
+ const tabs = [];
158
+ let tieBreaker = 0;
159
+ if (!isOnlyExternalLinks) {
160
+ tabs.push({
161
+ key: MEDIA_INSERT_TAB.UPLOAD,
162
+ rank: MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.UPLOAD],
163
+ tieBreaker: tieBreaker++,
164
+ type: 'upload'
165
+ });
172
166
  }
173
- if (selectedTabIndex === linkTabIndex) {
167
+ tabs.push({
168
+ key: MEDIA_INSERT_TAB.LINK,
169
+ rank: MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.LINK],
170
+ tieBreaker: tieBreaker++,
171
+ type: 'link'
172
+ });
173
+ registeredTabs.forEach(registeredTab => {
174
+ var _registeredTab$rank;
175
+ tabs.push({
176
+ key: registeredTab.key,
177
+ rank: (_registeredTab$rank = registeredTab.rank) !== null && _registeredTab$rank !== void 0 ? _registeredTab$rank : DEFAULT_MEDIA_INSERT_TAB_RANK,
178
+ registeredTab,
179
+ tieBreaker: tieBreaker++,
180
+ type: 'registered'
181
+ });
182
+ });
183
+ return tabs.sort((a, b) => a.rank - b.rank || a.tieBreaker - b.tieBreaker);
184
+ }, [isOnlyExternalLinks, registeredTabs]);
185
+ const tabCount = orderedTabs.length;
186
+ const getTabAnalyticsMetadata = React.useCallback(selectedTabIndex => {
187
+ const selectedTab = orderedTabs[selectedTabIndex];
188
+ if (selectedTab) {
174
189
  return {
175
- selectedTab: MEDIA_INSERT_TAB.LINK,
190
+ selectedTab: selectedTab.key,
176
191
  selectedTabIndex
177
192
  };
178
193
  }
@@ -180,7 +195,7 @@ export const MediaInsertPicker = ({
180
195
  selectedTab: 'unknown',
181
196
  selectedTabIndex
182
197
  };
183
- }, [isOnlyExternalLinks, linkTabIndex, registeredTabs]);
198
+ }, [orderedTabs]);
184
199
  const selectedTabAnalyticsMetadataRef = React.useRef(getTabAnalyticsMetadata(0));
185
200
  const tabsAnalyticsContext = React.useMemo(() => ({
186
201
  get source() {
@@ -269,6 +284,12 @@ export const MediaInsertPicker = ({
269
284
  focusEditor();
270
285
  }
271
286
  };
287
+ const closePickerAndFocusEditor = () => {
288
+ closeMediaInsertPicker(); // Focuses editor on unmount
289
+ if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
290
+ focusEditor();
291
+ }
292
+ };
272
293
  const fileTabTitle = expValEqualsNoExposure('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(mediaInsertMessages.uploadTabTitle) : intl.formatMessage(mediaInsertMessages.fileTabTitle);
273
294
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
274
295
  ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel)
@@ -296,65 +317,46 @@ export const MediaInsertPicker = ({
296
317
  onChange: handleTabChange
297
318
  }, /*#__PURE__*/React.createElement(Box, {
298
319
  paddingBlockEnd: "space.150"
299
- }, /*#__PURE__*/React.createElement(TabList, null, registeredTabs.map((tab, index) => /*#__PURE__*/React.createElement(TabWithAnalytics, {
320
+ }, /*#__PURE__*/React.createElement(TabList, null, orderedTabs.map((tab, index) => /*#__PURE__*/React.createElement(TabWithAnalytics, {
300
321
  key: tab.key,
301
322
  onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
302
323
  selectedTabIndex: index,
303
324
  tabCount: tabCount
304
- }, tab.label)), !isOnlyExternalLinks && /*#__PURE__*/React.createElement(TabWithAnalytics, {
305
- onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
306
- selectedTabIndex: registeredTabs.length,
307
- tabCount: tabCount
308
- }, fileTabTitle), /*#__PURE__*/React.createElement(TabWithAnalytics, {
309
- onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
310
- selectedTabIndex: linkTabIndex,
311
- tabCount: tabCount
312
- }, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), registeredTabs.map(({
313
- key,
314
- component: TabComponent
315
- }) => /*#__PURE__*/React.createElement(CustomTabPanel, {
316
- key: key,
317
- disablePaddingBlockEnd: true
318
- }, /*#__PURE__*/React.createElement(TabComponent
319
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
320
- , {
321
- closeMediaInsertPicker: () => {
322
- closeMediaInsertPicker(); // Focuses editor on unmount
323
- if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
324
- focusEditor();
325
- }
326
- },
327
- dispatchAnalyticsEvent: dispatchAnalyticsEvent,
328
- insertMediaSingle: insertMediaSingle,
329
- mediaProvider: mediaProvider
330
- }))), !isOnlyExternalLinks && /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
331
- ref: autofocusRef,
332
- mediaProvider: mediaProvider
333
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
334
- ,
335
- closeMediaInsertPicker: () => {
336
- closeMediaInsertPicker(); // Focuses editor on unmount
337
- if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
338
- focusEditor();
339
- }
340
- },
341
- dispatchAnalyticsEvent: dispatchAnalyticsEvent,
342
- insertFile: insertFile
343
- })), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
344
- mediaProvider: mediaProvider,
345
- dispatchAnalyticsEvent: dispatchAnalyticsEvent
346
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
347
- ,
348
- closeMediaInsertPicker: () => {
349
- closeMediaInsertPicker(); // Focuses editor on unmount
350
- if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
351
- focusEditor();
352
- }
353
- },
354
- insertMediaSingle: insertMediaSingle,
355
- insertExternalMediaSingle: insertExternalMediaSingle,
356
- isOnlyExternalLinks: isOnlyExternalLinks,
357
- customizedUrlValidation: customizedUrlValidation,
358
- customizedHelperMessage: customizedHelperMessage
359
- }))))));
325
+ }, tab.type === 'registered' ? tab.registeredTab.label : tab.type === 'upload' ? fileTabTitle : intl.formatMessage(mediaInsertMessages.linkTabTitle))))), orderedTabs.map(tab => {
326
+ if (tab.type === 'registered') {
327
+ const TabComponent = tab.registeredTab.component;
328
+ return /*#__PURE__*/React.createElement(CustomTabPanel, {
329
+ key: tab.key,
330
+ disablePaddingBlockEnd: true
331
+ }, /*#__PURE__*/React.createElement(TabComponent, {
332
+ closeMediaInsertPicker: closePickerAndFocusEditor,
333
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
334
+ insertMediaSingle: insertMediaSingle,
335
+ mediaProvider: mediaProvider
336
+ }));
337
+ }
338
+ if (tab.type === 'upload') {
339
+ return /*#__PURE__*/React.createElement(CustomTabPanel, {
340
+ key: tab.key
341
+ }, /*#__PURE__*/React.createElement(LocalMedia, {
342
+ ref: autofocusRef,
343
+ mediaProvider: mediaProvider,
344
+ closeMediaInsertPicker: closePickerAndFocusEditor,
345
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
346
+ insertFile: insertFile
347
+ }));
348
+ }
349
+ return /*#__PURE__*/React.createElement(CustomTabPanel, {
350
+ key: tab.key
351
+ }, /*#__PURE__*/React.createElement(MediaFromURL, {
352
+ mediaProvider: mediaProvider,
353
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
354
+ closeMediaInsertPicker: closePickerAndFocusEditor,
355
+ insertMediaSingle: insertMediaSingle,
356
+ insertExternalMediaSingle: insertExternalMediaSingle,
357
+ isOnlyExternalLinks: isOnlyExternalLinks,
358
+ customizedUrlValidation: customizedUrlValidation,
359
+ customizedHelperMessage: customizedHelperMessage
360
+ }));
361
+ })))));
360
362
  };
package/dist/es2019/ui/quick-insert/MediaInsertQuickInsertMenuItem.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { useCallback } from 'react';
2
2
  import { useIntl } from 'react-intl';
3
3
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MEDIA_INSERT_TAB } from '@atlaskit/editor-common/analytics';
4
+ import { DEFAULT_MEDIA_INSERT_TAB_RANK, MEDIA_INSERT_TAB_RANK } from '@atlaskit/editor-common/media-insert/rank';
4
5
  import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
5
6
  import { IconImages } from '@atlaskit/editor-common/quick-insert';
6
7
  import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
@@ -18,19 +19,24 @@ export const MediaInsertQuickInsertMenuItem = ({
18
19
  const onSelect = useCallback(({
19
20
  insert
20
21
  }) => {
21
- var _api$mediaInsert, _api$mediaInsert2, _api$analytics, _api$analytics$action, _ref;
22
+ var _api$mediaInsert, _api$mediaInsert2, _api$analytics, _api$analytics$action, _firstRegisteredTab$r;
22
23
  const tr = insert('');
23
24
  api === null || api === void 0 ? void 0 : (_api$mediaInsert = api.mediaInsert) === null || _api$mediaInsert === void 0 ? void 0 : _api$mediaInsert.commands.showMediaInsertPopup()({
24
25
  tr
25
26
  });
26
- const firstRegisteredTab = api === null || api === void 0 ? void 0 : (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.actions.getInsertTabs()[0];
27
+ const initialBuiltInTab = config !== null && config !== void 0 && config.isOnlyExternalLinks ? MEDIA_INSERT_TAB.LINK : MEDIA_INSERT_TAB.UPLOAD;
28
+ const initialBuiltInRank = config !== null && config !== void 0 && config.isOnlyExternalLinks ? MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.LINK] : MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.UPLOAD];
29
+ const firstRegisteredTab = api === null || api === void 0 ? void 0 : (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.actions.getInsertTabs().reduce((firstTab, tab) => {
30
+ var _tab$rank, _firstTab$rank;
31
+ return !firstTab || ((_tab$rank = tab.rank) !== null && _tab$rank !== void 0 ? _tab$rank : DEFAULT_MEDIA_INSERT_TAB_RANK) < ((_firstTab$rank = firstTab.rank) !== null && _firstTab$rank !== void 0 ? _firstTab$rank : DEFAULT_MEDIA_INSERT_TAB_RANK) ? tab : firstTab;
32
+ }, undefined);
27
33
  api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
28
34
  action: ACTION.OPENED,
29
35
  actionSubject: ACTION_SUBJECT.PICKER,
30
36
  actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
31
37
  attributes: {
32
38
  inputMethod: INPUT_METHOD.QUICK_INSERT,
33
- openedTab: (_ref = firstRegisteredTab === null || firstRegisteredTab === void 0 ? void 0 : firstRegisteredTab.key) !== null && _ref !== void 0 ? _ref : config !== null && config !== void 0 && config.isOnlyExternalLinks ? MEDIA_INSERT_TAB.LINK : MEDIA_INSERT_TAB.UPLOAD
39
+ openedTab: firstRegisteredTab && ((_firstRegisteredTab$r = firstRegisteredTab.rank) !== null && _firstRegisteredTab$r !== void 0 ? _firstRegisteredTab$r : DEFAULT_MEDIA_INSERT_TAB_RANK) < initialBuiltInRank ? firstRegisteredTab.key : initialBuiltInTab
34
40
  },
35
41
  eventType: EVENT_TYPE.UI
36
42
  })(tr);
package/dist/esm/mediaInsertPlugin.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, INSERT_MEDIA_VIA, MEDIA_INSERT_TAB } from '@atlaskit/editor-common/analytics';
3
+ import { DEFAULT_MEDIA_INSERT_TAB_RANK, MEDIA_INSERT_TAB_RANK } from '@atlaskit/editor-common/media-insert/rank';
3
4
  import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
4
5
  import { IconImages } from '@atlaskit/editor-common/quick-insert';
5
6
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
@@ -9,11 +10,17 @@ import { pluginKey } from './pm-plugins/plugin-key';
9
10
  import { MediaInsertPicker } from './ui/MediaInsertPicker';
10
11
  import { getMediaInsertQuickInsertComponents } from './ui/quick-insert/getMediaInsertQuickInsertComponents';
11
12
  var getInitialMediaInsertTab = function getInitialMediaInsertTab(registeredTabs, isOnlyExternalLinks) {
12
- var registeredTab = registeredTabs[0];
13
- if (registeredTab) {
14
- return registeredTab.key;
13
+ var _firstRegisteredTab$r;
14
+ var initialBuiltInTab = isOnlyExternalLinks ? MEDIA_INSERT_TAB.LINK : MEDIA_INSERT_TAB.UPLOAD;
15
+ var initialBuiltInRank = isOnlyExternalLinks ? MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.LINK] : MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.UPLOAD];
16
+ var firstRegisteredTab = registeredTabs.reduce(function (firstTab, tab) {
17
+ var _tab$rank, _firstTab$rank;
18
+ return !firstTab || ((_tab$rank = tab.rank) !== null && _tab$rank !== void 0 ? _tab$rank : DEFAULT_MEDIA_INSERT_TAB_RANK) < ((_firstTab$rank = firstTab.rank) !== null && _firstTab$rank !== void 0 ? _firstTab$rank : DEFAULT_MEDIA_INSERT_TAB_RANK) ? tab : firstTab;
19
+ }, undefined);
20
+ if (firstRegisteredTab && ((_firstRegisteredTab$r = firstRegisteredTab.rank) !== null && _firstRegisteredTab$r !== void 0 ? _firstRegisteredTab$r : DEFAULT_MEDIA_INSERT_TAB_RANK) < initialBuiltInRank) {
21
+ return firstRegisteredTab.key;
15
22
  }
16
- return isOnlyExternalLinks ? MEDIA_INSERT_TAB.LINK : MEDIA_INSERT_TAB.UPLOAD;
23
+ return initialBuiltInTab;
17
24
  };
18
25
 
19
26
  /**
package/dist/esm/ui/MediaInsertPicker.js CHANGED
@@ -7,6 +7,7 @@ import { useIntl } from 'react-intl';
7
7
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MEDIA_INSERT_TAB } from '@atlaskit/editor-common/analytics';
8
8
  import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
9
9
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
10
+ import { DEFAULT_MEDIA_INSERT_TAB_RANK, MEDIA_INSERT_TAB_RANK } from '@atlaskit/editor-common/media-insert/rank';
10
11
  import { mediaInsertMessages } from '@atlaskit/editor-common/messages';
11
12
  import { PlainOutsideClickTargetRefContext, Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
12
13
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
@@ -43,9 +44,6 @@ var getNextTabIndexForKey = function getNextTabIndexForKey(currentTabIndex, tabC
43
44
  }
44
45
  return undefined;
45
46
  };
46
- var getLinkTabIndex = function getLinkTabIndex(registeredTabCount, isOnlyExternalLinks) {
47
- return registeredTabCount + (isOnlyExternalLinks ? 0 : 1);
48
- };
49
47
  var TabWithAnalytics = function TabWithAnalytics(_ref) {
50
48
  var children = _ref.children,
51
49
  onSelectTabForAnalytics = _ref.onSelectTabForAnalytics,
@@ -115,7 +113,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
115
113
  popupsMountPoint = _ref3.popupsMountPoint,
116
114
  popupsBoundariesElement = _ref3.popupsBoundariesElement,
117
115
  popupsScrollableElement = _ref3.popupsScrollableElement,
118
- _closeMediaInsertPicker = _ref3.closeMediaInsertPicker,
116
+ closeMediaInsertPicker = _ref3.closeMediaInsertPicker,
119
117
  insertMediaSingle = _ref3.insertMediaSingle,
120
118
  insertExternalMediaSingle = _ref3.insertExternalMediaSingle,
121
119
  insertFile = _ref3.insertFile,
@@ -156,26 +154,43 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
156
154
  var _useUnholyAutofocus = useUnholyAutofocus(),
157
155
  autofocusRef = _useUnholyAutofocus.autofocusRef,
158
156
  onPositionCalculated = _useUnholyAutofocus.onPositionCalculated;
159
- var tabCount = registeredTabs.length + (isOnlyExternalLinks ? 1 : 2);
160
- var linkTabIndex = getLinkTabIndex(registeredTabs.length, isOnlyExternalLinks);
161
- var getTabAnalyticsMetadata = React.useCallback(function (selectedTabIndex) {
162
- var registeredTab = registeredTabs[selectedTabIndex];
163
- if (registeredTab) {
164
- return {
165
- selectedTab: registeredTab.key,
166
- selectedTabIndex: selectedTabIndex
167
- };
168
- }
169
- var uploadTabIndex = registeredTabs.length;
170
- if (!isOnlyExternalLinks && selectedTabIndex === uploadTabIndex) {
171
- return {
172
- selectedTab: MEDIA_INSERT_TAB.UPLOAD,
173
- selectedTabIndex: selectedTabIndex
174
- };
157
+ var orderedTabs = React.useMemo(function () {
158
+ var tabs = [];
159
+ var tieBreaker = 0;
160
+ if (!isOnlyExternalLinks) {
161
+ tabs.push({
162
+ key: MEDIA_INSERT_TAB.UPLOAD,
163
+ rank: MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.UPLOAD],
164
+ tieBreaker: tieBreaker++,
165
+ type: 'upload'
166
+ });
175
167
  }
176
- if (selectedTabIndex === linkTabIndex) {
168
+ tabs.push({
169
+ key: MEDIA_INSERT_TAB.LINK,
170
+ rank: MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.LINK],
171
+ tieBreaker: tieBreaker++,
172
+ type: 'link'
173
+ });
174
+ registeredTabs.forEach(function (registeredTab) {
175
+ var _registeredTab$rank;
176
+ tabs.push({
177
+ key: registeredTab.key,
178
+ rank: (_registeredTab$rank = registeredTab.rank) !== null && _registeredTab$rank !== void 0 ? _registeredTab$rank : DEFAULT_MEDIA_INSERT_TAB_RANK,
179
+ registeredTab: registeredTab,
180
+ tieBreaker: tieBreaker++,
181
+ type: 'registered'
182
+ });
183
+ });
184
+ return tabs.sort(function (a, b) {
185
+ return a.rank - b.rank || a.tieBreaker - b.tieBreaker;
186
+ });
187
+ }, [isOnlyExternalLinks, registeredTabs]);
188
+ var tabCount = orderedTabs.length;
189
+ var getTabAnalyticsMetadata = React.useCallback(function (selectedTabIndex) {
190
+ var selectedTab = orderedTabs[selectedTabIndex];
191
+ if (selectedTab) {
177
192
  return {
178
- selectedTab: MEDIA_INSERT_TAB.LINK,
193
+ selectedTab: selectedTab.key,
179
194
  selectedTabIndex: selectedTabIndex
180
195
  };
181
196
  }
@@ -183,7 +198,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
183
198
  selectedTab: 'unknown',
184
199
  selectedTabIndex: selectedTabIndex
185
200
  };
186
- }, [isOnlyExternalLinks, linkTabIndex, registeredTabs]);
201
+ }, [orderedTabs]);
187
202
  var selectedTabAnalyticsMetadataRef = React.useRef(getTabAnalyticsMetadata(0));
188
203
  var tabsAnalyticsContext = React.useMemo(function () {
189
204
  return {
@@ -270,12 +285,18 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
270
285
  };
271
286
  dispatchAnalyticsEvent(payload);
272
287
  }
273
- _closeMediaInsertPicker(); // Focuses editor on unmount
288
+ closeMediaInsertPicker(); // Focuses editor on unmount
274
289
  if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
275
290
  focusEditor();
276
291
  }
277
292
  };
278
293
  };
294
+ var closePickerAndFocusEditor = function closePickerAndFocusEditor() {
295
+ closeMediaInsertPicker(); // Focuses editor on unmount
296
+ if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
297
+ focusEditor();
298
+ }
299
+ };
279
300
  var fileTabTitle = expValEqualsNoExposure('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(mediaInsertMessages.uploadTabTitle) : intl.formatMessage(mediaInsertMessages.fileTabTitle);
280
301
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
281
302
  ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel)
@@ -304,69 +325,49 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
304
325
  onChange: handleTabChange
305
326
  }, /*#__PURE__*/React.createElement(Box, {
306
327
  paddingBlockEnd: "space.150"
307
- }, /*#__PURE__*/React.createElement(TabList, null, registeredTabs.map(function (tab, index) {
328
+ }, /*#__PURE__*/React.createElement(TabList, null, orderedTabs.map(function (tab, index) {
308
329
  return /*#__PURE__*/React.createElement(TabWithAnalytics, {
309
330
  key: tab.key,
310
331
  onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
311
332
  selectedTabIndex: index,
312
333
  tabCount: tabCount
313
- }, tab.label);
314
- }), !isOnlyExternalLinks && /*#__PURE__*/React.createElement(TabWithAnalytics, {
315
- onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
316
- selectedTabIndex: registeredTabs.length,
317
- tabCount: tabCount
318
- }, fileTabTitle), /*#__PURE__*/React.createElement(TabWithAnalytics, {
319
- onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
320
- selectedTabIndex: linkTabIndex,
321
- tabCount: tabCount
322
- }, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), registeredTabs.map(function (_ref4) {
323
- var key = _ref4.key,
324
- TabComponent = _ref4.component;
334
+ }, tab.type === 'registered' ? tab.registeredTab.label : tab.type === 'upload' ? fileTabTitle : intl.formatMessage(mediaInsertMessages.linkTabTitle));
335
+ }))), orderedTabs.map(function (tab) {
336
+ if (tab.type === 'registered') {
337
+ var TabComponent = tab.registeredTab.component;
338
+ return /*#__PURE__*/React.createElement(CustomTabPanel, {
339
+ key: tab.key,
340
+ disablePaddingBlockEnd: true
341
+ }, /*#__PURE__*/React.createElement(TabComponent, {
342
+ closeMediaInsertPicker: closePickerAndFocusEditor,
343
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
344
+ insertMediaSingle: insertMediaSingle,
345
+ mediaProvider: mediaProvider
346
+ }));
347
+ }
348
+ if (tab.type === 'upload') {
349
+ return /*#__PURE__*/React.createElement(CustomTabPanel, {
350
+ key: tab.key
351
+ }, /*#__PURE__*/React.createElement(LocalMedia, {
352
+ ref: autofocusRef,
353
+ mediaProvider: mediaProvider,
354
+ closeMediaInsertPicker: closePickerAndFocusEditor,
355
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
356
+ insertFile: insertFile
357
+ }));
358
+ }
325
359
  return /*#__PURE__*/React.createElement(CustomTabPanel, {
326
- key: key,
327
- disablePaddingBlockEnd: true
328
- }, /*#__PURE__*/React.createElement(TabComponent
329
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
330
- , {
331
- closeMediaInsertPicker: function closeMediaInsertPicker() {
332
- _closeMediaInsertPicker(); // Focuses editor on unmount
333
- if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
334
- focusEditor();
335
- }
336
- },
360
+ key: tab.key
361
+ }, /*#__PURE__*/React.createElement(MediaFromURL, {
362
+ mediaProvider: mediaProvider,
337
363
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
364
+ closeMediaInsertPicker: closePickerAndFocusEditor,
338
365
  insertMediaSingle: insertMediaSingle,
339
- mediaProvider: mediaProvider
366
+ insertExternalMediaSingle: insertExternalMediaSingle,
367
+ isOnlyExternalLinks: isOnlyExternalLinks,
368
+ customizedUrlValidation: customizedUrlValidation,
369
+ customizedHelperMessage: customizedHelperMessage
340
370
  }));
341
- }), !isOnlyExternalLinks && /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
342
- ref: autofocusRef,
343
- mediaProvider: mediaProvider
344
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
345
- ,
346
- closeMediaInsertPicker: function closeMediaInsertPicker() {
347
- _closeMediaInsertPicker(); // Focuses editor on unmount
348
- if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
349
- focusEditor();
350
- }
351
- },
352
- dispatchAnalyticsEvent: dispatchAnalyticsEvent,
353
- insertFile: insertFile
354
- })), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
355
- mediaProvider: mediaProvider,
356
- dispatchAnalyticsEvent: dispatchAnalyticsEvent
357
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
358
- ,
359
- closeMediaInsertPicker: function closeMediaInsertPicker() {
360
- _closeMediaInsertPicker(); // Focuses editor on unmount
361
- if (!isExperimentEnabled('platform_editor_fix_focus_MediaInsertPicker')) {
362
- focusEditor();
363
- }
364
- },
365
- insertMediaSingle: insertMediaSingle,
366
- insertExternalMediaSingle: insertExternalMediaSingle,
367
- isOnlyExternalLinks: isOnlyExternalLinks,
368
- customizedUrlValidation: customizedUrlValidation,
369
- customizedHelperMessage: customizedHelperMessage
370
- }))));
371
+ })));
371
372
  }));
372
373
  };
package/dist/esm/ui/quick-insert/MediaInsertQuickInsertMenuItem.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { useCallback } from 'react';
2
2
  import { useIntl } from 'react-intl';
3
3
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, MEDIA_INSERT_TAB } from '@atlaskit/editor-common/analytics';
4
+ import { DEFAULT_MEDIA_INSERT_TAB_RANK, MEDIA_INSERT_TAB_RANK } from '@atlaskit/editor-common/media-insert/rank';
4
5
  import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
5
6
  import { IconImages } from '@atlaskit/editor-common/quick-insert';
6
7
  import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
@@ -13,20 +14,25 @@ export var MediaInsertQuickInsertMenuItem = function MediaInsertQuickInsertMenuI
13
14
  var _useQuickInsertContex = useQuickInsertContext(),
14
15
  isOffline = _useQuickInsertContex.isOffline;
15
16
  var onSelect = useCallback(function (_ref2) {
16
- var _api$mediaInsert, _api$mediaInsert2, _api$analytics, _ref3;
17
+ var _api$mediaInsert, _api$mediaInsert2, _api$analytics, _firstRegisteredTab$r;
17
18
  var insert = _ref2.insert;
18
19
  var tr = insert('');
19
20
  api === null || api === void 0 || (_api$mediaInsert = api.mediaInsert) === null || _api$mediaInsert === void 0 || _api$mediaInsert.commands.showMediaInsertPopup()({
20
21
  tr: tr
21
22
  });
22
- var firstRegisteredTab = api === null || api === void 0 || (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.actions.getInsertTabs()[0];
23
+ var initialBuiltInTab = config !== null && config !== void 0 && config.isOnlyExternalLinks ? MEDIA_INSERT_TAB.LINK : MEDIA_INSERT_TAB.UPLOAD;
24
+ var initialBuiltInRank = config !== null && config !== void 0 && config.isOnlyExternalLinks ? MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.LINK] : MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.UPLOAD];
25
+ var firstRegisteredTab = api === null || api === void 0 || (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.actions.getInsertTabs().reduce(function (firstTab, tab) {
26
+ var _tab$rank, _firstTab$rank;
27
+ return !firstTab || ((_tab$rank = tab.rank) !== null && _tab$rank !== void 0 ? _tab$rank : DEFAULT_MEDIA_INSERT_TAB_RANK) < ((_firstTab$rank = firstTab.rank) !== null && _firstTab$rank !== void 0 ? _firstTab$rank : DEFAULT_MEDIA_INSERT_TAB_RANK) ? tab : firstTab;
28
+ }, undefined);
23
29
  api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
24
30
  action: ACTION.OPENED,
25
31
  actionSubject: ACTION_SUBJECT.PICKER,
26
32
  actionSubjectId: ACTION_SUBJECT_ID.PICKER_MEDIA,
27
33
  attributes: {
28
34
  inputMethod: INPUT_METHOD.QUICK_INSERT,
29
- openedTab: (_ref3 = firstRegisteredTab === null || firstRegisteredTab === void 0 ? void 0 : firstRegisteredTab.key) !== null && _ref3 !== void 0 ? _ref3 : config !== null && config !== void 0 && config.isOnlyExternalLinks ? MEDIA_INSERT_TAB.LINK : MEDIA_INSERT_TAB.UPLOAD
35
+ openedTab: firstRegisteredTab && ((_firstRegisteredTab$r = firstRegisteredTab.rank) !== null && _firstRegisteredTab$r !== void 0 ? _firstRegisteredTab$r : DEFAULT_MEDIA_INSERT_TAB_RANK) < initialBuiltInRank ? firstRegisteredTab.key : initialBuiltInTab
30
36
  },
31
37
  eventType: EVENT_TYPE.UI
32
38
  })(tr);
package/dist/types/mediaInsertPluginType.d.ts CHANGED
@@ -45,6 +45,12 @@ export type RegisterInsertTab = {
45
45
  * registering plugin owns its own i18n.
46
46
  */
47
47
  label: ReactNode;
48
+ /**
49
+ * Numeric position relative to the picker's built-in tabs. Lower ranks are
50
+ * rendered first and equal ranks preserve registration order. Defaults to `0`
51
+ * for backward compatibility.
52
+ */
53
+ rank?: number;
48
54
  };
49
55
  export type MediaInsertPluginState = {
50
56
  isOpen?: boolean;
@@ -79,11 +85,15 @@ export type MediaInsertPluginActions = {
79
85
  * Intended to be called from another plugin's setup, e.g.:
80
86
  *
81
87
  * ```tsx
88
+ * import { MEDIA_INSERT_TAB } from '@atlaskit/editor-common/analytics';
89
+ * import { MEDIA_INSERT_TAB_RANK } from '@atlaskit/editor-common/media-insert/rank';
90
+ *
82
91
  * // inside aiImageGenerationPlugin
83
92
  * api?.mediaInsert?.actions.registerInsertTab({
84
93
  * key: 'ai-image-generation',
85
94
  * label: <FormattedMessage {...messages.generateTabTitle} />,
86
95
  * component: MediaInsertImageGenerationTab,
96
+ * rank: MEDIA_INSERT_TAB_RANK[MEDIA_INSERT_TAB.CREATE],
87
97
  * });
88
98
  * ```
89
99
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media-insert",
3
- "version": "30.1.4",
3
+ "version": "31.0.1",
4
4
  "description": "Media Insert plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -21,13 +21,13 @@
21
21
  ],
22
22
  "atlaskit:src": "src/index.ts",
23
23
  "dependencies": {
24
- "@atlaskit/adf-schema": "^57.0.0",
24
+ "@atlaskit/adf-schema": "^57.1.0",
25
25
  "@atlaskit/analytics-next": "^12.3.0",
26
26
  "@atlaskit/button": "^25.2.0",
27
- "@atlaskit/editor-plugin-analytics": "^15.0.0",
28
- "@atlaskit/editor-plugin-connectivity": "^15.0.0",
29
- "@atlaskit/editor-plugin-media": "^17.2.0",
30
- "@atlaskit/editor-plugin-ui-control-registry": "^9.0.0",
27
+ "@atlaskit/editor-plugin-analytics": "^16.0.0",
28
+ "@atlaskit/editor-plugin-connectivity": "^16.0.0",
29
+ "@atlaskit/editor-plugin-media": "^18.0.0",
30
+ "@atlaskit/editor-plugin-ui-control-registry": "^10.0.0",
31
31
  "@atlaskit/editor-prosemirror": "^8.0.0",
32
32
  "@atlaskit/editor-shared-styles": "^4.0.0",
33
33
  "@atlaskit/editor-ui-control-model": "^2.8.0",
@@ -42,11 +42,11 @@
42
42
  "@atlaskit/section-message": "^10.1.0",
43
43
  "@atlaskit/tabs": "^21.1.0",
44
44
  "@atlaskit/textfield": "^10.1.0",
45
- "@atlaskit/tmp-editor-statsig": "^160.0.0",
45
+ "@atlaskit/tmp-editor-statsig": "^161.0.0",
46
46
  "@babel/runtime": "^7.0.0"
47
47
  },
48
48
  "peerDependencies": {
49
- "@atlaskit/editor-common": "^119.16.0",
49
+ "@atlaskit/editor-common": "^120.0.0",
50
50
  "@atlaskit/tokens": "^16.8.0",
51
51
  "react": "^18.2.0 || ^19.2.0",
52
52
  "react-dom": "^18.2.0 || ^19.2.0",