@atlaskit/renderer 108.11.14 → 108.11.16

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 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
+
+- [`2325dd0eb57`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2325dd0eb57) - fix width issue on initial load
+
 ## 108.11.14
 
 ### 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/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,13 +295,26 @@ 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;
       var left;
+      var updatedLayout;
+
+      // The tableWidth and left offset logic below must stay aligned with the `breakout-ssr.tsx` logic
+      // Please consider changes below carefully to not negatively impact SSR
+      // `renderWidth` cannot be depended on during SSR
+      var isRenderWidthValid = !!renderWidth && renderWidth > 0;
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance) {
-        return rendererAppearance === 'full-width' && !tableNode.attrs.width ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : Math.min((0, _nodeWidth.getTableContainerWidth)(tableNode), renderWidth);
+        if (rendererAppearance === 'full-width' && !tableNode.attrs.width) {
+          return isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+        } else {
+          // custom width, or width mapped to breakpoint
+          var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
+          return isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth;
+        }
       };
       if (isTableResizingEnabled(rendererAppearance) && tableNode) {
         tableWidth = calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance);
@@ -312,6 +325,18 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         left = lineLength / 2 - tableWidth / 2;
       }
       var children = _react.default.Children.toArray(this.props.children);
+
+      // Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
+      // This check caters for those tables and helps with SSR logic
+      var isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
+      var hasCustomWidth = isTableResizingEnabled(rendererAppearance) && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width);
+      if (isFullWidth) {
+        updatedLayout = 'full-width';
+      } else if (hasCustomWidth) {
+        updatedLayout = 'custom';
+      } else {
+        updatedLayout = layout;
+      }
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
         tableWidth: tableWidth,
@@ -329,7 +354,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
-        "data-layout": layout,
+        "data-layout": updatedLayout,
         ref: this.props.handleRef,
         style: {
           width: tableWidth,
@@ -361,7 +386,8 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         isNumberColumnEnabled: isNumberColumnEnabled,
         renderWidth: renderWidth,
         tableNode: tableNode,
-        rendererAppearance: rendererAppearance
+        rendererAppearance: rendererAppearance,
+        isInsideOfBlockNode: isInsideOfBlockNode
       }, this.grabFirstRowRef(children)))));
     }
   }]);
@@ -435,23 +461,27 @@ var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {
-  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
-    var _props$columnWidths;
-    var width = _ref2.width;
-    var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
-    var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
-      return total + val;
-    }, 0)) || 0;
-    if (colWidthsSum || (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx') && isTableResizingEnabled(props.rendererAppearance)) {
-      return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
+  return (
+    /*#__PURE__*/
+    // Remember, `width` will be 0 during SSR
+    _react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
+      var _props$columnWidths;
+      var width = _ref2.width;
+      var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
+      var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
+        return total + val;
+      }, 0)) || 0;
+      if (colWidthsSum || (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx') && isTableResizingEnabled(props.rendererAppearance)) {
+        return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
+          renderWidth: renderWidth
+        }, props));
+      }
+      // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
+      return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
         renderWidth: renderWidth
       }, props));
-    }
-    // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
-    return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
-      renderWidth: renderWidth
-    }, props));
-  });
+    })
+  );
 };
 var _default = (0, _SmartCardStorage.withSmartCardStorage)(TableWithWidth);
 exports.default = _default;

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/Renderer/breakout-ssr.js

