@atlaskit/editor-plugin-media 2.2.4 → 2.3.0

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 (8) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/cjs/ui/toolbar/index.js +39 -20
  3. package/dist/cjs/ui/toolbar/mediaInline.js +19 -40
  4. package/dist/es2019/ui/toolbar/index.js +32 -12
  5. package/dist/es2019/ui/toolbar/mediaInline.js +19 -40
  6. package/dist/esm/ui/toolbar/index.js +32 -13
  7. package/dist/esm/ui/toolbar/mediaInline.js +19 -40
  8. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 2.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#120472](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120472)
8
+ [`73c800ab5f2fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/73c800ab5f2fc) -
9
+ ED-26766 update adf-schema from 47.2.1 to 47.6.0 and adf-schema-json from 1.27.0 to 1.31.0
10
+
11
+ ### Patch Changes
12
+
13
+ - [#121822](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121822)
14
+ [`2316af8fbe07d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2316af8fbe07d) -
15
+ [ux] Updates floating toolbar of the inline and media single by moving alt text option to the
16
+ overflow menu.
17
+ - [#121533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121533)
18
+ [`9efef36af09aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9efef36af09aa) -
19
+ Wire up the copy functionality in floating toolbar overflow menu
20
+ - Updated dependencies
21
+
22
+ ## 2.2.5
23
+
24
+ ### Patch Changes
25
+
26
+ - [#121092](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121092)
27
+ [`8cd08b738070d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8cd08b738070d) -
28
+ [ux] Implemented full height separator as per design for media and card
29
+
3
30
  ## 2.2.4
4
31
 
5
32
  ### Patch Changes
package/dist/cjs/ui/toolbar/index.js CHANGED
@@ -12,6 +12,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
12
12
  var _react = _interopRequireDefault(require("react"));
13
13
  var _analytics = require("@atlaskit/editor-common/analytics");
14
14
  var _card = require("@atlaskit/editor-common/card");
15
+ var _media = require("@atlaskit/editor-common/media");
15
16
  var _mediaInline = require("@atlaskit/editor-common/media-inline");
16
17
  var _mediaSingle = require("@atlaskit/editor-common/media-single");
17
18
  var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
@@ -26,6 +27,7 @@ var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inl
26
27
  var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
27
28
  var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
28
29
  var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
30
+ var _text = _interopRequireDefault(require("@atlaskit/icon/core/text"));
29
31
  var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
30
32
  var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
31
33
  var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
@@ -34,6 +36,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
34
36
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
35
37
  var _styles = require("../../nodeviews/styles");
36
38
  var _altText = require("../../pm-plugins/alt-text");
39
+ var _commands = require("../../pm-plugins/alt-text/commands");
37
40
  var _linking = require("../../pm-plugins/commands/linking");
38
41
  var _linking2 = require("../../pm-plugins/linking");
39
42
  var _pluginKey = require("../../pm-plugins/plugin-key");
@@ -42,7 +45,7 @@ var _mediaSingle2 = require("../../pm-plugins/utils/media-single");
42
45
  var _ImageBorder = _interopRequireDefault(require("../../ui/ImageBorder"));
43
46
  var _PixelEntry = require("../../ui/PixelEntry");
44
47
  var _altText2 = require("./alt-text");
45
- var _commands = require("./commands");
48
+ var _commands2 = require("./commands");
46
49
  var _comments = require("./comments");
47
50
  var _imageBorder = require("./imageBorder");
48
51
  var _layoutGroup = require("./layout-group");
@@ -100,7 +103,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
100
103
  selected: false,
101
104
  focusEditoronEnter: true,
102
105
  disabled: false,
103
- onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
106
+ onClick: (0, _commands2.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
104
107
  title: intl.formatMessage(_messages.cardMessages.inlineTitle),
105
108
  testId: 'inline-appearance',
106
109
  className: 'inline-appearance' // a11y. uses to force focus on item
@@ -206,11 +209,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
206
209
  return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
207
210
  toggleBorder: function toggleBorder() {
208
211
  var _pluginInjectionApi$a;
209
- (0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
212
+ (0, _commands2.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
210
213
  },
211
214
  setBorder: function setBorder(attrs) {
212
215
  var _pluginInjectionApi$a2;
213
- (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
216
+ (0, _commands2.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
214
217
  },
215
218
  borderMark: borderMark,
216
219
  intl: intl
@@ -293,7 +296,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
293
296
  LEGACY_fallbackIcon: _card.IconInline
294
297
  });
295
298
  },
296
- onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
299
+ onClick: (0, _commands2.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
297
300
  testId: 'image-inline-appearance'
298
301
  }, {
299
302
  type: 'button',
@@ -321,7 +324,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
321
324
  var _options2 = [{
322
325
  id: 'editor.media.convert.mediainline',
323
326
  title: inlineSwitcherTitle,
324
- onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
327
+ onClick: (0, _commands2.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
325
328
  icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
326
329
  color: "currentColor",
327
330
  spacing: "spacious",
@@ -361,7 +364,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
361
364
  }
362
365
  };
363
366
  toolbarButtons.push(switchFromBlockToInline, {
364
- type: 'separator'
367
+ type: 'separator',
368
+ fullHeight: true
365
369
  });
366
370
  }
367
371
  }
@@ -428,7 +432,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
428
432
  var width = _ref3.width,
429
433
  validation = _ref3.validation;
430
434
  var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled, isNested);
431
- (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
435
+ (0, _commands2.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
432
436
  },
433
437
  onMigrate: function onMigrate() {
434
438
  var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
@@ -564,7 +568,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
564
568
  supportsViewMode: true
565
569
  });
566
570
  }
567
- if (allowAltTextOnImages) {
571
+ if (allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
568
572
  var _pluginInjectionApi$a8;
569
573
  toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
570
574
  type: 'separator'
@@ -586,7 +590,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
586
590
  testId: 'media-toolbar-remove-button',
587
591
  supportsViewMode: false
588
592
  };
589
- if (!(0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
593
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
590
594
  // Preview Support
591
595
  if (allowAdvancedToolBarOptions && allowImagePreview) {
592
596
  var _mediaNode$attrs2;
@@ -610,7 +614,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
610
614
  supportsViewMode: true
611
615
  }, {
612
616
  type: 'separator',
613
- supportsViewMode: true
617
+ supportsViewMode: true,
618
+ fullHeight: true
614
619
  });
615
620
  }
616
621
  }
@@ -730,14 +735,27 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
730
735
  };
