@atlaskit/editor-plugin-media 0.10.4 → 0.11.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 (13) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/toolbar/commands.js +14 -2
  3. package/dist/cjs/toolbar/index.js +51 -24
  4. package/dist/cjs/toolbar/mediaInline.js +54 -22
  5. package/dist/es2019/toolbar/commands.js +14 -2
  6. package/dist/es2019/toolbar/index.js +50 -25
  7. package/dist/es2019/toolbar/mediaInline.js +53 -23
  8. package/dist/esm/toolbar/commands.js +14 -2
  9. package/dist/esm/toolbar/index.js +52 -25
  10. package/dist/esm/toolbar/mediaInline.js +55 -23
  11. package/dist/types/toolbar/commands.d.ts +3 -2
  12. package/dist/types-ts4.5/toolbar/commands.d.ts +3 -2
  13. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 0.11.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 0.11.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#61125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61125) [`9571e3502584`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9571e3502584) - ECA11Y-72 Update files toolbar to replace dropdown by buttons
14
+
3
15
  ## 0.10.4
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/toolbar/commands.js CHANGED
@@ -10,6 +10,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
10
10
  var _model = require("@atlaskit/editor-prosemirror/model");
11
11
  var _state = require("@atlaskit/editor-prosemirror/state");
12
12
  var _utils = require("@atlaskit/editor-prosemirror/utils");
13
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
14
  var _analytics2 = require("../utils/analytics");
14
15
  var _currentMediaNode = require("../utils/current-media-node");
15
16
  var _mediaCommon = require("../utils/media-common");
@@ -25,7 +26,7 @@ var getNodeType = function getNodeType(state) {
25
26
  mediaInline = _state$schema$nodes.mediaInline;
26
27
  return (0, _mediaCommon.isSelectionMediaSingleNode)(state) ? mediaSingle.name : mediaInline.name;
27
28
  };
28
- var changeInlineToMediaCard = exports.changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI) {
29
+ var changeInlineToMediaCard = exports.changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector) {
29
30
  return function (state, dispatch) {
30
31
  var _state$schema$nodes2 = state.schema.nodes,
31
32
  media = _state$schema$nodes2.media,
@@ -59,12 +60,18 @@ var changeInlineToMediaCard = exports.changeInlineToMediaCard = function changeI
59
60
  previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE
60
61
  }
61
62
  })(tr);
63
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.ally-media-file-dropdown_1kxo8')) {
64
+ var $endOfNode = tr.doc.resolve(nodePos + 1);
65
+ var newSelection = new _state.NodeSelection($endOfNode);
66
+ tr.setSelection(newSelection);
67
+ forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".thumbnail-appearance")(tr);
68
+ }
62
69
  dispatch(tr);
63
70
  }
64
71
  return true;
65
72
  };
66
73
  };
67
- var changeMediaCardToInline = exports.changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI) {
74
+ var changeMediaCardToInline = exports.changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector) {
68
75
  return function (state, dispatch) {
69
76
  var _state$schema$nodes3 = state.schema.nodes,
70
77
  media = _state$schema$nodes3.media,
@@ -96,6 +103,11 @@ var changeMediaCardToInline = exports.changeMediaCardToInline = function changeM
96
103
  previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP
97
104
  }
98
105
  })(tr);
106
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.ally-media-file-dropdown_1kxo8')) {
107
+ var newSelection = _state.NodeSelection.create(tr.doc, state.selection.anchor);
108
+ tr.setSelection(newSelection);
109
+ forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".inline-appearance")(tr);
110
+ }
99
111
  dispatch(tr);
100
112
  }
101
113
  return true;
package/dist/cjs/toolbar/index.js CHANGED
@@ -65,30 +65,9 @@ var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
65
65
  }
66
66
  return true;
67
67
  };
68
- var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
68
+ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) {
69
69
  var mediaGroup = state.schema.nodes.mediaGroup;
70
70
  var items = [{
71
- id: 'editor.media.view.switcher',
72
- type: 'dropdown',
73
- title: intl.formatMessage(_mediaUi.messages.changeView),
74
- options: [{
75
- id: 'editor.media.view.switcher.inline',
76
- title: intl.formatMessage(_messages.cardMessages.inline),
77
- selected: false,
78
- disabled: false,
79
- onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI),
80
- testId: 'inline-appearance'
81
- }, {
82
- id: 'editor.media.view.switcher.thumbnail',
83
- title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
84
- selected: true,
85
- disabled: false,
86
- onClick: function onClick() {
87
- return true;
88
- },
89
- testId: 'thumbnail-appearance'
90
- }]
91
- }, {
92
71
  type: 'separator'
93
72
  }, {
94
73
  type: 'custom',
@@ -136,6 +115,54 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
136
115
  onClick: handleRemoveMediaGroup,
137
116
  testId: 'media-toolbar-remove-button'
138
117
  }];
118
+ (0, _platformFeatureFlags.getBooleanFF)('platform.editor.ally-media-file-dropdown_1kxo8') ?
119
+ // TODO: after removing Feature Flag move items back to previous array definition instead of unshift
120
+ items.unshift({
121
+ id: 'editor.media.view.switcher.inline',
122
+ type: 'button',
123
+ icon: _card.IconInline,
124
+ selected: false,
125
+ focusEditoronEnter: true,
126
+ disabled: false,
127
+ onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
128
+ title: intl.formatMessage(_messages.cardMessages.inlineTitle),
129
+ testId: 'inline-appearance',
130
+ className: 'inline-appearance' // a11y. uses to force focus on item
131
+ }, {
132
+ id: 'editor.media.view.switcher.thumbnail',
133
+ type: 'button',
134
+ icon: _card.IconCard,
135
+ selected: true,
136
+ disabled: false,
137
+ focusEditoronEnter: true,
138
+ onClick: function onClick() {
139
+ return true;
140
+ },
141
+ title: intl.formatMessage(_messages.cardMessages.blockTitle),
142
+ testId: 'thumbnail-appearance',
143
+ className: 'thumbnail-appearance' // a11y. uses to force focus on item
144
+ }) : items.unshift({
145
+ id: 'editor.media.view.switcher',
146
+ type: 'dropdown',
147
+ title: intl.formatMessage(_mediaUi.messages.changeView),
148
+ options: [{
149
+ id: 'editor.media.view.switcher.inline',
150
+ title: intl.formatMessage(_messages.cardMessages.inline),
151
+ selected: false,
152
+ disabled: false,
153
+ onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
154
+ testId: 'inline-appearance'
155
+ }, {
156
+ id: 'editor.media.view.switcher.thumbnail',
157
+ title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
158
+ selected: true,
159
+ disabled: false,
160
+ onClick: function onClick() {
161
+ return true;
162
+ },
163
+ testId: 'thumbnail-appearance'
164
+ }]
165
+ });
139
166
  return items;
140
167
  };
141
168
  var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
@@ -503,14 +530,14 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
503
530
  selectedNodeType = state.selection.node.type;
504
531
  }
505
532
  if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
506
- var _pluginInjectionApi$a8;
533
+ var _pluginInjectionApi$a8, _pluginInjectionApi$f2;
507
534
  var mediaOffset = state.selection.$from.parentOffset + 1;
508
535
  baseToolbar.getDomRef = function () {
509
536
  var _mediaPluginState$ele;
510
537
  var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
511
538
  return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
512
539
  };
513
- items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
540
+ items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector);
514
541
  } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
515
542
  baseToolbar.getDomRef = function () {
516
543
  var _mediaPluginState$ele2;
package/dist/cjs/toolbar/mediaInline.js CHANGED
@@ -14,6 +14,7 @@ var _state2 = require("@atlaskit/editor-prosemirror/state");
14
14
  var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
15
15
  var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
16
16
  var _mediaUi = require("@atlaskit/media-ui");
17
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
18
  var _linking = require("../commands/linking");
18
19
  var _linking2 = require("../pm-plugins/linking");
19
20
  var _ImageBorder = _interopRequireDefault(require("../ui/ImageBorder"));
@@ -28,9 +29,10 @@ var _utils = require("./utils");
28
29
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
30
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
30
31
  var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
31
- var _pluginInjectionApi$a;
32
+ var _pluginInjectionApi$a, _pluginInjectionApi$f;
32
33
  var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
33
34
  var editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
35
+ var forceFocusSelector = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector;
34
36
  var mediaInline = state.schema.nodes.mediaInline;
35
37
  var mediaType = state.selection instanceof _state2.NodeSelection && state.selection.node.attrs.type;
36
38
  var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
@@ -38,27 +40,6 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
38
40
  return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
39
41
  }
40
42
  var items = [{
41
- id: 'editor.media.view.switcher',
42
- type: 'dropdown',
43
- title: intl.formatMessage(_mediaUi.messages.changeView),
44
- options: [{
45
- id: 'editor.media.view.switcher.inline',
46
- title: intl.formatMessage(_messages.cardMessages.inline),
47
- selected: true,
48
- disabled: false,
49
- onClick: function onClick() {
50
- return true;
51
- },
52
- testId: 'inline-appearance'
53
- }, {
54
- id: 'editor.media.view.switcher.thumbnail',
55
- title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
56
- selected: false,
57
- disabled: false,
58
- onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI),
59
- testId: 'thumbnail-appearance'
60
- }]
61
- }, {
62
43
  type: 'separator'
63
44
  }, {
64
45
  type: 'custom',
@@ -106,6 +87,57 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
106
87
  onClick: _commands.removeInlineCard,
107
88
  testId: 'media-toolbar-remove-button'
108
89
  }];
90
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.ally-media-file-dropdown_1kxo8')) {
91
+ // TODO: after removing Feature Flag move items back to previous array definition instead of unshift
92
+ items.unshift({
93
+ id: 'editor.media.view.switcher.inline',
94
+ type: 'button',
95
+ icon: _card.IconInline,
96
+ selected: true,
97
+ disabled: false,
98
+ focusEditoronEnter: true,
99
+ onClick: function onClick() {
100
+ return true;
101
+ },
102
+ title: intl.formatMessage(_messages.cardMessages.inlineTitle),
103
+ testId: 'inline-appearance',
104
+ className: 'inline-appearance' // a11y. uses to force focus on item
105
+ }, {
106
+ id: 'editor.media.view.switcher.thumbnail',
107
+ type: 'button',
108
+ icon: _card.IconCard,
109
+ selected: false,
110
+ disabled: false,
111
+ focusEditoronEnter: true,
112
+ onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI, forceFocusSelector),
113
+ title: intl.formatMessage(_messages.cardMessages.blockTitle),
114
+ testId: 'thumbnail-appearance',
115
+ className: 'thumbnail-appearance' // a11y. uses to force focus on item
116
+ });
117
+ } else {
118
+ items.unshift({
119
+ id: 'editor.media.view.switcher',
120
+ type: 'dropdown',
121
+ title: intl.formatMessage(_mediaUi.messages.changeView),
122
+ options: [{
123
+ id: 'editor.media.view.switcher.inline',
124
+ title: intl.formatMessage(_messages.cardMessages.inline),
125
+ selected: true,
126
+ disabled: false,
127
+ onClick: function onClick() {
128
+ return true;
129
+ },
130
+ testId: 'inline-appearance'
131
+ }, {
132
+ id: 'editor.media.view.switcher.thumbnail',
133
+ title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
134
+ selected: false,
135
+ disabled: false,
136
+ onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI, forceFocusSelector),
137
+ testId: 'thumbnail-appearance'
138
+ }]
139
+ });
140
+ }
109
141
  return items;
110
142
  };
111
143
  var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState) {
package/dist/es2019/toolbar/commands.js CHANGED
@@ -2,6 +2,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
2
2
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
3
3
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
4
4
  import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
5
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
5
6
  import { findChangeFromLocation, getChangeMediaAnalytics, getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
6
7
  import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
7
8
  import { isSelectionMediaSingleNode } from '../utils/media-common';
@@ -16,7 +17,7 @@ const getNodeType = state => {
16
17
  } = state.schema.nodes;
17
18
  return isSelectionMediaSingleNode(state) ? mediaSingle.name : mediaInline.name;
18
19
  };
19
- export const changeInlineToMediaCard = editorAnalyticsAPI => (state, dispatch) => {
20
+ export const changeInlineToMediaCard = (editorAnalyticsAPI, forceFocusSelector) => (state, dispatch) => {
20
21
  const {
21
22
  media,
22
23
  mediaInline,
@@ -51,11 +52,17 @@ export const changeInlineToMediaCard = editorAnalyticsAPI => (state, dispatch) =
51
52
  previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
52
53
  }
53
54
  })(tr);
55
+ if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
56
+ const $endOfNode = tr.doc.resolve(nodePos + 1);
57
+ const newSelection = new NodeSelection($endOfNode);
58
+ tr.setSelection(newSelection);
59
+ forceFocusSelector === null || forceFocusSelector === void 0 ? void 0 : forceFocusSelector(`.thumbnail-appearance`)(tr);
60
+ }
54
61
  dispatch(tr);
55
62
  }
56
63
  return true;
57
64
  };
58
- export const changeMediaCardToInline = editorAnalyticsAPI => (state, dispatch) => {
65
+ export const changeMediaCardToInline = (editorAnalyticsAPI, forceFocusSelector) => (state, dispatch) => {
59
66
  const {
60
67
  media,
61
68
  mediaInline,
@@ -87,6 +94,11 @@ export const changeMediaCardToInline = editorAnalyticsAPI => (state, dispatch) =
87
94
  previousType: ACTION_SUBJECT_ID.MEDIA_GROUP
88
95
  }
89
96
  })(tr);
97
+ if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
98
+ const newSelection = NodeSelection.create(tr.doc, state.selection.anchor);
99
+ tr.setSelection(newSelection);
100
+ forceFocusSelector === null || forceFocusSelector === void 0 ? void 0 : forceFocusSelector(`.inline-appearance`)(tr);
101
+ }
90
102
  dispatch(tr);
91
103
  }
92
104
  return true;
package/dist/es2019/toolbar/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React from 'react';
3
3
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
4
- import { alignmentIcons, buildLayoutButtons, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
4
+ import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
5
5
  import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
6
6
  import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
7
7
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -51,32 +51,11 @@ const handleRemoveMediaGroup = (state, dispatch) => {
51
51
  }
52
52
  return true;
53
53
  };
54
- const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) => {
54
+ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) => {
55
55
  const {
56
56
  mediaGroup
57
57
  } = state.schema.nodes;
58
58
  const items = [{
59
- id: 'editor.media.view.switcher',
60
- type: 'dropdown',
61
- title: intl.formatMessage(messages.changeView),
62
- options: [{
63
- id: 'editor.media.view.switcher.inline',
64
- title: intl.formatMessage(cardMessages.inline),
65
- selected: false,
66
- disabled: false,
67
- onClick: changeMediaCardToInline(editorAnalyticsAPI),
68
- testId: 'inline-appearance'
69
- }, {
70
- id: 'editor.media.view.switcher.thumbnail',
71
- title: intl.formatMessage(messages.displayThumbnail),
72
- selected: true,
73
- disabled: false,
74
- onClick: () => {
75
- return true;
76
- },
77
- testId: 'thumbnail-appearance'
78
- }]
79
- }, {
80
59
  type: 'separator'
81
60
  }, {
82
61
  type: 'custom',
@@ -124,6 +103,52 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
124
103
  onClick: handleRemoveMediaGroup,
125
104
  testId: 'media-toolbar-remove-button'
126
105
  }];
106
+ getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8') ?
107
+ // TODO: after removing Feature Flag move items back to previous array definition instead of unshift
108
+ items.unshift({
109
+ id: 'editor.media.view.switcher.inline',
110
+ type: 'button',
111
+ icon: IconInline,
112
+ selected: false,
113
+ focusEditoronEnter: true,
114
+ disabled: false,
115
+ onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
116
+ title: intl.formatMessage(cardMessages.inlineTitle),
117
+ testId: 'inline-appearance',
118
+ className: 'inline-appearance' // a11y. uses to force focus on item
119
+ }, {
120
+ id: 'editor.media.view.switcher.thumbnail',
121
+ type: 'button',
122
+ icon: IconCard,
123
+ selected: true,
124
+ disabled: false,
125
+ focusEditoronEnter: true,
126
+ onClick: () => true,
127
+ title: intl.formatMessage(cardMessages.blockTitle),
128
+ testId: 'thumbnail-appearance',
129
+ className: 'thumbnail-appearance' // a11y. uses to force focus on item
130
+ }) : items.unshift({
131
+ id: 'editor.media.view.switcher',
132
+ type: 'dropdown',
133
+ title: intl.formatMessage(messages.changeView),
134
+ options: [{
135
+ id: 'editor.media.view.switcher.inline',
136
+ title: intl.formatMessage(cardMessages.inline),
137
+ selected: false,
138
+ disabled: false,
139
+ onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
140
+ testId: 'inline-appearance'
141
+ }, {
142
+ id: 'editor.media.view.switcher.thumbnail',
143
+ title: intl.formatMessage(messages.displayThumbnail),
144
+ selected: true,
145
+ disabled: false,
146
+ onClick: () => {
147
+ return true;
148
+ },
149
+ testId: 'thumbnail-appearance'
150
+ }]
151
+ });
127
152
  return items;
128
153
  };
129
154
  const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) => {
@@ -506,14 +531,14 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
506
531
  selectedNodeType = state.selection.node.type;
507
532
  }
508
533
  if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
509
- var _pluginInjectionApi$a8;
534
+ var _pluginInjectionApi$a8, _pluginInjectionApi$f2, _pluginInjectionApi$f3;
510
535
  const mediaOffset = state.selection.$from.parentOffset + 1;
511
536
  baseToolbar.getDomRef = () => {
512
537
  var _mediaPluginState$ele;
513
538
  const selector = mediaFilmstripItemDOMSelector(mediaOffset);
514
539
  return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
515
540
  };
516
- items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
541
+ items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : (_pluginInjectionApi$f3 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : _pluginInjectionApi$f3.forceFocusSelector);
517
542
  } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
