@atlaskit/editor-plugin-media 8.4.18 → 8.5.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 (16) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/mediaPlugin.js +3 -5
  3. package/dist/cjs/ui/CommentBadge/index.js +2 -2
  4. package/dist/cjs/ui/toolbar/index.js +52 -6
  5. package/dist/es2019/mediaPlugin.js +2 -5
  6. package/dist/es2019/nodeviews/mediaSingleNext.js +1 -1
  7. package/dist/es2019/ui/CommentBadge/index.js +2 -2
  8. package/dist/es2019/ui/toolbar/index.js +50 -4
  9. package/dist/esm/mediaPlugin.js +3 -5
  10. package/dist/esm/ui/CommentBadge/index.js +2 -2
  11. package/dist/esm/ui/toolbar/index.js +52 -6
  12. package/dist/types/types/index.d.ts +2 -0
  13. package/dist/types/ui/CommentBadge/index.d.ts +1 -1
  14. package/dist/types-ts4.5/types/index.d.ts +2 -0
  15. package/dist/types-ts4.5/ui/CommentBadge/index.d.ts +1 -1
  16. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 8.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`6ecbe7ee10388`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6ecbe7ee10388) -
8
+ Started an experiment on image editing, added a button in the floating toolbar
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
14
+ ## 8.4.19
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies
19
+
3
20
  ## 8.4.18
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/mediaPlugin.js CHANGED
@@ -331,9 +331,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
331
331
  }));
332
332
  },
333
333
  secondaryToolbarComponent: function secondaryToolbarComponent(_ref11) {
334
- var editorView = _ref11.editorView,
335
- eventDispatcher = _ref11.eventDispatcher,
336
- disabled = _ref11.disabled;
334
+ var disabled = _ref11.disabled;
337
335
  return /*#__PURE__*/_react.default.createElement(_ToolbarMedia.default, {
338
336
  isDisabled: disabled,
339
337
  isReducedSpacing: true,
@@ -341,8 +339,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
341
339
  });
342
340
  },
343
341
  pluginsOptions: {
344
- quickInsert: function quickInsert(_ref12) {
345
- var formatMessage = _ref12.formatMessage;
342
+ quickInsert: function quickInsert() {
346
343
  return [];
347
344
  },
348
345
  floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
@@ -356,6 +353,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
356
353
  allowLinking: options && options.allowLinking,
357
354
  allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
358
355
  allowAltTextOnImages: options && options.allowAltTextOnImages,
356
+ allowImageEditing: options && options.allowImageEditing,
359
357
  allowImagePreview: options && options.allowImagePreview,
360
358
  altTextValidator: options && options.altTextValidator,
361
359
  fullWidthEnabled: options && options.fullWidthEnabled,
package/dist/cjs/ui/CommentBadge/index.js CHANGED
@@ -50,11 +50,11 @@ var CommentBadgeWrapper = exports.CommentBadgeWrapper = function CommentBadgeWra
50
50
  }) && !isInlineCommentViewClosed ? 'active' : 'default';
51
51
  }, [selectedAnnotations, isInlineCommentViewClosed, mediaNode]);
52
52
  var onClick = (0, _react.useCallback)(function () {
53
- if (api.annotation && mediaNode) {
53
+ if (api !== null && api !== void 0 && api.annotation && mediaNode) {
54
54
  var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
55
55
  showCommentForBlockNode(mediaNode, _analytics.VIEW_METHOD.BADGE)(state, dispatch);
56
56
  }
57
- }, [api.annotation, dispatch, mediaNode, state]);
57
+ }, [api === null || api === void 0 ? void 0 : api.annotation, dispatch, mediaNode, state]);
58
58
  var pos = getPos();
59
59
  var hasNoComments = !Number.isFinite(pos) || !annotations || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
60
60
  return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotations) || annotations[maybeAnnotation.attrs.id];
package/dist/cjs/ui/toolbar/index.js CHANGED
@@ -19,6 +19,7 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
19
19
  var _state2 = require("@atlaskit/editor-prosemirror/state");
