@atlaskit/editor-plugin-media 9.3.2 → 9.3.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @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

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/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/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/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.3.3",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -66,9 +66,9 @@
 		"@atlaskit/primitives": "^17.0.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.11.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",
@@ -159,6 +159,9 @@
 		},
 		"jira_kuro-jjj_disable_auto_focus_after_img_upload": {
 			"type": "boolean"
+		},
+		"platform_editor_media_insert_check": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {