@atlaskit/editor-core 187.38.3 → 187.38.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-core
 
+## 187.38.5
+
+### Patch Changes
+
+- [`d1bd1be0923`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d1bd1be0923) - [ux] ED-19794 updated media resize handle style
+- [`dfb663969a0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dfb663969a0) - ED-19820: Fix for table scroll when insert media node when extended-resize-experience is off
+- Updated dependencies
+
 ## 187.38.3
 
 ### Patch Changes

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

@@ -36,16 +36,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var resizerNextTestId = 'mediaSingle.resizerNext.testid';
 exports.resizerNextTestId = resizerNextTestId;
-var handleComponent = {
-  left: (0, _react2.jsx)("div", {
-    "data-testid": "richMedia-resize-handle-left-elem",
-    contentEditable: false
-  }),
-  right: (0, _react2.jsx)("div", {
-    "data-testid": "richMedia-resize-handle-right-elem",
-    contentEditable: false
-  })
-};
 var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ResizableMediaSingleNext, _React$Component);
   var _super = _createSuper(ResizableMediaSingleNext);
@@ -130,9 +120,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         height = _this$props3.height;
       return Math.round(height / width * newWidth);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveWrapper", function (wrapper) {
-      return _this.wrapper = wrapper;
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "displayGuideline", function (guidelines) {
       var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3;
       return (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.guideline) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.actions) === null || _this$props$pluginInj3 === void 0 ? void 0 : _this$props$pluginInj3.displayGuideline(_this.props.view)({
@@ -300,8 +287,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     });
     var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
     _this.state = {
-      offsetLeft: (0, _mediaSingle.calculateOffsetLeft)(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
-      // We default to true until we resolve the file type
       isVideoFile: true,
       isResizing: false,
       size: {
@@ -317,13 +302,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ResizableMediaSingleNext, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var offsetLeft = (0, _mediaSingle.calculateOffsetLeft)(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
-      if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
-        this.setState({
-          offsetLeft: offsetLeft
-        });
-      }
-
       // Handle undo, when the actual pctWidth changed,
       // we sync up with the internal state.
       if (prevProps.pctWidth !== this.props.pctWidth) {
@@ -545,32 +523,19 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
       var resizerNextClassName = (0, _classnames.default)(className, _styles.resizerStyles);
-      var maxWidth = !isResizing && this.isNestedNode() ?
+      var isNestedNode = this.isNestedNode();
+      var maxWidth = !isResizing && isNestedNode ?
       // set undefined to fall back to 100%
       undefined : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
       var minWidth = this.calcMinWidth(isVideoFile, lineLength);
-      var nestedHandleStyles = function nestedHandleStyles(isNestedNode) {
-        if (!isNestedNode) {
-          return;
-        }
-        return {
-          left: {
-            left: "calc(".concat("var(--ds-space-075, 0.375em)", " * -1)")
-          },
-          right: {
-            right: "calc(".concat("var(--ds-space-075, 0.375em)", " * -1)")
-          }
-        };
-      };
       return (0, _react2.jsx)("div", {
-        ref: this.saveWrapper,
         css: (0, _styled.wrapperStyle)({
           layout: layout,
           isResized: !!pctWidth,
           containerWidth: containerWidth || origWidth,
           fullWidthMode: fullWidthMode,
           mediaSingleWidth: this.state.size.width,
-          isNestedNode: this.isNestedNode(),
+          isNestedNode: isNestedNode,
           isExtendedResizeExperienceOn: true
         })
       }, (0, _react2.jsx)(_resizer.ResizerNext, {
@@ -585,10 +550,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         handleResizeStop: this.handleResizeStop,
         snap: this.state.snaps,
         resizeRatio: _utils2.nonWrappedLayouts.includes(layout) ? 2 : 1,
-        handleComponent: handleComponent,
         "data-testid": resizerNextTestId,
         isHandleVisible: selected,
-        handleStyles: nestedHandleStyles(this.isNestedNode())
+        handlePositioning: isNestedNode ? 'adjacent' : undefined,
+        handleHighlight: "full-height"
       }, children));
     }
   }]);

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/index.js

@@ -178,6 +178,17 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
     get: function get() {
       return _ui.wrappedLayouts.indexOf(this.props.layout) > -1;
     }
+
+    // check if is inside of a table
+  }, {
+    key: "isNestedInTable",
+    value: function isNestedInTable() {
+      var table = this.props.view.state.schema.nodes.table;
+      if (!this.$pos) {
+        return false;
+      }
+      return !!(0, _utils.findParentNodeOfTypeClosestToPos)(this.$pos, table);
+    }
   }, {
     key: "componentDidMount",
     value: function () {
@@ -365,6 +376,21 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
         offsetLeft: this.state.offsetLeft,
         wrappedLayout: this.wrappedLayout
       };
+      var nestedInTableHandleStyles = function nestedInTableHandleStyles(isNestedInTable) {
+        if (!isNestedInTable) {
+          return;
+        }
+        return {
+          left: {
+            left: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            paddingLeft: '0px'
+          },
+          right: {
+            right: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            paddingRight: '0px'
+          }
+        };
+      };
       return (0, _react2.jsx)("div", {
         ref: this.saveWrapper,
         css: (0, _styled.wrapperStyle)({
@@ -393,7 +419,8 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
           return (0, _react2.jsx)("div", {
             contentEditable: false
           });
-        }
+        },
+        handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
       }), children));
     }
   }]);

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.38.3";
+var version = "187.38.5";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

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

@@ -11,23 +11,13 @@ import { wrapperStyle } from './styled';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
+import { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
 import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey, getRelativeGuideSnaps, getRelativeGuidelines } from '@atlaskit/editor-common/guideline';
 import memoizeOne from 'memoize-one';
 import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
 import throttle from 'lodash/throttle';
 import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
-const handleComponent = {
-  left: jsx("div", {
-    "data-testid": "richMedia-resize-handle-left-elem",
-    contentEditable: false
-  }),
-  right: jsx("div", {
-    "data-testid": "richMedia-resize-handle-right-elem",
-    contentEditable: false
-  })
-};
 class ResizableMediaSingleNext extends React.Component {
   constructor(props) {
     super(props);
@@ -111,7 +101,6 @@ class ResizableMediaSingleNext extends React.Component {
       } = this.props;
       return Math.round(height / width * newWidth);
     });
-    _defineProperty(this, "saveWrapper", wrapper => this.wrapper = wrapper);
     _defineProperty(this, "displayGuideline", guidelines => {
       var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3;
       return (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.guideline) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.actions) === null || _this$props$pluginInj3 === void 0 ? void 0 : _this$props$pluginInj3.displayGuideline(this.props.view)({
@@ -281,8 +270,6 @@ class ResizableMediaSingleNext extends React.Component {
     });
     const initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
     this.state = {
-      offsetLeft: calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, undefined),
-      // We default to true until we resolve the file type
       isVideoFile: true,
       isResizing: false,
       size: {
@@ -295,13 +282,6 @@ class ResizableMediaSingleNext extends React.Component {
     };
   }
   componentDidUpdate(prevProps) {
-    const offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
-    if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
-      this.setState({
-        offsetLeft
-      });
-    }
-
     // Handle undo, when the actual pctWidth changed,
     // we sync up with the internal state.
     if (prevProps.pctWidth !== this.props.pctWidth) {
@@ -461,32 +441,19 @@ class ResizableMediaSingleNext extends React.Component {
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     });
     const resizerNextClassName = classnames(className, resizerStyles);
-    const maxWidth = !isResizing && this.isNestedNode() ?
+    const isNestedNode = this.isNestedNode();
+    const maxWidth = !isResizing && isNestedNode ?
     // set undefined to fall back to 100%
     undefined : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
     const minWidth = this.calcMinWidth(isVideoFile, lineLength);
-    const nestedHandleStyles = isNestedNode => {
-      if (!isNestedNode) {
-        return;
-      }
-      return {
-        left: {
-          left: `calc(${"var(--ds-space-075, 0.375em)"} * -1)`
-        },
-        right: {
-          right: `calc(${"var(--ds-space-075, 0.375em)"} * -1)`
-        }
-      };
-    };
     return jsx("div", {
-      ref: this.saveWrapper,
       css: wrapperStyle({
         layout,
         isResized: !!pctWidth,
         containerWidth: containerWidth || origWidth,
         fullWidthMode,
         mediaSingleWidth: this.state.size.width,
-        isNestedNode: this.isNestedNode(),
+        isNestedNode,
         isExtendedResizeExperienceOn: true
       })
     }, jsx(ResizerNext, {
@@ -501,10 +468,10 @@ class ResizableMediaSingleNext extends React.Component {
       handleResizeStop: this.handleResizeStop,
       snap: this.state.snaps,
       resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
-      handleComponent: handleComponent,
       "data-testid": resizerNextTestId,
       isHandleVisible: selected,
-      handleStyles: nestedHandleStyles(this.isNestedNode())
+      handlePositioning: isNestedNode ? 'adjacent' : undefined,
+      handleHighlight: "full-height"
     }, children));
   }
 }

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/index.js

@@ -160,6 +160,17 @@ export default class ResizableMediaSingle extends React.Component {
   get wrappedLayout() {
     return wrappedLayouts.indexOf(this.props.layout) > -1;
   }
+
+  // check if is inside of a table
+  isNestedInTable() {
+    const {
+      table
+    } = this.props.view.state.schema.nodes;
+    if (!this.$pos) {
+      return false;
+    }
+    return !!findParentNodeOfTypeClosestToPos(this.$pos, table);
+  }
   async componentDidMount() {
     const {
       viewMediaClientConfig
@@ -295,6 +306,21 @@ export default class ResizableMediaSingle extends React.Component {
       offsetLeft: this.state.offsetLeft,
       wrappedLayout: this.wrappedLayout
     };
+    const nestedInTableHandleStyles = isNestedInTable => {
+      if (!isNestedInTable) {
+        return;
+      }
+      return {
+        left: {
+          left: `calc(${"var(--ds-space-025, 0.125em)"} * -0.5)`,
+          paddingLeft: '0px'
+        },
+        right: {
+          right: `calc(${"var(--ds-space-025, 0.125em)"} * -0.5)`,
+          paddingRight: '0px'
+        }
+      };
+    };
     return jsx("div", {
       ref: this.saveWrapper,
       css: wrapperStyle({
@@ -321,7 +347,8 @@ export default class ResizableMediaSingle extends React.Component {
       ,
       handleComponentFunc: () => jsx("div", {
         contentEditable: false
-      })
+      }),
+      handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
     }), children));
   }
 }

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.38.3";
+export const version = "187.38.5";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

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

@@ -22,23 +22,13 @@ import { wrapperStyle } from './styled';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
+import { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
 import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey, getRelativeGuideSnaps, getRelativeGuidelines } from '@atlaskit/editor-common/guideline';
 import memoizeOne from 'memoize-one';
 import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
 import throttle from 'lodash/throttle';
 import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
-var handleComponent = {
-  left: jsx("div", {
-    "data-testid": "richMedia-resize-handle-left-elem",
-    contentEditable: false
-  }),
-  right: jsx("div", {
-    "data-testid": "richMedia-resize-handle-right-elem",
-    contentEditable: false
-  })
-};
 var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   _inherits(ResizableMediaSingleNext, _React$Component);
   var _super = _createSuper(ResizableMediaSingleNext);
@@ -123,9 +113,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         height = _this$props3.height;
       return Math.round(height / width * newWidth);
     });
-    _defineProperty(_assertThisInitialized(_this), "saveWrapper", function (wrapper) {
-      return _this.wrapper = wrapper;
-    });
     _defineProperty(_assertThisInitialized(_this), "displayGuideline", function (guidelines) {
       var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3;
       return (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.guideline) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.actions) === null || _this$props$pluginInj3 === void 0 ? void 0 : _this$props$pluginInj3.displayGuideline(_this.props.view)({
@@ -293,8 +280,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     });
     var initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
     _this.state = {
-      offsetLeft: calculateOffsetLeft(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
-      // We default to true until we resolve the file type
       isVideoFile: true,
       isResizing: false,
       size: {
@@ -310,13 +295,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   _createClass(ResizableMediaSingleNext, [{
     key: "componentDidUpdate",
     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({
-          offsetLeft: offsetLeft
-        });
-      }
-
       // Handle undo, when the actual pctWidth changed,
       // we sync up with the internal state.
       if (prevProps.pctWidth !== this.props.pctWidth) {
@@ -538,32 +516,19 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
       var resizerNextClassName = classnames(className, resizerStyles);
-      var maxWidth = !isResizing && this.isNestedNode() ?
+      var isNestedNode = this.isNestedNode();
+      var maxWidth = !isResizing && isNestedNode ?
       // set undefined to fall back to 100%
       undefined : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
       var minWidth = this.calcMinWidth(isVideoFile, lineLength);
-      var nestedHandleStyles = function nestedHandleStyles(isNestedNode) {
-        if (!isNestedNode) {
-          return;
-        }
-        return {
-          left: {
-            left: "calc(".concat("var(--ds-space-075, 0.375em)", " * -1)")
-          },
-          right: {
-            right: "calc(".concat("var(--ds-space-075, 0.375em)", " * -1)")
-          }
-        };
-      };
       return jsx("div", {
-        ref: this.saveWrapper,
         css: wrapperStyle({
           layout: layout,
           isResized: !!pctWidth,
           containerWidth: containerWidth || origWidth,
           fullWidthMode: fullWidthMode,
           mediaSingleWidth: this.state.size.width,
-          isNestedNode: this.isNestedNode(),
+          isNestedNode: isNestedNode,
           isExtendedResizeExperienceOn: true
         })
       }, jsx(ResizerNext, {
@@ -578,10 +543,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         handleResizeStop: this.handleResizeStop,
         snap: this.state.snaps,
         resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
-        handleComponent: handleComponent,
         "data-testid": resizerNextTestId,
         isHandleVisible: selected,
-        handleStyles: nestedHandleStyles(this.isNestedNode())
+        handlePositioning: isNestedNode ? 'adjacent' : undefined,
+        handleHighlight: "full-height"
       }, children));
     }
   }]);

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

@@ -172,6 +172,17 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
     get: function get() {
       return wrappedLayouts.indexOf(this.props.layout) > -1;
     }
+
+    // check if is inside of a table
+  }, {
+    key: "isNestedInTable",
+    value: function isNestedInTable() {
+      var table = this.props.view.state.schema.nodes.table;
+      if (!this.$pos) {
+        return false;
+      }
+      return !!findParentNodeOfTypeClosestToPos(this.$pos, table);
+    }
   }, {
     key: "componentDidMount",
     value: function () {
@@ -359,6 +370,21 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
         offsetLeft: this.state.offsetLeft,
         wrappedLayout: this.wrappedLayout
       };
+      var nestedInTableHandleStyles = function nestedInTableHandleStyles(isNestedInTable) {
+        if (!isNestedInTable) {
+          return;
+        }
+        return {
+          left: {
+            left: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            paddingLeft: '0px'
+          },
+          right: {
+            right: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            paddingRight: '0px'
+          }
+        };
+      };
       return jsx("div", {
         ref: this.saveWrapper,
         css: wrapperStyle({
@@ -387,7 +413,8 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
           return jsx("div", {
             contentEditable: false
           });
-        }
+        },
+        handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
       }), children));
     }
   }]);

package/dist/esm/version-wrapper.js

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

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

@@ -7,7 +7,6 @@ import type { Props } from './types';
 import type { Dimensions, HandleResize, HandleResizeStart, Position, Snap } from '@atlaskit/editor-common/resizer';
 import type { GuidelineConfig, RelativeGuides, GuidelineSnapsReference } from '@atlaskit/editor-common/guideline';
 type State = {
-    offsetLeft: number;
     isVideoFile: boolean;
     resizedPctWidth?: number;
     isResizing: boolean;
@@ -16,11 +15,10 @@ type State = {
     relativeGuides: RelativeGuides;
     guidelines: GuidelineConfig[];
 };
-export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
 type ResizableMediaSingleNextProps = Props;
+export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
 declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
     private lastSnappedGuidelineKeys;
-    private wrapper?;
     constructor(props: ResizableMediaSingleNextProps);
     componentDidUpdate(prevProps: Props): boolean;
     componentDidMount(): Promise<void>;
@@ -41,7 +39,6 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     };
     calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number, fullWidthMode?: boolean, isNestedNode?: boolean) => 'center' | 'wide' | 'full-width';
     calcPxHeight: (newWidth: number) => number;
-    private saveWrapper;
     private displayGuideline;
     private setIsResizing;
     private updateSizeInPluginState;

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

@@ -14,6 +14,7 @@ export default class ResizableMediaSingle extends React.Component<Props, State>
     componentDidUpdate(prevProps: Props): boolean;
     private displayGrid;
     get wrappedLayout(): boolean;
+    isNestedInTable(): boolean;
     componentDidMount(): Promise<void>;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;

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

@@ -7,7 +7,6 @@ import type { Props } from './types';
 import type { Dimensions, HandleResize, HandleResizeStart, Position, Snap } from '@atlaskit/editor-common/resizer';
 import type { GuidelineConfig, RelativeGuides, GuidelineSnapsReference } from '@atlaskit/editor-common/guideline';
 type State = {
-    offsetLeft: number;
     isVideoFile: boolean;
     resizedPctWidth?: number;
     isResizing: boolean;
@@ -16,11 +15,10 @@ type State = {
     relativeGuides: RelativeGuides;
     guidelines: GuidelineConfig[];
 };
-export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
 type ResizableMediaSingleNextProps = Props;
+export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
 declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
     private lastSnappedGuidelineKeys;
-    private wrapper?;
     constructor(props: ResizableMediaSingleNextProps);
     componentDidUpdate(prevProps: Props): boolean;
     componentDidMount(): Promise<void>;
@@ -41,7 +39,6 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     };
     calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number, fullWidthMode?: boolean, isNestedNode?: boolean) => 'center' | 'wide' | 'full-width';
     calcPxHeight: (newWidth: number) => number;
-    private saveWrapper;
     private displayGuideline;
     private setIsResizing;
     private updateSizeInPluginState;

package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/index.d.ts

@@ -14,6 +14,7 @@ export default class ResizableMediaSingle extends React.Component<Props, State>
     componentDidUpdate(prevProps: Props): boolean;
     private displayGrid;
     get wrappedLayout(): boolean;
+    isNestedInTable(): boolean;
     componentDidMount(): Promise<void>;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.38.3",
+  "version": "187.38.5",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -49,12 +49,12 @@
     "@atlaskit/analytics-next-stable-react-context": "1.0.1",
     "@atlaskit/avatar": "^21.3.0",
     "@atlaskit/avatar-group": "^9.4.0",
-    "@atlaskit/button": "^16.9.0",
+    "@atlaskit/button": "^16.10.0",
     "@atlaskit/calendar": "^13.3.0",
     "@atlaskit/checkbox": "^12.6.0",
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/date": "^0.10.0",
-    "@atlaskit/datetime-picker": "^12.8.0",
+    "@atlaskit/datetime-picker": "^12.9.0",
     "@atlaskit/editor-common": "^74.56.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-markdown-transformer": "^5.2.5",
@@ -86,7 +86,7 @@
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.6.0",
     "@atlaskit/editor-tables": "^2.3.0",
-    "@atlaskit/emoji": "^67.4.0",
+    "@atlaskit/emoji": "^67.5.0",
     "@atlaskit/empty-state": "^7.6.0",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/icon": "^21.12.0",
@@ -108,7 +108,7 @@
     "@atlaskit/radio": "^5.6.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/select": "^16.5.0",
-    "@atlaskit/smart-card": "^26.20.0",
+    "@atlaskit/smart-card": "^26.21.0",
     "@atlaskit/smart-user-picker": "^6.3.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/status": "^1.3.0",