@atlaskit/editor-plugin-media 3.0.9 → 3.0.10

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

@@ -1,12 +1,18 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React from 'react';
 import memoizeOne from 'memoize-one';
 import { wrappedLayouts } from '@atlaskit/editor-common/media-single';
+import { mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
 import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
+import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import { getMediaClient } from '@atlaskit/media-client-react';
+import { messages } from '@atlaskit/media-ui';
 import { isVideo } from '../../pm-plugins/utils/media-single';
+import { changeMediaInlineToMediaSingle, changeMediaSingleToMediaInline } from './commands';
 export var isExternalMedia = function isExternalMedia(attrs) {
   return attrs.type === 'external';
 };
@@ -159,4 +165,65 @@ export var updateToFullHeightSeparator = function updateToFullHeightSeparator(it
       fullHeight: true
     });
   }
+};
+export var getMediaSingleAndMediaInlineSwitcherDropdown = function getMediaSingleAndMediaInlineSwitcherDropdown(nodeType, intl, pluginInjectionApi) {
+  var _pluginInjectionApi$a, _pluginInjectionApi$a2;
+  var hasCaption = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var mediaInlineImageTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+  var mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
+  var inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+  var InlineIcon = function InlineIcon() {
+    return /*#__PURE__*/React.createElement(ImageInlineIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    });
+  };
+  var BlockIcon = function BlockIcon() {
+    return /*#__PURE__*/React.createElement(MaximizeIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    });
+  };
+  var dropdownConfig = {
+    inline: {
+      handleInlineButtonClick: function handleInlineButtonClick() {
+        return true;
+      },
+      handleBlockButtonClick: changeMediaInlineToMediaSingle(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width.sharedState.currentState()),
+      id: 'media-inline-to-block-toolbar-item',
+      icon: InlineIcon
+    },
+    block: {
+      handleInlineButtonClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions),
+      handleBlockButtonClick: function handleBlockButtonClick() {
+        return true;
+      },
+      id: 'media-block-to-inline-toolbar-item',
+      icon: BlockIcon
+    }
+  };
+  var options = [{
+    id: 'editor.media.convert.mediainline',
+    title: mediaInlineImageTitle,
+    onClick: dropdownConfig[nodeType].handleInlineButtonClick,
+    selected: nodeType === 'inline',
+    icon: /*#__PURE__*/React.createElement(InlineIcon, null),
+    tooltip: hasCaption ? inlineSwitcherTitle : undefined
+  }, {
+    id: 'editor.media.convert.mediasingle',
+    title: mediaSingleTitle,
+    onClick: dropdownConfig[nodeType].handleBlockButtonClick,
+    selected: nodeType === 'block',
+    icon: /*#__PURE__*/React.createElement(BlockIcon, null)
+  }];
+  return {
+    id: dropdownConfig[nodeType].id,
+    testId: 'media-inline-to-block-dropdown',
+    title: intl.formatMessage(messages.sizeOptions),
+    type: 'dropdown',
+    options: options,
+    icon: dropdownConfig[nodeType].icon
+  };
 };

package/dist/types/ui/toolbar/commands.d.ts

@@ -7,7 +7,7 @@ import type { PixelEntryValidation } from '../../pm-plugins/pixel-resizing/ui/ty
 import type { EventInput } from '../../pm-plugins/types';
 export declare const DEFAULT_BORDER_COLOR = "#091e4224";
 export declare const DEFAULT_BORDER_SIZE = 2;
-export declare const getNodeType: (state: EditorState) => "mediaSingle" | "mediaInline";
+export declare const getNodeType: (state: EditorState) => "mediaInline" | "mediaSingle";
 export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
 export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
 export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined, allowPixelResizing?: boolean) => Command;

package/dist/types/ui/toolbar/utils.d.ts

@@ -1,10 +1,12 @@
+import { IntlShape } from 'react-intl-next';
 import type { ExternalMediaAttributes, MediaADFAttrs, RichMediaLayout } from '@atlaskit/adf-schema';
 import type { LayoutIcon } from '@atlaskit/editor-common/card';
-import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+import type { Command, FloatingToolbarItem, FloatingToolbarDropdown, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MediaNextEditorPluginType } from '../../mediaPluginType';
 import type { MediaPluginState } from '../../pm-plugins/types';
 export declare const isExternalMedia: (attrs: MediaADFAttrs) => attrs is ExternalMediaAttributes;
 export declare const getSelectedNearestMediaContainerNodeAttrsFunction: (selectedMediaContainerNode: () => ProseMirrorNode | undefined) => MediaADFAttrs | null;
@@ -22,3 +24,4 @@ export declare const getSelectedLayoutIcon: (layoutIcons: LayoutIcon[], selected
  */
 export declare const canShowSwitchButtons: (mediaSingleNode?: ProseMirrorNode) => boolean | null;
 export declare const updateToFullHeightSeparator: (items: FloatingToolbarItem<Command>[]) => void;
+export declare const getMediaSingleAndMediaInlineSwitcherDropdown: (nodeType: 'inline' | 'block', intl: IntlShape, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, hasCaption?: boolean) => FloatingToolbarDropdown<Command>;

package/dist/types-ts4.5/ui/toolbar/commands.d.ts

@@ -7,7 +7,7 @@ import type { PixelEntryValidation } from '../../pm-plugins/pixel-resizing/ui/ty
 import type { EventInput } from '../../pm-plugins/types';
 export declare const DEFAULT_BORDER_COLOR = "#091e4224";
 export declare const DEFAULT_BORDER_SIZE = 2;
-export declare const getNodeType: (state: EditorState) => "mediaSingle" | "mediaInline";
+export declare const getNodeType: (state: EditorState) => "mediaInline" | "mediaSingle";
 export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
 export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
 export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined, allowPixelResizing?: boolean) => Command;

package/dist/types-ts4.5/ui/toolbar/utils.d.ts

@@ -1,10 +1,12 @@
+import { IntlShape } from 'react-intl-next';
 import type { ExternalMediaAttributes, MediaADFAttrs, RichMediaLayout } from '@atlaskit/adf-schema';
 import type { LayoutIcon } from '@atlaskit/editor-common/card';
-import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+import type { Command, FloatingToolbarItem, FloatingToolbarDropdown, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MediaNextEditorPluginType } from '../../mediaPluginType';
 import type { MediaPluginState } from '../../pm-plugins/types';
 export declare const isExternalMedia: (attrs: MediaADFAttrs) => attrs is ExternalMediaAttributes;
 export declare const getSelectedNearestMediaContainerNodeAttrsFunction: (selectedMediaContainerNode: () => ProseMirrorNode | undefined) => MediaADFAttrs | null;
@@ -22,3 +24,4 @@ export declare const getSelectedLayoutIcon: (layoutIcons: LayoutIcon[], selected
  */
 export declare const canShowSwitchButtons: (mediaSingleNode?: ProseMirrorNode) => boolean | null;
 export declare const updateToFullHeightSeparator: (items: FloatingToolbarItem<Command>[]) => void;
+export declare const getMediaSingleAndMediaInlineSwitcherDropdown: (nodeType: 'inline' | 'block', intl: IntlShape, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined, hasCaption?: boolean) => FloatingToolbarDropdown<Command>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "3.0.9",
+	"version": "3.0.10",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -70,7 +70,7 @@
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.2.0",
+		"@atlaskit/tmp-editor-statsig": "^5.5.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@atlaskit/tooltip": "^20.2.0",
 		"@babel/runtime": "^7.0.0",
@@ -207,6 +207,9 @@
 		},
 		"platform_editor_interaction_api_refactor": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_11": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {