@atlaskit/renderer 112.3.1 → 112.3.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 112.3.2
+
+### Patch Changes
+
+- [#160291](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/160291)
+  [`223443d621e88`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/223443d621e88) -
+  [ux] Fixes default table column widths when table is nested in extension that is nested in layout
+
 ## 112.3.1
 
 ### Patch Changes

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

@@ -11,7 +11,9 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useFeatureFlags = require("../../../use-feature-flags");
+var _rendererContext = require("../../../renderer-context");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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; }
 // we allow scaling down column widths by no more than 30%
@@ -68,7 +70,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     isinsideMultiBodiedExtension = props.isinsideMultiBodiedExtension,
     isTableScalingEnabled = props.isTableScalingEnabled,
     isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled,
-    allowTableResizing = props.allowTableResizing;
+    allowTableResizing = props.allowTableResizing,
+    isTopLevelRenderer = props.isTopLevelRenderer;
   if (!columnWidths) {
     return [];
   }
@@ -76,10 +79,16 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   var noOfColumns = columnWidths.length;
   var targetWidths;
 
+  // This is a fix for ED-23259
+  // Some extensions (for ex: Page Properties or Excerpt) do not renderer tables directly inside themselves. They use ReactRenderer.
+  // So if we add a check like isInsideExtension (similar to exising isInsideBlockNode), it will fail, and to the only way to learn
+  // if the table is rendered inside another node, is to check if the Renderer itself is nested.
+  var isRendererNested = isTopLevelRenderer === false && (0, _platformFeatureFlags.fg)('platform_editor_nested_table_in_nested_parent_fix');
+
   // appearance == comment && allowTableResizing && !tableNode?.attrs.width, means it is a comment
   // appearance == comment && !allowTableResizing && !tableNode?.attrs.width, means it is a inline comment
   // When comment and inline comment table width inherits from the parent container, we want tableContainerWidth === renderWidth
