@atlaskit/editor-core 187.14.4 → 187.14.8

package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -26,8 +26,9 @@ import { messages } from './resizable-media-single-messages';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
-import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines } from '@atlaskit/editor-common/guideline';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
+import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
+import memoizeOne from 'memoize-one';
 export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
 
 // TODO: Create new fixed image size event
@@ -51,12 +52,28 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, ResizableMediaSingleNext);
     _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "calcNewSize", function (newWidth, stop) {
+    _defineProperty(_assertThisInitialized(_this), "guidelines", []);
+    _defineProperty(_assertThisInitialized(_this), "getAllGuidelines", function () {
       var _this$props = _this.props,
-        layout = _this$props.layout,
-        state = _this$props.view.state,
-        containerWidth = _this$props.containerWidth,
+        view = _this$props.view,
         lineLength = _this$props.lineLength;
+      var defaultGuidelines = _this.getDefaultGuidelines();
+      // disable guidelines for nested media single node
+      var dynamicGuidelines = _this.isNestedNode() ? [] : generateDynamicGuidelines(view.state, lineLength, {
+        styles: {
+          lineStyle: 'dashed'
+        },
+        show: false
+      });
+      var guidelines = [].concat(_toConsumableArray(defaultGuidelines), _toConsumableArray(dynamicGuidelines));
+      return guidelines;
+    });
+    _defineProperty(_assertThisInitialized(_this), "calcNewSize", function (newWidth, stop) {
+      var _this$props2 = _this.props,
+        layout = _this$props2.layout,
+        state = _this$props2.view.state,
+        containerWidth = _this$props2.containerWidth,
+        lineLength = _this$props2.lineLength;
       var newPct = calcPctFromPx(newWidth, _this.props.lineLength) * 100;
       _this.setState({
         resizedPctWidth: newPct
@@ -95,10 +112,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return _this.insideInlineLike ? calcColumnsFromPx(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
     });
     _defineProperty(_assertThisInitialized(_this), "calcPxHeight", function (newWidth) {
-      var _this$props2 = _this.props,
-        _this$props2$width = _this$props2.width,
-        width = _this$props2$width === void 0 ? newWidth : _this$props2$width,
-        height = _this$props2.height;
+      var _this$props3 = _this.props,
+        _this$props3$width = _this$props3.width,
+        width = _this$props3$width === void 0 ? newWidth : _this$props3$width,
+        height = _this$props3.height;
       return Math.round(height / width * newWidth);
     });
     _defineProperty(_assertThisInitialized(_this), "saveWrapper", function (wrapper) {
@@ -119,6 +136,111 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
       return dispatch(tr);
     });
+    _defineProperty(_assertThisInitialized(_this), "calcMaxWidth", memoizeOne(function (contentWidth, containerWidth, fullWidthMode) {
+      if (_this.isNestedNode() || fullWidthMode) {
+        return contentWidth;
+      }
+      return calcMediaSingleMaxWidth(containerWidth);
+    }));
+    _defineProperty(_assertThisInitialized(_this), "updateActiveGuidelines", function () {
+      var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var guidelines = arguments.length > 1 ? arguments[1] : undefined;
+      var guidelineSnapsReference = arguments.length > 2 ? arguments[2] : undefined;
+      if (guidelineSnapsReference.snaps.x) {
+        var _findClosestSnap = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP),
+          gap = _findClosestSnap.gap,
+          activeGuidelineKeys = _findClosestSnap.keys;
+        _this.displayGuideline(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines));
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "roundPixelValue", function (value) {
+      return Math.round(value);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getHeightFromNewWidth", function (originalWidth, originalHeight, newWidth) {
+      return _this.roundPixelValue(originalHeight / originalWidth * newWidth);
+    });
+    _defineProperty(_assertThisInitialized(_this), "calculateSizeState", function (size, delta) {
+      var originalWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var originalHeight = arguments.length > 3 ? arguments[3] : undefined;
+      var onResizeStop = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+      var calculatedWidth = _this.roundPixelValue(size.width + delta.width);
+      var calculatedWidthWithLayout = _this.calcNewSize(calculatedWidth, onResizeStop);
+      var calculatedHeightWithLayout = _this.getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
+      return {
+        width: calculatedWidth,
+        height: calculatedHeightWithLayout,
+        calculatedWidthWithLayout: calculatedWidthWithLayout
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "selectCurrentMediaNode", function () {
+      // TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
+      if (typeof _this.props.getPos === 'function') {
+        var propPos = _this.props.getPos();
+        if (propPos !== undefined) {
+          setNodeSelection(_this.props.view, propPos);
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleResizeStart", function () {
+      _this.setState({
+        isResizing: true
+      });
+      _this.selectCurrentMediaNode();
+      _this.setIsResizing(true);
+      // re-calucate guidelines
+      _this.guidelines = _this.getAllGuidelines();
+      return 0;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleResize", function (size, delta) {
+      var _this$props4 = _this.props,
+        originalWidth = _this$props4.width,
+        originalHeight = _this$props4.height,
+        layout = _this$props4.layout,
+        updateSize = _this$props4.updateSize,
+        lineLength = _this$props4.lineLength;
+      var _this$calculateSizeSt = _this.calculateSizeState(size, delta, originalWidth, originalHeight),
+        width = _this$calculateSizeSt.width,
+        height = _this$calculateSizeSt.height,
+        calculatedWidthWithLayout = _this$calculateSizeSt.calculatedWidthWithLayout;
+      var guidelineSnaps = getGuidelineSnaps(_this.guidelines, lineLength, layout);
+      _this.updateActiveGuidelines(width, _this.guidelines, guidelineSnaps);
+      _this.setState({
+        size: {
+          width: width,
+          height: height
+        },
+        snaps: guidelineSnaps.snaps
+      });
+      if (calculatedWidthWithLayout.layout !== layout) {
+        updateSize(width, calculatedWidthWithLayout.layout);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleResizeStop", function (size, delta) {
+      var _this$props5 = _this.props,
+        originalWidth = _this$props5.width,
+        originalHeight = _this$props5.height,
+        updateSize = _this$props5.updateSize,
+        dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent,
+        nodeType = _this$props5.nodeType;
+      var _this$calculateSizeSt2 = _this.calculateSizeState(size, delta, originalWidth, originalHeight, true),
+        width = _this$calculateSizeSt2.width,
+        height = _this$calculateSizeSt2.height,
+        calculatedWidthWithLayout = _this$calculateSizeSt2.calculatedWidthWithLayout;
+      _this.setIsResizing(false);
+      _this.displayGuideline([]);
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, calculatedWidthWithLayout.width, calculatedWidthWithLayout.layout));
+      }
+      _this.setState({
+        isResizing: false,
+        size: {
+          width: width,
+          height: height
+        }
+      }, function () {
+        updateSize(width, calculatedWidthWithLayout.layout);
+      });
+    });
     var initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
     _this.state = {
       offsetLeft: calculateOffsetLeft(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
@@ -128,7 +250,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       size: {
         width: initialWidth,
         height: _this.calcPxHeight(initialWidth)
-      }
+      },
+      snaps: {}
     };
     return _this;
   }
@@ -142,15 +265,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   _createClass(ResizableMediaSingleNext, [{
     key: "calcInitialWidth",
     value: function calcInitialWidth() {
-      var _this$props3 = this.props,
-        origWidth = _this$props3.width,
-        contentWidth = _this$props3.lineLength,
-        containerWidth = _this$props3.containerWidth;
+      var _this$props6 = this.props,
+        origWidth = _this$props6.width,
+        contentWidth = _this$props6.lineLength,
+        containerWidth = _this$props6.containerWidth;
       return Math.max(Math.min(origWidth || DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || akEditorDefaultLayoutWidth), MEDIA_SINGLE_MIN_PIXEL_WIDTH);
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
+    value: function componentDidUpdate(prevProps) {
       var offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
       if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
         this.setState({
@@ -165,10 +288,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           resizedPctWidth: this.props.pctWidth
         });
       }
-      if (prevState.isResizing !== this.state.isResizing && this.state.isResizing) {
-        var guidelines = this.getDefaultGuidelines();
-        this.displayGuideline(guidelines);
-      }
       if (prevProps.mediaSingleWidth !== this.props.mediaSingleWidth && this.props.mediaSingleWidth) {
         // update size when lineLength becomes defined later
         // ensures extended experience renders legacy image with the same size as the legacy experience
@@ -192,78 +311,14 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getDefaultGuidelines",
     value: function getDefaultGuidelines() {
-      var _this$props4 = this.props,
-        lineLength = _this$props4.lineLength,
-        containerWidth = _this$props4.containerWidth,
-        fullWidthMode = _this$props4.fullWidthMode;
+      var _this$props7 = this.props,
+        lineLength = _this$props7.lineLength,
+        containerWidth = _this$props7.containerWidth,
+        fullWidthMode = _this$props7.fullWidthMode;
 
       // disable guidelines for nested media single node
       return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
     }
-
-    // Calculate width of media nodes for snaps based on dynamic guidelines
-    // TODO:  refactor this later, maybe use state to hold snaps array
-  }, {
-    key: "getSnaps",
-    value: function getSnaps() {
-      var _this$props5 = this.props,
-        view = _this$props5.view,
-        lineLength = _this$props5.lineLength;
-      var dom = view.dom;
-      var defaultGuidelines = this.getDefaultGuidelines();
-      // disable guidelines for nested media single node
-      var dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view.state, lineLength, {
-        styles: {
-          lineStyle: 'dashed'
-        },
-        show: false
-      });
-      var guidelines = [].concat(_toConsumableArray(defaultGuidelines), _toConsumableArray(dynamicGuidelines));
-      var mediaSingleSelector = 'div.mediaSingleView-content-wrap.ProseMirror-selectednode';
-      var _dom$getBoundingClien = dom.getBoundingClientRect(),
-        width = _dom$getBoundingClien.width;
-      var halfWidth = width / 2;
-      var selectedMedia = dom.querySelector(mediaSingleSelector);
-      if (selectedMedia) {
-        var pixelWidth = parseFloat(selectedMedia.getAttribute('width') || '') || 0;
-        var layout = selectedMedia.getAttribute('layout');
-        var snap = 0;
-        switch (layout) {
-          case 'align-start':
-          case 'wrap-left':
-            snap = pixelWidth - halfWidth;
-            break;
-          case 'align-end':
-          case 'wrap-right':
-            snap = width - pixelWidth - halfWidth;
-            break;
-          case 'center':
-          case 'wide':
-          case 'full-width':
-            snap = -pixelWidth / 2;
-            break;
-          // we ingnore full-width and wide
-          default:
-            snap = 0;
-        }
-        var snapWidths = getSnapWidth(guidelines, pixelWidth, snap, layout);
-        var snapToWidths = snapWidths.map(function (s) {
-          return s && s.width;
-        });
-
-        // update guidelines
-        if (this.state.isResizing) {
-          var _findClosestSnap = findClosestSnap(this.state.size.width, snapToWidths, snapWidths, MEDIA_SINGLE_HIGHLIGHT_GAP),
-            gap = _findClosestSnap.gap,
-            activeGuidelineKeys = _findClosestSnap.keys;
-          this.displayGuideline(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_HIGHLIGHT_GAP, activeGuidelineKeys, guidelines));
-        }
-        return snapToWidths.length > 0 ? {
-          x: snapToWidths
-        } : {};
-      }
-      return {};
-    }
   }, {
     key: "wrappedLayout",
     get: function get() {
@@ -404,15 +459,16 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props6 = this.props,
-        origWidth = _this$props6.width,
-        layout = _this$props6.layout,
-        pctWidth = _this$props6.pctWidth,
-        containerWidth = _this$props6.containerWidth,
-        fullWidthMode = _this$props6.fullWidthMode,
-        selected = _this$props6.selected,
-        children = _this$props6.children,
-        intl = _this$props6.intl;
+      var _this$props8 = this.props,
+        origWidth = _this$props8.width,
+        layout = _this$props8.layout,
+        pctWidth = _this$props8.pctWidth,
+        containerWidth = _this$props8.containerWidth,
+        fullWidthMode = _this$props8.fullWidthMode,
+        selected = _this$props8.selected,
+        children = _this$props8.children,
+        intl = _this$props8.intl,
+        lineLength = _this$props8.lineLength;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
         size = _this$state.size;
@@ -425,99 +481,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         }
       });
 
-      /**
-       * NEW REFACTOR
-       */
-      var roundPixelValue = function roundPixelValue(value) {
-        return Math.round(value);
-      };
-      var getHeightFromNewWidth = function getHeightFromNewWidth(originalWidth, originalHeight, newWidth) {
-        return roundPixelValue(originalHeight / originalWidth * newWidth);
-      };
-      var calculateSizeState = function calculateSizeState(size, delta) {
-        var originalWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-        var originalHeight = arguments.length > 3 ? arguments[3] : undefined;
-        var onResizeStop = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-        var calculatedWidth = roundPixelValue(size.width + delta.width);
-        var calculatedWidthWithLayout = _this2.calcNewSize(calculatedWidth, onResizeStop);
-        var calculatedHeightWithLayout = getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
-        return {
-          width: calculatedWidth,
-          height: calculatedHeightWithLayout,
-          calculatedWidthWithLayout: calculatedWidthWithLayout
-        };
-      };
-      var selectCurrentMediaNode = function selectCurrentMediaNode() {
-        if (!_this2.props.selected && typeof _this2.props.getPos === 'function') {
-          var propPos = _this2.props.getPos();
-          if (propPos !== undefined) {
-            setNodeSelection(_this2.props.view, propPos);
-          }
-        }
-      };
-      var handleResizeStart = function handleResizeStart() {
-        _this2.setState({
-          isResizing: true
-        });
-        selectCurrentMediaNode();
-        _this2.setIsResizing(true);
-
-        // TODO: Update once type updated from editor common resizer
-        return 0;
-      };
-      var handleResize = function handleResize(size, delta) {
-        var _this2$props = _this2.props,
-          originalWidth = _this2$props.width,
-          originalHeight = _this2$props.height,
-          layout = _this2$props.layout,
-          updateSize = _this2$props.updateSize;
-        var _calculateSizeState = calculateSizeState(size, delta, originalWidth, originalHeight),
-          width = _calculateSizeState.width,
-          height = _calculateSizeState.height,
-          calculatedWidthWithLayout = _calculateSizeState.calculatedWidthWithLayout;
-        _this2.setState({
-          size: {
-            width: width,
-            height: height
-          }
-        });
-        if (calculatedWidthWithLayout.layout !== layout) {
-          updateSize(width, calculatedWidthWithLayout.layout);
-        }
-
-        // TODO: Update once type updated from editor common resizer
-        return 0;
-      };
-      var handleResizeStop = function handleResizeStop(size, delta) {
-        var _this2$props2 = _this2.props,
-          originalWidth = _this2$props2.width,
-          originalHeight = _this2$props2.height,
-          updateSize = _this2$props2.updateSize,
-          dispatchAnalyticsEvent = _this2$props2.dispatchAnalyticsEvent,
-          nodeType = _this2$props2.nodeType;
-        var _calculateSizeState2 = calculateSizeState(size, delta, originalWidth, originalHeight, true),
-          width = _calculateSizeState2.width,
-          height = _calculateSizeState2.height,
-          calculatedWidthWithLayout = _calculateSizeState2.calculatedWidthWithLayout;
-        _this2.setIsResizing(false);
-        _this2.displayGuideline([]);
-        if (dispatchAnalyticsEvent) {
-          dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, calculatedWidthWithLayout.width, calculatedWidthWithLayout.layout));
-        }
-        _this2.setState({
-          isResizing: false,
-          size: {
-            width: width,
-            height: height
-          }
-        }, function () {
-          updateSize(width, calculatedWidthWithLayout.layout);
-        });
-
-        // TODO: Update once type updated from editor common resizer
-        return 0;
-      };
-
       // TODO: Clean up where this lives and how it gets generated
       var className = classnames(richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', this.props.className, {
         'not-resized': !pctWidth,
@@ -527,6 +490,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var resizerNextClassName = classnames(className, resizerStyles);
       var showSizeGuide = selected || isResizing;
       var label = layout === 'full-width' ? intl.formatMessage(messages.fullWidthImage) : "".concat(this.state.size.width, " x ").concat(this.state.size.height);
+      var maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
       return jsx("div", {
         ref: this.saveWrapper,
         css: wrapperStyle({
@@ -540,14 +504,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         })
       }, jsx(ResizerNext, {
         minWidth: MEDIA_SINGLE_MIN_PIXEL_WIDTH,
+        maxWidth: maxWidth,
         className: resizerNextClassName,
         snapGap: MEDIA_SINGLE_SNAP_GAP,
         enable: enable,
         width: size.width,
-        handleResizeStart: handleResizeStart,
-        handleResize: handleResize,
-        handleResizeStop: handleResizeStop,
-        snap: this.getSnaps(),
+        handleResizeStart: this.handleResizeStart,
+        handleResize: this.handleResize,
+        handleResizeStop: this.handleResizeStop,
+        snap: this.state.snaps,
         resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
         "data-testid": resizerNextTestId
       }, showSizeGuide && jsx(ResizeLabel, {

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.14.4";
+export var version = "187.14.8";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.14.4",
+	"version": "187.14.8",
 	"sideEffects": false
 }

package/dist/types/labs/next/presets/default.d.ts

@@ -344,11 +344,13 @@ export declare function createDefaultPreset(options: EditorPresetProps & Default
     }>>];
     actions: {
         prependToolbarButtons: import("@atlaskit/editor-plugin-hyperlink").PrependToolbarButtons;
-        showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
         hideLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").HideLinkToolbar;
         insertLink: import("@atlaskit/editor-plugin-hyperlink").InsertLink;
         updateLink: import("@atlaskit/editor-plugin-hyperlink").UpdateLink;
     };
+    commands: {
+        showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
+    };
     sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
 }> | undefined) => import("@atlaskit/editor-common/types").DefaultEditorPlugin<"hyperlink", {
     pluginConfiguration: HyperlinkPluginOptions | undefined;
@@ -389,11 +391,13 @@ export declare function createDefaultPreset(options: EditorPresetProps & Default
     }>>];
     actions: {
         prependToolbarButtons: import("@atlaskit/editor-plugin-hyperlink").PrependToolbarButtons;
-        showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
         hideLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").HideLinkToolbar;
         insertLink: import("@atlaskit/editor-plugin-hyperlink").InsertLink;
         updateLink: import("@atlaskit/editor-plugin-hyperlink").UpdateLink;
     };
+    commands: {
+        showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
+    };
     sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
 }>, ...import("@atlaskit/editor-common/types").AllEditorPresetPluginTypes[]]>;
 export declare function useDefaultPreset(props: EditorPresetProps & DefaultPresetPluginOptions): EditorPresetBuilder<[...string[], "hyperlink", "textFormatting", "width", "quickInsert", "typeAhead", "unsupportedContent", "editorDisabled", "submitEditor", "fakeTextCursor", "floatingToolbar", "selection", "codeBlock"], [(config: CodeBlockOptions, api?: import("@atlaskit/editor-common/types").PluginInjectionAPI<"codeBlock", {
@@ -703,11 +707,13 @@ export declare function useDefaultPreset(props: EditorPresetProps & DefaultPrese
     }>>];
     actions: {
         prependToolbarButtons: import("@atlaskit/editor-plugin-hyperlink").PrependToolbarButtons;
-        showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
         hideLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").HideLinkToolbar;
         insertLink: import("@atlaskit/editor-plugin-hyperlink").InsertLink;
         updateLink: import("@atlaskit/editor-plugin-hyperlink").UpdateLink;
     };
+    commands: {
+        showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
+    };
     sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
 }> | undefined) => import("@atlaskit/editor-common/types").DefaultEditorPlugin<"hyperlink", {
     pluginConfiguration: HyperlinkPluginOptions | undefined;
@@ -748,10 +754,12 @@ export declare function useDefaultPreset(props: EditorPresetProps & DefaultPrese
     }>>];
     actions: {
         prependToolbarButtons: import("@atlaskit/editor-plugin-hyperlink").PrependToolbarButtons;
-        showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
         hideLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").HideLinkToolbar;
         insertLink: import("@atlaskit/editor-plugin-hyperlink").InsertLink;
         updateLink: import("@atlaskit/editor-plugin-hyperlink").UpdateLink;
     };
+    commands: {
+        showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
+    };
     sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
 }>, ...import("@atlaskit/editor-common/types").AllEditorPresetPluginTypes[]]>[];

package/dist/types/plugins/media/nodeviews/mediaSingle.d.ts

@@ -41,6 +41,12 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
     onMediaSingleClicked: (event: MouseEvent) => void;
     render(): jsx.JSX.Element;
     private clickPlaceholder;
+    /**
+     * Get parent width for a nested media single node
+     * @param view Editor view
+     * @param pos node position
+     * @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
+     */
     private getLineLength;
 }
 declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps> {

package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -5,18 +5,21 @@ import { jsx } from '@emotion/react';
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { MediaClientConfig } from '@atlaskit/media-core';
 import type { Props } from './types';
-import type { Dimensions } from '@atlaskit/editor-common/resizer';
+import type { Dimensions, HandleResize, HandleResizeStart, Position, Snap } from '@atlaskit/editor-common/resizer';
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { GuidelineConfig, GuidelineSnapsReference } from '@atlaskit/editor-common/guideline';
 type State = {
     offsetLeft: number;
     isVideoFile: boolean;
     resizedPctWidth?: number;
     isResizing: boolean;
     size: Dimensions;
+    snaps: Snap;
 };
 export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
 type ResizableMediaSingleNextProps = Props & WrappedComponentProps;
 declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
+    private guidelines;
     constructor(props: ResizableMediaSingleNextProps);
     /**
      * Calculate media single node initial width if props.mediaSingleWidth is undefined
@@ -25,10 +28,10 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
      * @returns initial width in pixel
      */
     calcInitialWidth(): number;
-    componentDidUpdate(prevProps: Props, prevState: State): boolean;
+    componentDidUpdate(prevProps: Props): boolean;
     isNestedNode(): boolean;
     private getDefaultGuidelines;
-    private getSnaps;
+    private getAllGuidelines;
     get wrappedLayout(): boolean;
     componentDidMount(): Promise<void>;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
@@ -51,6 +54,22 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     private saveWrapper;
     private displayGuideline;
     private setIsResizing;
+    private calcMaxWidth;
+    updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
+    roundPixelValue: (value: number) => number;
+    getHeightFromNewWidth: (originalWidth: number, originalHeight: number, newWidth: number) => number;
+    calculateSizeState: (size: Position & Dimensions, delta: Dimensions, originalWidth: number | undefined, originalHeight: number, onResizeStop?: boolean) => {
+        width: number;
+        height: number;
+        calculatedWidthWithLayout: {
+            width: number | null;
+            layout: MediaSingleLayout;
+        };
+    };
+    selectCurrentMediaNode: () => void;
+    handleResizeStart: HandleResizeStart;
+    handleResize: HandleResize;
+    handleResizeStop: HandleResize;
     render(): jsx.JSX.Element;
 }
 export { ResizableMediaSingleNext as UnwrappedResizableMediaSingleNext };

