@atlaskit/renderer 108.11.15 → 108.11.17

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/renderer
 
+## 108.11.17
+
+### Patch Changes
+
+- [`e6122bf1c9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6122bf1c9a) - MEX-2481 revert and re-introduce a new fix for media border gap issue
+- Updated dependencies
+
+## 108.11.16
+
+### Patch Changes
+
+- [`b821b2d7ac1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b821b2d7ac1) - Fix issue where tables with no column widths would render at their layout value when nested inside another node, render tables with no column widths in this scenario so they scale with the parent node.
+
 ## 108.11.15
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -340,11 +340,13 @@ var ReactSerializer = /*#__PURE__*/function () {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       // TODO: https://product-fabric.atlassian.net/browse/CEMS-1048
       var stickyHeaders = !(0, _rendererNode.insideBreakoutLayout)(path) ? this.stickyHeaders : undefined;
+      var isInsideOfBlockNode = (0, _rendererNode.insideBlockNode)(path, node.type.schema);
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         allowColumnSorting: this.allowColumnSorting,
         columnWidths: (0, _utils.calcTableColumnWidths)(node),
         tableNode: node,
-        stickyHeaders: stickyHeaders
+        stickyHeaders: stickyHeaders,
+        isInsideOfBlockNode: isInsideOfBlockNode
       });
     }
   }, {
@@ -360,21 +362,8 @@ var ReactSerializer = /*#__PURE__*/function () {
     value: function getMediaSingleProps(node) {
       var _this5 = this;
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      var _node$type$schema = node.type.schema,
-        _node$type$schema$nod = _node$type$schema.nodes,
-        expand = _node$type$schema$nod.expand,
-        nestedExpand = _node$type$schema$nod.nestedExpand,
-        layoutColumn = _node$type$schema$nod.layoutColumn,
-        link = _node$type$schema.marks.link;
-      var blockNodeNames = [expand, nestedExpand, layoutColumn].filter(function (node) {
-        return Boolean(node);
-      }) // Check if the node exist first
-      .map(function (node) {
-        return node.name;
-      });
-      var isInsideOfBlockNode = path && path.some(function (n) {
-        return n.type && blockNodeNames.indexOf(n.type.name) > -1;
-      });
+      var link = node.type.schema.marks.link;
+      var isInsideOfBlockNode = (0, _rendererNode.insideBlockNode)(path, node.type.schema);
       var isLinkMark = function isLinkMark(mark) {
         return mark.type === link;
       };
@@ -429,19 +418,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     key: "getEmbedCardProps",
     value: function getEmbedCardProps(node) {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      var _node$type$schema$nod2 = node.type.schema.nodes,
-        expand = _node$type$schema$nod2.expand,
-        nestedExpand = _node$type$schema$nod2.nestedExpand,
-        layoutColumn = _node$type$schema$nod2.layoutColumn;
-      var blockNodeNames = [expand, nestedExpand, layoutColumn].filter(function (node) {
-        return Boolean(node);
-      }) // Check if the node exist first
-      .map(function (node) {
-        return node.name;
-      });
-      var isInsideOfBlockNode = path && path.some(function (n) {
-        return n.type && blockNodeNames.indexOf(n.type.name) > -1;
-      });
+      var isInsideOfBlockNode = (0, _rendererNode.insideBlockNode)(path, node.type.schema);
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         isInsideOfBlockNode: isInsideOfBlockNode
       });

package/dist/cjs/react/nodes/media/index.js

@@ -64,7 +64,6 @@ var Media = /*#__PURE__*/function (_PureComponent) {
           border: !!borderMark
         })
       }, (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
-        expandByPixel: borderMark && _ui.IMAGE_AND_BORDER_ADJUSTMENT,
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -80,14 +79,16 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         "data-mark-type": "border",
         "data-color": borderColor,
         "data-size": borderWidth,
-        css: (0, _styles.borderStyle)(!!linkHref, paletteColorValue, borderWidth)
-      }, mediaComponent) : mediaComponent;
+        css: (0, _styles.borderStyle)(paletteColorValue, borderWidth)
+      }, (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
+        borderColor: borderColor
+      }), mediaComponent) : mediaComponent;
       return linkHref ? (0, _react2.jsx)("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: _this.handleMediaLinkClick,
         "data-block-link": linkHref,
-        css: (0, _styles.linkStyle)(!!borderMark)
+        css: _styles.linkStyle
       }, mediaComponentWithBorder) : mediaComponentWithBorder;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMediaLinkClick", function (event) {

package/dist/cjs/react/nodes/media/styles.js

@@ -7,13 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.linkStyle = exports.borderStyle = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _ui = require("@atlaskit/editor-common/ui");
 var _templateObject, _templateObject2;
-var linkStyle = function linkStyle(hasBorderMark) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: ", " !important;\n  height: ", " !important;\n"])), hasBorderMark ? "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)") : '100%', hasBorderMark ? "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)") : '100%');
-};
+var linkStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100% !important;\n  height: 100% !important;\n"])));
 exports.linkStyle = linkStyle;
-var borderStyle = function borderStyle(hasLinkMark, color, width) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", " !important;\n  height: ", " !important;\n  border-color: ", ";\n  border-width: ", "px;\n  border-style: solid;\n  border-radius: ", "px;\n"])), hasLinkMark ? '100%' : "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)"), hasLinkMark ? '100%' : "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)"), color, width, width * 2);
+var borderStyle = function borderStyle(color, width) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100% !important;\n  height: 100% !important;\n  border-radius: ", "px;\n  box-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
 };
 exports.borderStyle = borderStyle;