-  var tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) ? renderWidth : (0, _nodeWidth.getTableContainerWidth)(tableNode);
+  var tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) || isRendererNested ? renderWidth : (0, _nodeWidth.getTableContainerWidth)(tableNode);
   if (allowTableResizing && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableColumnResized) {
     // when no columns are resized, each column should have equal width, equals to tableWidth / noOfColumns
     var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
@@ -167,6 +176,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   });
 };
 var Colgroup = exports.Colgroup = function Colgroup(props) {
+  var _useRendererContext = (0, _rendererContext.useRendererContext)(),
+    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
   var columnWidths = props.columnWidths,
     isNumberColumnEnabled = props.isNumberColumnEnabled;
   var flags = (0, _useFeatureFlags.useFeatureFlags)();
@@ -174,6 +185,7 @@ var Colgroup = exports.Colgroup = function Colgroup(props) {
     return null;
   }
   var colStyles = renderScaleDownColgroup(_objectSpread(_objectSpread({}, props), {}, {
+    isTopLevelRenderer: isTopLevelRenderer,
     isTableScalingEnabled: !!(flags && 'tablePreserveWidth' in flags && flags.tablePreserveWidth) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment_jira', true, {

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

@@ -65,7 +65,7 @@ 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 = "112.3.1";
+var packageVersion = "112.3.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -3,7 +3,10 @@ import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common
 import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useFeatureFlags } from '../../../use-feature-flags';
+import { useRendererContext } from '../../../renderer-context';
+
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
 // User A creates a table with column widths → User B views it on a smaller screen
@@ -54,7 +57,8 @@ const renderScaleDownColgroup = props => {
     isinsideMultiBodiedExtension,
     isTableScalingEnabled,
     isTableFixedColumnWidthsOptionEnabled,
-    allowTableResizing
+    allowTableResizing,
+    isTopLevelRenderer
   } = props;
   if (!columnWidths) {
     return [];
@@ -63,10 +67,16 @@ const renderScaleDownColgroup = props => {
   const noOfColumns = columnWidths.length;
   let targetWidths;
 
+  // This is a fix for ED-23259
+  // Some extensions (for ex: Page Properties or Excerpt) do not renderer tables directly inside themselves. They use ReactRenderer.
+  // So if we add a check like isInsideExtension (similar to exising isInsideBlockNode), it will fail, and to the only way to learn
+  // if the table is rendered inside another node, is to check if the Renderer itself is nested.
+  const isRendererNested = isTopLevelRenderer === false && fg('platform_editor_nested_table_in_nested_parent_fix');
+
   // appearance == comment && allowTableResizing && !tableNode?.attrs.width, means it is a comment
   // appearance == comment && !allowTableResizing && !tableNode?.attrs.width, means it is a inline comment
   // When comment and inline comment table width inherits from the parent container, we want tableContainerWidth === renderWidth
-  const tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) ? renderWidth : getTableContainerWidth(tableNode);
+  const tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) || isRendererNested ? renderWidth : getTableContainerWidth(tableNode);
   if (allowTableResizing && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableColumnResized) {
     // when no columns are resized, each column should have equal width, equals to tableWidth / noOfColumns
     const tableWidth = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
@@ -154,6 +164,9 @@ const renderScaleDownColgroup = props => {
   });
 };
 export const Colgroup = props => {
+  const {
+    isTopLevelRenderer
+  } = useRendererContext();
   let {
     columnWidths,
     isNumberColumnEnabled
@@ -164,6 +177,7 @@ export const Colgroup = props => {
   }
   const colStyles = renderScaleDownColgroup({
     ...props,
+    isTopLevelRenderer,
     isTableScalingEnabled: !!(flags && 'tablePreserveWidth' in flags && flags.tablePreserveWidth) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment_jira', true, {

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

@@ -45,7 +45,7 @@ import { countNodes } from './count-nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "112.3.1";
+const packageVersion = "112.3.2";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -6,7 +6,10 @@ import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common
 import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useFeatureFlags } from '../../../use-feature-flags';
+import { useRendererContext } from '../../../renderer-context';
+
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
 // User A creates a table with column widths → User B views it on a smaller screen
@@ -61,7 +64,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     isinsideMultiBodiedExtension = props.isinsideMultiBodiedExtension,
     isTableScalingEnabled = props.isTableScalingEnabled,
     isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled,
-    allowTableResizing = props.allowTableResizing;
+    allowTableResizing = props.allowTableResizing,
+    isTopLevelRenderer = props.isTopLevelRenderer;
   if (!columnWidths) {
     return [];
   }
@@ -69,10 +73,16 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   var noOfColumns = columnWidths.length;
   var targetWidths;
 
+  // This is a fix for ED-23259
+  // Some extensions (for ex: Page Properties or Excerpt) do not renderer tables directly inside themselves. They use ReactRenderer.
+  // So if we add a check like isInsideExtension (similar to exising isInsideBlockNode), it will fail, and to the only way to learn
+  // if the table is rendered inside another node, is to check if the Renderer itself is nested.
+  var isRendererNested = isTopLevelRenderer === false && fg('platform_editor_nested_table_in_nested_parent_fix');
+
   // appearance == comment && allowTableResizing && !tableNode?.attrs.width, means it is a comment
   // appearance == comment && !allowTableResizing && !tableNode?.attrs.width, means it is a inline comment
   // When comment and inline comment table width inherits from the parent container, we want tableContainerWidth === renderWidth
-  var tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) ? renderWidth : getTableContainerWidth(tableNode);
+  var tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) || isRendererNested ? renderWidth : getTableContainerWidth(tableNode);
   if (allowTableResizing && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableColumnResized) {
     // when no columns are resized, each column should have equal width, equals to tableWidth / noOfColumns
     var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
@@ -160,6 +170,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   });
 };
 export var Colgroup = function Colgroup(props) {
+  var _useRendererContext = useRendererContext(),
+    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
   var columnWidths = props.columnWidths,
     isNumberColumnEnabled = props.isNumberColumnEnabled;
   var flags = useFeatureFlags();
@@ -167,6 +179,7 @@ export var Colgroup = function Colgroup(props) {
     return null;
   }
   var colStyles = renderScaleDownColgroup(_objectSpread(_objectSpread({}, props), {}, {
+    isTopLevelRenderer: isTopLevelRenderer,
     isTableScalingEnabled: !!(flags && 'tablePreserveWidth' in flags && flags.tablePreserveWidth) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment_jira', true, {

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

@@ -55,7 +55,7 @@ import { countNodes } from './count-nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "112.3.1";
+var packageVersion = "112.3.2";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "112.3.1",
+	"version": "112.3.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/editor-common": "^94.11.0",
+		"@atlaskit/editor-common": "^94.12.0",
 		"@atlaskit/editor-json-transformer": "^8.20.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-prosemirror": "6.0.0",
@@ -143,6 +143,9 @@
 		},
 		"platform_editor_advanced_layouts_pre_release_2": {
 			"type": "boolean"
+		},
+		"platform_editor_nested_table_in_nested_parent_fix": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {