@atlaskit/editor-plugin-media 2.3.8 → 2.3.9

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

@@ -8,11 +8,9 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
 import { altTextMessages } from '@atlaskit/editor-common/media';
 import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
-import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { contains, findParentNodeOfType, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
@@ -34,20 +32,23 @@ import { getPluginState as getMediaAltTextPluginState } from '../../pm-plugins/a
 import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
 import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
 import { getMediaLinkingState } from '../../pm-plugins/linking';
+import { getPluginState as getMediaPixelResizingPluginState } from '../../pm-plugins/pixel-resizing';
+import { openPixelEditor } from '../../pm-plugins/pixel-resizing/commands';
+import { FullWidthDisplay, PixelEntry } from '../../pm-plugins/pixel-resizing/ui';
 import { stateKey } from '../../pm-plugins/plugin-key';
 import { currentMediaOrInlineNodeBorderMark } from '../../pm-plugins/utils/current-media-node';
 import { isVideo } from '../../pm-plugins/utils/media-single';
 import ImageBorderItem from '../../ui/ImageBorder';
-import { FullWidthDisplay, PixelEntry } from '../../ui/PixelEntry';
 import { altTextButton, getAltTextToolbar } from './alt-text';
-import { changeMediaCardToInline, changeMediaSingleToMediaInline, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
+import { changeMediaCardToInline, changeMediaSingleToMediaInline, setBorderMark, toggleBorderMark } from './commands';
 import { commentButton } from './comments';
 import { shouldShowImageBorder } from './imageBorder';
 import { LayoutGroup } from './layout-group';
 import { getLinkingDropdownOptions, getLinkingToolbar, getOpenLinkToolbarButtonOption, shouldShowMediaLinkToolbar } from './linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { generateMediaInlineFloatingToolbar } from './mediaInline';
-import { calcNewLayout, canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, getSelectedNearestMediaContainerNodeAttrs, removeMediaGroupNode } from './utils';
+import { getPixelResizingToolbar } from './pixel-resizing';
+import { canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getSelectedLayoutIcon, getSelectedMediaSingle, getSelectedNearestMediaContainerNodeAttrs, removeMediaGroupNode } from './utils';
 var mediaTypeMessages = {
   image: messages.file_image_is_selected,
   video: messages.file_video_is_selected,
@@ -372,69 +373,17 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
-          var _widthPlugin$sharedSt2, _pluginInjectionApi$m;
           if (!editorView || !selectedMediaSingleNode) {
             return null;
           }
-          var state = editorView.state,
-            dispatch = editorView.dispatch;
-          var contentWidth = (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || akEditorDefaultLayoutWidth;
-          var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
-          if (!selectedMediaNode) {
-            return null;
-          }
-          var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
-            mediaSingleWidth = _selectedMediaSingleN.width,
-            widthType = _selectedMediaSingleN.widthType,
-            layout = _selectedMediaSingleN.layout;
-          var _selectedMediaNode$at = selectedMediaNode.attrs,
-            mediaWidth = _selectedMediaNode$at.width,
-            mediaHeight = _selectedMediaNode$at.height;
-          var maxWidthForNestedNode = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.media) === null || _pluginInjectionApi$m === void 0 || (_pluginInjectionApi$m = _pluginInjectionApi$m.sharedState.currentState()) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.currentMaxWidth;
-          var maxWidth = maxWidthForNestedNode || akEditorFullWidthLayoutWidth;
-          var isVideoFile = isVideo(selectedMediaNode.attrs.__fileMimeType);
-          var minWidth = calcMinWidth(isVideoFile, maxWidthForNestedNode || contentWidth);
-          var hasPixelType = widthType === 'pixel';
-          var pixelWidthFromElement = getPixelWidthOfElement(editorView, selectedMediaSingleNode.pos + 1,
-          // get pos of media node
-          mediaWidth || DEFAULT_IMAGE_WIDTH);
-          var pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
-
-          //hasParentNode will return falsey value if selection depth === 0
-          var isNested = hasParentNode(function (n) {
-            return n.type !== state.schema.nodes.doc;
-          })(state.selection);
           return /*#__PURE__*/React.createElement(PixelEntry, {
+            editorView: editorView,
             intl: intl,
-            width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
-            showMigration: !pluginState.isResizing && !hasPixelType,
-            mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
-            mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
-            minWidth: minWidth,
-            maxWidth: maxWidth,
-            onChange: function onChange(valid) {
-              if (valid) {
-                hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
-              } else {
-                hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
-              }
-            },
-            onSubmit: function onSubmit(_ref3) {
-              var _pluginInjectionApi$a6;
-              var width = _ref3.width,
-                validation = _ref3.validation;
-              var newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
-              updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
-            },
-            onMigrate: function onMigrate() {
-              var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
-                width: pixelWidthFromElement,
-                widthType: 'pixel'
-              }));
-              tr.setMeta('scrollIntoView', false);
-              tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
-              dispatch(tr);
-            }
+            selectedMediaSingleNode: selectedMediaSingleNode,
+            pluginInjectionApi: pluginInjectionApi,
+            pluginState: pluginState,
+            hoverDecoration: hoverDecoration,
+            isEditorFullWidthEnabled: options.fullWidthEnabled
           });
         }
       };
@@ -488,10 +437,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               };
               var openLink = function openLink() {
                 if (editorView) {
-                  var _pluginInjectionApi$a7;
+                  var _pluginInjectionApi$a6;
                   var tr = editorView.state.tr,
                     dispatch = editorView.dispatch;
-                  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 || _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
+                  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 || _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
                     eventType: EVENT_TYPE.TRACK,
                     action: ACTION.VISITED,
                     actionSubject: ACTION_SUBJECT.MEDIA,
@@ -565,8 +514,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     });
   }
   if (allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
-    var _pluginInjectionApi$a8;
-    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
+    var _pluginInjectionApi$a7;
+    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
       type: 'separator'
     });
   }
@@ -681,11 +630,13 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     providerFactory = options.providerFactory,
     allowMediaInline = options.allowMediaInline,
     allowResizing = options.allowResizing,
-    isViewOnly = options.isViewOnly;
+    isViewOnly = options.isViewOnly,
+    allowResizingInTables = options.allowResizingInTables,
+    allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions;
   var mediaPluginState = stateKey.getState(state);
   var mediaLinkingState = getMediaLinkingState(state);
-  var _ref4 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
-    hoverDecoration = _ref4.hoverDecoration;
+  var _ref3 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
+    hoverDecoration = _ref3.hoverDecoration;
   if (!mediaPluginState) {
     return;
   }
@@ -713,6 +664,20 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       });
     }
   }
+  var selection = state.selection;
+  var isWithinTable = hasParentNodeOfType([state.schema.nodes.table])(selection);
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_media_extended_resize_experience')) {
+    var mediaPixelResizingPluginState = getMediaPixelResizingPluginState(state);
+    if (mediaPixelResizingPluginState !== null && mediaPixelResizingPluginState !== void 0 && mediaPixelResizingPluginState.isPixelEditorOpen) {
+      return getPixelResizingToolbar(baseToolbar, {
+        intl: intl,
+        pluginInjectionApi: pluginInjectionApi,
+        pluginState: mediaPluginState,
+        hoverDecoration: hoverDecoration,
+        isEditorFullWidthEnabled: options.fullWidthEnabled
+      });
+    }
+  }
   var items = [];
   var parentMediaGroupNode = findParentNodeOfType(mediaGroup)(state.selection);
   var selectedNodeType;