package/dist/types-ts4.5/labs/next/presets/default.d.ts

@@ -413,11 +413,13 @@ export declare function createDefaultPreset(options: EditorPresetProps & Default
         ];
         actions: {
             prependToolbarButtons: import("@atlaskit/editor-plugin-hyperlink").PrependToolbarButtons;
-            showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
             hideLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").HideLinkToolbar;
             insertLink: import("@atlaskit/editor-plugin-hyperlink").InsertLink;
             updateLink: import("@atlaskit/editor-plugin-hyperlink").UpdateLink;
         };
+        commands: {
+            showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
+        };
         sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
     }> | undefined) => import("@atlaskit/editor-common/types").DefaultEditorPlugin<"hyperlink", {
         pluginConfiguration: HyperlinkPluginOptions | undefined;
@@ -465,11 +467,13 @@ export declare function createDefaultPreset(options: EditorPresetProps & Default
         ];
         actions: {
             prependToolbarButtons: import("@atlaskit/editor-plugin-hyperlink").PrependToolbarButtons;
-            showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
             hideLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").HideLinkToolbar;
             insertLink: import("@atlaskit/editor-plugin-hyperlink").InsertLink;
             updateLink: import("@atlaskit/editor-plugin-hyperlink").UpdateLink;
         };
+        commands: {
+            showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
+        };
         sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
     }>,
     ...import("@atlaskit/editor-common/types").AllEditorPresetPluginTypes[]