20
20
  var _utils = require("@atlaskit/editor-prosemirror/utils");
21
21
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
22
+ var _imageCrop = _interopRequireDefault(require("@atlaskit/icon-lab/core/image-crop"));
22
23
  var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
23
24
  var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
24
25
  var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-diagonal"));
@@ -271,6 +272,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
271
272
  allowAltTextOnImages = options.allowAltTextOnImages,
272
273
  allowMediaInline = options.allowMediaInline,
273
274
  allowMediaInlineImages = options.allowMediaInlineImages,
275
+ allowImageEditing = options.allowImageEditing,
274
276
  allowImagePreview = options.allowImagePreview,
275
277
  isViewOnly = options.isViewOnly,
276
278
  allowPixelResizing = options.allowPixelResizing,
@@ -550,12 +552,33 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
550
552
  supportsViewMode: true
551
553
  });
552
554
  }
553
- // Preview Support
554
- if (allowImagePreview) {
555
+ // Image Editing Support
556
+ if (allowImageEditing && (0, _expValEquals.expValEquals)('platform_editor_add_image_editing', 'isEnabled', true)) {
555
557
  var _mediaNode$attrs;
556
558
  var _selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
557
559
  var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
558
560
  if (!(0, _mediaSingle.isVideo)(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
561
+ toolbarButtons.push({
562
+ id: 'editor.media.edit',
563
+ testId: 'image-edit-toolbar-button',
564
+ type: 'button',
565
+ icon: _imageCrop.default,
566
+ title: intl.formatMessage(_messages.default.imageEdit),
567
+ onClick: function onClick() {
568
+ // TODO: EDITOR-3716 - Implement image editing logic
569
+ // console.log('Image editing clicked');
570
+ return true;
571
+ },
572
+ supportsViewMode: false
573
+ });
574
+ }
575
+ }
576
+ // Preview Support
577
+ if (allowImagePreview) {
578
+ var _mediaNode$attrs2;
579
+ var _selectedMediaSingleNode2 = (0, _utils2.getSelectedMediaSingle)(state);
580
+ var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
581
+ if (!(0, _mediaSingle.isVideo)(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
559
582
  var _pluginInjectionApi$c2;
560
583
  toolbarButtons.push({
561
584
  id: 'editor.media.viewer',
@@ -638,10 +661,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
638
661
  } else {
639
662
  // Preview Support
640
663
  if (allowAdvancedToolBarOptions && allowImagePreview) {
641
- var _mediaNode$attrs2;
642
- var _selectedMediaSingleNode2 = (0, _utils2.getSelectedMediaSingle)(state);
643
- var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
644
- if (!(0, _mediaSingle.isVideo)(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
664
+ var _mediaNode2$attrs;
665
+ var _selectedMediaSingleNode3 = (0, _utils2.getSelectedMediaSingle)(state);
666
+ var _mediaNode2 = _selectedMediaSingleNode3 === null || _selectedMediaSingleNode3 === void 0 ? void 0 : _selectedMediaSingleNode3.node.content.firstChild;
667
+ if (!(0, _mediaSingle.isVideo)(_mediaNode2 === null || _mediaNode2 === void 0 || (_mediaNode2$attrs = _mediaNode2.attrs) === null || _mediaNode2$attrs === void 0 ? void 0 : _mediaNode2$attrs.__fileMimeType)) {
645
668
  var _pluginInjectionApi$c3;
646
669
  toolbarButtons.push({
647
670
  id: 'editor.media.viewer',
@@ -688,6 +711,29 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
688
711
  (0, _utils2.updateToFullHeightSeparator)(toolbarButtons);
689
712
  toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount));
690
713
  }
714
+ if (allowAdvancedToolBarOptions && allowImageEditing && (0, _expValEquals.expValEquals)('platform_editor_add_image_editing', 'isEnabled', true)) {
715
+ var _mediaNode3$attrs;
716
+ var _selectedMediaSingleNode4 = (0, _utils2.getSelectedMediaSingle)(state);
717
+ var _mediaNode3 = _selectedMediaSingleNode4 === null || _selectedMediaSingleNode4 === void 0 ? void 0 : _selectedMediaSingleNode4.node.content.firstChild;
718
+ if (!(0, _mediaSingle.isVideo)(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.__fileMimeType)) {
719
+ toolbarButtons.push({
720
+ id: 'editor.media.edit',
721
+ testId: 'image-edit-toolbar-button',
722
+ type: 'button',
723
+ icon: _imageCrop.default,
724
+ title: intl.formatMessage(_messages.default.imageEdit),
725
+ onClick: function onClick() {
726
+ // TODO: EDITOR-3716 - Implement image editing logic
727
+ // console.log('Image editing clicked');
728
+ return true;
729
+ },
730
+ supportsViewMode: false
731
+ }, {
732
+ type: 'separator',
733
+ supportsViewMode: false
734
+ });
735
+ }
736
+ }
691
737
  return toolbarButtons;
692
738
  }
693
739
  };
package/dist/es2019/mediaPlugin.js CHANGED
@@ -329,8 +329,6 @@ export const mediaPlugin = ({
329
329
  }));
330
330
  },
331
331
  secondaryToolbarComponent({
332
- editorView,
333
- eventDispatcher,
334
332
  disabled
335
333
  }) {
336
334
  return /*#__PURE__*/React.createElement(ToolbarMedia, {
@@ -340,9 +338,7 @@ export const mediaPlugin = ({
340
338
  });
341
339
  },
342
340
  pluginsOptions: {
343
- quickInsert: ({
344
- formatMessage
345
- }) => [],
341
+ quickInsert: () => [],
346
342
  floatingToolbar: (state, intl, providerFactory) => {
347
343
  var _api$editorViewMode, _api$editorViewMode$s;
348
344
  return floatingToolbar(state, intl, {
@@ -354,6 +350,7 @@ export const mediaPlugin = ({
354
350
  allowLinking: options && options.allowLinking,
355
351
  allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
356
352
  allowAltTextOnImages: options && options.allowAltTextOnImages,
353
+ allowImageEditing: options && options.allowImageEditing,
357
354
  allowImagePreview: options && options.allowImagePreview,
358
355
  altTextValidator: options && options.altTextValidator,
359
356
  fullWidthEnabled: options && options.fullWidthEnabled,
package/dist/es2019/nodeviews/mediaSingleNext.js CHANGED
@@ -97,7 +97,7 @@ const mediaAsyncOperations = async props => {
97
97
  });
98
98
  props.addPendingTask(copyNode);
99
99
  await copyNode;
100
- } catch (e) {}
100
+ } catch {}
101
101
  }
102
102
  };
103
103
  const useMediaAsyncOperations = ({
package/dist/es2019/ui/CommentBadge/index.js CHANGED
@@ -44,13 +44,13 @@ export const CommentBadgeWrapper = ({
44
44
  return selectedAnnotations.some(annotation => !!mediaNode.marks.find(mark => mark.attrs.id === annotation.id)) && !isInlineCommentViewClosed ? 'active' : 'default';
45
45
  }, [selectedAnnotations, isInlineCommentViewClosed, mediaNode]);
46
46
  const onClick = useCallback(() => {
47
- if (api.annotation && mediaNode) {
47
+ if (api !== null && api !== void 0 && api.annotation && mediaNode) {
48
48
  const {
49
49
  showCommentForBlockNode
50
50
  } = api.annotation.actions;
51
51
  showCommentForBlockNode(mediaNode, VIEW_METHOD.BADGE)(state, dispatch);
52
52
  }
53
- }, [api.annotation, dispatch, mediaNode, state]);
53
+ }, [api === null || api === void 0 ? void 0 : api.annotation, dispatch, mediaNode, state]);
54
54
  const pos = getPos();
55
55
  const hasNoComments = !Number.isFinite(pos) || !annotations || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(maybeAnnotation => maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotations) || annotations[maybeAnnotation.attrs.id]);
56
56
  if (!isDrafting && hasNoComments || !mediaNode) {
package/dist/es2019/ui/toolbar/index.js CHANGED
@@ -9,6 +9,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
9
9
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
10
10
  import { contains, findParentNodeOfType, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
11
11
  import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
12
+ import ImageCropIcon from '@atlaskit/icon-lab/core/image-crop';
12
13
  import CopyIcon from '@atlaskit/icon/core/copy';
13
14
  import DeleteIcon from '@atlaskit/icon/core/delete';
14
15
  import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
@@ -259,6 +260,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
259
260
  allowAltTextOnImages,
260
261
  allowMediaInline,
261
262
  allowMediaInlineImages,
263
+ allowImageEditing,
262
264
  allowImagePreview,
263
265
  isViewOnly,
264
266
  allowPixelResizing,
@@ -548,12 +550,33 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
548
550
  supportsViewMode: true
549
551
  });
550
552
  }
551
- // Preview Support
552
- if (allowImagePreview) {
553
+ // Image Editing Support
554
+ if (allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
553
555
  var _mediaNode$attrs;
554
556
  const selectedMediaSingleNode = getSelectedMediaSingle(state);
555
557
  const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
556
558
  if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
559
+ toolbarButtons.push({
560
+ id: 'editor.media.edit',
561
+ testId: 'image-edit-toolbar-button',
562
+ type: 'button',
563
+ icon: ImageCropIcon,
564
+ title: intl.formatMessage(commonMessages.imageEdit),
565
+ onClick: () => {
566
+ // TODO: EDITOR-3716 - Implement image editing logic
567
+ // console.log('Image editing clicked');
568
+ return true;
569
+ },
570
+ supportsViewMode: false
571
+ });
572
+ }
573
+ }
574
+ // Preview Support
575
+ if (allowImagePreview) {
576
+ var _mediaNode$attrs2;
577
+ const selectedMediaSingleNode = getSelectedMediaSingle(state);
578
+ const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
579
+ if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
557
580
  var _pluginInjectionApi$c4, _pluginInjectionApi$c5, _pluginInjectionApi$c6;
558
581
  toolbarButtons.push({
559
582
  id: 'editor.media.viewer',
@@ -636,10 +659,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
636
659
  } else {
637
660
  // Preview Support
638
661
  if (allowAdvancedToolBarOptions && allowImagePreview) {
639
- var _mediaNode$attrs2;
662
+ var _mediaNode$attrs3;
640
663
  const selectedMediaSingleNode = getSelectedMediaSingle(state);
641
664
  const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
642
- if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
665
+ if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs3 = mediaNode.attrs) === null || _mediaNode$attrs3 === void 0 ? void 0 : _mediaNode$attrs3.__fileMimeType)) {
643
666
  var _pluginInjectionApi$c7, _pluginInjectionApi$c8, _pluginInjectionApi$c9;
644
667
  toolbarButtons.push({
645
668
  id: 'editor.media.viewer',
@@ -686,6 +709,29 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
686
709
  updateToFullHeightSeparator(toolbarButtons);
687
710
  toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount));
688
711
  }
712
+ if (allowAdvancedToolBarOptions && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
713
+ var _mediaNode$attrs4;
714
+ const selectedMediaSingleNode = getSelectedMediaSingle(state);
715
+ const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
716
+ if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs4 = mediaNode.attrs) === null || _mediaNode$attrs4 === void 0 ? void 0 : _mediaNode$attrs4.__fileMimeType)) {
717
+ toolbarButtons.push({
718
+ id: 'editor.media.edit',
719
+ testId: 'image-edit-toolbar-button',
720
+ type: 'button',
721
+ icon: ImageCropIcon,
722
+ title: intl.formatMessage(commonMessages.imageEdit),
723
+ onClick: () => {
724
+ // TODO: EDITOR-3716 - Implement image editing logic
725
+ // console.log('Image editing clicked');
726
+ return true;
727
+ },
728
+ supportsViewMode: false
729
+ }, {
730
+ type: 'separator',
731
+ supportsViewMode: false
732
+ });
733
+ }
734
+ }
689
735
  return toolbarButtons;
690
736
  }
691
737
  };
package/dist/esm/mediaPlugin.js CHANGED
@@ -322,9 +322,7 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
322
322
  }));
323
323
  },