package/dist/cjs/react/nodes/table/colgroup.js

@@ -60,7 +60,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     isNumberColumnEnabled = props.isNumberColumnEnabled,
     renderWidth = props.renderWidth,
     tableNode = props.tableNode,
-    rendererAppearance = props.rendererAppearance;
+    rendererAppearance = props.rendererAppearance,
+    isInsideOfBlockNode = props.isInsideOfBlockNode;
   if (!columnWidths) {
     return [];
   }
@@ -73,12 +74,12 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   } else {
     tableContainerWidth = getTableLayoutWidth(layout);
   }
-  if ((0, _table.isTableResizingEnabled)(rendererAppearance) && !tableResized) {
+  if ((0, _table.isTableResizingEnabled)(rendererAppearance) && !isInsideOfBlockNode && !tableResized) {
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx')) {
       // for tables with no column widths defined, assume that the real table width
       // is defined by node.attrs.width
-      var _tableWidth2 = isNumberColumnEnabled ? tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableContainerWidth;
-      var defaultColumnWidth = Math.floor(_tableWidth2 / noOfColumns);
+      var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
+      var defaultColumnWidth = _tableWidth2 / noOfColumns;
       targetWidths = new Array(noOfColumns).fill(defaultColumnWidth);
     } else {
       return new Array(noOfColumns).fill({

package/dist/cjs/react/nodes/table/table.js

@@ -15,7 +15,8 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     renderWidth = _ref.renderWidth,
     children = _ref.children,
     tableNode = _ref.tableNode,
-    rendererAppearance = _ref.rendererAppearance;
+    rendererAppearance = _ref.rendererAppearance,
+    isInsideOfBlockNode = _ref.isInsideOfBlockNode;
   return /*#__PURE__*/_react.default.createElement("table", {
     "data-testid": "renderer-table",
     "data-number-column": isNumberColumnEnabled,
@@ -26,7 +27,8 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
     tableNode: tableNode,
-    rendererAppearance: rendererAppearance
+    rendererAppearance: rendererAppearance,
+    isInsideOfBlockNode: isInsideOfBlockNode
   }), /*#__PURE__*/_react.default.createElement("tbody", null, children));
 });
 exports.Table = Table;

package/dist/cjs/react/nodes/table.js

@@ -295,7 +295,8 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         columnWidths = _this$props.columnWidths,
         stickyHeaders = _this$props.stickyHeaders,
         tableNode = _this$props.tableNode,
-        rendererAppearance = _this$props.rendererAppearance;
+        rendererAppearance = _this$props.rendererAppearance,
+        isInsideOfBlockNode = _this$props.isInsideOfBlockNode;
       var stickyMode = this.state.stickyMode;
       var lineLength = _editorSharedStyles.akEditorDefaultLayoutWidth;
       var tableWidth;
@@ -385,7 +386,8 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         isNumberColumnEnabled: isNumberColumnEnabled,
         renderWidth: renderWidth,
         tableNode: tableNode,
-        rendererAppearance: rendererAppearance
+        rendererAppearance: rendererAppearance,
+        isInsideOfBlockNode: isInsideOfBlockNode
       }, this.grabFirstRowRef(children)))));
     }
   }]);

package/dist/cjs/react/renderer-node.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isLayoutNode = exports.insideBreakoutLayout = exports.hasBreakOutMark = void 0;
+exports.isLayoutNode = exports.insideBreakoutLayout = exports.insideBlockNode = exports.hasBreakOutMark = void 0;
 var isLayoutNode = function isLayoutNode(node) {
   return node.type.name === 'layoutSection';
 };
@@ -19,4 +19,19 @@ var insideBreakoutLayout = function insideBreakoutLayout(path) {
     return isLayoutNode(item) && hasBreakOutMark(item);
   });
 };
-exports.insideBreakoutLayout = insideBreakoutLayout;
+exports.insideBreakoutLayout = insideBreakoutLayout;
+var insideBlockNode = function insideBlockNode(path, schema) {
+  var _schema$nodes = schema.nodes,
+    expand = _schema$nodes.expand,
+    nestedExpand = _schema$nodes.nestedExpand,
+    layoutColumn = _schema$nodes.layoutColumn;
+  var blockNodeNames = [expand, nestedExpand, layoutColumn].filter(function (node) {
+    return Boolean(node);
+  }).map(function (node) {
+    return node.name;
+  });
+  return path && path.some(function (n) {
+    return n.type && blockNodeNames.indexOf(n.type.name) > -1;
+  });
+};
+exports.insideBlockNode = insideBlockNode;

package/dist/cjs/ui/MediaCard.js

@@ -227,8 +227,7 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         alt = _this$props3.alt,
         featureFlags = _this$props3.featureFlags,
         ssr = _this$props3.ssr,
-        rendererAppearance = _this$props3.rendererAppearance,
-        expandByPixel = _this$props3.expandByPixel;
+        rendererAppearance = _this$props3.rendererAppearance;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -242,7 +241,6 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
       // context is not really used when the type is external and we want to render the component asap
       , {
         mediaClientConfig: mediaClientConfig,
-        expandByPixel: expandByPixel,
         alt: alt,
         identifier: identifier,
         dimensions: cardDimensions,
@@ -278,8 +276,7 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         forceOpenMediaViewer = _this$props4.shouldOpenMediaViewer,
         featureFlags = _this$props4.featureFlags,
         shouldEnableDownloadButton = _this$props4.shouldEnableDownloadButton,
-        ssr = _this$props4.ssr,
-        expandByPixel = _this$props4.expandByPixel;
+        ssr = _this$props4.ssr;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -315,7 +312,6 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         originalDimensions: originalDimensions,
         fileState: fileState
       }), /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