@@ -850,11 +854,13 @@ export declare function useDefaultPreset(props: EditorPresetProps & DefaultPrese
         ];
         actions: {
             prependToolbarButtons: import("@atlaskit/editor-plugin-hyperlink").PrependToolbarButtons;
-            showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
             hideLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").HideLinkToolbar;
             insertLink: import("@atlaskit/editor-plugin-hyperlink").InsertLink;
             updateLink: import("@atlaskit/editor-plugin-hyperlink").UpdateLink;
         };
+        commands: {
+            showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
+        };
         sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
     }> | undefined) => import("@atlaskit/editor-common/types").DefaultEditorPlugin<"hyperlink", {
         pluginConfiguration: HyperlinkPluginOptions | undefined;
@@ -902,11 +908,13 @@ export declare function useDefaultPreset(props: EditorPresetProps & DefaultPrese
         ];
         actions: {
             prependToolbarButtons: import("@atlaskit/editor-plugin-hyperlink").PrependToolbarButtons;
-            showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
             hideLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").HideLinkToolbar;
             insertLink: import("@atlaskit/editor-plugin-hyperlink").InsertLink;
             updateLink: import("@atlaskit/editor-plugin-hyperlink").UpdateLink;
         };
+        commands: {
+            showLinkToolbar: import("@atlaskit/editor-plugin-hyperlink").ShowLinkToolbar;
+        };
         sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
     }>,
     ...import("@atlaskit/editor-common/types").AllEditorPresetPluginTypes[]