324
324
  secondaryToolbarComponent: function secondaryToolbarComponent(_ref11) {
325
- var editorView = _ref11.editorView,
326
- eventDispatcher = _ref11.eventDispatcher,
327
- disabled = _ref11.disabled;
325
+ var disabled = _ref11.disabled;
328
326
  return /*#__PURE__*/React.createElement(ToolbarMedia, {
329
327
  isDisabled: disabled,
330
328
  isReducedSpacing: true,
@@ -332,8 +330,7 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
332
330
  });
333
331
  },
334
332
  pluginsOptions: {
335
- quickInsert: function quickInsert(_ref12) {
336
- var formatMessage = _ref12.formatMessage;
333
+ quickInsert: function quickInsert() {
337
334
  return [];
338
335
  },
339
336
  floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
@@ -347,6 +344,7 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
347
344
  allowLinking: options && options.allowLinking,
348
345
  allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
349
346
  allowAltTextOnImages: options && options.allowAltTextOnImages,
347
+ allowImageEditing: options && options.allowImageEditing,
350
348
  allowImagePreview: options && options.allowImagePreview,
351
349
  altTextValidator: options && options.altTextValidator,
352
350
  fullWidthEnabled: options && options.fullWidthEnabled,
package/dist/esm/ui/CommentBadge/index.js CHANGED
@@ -41,11 +41,11 @@ export var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
41
41
  }) && !isInlineCommentViewClosed ? 'active' : 'default';