731
736
  items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
732
737
  }
733
- if (items.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
734
- var _items;
735
- var overflowMenuConfig = [{
736
- type: 'separator',
737
- supportsViewMode: true
738
- }, {
738
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
739
+ var _pluginInjectionApi$a10;
740
+ if (items[items.length - 1].type === 'separator') {
741
+ var separatorItem = items[items.length - 1];
742
+ separatorItem.fullHeight = true;
743
+ } else {
744
+ items.push({
745
+ type: 'separator',
746
+ fullHeight: true
747
+ });
748
+ }
749
+ var altTextTitle = intl.formatMessage(_media.altTextMessages.addAltText);
750
+ items.push({
739
751
  type: 'overflow-dropdown',
740
752
  options: [{
753
+ title: altTextTitle,
754
+ onClick: (0, _commands.openMediaAltTextMenu)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions),
755
+ icon: /*#__PURE__*/_react.default.createElement(_text.default, {
756
+ label: altTextTitle
757
+ })
758
+ }, {
741
759
  title: 'Resize',
742
760
  onClick: function onClick() {
743
761
  // TODO open resize dialog?
@@ -751,7 +769,9 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
751
769
  }, {
752
770
  title: 'Copy',
753
771
  onClick: function onClick() {
754
- // TODO replace with copy-button plugin
772
+ var _pluginInjectionApi$c, _pluginInjectionApi$f3;
773
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute( // @ts-ignore
774
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : _pluginInjectionApi$f3.commands.copyNode(nodeType));
755
775
  return true;
756
776
  },
757
777
  icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
@@ -764,8 +784,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
764
784
  label: "Delete"
765
785
  })
766
786
  }]
767
- }];
768
- (_items = items).push.apply(_items, overflowMenuConfig);
787
+ });
769
788
  }
