@atlaskit/editor-plugin-media 2.6.6 → 2.6.7

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 (14) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/MediaViewer/MediaViewerContainer.js +2 -2
  3. package/dist/cjs/ui/toolbar/index.js +10 -2
  4. package/dist/cjs/ui/toolbar/mediaInline.js +5 -1
  5. package/dist/cjs/ui/toolbar/pixel-resizing.js +5 -1
  6. package/dist/es2019/ui/MediaViewer/MediaViewerContainer.js +2 -2
  7. package/dist/es2019/ui/toolbar/index.js +10 -2
  8. package/dist/es2019/ui/toolbar/mediaInline.js +5 -1
  9. package/dist/es2019/ui/toolbar/pixel-resizing.js +5 -1
  10. package/dist/esm/ui/MediaViewer/MediaViewerContainer.js +2 -2
  11. package/dist/esm/ui/toolbar/index.js +10 -2
  12. package/dist/esm/ui/toolbar/mediaInline.js +5 -1
  13. package/dist/esm/ui/toolbar/pixel-resizing.js +5 -1
  14. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 2.6.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [#146103](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/146103)
8
+ [`de3c759c70129`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/de3c759c70129) -
9
+ [ux] ED-26971 Update media toolbar icons and show resize option in disabled state for inline media
10
+
3
11
  ## 2.6.6
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/ui/MediaViewer/MediaViewerContainer.js CHANGED
@@ -55,13 +55,13 @@ var MediaViewerContainer = exports.MediaViewerContainer = function MediaViewerCo
55
55
  var isVideoMedia = (0, _isType.isVideo)((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
56
56
  var shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && (0, _experiments.editorExperiment)('platform_editor_controls', 'control');
57
57
  return (0, _react2.jsx)(_react.Fragment, null, isEditorViewMode ? (0, _react2.jsx)(_react.Fragment, null, isInline ?
58
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
58
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
59
59
  (0, _react2.jsx)("span", {
60
60
  onClick: showMediaViewer,
61
61
  css: interactiveStyles,
62
62
  "data-testid": mediaViewerContainerTestID
63
63
  }, children) :
64
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
64
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
65
65
  (0, _react2.jsx)("div", {
66
66
  onClick: showMediaViewer,
67
67
  css: interactiveStyles,
package/dist/cjs/ui/toolbar/index.js CHANGED
@@ -419,7 +419,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
419
419
  onClick: function onClick() {
420
420
  return true;
421
421
  },
422
- icon: /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
422
+ icon: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? /*#__PURE__*/_react.default.createElement(_maximize.default, {
423
+ color: "currentColor",
424
+ spacing: "spacious",
425
+ label: ""
426
+ }) : /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
423
427
  color: "currentColor",
424
428
  spacing: "spacious",
425
429
  label: floatingSwitcherTitle,
@@ -434,7 +438,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
434
438
  options: _options2,
435
439
  title: intl.formatMessage(_mediaUi.messages.sizeOptions),
436
440
  icon: function icon() {
437
- return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
441
+ return (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? /*#__PURE__*/_react.default.createElement(_maximize.default, {
442
+ color: "currentColor",
443
+ spacing: "spacious",
444
+ label: intl.formatMessage(_mediaUi.messages.sizeOptions)
445
+ }) : /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
438
446
  color: "currentColor",
439
447
  spacing: "spacious",
440
448
  label: intl.formatMessage(_mediaUi.messages.sizeOptions),
package/dist/cjs/ui/toolbar/mediaInline.js CHANGED
@@ -341,7 +341,11 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
341
341
  id: 'editor.media.convert.mediasingle',
342
342
  title: mediaSingleTitle,
343
343
  onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState),
344
- icon: /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
344
+ icon: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? /*#__PURE__*/_react.default.createElement(_maximize.default, {
345
+ color: "currentColor",
346
+ spacing: "spacious",
347
+ label: ""
348
+ }) : /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
345
349
  color: "currentColor",
346
350
  spacing: "spacious",
347
351
  label: mediaSingleTitle,
package/dist/cjs/ui/toolbar/pixel-resizing.js CHANGED
@@ -10,6 +10,8 @@ var _react = _interopRequireDefault(require("react"));
10
10
  var _media = require("@atlaskit/editor-common/media");
11
11
  var _utils = require("@atlaskit/editor-prosemirror/utils");
12
12
  var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
13
+ var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image-fullscreen"));
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
15
  var _commands = require("../../pm-plugins/pixel-resizing/commands");
14
16
  var _ui = require("../../pm-plugins/pixel-resizing/ui");
15
17
  var _constants = require("../../pm-plugins/pixel-resizing/ui/constants");
@@ -62,7 +64,9 @@ var getResizeDropdownOption = exports.getResizeDropdownOption = function getResi
62
64
  return [{
63
65
  title: formatMessage(_media.pixelEntryMessages.resizeOption),
64
66
  onClick: (0, _commands.openPixelEditor)(),
65
- icon: /*#__PURE__*/_react.default.createElement(_growHorizontal.default, {
67
+ icon: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
68
+ label: ""
69
+ }) : /*#__PURE__*/_react.default.createElement(_growHorizontal.default, {
66
70
  label: ""
67
71
  }),
68
72
  testId: 'media-pixel-resizing-dropdown-option'
package/dist/es2019/ui/MediaViewer/MediaViewerContainer.js CHANGED
@@ -38,13 +38,13 @@ export const MediaViewerContainer = ({
38
38
  const isVideoMedia = isVideo((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
39
39
  const shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && editorExperiment('platform_editor_controls', 'control');
40
40
  return jsx(Fragment, null, isEditorViewMode ? jsx(Fragment, null, isInline ?
41
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
41
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
42
42
  jsx("span", {
43
43
  onClick: showMediaViewer,
44
44
  css: interactiveStyles,
45
45
  "data-testid": mediaViewerContainerTestID
46
46
  }, children) :
47
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
47
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
48
48
  jsx("div", {
49
49
  onClick: showMediaViewer,
50
50
  css: interactiveStyles,
package/dist/es2019/ui/toolbar/index.js CHANGED
@@ -406,7 +406,11 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
406
406
  onClick: () => {
407
407
  return true;
408
408
  },
409
- icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
409
+ icon: fg('platform_editor_controls_patch_7') ? /*#__PURE__*/React.createElement(MaximizeIcon, {
410
+ color: "currentColor",
411
+ spacing: "spacious",
412
+ label: ""
413
+ }) : /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
410
414
  color: "currentColor",
411
415
  spacing: "spacious",
412
416
  label: floatingSwitcherTitle,
@@ -420,7 +424,11 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
420
424
  type: 'dropdown',
421
425
  options: options,
422
426
  title: intl.formatMessage(messages.sizeOptions),
423
- icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
427
+ icon: () => fg('platform_editor_controls_patch_7') ? /*#__PURE__*/React.createElement(MaximizeIcon, {
428
+ color: "currentColor",
429
+ spacing: "spacious",
430
+ label: intl.formatMessage(messages.sizeOptions)
431
+ }) : /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
424
432
  color: "currentColor",
425
433
  spacing: "spacious",
426
434
  label: intl.formatMessage(messages.sizeOptions),
package/dist/es2019/ui/toolbar/mediaInline.js CHANGED
@@ -332,7 +332,11 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
332
332
  id: 'editor.media.convert.mediasingle',
333
333
  title: mediaSingleTitle,
334
334
  onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState),
335
- icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
335
+ icon: fg('platform_editor_controls_patch_7') ? /*#__PURE__*/React.createElement(MaximizeIcon, {
336
+ color: "currentColor",
337
+ spacing: "spacious",
338
+ label: ""
339
+ }) : /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
336
340
  color: "currentColor",
337
341
  spacing: "spacious",
338
342
  label: mediaSingleTitle,
package/dist/es2019/ui/toolbar/pixel-resizing.js CHANGED
@@ -2,6 +2,8 @@ import React from 'react';
2
2
  import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
3
3
  import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
4
4
  import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
5
+ import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
5
7
  import { openPixelEditor } from '../../pm-plugins/pixel-resizing/commands';
6
8
  import { PixelEntry } from '../../pm-plugins/pixel-resizing/ui';
7
9
  import { PIXEL_RESIZING_TOOLBAR_WIDTH } from '../../pm-plugins/pixel-resizing/ui/constants';
@@ -54,7 +56,9 @@ export const getResizeDropdownOption = (mediaOptions, state, formatMessage, sele
54
56
  return [{
55
57
  title: formatMessage(messages.resizeOption),
56
58
  onClick: openPixelEditor(),
57
- icon: /*#__PURE__*/React.createElement(GrowHorizontalIcon, {
59
+ icon: fg('platform_editor_controls_patch_7') ? /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
60
+ label: ""
61
+ }) : /*#__PURE__*/React.createElement(GrowHorizontalIcon, {
58
62
  label: ""
59
63
  }),
60
64
  testId: 'media-pixel-resizing-dropdown-option'
package/dist/esm/ui/MediaViewer/MediaViewerContainer.js CHANGED
@@ -44,13 +44,13 @@ export var MediaViewerContainer = function MediaViewerContainer(_ref) {
44
44
  var isVideoMedia = isVideo((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
45
45
  var shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && editorExperiment('platform_editor_controls', 'control');
46
46
  return jsx(Fragment, null, isEditorViewMode ? jsx(Fragment, null, isInline ?
47
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
47
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
48
48
  jsx("span", {
49
49
  onClick: showMediaViewer,
50
50
  css: interactiveStyles,
51
51
  "data-testid": mediaViewerContainerTestID
52
52
  }, children) :
53
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
53
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
54
54
  jsx("div", {
55
55
  onClick: showMediaViewer,
56
56
  css: interactiveStyles,
package/dist/esm/ui/toolbar/index.js CHANGED
@@ -409,7 +409,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
409
409
  onClick: function onClick() {
410
410
  return true;
411
411
  },
412
- icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
412
+ icon: fg('platform_editor_controls_patch_7') ? /*#__PURE__*/React.createElement(MaximizeIcon, {
413
+ color: "currentColor",
414
+ spacing: "spacious",
415
+ label: ""
416
+ }) : /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
413
417
  color: "currentColor",
414
418
  spacing: "spacious",
415
419
  label: floatingSwitcherTitle,
@@ -424,7 +428,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
424
428
  options: _options2,
425
429
  title: intl.formatMessage(messages.sizeOptions),
426
430
  icon: function icon() {
427
- return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
431
+ return fg('platform_editor_controls_patch_7') ? /*#__PURE__*/React.createElement(MaximizeIcon, {
432
+ color: "currentColor",
433
+ spacing: "spacious",
434
+ label: intl.formatMessage(messages.sizeOptions)
435
+ }) : /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
428
436
  color: "currentColor",
429
437
  spacing: "spacious",
430
438
  label: intl.formatMessage(messages.sizeOptions),
package/dist/esm/ui/toolbar/mediaInline.js CHANGED
@@ -331,7 +331,11 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
331
331
  id: 'editor.media.convert.mediasingle',
332
332
  title: mediaSingleTitle,
333
333
  onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState),
334
- icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
334
+ icon: fg('platform_editor_controls_patch_7') ? /*#__PURE__*/React.createElement(MaximizeIcon, {
335
+ color: "currentColor",
336
+ spacing: "spacious",
337
+ label: ""
338
+ }) : /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
335
339
  color: "currentColor",
336
340
  spacing: "spacious",
337
341
  label: mediaSingleTitle,
package/dist/esm/ui/toolbar/pixel-resizing.js CHANGED
@@ -5,6 +5,8 @@ import React from 'react';
5
5
  import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
6
6
  import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
7
7
  import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
8
+ import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
8
10
  import { openPixelEditor } from '../../pm-plugins/pixel-resizing/commands';
9
11
  import { PixelEntry } from '../../pm-plugins/pixel-resizing/ui';
10
12
  import { PIXEL_RESIZING_TOOLBAR_WIDTH } from '../../pm-plugins/pixel-resizing/ui/constants';
@@ -55,7 +57,9 @@ export var getResizeDropdownOption = function getResizeDropdownOption(mediaOptio
55
57
  return [{
56
58
  title: formatMessage(messages.resizeOption),
57
59
  onClick: openPixelEditor(),
58
- icon: /*#__PURE__*/React.createElement(GrowHorizontalIcon, {
60
+ icon: fg('platform_editor_controls_patch_7') ? /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
61
+ label: ""
62
+ }) : /*#__PURE__*/React.createElement(GrowHorizontalIcon, {
59
63
  label: ""
60
64
  }),
61
65
  testId: 'media-pixel-resizing-dropdown-option'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "2.6.6",
3
+ "version": "2.6.7",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -38,7 +38,7 @@
38
38
  "@atlaskit/analytics-namespaced-context": "^7.0.0",
39
39
  "@atlaskit/analytics-next": "^11.0.0",
40
40
  "@atlaskit/button": "^23.0.0",
41
- "@atlaskit/editor-common": "^103.15.0",
41
+ "@atlaskit/editor-common": "^103.16.0",
42
42
  "@atlaskit/editor-palette": "^2.1.0",
43
43
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
44
44
  "@atlaskit/editor-plugin-annotation": "^2.7.0",
@@ -70,7 +70,7 @@
70
70
  "@atlaskit/primitives": "^14.4.0",
71
71
  "@atlaskit/textfield": "^8.0.0",
72
72
  "@atlaskit/theme": "^18.0.0",
73
- "@atlaskit/tmp-editor-statsig": "^4.13.0",
73
+ "@atlaskit/tmp-editor-statsig": "^4.14.0",
74
74
  "@atlaskit/tokens": "^4.8.0",
75
75
  "@atlaskit/tooltip": "^20.0.0",
76
76
  "@babel/runtime": "^7.0.0",
@@ -186,6 +186,9 @@
186
186
  },
187
187
  "platform_editor_no_selection_until_interaction": {
188
188
  "type": "boolean"
189
+ },
190
+ "platform_editor_controls_patch_7": {
191
+ "type": "boolean"
189
192
  }
190
193
  },
191
194
  "stricter": {