42
42
  }, [selectedAnnotations, isInlineCommentViewClosed, mediaNode]);
43
43
  var onClick = useCallback(function () {
44
- if (api.annotation && mediaNode) {
44
+ if (api !== null && api !== void 0 && api.annotation && mediaNode) {
45
45
  var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
46
46
  showCommentForBlockNode(mediaNode, VIEW_METHOD.BADGE)(state, dispatch);
47
47
  }
48
- }, [api.annotation, dispatch, mediaNode, state]);
48
+ }, [api === null || api === void 0 ? void 0 : api.annotation, dispatch, mediaNode, state]);
49
49
  var pos = getPos();
50
50
  var hasNoComments = !Number.isFinite(pos) || !annotations || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
51
51
  return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotations) || annotations[maybeAnnotation.attrs.id];
package/dist/esm/ui/toolbar/index.js CHANGED
@@ -13,6 +13,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
13
13
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
14
14
  import { contains, findParentNodeOfType, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
15
15
  import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
16
+ import ImageCropIcon from '@atlaskit/icon-lab/core/image-crop';
16
17
  import CopyIcon from '@atlaskit/icon/core/copy';
17
18
  import DeleteIcon from '@atlaskit/icon/core/delete';
18
19
  import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
@@ -262,6 +263,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
262
263
  allowAltTextOnImages = options.allowAltTextOnImages,
263
264
  allowMediaInline = options.allowMediaInline,
264
265
  allowMediaInlineImages = options.allowMediaInlineImages,
266
+ allowImageEditing = options.allowImageEditing,
265
267
  allowImagePreview = options.allowImagePreview,
266
268
  isViewOnly = options.isViewOnly,
267
269
  allowPixelResizing = options.allowPixelResizing,
@@ -541,12 +543,33 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
541
543
  supportsViewMode: true
542
544
  });
543
545
  }
544
- // Preview Support
545
- if (allowImagePreview) {
546
+ // Image Editing Support
547
+ if (allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
546
548
  var _mediaNode$attrs;
547
549
  var _selectedMediaSingleNode = getSelectedMediaSingle(state);
548
550
  var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
549
551
  if (!isVideo(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
552
+ toolbarButtons.push({
553
+ id: 'editor.media.edit',
554
+ testId: 'image-edit-toolbar-button',
555
+ type: 'button',
556
+ icon: ImageCropIcon,
557
+ title: intl.formatMessage(commonMessages.imageEdit),
558
+ onClick: function onClick() {
559
+ // TODO: EDITOR-3716 - Implement image editing logic
560
+ // console.log('Image editing clicked');
561
+ return true;
562
+ },
563
+ supportsViewMode: false
564
+ });
565
+ }
566
+ }
567
+ // Preview Support
568
+ if (allowImagePreview) {
569
+ var _mediaNode$attrs2;
570
+ var _selectedMediaSingleNode2 = getSelectedMediaSingle(state);
571
+ var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
572
+ if (!isVideo(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
550
573
  var _pluginInjectionApi$c2;
551
574
  toolbarButtons.push({
552
575
  id: 'editor.media.viewer',
@@ -629,10 +652,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
629
652
  } else {
630
653
  // Preview Support
631
654
  if (allowAdvancedToolBarOptions && allowImagePreview) {
632
- var _mediaNode$attrs2;
633
- var _selectedMediaSingleNode2 = getSelectedMediaSingle(state);
634
- var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
635
- if (!isVideo(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
655
+ var _mediaNode2$attrs;
656
+ var _selectedMediaSingleNode3 = getSelectedMediaSingle(state);
657
+ var _mediaNode2 = _selectedMediaSingleNode3 === null || _selectedMediaSingleNode3 === void 0 ? void 0 : _selectedMediaSingleNode3.node.content.firstChild;
658
+ if (!isVideo(_mediaNode2 === null || _mediaNode2 === void 0 || (_mediaNode2$attrs = _mediaNode2.attrs) === null || _mediaNode2$attrs === void 0 ? void 0 : _mediaNode2$attrs.__fileMimeType)) {
636
659
  var _pluginInjectionApi$c3;
637
660
  toolbarButtons.push({
638
661
  id: 'editor.media.viewer',
@@ -679,6 +702,29 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
679
702
  updateToFullHeightSeparator(toolbarButtons);
680
703
  toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount));
681
704
  }
705
+ if (allowAdvancedToolBarOptions && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
706
+ var _mediaNode3$attrs;
707
+ var _selectedMediaSingleNode4 = getSelectedMediaSingle(state);
708
+ var _mediaNode3 = _selectedMediaSingleNode4 === null || _selectedMediaSingleNode4 === void 0 ? void 0 : _selectedMediaSingleNode4.node.content.firstChild;
709
+ if (!isVideo(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.__fileMimeType)) {
710
+ toolbarButtons.push({
711
+ id: 'editor.media.edit',
712
+ testId: 'image-edit-toolbar-button',
713
+ type: 'button',
714
+ icon: ImageCropIcon,
715
+ title: intl.formatMessage(commonMessages.imageEdit),
716
+ onClick: function onClick() {
717
+ // TODO: EDITOR-3716 - Implement image editing logic
718
+ // console.log('Image editing clicked');
719
+ return true;
720
+ },
721
+ supportsViewMode: false
722
+ }, {
723
+ type: 'separator',
724
+ supportsViewMode: false
725
+ });
726
+ }
727
+ }
682
728
  return toolbarButtons;
683
729
  }
684
730
  };
package/dist/types/types/index.d.ts CHANGED
@@ -23,6 +23,7 @@ export interface MediaPluginOptions {
23
23
  allowCaptions?: boolean;
24
24
  allowCommentsOnMedia?: boolean;
25
25
  allowDropzoneDropLine?: boolean;
26
+ allowImageEditing?: boolean;
26
27
  allowImagePreview?: boolean;
27
28
  allowLazyLoading?: boolean;
28
29
  allowLinking?: boolean;
@@ -148,6 +149,7 @@ export type MediaFloatingToolbarOptions = {
148
149
  allowAdvancedToolBarOptions?: boolean;
149
150
  allowAltTextOnImages?: boolean;
150
151
  allowCommentsOnMedia?: boolean;
152
+ allowImageEditing?: boolean;
151
153
  allowImagePreview?: boolean;
152
154
  allowLinking?: boolean;
153
155
  allowMediaInline?: boolean;
package/dist/types/ui/CommentBadge/index.d.ts CHANGED
@@ -6,7 +6,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
6
6
  import type { MediaNextEditorPluginType } from '../../mediaPluginType';
7
7
  import type { getPosHandler } from '../../types';
8
8
  type CommentBadgeWrapperProps = {
9
- api: ExtractInjectionAPI<MediaNextEditorPluginType>;
9
+ api?: ExtractInjectionAPI<MediaNextEditorPluginType>;
10
10
  getPos: getPosHandler;
11
11
  isDrafting?: boolean;
12
12
  marks?: AnnotationMarkDefinition[];
package/dist/types-ts4.5/types/index.d.ts CHANGED
@@ -23,6 +23,7 @@ export interface MediaPluginOptions {
23
23
  allowCaptions?: boolean;
24
24
  allowCommentsOnMedia?: boolean;
25
25
  allowDropzoneDropLine?: boolean;
26
+ allowImageEditing?: boolean;
26
27
  allowImagePreview?: boolean;
27
28
  allowLazyLoading?: boolean;
28
29
  allowLinking?: boolean;
@@ -148,6 +149,7 @@ export type MediaFloatingToolbarOptions = {
148
149
  allowAdvancedToolBarOptions?: boolean;
149
150
  allowAltTextOnImages?: boolean;
150
151
  allowCommentsOnMedia?: boolean;
152
+ allowImageEditing?: boolean;
151
153
  allowImagePreview?: boolean;
152
154
  allowLinking?: boolean;
153
155
  allowMediaInline?: boolean;
package/dist/types-ts4.5/ui/CommentBadge/index.d.ts CHANGED
@@ -6,7 +6,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
6
6
  import type { MediaNextEditorPluginType } from '../../mediaPluginType';
7
7
  import type { getPosHandler } from '../../types';
8
8
  type CommentBadgeWrapperProps = {
9
- api: ExtractInjectionAPI<MediaNextEditorPluginType>;
9
+ api?: ExtractInjectionAPI<MediaNextEditorPluginType>;
10
10
  getPos: getPosHandler;
11
11
  isDrafting?: boolean;
12
12
  marks?: AnnotationMarkDefinition[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "8.4.18",
3
+ "version": "8.5.0",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,7 +35,7 @@
35
35
  "@atlaskit/button": "^23.6.0",
36
36
  "@atlaskit/editor-palette": "^2.1.0",
37
37
  "@atlaskit/editor-plugin-analytics": "^6.2.0",
38
- "@atlaskit/editor-plugin-annotation": "^6.2.0",
38
+ "@atlaskit/editor-plugin-annotation": "^6.3.0",
39
39
  "@atlaskit/editor-plugin-connectivity": "^6.0.0",
40
40
  "@atlaskit/editor-plugin-decorations": "^6.1.0",
41
41
  "@atlaskit/editor-plugin-editor-disabled": "^6.1.0",
@@ -66,9 +66,9 @@
66
66
  "@atlaskit/primitives": "^16.4.0",
67
67
  "@atlaskit/textfield": "^8.1.0",
68
68
  "@atlaskit/theme": "^21.0.0",
69
- "@atlaskit/tmp-editor-statsig": "^14.6.0",
69
+ "@atlaskit/tmp-editor-statsig": "^15.2.0",
70
70
  "@atlaskit/tokens": "^8.4.0",
71
- "@atlaskit/tooltip": "^20.10.0",
71
+ "@atlaskit/tooltip": "^20.11.0",
72
72
  "@babel/runtime": "^7.0.0",
73
73
  "@emotion/react": "^11.7.1",
74
74
  "bind-event-listener": "^3.0.0",
@@ -78,7 +78,7 @@
78
78
  "uuid": "^3.1.0"
79
79
  },
80
80
  "peerDependencies": {
81
- "@atlaskit/editor-common": "^110.38.0",
81
+ "@atlaskit/editor-common": "^110.41.0",
82
82
  "@atlaskit/media-core": "^37.0.0",
83
83
  "react": "^18.2.0",
84
84
  "react-dom": "^18.2.0",