770
789
 
771
790
  // Ignored via go/ees005
package/dist/cjs/ui/toolbar/mediaInline.js CHANGED
@@ -88,7 +88,8 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
88
88
  })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
89
89
  }
90
90
  }, {
91
- type: 'separator'
91
+ type: 'separator',
92
+ fullHeight: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
92
93
  }, {
93
94
  id: 'editor.media.card.download',
94
95
  type: 'button',
@@ -246,7 +247,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
246
247
  }
247
248
  };
248
249
  inlineImageItems.push(switchFromInlineToBlock, {
249
- type: 'separator'
250
+ type: 'separator',
251
+ fullHeight: true
250
252
  });
251
253
  }
252
254
 
@@ -296,32 +298,6 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
296
298
  supportsViewMode: true
297
299
  });
298
300
  }
299
- if (options.allowAltTextOnImages && !(0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
300
- var _pluginInjectionApi$a5;
301
- inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
302
- type: 'separator'
303
- });
304
- }
305
- if (!(0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
306
- inlineImageItems.push({
307
- id: 'editor.media.delete',
308
- type: 'button',
309
- appearance: 'danger',
310
- focusEditoronEnter: true,
311
- icon: _delete.default,
312
- iconFallback: _remove.default,
313
- onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
314
- onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
315
- onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
316
- onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
317
- title: intl.formatMessage(_messages.default.remove),
318
- onClick: _commands.removeInlineCard,
319
- testId: 'media-toolbar-remove-button'
320
- });
321
- inlineImageItems.push({
322
- type: 'separator'
323
- });
324
- }
325
301
 
326
302
  //Image Preview
327
303
  if (options.allowImagePreview) {
@@ -342,7 +318,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
342
318
  supportsViewMode: true
343
319
  }, {
344
320
  type: 'separator',
345
- supportsViewMode: true
321
+ supportsViewMode: true,
322
+ fullHeight: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
346
323
  });
347
324
  }
348
325
  if (options.isViewOnly) {
@@ -362,20 +339,22 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
362
339
  });
363
340
  }
364
341
  if (options.allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
365
- var _pluginInjectionApi$a6;
366
- inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
342
+ var _pluginInjectionApi$a5;
343
+ inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
367
344
  type: 'separator'
368
345
  });
369
346
  }
370
- inlineImageItems.push({
371
- type: 'copy-button',
372
- supportsViewMode: true,
373
- items: [{
374
- state: state,
375
- formatMessage: intl.formatMessage,
376
- nodeType: mediaInline
377
- }]
378
- });
347
+ if (options.isViewOnly || (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
348
+ inlineImageItems.push({
349
+ type: 'copy-button',
350
+ supportsViewMode: true,
351
+ items: [{
352
+ state: state,
353
+ formatMessage: intl.formatMessage,
354
+ nodeType: mediaInline
355
+ }]
356
+ });
357
+ }
379
358
  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
380
359
  inlineImageItems.push({
381
360
  type: 'separator'
package/dist/es2019/ui/toolbar/index.js CHANGED
@@ -2,6 +2,7 @@ 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
4
  import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
5
+ import { altTextMessages } from '@atlaskit/editor-common/media';
5
6
  import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
6
7
  import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
7
8
  import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
@@ -16,6 +17,7 @@ import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
16
17
  import MaximizeIcon from '@atlaskit/icon/core/maximize';
17
18
  import DownloadIcon from '@atlaskit/icon/core/migration/download';
18
19
  import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
20
+ import TextIcon from '@atlaskit/icon/core/text';
19
21
  import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
20
22
  import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
21
23
  import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -24,6 +26,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
24
26
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
25
27
  import { MediaSingleNodeSelector } from '../../nodeviews/styles';
26
28
  import { getPluginState as getMediaAltTextPluginState } from '../../pm-plugins/alt-text';
29
+ import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
27
30
  import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
28
31
  import { getMediaLinkingState } from '../../pm-plugins/linking';
29
32
  import { stateKey } from '../../pm-plugins/plugin-key';
@@ -349,7 +352,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
349
352
  })
350
353
  };
