@atlaskit/editor-plugin-media 9.3.3 → 9.4.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 9.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 9.4.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`f552961081787`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f552961081787) -
14
+ Removed the editing button from the toolbar for external media Introduced cropping for image
15
+ editing
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
3
21
  ## 9.3.3
4
22
 
5
23
  ### Patch Changes
@@ -276,6 +276,8 @@ var extractMediaNodes = exports.extractMediaNodes = function extractMediaNodes(d
276
276
  });
277
277
  return mediaNodes;
278
278
  };
279
+
280
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
279
281
  var createMediaIdentifierArray = exports.createMediaIdentifierArray = function createMediaIdentifierArray(mediaNodes) {
280
282
  var mediaIdentifierMap = new Map();
281
283
  mediaNodes.forEach(function (item) {
@@ -565,10 +565,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
565
565
  }
566
566
  // Image Editing Support
567
567
  if (!!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.mediaEditing) && allowImageEditing && (0, _expValEquals.expValEquals)('platform_editor_add_image_editing', 'isEnabled', true)) {
568
- var _mediaNode$attrs;
568
+ var _mediaNode$attrs, _mediaNode$attrs2;
569
569
  var _selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
570
570
  var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
571
- if (!(0, _mediaSingle.isVideo)(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
571
+ // Disable image editing for external media, as we cannot save changes to external images per CORS policy
572
+ var isExternal = (mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.type) === 'external';
573
+ if (!(0, _mediaSingle.isVideo)(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType) && !isExternal) {
572
574
  toolbarButtons.push({
573
575
  id: 'editor.media.edit',
574
576
  testId: 'image-edit-toolbar-button',
@@ -591,10 +593,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
591
593
  }
592
594
  // Preview Support
593
595
  if (allowImagePreview) {
594
- var _mediaNode$attrs2;
596
+ var _mediaNode$attrs3;
595
597
  var _selectedMediaSingleNode2 = (0, _utils2.getSelectedMediaSingle)(state);
596
598
  var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
597
- if (!(0, _mediaSingle.isVideo)(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
599
+ if (!(0, _mediaSingle.isVideo)(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs3 = _mediaNode.attrs) === null || _mediaNode$attrs3 === void 0 ? void 0 : _mediaNode$attrs3.__fileMimeType)) {
598
600
  var _pluginInjectionApi$c2;
599
601
  toolbarButtons.push({
600
602
  id: 'editor.media.viewer',
@@ -728,10 +730,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
728
730
  toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount));
729
731
  }
730
732
  if (allowAdvancedToolBarOptions && allowImageEditing && (0, _expValEquals.expValEquals)('platform_editor_add_image_editing', 'isEnabled', true)) {
731
- var _mediaNode3$attrs;
733
+ var _mediaNode3$attrs, _mediaNode3$attrs2;
732
734
  var _selectedMediaSingleNode4 = (0, _utils2.getSelectedMediaSingle)(state);
733
735
  var _mediaNode3 = _selectedMediaSingleNode4 === null || _selectedMediaSingleNode4 === void 0 ? void 0 : _selectedMediaSingleNode4.node.content.firstChild;
734
- if (!(0, _mediaSingle.isVideo)(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.__fileMimeType)) {
736
+ // Disable image editing for external media, as we cannot save changes to external images per CORS policy
737
+ var _isExternal = (_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.type) === 'external';
738
+ if (!(0, _mediaSingle.isVideo)(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs2 = _mediaNode3.attrs) === null || _mediaNode3$attrs2 === void 0 ? void 0 : _mediaNode3$attrs2.__fileMimeType) && !_isExternal) {
735
739
  toolbarButtons.push({
736
740
  id: 'editor.media.edit',
737
741
  testId: 'image-edit-toolbar-button',
@@ -287,6 +287,8 @@ export const extractMediaNodes = doc => {
287
287
  });
288
288
  return mediaNodes;
289
289
  };
290
+
291
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
290
292
  export const createMediaIdentifierArray = mediaNodes => {
291
293
  const mediaIdentifierMap = new Map();
292
294
  mediaNodes.forEach(item => {
@@ -564,10 +564,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
564
564
  }
565
565
  // Image Editing Support
566
566
  if (!!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.mediaEditing) && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
567
- var _mediaNode$attrs;
567
+ var _mediaNode$attrs, _mediaNode$attrs2;
568
568
  const selectedMediaSingleNode = getSelectedMediaSingle(state);
569
569
  const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
570
- if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
570
+ // Disable image editing for external media, as we cannot save changes to external images per CORS policy
571
+ const isExternal = (mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.type) === 'external';
572
+ if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType) && !isExternal) {
571
573
  toolbarButtons.push({
572
574
  id: 'editor.media.edit',
573
575
  testId: 'image-edit-toolbar-button',
@@ -590,10 +592,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
590
592
  }
591
593
  // Preview Support
592
594
  if (allowImagePreview) {
593
- var _mediaNode$attrs2;
595
+ var _mediaNode$attrs3;
594
596
  const selectedMediaSingleNode = getSelectedMediaSingle(state);
595
597
  const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
596
- if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
598
+ if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs3 = mediaNode.attrs) === null || _mediaNode$attrs3 === void 0 ? void 0 : _mediaNode$attrs3.__fileMimeType)) {
597
599
  var _pluginInjectionApi$c4, _pluginInjectionApi$c5, _pluginInjectionApi$c6;
598
600
  toolbarButtons.push({
599
601
  id: 'editor.media.viewer',
@@ -676,10 +678,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
676
678
  } else {
677
679
  // Preview Support
678
680
  if (allowAdvancedToolBarOptions && allowImagePreview) {
679
- var _mediaNode$attrs3;
681
+ var _mediaNode$attrs4;
680
682
  const selectedMediaSingleNode = getSelectedMediaSingle(state);
681
683
  const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
682
- if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs3 = mediaNode.attrs) === null || _mediaNode$attrs3 === void 0 ? void 0 : _mediaNode$attrs3.__fileMimeType)) {
684
+ if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs4 = mediaNode.attrs) === null || _mediaNode$attrs4 === void 0 ? void 0 : _mediaNode$attrs4.__fileMimeType)) {
683
685
  var _pluginInjectionApi$c7, _pluginInjectionApi$c8, _pluginInjectionApi$c9;
684
686
  toolbarButtons.push({
685
687
  id: 'editor.media.viewer',
@@ -727,10 +729,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
727
729
  toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount));
728
730
  }
729
731
  if (allowAdvancedToolBarOptions && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
730
- var _mediaNode$attrs4;
732
+ var _mediaNode$attrs5, _mediaNode$attrs6;
731
733
  const selectedMediaSingleNode = getSelectedMediaSingle(state);
732
734
  const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
733
- if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs4 = mediaNode.attrs) === null || _mediaNode$attrs4 === void 0 ? void 0 : _mediaNode$attrs4.__fileMimeType)) {
735
+ // Disable image editing for external media, as we cannot save changes to external images per CORS policy
736
+ const isExternal = (mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs5 = mediaNode.attrs) === null || _mediaNode$attrs5 === void 0 ? void 0 : _mediaNode$attrs5.type) === 'external';
737
+ if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs6 = mediaNode.attrs) === null || _mediaNode$attrs6 === void 0 ? void 0 : _mediaNode$attrs6.__fileMimeType) && !isExternal) {
734
738
  toolbarButtons.push({
735
739
  id: 'editor.media.edit',
736
740
  testId: 'image-edit-toolbar-button',
@@ -269,6 +269,8 @@ export var extractMediaNodes = function extractMediaNodes(doc) {
269
269
  });
270
270
  return mediaNodes;
271
271
  };
272
+
273
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
272
274
  export var createMediaIdentifierArray = function createMediaIdentifierArray(mediaNodes) {
273
275
  var mediaIdentifierMap = new Map();
274
276
  mediaNodes.forEach(function (item) {
@@ -556,10 +556,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
556
556
  }
557
557
  // Image Editing Support
558
558
  if (!!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.mediaEditing) && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
559
- var _mediaNode$attrs;
559
+ var _mediaNode$attrs, _mediaNode$attrs2;
560
560
  var _selectedMediaSingleNode = getSelectedMediaSingle(state);
561
561
  var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
562
- if (!isVideo(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
562
+ // Disable image editing for external media, as we cannot save changes to external images per CORS policy
563
+ var isExternal = (mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.type) === 'external';
564
+ if (!isVideo(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType) && !isExternal) {
563
565
  toolbarButtons.push({
564
566
  id: 'editor.media.edit',
565
567
  testId: 'image-edit-toolbar-button',
@@ -582,10 +584,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
582
584
  }
583
585
  // Preview Support
584
586
  if (allowImagePreview) {
585
- var _mediaNode$attrs2;
587
+ var _mediaNode$attrs3;
586
588
  var _selectedMediaSingleNode2 = getSelectedMediaSingle(state);
587
589
  var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
588
- if (!isVideo(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
590
+ if (!isVideo(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs3 = _mediaNode.attrs) === null || _mediaNode$attrs3 === void 0 ? void 0 : _mediaNode$attrs3.__fileMimeType)) {
589
591
  var _pluginInjectionApi$c2;
590
592
  toolbarButtons.push({
591
593
  id: 'editor.media.viewer',
@@ -719,10 +721,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
719
721
  toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount));
720
722
  }
721
723
  if (allowAdvancedToolBarOptions && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
722
- var _mediaNode3$attrs;
724
+ var _mediaNode3$attrs, _mediaNode3$attrs2;
723
725
  var _selectedMediaSingleNode4 = getSelectedMediaSingle(state);
724
726
  var _mediaNode3 = _selectedMediaSingleNode4 === null || _selectedMediaSingleNode4 === void 0 ? void 0 : _selectedMediaSingleNode4.node.content.firstChild;
725
- if (!isVideo(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.__fileMimeType)) {
727
+ // Disable image editing for external media, as we cannot save changes to external images per CORS policy
728
+ var _isExternal = (_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.type) === 'external';
729
+ if (!isVideo(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs2 = _mediaNode3.attrs) === null || _mediaNode3$attrs2 === void 0 ? void 0 : _mediaNode3$attrs2.__fileMimeType) && !_isExternal) {
726
730
  toolbarButtons.push({
727
731
  id: 'editor.media.edit',
728
732
  testId: 'image-edit-toolbar-button',
@@ -5,17 +5,17 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
5
5
  * When we patch adf-schema with media `toDOM` fixes we can remove this.
6
6
  */
7
7
  export declare const getMediaAttrs: (nodeName: string, node: PMNode) => {
8
- 'data-id': any;
9
- 'data-node-type': string;
10
- 'data-type': any;
11
- 'data-collection': any;
12
- 'data-occurrence-key': any;
13
- 'data-width': any;
14
- 'data-height': any;
15
- 'data-url': any;
16
- 'data-alt': any;
17
- title: string;
8
+ "data-alt": any;
9
+ "data-collection": any;
10
+ "data-height": any;
11
+ "data-id": any;
12
+ "data-node-type": string;
13
+ "data-occurrence-key": any;
14
+ "data-type": any;
15
+ "data-url": any;
16
+ "data-width": any;
18
17
  style: string;
18
+ title: string;
19
19
  };
20
20
  export declare const camelCaseToKebabCase: (str: string) => string;
21
21
  /**
@@ -24,6 +24,6 @@ export declare const camelCaseToKebabCase: (str: string) => string;
24
24
  * When we patch adf-schema with media `toDOM` fixes we can remove this.
25
25
  */
26
26
  export declare const getAttrsFromNodeMediaSingle: (withExtendedWidthTypes: boolean, node: PMNode) => {
27
- 'data-width-type': any;
28
- 'data-media-vc-wrapper': string;
27
+ "data-media-vc-wrapper": string;
28
+ "data-width-type": any;
29
29
  };
@@ -5,17 +5,17 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
5
5
  * When we patch adf-schema with media `toDOM` fixes we can remove this.
6
6
  */
7
7
  export declare const getMediaAttrs: (nodeName: string, node: PMNode) => {
8
- 'data-id': any;
9
- 'data-node-type': string;
10
- 'data-type': any;
11
- 'data-collection': any;
12
- 'data-occurrence-key': any;
13
- 'data-width': any;
14
- 'data-height': any;
15
- 'data-url': any;
16
- 'data-alt': any;
17
- title: string;
8
+ "data-alt": any;
9
+ "data-collection": any;
10
+ "data-height": any;
11
+ "data-id": any;
12
+ "data-node-type": string;
13
+ "data-occurrence-key": any;
14
+ "data-type": any;
15
+ "data-url": any;
16
+ "data-width": any;
18
17
  style: string;
18
+ title: string;
19
19
  };
20
20
  export declare const camelCaseToKebabCase: (str: string) => string;
21
21
  /**
@@ -24,6 +24,6 @@ export declare const camelCaseToKebabCase: (str: string) => string;
24
24
  * When we patch adf-schema with media `toDOM` fixes we can remove this.
25
25
  */
26
26
  export declare const getAttrsFromNodeMediaSingle: (withExtendedWidthTypes: boolean, node: PMNode) => {
27
- 'data-width-type': any;
28
- 'data-media-vc-wrapper': string;
27
+ "data-media-vc-wrapper": string;
28
+ "data-width-type": any;
29
29
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "9.3.3",
3
+ "version": "9.4.1",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -44,7 +44,7 @@
44
44
  "@atlaskit/editor-plugin-focus": "^6.0.0",
45
45
  "@atlaskit/editor-plugin-grid": "^7.0.0",
46
46
  "@atlaskit/editor-plugin-guideline": "^7.0.0",
47
- "@atlaskit/editor-plugin-interaction": "^12.0.0",
47
+ "@atlaskit/editor-plugin-interaction": "^13.0.0",
48
48
  "@atlaskit/editor-plugin-selection": "^7.0.0",
49
49
  "@atlaskit/editor-plugin-toolbar": "^4.0.0",
50
50
  "@atlaskit/editor-plugin-width": "^8.0.0",
@@ -63,12 +63,12 @@
63
63
  "@atlaskit/media-ui": "^28.7.0",
64
64
  "@atlaskit/media-viewer": "^52.6.0",
65
65
  "@atlaskit/platform-feature-flags": "^1.1.0",
66
- "@atlaskit/primitives": "^17.0.0",
66
+ "@atlaskit/primitives": "^17.1.0",
67
67
  "@atlaskit/textfield": "^8.2.0",
68
68
  "@atlaskit/theme": "^21.0.0",
69
- "@atlaskit/tmp-editor-statsig": "^16.14.0",
70
- "@atlaskit/tokens": "^9.1.0",
71
- "@atlaskit/tooltip": "^20.13.0",
69
+ "@atlaskit/tmp-editor-statsig": "^16.23.0",
70
+ "@atlaskit/tokens": "^10.0.0",
71
+ "@atlaskit/tooltip": "^20.14.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": "^111.7.0",
81
+ "@atlaskit/editor-common": "^111.8.0",
82
82
  "@atlaskit/media-core": "^37.0.0",
83
83
  "react": "^18.2.0",
84
84
  "react-dom": "^18.2.0",