518
543
  baseToolbar.getDomRef = () => {
519
544
  var _mediaPluginState$ele2;
package/dist/es2019/toolbar/mediaInline.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
2
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
3
- import { IconEmbed, IconInline } from '@atlaskit/editor-common/card';
3
+ import { IconCard, IconEmbed, IconInline } from '@atlaskit/editor-common/card';
4
4
  import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
5
5
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
6
6
  import DownloadIcon from '@atlaskit/icon/glyph/download';
7
7
  import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
8
8
  import { messages } from '@atlaskit/media-ui';
9
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
10
  import { showLinkingToolbar } from '../commands/linking';
10
11
  import { getMediaLinkingState } from '../pm-plugins/linking';
11
12
  import ImageBorderItem from '../ui/ImageBorder';
@@ -18,8 +19,9 @@ import { shouldShowImageBorder } from './imageBorder';
18
19
  import { LinkToolbarAppearance } from './linking-toolbar-appearance';
19
20
  import { downloadMedia } from './utils';
20
21
  export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options = {}) => {
21
- var _pluginInjectionApi$a;
22
+ var _pluginInjectionApi$a, _pluginInjectionApi$f, _pluginInjectionApi$f2;
22
23
  const editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
24
+ const forceFocusSelector = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 ? void 0 : (_pluginInjectionApi$f2 = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector;
23
25
  const {
24
26
  mediaInline
25
27
  } = state.schema.nodes;
@@ -29,27 +31,6 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
29
31
  return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
30
32
  }
31
33
  const items = [{
32
- id: 'editor.media.view.switcher',
33
- type: 'dropdown',
34
- title: intl.formatMessage(messages.changeView),
35
- options: [{
36
- id: 'editor.media.view.switcher.inline',
37
- title: intl.formatMessage(cardMessages.inline),
38
- selected: true,
39
- disabled: false,
40
- onClick: () => {
41
- return true;
42
- },
43
- testId: 'inline-appearance'
44
- }, {
45
- id: 'editor.media.view.switcher.thumbnail',
46
- title: intl.formatMessage(messages.displayThumbnail),
47
- selected: false,
48
- disabled: false,
49
- onClick: changeInlineToMediaCard(editorAnalyticsAPI),
50
- testId: 'thumbnail-appearance'
51
- }]
52
- }, {
53
34
  type: 'separator'
54
35
  }, {
55
36
  type: 'custom',
@@ -97,6 +78,55 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
97
78
  onClick: removeInlineCard,
98
79
  testId: 'media-toolbar-remove-button'
99
80
  }];
81
+ if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
82
+ // TODO: after removing Feature Flag move items back to previous array definition instead of unshift
83
+ items.unshift({
84
+ id: 'editor.media.view.switcher.inline',
85
+ type: 'button',
86
+ icon: IconInline,
87
+ selected: true,
88
+ disabled: false,
89
+ focusEditoronEnter: true,
90
+ onClick: () => true,
91
+ title: intl.formatMessage(cardMessages.inlineTitle),
92
+ testId: 'inline-appearance',
93
+ className: 'inline-appearance' // a11y. uses to force focus on item
94
+ }, {
95
+ id: 'editor.media.view.switcher.thumbnail',
96
+ type: 'button',
97
+ icon: IconCard,
98
+ selected: false,
99
+ disabled: false,
100
+ focusEditoronEnter: true,
101
+ onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
102
+ title: intl.formatMessage(cardMessages.blockTitle),
103
+ testId: 'thumbnail-appearance',
104
+ className: 'thumbnail-appearance' // a11y. uses to force focus on item
105
+ });
106
+ } else {
107
+ items.unshift({
108
+ id: 'editor.media.view.switcher',
109
+ type: 'dropdown',
110
+ title: intl.formatMessage(messages.changeView),
111
+ options: [{
112
+ id: 'editor.media.view.switcher.inline',
113
+ title: intl.formatMessage(cardMessages.inline),
114
+ selected: true,
115
+ disabled: false,
116
+ onClick: () => {
117
+ return true;
118
+ },
119
+ testId: 'inline-appearance'
120
+ }, {
121
+ id: 'editor.media.view.switcher.thumbnail',
122
+ title: intl.formatMessage(messages.displayThumbnail),
123
+ selected: false,
124
+ disabled: false,
125
+ onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
126
+ testId: 'thumbnail-appearance'
127
+ }]
128
+ });
129
+ }
100
130
  return items;
101
131
  };