351
354
  toolbarButtons.push(switchFromBlockToInline, {
352
- type: 'separator'
355
+ type: 'separator',
356
+ fullHeight: true
353
357
  });
354
358
  }
355
359
  }
@@ -566,7 +570,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
566
570
  supportsViewMode: true
567
571
  });
568
572
  }
569
- if (allowAltTextOnImages) {
573
+ if (allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
570
574
  var _pluginInjectionApi$a8;
571
575
  toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
572
576
  type: 'separator'
@@ -588,7 +592,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
588
592
  testId: 'media-toolbar-remove-button',
589
593
  supportsViewMode: false
590
594
  };
591
- if (!editorExperiment('platform_editor_controls', 'control')) {
595
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
592
596
  // Preview Support
593
597
  if (allowAdvancedToolBarOptions && allowImagePreview) {
594
598
  var _mediaNode$attrs2;
@@ -612,7 +616,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
612
616
  supportsViewMode: true
613
617
  }, {
614
618
  type: 'separator',
615
- supportsViewMode: true
619
+ supportsViewMode: true,
620
+ fullHeight: true
616
621
  });
617
622
  }
618
623
  }
@@ -730,13 +735,27 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
730
735
  };
731
736
  items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
732
737
  }
733
- if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
734
- const overflowMenuConfig = [{
735
- type: 'separator',
736
- supportsViewMode: true
737
- }, {
738
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
739
+ var _pluginInjectionApi$a10;
740
+ if (items[items.length - 1].type === 'separator') {
741
+ const separatorItem = items[items.length - 1];
742
+ separatorItem.fullHeight = true;
743
+ } else {
744
+ items.push({
745
+ type: 'separator',
746
+ fullHeight: true
747
+ });
748
+ }
749
+ const altTextTitle = intl.formatMessage(altTextMessages.addAltText);
750
+ items.push({
738
751
  type: 'overflow-dropdown',
739
752
  options: [{
753
+ title: altTextTitle,
754
+ onClick: openMediaAltTextMenu(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions),
755
+ icon: /*#__PURE__*/React.createElement(TextIcon, {
756
+ label: altTextTitle
757
+ })
758
+ }, {
740
759
  title: 'Resize',
741
760
  onClick: () => {
742
761
  // TODO open resize dialog?
@@ -750,7 +769,9 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
750
769
  }, {
751
770
  title: 'Copy',
752
771
  onClick: () => {
753
- // TODO replace with copy-button plugin
772
+ var _pluginInjectionApi$c, _pluginInjectionApi$f5;
773
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute( // @ts-ignore
774
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f5 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f5 === void 0 ? void 0 : _pluginInjectionApi$f5.commands.copyNode(nodeType));
754
775
  return true;
755
776
  },
756
777
  icon: /*#__PURE__*/React.createElement(CopyIcon, {
@@ -763,8 +784,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
763
784
  label: "Delete"
764
785
  })
765
786
  }]
766
- }];
767
- items.push(...overflowMenuConfig);
787
+ });
768
788
  }
769
789
 
770
790
  // Ignored via go/ees005
package/dist/es2019/ui/toolbar/mediaInline.js CHANGED
@@ -77,7 +77,8 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
77
77
  })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
78
78
  }
79
79
  }, {
80
- type: 'separator'
80
+ type: 'separator',
81
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
81
82
  }, {
82
83
  id: 'editor.media.card.download',
83
84
  type: 'button',
@@ -232,7 +233,8 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
232
233
  })
233
234
  };
234
235
  inlineImageItems.push(switchFromInlineToBlock, {
235
- type: 'separator'
236
+ type: 'separator',
237
+ fullHeight: true
236
238
  });
237
239
  }
238
240
 
