@atlaskit/renderer 111.1.1 → 111.1.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/renderer
 
+## 111.1.3
+
+### Patch Changes
+
+- [#148476](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148476)
+  [`4a3547a1691e2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4a3547a1691e2) -
+  Reverting change to add onLoadComplete callback for useLoadAnnotations annotations hook
+
+## 111.1.2
+
+### Patch Changes
+
+- [#147736](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147736)
+  [`b6868597a50cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6868597a50cd) -
+  [ux] Fix table resizing when rendering with AK renderer in SSR
+- Updated dependencies
+
 ## 111.1.1
 
 ### Patch Changes

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isTableResizingEnabled = exports.isStickyScrollbarEnabled = exports.default = exports.TableProcessor = exports.TableContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -16,6 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("@atlaskit/editor-common/types");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -327,32 +329,43 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       // Please consider changes below carefully to not negatively impact SSR
       // `renderWidth` cannot be depended on during SSR
       var isRenderWidthValid = !!renderWidth && renderWidth > 0;
+      var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(_style.FullPagePadding, "px * 2") : "100cqw";
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
         if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
-          return isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+          return [isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth, "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
         } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
-          return isRenderWidthValid ? renderWidth : tableContainerWidth;
+          return [isRenderWidthValid ? renderWidth : tableContainerWidth, renderWidthCSS];
         } else {
           // custom width, or width mapped to breakpoint
           var _tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
-          return isRenderWidthValid ? Math.min(_tableContainerWidth, renderWidth) : _tableContainerWidth;
+          return [isRenderWidthValid ? Math.min(_tableContainerWidth, renderWidth) : _tableContainerWidth, "min(".concat(_tableContainerWidth, "px, ").concat(renderWidthCSS, ")")];
         }
       };
-      var tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
+      var _calcDefaultLayoutWid = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode),
+        _calcDefaultLayoutWid2 = (0, _slicedToArray2.default)(_calcDefaultLayoutWid, 2),
+        tableWidth = _calcDefaultLayoutWid2[0],
+        tableWidthCSS = _calcDefaultLayoutWid2[1];
 
       // Logic for table alignment in renderer
       var isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
       var fullWidthLineLength = isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+      var fullWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
       var isCommentAppearanceAndTableAlignmentEnabled = (0, _appearance.isCommentAppearance)(rendererAppearance) && allowTableAlignment;
       var lineLength = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
-      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidth <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
+      var fixTableSSRResizing = (0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing');
+      var tableWidthNew = fixTableSSRResizing ? (0, _nodeWidth.getTableContainerWidth)(tableNode) : tableWidth;
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var leftCSS;
       if (shouldCalculateLeftForAlignment) {
         left = (tableWidth - lineLength) / 2;
+        leftCSS = "(".concat(tableWidthCSS, " - ").concat(lineLengthCSS, ") / 2");
       }
-      if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidth > lineLengthFixedWidth) {
+      if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidthNew > lineLengthFixedWidth) {
         left = lineLengthFixedWidth / 2 - tableWidth / 2;
+        leftCSS = "".concat(lineLengthCSS, " / 2 - ").concat(tableWidthCSS, " / 2");
       }
       var children = _react.default.Children.toArray(this.props.children);
 
@@ -367,7 +380,14 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       } else {
         updatedLayout = layout;
       }
-      var finalTableContainerWidth = allowTableResizing ? tableWidth : 'inherit';
+      var finalTableContainerWidth = allowTableResizing ? tableWidthNew : 'inherit';
+
+      // We can only use CSS to determine the width when we have a known width in container.
+      // When appearance is full-page, full-width or comment we use CSS based width calculation.
+      // Otherwise it's fixed table width (customized width) or inherit.
+      if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width') && fixTableSSRResizing) {
+        finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
+      }
       if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
         // If table alignment is disabled and table width is akEditorDefaultLayoutWidth = 760,
         // it is most likely a table created before "Support Table in Comments" FF was enabled
@@ -376,24 +396,36 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
 
         // !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
         // where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