102
132
  export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options = {}) => {
package/dist/esm/toolbar/commands.js CHANGED
@@ -5,6 +5,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
5
5
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
6
6
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
7
7
  import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
8
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
9
  import { findChangeFromLocation, getChangeMediaAnalytics, getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
9
10
  import { currentMediaInlineNodeWithPos, currentMediaNodeWithPos } from '../utils/current-media-node';
10
11
  import { isSelectionMediaSingleNode } from '../utils/media-common';
@@ -18,7 +19,7 @@ var getNodeType = function getNodeType(state) {
18
19
  mediaInline = _state$schema$nodes.mediaInline;
19
20
  return isSelectionMediaSingleNode(state) ? mediaSingle.name : mediaInline.name;
20
21
  };
21
- export var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI) {
22
+ export var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector) {
22
23
  return function (state, dispatch) {
23
24
  var _state$schema$nodes2 = state.schema.nodes,
24
25
  media = _state$schema$nodes2.media,
@@ -52,12 +53,18 @@ export var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnal
52
53
  previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
53
54
  }
54
55
  })(tr);
56
+ if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
57
+ var $endOfNode = tr.doc.resolve(nodePos + 1);
58
+ var newSelection = new NodeSelection($endOfNode);
59
+ tr.setSelection(newSelection);
60
+ forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".thumbnail-appearance")(tr);
61
+ }
55
62
  dispatch(tr);
56
63
  }
57
64
  return true;
58
65
  };
59
66
  };
60
- export var changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI) {
67
+ export var changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector) {
61
68
  return function (state, dispatch) {
62
69
  var _state$schema$nodes3 = state.schema.nodes,
63
70
  media = _state$schema$nodes3.media,
@@ -89,6 +96,11 @@ export var changeMediaCardToInline = function changeMediaCardToInline(editorAnal
89
96
  previousType: ACTION_SUBJECT_ID.MEDIA_GROUP
90
97
  }
91
98
  })(tr);
99
+ if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
100
+ var newSelection = NodeSelection.create(tr.doc, state.selection.anchor);
101
+ tr.setSelection(newSelection);
102
+ forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".inline-appearance")(tr);
103
+ }
92
104
  dispatch(tr);
93
105
  }
94
106
  return true;
package/dist/esm/toolbar/index.js CHANGED
@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
5
5
  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; }
6
6
  import React from 'react';
7
7
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
8
- import { alignmentIcons, buildLayoutButtons, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
8
+ import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
9
9
  import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
10
10
  import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
11
11
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -55,30 +55,9 @@ var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
55
55
  }
56
56
  return true;
57
57
  };
58
- var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
58
+ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, forceFocusSelector) {
59
59
  var mediaGroup = state.schema.nodes.mediaGroup;
60
60
  var items = [{
61
- id: 'editor.media.view.switcher',
62
- type: 'dropdown',
63
- title: intl.formatMessage(messages.changeView),
64
- options: [{
65
- id: 'editor.media.view.switcher.inline',
66
- title: intl.formatMessage(cardMessages.inline),
67
- selected: false,
68
- disabled: false,
69
- onClick: changeMediaCardToInline(editorAnalyticsAPI),
70
- testId: 'inline-appearance'
71
- }, {
72
- id: 'editor.media.view.switcher.thumbnail',
73
- title: intl.formatMessage(messages.displayThumbnail),
74
- selected: true,
75
- disabled: false,
76
- onClick: function onClick() {
77
- return true;
78
- },
79
- testId: 'thumbnail-appearance'
80
- }]
81
- }, {
82
61
  type: 'separator'
83
62
  }, {
84
63
  type: 'custom',
@@ -126,6 +105,54 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
126
105
  onClick: handleRemoveMediaGroup,
127
106
  testId: 'media-toolbar-remove-button'
128
107
  }];
108
+ getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8') ?
109
+ // TODO: after removing Feature Flag move items back to previous array definition instead of unshift
110
+ items.unshift({
111
+ id: 'editor.media.view.switcher.inline',
112
+ type: 'button',
113
+ icon: IconInline,
114
+ selected: false,
115
+ focusEditoronEnter: true,
116
+ disabled: false,
117
+ onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
118
+ title: intl.formatMessage(cardMessages.inlineTitle),
119
+ testId: 'inline-appearance',
120
+ className: 'inline-appearance' // a11y. uses to force focus on item
121
+ }, {
122
+ id: 'editor.media.view.switcher.thumbnail',
123
+ type: 'button',
124
+ icon: IconCard,
125
+ selected: true,
126
+ disabled: false,
127
+ focusEditoronEnter: true,
128
+ onClick: function onClick() {
129
+ return true;
130
+ },
131
+ title: intl.formatMessage(cardMessages.blockTitle),
132
+ testId: 'thumbnail-appearance',
133
+ className: 'thumbnail-appearance' // a11y. uses to force focus on item
134
+ }) : items.unshift({
135
+ id: 'editor.media.view.switcher',
136
+ type: 'dropdown',
137
+ title: intl.formatMessage(messages.changeView),
138
+ options: [{
139
+ id: 'editor.media.view.switcher.inline',
140
+ title: intl.formatMessage(cardMessages.inline),
141
+ selected: false,
142
+ disabled: false,
143
+ onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
144
+ testId: 'inline-appearance'
145
+ }, {
146
+ id: 'editor.media.view.switcher.thumbnail',
147
+ title: intl.formatMessage(messages.displayThumbnail),
148
+ selected: true,
149
+ disabled: false,
150
+ onClick: function onClick() {
151
+ return true;
152
+ },
153
+ testId: 'thumbnail-appearance'
154
+ }]
155
+ });
129
156
  return items;
130
157
  };