@@ -288,32 +290,6 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
288
290
  supportsViewMode: true
289
291
  });
290
292
  }
291
- if (options.allowAltTextOnImages && !editorExperiment('platform_editor_controls', 'control')) {
292
- var _pluginInjectionApi$a5;
293
- inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
294
- type: 'separator'
295
- });
296
- }
297
- if (!editorExperiment('platform_editor_controls', 'control')) {
298
- inlineImageItems.push({
299
- id: 'editor.media.delete',
300
- type: 'button',
301
- appearance: 'danger',
302
- focusEditoronEnter: true,
303
- icon: DeleteIcon,
304
- iconFallback: RemoveIcon,
305
- onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
306
- onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
307
- onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
308
- onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
309
- title: intl.formatMessage(commonMessages.remove),
310
- onClick: removeInlineCard,
311
- testId: 'media-toolbar-remove-button'
312
- });
313
- inlineImageItems.push({
314
- type: 'separator'
315
- });
316
- }
317
293
 
318
294
  //Image Preview
319
295
  if (options.allowImagePreview) {
@@ -334,7 +310,8 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
334
310
  supportsViewMode: true
335
311
  }, {
336
312
  type: 'separator',
337
- supportsViewMode: true
313
+ supportsViewMode: true,
314
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
338
315
  });
339
316
  }
340
317
  if (options.isViewOnly) {
@@ -354,20 +331,22 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
354
331
  });
355
332
  }
356
333
  if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
357
- var _pluginInjectionApi$a6;
358
- inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
334
+ var _pluginInjectionApi$a5;
335
+ inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
359
336
  type: 'separator'
360
337
  });
361
338
  }
362
- inlineImageItems.push({
363
- type: 'copy-button',
364
- supportsViewMode: true,
365
- items: [{
366
- state,
367
- formatMessage: intl.formatMessage,
368
- nodeType: mediaInline
369
- }]
370
- });
339
+ if (options.isViewOnly || editorExperiment('platform_editor_controls', 'control')) {
340
+ inlineImageItems.push({
341
+ type: 'copy-button',
342
+ supportsViewMode: true,
343
+ items: [{
344
+ state,
345
+ formatMessage: intl.formatMessage,
346
+ nodeType: mediaInline
347
+ }]
348
+ });
349
+ }
371
350
  if (editorExperiment('platform_editor_controls', 'control')) {
372
351
  inlineImageItems.push({
373
352
  type: 'separator'
package/dist/esm/ui/toolbar/index.js CHANGED
@@ -6,6 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
6
6
  import React from 'react';
7
7
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
8
8
  import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
9
+ import { altTextMessages } from '@atlaskit/editor-common/media';
9
10
  import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
10
11
  import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
11
12
  import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
@@ -20,6 +21,7 @@ import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
20
21
  import MaximizeIcon from '@atlaskit/icon/core/maximize';
21
22
  import DownloadIcon from '@atlaskit/icon/core/migration/download';
22
23
  import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
24
+ import TextIcon from '@atlaskit/icon/core/text';
23
25
  import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
24
26
  import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
25
27
  import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -28,6 +30,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
28
30
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
29
31
  import { MediaSingleNodeSelector } from '../../nodeviews/styles';
30
32
  import { getPluginState as getMediaAltTextPluginState } from '../../pm-plugins/alt-text';
33
+ import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
31
34
  import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
32
35
  import { getMediaLinkingState } from '../../pm-plugins/linking';
33
36
  import { stateKey } from '../../pm-plugins/plugin-key';
@@ -351,7 +354,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
351
354
  }
352
355
  };
353
356
  toolbarButtons.push(switchFromBlockToInline, {
354
- type: 'separator'
357
+ type: 'separator',
358
+ fullHeight: true
355
359
  });
356
360
  }
357
361
  }
@@ -554,7 +558,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
554
558
  supportsViewMode: true
555
559
  });
556
560
  }