@@ -720,7 +685,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a9, _pluginInjectionApi$f2;
+    var _pluginInjectionApi$a8, _pluginInjectionApi$f2;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
@@ -729,7 +694,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
@@ -743,7 +708,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
   }
   if (!mediaPluginState.isResizing && editorExperiment('platform_editor_controls', 'variant1')) {
-    var _pluginInjectionApi$a10;
+    var _pluginInjectionApi$a9;
     var lastItem = items.at(-1);
     if ((lastItem === null || lastItem === void 0 ? void 0 : lastItem.type) === 'separator') {
       lastItem.fullHeight = true;
@@ -758,21 +723,17 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       type: 'overflow-dropdown',
       options: [].concat(_toConsumableArray(getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), [{
         title: altTextTitle,
-        onClick: openMediaAltTextMenu(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions),
+        onClick: openMediaAltTextMenu(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions),
         icon: /*#__PURE__*/React.createElement(TextIcon, {
-          label: altTextTitle
+          label: ""
         })
       }, {
         title: 'Resize',
-        onClick: function onClick() {
-          // Ignored via go/ees007
-          // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-          // TODO open resize dialog?
-          return true;
-        },
+        onClick: openPixelEditor(),
         icon: /*#__PURE__*/React.createElement(GrowHorizontalIcon, {
-          label: "Resize"
-        })
+          label: ""
+        }),
+        testId: 'media-pixel-resizing-dropdown-option'
       }, {
         type: 'separator'
       }, {
@@ -784,13 +745,13 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
           return true;
         },
         icon: /*#__PURE__*/React.createElement(CopyIcon, {
-          label: "Copy"
+          label: ""
         })
       }, {
         title: 'Delete',
         onClick: remove,
         icon: /*#__PURE__*/React.createElement(DeleteIcon, {
-          label: "Delete"
+          label: ""
         })
       }])
     });

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

@@ -142,7 +142,7 @@ export var getLinkingDropdownOptions = function getLinkingDropdownOptions(editor
         return true;
       },
       icon: /*#__PURE__*/React.createElement(LinkIcon, {
-        label: _title
+        label: ""
       })
     }];
   }

package/dist/esm/ui/toolbar/pixel-resizing.js

@@ -0,0 +1,40 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { PixelEntry } from '../../pm-plugins/pixel-resizing/ui';
+import { PIXEL_RESIZING_TOOLBAR_WIDTH } from '../../pm-plugins/pixel-resizing/ui/constants';
+import { getSelectedMediaSingle } from './utils';
+export var getPixelResizingToolbar = function getPixelResizingToolbar(toolbarBaseConfig, _ref) {
+  var pluginInjectionApi = _ref.pluginInjectionApi,
+    intl = _ref.intl,
+    pluginState = _ref.pluginState,
+    hoverDecoration = _ref.hoverDecoration,
+    isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled;
+  return _objectSpread(_objectSpread({}, toolbarBaseConfig), {}, {
+    width: PIXEL_RESIZING_TOOLBAR_WIDTH,
+    scrollable: true,
+    items: [{
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        if (!editorView) {
+          return null;
+        }
+        var selectedMediaSingleNode = getSelectedMediaSingle(editorView.state);
+        if (!editorView || !selectedMediaSingleNode) {
+          return null;
+        }
+        return /*#__PURE__*/React.createElement(PixelEntry, {
+          editorView: editorView,
+          intl: intl,
+          selectedMediaSingleNode: selectedMediaSingleNode,
+          pluginInjectionApi: pluginInjectionApi,
+          pluginState: pluginState,
+          hoverDecoration: hoverDecoration,
+          isEditorFullWidthEnabled: isEditorFullWidthEnabled
+        });
+      }
+    }]
+  });
+};

package/dist/types/pm-plugins/pixel-resizing/commands.d.ts

