@atlaskit/editor-core 187.8.11 → 187.9.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-core
 
+## 187.9.0
+
+### Minor Changes
+
+- [`936c30f8dc9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/936c30f8dc9) - support new image resize experience under feature flag
+
+### Patch Changes
+
+- Updated dependencies
+
+## 187.8.13
+
+### Patch Changes
+
+- [`0756bf2b120`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0756bf2b120) - [ux] ED-18780 Add first element to page when pressing enter on Insert Menu
+
 ## 187.8.11
 
 ### Patch Changes

package/dist/cjs/plugins/floating-toolbar/index.js

@@ -334,9 +334,7 @@ function floatingToolbarPluginFactory(options) {
     return relevantConfig;
   };
   var apply = function apply(tr, pluginState) {
-    var newPluginState = {
-      getConfigWithNodeInfo: getConfigWithNodeInfo
-    };
+    var newPluginState = _objectSpread({}, pluginState);
     dispatch(pluginKey, newPluginState);
     return newPluginState;
   };

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ReactMediaSingleNode = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -24,6 +23,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodes = require("../../../utils/nodes");
 var _utils2 = require("../../../utils");
+var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 var _main = require("../pm-plugins/main");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
@@ -38,6 +38,8 @@ var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlacehold
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _captions = require("../commands/captions");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -208,7 +210,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);
       /**
@@ -320,12 +323,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') {
@@ -352,16 +362,29 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         width = _ui.DEFAULT_IMAGE_WIDTH;
         height = _ui.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 && (0, _mediaSingle.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
@@ -373,12 +396,10 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           canResize = canResize && !disabledNode;
         }
       }
-      var lineLength = this.getLineLength(view, getPos()) || this.props.lineLength;
-      var isSelected = selected();
       var shouldShowPlaceholder = (0, _mediaCommon2.getMediaFeatureFlag)('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof _state.NodeSelection;
       var MediaChildren = (0, _react.jsx)("figure", {
         ref: this.mediaSingleWrapperRef,
-        css: _styles.figureWrapper,
+        css: [_styles.figureWrapper],
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
       }, (0, _react.jsx)("div", {
@@ -387,18 +408,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
-      return canResize ? (0, _react.jsx)(_ResizableMediaSingle.default, (0, _extends2.default)({}, 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) : (0, _react.jsx)(_ui.MediaSingle, mediaSingleProps, MediaChildren);
+      return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react.jsx)(_ResizableMediaSingleNext.default, ResizableMediaSingleProps, MediaChildren) : (0, _react.jsx)(_ResizableMediaSingle.default, ResizableMediaSingleProps, MediaChildren) : (0, _react.jsx)(_ui.MediaSingle, mediaSingleProps, MediaChildren);
     }
   }]);
   return MediaSingleNode;

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

@@ -25,6 +25,7 @@ var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _mediaUi = require("@atlaskit/media-ui");
 var _messages2 = require("@atlaskit/editor-common/messages");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _filePreviewItem = require("./filePreviewItem");
 var _utils2 = require("./utils");
 var _commands = require("./commands");
@@ -232,7 +233,20 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   }
   if (allowAdvancedToolBarOptions) {
     var _pluginInjectionApi$d;
-    var layoutButtons = (0, _card.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 ((0, _platformFeatureFlags.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 = (0, _utils2.getSelectedMediaSingle)(state);
+      if (selectedNode && contentWidth) {
+        var width = selectedNode.node.attrs.width;
+        if (width >= contentWidth) {
+          isChangingLayoutDisabled = true;
+        }
+      }
+    }
+    var layoutButtons = (0, _card.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((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
     if (layoutButtons.length) {
       toolbarButtons.push({
@@ -334,7 +348,7 @@ var floatingToolbar = function floatingToolbar(state, intl) {
   var mediaLinkingState = (0, _linking2.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/cjs/plugins/media/toolbar/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeMediaGroupNode = exports.getSelectedMediaContainerNodeAttrs = exports.downloadMedia = void 0;
+exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.downloadMedia = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _mediaClient = require("@atlaskit/media-client");
@@ -68,4 +68,9 @@ var removeMediaGroupNode = function removeMediaGroupNode(state) {
   }
   return tr;
 };
-exports.removeMediaGroupNode = removeMediaGroupNode;
+exports.removeMediaGroupNode = removeMediaGroupNode;
+var getSelectedMediaSingle = function getSelectedMediaSingle(state) {
+  var mediaSingle = state.schema.nodes.mediaSingle;
+  return (0, _utils.findSelectedNodeOfType)(mediaSingle)(state.selection) || (0, _utils.findParentNodeOfType)(mediaSingle)(state.selection);
+};
+exports.getSelectedMediaSingle = getSelectedMediaSingle;