131
158
  var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
@@ -493,14 +520,14 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
493
520
  selectedNodeType = state.selection.node.type;
494
521
  }
495
522
  if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
496
- var _pluginInjectionApi$a8;
523
+ var _pluginInjectionApi$a8, _pluginInjectionApi$f2;
497
524
  var mediaOffset = state.selection.$from.parentOffset + 1;
498
525
  baseToolbar.getDomRef = function () {
499
526
  var _mediaPluginState$ele;
500
527
  var selector = mediaFilmstripItemDOMSelector(mediaOffset);
501
528
  return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
502
529
  };
503
- items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
530
+ items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector);
504
531
  } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
505
532
  baseToolbar.getDomRef = function () {
506
533
  var _mediaPluginState$ele2;
package/dist/esm/toolbar/mediaInline.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
2
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
3
- import { IconEmbed, IconInline } from '@atlaskit/editor-common/card';
3
+ import { IconCard, IconEmbed, IconInline } from '@atlaskit/editor-common/card';
4
4
  import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
5
5
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
6
6
  import DownloadIcon from '@atlaskit/icon/glyph/download';
7
7
  import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
8
8
  import { messages } from '@atlaskit/media-ui';
9
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
10
  import { showLinkingToolbar } from '../commands/linking';
10
11
  import { getMediaLinkingState } from '../pm-plugins/linking';
11
12
  import ImageBorderItem from '../ui/ImageBorder';
@@ -18,9 +19,10 @@ import { shouldShowImageBorder } from './imageBorder';
18
19
  import { LinkToolbarAppearance } from './linking-toolbar-appearance';
19
20
  import { downloadMedia } from './utils';
20
21
  export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
21
- var _pluginInjectionApi$a;
22
+ var _pluginInjectionApi$a, _pluginInjectionApi$f;
22
23
  var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
23
24
  var editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
25
+ var forceFocusSelector = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector;
24
26
  var mediaInline = state.schema.nodes.mediaInline;
25
27
  var mediaType = state.selection instanceof NodeSelection && state.selection.node.attrs.type;
26
28
  var mediaLinkingState = getMediaLinkingState(state);
@@ -28,27 +30,6 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
28
30
  return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
29
31
  }
30
32
  var items = [{
31
- id: 'editor.media.view.switcher',
32
- type: 'dropdown',
33
- title: intl.formatMessage(messages.changeView),
34
- options: [{
35
- id: 'editor.media.view.switcher.inline',
36
- title: intl.formatMessage(cardMessages.inline),
37
- selected: true,
38
- disabled: false,
39
- onClick: function onClick() {
40
- return true;
41
- },
42
- testId: 'inline-appearance'
43
- }, {
44
- id: 'editor.media.view.switcher.thumbnail',
45
- title: intl.formatMessage(messages.displayThumbnail),
46
- selected: false,
47
- disabled: false,
48
- onClick: changeInlineToMediaCard(editorAnalyticsAPI),
49
- testId: 'thumbnail-appearance'
50
- }]
51
- }, {
52
33
  type: 'separator'
53
34
  }, {
54
35
  type: 'custom',
@@ -96,6 +77,57 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
96
77
  onClick: removeInlineCard,
97
78
  testId: 'media-toolbar-remove-button'
98
79
  }];
80
+ if (getBooleanFF('platform.editor.ally-media-file-dropdown_1kxo8')) {
81
+ // TODO: after removing Feature Flag move items back to previous array definition instead of unshift
82
+ items.unshift({
83
+ id: 'editor.media.view.switcher.inline',
84
+ type: 'button',
85
+ icon: IconInline,
86
+ selected: true,
87
+ disabled: false,
88
+ focusEditoronEnter: true,
89
+ onClick: function onClick() {
90
+ return true;
91
+ },
92
+ title: intl.formatMessage(cardMessages.inlineTitle),
93
+ testId: 'inline-appearance',
94
+ className: 'inline-appearance' // a11y. uses to force focus on item
95
+ }, {
96
+ id: 'editor.media.view.switcher.thumbnail',
97
+ type: 'button',
98
+ icon: IconCard,
99
+ selected: false,
100
+ disabled: false,
101
+ focusEditoronEnter: true,
102
+ onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
103
+ title: intl.formatMessage(cardMessages.blockTitle),
104
+ testId: 'thumbnail-appearance',
105
+ className: 'thumbnail-appearance' // a11y. uses to force focus on item
106
+ });
107
+ } else {
108
+ items.unshift({
109
+ id: 'editor.media.view.switcher',
110
+ type: 'dropdown',
111
+ title: intl.formatMessage(messages.changeView),
112
+ options: [{
113
+ id: 'editor.media.view.switcher.inline',
114
+ title: intl.formatMessage(cardMessages.inline),
115
+ selected: true,
116
+ disabled: false,
117
+ onClick: function onClick() {
118
+ return true;
119
+ },
120
+ testId: 'inline-appearance'
121
+ }, {
122
+ id: 'editor.media.view.switcher.thumbnail',
123
+ title: intl.formatMessage(messages.displayThumbnail),
124
+ selected: false,
125
+ disabled: false,
126
+ onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
127
+ testId: 'thumbnail-appearance'
128
+ }]
129
+ });
130
+ }
99
131
  return items;
100
132
  };
101
133
  export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState) {
package/dist/types/toolbar/commands.d.ts CHANGED
@@ -1,13 +1,14 @@
1
1
  import type { BorderMarkAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
2
2
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
3
  import type { Command } from '@atlaskit/editor-common/types';
4
+ import type { ForceFocusSelector } from '@atlaskit/editor-plugin-floating-toolbar';
4
5
  import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
5
6
  import type { EventInput } from '../pm-plugins/types';
6
7
  import type { PixelEntryValidation } from '../ui/PixelEntry/types';
7
8
  export declare const DEFAULT_BORDER_COLOR = "#091e4224";
8
9
  export declare const DEFAULT_BORDER_SIZE = 2;
9
- export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
10
- export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
10
+ export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
11
+ export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
11
12
  export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => Command;
12
13
  export declare const removeInlineCard: Command;
13
14
  export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
package/dist/types-ts4.5/toolbar/commands.d.ts CHANGED
@@ -1,13 +1,14 @@
1
1
  import type { BorderMarkAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
2
2
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
3
  import type { Command } from '@atlaskit/editor-common/types';
4
+ import type { ForceFocusSelector } from '@atlaskit/editor-plugin-floating-toolbar';
4
5
  import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
5
6
  import type { EventInput } from '../pm-plugins/types';
6
7
  import type { PixelEntryValidation } from '../ui/PixelEntry/types';
7
8
  export declare const DEFAULT_BORDER_COLOR = "#091e4224";
8
9
  export declare const DEFAULT_BORDER_SIZE = 2;
9
- export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
10
- export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
10
+ export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
11
+ export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
11
12
  export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => Command;
12
13
  export declare const removeInlineCard: Command;
13
14
  export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "0.10.4",
3
+ "version": "0.11.1",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/analytics-namespaced-context": "^6.9.0",
38
38
  "@atlaskit/analytics-next": "^9.1.0",
39
39
  "@atlaskit/button": "^17.2.0",
40
- "@atlaskit/editor-common": "^76.36.0",
40
+ "@atlaskit/editor-common": "^76.39.0",
41
41
  "@atlaskit/editor-palette": "1.5.2",
42
42
  "@atlaskit/editor-plugin-analytics": "^0.4.0",
43
43
  "@atlaskit/editor-plugin-decorations": "^0.2.0",
@@ -47,7 +47,7 @@
47
47
  "@atlaskit/editor-plugin-focus": "^0.2.0",
48
48
  "@atlaskit/editor-plugin-grid": "^0.3.0",
49
49
  "@atlaskit/editor-plugin-guideline": "^0.5.0",
50
- "@atlaskit/editor-plugin-selection": "^0.1.0",
50
+ "@atlaskit/editor-plugin-selection": "^0.2.0",
51
51
  "@atlaskit/editor-plugin-width": "^0.2.0",
52
52
  "@atlaskit/editor-prosemirror": "1.1.0",
53
53
  "@atlaskit/editor-shared-styles": "^2.9.0",
@@ -147,6 +147,9 @@
147
147
  },
148
148
  "platform.editor.a11y-media-resizing_b5v0o": {
149
149
  "type": "boolean"
150
+ },
151
+ "platform.editor.ally-media-file-dropdown_1kxo8": {
152
+ "type": "boolean"
150
153
  }
151
154
  },
152
155
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"