-        expandByPixel: expandByPixel,
         identifier: identifier,
         alt: alt,
         contextId: contextId,

package/dist/cjs/ui/Renderer/index.js

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.11.15";
+var packageVersion = "108.11.17";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/es2019/react/index.js

@@ -10,7 +10,7 @@ import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
 import { getText } from '../utils';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
-import { insideBreakoutLayout } from './renderer-node';
+import { insideBlockNode, insideBreakoutLayout } from './renderer-node';
 import { isCodeMark } from './marks/code';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce((acc, markOrNode) => {
@@ -300,12 +300,14 @@ export default class ReactSerializer {
   getTableProps(node, path = []) {
     // TODO: https://product-fabric.atlassian.net/browse/CEMS-1048
     const stickyHeaders = !insideBreakoutLayout(path) ? this.stickyHeaders : undefined;
+    const isInsideOfBlockNode = insideBlockNode(path, node.type.schema);
     return {
       ...this.getProps(node),
       allowColumnSorting: this.allowColumnSorting,
       columnWidths: calcTableColumnWidths(node),
       tableNode: node,
-      stickyHeaders
+      stickyHeaders,
+      isInsideOfBlockNode
     };
   }
   getDateProps(node, parentInfo) {
@@ -316,18 +318,11 @@ export default class ReactSerializer {
   }
   getMediaSingleProps(node, path = []) {
     const {
-      nodes: {
-        expand,
-        nestedExpand,
-        layoutColumn
-      },
       marks: {
         link
       }
     } = node.type.schema;
-    const blockNodeNames = [expand, nestedExpand, layoutColumn].filter(node => Boolean(node)) // Check if the node exist first
-    .map(node => node.name);
-    const isInsideOfBlockNode = path && path.some(n => n.type && blockNodeNames.indexOf(n.type.name) > -1);
+    const isInsideOfBlockNode = insideBlockNode(path, node.type.schema);
     const isLinkMark = mark => mark.type === link;
     const childHasLink = node.firstChild && node.firstChild.marks.filter(m => isLinkMark(m) || this.allowMediaLinking === true).length;
     return {
@@ -369,16 +364,7 @@ export default class ReactSerializer {
     };
   }
   getEmbedCardProps(node, path = []) {
-    const {
-      nodes: {
-        expand,
-        nestedExpand,
-        layoutColumn
-      }
-    } = node.type.schema;
-    const blockNodeNames = [expand, nestedExpand, layoutColumn].filter(node => Boolean(node)) // Check if the node exist first
-    .map(node => node.name);
-    const isInsideOfBlockNode = path && path.some(n => n.type && blockNodeNames.indexOf(n.type.name) > -1);
+    const isInsideOfBlockNode = insideBlockNode(path, node.type.schema);
     return {
       ...this.getProps(node),
       isInsideOfBlockNode

package/dist/es2019/react/nodes/media/index.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
+
 import React from 'react';
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
+import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
 import { MediaCard } from '../../../ui/MediaCard';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../../utils';
@@ -45,7 +46,6 @@ export default class Media extends PureComponent {
           }
         }
       }, jsx(MediaCard, _extends({
-        expandByPixel: borderMark && IMAGE_AND_BORDER_ADJUSTMENT,
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, this.props, {
@@ -61,14 +61,16 @@ export default class Media extends PureComponent {
         "data-mark-type": "border",
         "data-color": borderColor,
         "data-size": borderWidth,
-        css: borderStyle(!!linkHref, paletteColorValue, borderWidth)
-      }, mediaComponent) : mediaComponent;
+        css: borderStyle(paletteColorValue, borderWidth)
+      }, jsx(MediaBorderGapFiller, {
+        borderColor: borderColor
+      }), mediaComponent) : mediaComponent;
       return linkHref ? jsx("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: this.handleMediaLinkClick,
         "data-block-link": linkHref,
-        css: linkStyle(!!borderMark)
+        css: linkStyle
       }, mediaComponentWithBorder) : mediaComponentWithBorder;
     });
     _defineProperty(this, "handleMediaLinkClick", event => {

package/dist/es2019/react/nodes/media/styles.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
-import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
-export const linkStyle = hasBorderMark => css`
+export const linkStyle = css`
   position: absolute;
   background: transparent;
   top: 0;
@@ -8,14 +7,13 @@ export const linkStyle = hasBorderMark => css`
   bottom: 0;
   left: 0;
   cursor: pointer;
-  width: ${hasBorderMark ? `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)` : '100%'} !important;
-  height: ${hasBorderMark ? `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)` : '100%'} !important;
+  width: 100% !important;
+  height: 100% !important;
 `;
-export const borderStyle = (hasLinkMark, color, width) => css`
-  width: ${hasLinkMark ? '100%' : `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)`} !important;
-  height: ${hasLinkMark ? '100%' : `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)`} !important;
-  border-color: ${color};
-  border-width: ${width}px;
-  border-style: solid;
-  border-radius: ${width * 2}px;
+export const borderStyle = (color, width) => css`
+  position: absolute;
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: ${width}px;
+  box-shadow: 0 0 0 ${width}px ${color};
 `;

package/dist/es2019/react/nodes/table/colgroup.js

@@ -53,7 +53,8 @@ const renderScaleDownColgroup = props => {
     isNumberColumnEnabled,
     renderWidth,
     tableNode,
-    rendererAppearance
+    rendererAppearance,
+    isInsideOfBlockNode
   } = props;
   if (!columnWidths) {
     return [];
@@ -67,12 +68,12 @@ const renderScaleDownColgroup = props => {
   } else {
     tableContainerWidth = getTableLayoutWidth(layout);
   }
-  if (isTableResizingEnabled(rendererAppearance) && !tableResized) {
+  if (isTableResizingEnabled(rendererAppearance) && !isInsideOfBlockNode && !tableResized) {
     if (getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx')) {
       // for tables with no column widths defined, assume that the real table width
       // is defined by node.attrs.width
-      const tableWidth = isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth;
-      const defaultColumnWidth = Math.floor(tableWidth / noOfColumns);
+      const tableWidth = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
+      const defaultColumnWidth = tableWidth / noOfColumns;
       targetWidths = new Array(noOfColumns).fill(defaultColumnWidth);
     } else {
       return new Array(noOfColumns).fill({

package/dist/es2019/react/nodes/table/table.js

@@ -8,7 +8,8 @@ export const Table = /*#__PURE__*/React.memo(({
   renderWidth,
   children,
   tableNode,
-  rendererAppearance
+  rendererAppearance,
+  isInsideOfBlockNode
 }) => {
   return /*#__PURE__*/React.createElement("table", {
     "data-testid": "renderer-table",
@@ -20,6 +21,7 @@ export const Table = /*#__PURE__*/React.memo(({
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
     tableNode: tableNode,
-    rendererAppearance: rendererAppearance
+    rendererAppearance: rendererAppearance,
+    isInsideOfBlockNode: isInsideOfBlockNode
   }), /*#__PURE__*/React.createElement("tbody", null, children));
 });

package/dist/es2019/react/nodes/table.js

@@ -238,7 +238,8 @@ export class TableContainer extends React.Component {
       columnWidths,
       stickyHeaders,
       tableNode,
-      rendererAppearance
+      rendererAppearance,
+      isInsideOfBlockNode
     } = this.props;
     const {
       stickyMode
@@ -331,7 +332,8 @@ export class TableContainer extends React.Component {
       isNumberColumnEnabled: isNumberColumnEnabled,
       renderWidth: renderWidth,
       tableNode: tableNode,
-      rendererAppearance: rendererAppearance
+      rendererAppearance: rendererAppearance,
+      isInsideOfBlockNode: isInsideOfBlockNode
     }, this.grabFirstRowRef(children)))));
   }
 }

package/dist/es2019/react/renderer-node.js

@@ -1,3 +1,14 @@
 export const isLayoutNode = node => node.type.name === 'layoutSection';
 export const hasBreakOutMark = node => node.marks.some(m => m.type.name === 'breakout');
-export const insideBreakoutLayout = path => path.some(item => isLayoutNode(item) && hasBreakOutMark(item));
+export const insideBreakoutLayout = path => path.some(item => isLayoutNode(item) && hasBreakOutMark(item));
+export const insideBlockNode = (path, schema) => {
+  const {
+    nodes: {
+      expand,
+      nestedExpand,
+      layoutColumn
+    }
+  } = schema;
+  const blockNodeNames = [expand, nestedExpand, layoutColumn].filter(node => Boolean(node)).map(node => node.name);
+  return path && path.some(n => n.type && blockNodeNames.indexOf(n.type.name) > -1);
+};

package/dist/es2019/ui/MediaCard.js

@@ -158,8 +158,7 @@ export class MediaCardInternal extends Component {
       alt,
       featureFlags,
       ssr,
-      rendererAppearance,
-      expandByPixel
+      rendererAppearance
     } = this.props;
     if (imageStatus === 'loading' || !url) {
       return this.renderLoadingCard();
@@ -174,7 +173,6 @@ export class MediaCardInternal extends Component {
     // context is not really used when the type is external and we want to render the component asap
     , {
       mediaClientConfig: mediaClientConfig,
-      expandByPixel: expandByPixel,
       alt: alt,
       identifier: identifier,
       dimensions: cardDimensions,
@@ -209,8 +207,7 @@ export class MediaCardInternal extends Component {
       shouldOpenMediaViewer: forceOpenMediaViewer,
       featureFlags,
       shouldEnableDownloadButton,
-      ssr,
-      expandByPixel
+      ssr
     } = this.props;
     const isMobile = rendererAppearance === 'mobile';
     const shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
@@ -247,7 +244,6 @@ export class MediaCardInternal extends Component {
       originalDimensions,
       fileState
     }), /*#__PURE__*/React.createElement(Card, {
-      expandByPixel: expandByPixel,
       identifier: identifier,
       alt: alt,
       contextId: contextId,

package/dist/es2019/ui/Renderer/index.js

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.11.15";
+const packageVersion = "108.11.17";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/esm/react/index.js

@@ -17,7 +17,7 @@ import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
 import { getText } from '../utils';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
-import { insideBreakoutLayout } from './renderer-node';
+import { insideBlockNode, insideBreakoutLayout } from './renderer-node';
 import { isCodeMark } from './marks/code';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce(function (acc, markOrNode) {
@@ -333,11 +333,13 @@ var ReactSerializer = /*#__PURE__*/function () {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       // TODO: https://product-fabric.atlassian.net/browse/CEMS-1048
       var stickyHeaders = !insideBreakoutLayout(path) ? this.stickyHeaders : undefined;
+      var isInsideOfBlockNode = insideBlockNode(path, node.type.schema);
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         allowColumnSorting: this.allowColumnSorting,
         columnWidths: calcTableColumnWidths(node),
         tableNode: node,
-        stickyHeaders: stickyHeaders
+        stickyHeaders: stickyHeaders,
+        isInsideOfBlockNode: isInsideOfBlockNode
       });
     }
   }, {
@@ -353,21 +355,8 @@ var ReactSerializer = /*#__PURE__*/function () {
     value: function getMediaSingleProps(node) {
       var _this5 = this;
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      var _node$type$schema = node.type.schema,
-        _node$type$schema$nod = _node$type$schema.nodes,
-        expand = _node$type$schema$nod.expand,
-        nestedExpand = _node$type$schema$nod.nestedExpand,
-        layoutColumn = _node$type$schema$nod.layoutColumn,
-        link = _node$type$schema.marks.link;
-      var blockNodeNames = [expand, nestedExpand, layoutColumn].filter(function (node) {
-        return Boolean(node);
-      }) // Check if the node exist first
-      .map(function (node) {
-        return node.name;
-      });
-      var isInsideOfBlockNode = path && path.some(function (n) {
-        return n.type && blockNodeNames.indexOf(n.type.name) > -1;
-      });
+      var link = node.type.schema.marks.link;
+      var isInsideOfBlockNode = insideBlockNode(path, node.type.schema);
       var isLinkMark = function isLinkMark(mark) {
         return mark.type === link;
       };
@@ -422,19 +411,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     key: "getEmbedCardProps",
     value: function getEmbedCardProps(node) {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      var _node$type$schema$nod2 = node.type.schema.nodes,
-        expand = _node$type$schema$nod2.expand,
-        nestedExpand = _node$type$schema$nod2.nestedExpand,
-        layoutColumn = _node$type$schema$nod2.layoutColumn;
-      var blockNodeNames = [expand, nestedExpand, layoutColumn].filter(function (node) {
-        return Boolean(node);
-      }) // Check if the node exist first
-      .map(function (node) {
-        return node.name;
-      });
-      var isInsideOfBlockNode = path && path.some(function (n) {
-        return n.type && blockNodeNames.indexOf(n.type.name) > -1;
-      });
+      var isInsideOfBlockNode = insideBlockNode(path, node.type.schema);
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         isInsideOfBlockNode: isInsideOfBlockNode
       });

package/dist/esm/react/nodes/media/index.js

@@ -9,13 +9,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 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 */
+
 import React from 'react';
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
+import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
 import { MediaCard } from '../../../ui/MediaCard';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../../utils';
@@ -56,7 +57,6 @@ var Media = /*#__PURE__*/function (_PureComponent) {
           border: !!borderMark
         })
       }, jsx(MediaCard, _extends({
-        expandByPixel: borderMark && IMAGE_AND_BORDER_ADJUSTMENT,
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -72,14 +72,16 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         "data-mark-type": "border",
         "data-color": borderColor,
         "data-size": borderWidth,
-        css: borderStyle(!!linkHref, paletteColorValue, borderWidth)
-      }, mediaComponent) : mediaComponent;
+        css: borderStyle(paletteColorValue, borderWidth)
+      }, jsx(MediaBorderGapFiller, {
+        borderColor: borderColor
+      }), mediaComponent) : mediaComponent;
       return linkHref ? jsx("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: _this.handleMediaLinkClick,
         "data-block-link": linkHref,
-        css: linkStyle(!!borderMark)
+        css: linkStyle
       }, mediaComponentWithBorder) : mediaComponentWithBorder;
     });
     _defineProperty(_assertThisInitialized(_this), "handleMediaLinkClick", function (event) {

package/dist/esm/react/nodes/media/styles.js

@@ -1,10 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
-import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
-export var linkStyle = function linkStyle(hasBorderMark) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: ", " !important;\n  height: ", " !important;\n"])), hasBorderMark ? "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)") : '100%', hasBorderMark ? "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)") : '100%');
-};
-export var borderStyle = function borderStyle(hasLinkMark, color, width) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", " !important;\n  height: ", " !important;\n  border-color: ", ";\n  border-width: ", "px;\n  border-style: solid;\n  border-radius: ", "px;\n"])), hasLinkMark ? '100%' : "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)"), hasLinkMark ? '100%' : "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)"), color, width, width * 2);
+export var linkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100% !important;\n  height: 100% !important;\n"])));
+export var borderStyle = function borderStyle(color, width) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100% !important;\n  height: 100% !important;\n  border-radius: ", "px;\n  box-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
 };

package/dist/esm/react/nodes/table/colgroup.js

@@ -53,7 +53,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     isNumberColumnEnabled = props.isNumberColumnEnabled,
     renderWidth = props.renderWidth,
     tableNode = props.tableNode,
-    rendererAppearance = props.rendererAppearance;
+    rendererAppearance = props.rendererAppearance,
+    isInsideOfBlockNode = props.isInsideOfBlockNode;
   if (!columnWidths) {
     return [];
   }
@@ -66,12 +67,12 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   } else {
     tableContainerWidth = getTableLayoutWidth(layout);
   }
-  if (isTableResizingEnabled(rendererAppearance) && !tableResized) {
+  if (isTableResizingEnabled(rendererAppearance) && !isInsideOfBlockNode && !tableResized) {
     if (getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx')) {
       // for tables with no column widths defined, assume that the real table width
       // is defined by node.attrs.width
-      var _tableWidth2 = isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth;
-      var defaultColumnWidth = Math.floor(_tableWidth2 / noOfColumns);
+      var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
+      var defaultColumnWidth = _tableWidth2 / noOfColumns;
       targetWidths = new Array(noOfColumns).fill(defaultColumnWidth);
     } else {
       return new Array(noOfColumns).fill({

package/dist/esm/react/nodes/table/table.js

@@ -8,7 +8,8 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     renderWidth = _ref.renderWidth,
     children = _ref.children,
     tableNode = _ref.tableNode,
-    rendererAppearance = _ref.rendererAppearance;
+    rendererAppearance = _ref.rendererAppearance,
+    isInsideOfBlockNode = _ref.isInsideOfBlockNode;
   return /*#__PURE__*/React.createElement("table", {
     "data-testid": "renderer-table",
     "data-number-column": isNumberColumnEnabled,
@@ -19,6 +20,7 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
     tableNode: tableNode,
-    rendererAppearance: rendererAppearance
+    rendererAppearance: rendererAppearance,
+    isInsideOfBlockNode: isInsideOfBlockNode
   }), /*#__PURE__*/React.createElement("tbody", null, children));
 });

package/dist/esm/react/nodes/table.js

@@ -287,7 +287,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         columnWidths = _this$props.columnWidths,
         stickyHeaders = _this$props.stickyHeaders,
         tableNode = _this$props.tableNode,
-        rendererAppearance = _this$props.rendererAppearance;
+        rendererAppearance = _this$props.rendererAppearance,
+        isInsideOfBlockNode = _this$props.isInsideOfBlockNode;
       var stickyMode = this.state.stickyMode;
       var lineLength = akEditorDefaultLayoutWidth;
       var tableWidth;
@@ -377,7 +378,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         isNumberColumnEnabled: isNumberColumnEnabled,
         renderWidth: renderWidth,
         tableNode: tableNode,
-        rendererAppearance: rendererAppearance
+        rendererAppearance: rendererAppearance,
+        isInsideOfBlockNode: isInsideOfBlockNode
       }, this.grabFirstRowRef(children)))));
     }
   }]);

package/dist/esm/react/renderer-node.js

@@ -10,4 +10,18 @@ export var insideBreakoutLayout = function insideBreakoutLayout(path) {
   return path.some(function (item) {
     return isLayoutNode(item) && hasBreakOutMark(item);
   });
+};
+export var insideBlockNode = function insideBlockNode(path, schema) {
+  var _schema$nodes = schema.nodes,
+    expand = _schema$nodes.expand,
+    nestedExpand = _schema$nodes.nestedExpand,
+    layoutColumn = _schema$nodes.layoutColumn;
+  var blockNodeNames = [expand, nestedExpand, layoutColumn].filter(function (node) {
+    return Boolean(node);
+  }).map(function (node) {
+    return node.name;
+  });
+  return path && path.some(function (n) {
+    return n.type && blockNodeNames.indexOf(n.type.name) > -1;
+  });
 };

package/dist/esm/ui/MediaCard.js

@@ -215,8 +215,7 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         alt = _this$props3.alt,
         featureFlags = _this$props3.featureFlags,
         ssr = _this$props3.ssr,
-        rendererAppearance = _this$props3.rendererAppearance,
-        expandByPixel = _this$props3.expandByPixel;
+        rendererAppearance = _this$props3.rendererAppearance;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -230,7 +229,6 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
       // context is not really used when the type is external and we want to render the component asap
       , {
         mediaClientConfig: mediaClientConfig,
-        expandByPixel: expandByPixel,
         alt: alt,
         identifier: identifier,
         dimensions: cardDimensions,
@@ -266,8 +264,7 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         forceOpenMediaViewer = _this$props4.shouldOpenMediaViewer,
         featureFlags = _this$props4.featureFlags,
         shouldEnableDownloadButton = _this$props4.shouldEnableDownloadButton,
-        ssr = _this$props4.ssr,
-        expandByPixel = _this$props4.expandByPixel;
+        ssr = _this$props4.ssr;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -303,7 +300,6 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         originalDimensions: originalDimensions,
         fileState: fileState
       }), /*#__PURE__*/React.createElement(Card, {
-        expandByPixel: expandByPixel,
         identifier: identifier,
         alt: alt,
         contextId: contextId,

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

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.11.15";
+var packageVersion = "108.11.17";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/types/react/index.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
-import { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
-import { Serializer } from '../';
-import { RendererAppearance, StickyHeaderConfig, HeadingAnchorLinksProps, NodeComponentsProps } from '../ui/Renderer/types';
-import { AnalyticsEventPayload } from '../analytics/events';
-import { TextWrapper } from './nodes';
+import type { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
+import type { Serializer } from '../';
+import type { RendererAppearance, StickyHeaderConfig, HeadingAnchorLinksProps, NodeComponentsProps } from '../ui/Renderer/types';
+import type { AnalyticsEventPayload } from '../analytics/events';
+import type { TextWrapper } from './nodes';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import { RendererContext } from './types';
-import { MediaOptions } from '../types/mediaOptions';
-import { SmartLinksOptions } from '../types/smartLinksOptions';
-import { EmojiResourceConfig } from '@atlaskit/emoji/resource';
+import type { RendererContext } from './types';
+import type { MediaOptions } from '../types/mediaOptions';
+import type { SmartLinksOptions } from '../types/smartLinksOptions';
+import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
 export interface ReactSerializerInit {
     providers?: ProviderFactory;
     eventHandlers?: EventHandlers;

package/dist/types/react/nodes/media/index.d.ts

@@ -1,13 +1,12 @@
-/** @jsx jsx */
 import React from 'react';
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { MediaCardProps } from '../../../ui/MediaCard';
-import { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { MediaCardProps } from '../../../ui/MediaCard';
+import type { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
-import { AnalyticsEventPayload } from '../../../analytics/events';
+import type { AnalyticsEventPayload } from '../../../analytics/events';
 export type MediaProps = MediaCardProps & {
     providers?: ProviderFactory;
     allowAltTextOnImages?: boolean;

package/dist/types/react/nodes/media/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const linkStyle: (hasBorderMark: boolean) => import("@emotion/react").SerializedStyles;
-export declare const borderStyle: (hasLinkMark: boolean, color: string, width: number) => import("@emotion/react").SerializedStyles;
+export declare const linkStyle: import("@emotion/react").SerializedStyles;
+export declare const borderStyle: (color: string, width: number) => import("@emotion/react").SerializedStyles;

package/dist/types/react/nodes/table/table.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { SharedTableProps } from './types';
+import type { SharedTableProps } from './types';
 export type TableProps = SharedTableProps & {
     innerRef?: React.RefObject<HTMLTableElement>;
     children: React.ReactNode[];
 };
-export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, rendererAppearance, }: TableProps) => JSX.Element>;
+export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, rendererAppearance, isInsideOfBlockNode, }: TableProps) => JSX.Element>;

package/dist/types/react/nodes/table/types.d.ts

@@ -1,6 +1,6 @@
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { TableLayout } from '@atlaskit/adf-schema';
-import { RendererAppearance } from '../../../ui/Renderer/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { RendererAppearance } from '../../../ui/Renderer/types';
 export type SharedTableProps = {
     columnWidths?: Array<number>;
     layout: TableLayout;
@@ -8,4 +8,5 @@ export type SharedTableProps = {
     renderWidth: number;
     tableNode?: PMNode;
     rendererAppearance: RendererAppearance;
+    isInsideOfBlockNode?: boolean;
 };

package/dist/types/react/renderer-node.d.ts

@@ -1,4 +1,5 @@
-import { Node } from '@atlaskit/editor-prosemirror/model';
+import type { Node, Schema } from '@atlaskit/editor-prosemirror/model';
 export declare const isLayoutNode: (node: Node) => boolean;
 export declare const hasBreakOutMark: (node: Node) => boolean;
 export declare const insideBreakoutLayout: (path: Node[]) => boolean;
+export declare const insideBlockNode: (path: Node[], schema: Schema) => boolean;

package/dist/types/ui/MediaCard.d.ts

@@ -1,15 +1,15 @@
 import React, { Component } from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
-import { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
-import { MediaClientConfig } from '@atlaskit/media-core';
-import { ImageResizeMode, Identifier, FileState } from '@atlaskit/media-client';
-import { MediaType } from '@atlaskit/adf-schema';
+import type { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { ImageResizeMode, Identifier, FileState } from '@atlaskit/media-client';
+import type { MediaType } from '@atlaskit/adf-schema';
 import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { ImageStatus } from '@atlaskit/editor-common/utils';
-import { MediaFeatureFlags } from '@atlaskit/media-common';
-import { RendererAppearance } from './Renderer/types';
-import { RendererContext } from '../react/types';
-import { MediaSSR } from '../types/mediaOptions';
+import type { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { RendererAppearance } from './Renderer/types';
+import type { RendererContext } from '../react/types';
+import type { MediaSSR } from '../types/mediaOptions';
 export type MediaProvider = {
     viewMediaClientConfig: MediaClientConfig;
 };
@@ -40,7 +40,6 @@ export interface MediaCardProps {
     featureFlags?: MediaFeatureFlags;
     shouldEnableDownloadButton?: boolean;
     ssr?: MediaSSR;
-    expandByPixel?: number;
 }
 export interface State {
     mediaClientConfig?: MediaClientConfig;

package/dist/types-ts4.5/react/index.d.ts

@@ -1,16 +1,16 @@
 /// <reference types="react" />
-import { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
-import { Serializer } from '../';
-import { RendererAppearance, StickyHeaderConfig, HeadingAnchorLinksProps, NodeComponentsProps } from '../ui/Renderer/types';
-import { AnalyticsEventPayload } from '../analytics/events';
-import { TextWrapper } from './nodes';
+import type { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
+import type { Serializer } from '../';
+import type { RendererAppearance, StickyHeaderConfig, HeadingAnchorLinksProps, NodeComponentsProps } from '../ui/Renderer/types';
+import type { AnalyticsEventPayload } from '../analytics/events';
+import type { TextWrapper } from './nodes';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import { RendererContext } from './types';
-import { MediaOptions } from '../types/mediaOptions';
-import { SmartLinksOptions } from '../types/smartLinksOptions';
-import { EmojiResourceConfig } from '@atlaskit/emoji/resource';
+import type { RendererContext } from './types';
+import type { MediaOptions } from '../types/mediaOptions';
+import type { SmartLinksOptions } from '../types/smartLinksOptions';
+import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
 export interface ReactSerializerInit {
     providers?: ProviderFactory;
     eventHandlers?: EventHandlers;

package/dist/types-ts4.5/react/nodes/media/index.d.ts

@@ -1,13 +1,12 @@
-/** @jsx jsx */
 import React from 'react';
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { MediaCardProps } from '../../../ui/MediaCard';
-import { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { MediaCardProps } from '../../../ui/MediaCard';
+import type { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
-import { AnalyticsEventPayload } from '../../../analytics/events';
+import type { AnalyticsEventPayload } from '../../../analytics/events';
 export type MediaProps = MediaCardProps & {
     providers?: ProviderFactory;
     allowAltTextOnImages?: boolean;

package/dist/types-ts4.5/react/nodes/media/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const linkStyle: (hasBorderMark: boolean) => import("@emotion/react").SerializedStyles;
-export declare const borderStyle: (hasLinkMark: boolean, color: string, width: number) => import("@emotion/react").SerializedStyles;
+export declare const linkStyle: import("@emotion/react").SerializedStyles;
+export declare const borderStyle: (color: string, width: number) => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/react/nodes/table/table.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { SharedTableProps } from './types';
+import type { SharedTableProps } from './types';
 export type TableProps = SharedTableProps & {
     innerRef?: React.RefObject<HTMLTableElement>;
     children: React.ReactNode[];
 };
-export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, rendererAppearance, }: TableProps) => JSX.Element>;
+export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, rendererAppearance, isInsideOfBlockNode, }: TableProps) => JSX.Element>;

package/dist/types-ts4.5/react/nodes/table/types.d.ts

@@ -1,6 +1,6 @@
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { TableLayout } from '@atlaskit/adf-schema';
-import { RendererAppearance } from '../../../ui/Renderer/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { RendererAppearance } from '../../../ui/Renderer/types';
 export type SharedTableProps = {
     columnWidths?: Array<number>;
     layout: TableLayout;
@@ -8,4 +8,5 @@ export type SharedTableProps = {
     renderWidth: number;
     tableNode?: PMNode;
     rendererAppearance: RendererAppearance;
+    isInsideOfBlockNode?: boolean;
 };

package/dist/types-ts4.5/react/renderer-node.d.ts

@@ -1,4 +1,5 @@
-import { Node } from '@atlaskit/editor-prosemirror/model';
+import type { Node, Schema } from '@atlaskit/editor-prosemirror/model';
 export declare const isLayoutNode: (node: Node) => boolean;
 export declare const hasBreakOutMark: (node: Node) => boolean;
 export declare const insideBreakoutLayout: (path: Node[]) => boolean;
+export declare const insideBlockNode: (path: Node[], schema: Schema) => boolean;

package/dist/types-ts4.5/ui/MediaCard.d.ts

@@ -1,15 +1,15 @@
 import React, { Component } from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
-import { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
-import { MediaClientConfig } from '@atlaskit/media-core';
-import { ImageResizeMode, Identifier, FileState } from '@atlaskit/media-client';
-import { MediaType } from '@atlaskit/adf-schema';
+import type { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { ImageResizeMode, Identifier, FileState } from '@atlaskit/media-client';
+import type { MediaType } from '@atlaskit/adf-schema';
 import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { ImageStatus } from '@atlaskit/editor-common/utils';
-import { MediaFeatureFlags } from '@atlaskit/media-common';
-import { RendererAppearance } from './Renderer/types';
-import { RendererContext } from '../react/types';
-import { MediaSSR } from '../types/mediaOptions';
+import type { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { RendererAppearance } from './Renderer/types';
+import type { RendererContext } from '../react/types';
+import type { MediaSSR } from '../types/mediaOptions';
 export type MediaProvider = {
     viewMediaClientConfig: MediaClientConfig;
 };
@@ -40,7 +40,6 @@ export interface MediaCardProps {
     featureFlags?: MediaFeatureFlags;
     shouldEnableDownloadButton?: boolean;
     ssr?: MediaSSR;
-    expandByPixel?: number;
 }
 export interface State {
     mediaClientConfig?: MediaClientConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.11.15",
+  "version": "108.11.17",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.10.0",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/editor-common": "^74.59.0",
+    "@atlaskit/editor-common": "^75.0.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-prosemirror": "1.1.0",
@@ -39,11 +39,11 @@
     "@atlaskit/emoji": "^67.5.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/link-datasource": "^1.1.0",
-    "@atlaskit/media-card": "^76.2.0",
+    "@atlaskit/media-card": "^77.0.0",
     "@atlaskit/media-client": "^24.0.0",
     "@atlaskit/media-common": "^9.0.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
-    "@atlaskit/media-ui": "^24.0.0",
+    "@atlaskit/media-ui": "^25.0.0",
     "@atlaskit/media-viewer": "^48.0.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/smart-card": "^26.25.0",

package/report.api.md

@@ -30,7 +30,7 @@ import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { jsx } from '@emotion/react';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import { MediaClientConfig } from '@atlaskit/media-core';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { Node as Node_2 } from '@atlaskit/editor-prosemirror/model';

package/tmp/api-report-tmp.d.ts

@@ -19,7 +19,7 @@ import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { jsx } from '@emotion/react';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import { MediaClientConfig } from '@atlaskit/media-core';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { Node as Node_2 } from '@atlaskit/editor-prosemirror/model';