@atlaskit/editor-plugin-media 9.3.2 → 9.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-media
 
+## 9.4.0
+
+### Minor Changes
+
+- [`f552961081787`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f552961081787) -
+  Removed the editing button from the toolbar for external media Introduced cropping for image
+  editing
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.3.3
+
+### Patch Changes
+
+- [`0457795b04c62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0457795b04c62) -
+  EDITOR-4396 Media toolbar button doesn't when missing the mediaInsert Plugin
+
 ## 9.3.2
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -9,6 +9,8 @@ exports.mediaPlugin = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -341,8 +343,35 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert() {
-        return [];
+      quickInsert: function quickInsert(_ref12) {
+        var formatMessage = _ref12.formatMessage;
+        return !(api !== null && api !== void 0 && api.mediaInsert) && (0, _platformFeatureFlags.fg)('platform_editor_media_insert_check') ? [{
+          id: 'media',
+          title: formatMessage(_messages.toolbarInsertBlockMessages.mediaFiles),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.mediaFilesDescription),
+          priority: 400,
+          keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video', 'file'],
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconImages, null);
+          },
+          isDisabledOffline: true,
+          action: function action(insert, state) {
+            var _api$analytics6;
+            var pluginState = _pluginKey.stateKey.getState(state);
+            pluginState === null || pluginState === void 0 || pluginState.showMediaPicker();
+            var tr = insert('');
+            api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 || _api$analytics6.actions.attachAnalyticsEvent({
+              action: _analytics.ACTION.OPENED,
+              actionSubject: _analytics.ACTION_SUBJECT.PICKER,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_CLOUD,
+              attributes: {
+                inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: _analytics.EVENT_TYPE.UI
+            })(tr);
+            return tr;
+          }
+        }] : [];
       },
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         var _api$editorViewMode;

package/dist/cjs/ui/Media/DropPlaceholder.js

@@ -46,8 +46,7 @@ var IconWrapperComponent = function IconWrapperComponent(props) {
   return (0, _react.jsx)("div", {
     css: iconWrapperStyles
   }, (0, _react.jsx)(_file.default, {
-    label: intl.formatMessage(dropPlaceholderLabel),
-    LEGACY_size: "medium"
+    label: intl.formatMessage(dropPlaceholderLabel)
   }));
 };
 var IntlIconWrapper = (0, _reactIntlNext.injectIntl)(IconWrapperComponent);

package/dist/cjs/ui/toolbar/index.js

@@ -565,10 +565,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       }
       // Image Editing Support
       if (!!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.mediaEditing) && allowImageEditing && (0, _expValEquals.expValEquals)('platform_editor_add_image_editing', 'isEnabled', true)) {
-        var _mediaNode$attrs;
+        var _mediaNode$attrs, _mediaNode$attrs2;
         var _selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
         var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
-        if (!(0, _mediaSingle.isVideo)(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
+        // Disable image editing for external media, as we cannot save changes to external images per CORS policy
+        var isExternal = (mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.type) === 'external';
+        if (!(0, _mediaSingle.isVideo)(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType) && !isExternal) {
           toolbarButtons.push({
             id: 'editor.media.edit',
             testId: 'image-edit-toolbar-button',
@@ -591,10 +593,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       }
       // Preview Support
       if (allowImagePreview) {
-        var _mediaNode$attrs2;
+        var _mediaNode$attrs3;
         var _selectedMediaSingleNode2 = (0, _utils2.getSelectedMediaSingle)(state);
         var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
-        if (!(0, _mediaSingle.isVideo)(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
+        if (!(0, _mediaSingle.isVideo)(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs3 = _mediaNode.attrs) === null || _mediaNode$attrs3 === void 0 ? void 0 : _mediaNode$attrs3.__fileMimeType)) {
           var _pluginInjectionApi$c2;
           toolbarButtons.push({
             id: 'editor.media.viewer',
@@ -728,10 +730,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount));
     }
     if (allowAdvancedToolBarOptions && allowImageEditing && (0, _expValEquals.expValEquals)('platform_editor_add_image_editing', 'isEnabled', true)) {
-      var _mediaNode3$attrs;
+      var _mediaNode3$attrs, _mediaNode3$attrs2;
       var _selectedMediaSingleNode4 = (0, _utils2.getSelectedMediaSingle)(state);
       var _mediaNode3 = _selectedMediaSingleNode4 === null || _selectedMediaSingleNode4 === void 0 ? void 0 : _selectedMediaSingleNode4.node.content.firstChild;
-      if (!(0, _mediaSingle.isVideo)(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.__fileMimeType)) {
+      // Disable image editing for external media, as we cannot save changes to external images per CORS policy
+      var _isExternal = (_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.type) === 'external';
+      if (!(0, _mediaSingle.isVideo)(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs2 = _mediaNode3.attrs) === null || _mediaNode3$attrs2 === void 0 ? void 0 : _mediaNode3$attrs2.__fileMimeType) && !_isExternal) {
         toolbarButtons.push({
           id: 'editor.media.edit',
           testId: 'image-edit-toolbar-button',

package/dist/es2019/mediaPlugin.js

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconImages } from '@atlaskit/editor-common/quick-insert';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
@@ -340,7 +342,33 @@ export const mediaPlugin = ({
       });
     },
     pluginsOptions: {
-      quickInsert: () => [],
+      quickInsert: ({
+        formatMessage
+      }) => !(api !== null && api !== void 0 && api.mediaInsert) && fg('platform_editor_media_insert_check') ? [{
+        id: 'media',
+        title: formatMessage(messages.mediaFiles),
+        description: formatMessage(messages.mediaFilesDescription),
+        priority: 400,
+        keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video', 'file'],
+        icon: () => /*#__PURE__*/React.createElement(IconImages, null),
+        isDisabledOffline: true,
+        action(insert, state) {
+          var _api$analytics6;
+          const pluginState = stateKey.getState(state);
+          pluginState === null || pluginState === void 0 ? void 0 : pluginState.showMediaPicker();
+          const tr = insert('');
+          api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions.attachAnalyticsEvent({
+            action: ACTION.OPENED,
+            actionSubject: ACTION_SUBJECT.PICKER,
+            actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
+            attributes: {
+              inputMethod: INPUT_METHOD.QUICK_INSERT
+            },
+            eventType: EVENT_TYPE.UI
+          })(tr);
+          return tr;
+        }
+      }] : [],
       floatingToolbar: (state, intl, providerFactory) => {
         var _api$editorViewMode, _api$editorViewMode$s;
         return floatingToolbar(state, intl, {

package/dist/es2019/ui/Media/DropPlaceholder.js

@@ -42,8 +42,7 @@ const IconWrapperComponent = props => {
   return jsx("div", {
     css: iconWrapperStyles
   }, jsx(DocumentFilledIcon, {
-    label: intl.formatMessage(dropPlaceholderLabel),
-    LEGACY_size: "medium"
+    label: intl.formatMessage(dropPlaceholderLabel)
   }));
 };
 const IntlIconWrapper = injectIntl(IconWrapperComponent);

package/dist/es2019/ui/toolbar/index.js

@@ -564,10 +564,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       }
       // Image Editing Support
       if (!!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.mediaEditing) && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
-        var _mediaNode$attrs;
+        var _mediaNode$attrs, _mediaNode$attrs2;
         const selectedMediaSingleNode = getSelectedMediaSingle(state);
         const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
-        if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
+        // Disable image editing for external media, as we cannot save changes to external images per CORS policy
+        const isExternal = (mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.type) === 'external';
+        if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType) && !isExternal) {
           toolbarButtons.push({
             id: 'editor.media.edit',
             testId: 'image-edit-toolbar-button',
@@ -590,10 +592,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       }
       // Preview Support
       if (allowImagePreview) {
-        var _mediaNode$attrs2;
+        var _mediaNode$attrs3;
         const selectedMediaSingleNode = getSelectedMediaSingle(state);
         const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
-        if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
+        if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs3 = mediaNode.attrs) === null || _mediaNode$attrs3 === void 0 ? void 0 : _mediaNode$attrs3.__fileMimeType)) {
           var _pluginInjectionApi$c4, _pluginInjectionApi$c5, _pluginInjectionApi$c6;
           toolbarButtons.push({
             id: 'editor.media.viewer',
@@ -676,10 +678,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   } else {
     // Preview Support
     if (allowAdvancedToolBarOptions && allowImagePreview) {
-      var _mediaNode$attrs3;
+      var _mediaNode$attrs4;
       const selectedMediaSingleNode = getSelectedMediaSingle(state);
       const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
-      if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs3 = mediaNode.attrs) === null || _mediaNode$attrs3 === void 0 ? void 0 : _mediaNode$attrs3.__fileMimeType)) {
+      if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs4 = mediaNode.attrs) === null || _mediaNode$attrs4 === void 0 ? void 0 : _mediaNode$attrs4.__fileMimeType)) {
         var _pluginInjectionApi$c7, _pluginInjectionApi$c8, _pluginInjectionApi$c9;
         toolbarButtons.push({
           id: 'editor.media.viewer',
@@ -727,10 +729,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount));
     }
     if (allowAdvancedToolBarOptions && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
-      var _mediaNode$attrs4;
+      var _mediaNode$attrs5, _mediaNode$attrs6;
       const selectedMediaSingleNode = getSelectedMediaSingle(state);
       const mediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
-      if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs4 = mediaNode.attrs) === null || _mediaNode$attrs4 === void 0 ? void 0 : _mediaNode$attrs4.__fileMimeType)) {
+      // Disable image editing for external media, as we cannot save changes to external images per CORS policy
+      const isExternal = (mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs5 = mediaNode.attrs) === null || _mediaNode$attrs5 === void 0 ? void 0 : _mediaNode$attrs5.type) === 'external';
+      if (!isVideo(mediaNode === null || mediaNode === void 0 ? void 0 : (_mediaNode$attrs6 = mediaNode.attrs) === null || _mediaNode$attrs6 === void 0 ? void 0 : _mediaNode$attrs6.__fileMimeType) && !isExternal) {
         toolbarButtons.push({
           id: 'editor.media.edit',
           testId: 'image-edit-toolbar-button',

package/dist/esm/mediaPlugin.js

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconImages } from '@atlaskit/editor-common/quick-insert';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
@@ -332,8 +334,35 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert() {
-        return [];
+      quickInsert: function quickInsert(_ref12) {
+        var formatMessage = _ref12.formatMessage;
+        return !(api !== null && api !== void 0 && api.mediaInsert) && fg('platform_editor_media_insert_check') ? [{
+          id: 'media',
+          title: formatMessage(messages.mediaFiles),
+          description: formatMessage(messages.mediaFilesDescription),
+          priority: 400,
+          keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video', 'file'],
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconImages, null);
+          },
+          isDisabledOffline: true,
+          action: function action(insert, state) {
+            var _api$analytics6;
+            var pluginState = stateKey.getState(state);
+            pluginState === null || pluginState === void 0 || pluginState.showMediaPicker();
+            var tr = insert('');
+            api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 || _api$analytics6.actions.attachAnalyticsEvent({
+              action: ACTION.OPENED,
+              actionSubject: ACTION_SUBJECT.PICKER,
+              actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
+              attributes: {
+                inputMethod: INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: EVENT_TYPE.UI
+            })(tr);
+            return tr;
+          }
+        }] : [];
       },
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         var _api$editorViewMode;

package/dist/esm/ui/Media/DropPlaceholder.js

@@ -38,8 +38,7 @@ var IconWrapperComponent = function IconWrapperComponent(props) {
   return jsx("div", {
     css: iconWrapperStyles
   }, jsx(DocumentFilledIcon, {
-    label: intl.formatMessage(dropPlaceholderLabel),
-    LEGACY_size: "medium"
+    label: intl.formatMessage(dropPlaceholderLabel)
   }));
 };
 var IntlIconWrapper = injectIntl(IconWrapperComponent);

package/dist/esm/ui/toolbar/index.js

@@ -556,10 +556,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       }
       // Image Editing Support
       if (!!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.mediaEditing) && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
-        var _mediaNode$attrs;
+        var _mediaNode$attrs, _mediaNode$attrs2;
         var _selectedMediaSingleNode = getSelectedMediaSingle(state);
         var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
-        if (!isVideo(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
+        // Disable image editing for external media, as we cannot save changes to external images per CORS policy
+        var isExternal = (mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.type) === 'external';
+        if (!isVideo(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs2 = mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType) && !isExternal) {
           toolbarButtons.push({
             id: 'editor.media.edit',
             testId: 'image-edit-toolbar-button',
@@ -582,10 +584,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       }
       // Preview Support
       if (allowImagePreview) {
-        var _mediaNode$attrs2;
+        var _mediaNode$attrs3;
         var _selectedMediaSingleNode2 = getSelectedMediaSingle(state);
         var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
-        if (!isVideo(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
+        if (!isVideo(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs3 = _mediaNode.attrs) === null || _mediaNode$attrs3 === void 0 ? void 0 : _mediaNode$attrs3.__fileMimeType)) {
           var _pluginInjectionApi$c2;
           toolbarButtons.push({
             id: 'editor.media.viewer',
@@ -719,10 +721,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount));
     }
     if (allowAdvancedToolBarOptions && allowImageEditing && expValEquals('platform_editor_add_image_editing', 'isEnabled', true)) {
-      var _mediaNode3$attrs;
+      var _mediaNode3$attrs, _mediaNode3$attrs2;
       var _selectedMediaSingleNode4 = getSelectedMediaSingle(state);
       var _mediaNode3 = _selectedMediaSingleNode4 === null || _selectedMediaSingleNode4 === void 0 ? void 0 : _selectedMediaSingleNode4.node.content.firstChild;
-      if (!isVideo(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.__fileMimeType)) {
+      // Disable image editing for external media, as we cannot save changes to external images per CORS policy
+      var _isExternal = (_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs = _mediaNode3.attrs) === null || _mediaNode3$attrs === void 0 ? void 0 : _mediaNode3$attrs.type) === 'external';
+      if (!isVideo(_mediaNode3 === null || _mediaNode3 === void 0 || (_mediaNode3$attrs2 = _mediaNode3.attrs) === null || _mediaNode3$attrs2 === void 0 ? void 0 : _mediaNode3$attrs2.__fileMimeType) && !_isExternal) {
         toolbarButtons.push({
           id: 'editor.media.edit',
           testId: 'image-edit-toolbar-button',

package/dist/types/mediaPluginType.d.ts

@@ -23,6 +23,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { MediaPluginState } from './pm-plugins/types';
 import type { InsertMediaAsMediaSingle } from './pm-plugins/utils/media-single';
 import type { MediaOptions } from './types';
+type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', any>;
 export type MediaPluginDependencies = [
     OptionalPlugin<AnalyticsPlugin>,
     OptionalPlugin<ContextIdentifierPlugin>,
@@ -34,6 +35,7 @@ export type MediaPluginDependencies = [
     FloatingToolbarPlugin,
     EditorDisabledPlugin,
     FocusPlugin,
+    OptionalPlugin<MediaInsertPlugin>,
     OptionalPlugin<InteractionPlugin>,
     SelectionPlugin,
     OptionalPlugin<AnnotationPlugin>,
@@ -84,3 +86,4 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     pluginConfiguration: MediaOptions | undefined;
     sharedState: MediaPluginState | null;
 }>;
+export {};

package/dist/types-ts4.5/mediaPluginType.d.ts

@@ -23,6 +23,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { MediaPluginState } from './pm-plugins/types';
 import type { InsertMediaAsMediaSingle } from './pm-plugins/utils/media-single';
 import type { MediaOptions } from './types';
+type MediaInsertPlugin = NextEditorPlugin<'mediaInsert', any>;
 export type MediaPluginDependencies = [
     OptionalPlugin<AnalyticsPlugin>,
     OptionalPlugin<ContextIdentifierPlugin>,
@@ -34,6 +35,7 @@ export type MediaPluginDependencies = [
     FloatingToolbarPlugin,
     EditorDisabledPlugin,
     FocusPlugin,
+    OptionalPlugin<MediaInsertPlugin>,
     OptionalPlugin<InteractionPlugin>,
     SelectionPlugin,
     OptionalPlugin<AnnotationPlugin>,
@@ -84,3 +86,4 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     pluginConfiguration: MediaOptions | undefined;
     sharedState: MediaPluginState | null;
 }>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "9.3.2",
+	"version": "9.4.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -63,12 +63,12 @@
 		"@atlaskit/media-ui": "^28.7.0",
 		"@atlaskit/media-viewer": "^52.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^17.0.0",
+		"@atlaskit/primitives": "^17.1.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.11.0",
+		"@atlaskit/tmp-editor-statsig": "^16.23.0",
 		"@atlaskit/tokens": "^9.1.0",
-		"@atlaskit/tooltip": "^20.12.0",
+		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -78,7 +78,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.7.0",
+		"@atlaskit/editor-common": "^111.8.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
@@ -159,6 +159,9 @@
 		},
 		"jira_kuro-jjj_disable_auto_focus_after_img_upload": {
 			"type": "boolean"
+		},
+		"platform_editor_media_insert_check": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {