@atlaskit/editor-plugin-media 9.3.0 → 9.3.3

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-media
 
+## 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
+
+- [`f0aa021b562bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0aa021b562bb) -
+  Updated with default media provider and handle optional view in media state
+- Updated dependencies
+
+## 9.3.1
+
+### Patch Changes
+
+- [`17e77ddc106cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/17e77ddc106cc) -
+  Added basic image modal tests for editor-plugin-media-editing Added image-edit-toolbar-button into
+  the editor media testing toolbar Imported media editing plugin into the editor test helper
+- Updated dependencies
+
 ## 9.3.0
 
 ### Minor 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/nodeviews/mediaNodeView/index.js

@@ -145,6 +145,10 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
+        var mediaProviderToUse = mediaProvider;
+        if (!mediaProviderToUse && (0, _expValEquals.expValEquals)('platform_editor_ssr_renderer', 'isEnabled', true)) {
+          mediaProviderToUse = mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
+        }
         return /*#__PURE__*/_react.default.createElement(_media.default, {
           api: pluginInjectionApi,
           view: _this.view,
@@ -154,7 +158,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           originalDimensions: originalDimensions,
           maxDimensions: maxDimensions,
           url: url,
-          mediaProvider: mediaProvider,
+          mediaProvider: mediaProviderToUse,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
           onExternalImageLoaded: _this.onExternalImageLoaded,

package/dist/cjs/pm-plugins/main.js

@@ -418,7 +418,13 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
       return true;
     });
     (0, _defineProperty2.default)(this, "selectedMediaContainerNode", function () {
-      var selection = _this.view.state.selection;
+      var selection;
+      if ((0, _expValEquals.expValEquals)('platform_editor_ssr_renderer', 'isEnabled', true)) {
+        var _this$view;
+        selection = (_this$view = _this.view) === null || _this$view === void 0 || (_this$view = _this$view.state) === null || _this$view === void 0 ? void 0 : _this$view.selection;
+      } else {
+        selection = _this.view.state.selection;
+      }
       if (selection instanceof _state2.NodeSelection && _this.isMediaSchemaNode(selection.node)) {
         return selection.node;
       }
@@ -430,9 +436,9 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
         return;
       }
       _this.showDropzone = isActive;
-      var _this$view = _this.view,
-        dispatch = _this$view.dispatch,
-        state = _this$view.state;
+      var _this$view2 = _this.view,
+        dispatch = _this$view2.dispatch,
+        state = _this$view2.state;
       var tr = state.tr,
         selection = state.selection,
         doc = state.doc;

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

@@ -582,7 +582,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 mediaPluginState: pluginState
               })) !== null && _handleShowImageEdito !== void 0 ? _handleShowImageEdito : false;
             },
-            supportsViewMode: false
+            // Making the button more accessible
+            supportsViewMode: false,
+            isRadioButton: true,
+            selected: false
           });
         }
       }

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/nodeviews/mediaNodeView/index.js

@@ -134,6 +134,10 @@ class MediaNodeView extends SelectionBasedNodeView {
           height
         };
         const isSelectedAndInteracted = this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
+        let mediaProviderToUse = mediaProvider;
+        if (!mediaProviderToUse && expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
+          mediaProviderToUse = mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
+        }
         return /*#__PURE__*/React.createElement(MediaNode, {
           api: pluginInjectionApi,
           view: this.view,
@@ -143,7 +147,7 @@ class MediaNodeView extends SelectionBasedNodeView {
           originalDimensions: originalDimensions,
           maxDimensions: maxDimensions,
           url: url,
-          mediaProvider: mediaProvider,
+          mediaProvider: mediaProviderToUse,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
           onExternalImageLoaded: this.onExternalImageLoaded,

package/dist/es2019/pm-plugins/main.js

@@ -389,9 +389,15 @@ export class MediaPluginStateImplementation {
       return true;
     });
     _defineProperty(this, "selectedMediaContainerNode", () => {
-      const {
-        selection
-      } = this.view.state;
+      let selection;
+      if (expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
+        var _this$view, _this$view$state;
+        selection = (_this$view = this.view) === null || _this$view === void 0 ? void 0 : (_this$view$state = _this$view.state) === null || _this$view$state === void 0 ? void 0 : _this$view$state.selection;
+      } else {
+        ({
+          selection
+        } = this.view.state);
+      }
       if (selection instanceof NodeSelection && this.isMediaSchemaNode(selection.node)) {
         return selection.node;
       }

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

@@ -581,7 +581,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
                 mediaPluginState: pluginState
               })) !== null && _handleShowImageEdito !== void 0 ? _handleShowImageEdito : false;
             },