-        finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== _editorSharedStyles.akEditorDefaultLayoutWidth ? tableWidth : 'inherit';
+        finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== _editorSharedStyles.akEditorDefaultLayoutWidth ? fixTableSSRResizing ? "calc(".concat(tableWidthCSS, ")") : tableWidth : 'inherit';
       }
       if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
         // If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
         // created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
         // instead of 760 that was set on tableNode when the table had been published.
-        finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? tableWidth : 'inherit';
+        finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? fixTableSSRResizing ? "calc(".concat(tableWidthCSS, ")") : tableWidth : 'inherit';
+      }
+      var style;
+      if (fixTableSSRResizing) {
+        style = {
+          width: finalTableContainerWidth,
+          left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
+          marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
+        };
+      } else {
+        style = {
+          width: finalTableContainerWidth,
+          left: left,
+          marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
+        };
       }
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
         "data-layout": updatedLayout,
-        ref: this.props.handleRef,
-        style: {
-          width: finalTableContainerWidth,
-          left: left,
-          marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
-        }
+        ref: this.props.handleRef
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: style
       }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
@@ -438,8 +470,10 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           height: "var(--ds-space-250, 20px)",
           // MAX_BROWSER_SCROLLBAR_HEIGHT
+          // Follow editor to hide by default so it does not show empty gap in SSR
+          // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/editor-plugin-table/src/nodeviews/TableComponent.tsx#957
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          display: 'block',
+          display: fixTableSSRResizing ? 'none' : 'block',
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
           width: '100%'
         }

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -38,8 +38,7 @@ function BreakoutSSRInlineScript() {
   });
 }
 function createBreakoutInlineScript(id) {
-  var shouldFixTableResizing = String(Boolean((0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing')));
-  return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(shouldFixTableResizing, ");\n  })(window);\n");
+  return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(Boolean((0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing')), ");\n  })(window);\n");
 }
 var breakoutInlineScriptContext = exports.breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n  breakoutConsts.FullPagePadding = ").concat(_style.FullPagePadding.toString(), ";\n");
 function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
@@ -80,35 +79,32 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
-          if (node.classList.contains('pm-table-container') && mode === 'custom') {
-            var isFullPage = renderer.classList.contains('is-full-page');
-            var rendererWidth = renderer.offsetWidth;
-            var effectiveWidth;
-            if (shouldFixTableResizing) {
-              // Logic from https://stash.atlassian.com/projects/atlassian/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/renderer/src/react/nodes/table.tsx?at=d3af2ef54521ccf10e9b094996ad9528ec05c7e3#610
-              effectiveWidth = isFullPage ? rendererWidth - 2 * breakoutConsts.FullPagePadding : rendererWidth;
+
+          // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
+          if (!shouldFixTableResizing) {
+            if (node.classList.contains('pm-table-container') && mode === 'custom') {
+              var rendererWidth = renderer.offsetWidth;
+              var effectiveWidth = rendererWidth - breakoutConsts.padding;
+              width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
             } else {
-              effectiveWidth = rendererWidth - breakoutConsts.padding;
+              width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
             }
-            width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
-          } else {
-            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
-          }
-          if (node.style.width === width) {
-            return;
-          }
-          node.style.width = width;
+            if (node.style.width === width) {
+              return;
+            }
+            node.style.width = width;
 
-          // 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') && !renderer.classList.contains('is-full-width')) {
-            var lineLength = breakoutConsts.calcLineLength();
-            var left = lineLength / 2 - parseInt(width) / 2;
-            if (left < 0 && parseInt(width) > lineLength) {
-              node.style.left = left + 'px';
-            } else {
-              node.style.left = '';
+            // 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') && !renderer.classList.contains('is-full-width')) {
+              var lineLength = breakoutConsts.calcLineLength();
+              var left = lineLength / 2 - parseInt(width) / 2;
+              if (left < 0 && parseInt(width) > lineLength) {
+                node.style.left = left + 'px';
+              } else {
+                node.style.left = '';
+              }
             }
           }
         });
@@ -124,16 +120,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
         applyMediaBreakout(item.target);
       }
     });
-
-    // Renderer is initially set to hidden until we figure out the proper width in packages/editor/editor-common/src/ui/WidthProvider/index.tsx
-    if (renderer.style.visibility === 'hidden') {
-      // Hiding until we get the correct width. But didn't remove them from the DOM so vertical scrollbar can still be correctly calculated.
-      renderer.style.visibility = '';
-      // Since we don't have a screen width to use as initial value.
-      // The width is set to a fix number. This will cause horizontal scrollbar to appear.
-      // Hide it until we have the correct width.
-      renderer.style.overflowX = '';
-    }
   });
   var applyMediaBreakout = function applyMediaBreakout(card) {
     // width was already set by another breakout script
@@ -164,9 +150,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
     childList: true,
     subtree: true
   });