@@ -42,7 +42,7 @@ var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.string
 exports.breakoutInlineScriptContext = breakoutInlineScriptContext;
 function applyBreakoutAfterSSR(id, breakoutConsts) {
   var MEDIA_NODE_TYPE = 'mediaSingle';
-  var WIDE_LAYOUT_MODES = ['full-width', 'wide'];
+  var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
     if (!element) {
       return;
@@ -68,12 +68,18 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
       }
       if (item.target.classList.contains('ak-renderer-document')) {
         item.addedNodes.forEach(function (maybeNode) {
+          var width;
           var node = maybeNode;
           var mode = node.dataset.mode || node.dataset.layout || '';
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
-          var width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          if (node.classList.contains('pm-table-container') && mode === 'custom') {
+            var effectiveWidth = renderer.offsetWidth - breakoutConsts.padding;
+            width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
+          } else {
+            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          }
           if (node.style.width === width) {
             return;
           }
@@ -82,11 +88,13 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
           // Tables require some special logic, as they are not using common css transform approach,
           // because it breaks with sticky headers. This logic is copied from a table node:
           // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-          if (node.classList.contains('pm-table-container')) {
+          if (node.classList.contains('pm-table-container') && !renderer.classList.contains('is-full-width')) {
             var lineLength = breakoutConsts.calcLineLength();
             var left = lineLength / 2 - parseInt(width) / 2;
-            if (left < 0) {
+            if (left < 0 && parseInt(width) > lineLength) {
               node.style.left = left + 'px';
+            } else {
+              node.style.left = '';
             }
           }
         });

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.14";
+var packageVersion = "108.11.16";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -468,7 +468,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     onMouseDown = props.onMouseDown,
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock;
   return (0, _react2.jsx)(_ui.WidthProvider, {
-    className: "ak-renderer-wrapper"
+    className: "ak-renderer-wrapper is-".concat(appearance),
+    "data-appearance": appearance
   }, (0, _react2.jsx)(_ui.BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
   }, (0, _react2.jsx)("div", {

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/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

@@ -5,10 +5,9 @@ import { calcTableWidth, TableSharedCssClassName, tableMarginTop } from '@atlask
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
@@ -239,7 +238,8 @@ export class TableContainer extends React.Component {
       columnWidths,
       stickyHeaders,
       tableNode,
-      rendererAppearance
+      rendererAppearance,
+      isInsideOfBlockNode
     } = this.props;
     const {
       stickyMode
@@ -247,8 +247,20 @@ export class TableContainer extends React.Component {
     const lineLength = akEditorDefaultLayoutWidth;
     let tableWidth;
     let left;
+    let updatedLayout;
+
+    // The tableWidth and left offset logic below must stay aligned with the `breakout-ssr.tsx` logic
+    // Please consider changes below carefully to not negatively impact SSR
+    // `renderWidth` cannot be depended on during SSR
+    const isRenderWidthValid = !!renderWidth && renderWidth > 0;
     const calcDefaultLayoutWidthByAppearance = (tableNode, rendererAppearance) => {
-      return rendererAppearance === 'full-width' && !tableNode.attrs.width ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : Math.min(getTableContainerWidth(tableNode), renderWidth);
+      if (rendererAppearance === 'full-width' && !tableNode.attrs.width) {
+        return isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+      } else {
+        // custom width, or width mapped to breakpoint
+        const tableContainerWidth = getTableContainerWidth(tableNode);
+        return isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth;
+      }
     };
     if (isTableResizingEnabled(rendererAppearance) && tableNode) {
       tableWidth = calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance);
@@ -259,6 +271,18 @@ export class TableContainer extends React.Component {
       left = lineLength / 2 - tableWidth / 2;
     }
     const children = React.Children.toArray(this.props.children);
+
+    // Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
+    // This check caters for those tables and helps with SSR logic
+    const isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
+    const hasCustomWidth = isTableResizingEnabled(rendererAppearance) && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width);
+    if (isFullWidth) {
+      updatedLayout = 'full-width';
+    } else if (hasCustomWidth) {
+      updatedLayout = 'custom';
+    } else {
+      updatedLayout = layout;
+    }
     return /*#__PURE__*/React.createElement(React.Fragment, null, !getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
       isNumberColumnEnabled: isNumberColumnEnabled,
       tableWidth: tableWidth,
@@ -276,7 +300,7 @@ export class TableContainer extends React.Component {
       rendererAppearance: rendererAppearance
     }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
       className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
-      "data-layout": layout,
+      "data-layout": updatedLayout,
       ref: this.props.handleRef,
       style: {
         width: tableWidth,
@@ -308,7 +332,8 @@ export class TableContainer extends React.Component {
       isNumberColumnEnabled: isNumberColumnEnabled,
       renderWidth: renderWidth,
       tableNode: tableNode,
-      rendererAppearance: rendererAppearance
+      rendererAppearance: rendererAppearance,
+      isInsideOfBlockNode: isInsideOfBlockNode
     }, this.grabFirstRowRef(children)))));
   }
 }
@@ -372,7 +397,10 @@ const TableWithShadows = overflowShadow(TableProcessor, {
   overflowSelector: `.${TableSharedCssClassName.TABLE_NODE_WRAPPER}`,
   useShadowObserver: true
 });
-const TableWithWidth = props => /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+const TableWithWidth = props =>
+/*#__PURE__*/
+// Remember, `width` will be 0 during SSR
+React.createElement(WidthConsumer, null, ({
   width
 }) => {
   var _props$columnWidths;

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/Renderer/breakout-ssr.js

@@ -45,7 +45,7 @@ export const breakoutInlineScriptContext = `
 `;
 function applyBreakoutAfterSSR(id, breakoutConsts) {
   const MEDIA_NODE_TYPE = 'mediaSingle';
-  const WIDE_LAYOUT_MODES = ['full-width', 'wide'];
+  const WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
     if (!element) {
       return;
@@ -71,12 +71,18 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
       }
       if (item.target.classList.contains('ak-renderer-document')) {
         item.addedNodes.forEach(maybeNode => {
+          let width;
           const node = maybeNode;
           const mode = node.dataset.mode || node.dataset.layout || '';
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
-          const width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          if (node.classList.contains('pm-table-container') && mode === 'custom') {
+            const effectiveWidth = renderer.offsetWidth - breakoutConsts.padding;
+            width = `${Math.min(parseInt(node.style.width), effectiveWidth)}px`;
+          } else {
+            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          }
           if (node.style.width === width) {
             return;
           }
@@ -85,11 +91,13 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
           // Tables require some special logic, as they are not using common css transform approach,
           // because it breaks with sticky headers. This logic is copied from a table node:
           // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-          if (node.classList.contains('pm-table-container')) {
+          if (node.classList.contains('pm-table-container') && !renderer.classList.contains('is-full-width')) {
             const lineLength = breakoutConsts.calcLineLength();
             const left = lineLength / 2 - parseInt(width) / 2;
-            if (left < 0) {
+            if (left < 0 && parseInt(width) > lineLength) {
               node.style.left = left + 'px';
+            } else {
+              node.style.left = '';
             }
           }
         });

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.14";
+const packageVersion = "108.11.16";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
@@ -440,7 +440,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     useBlockRenderForCodeBlock
   } = props;
   return jsx(WidthProvider, {
-    className: "ak-renderer-wrapper"
+    className: `ak-renderer-wrapper is-${appearance}`,
+    "data-appearance": appearance
   }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx("div", {

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/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

@@ -16,10 +16,9 @@ import { calcTableWidth, TableSharedCssClassName, tableMarginTop } from '@atlask
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
@@ -288,13 +287,26 @@ 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;
       var left;
+      var updatedLayout;
+
+      // The tableWidth and left offset logic below must stay aligned with the `breakout-ssr.tsx` logic
+      // Please consider changes below carefully to not negatively impact SSR
+      // `renderWidth` cannot be depended on during SSR
+      var isRenderWidthValid = !!renderWidth && renderWidth > 0;
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance) {
-        return rendererAppearance === 'full-width' && !tableNode.attrs.width ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : Math.min(getTableContainerWidth(tableNode), renderWidth);
+        if (rendererAppearance === 'full-width' && !tableNode.attrs.width) {
+          return isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+        } else {
+          // custom width, or width mapped to breakpoint
+          var tableContainerWidth = getTableContainerWidth(tableNode);
+          return isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth;
+        }
       };
       if (isTableResizingEnabled(rendererAppearance) && tableNode) {
         tableWidth = calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance);
@@ -305,6 +317,18 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         left = lineLength / 2 - tableWidth / 2;
       }
       var children = React.Children.toArray(this.props.children);
+
+      // Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
+      // This check caters for those tables and helps with SSR logic
+      var isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
+      var hasCustomWidth = isTableResizingEnabled(rendererAppearance) && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width);
+      if (isFullWidth) {
+        updatedLayout = 'full-width';
+      } else if (hasCustomWidth) {
+        updatedLayout = 'custom';
+      } else {
+        updatedLayout = layout;
+      }
       return /*#__PURE__*/React.createElement(React.Fragment, null, !getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
         tableWidth: tableWidth,
@@ -322,7 +346,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
-        "data-layout": layout,
+        "data-layout": updatedLayout,
         ref: this.props.handleRef,
         style: {
           width: tableWidth,
@@ -354,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)))));
     }
   }]);