557
- if (allowAltTextOnImages) {
561
+ if (allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
558
562
  var _pluginInjectionApi$a8;
559
563
  toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
560
564
  type: 'separator'
@@ -576,7 +580,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
576
580
  testId: 'media-toolbar-remove-button',
577
581
  supportsViewMode: false
578
582
  };
579
- if (!editorExperiment('platform_editor_controls', 'control')) {
583
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
580
584
  // Preview Support
581
585
  if (allowAdvancedToolBarOptions && allowImagePreview) {
582
586
  var _mediaNode$attrs2;
@@ -600,7 +604,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
600
604
  supportsViewMode: true
601
605
  }, {
602
606
  type: 'separator',
603
- supportsViewMode: true
607
+ supportsViewMode: true,
608
+ fullHeight: true
604
609
  });
605
610
  }
606
611
  }
@@ -720,14 +725,27 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
720
725
  };
721
726
  items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
722
727
  }
723
- if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
724
- var _items;
725
- var overflowMenuConfig = [{
726
- type: 'separator',
727
- supportsViewMode: true
728
- }, {
728
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
729
+ var _pluginInjectionApi$a10;
730
+ if (items[items.length - 1].type === 'separator') {
731
+ var separatorItem = items[items.length - 1];
732
+ separatorItem.fullHeight = true;
733
+ } else {
734
+ items.push({
735
+ type: 'separator',
736
+ fullHeight: true
737
+ });
738
+ }
739
+ var altTextTitle = intl.formatMessage(altTextMessages.addAltText);
740
+ items.push({
729
741
  type: 'overflow-dropdown',
730
742
  options: [{
743
+ title: altTextTitle,
744
+ onClick: openMediaAltTextMenu(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions),
745
+ icon: /*#__PURE__*/React.createElement(TextIcon, {
746
+ label: altTextTitle
747
+ })
748
+ }, {
731
749
  title: 'Resize',
732
750
  onClick: function onClick() {
733
751
  // TODO open resize dialog?
@@ -741,7 +759,9 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
741
759
  }, {
742
760
  title: 'Copy',
743
761
  onClick: function onClick() {
744
- // TODO replace with copy-button plugin
762
+ var _pluginInjectionApi$c, _pluginInjectionApi$f3;
763
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute( // @ts-ignore
764
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : _pluginInjectionApi$f3.commands.copyNode(nodeType));
745
765
  return true;
746
766
  },
747
767
  icon: /*#__PURE__*/React.createElement(CopyIcon, {
@@ -754,8 +774,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
754
774
  label: "Delete"
755
775
  })
756
776
  }]
757
- }];
758
- (_items = items).push.apply(_items, overflowMenuConfig);
777
+ });
759
778
  }
760
779
 
761
780
  // Ignored via go/ees005
package/dist/esm/ui/toolbar/mediaInline.js CHANGED
@@ -78,7 +78,8 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
78
78
  })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
79
79
  }
80
80
  }, {
81
- type: 'separator'
81
+ type: 'separator',
82
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
82
83
  }, {
83
84
  id: 'editor.media.card.download',
84
85
  type: 'button',
@@ -236,7 +237,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
236
237
  }
237
238
  };
238
239
  inlineImageItems.push(switchFromInlineToBlock, {
239
- type: 'separator'
240
+ type: 'separator',
241
+ fullHeight: true
240
242
  });
241
243
  }
242
244
 
@@ -286,32 +288,6 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
286
288
  supportsViewMode: true
287
289
  });
288
290
  }
289
- if (options.allowAltTextOnImages && !editorExperiment('platform_editor_controls', 'control')) {
290
- var _pluginInjectionApi$a5;
291
- inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
292
- type: 'separator'
293
- });
294
- }
295
- if (!editorExperiment('platform_editor_controls', 'control')) {
296
- inlineImageItems.push({
297
- id: 'editor.media.delete',
298
- type: 'button',
299
- appearance: 'danger',
300
- focusEditoronEnter: true,
301
- icon: DeleteIcon,
302
- iconFallback: RemoveIcon,
303
- onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
304
- onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
305
- onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
306
- onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
307
- title: intl.formatMessage(commonMessages.remove),
308
- onClick: removeInlineCard,
309
- testId: 'media-toolbar-remove-button'
310
- });
311
- inlineImageItems.push({
312
- type: 'separator'
313
- });
314
- }
315
291
 