-  if (shouldFixTableResizing) {
-    window.__SSR_BREAKOUT_OBSERVED = true;
-  }
 
   /**
    * Using window load event to unsubscribe from mutation observer, as at this stage document is fully rendered.

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

@@ -65,7 +65,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "111.1.1";
+var packageVersion = "111.1.3";
+var setAsQueryContainerStyles = (0, _react2.css)({
+  containerName: 'ak-renderer-wrapper',
+  containerType: 'inline-size',
+  contain: 'layout style inline-size'
+});
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 
 /**
@@ -499,26 +504,26 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     // We must check if window is defined, if it isn't we are in a SSR environment
     // and we don't want to add the telepointer
     if (typeof window !== 'undefined' && addTelepointer && innerRef !== null && innerRef !== void 0 && innerRef.current) {
-      var renderer = innerRef.current.querySelector('.ak-renderer-document');
+      var _renderer = innerRef.current.querySelector('.ak-renderer-document');
       if (initialUpdate.current) {
-        var lastChild = renderer.lastChild;
+        var lastChild = _renderer.lastChild;
         lastChild && lastChild.appendChild(createTelepointer());
       }
       var mutateTelepointer = function mutateTelepointer(mutations) {
         mutations.forEach(function (mutation) {
           if (initialUpdate.current) {
-            var oldTelepointer = renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
+            var oldTelepointer = _renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
             if (oldTelepointer) {
               oldTelepointer.remove();
             }
-            var _lastChild = renderer.lastChild;
+            var _lastChild = _renderer.lastChild;
             _lastChild && _lastChild.appendChild(createTelepointer());
             initialUpdate.current = false;
           }
           if (mutation.type === 'characterData') {
             var parentNode = mutation.target.parentElement;
             if (parentNode) {
-              var _oldTelepointer = renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
+              var _oldTelepointer = _renderer.querySelector("#".concat(_style.TELEPOINTER_ID));
               if (_oldTelepointer) {
                 _oldTelepointer.remove();
               }
@@ -539,7 +544,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
       };
     }
   }, [innerRef, addTelepointer]);
-  return (0, _react2.jsx)(_ui.WidthProvider
+  var renderer = (0, _react2.jsx)(_ui.WidthProvider
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "ak-renderer-wrapper is-".concat(appearance),
@@ -564,6 +569,17 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
       allowTableResizing: allowTableResizing
     })
   }, children))));
+
+  // We can only make the wrapper div query container when we have a known width.
+  // This is also required for SSR to work correctly. As WidthProvider/WithConsumer will not have the correct width during SSR.
+  //
+  // We are setting this wrapper div as query container conditionally.
+  // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
+  // Otherwise when appearance is unspecified the renderer size is decided by the content.
+  // In this case we can't set the container-type = inline-size as it will collapse width to 0.
+  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') && (0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing') ? (0, _react2.jsx)("div", {
+    css: setAsQueryContainerStyles
+  }, renderer) : renderer;
 });
 var RootRendererContext = /*#__PURE__*/_react.default.createContext(null);
 function RendererActionsInternalUpdater(_ref) {

package/dist/cjs/ui/annotations/hooks/use-load-annotations.js

@@ -14,8 +14,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useLoadAnnotations = exports.useLoadAnnotations = function useLoadAnnotations(_ref) {
   var adfDocument = _ref.adfDocument,
-    isNestedRender = _ref.isNestedRender,
-    onLoadComplete = _ref.onLoadComplete;
+    isNestedRender = _ref.isNestedRender;
   var actions = (0, _react.useContext)(_RendererActionsContext.RendererContext);
   var providers = (0, _react.useContext)(_context.ProvidersContext);
   (0, _react.useEffect)(function () {
@@ -28,9 +27,6 @@ var useLoadAnnotations = exports.useLoadAnnotations = function useLoadAnnotation
     var annotations = actions.getAnnotationMarks();
     // we don't want to request integrators for state with an empty list of ids.
     if (!annotations.length) {
-      onLoadComplete && onLoadComplete({
-        numberOfUnresolvedInlineComments: 0
-      });
       return;
     }
     var ids = annotations.map(function (mark) {
@@ -44,12 +40,7 @@ var useLoadAnnotations = exports.useLoadAnnotations = function useLoadAnnotation
         return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, value.id, value));
       }, {});
       updateSubscriberInlineComment.emit(_types.AnnotationUpdateEvent.SET_ANNOTATION_STATE, payload);
-      onLoadComplete && onLoadComplete({
-        numberOfUnresolvedInlineComments: data.filter(function (data) {
-          return data.state === 'active';
-        }).length
-      });
     };
     inlineCommentGetState(ids, isNestedRender).then(cb);
-  }, [actions, providers, adfDocument, isNestedRender, onLoadComplete]);
+  }, [actions, providers, adfDocument, isNestedRender]);
 };

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