@@ -426,22 +451,26 @@ var TableWithShadows = overflowShadow(TableProcessor, {
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
-    var _props$columnWidths;
-    var width = _ref2.width;
-    var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
-    var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
-      return total + val;
-    }, 0)) || 0;
-    if (colWidthsSum || getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx') && isTableResizingEnabled(props.rendererAppearance)) {
-      return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
+  return (
+    /*#__PURE__*/
+    // Remember, `width` will be 0 during SSR
+    React.createElement(WidthConsumer, null, function (_ref2) {
+      var _props$columnWidths;
+      var width = _ref2.width;
+      var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
+      var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
+        return total + val;
+      }, 0)) || 0;
+      if (colWidthsSum || getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx') && isTableResizingEnabled(props.rendererAppearance)) {
+        return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
+          renderWidth: renderWidth
+        }, props));
+      }
+      // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
+      return /*#__PURE__*/React.createElement(TableProcessor, _extends({
         renderWidth: renderWidth
       }, props));
-    }
-    // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
-    return /*#__PURE__*/React.createElement(TableProcessor, _extends({
-      renderWidth: renderWidth
-    }, props));
-  });
+    })
+  );
 };
 export default withSmartCardStorage(TableWithWidth);

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/Renderer/breakout-ssr.js

@@ -33,7 +33,7 @@ export function createBreakoutInlineScript(id) {
 export var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n");
 function applyBreakoutAfterSSR(id, breakoutConsts) {
   var MEDIA_NODE_TYPE = 'mediaSingle';
-  var WIDE_LAYOUT_MODES = ['full-width', 'wide'];
+  var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
     if (!element) {
       return;
@@ -59,12 +59,18 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
       }
       if (item.target.classList.contains('ak-renderer-document')) {
         item.addedNodes.forEach(function (maybeNode) {
+          var width;
           var node = maybeNode;
           var mode = node.dataset.mode || node.dataset.layout || '';
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
-          var width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          if (node.classList.contains('pm-table-container') && mode === 'custom') {
+            var effectiveWidth = renderer.offsetWidth - breakoutConsts.padding;
+            width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
+          } else {
+            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          }
           if (node.style.width === width) {
             return;
           }
@@ -73,11 +79,13 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
           // Tables require some special logic, as they are not using common css transform approach,
           // because it breaks with sticky headers. This logic is copied from a table node:
           // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-          if (node.classList.contains('pm-table-container')) {
+          if (node.classList.contains('pm-table-container') && !renderer.classList.contains('is-full-width')) {
             var lineLength = breakoutConsts.calcLineLength();
             var left = lineLength / 2 - parseInt(width) / 2;
-            if (left < 0) {
+            if (left < 0 && parseInt(width) > lineLength) {
               node.style.left = left + 'px';
+            } else {
+              node.style.left = '';
             }
           }
         });

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.14";
+var packageVersion = "108.11.16";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -457,7 +457,8 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     onMouseDown = props.onMouseDown,
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock;
   return jsx(WidthProvider, {
-    className: "ak-renderer-wrapper"
+    className: "ak-renderer-wrapper is-".concat(appearance),
+    "data-appearance": appearance
   }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx("div", {

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/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-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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.11.14",
+  "version": "108.11.16",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,14 +31,14 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.10.0",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/editor-common": "^74.58.0",
+    "@atlaskit/editor-common": "^74.59.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.6.0",
     "@atlaskit/emoji": "^67.5.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/link-datasource": "^1.0.0",
+    "@atlaskit/link-datasource": "^1.1.0",
     "@atlaskit/media-card": "^76.2.0",
     "@atlaskit/media-client": "^24.0.0",
     "@atlaskit/media-common": "^9.0.0",
@@ -46,11 +46,11 @@
     "@atlaskit/media-ui": "^24.0.0",
     "@atlaskit/media-viewer": "^48.0.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/smart-card": "^26.23.0",
+    "@atlaskit/smart-card": "^26.25.0",
     "@atlaskit/status": "^1.3.0",
     "@atlaskit/task-decision": "^17.8.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.21.0",
+    "@atlaskit/tokens": "^1.22.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -71,7 +71,7 @@
     "@atlaskit/analytics-gas-types": "^5.1.0",
     "@atlaskit/css-reset": "^6.5.0",
     "@atlaskit/link-provider": "^1.6.0",
-    "@atlaskit/link-test-helpers": "^6.0.0",
+    "@atlaskit/link-test-helpers": "^6.1.0",
     "@atlaskit/media-core": "^34.1.0",
     "@atlaskit/media-integration-test-helpers": "^3.0.0",
     "@atlaskit/media-test-helpers": "^33.0.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';