316
292
  //Image Preview
317
293
  if (options.allowImagePreview) {
@@ -332,7 +308,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
332
308
  supportsViewMode: true
333
309
  }, {
334
310
  type: 'separator',
335
- supportsViewMode: true
311
+ supportsViewMode: true,
312
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
336
313
  });
337
314
  }
338
315
  if (options.isViewOnly) {
@@ -352,20 +329,22 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
352
329
  });
353
330
  }
354
331
  if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
355
- var _pluginInjectionApi$a6;
356
- inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
332
+ var _pluginInjectionApi$a5;
333
+ inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
357
334
  type: 'separator'
358
335
  });
359
336
  }
360
- inlineImageItems.push({
361
- type: 'copy-button',
362
- supportsViewMode: true,
363
- items: [{
364
- state: state,
365
- formatMessage: intl.formatMessage,
366
- nodeType: mediaInline
367
- }]
368
- });
337
+ if (options.isViewOnly || editorExperiment('platform_editor_controls', 'control')) {
338
+ inlineImageItems.push({
339
+ type: 'copy-button',
340
+ supportsViewMode: true,
341
+ items: [{
342
+ state: state,
343
+ formatMessage: intl.formatMessage,
344
+ nodeType: mediaInline
345
+ }]
346
+ });
347
+ }
369
348
  if (editorExperiment('platform_editor_controls', 'control')) {
370
349
  inlineImageItems.push({
371
350
  type: 'separator'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "2.2.4",
3
+ "version": "2.3.0",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,19 +34,19 @@
34
34
  "./types": "./src/types/index.ts"
35
35
  },
36
36
  "dependencies": {
37
- "@atlaskit/adf-schema": "^47.2.1",
37
+ "@atlaskit/adf-schema": "^47.6.0",
38
38
  "@atlaskit/analytics-namespaced-context": "^7.0.0",
39
39
  "@atlaskit/analytics-next": "^11.0.0",
40
40
  "@atlaskit/button": "^21.1.0",
41
- "@atlaskit/editor-common": "^100.4.0",
41
+ "@atlaskit/editor-common": "^100.5.0",
42
42
  "@atlaskit/editor-palette": "2.0.0",
43
- "@atlaskit/editor-plugin-analytics": "^2.0.0",
44
- "@atlaskit/editor-plugin-annotation": "2.0.2",
43
+ "@atlaskit/editor-plugin-analytics": "^2.1.0",
44
+ "@atlaskit/editor-plugin-annotation": "2.1.0",
45
45
  "@atlaskit/editor-plugin-connectivity": "^2.0.0",
46
46
  "@atlaskit/editor-plugin-decorations": "^2.0.0",
47
47
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
48
48
  "@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
49
- "@atlaskit/editor-plugin-floating-toolbar": "^3.0.0",
49
+ "@atlaskit/editor-plugin-floating-toolbar": "^3.1.0",
50
50
  "@atlaskit/editor-plugin-focus": "^1.5.0",
51
51
  "@atlaskit/editor-plugin-grid": "^2.0.0",
52
52
  "@atlaskit/editor-plugin-guideline": "^2.0.0",
@@ -69,8 +69,8 @@
69
69
  "@atlaskit/primitives": "^14.1.0",
70
70
  "@atlaskit/textfield": "^8.0.0",
71
71
  "@atlaskit/theme": "^17.0.0",
72
- "@atlaskit/tmp-editor-statsig": "^3.3.0",
73
- "@atlaskit/tokens": "^4.2.0",
72
+ "@atlaskit/tmp-editor-statsig": "^3.4.0",
73
+ "@atlaskit/tokens": "^4.3.0",
74
74
  "@atlaskit/tooltip": "^20.0.0",
75
75
  "@babel/runtime": "^7.0.0",
76
76
  "@emotion/react": "^11.7.1",