@atlaskit/renderer 109.29.4 → 109.29.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 109.29.5
+
+### Patch Changes
+
+-   [#103178](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103178)
+    [`71c9ef285341`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/71c9ef285341) -
+    ED-22930: Support for table alignment in renderer
+
 ## 109.29.4
 
 ### Patch Changes

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

@@ -298,7 +298,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
         isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension;
       var stickyMode = this.state.stickyMode;
-      var lineLength = _editorSharedStyles.akEditorDefaultLayoutWidth;
+      var lineLengthFixedWidth = _editorSharedStyles.akEditorDefaultLayoutWidth;
       var left;
       var updatedLayout;
 
@@ -316,8 +316,17 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         }
       };
       var tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
-      if (canUseLinelength(rendererAppearance) && tableWidth > lineLength) {
-        left = lineLength / 2 - tableWidth / 2;
+
+      // Logic for table alignment in renderer
+      var isTableAlignStart = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.allow-table-alignment') && (0, _appearance.isFullWidthOrFullPageAppearance)(rendererAppearance) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start';
+      var fullWidthLineLength = isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+      var lineLength = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLength : lineLengthFixedWidth;
+      var shouldCalculateLeftForAlignment = isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidth <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance));
+      if (shouldCalculateLeftForAlignment) {
+        left = (tableWidth - lineLength) / 2;
+      }
+      if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidth > lineLengthFixedWidth) {
+        left = lineLengthFixedWidth / 2 - tableWidth / 2;
       }
       var children = _react.default.Children.toArray(this.props.children);
 
@@ -338,8 +347,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         ref: this.props.handleRef,
         style: {
           width: isTableResizingEnabled(rendererAppearance) ? tableWidth : 'inherit',
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-          left: left
+          left: left,
+          marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
         }
       }, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,

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

@@ -56,7 +56,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 = "109.29.4";
+var packageVersion = "109.29.5";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);

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

@@ -13,7 +13,7 @@ import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
-import { isFullWidthOrFullPageAppearance } from '../utils/appearance';
+import { isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
 export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance);
 const orderChildren = (children, tableNode, smartCardStorage, tableOrderStatus) => {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
@@ -245,7 +245,7 @@ export class TableContainer extends React.Component {
     const {
       stickyMode
     } = this.state;
-    const lineLength = akEditorDefaultLayoutWidth;
+    const lineLengthFixedWidth = akEditorDefaultLayoutWidth;
     let left;
     let updatedLayout;
 
@@ -263,8 +263,17 @@ export class TableContainer extends React.Component {
       }
     };
     const tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
-    if (canUseLinelength(rendererAppearance) && tableWidth > lineLength) {
-      left = lineLength / 2 - tableWidth / 2;
+
+    // Logic for table alignment in renderer
+    const isTableAlignStart = getBooleanFF('platform.editor.table.allow-table-alignment') && isFullWidthOrFullPageAppearance(rendererAppearance) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start';
+    const fullWidthLineLength = isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+    const lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : lineLengthFixedWidth;
+    const shouldCalculateLeftForAlignment = isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidth <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance));
+    if (shouldCalculateLeftForAlignment) {
+      left = (tableWidth - lineLength) / 2;
+    }
+    if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidth > lineLengthFixedWidth) {
+      left = lineLengthFixedWidth / 2 - tableWidth / 2;
     }
     const children = React.Children.toArray(this.props.children);
 
@@ -285,8 +294,8 @@ export class TableContainer extends React.Component {
       ref: this.props.handleRef,
       style: {
         width: isTableResizingEnabled(rendererAppearance) ? tableWidth : 'inherit',
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-        left
+        left: left,
+        marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
       }
     }, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
       isNumberColumnEnabled: isNumberColumnEnabled,

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

@@ -37,7 +37,7 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.29.4";
+const packageVersion = "109.29.5";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {

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

@@ -24,7 +24,7 @@ import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
-import { isFullWidthOrFullPageAppearance } from '../utils/appearance';
+import { isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
 export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
   return isFullWidthOrFullPageAppearance(appearance);
 };
@@ -291,7 +291,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
         isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension;
       var stickyMode = this.state.stickyMode;
-      var lineLength = akEditorDefaultLayoutWidth;
+      var lineLengthFixedWidth = akEditorDefaultLayoutWidth;
       var left;
       var updatedLayout;
 
@@ -309,8 +309,17 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         }
       };
       var tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
-      if (canUseLinelength(rendererAppearance) && tableWidth > lineLength) {
-        left = lineLength / 2 - tableWidth / 2;
+
+      // Logic for table alignment in renderer
+      var isTableAlignStart = getBooleanFF('platform.editor.table.allow-table-alignment') && isFullWidthOrFullPageAppearance(rendererAppearance) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start';
+      var fullWidthLineLength = isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+      var lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : lineLengthFixedWidth;
+      var shouldCalculateLeftForAlignment = isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidth <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance));
+      if (shouldCalculateLeftForAlignment) {
+        left = (tableWidth - lineLength) / 2;
+      }
+      if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidth > lineLengthFixedWidth) {
+        left = lineLengthFixedWidth / 2 - tableWidth / 2;
       }
       var children = React.Children.toArray(this.props.children);
 
@@ -331,8 +340,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         ref: this.props.handleRef,
         style: {
           width: isTableResizingEnabled(rendererAppearance) ? tableWidth : 'inherit',
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-          left: left
+          left: left,
+          marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
         }
       }, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,

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

@@ -47,7 +47,7 @@ import { nodeToReact } from '../../react/nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.29.4";
+var packageVersion = "109.29.5";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.29.4",
+  "version": "109.29.5",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,9 +29,9 @@
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/button": "^17.16.0",
+    "@atlaskit/button": "^17.17.0",
     "@atlaskit/code": "^15.2.0",
-    "@atlaskit/editor-common": "^81.0.0",
+    "@atlaskit/editor-common": "^81.1.0",
     "@atlaskit/editor-json-transformer": "^8.13.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
@@ -143,6 +143,9 @@
     },
     "platform.editor.table.preserve-widths-with-lock-button": {
       "type": "boolean"
+    },
+    "platform.editor.table.allow-table-alignment": {
+      "type": "boolean"
     }
   },
   "af:exports": {