@@ -0,0 +1,4 @@
+import { Transaction, EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const openPixelEditor: () => import("@atlaskit/editor-common/types").Command;
+export declare const closePixelEditor: () => import("@atlaskit/editor-common/types").Command;
+export declare const closePixelEditorAndSave: (saveTransform: (tr: Transaction, state: EditorState) => Transaction) => import("@atlaskit/editor-common/types").Command;

package/dist/types/pm-plugins/pixel-resizing/index.d.ts

@@ -0,0 +1,13 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
+declare const createCommand: <A = {
+    type: "openPixelEditor";
+} | {
+    type: "closePixelEditor";
+}>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => {
+    isPixelEditorOpen: boolean;
+};
+export declare const createPlugin: ({ dispatch }: PMPluginFactoryParams) => SafePlugin<{
+    isPixelEditorOpen: boolean;
+}>;
+export { createCommand, getPluginState };

package/dist/types/pm-plugins/pixel-resizing/reducer.d.ts

@@ -0,0 +1,12 @@
+type mediaPixelResizingState = {
+    isPixelEditorOpen: boolean;
+};
+type OpenPixelEditor = {
+    type: 'openPixelEditor';
+};
+type ClosePixelEditor = {
+    type: 'closePixelEditor';
+};
+type MediaPixelResizingAction = OpenPixelEditor | ClosePixelEditor;
+declare const _default: (state: mediaPixelResizingState, action: MediaPixelResizingAction) => mediaPixelResizingState;
+export default _default;

package/dist/types/pm-plugins/pixel-resizing/ui/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const PIXELENTRY_MIGRATION_BUTTON_TESTID = "pixel-entry-convert-pixels-btn";
+export declare const PIXEL_RESIZING_TOOLBAR_WIDTH = 240;
+export declare const PIXEL_VIEW_MODE_TOOLBAR_WIDTH = 204;

package/dist/types/pm-plugins/pixel-resizing/ui/index.d.ts

@@ -0,0 +1,21 @@
+import { jsx } from '@emotion/react';
+import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
+import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { MediaNextEditorPluginType } from '../../../mediaPluginType';
+import { MediaPluginState } from '../../../types';
+export type Props = {
+    editorView: EditorView;
+    selectedMediaSingleNode: ContentNodeWithPos;
+    pluginInjectionApi?: ExtractInjectionAPI<MediaNextEditorPluginType>;
+    intl: IntlShape;
+    pluginState: MediaPluginState;
+    hoverDecoration: HoverDecorationHandler | undefined;
+    isEditorFullWidthEnabled?: boolean;
+};
+export declare const PixelEntry: ({ editorView, selectedMediaSingleNode, pluginInjectionApi, intl, pluginState, hoverDecoration, isEditorFullWidthEnabled, }: Props) => jsx.JSX.Element | null;
+export declare const FullWidthDisplay: ({ intl: { formatMessage } }: {
+    intl: IntlShape;
+}) => jsx.JSX.Element;

package/dist/types/pm-plugins/pixel-resizing/ui/pixel-entry.d.ts

@@ -0,0 +1,4 @@
+import { jsx } from '@emotion/react';
+import type { PixelEntryComponentNextProps, PixelEntryProps } from './types';
+export declare const PixelEntryComponent: ({ width, mediaWidth, mediaHeight, onSubmit, minWidth, maxWidth, onChange, intl: { formatMessage }, showMigration, onMigrate, onCloseAndSave, isViewMode, }: PixelEntryProps) => jsx.JSX.Element;
+export declare const PixelEntryComponentNext: ({ maxWidth, formatMessage, handleFieldChange, computedWidth, computedHeight, handleCloseAndSave, isViewMode, }: PixelEntryComponentNextProps) => jsx.JSX.Element;

package/dist/types/{ui/PixelEntry → pm-plugins/pixel-resizing/ui}/types.d.ts

@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 import type { IntlShape } from 'react-intl-next';
 export type PixelEntryProps = {
     /**
@@ -46,6 +47,14 @@ export type PixelEntryProps = {
      * Migration handler called when the CTA button is clicked
      */
     onMigrate?: () => void;
+    /**
+     * Called when the Enter key is pressed or close button is clicked
+     */
+    onCloseAndSave?: (data: PixelEntryFormData) => void;
+    /**
+     *
+     */
+    isViewMode?: boolean;
 };
 export type PixelEntryFormValues = {
     inputWidth: number | '';
@@ -56,4 +65,13 @@ type PixelEntryFormData = {
     width: number;
     validation: PixelEntryValidation;
 };
+export type PixelEntryComponentNextProps = {
+    maxWidth: number;
+    computedWidth: number | '';
+    computedHeight: number | '';
+    handleFieldChange: (type: string) => (event: ChangeEvent<HTMLInputElement>) => void;
+    formatMessage: IntlShape['formatMessage'];
+    handleCloseAndSave: (data: PixelEntryFormValues) => void;
+    isViewMode?: boolean;
+};
 export {};

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

@@ -3,8 +3,8 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorContainerWidth as WidthPluginState } from '@atlaskit/editor-common/types';
 import type { ForceFocusSelector } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { PixelEntryValidation } from '../../pm-plugins/pixel-resizing/ui/types';
 import type { EventInput } from '../../pm-plugins/types';
-import type { PixelEntryValidation } from '../../ui/PixelEntry/types';
 export declare const DEFAULT_BORDER_COLOR = "#091e4224";
 export declare const DEFAULT_BORDER_SIZE = 2;
 export declare const getNodeType: (state: EditorState) => "mediaSingle" | "mediaInline";
@@ -14,5 +14,6 @@ export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: Editor
 export declare const removeInlineCard: Command;
 export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const setBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (attrs: Partial<BorderMarkAttributes>) => Command;
+export declare const updateMediaSingleWidthTr: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, state: EditorState, width: number, validation: PixelEntryValidation, inputMethod: EventInput, layout: RichMediaLayout) => import("prosemirror-state").Transaction | null;
 export declare const updateMediaSingleWidth: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (width: number, validation: PixelEntryValidation, inputMethod: EventInput, layout: RichMediaLayout) => Command;
 export declare const changeMediaSingleToMediaInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;

