@atlaskit/editor-core 187.8.13 → 187.9.0

package/dist/esm/plugins/media/nodeviews/mediaSingle.js

@@ -1,5 +1,4 @@
 import _get from "@babel/runtime/helpers/get";
-import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -21,6 +20,7 @@ import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaski
 import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
+import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
@@ -35,6 +35,8 @@ import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { getMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var MediaSingleNode = /*#__PURE__*/function (_Component) {
   _inherits(MediaSingleNode, _Component);
   var _super = _createSuper(MediaSingleNode);
@@ -199,7 +201,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, _this.props.node.attrs), {}, {
         layout: layout,
-        width: width
+        width: width,
+        widthType: 'pixel'
       }));
       tr.setMeta('scrollIntoView', false);
       /**
@@ -311,12 +314,19 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         mediaOptions = _this$props2.mediaOptions,
         fullWidthMode = _this$props2.fullWidthMode,
         state = _this$props2.view.state,
-        view = _this$props2.view;
+        view = _this$props2.view,
+        pluginInjectionApi = _this$props2.pluginInjectionApi,
+        containerWidth = _this$props2.width,
+        lineLength = _this$props2.lineLength,
+        dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent;
       var _ref4 = node.attrs,
         layout = _ref4.layout,
-        mediaSingleWidth = _ref4.width;
+        widthType = _ref4.widthType,
+        mediaSingleWidthAttribute = _ref4.width;
       var childNode = node.firstChild;
       var attrs = childNode.attrs;
+
+      // original width and height of child media node (scaled)
       var width = attrs.width,
         height = attrs.height;
       if (attrs.type === 'external') {
@@ -343,16 +353,29 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         width = DEFAULT_IMAGE_WIDTH;
         height = DEFAULT_IMAGE_HEIGHT;
       }
+      var isSelected = selected();
       var mediaSingleProps = {
         layout: layout,
         width: width,
         height: height,
-        containerWidth: this.props.width,
-        lineLength: this.props.lineLength,
-        pctWidth: mediaSingleWidth,
+        containerWidth: containerWidth,
+        lineLength: this.getLineLength(view, getPos()) || lineLength,
+        pctWidth: mediaSingleWidthAttribute,
         fullWidthMode: fullWidthMode,
-        hasFallbackContainer: false
+        hasFallbackContainer: false,
+        mediaSingleWidth: mediaSingleWidthAttribute && getMediaSinglePixelWidth(mediaSingleWidthAttribute, lineLength, widthType)
       };
+      var ResizableMediaSingleProps = _objectSpread({
+        view: view,
+        getPos: getPos,
+        updateSize: this.updateSize,
+        gridSize: 12,
+        viewMediaClientConfig: this.state.viewMediaClientConfig,
+        allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+        selected: isSelected,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        pluginInjectionApi: pluginInjectionApi
+      }, mediaSingleProps);
       var canResize = !!this.props.mediaOptions.allowResizing;
       if (!this.props.mediaOptions.allowResizingInTables) {
         // If resizing not allowed in tables, check parents for tables
@@ -364,12 +387,10 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           canResize = canResize && !disabledNode;
         }
       }
-      var lineLength = this.getLineLength(view, getPos()) || this.props.lineLength;
-      var isSelected = selected();
       var shouldShowPlaceholder = getMediaFeatureFlag('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
       var MediaChildren = jsx("figure", {
         ref: this.mediaSingleWrapperRef,
-        css: figureWrapper,
+        css: [figureWrapper],
         className: MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
       }, jsx("div", {
@@ -378,18 +399,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
-      return canResize ? jsx(ResizableMediaSingle, _extends({}, mediaSingleProps, {
-        lineLength: lineLength,
-        view: this.props.view,
-        getPos: getPos,
-        updateSize: this.updateSize,
-        gridSize: 12,
-        viewMediaClientConfig: this.state.viewMediaClientConfig,
-        allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
-        selected: isSelected,
-        dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent,
-        pluginInjectionApi: this.props.pluginInjectionApi
-      }), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
+      return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle, ResizableMediaSingleProps, MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
     }
   }]);
   return MediaSingleNode;

package/dist/esm/plugins/media/toolbar/index.js

@@ -20,8 +20,9 @@ import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/media-ui';
 import { cardMessages } from '@atlaskit/editor-common/messages';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FilePreviewItem } from './filePreviewItem';
-import { downloadMedia, removeMediaGroupNode } from './utils';
+import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
 import ImageBorderItem from '../ui/ImageBorder';
@@ -225,7 +226,20 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   }
   if (allowAdvancedToolBarOptions) {
     var _pluginInjectionApi$d;
-    var layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions, allowResizing, allowResizingInTables);
+    var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width;
+    var isChangingLayoutDisabled = false;
+    if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
+      var _widthPlugin$sharedSt;
+      var contentWidth = widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength;
+      var selectedNode = getSelectedMediaSingle(state);
+      if (selectedNode && contentWidth) {
+        var width = selectedNode.node.attrs.width;
+        if (width >= contentWidth) {
+          isChangingLayoutDisabled = true;
+        }
+      }
+    }
+    var layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
     toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutButtons));
     if (layoutButtons.length) {
       toolbarButtons.push({
@@ -327,7 +341,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
   var mediaLinkingState = getMediaLinkingState(state);
   var _ref2 = (_pluginInjectionApi$d4 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d4 !== void 0 ? _pluginInjectionApi$d4 : {},
     hoverDecoration = _ref2.hoverDecoration;
-  if (!mediaPluginState) {
+  if (!mediaPluginState || mediaPluginState.isResizing) {
     return;
   }
   var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];

package/dist/esm/plugins/media/toolbar/utils.js

@@ -1,7 +1,7 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { getMediaClient } from '@atlaskit/media-client';
-import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 export var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
   var selectedNode = mediaPluginState.selectedMediaContainerNode();
   if (selectedNode && selectedNode.attrs) {
@@ -58,4 +58,8 @@ export var removeMediaGroupNode = function removeMediaGroupNode(state) {
     tr = removeSelectedNode(tr);
   }
   return tr;
+};
+export var getSelectedMediaSingle = function getSelectedMediaSingle(state) {
+  var mediaSingle = state.schema.nodes.mediaSingle;
+  return findSelectedNodeOfType(mediaSingle)(state.selection) || findParentNodeOfType(mediaSingle)(state.selection);
 };