-            supportsViewMode: false
+            // Making the button more accessible
+            supportsViewMode: false,
+            isRadioButton: true,
+            selected: false
           });
         }
       }

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/nodeviews/mediaNodeView/index.js

@@ -139,6 +139,10 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
+        var mediaProviderToUse = mediaProvider;
+        if (!mediaProviderToUse && expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
+          mediaProviderToUse = mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
+        }
         return /*#__PURE__*/React.createElement(MediaNode, {
           api: pluginInjectionApi,
           view: _this.view,
@@ -148,7 +152,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           originalDimensions: originalDimensions,
           maxDimensions: maxDimensions,
           url: url,
-          mediaProvider: mediaProvider,
+          mediaProvider: mediaProviderToUse,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
           onExternalImageLoaded: _this.onExternalImageLoaded,

package/dist/esm/pm-plugins/main.js

@@ -410,7 +410,13 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
       return true;
     });
     _defineProperty(this, "selectedMediaContainerNode", function () {
-      var selection = _this.view.state.selection;
+      var selection;
+      if (expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
+        var _this$view;
+        selection = (_this$view = _this.view) === null || _this$view === void 0 || (_this$view = _this$view.state) === null || _this$view === void 0 ? void 0 : _this$view.selection;
+      } else {
+        selection = _this.view.state.selection;
+      }
       if (selection instanceof NodeSelection && _this.isMediaSchemaNode(selection.node)) {
         return selection.node;
       }
@@ -422,9 +428,9 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
         return;
       }
       _this.showDropzone = isActive;
-      var _this$view = _this.view,
-        dispatch = _this$view.dispatch,
-        state = _this$view.state;
+      var _this$view2 = _this.view,
+        dispatch = _this$view2.dispatch,
+        state = _this$view2.state;
       var tr = state.tr,
         selection = state.selection,
         doc = state.doc;

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

@@ -573,7 +573,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 mediaPluginState: pluginState
               })) !== null && _handleShowImageEdito !== void 0 ? _handleShowImageEdito : false;
             },
-            supportsViewMode: false
+            // Making the button more accessible
+            supportsViewMode: false,
+            isRadioButton: true,
+            selected: false
           });
         }
       }

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.0",
+	"version": "9.3.3",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -51,24 +51,24 @@
 		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/form": "^15.2.0",
+		"@atlaskit/form": "^15.3.0",
 		"@atlaskit/icon": "^29.4.0",
-		"@atlaskit/icon-lab": "^5.13.0",
-		"@atlaskit/media-card": "^79.12.0",
+		"@atlaskit/icon-lab": "^5.14.0",
+		"@atlaskit/media-card": "^79.13.0",
 		"@atlaskit/media-client": "^35.7.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
 		"@atlaskit/media-filmstrip": "^51.1.0",
 		"@atlaskit/media-picker": "^70.1.0",
 		"@atlaskit/media-ui": "^28.7.0",
-		"@atlaskit/media-viewer": "^52.5.0",
+		"@atlaskit/media-viewer": "^52.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^17.0.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.8.0",
+		"@atlaskit/tmp-editor-statsig": "^16.14.0",
 		"@atlaskit/tokens": "^9.1.0",
-		"@atlaskit/tooltip": "^20.12.0",
+		"@atlaskit/tooltip": "^20.13.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.6.0",
+		"@atlaskit/editor-common": "^111.7.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": {