package/dist/types/ui/toolbar/pixel-resizing.d.ts

@@ -0,0 +1,4 @@
+import { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import { Props } from '../../pm-plugins/pixel-resizing/ui';
+import { MediaToolbarBaseConfig } from '../../types';
+export declare const getPixelResizingToolbar: (toolbarBaseConfig: MediaToolbarBaseConfig, { pluginInjectionApi, intl, pluginState, hoverDecoration, isEditorFullWidthEnabled, }: Omit<Props, 'editorView' | 'selectedMediaSingleNode'>) => FloatingToolbarConfig;

package/dist/types-ts4.5/pm-plugins/pixel-resizing/commands.d.ts

@@ -0,0 +1,4 @@
+import { Transaction, EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const openPixelEditor: () => import("@atlaskit/editor-common/types").Command;
+export declare const closePixelEditor: () => import("@atlaskit/editor-common/types").Command;
+export declare const closePixelEditorAndSave: (saveTransform: (tr: Transaction, state: EditorState) => Transaction) => import("@atlaskit/editor-common/types").Command;

package/dist/types-ts4.5/pm-plugins/pixel-resizing/index.d.ts

@@ -0,0 +1,13 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
+declare const createCommand: <A = {
+    type: "openPixelEditor";
+} | {
+    type: "closePixelEditor";
+}>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => {
+    isPixelEditorOpen: boolean;
+};
+export declare const createPlugin: ({ dispatch }: PMPluginFactoryParams) => SafePlugin<{
+    isPixelEditorOpen: boolean;
+}>;
+export { createCommand, getPluginState };

package/dist/types-ts4.5/pm-plugins/pixel-resizing/reducer.d.ts

@@ -0,0 +1,12 @@
+type mediaPixelResizingState = {
+    isPixelEditorOpen: boolean;
+};
+type OpenPixelEditor = {
+    type: 'openPixelEditor';
+};
+type ClosePixelEditor = {
+    type: 'closePixelEditor';
+};
+type MediaPixelResizingAction = OpenPixelEditor | ClosePixelEditor;
+declare const _default: (state: mediaPixelResizingState, action: MediaPixelResizingAction) => mediaPixelResizingState;
+export default _default;

package/dist/types-ts4.5/pm-plugins/pixel-resizing/ui/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const PIXELENTRY_MIGRATION_BUTTON_TESTID = "pixel-entry-convert-pixels-btn";
+export declare const PIXEL_RESIZING_TOOLBAR_WIDTH = 240;
+export declare const PIXEL_VIEW_MODE_TOOLBAR_WIDTH = 204;

package/dist/types-ts4.5/pm-plugins/pixel-resizing/ui/index.d.ts

@@ -0,0 +1,21 @@
+import { jsx } from '@emotion/react';
+import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
+import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { MediaNextEditorPluginType } from '../../../mediaPluginType';
+import { MediaPluginState } from '../../../types';
+export type Props = {
+    editorView: EditorView;
+    selectedMediaSingleNode: ContentNodeWithPos;
+    pluginInjectionApi?: ExtractInjectionAPI<MediaNextEditorPluginType>;
+    intl: IntlShape;
+    pluginState: MediaPluginState;
+    hoverDecoration: HoverDecorationHandler | undefined;
+    isEditorFullWidthEnabled?: boolean;
+};
+export declare const PixelEntry: ({ editorView, selectedMediaSingleNode, pluginInjectionApi, intl, pluginState, hoverDecoration, isEditorFullWidthEnabled, }: Props) => jsx.JSX.Element | null;
+export declare const FullWidthDisplay: ({ intl: { formatMessage } }: {
+    intl: IntlShape;
+}) => jsx.JSX.Element;

package/dist/types-ts4.5/pm-plugins/pixel-resizing/ui/pixel-entry.d.ts

@@ -0,0 +1,4 @@
+import { jsx } from '@emotion/react';
+import type { PixelEntryComponentNextProps, PixelEntryProps } from './types';
+export declare const PixelEntryComponent: ({ width, mediaWidth, mediaHeight, onSubmit, minWidth, maxWidth, onChange, intl: { formatMessage }, showMigration, onMigrate, onCloseAndSave, isViewMode, }: PixelEntryProps) => jsx.JSX.Element;
+export declare const PixelEntryComponentNext: ({ maxWidth, formatMessage, handleFieldChange, computedWidth, computedHeight, handleCloseAndSave, isViewMode, }: PixelEntryComponentNextProps) => jsx.JSX.Element;

package/dist/types-ts4.5/{ui/PixelEntry → pm-plugins/pixel-resizing/ui}/types.d.ts

@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 import type { IntlShape } from 'react-intl-next';
 export type PixelEntryProps = {
     /**
@@ -46,6 +47,14 @@ export type PixelEntryProps = {
      * Migration handler called when the CTA button is clicked
      */
     onMigrate?: () => void;
+    /**
+     * Called when the Enter key is pressed or close button is clicked
+     */
+    onCloseAndSave?: (data: PixelEntryFormData) => void;
+    /**
+     *
+     */
+    isViewMode?: boolean;
 };
 export type PixelEntryFormValues = {
     inputWidth: number | '';
@@ -56,4 +65,13 @@ type PixelEntryFormData = {
     width: number;
     validation: PixelEntryValidation;
 };
+export type PixelEntryComponentNextProps = {
+    maxWidth: number;
+    computedWidth: number | '';
+    computedHeight: number | '';
+    handleFieldChange: (type: string) => (event: ChangeEvent<HTMLInputElement>) => void;
+    formatMessage: IntlShape['formatMessage'];
+    handleCloseAndSave: (data: PixelEntryFormValues) => void;
+    isViewMode?: boolean;
+};
 export {};

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

@@ -3,8 +3,8 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorContainerWidth as WidthPluginState } from '@atlaskit/editor-common/types';
 import type { ForceFocusSelector } from '@atlaskit/editor-plugin-floating-toolbar';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { PixelEntryValidation } from '../../pm-plugins/pixel-resizing/ui/types';
 import type { EventInput } from '../../pm-plugins/types';
-import type { PixelEntryValidation } from '../../ui/PixelEntry/types';
 export declare const DEFAULT_BORDER_COLOR = "#091e4224";
 export declare const DEFAULT_BORDER_SIZE = 2;
 export declare const getNodeType: (state: EditorState) => "mediaSingle" | "mediaInline";
@@ -14,5 +14,6 @@ export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: Editor
 export declare const removeInlineCard: Command;
 export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const setBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (attrs: Partial<BorderMarkAttributes>) => Command;
+export declare const updateMediaSingleWidthTr: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, state: EditorState, width: number, validation: PixelEntryValidation, inputMethod: EventInput, layout: RichMediaLayout) => import("prosemirror-state").Transaction | null;
 export declare const updateMediaSingleWidth: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (width: number, validation: PixelEntryValidation, inputMethod: EventInput, layout: RichMediaLayout) => Command;
 export declare const changeMediaSingleToMediaInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;

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

@@ -0,0 +1,4 @@
+import { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import { Props } from '../../pm-plugins/pixel-resizing/ui';
+import { MediaToolbarBaseConfig } from '../../types';
+export declare const getPixelResizingToolbar: (toolbarBaseConfig: MediaToolbarBaseConfig, { pluginInjectionApi, intl, pluginState, hoverDecoration, isEditorFullWidthEnabled, }: Omit<Props, 'editorView' | 'selectedMediaSingleNode'>) => FloatingToolbarConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "2.3.8",
+	"version": "2.3.9",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/analytics-namespaced-context": "^7.0.0",
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^21.1.0",
-		"@atlaskit/editor-common": "^102.8.0",
+		"@atlaskit/editor-common": "^102.11.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-annotation": "^2.1.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-floating-toolbar": "^3.2.0",
+		"@atlaskit/editor-plugin-floating-toolbar": "^3.3.0",
 		"@atlaskit/editor-plugin-focus": "^1.5.0",
 		"@atlaskit/editor-plugin-grid": "^2.0.0",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
@@ -66,10 +66,10 @@
 		"@atlaskit/media-ui": "^28.0.0",
 		"@atlaskit/media-viewer": "^52.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.0.0",
+		"@atlaskit/tmp-editor-statsig": "^4.1.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",

package/dist/cjs/ui/PixelEntry/constants.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PIXELENTRY_MIGRATION_BUTTON_TESTID = void 0;
-var PIXELENTRY_MIGRATION_BUTTON_TESTID = exports.PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';

package/dist/es2019/ui/PixelEntry/constants.js

@@ -1 +0,0 @@
-export const PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';

package/dist/esm/ui/PixelEntry/constants.js

@@ -1 +0,0 @@
-export var PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';

package/dist/types/ui/PixelEntry/constants.d.ts

@@ -1 +0,0 @@
-export declare const PIXELENTRY_MIGRATION_BUTTON_TESTID = "pixel-entry-convert-pixels-btn";

package/dist/types/ui/PixelEntry/index.d.ts

@@ -1,7 +0,0 @@
-import { jsx } from '@emotion/react';
-import type { IntlShape } from 'react-intl-next';
-import type { PixelEntryProps } from './types';
-export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, minWidth, maxWidth, onChange, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;
-export declare const FullWidthDisplay: ({ intl: { formatMessage } }: {
-    intl: IntlShape;
-}) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/PixelEntry/constants.d.ts

@@ -1 +0,0 @@
-export declare const PIXELENTRY_MIGRATION_BUTTON_TESTID = "pixel-entry-convert-pixels-btn";