@@ -31,12 +31,10 @@ var _draft = require("./draft");
 var _element = require("./element");
 var LoadAnnotations = /*#__PURE__*/_react.default.memo(function (_ref) {
   var adfDocument = _ref.adfDocument,
-    isNestedRender = _ref.isNestedRender,
-    onLoadComplete = _ref.onLoadComplete;
+    isNestedRender = _ref.isNestedRender;
   (0, _useLoadAnnotations.useLoadAnnotations)({
     adfDocument: adfDocument,
-    isNestedRender: isNestedRender,
-    onLoadComplete: onLoadComplete
+    isNestedRender: isNestedRender
   });
   return null;
 });
@@ -54,8 +52,7 @@ var AnnotationsWrapper = exports.AnnotationsWrapper = function AnnotationsWrappe
     annotationProvider = props.annotationProvider,
     rendererRef = props.rendererRef,
     adfDocument = props.adfDocument,
-    isNestedRender = props.isNestedRender,
-    onLoadComplete = props.onLoadComplete;
+    isNestedRender = props.isNestedRender;
   var updateSubscriber = annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.updateSubscriber;
   var inlineCommentAnnotationsState = (0, _useEvents.useAnnotationStateByTypeEvent)({
     type: _adfSchema.AnnotationTypes.INLINE_COMMENT,
@@ -74,8 +71,7 @@ var AnnotationsWrapper = exports.AnnotationsWrapper = function AnnotationsWrappe
     rendererRef: rendererRef
   }, /*#__PURE__*/_react.default.createElement(LoadAnnotations, {
     adfDocument: adfDocument,
-    isNestedRender: isNestedRender,
-    onLoadComplete: onLoadComplete
+    isNestedRender: isNestedRender
   }), /*#__PURE__*/_react.default.createElement(_view.AnnotationView, {
     createAnalyticsEvent: createAnalyticsEvent
   }), children)))));

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

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -272,32 +273,40 @@ export class TableContainer extends React.Component {
     // Please consider changes below carefully to not negatively impact SSR
     // `renderWidth` cannot be depended on during SSR
     const isRenderWidthValid = !!renderWidth && renderWidth > 0;
+    const renderWidthCSS = rendererAppearance === 'full-page' ? `100cqw - ${FullPagePadding}px * 2` : `100cqw`;
     const calcDefaultLayoutWidthByAppearance = (rendererAppearance, tableNode) => {
       if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
-        return isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+        return [isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth, `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`];
       } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
         const tableContainerWidth = getTableContainerWidth(tableNode);
-        return isRenderWidthValid ? renderWidth : tableContainerWidth;
+        return [isRenderWidthValid ? renderWidth : tableContainerWidth, renderWidthCSS];
       } else {
         // custom width, or width mapped to breakpoint
         const tableContainerWidth = getTableContainerWidth(tableNode);
-        return isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth;
+        return [isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth, `min(${tableContainerWidth}px, ${renderWidthCSS})`];
       }
     };
-    const tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
+    const [tableWidth, tableWidthCSS] = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
 
     // Logic for table alignment in renderer
     const isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
     const fullWidthLineLength = isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+    const fullWidthLineLengthCSS = `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`;
     const commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
     const isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
-    let lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
-    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidth <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+    const lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
+    const lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : `${lineLengthFixedWidth}px`;
+    const fixTableSSRResizing = fg('platform-fix-table-ssr-resizing');
+    const tableWidthNew = fixTableSSRResizing ? getTableContainerWidth(tableNode) : tableWidth;
+    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+    let leftCSS;
     if (shouldCalculateLeftForAlignment) {
       left = (tableWidth - lineLength) / 2;
+      leftCSS = `(${tableWidthCSS} - ${lineLengthCSS}) / 2`;
     }
-    if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidth > lineLengthFixedWidth) {
+    if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidthNew > lineLengthFixedWidth) {
       left = lineLengthFixedWidth / 2 - tableWidth / 2;
+      leftCSS = `${lineLengthCSS} / 2 - ${tableWidthCSS} / 2`;
     }
     const children = React.Children.toArray(this.props.children);
 
@@ -312,7 +321,14 @@ export class TableContainer extends React.Component {
     } else {
       updatedLayout = layout;
     }
-    let finalTableContainerWidth = allowTableResizing ? tableWidth : 'inherit';
+    let finalTableContainerWidth = allowTableResizing ? tableWidthNew : 'inherit';
+
+    // We can only use CSS to determine the width when we have a known width in container.
+    // When appearance is full-page, full-width or comment we use CSS based width calculation.
+    // Otherwise it's fixed table width (customized width) or inherit.
+    if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width') && fixTableSSRResizing) {
+      finalTableContainerWidth = allowTableResizing ? `calc(${tableWidthCSS})` : 'inherit';
+    }
     if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
       // If table alignment is disabled and table width is akEditorDefaultLayoutWidth = 760,
       // it is most likely a table created before "Support Table in Comments" FF was enabled
@@ -321,24 +337,36 @@ export class TableContainer extends React.Component {
 
       // !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
       // where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
-      finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== akEditorDefaultLayoutWidth ? tableWidth : 'inherit';
+      finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== akEditorDefaultLayoutWidth ? fixTableSSRResizing ? `calc(${tableWidthCSS})` : tableWidth : 'inherit';
     }
     if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
       // If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
       // created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
       // instead of 760 that was set on tableNode when the table had been published.
-      finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? tableWidth : 'inherit';
+      finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? fixTableSSRResizing ? `calc(${tableWidthCSS})` : tableWidth : 'inherit';
+    }
+    let style;
+    if (fixTableSSRResizing) {
+      style = {
+        width: finalTableContainerWidth,
+        left: leftCSS ? `calc(${leftCSS})` : undefined,
+        marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? `calc(-1 * (${leftCSS}))` : undefined
+      };
+    } else {
+      style = {
+        width: finalTableContainerWidth,
+        left: left,
+        marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
+      };
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
       "data-layout": updatedLayout,
-      ref: this.props.handleRef,
-      style: {
-        width: finalTableContainerWidth,
-        left: left,
-        marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
-      }
+      ref: this.props.handleRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: style
     }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
@@ -383,8 +411,10 @@ export class TableContainer extends React.Component {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         height: "var(--ds-space-250, 20px)",
         // MAX_BROWSER_SCROLLBAR_HEIGHT
+        // Follow editor to hide by default so it does not show empty gap in SSR
+        // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/editor-plugin-table/src/nodeviews/TableComponent.tsx#957
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        display: 'block',
+        display: fixTableSSRResizing ? 'none' : 'block',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         width: '100%'
       }