@atlaskit/renderer 109.51.4 → 109.51.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/react/nodes/table/colgroup.js +10 -6
  3. package/dist/cjs/react/nodes/table.js +15 -2
  4. package/dist/cjs/ui/Renderer/index.js +1 -1
  5. package/dist/cjs/ui/Renderer/style.js +1 -1
  6. package/dist/es2019/react/nodes/table/colgroup.js +10 -6
  7. package/dist/es2019/react/nodes/table.js +15 -2
  8. package/dist/es2019/ui/Renderer/index.js +1 -1
  9. package/dist/es2019/ui/Renderer/style.js +1 -1
  10. package/dist/esm/react/nodes/table/colgroup.js +10 -6
  11. package/dist/esm/react/nodes/table.js +15 -2
  12. package/dist/esm/ui/Renderer/index.js +1 -1
  13. package/dist/esm/ui/Renderer/style.js +1 -1
  14. package/package.json +4 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 109.51.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#136023](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136023)
8
+ [`462ac84782509`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/462ac84782509) -
9
+ ED-24794: Fixed numbered column tables not scaling down in renderer
10
+ - [#137344](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137344)
11
+ [`00c81bdf34c46`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/00c81bdf34c46) -
12
+ [ux] Fixes an issue where tables that existed before "Support Table in Comment" are displayed as
13
+ centered 760px width tables when FF for Support Table in Comment is enabled.
14
+
15
+ ## 109.51.5
16
+
17
+ ### Patch Changes
18
+
19
+ - [#136410](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136410)
20
+ [`52083ca79b5dc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/52083ca79b5dc) -
21
+ [ux] ED-24603 Disable dragging nested nodes within table behind FF
22
+
3
23
  ## 109.51.4
4
24
 
5
25
  ### Patch Changes
package/dist/cjs/react/nodes/table/colgroup.js CHANGED
@@ -43,9 +43,14 @@ var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWi
43
43
  var calcScalePercent = function calcScalePercent(_ref) {
44
44
  var renderWidth = _ref.renderWidth,
45
45
  tableWidth = _ref.tableWidth,
46
- maxScale = _ref.maxScale;
47
- var diffPercent = 1 - renderWidth / tableWidth;
48
- return diffPercent < maxScale ? diffPercent : maxScale;
46
+ maxScale = _ref.maxScale,
47
+ isNumberColumnEnabled = _ref.isNumberColumnEnabled;
48
+ var noNumColumnScalePercent = renderWidth / tableWidth;
49
+ // when numbered column is enabled, we need to calculate the scale percent without the akEditorTableNumberColumnWidth
50
+ // As numbered column width is not scaled down
51
+ var numColumnScalePercent = (renderWidth - _editorSharedStyles.akEditorTableNumberColumnWidth) / (tableWidth - _editorSharedStyles.akEditorTableNumberColumnWidth);
52
+ var diffPercent = 1 - noNumColumnScalePercent;
53
+ return diffPercent < maxScale ? isNumberColumnEnabled ? 1 - numColumnScalePercent : diffPercent : maxScale;
49
54
  };
50
55
  var colWidthSum = function colWidthSum(columnWidths) {
51
56
  return columnWidths.reduce(function (prev, curr) {
@@ -67,8 +72,6 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
67
72
  if (!columnWidths) {
68
73
  return [];
69
74
  }
70
-
71
- // isTableColumnResized checks if table columns were resized
72
75
  var tableColumnResized = isTableColumnResized(columnWidths);
73
76
  var noOfColumns = columnWidths.length;
74
77
  var targetWidths;
@@ -151,7 +154,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
151
154
  scaleDownPercent = calcScalePercent({
152
155
  renderWidth: renderWidth,
153
156
  tableWidth: tableWidth,
154
- maxScale: shouldTable100ScaleDown ? 1 : maxScalingPercent
157
+ maxScale: shouldTable100ScaleDown ? 1 : maxScalingPercent,
158
+ isNumberColumnEnabled: isNumberColumnEnabled
155
159
  });
156
160
  }
157
161
  return targetWidths.map(function (colWidth) {
package/dist/cjs/react/nodes/table.js CHANGED
@@ -349,8 +349,21 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
349
349
  updatedLayout = layout;
350
350
  }
351
351
  var finalTableContainerWidth = allowTableResizing ? tableWidth : 'inherit';
352
- if (rendererAppearance === 'comment' && allowTableResizing) {
353
- finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? tableWidth : 'inherit';
352
+ if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
353
+ // If table alignment is disabled and table width is akEditorDefaultLayoutWidth = 760,
354
+ // it is most likely a table created before "Support Table in Comments" FF was enabled
355
+ // and we would see a bug ED-24795. A table created before "Support Table in Comments",
356
+ // should inhirit the width of the renderer container.
357
+
358
+ // !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
359
+ // where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
360
+ finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== _editorSharedStyles.akEditorDefaultLayoutWidth ? tableWidth : 'inherit';
361
+ }
362
+ if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
363
+ // If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
364
+ // created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
365
+ // instead of 760 that was set on tableNode when the table had been published.
366
+ 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';
354
367
  }
355
368
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
356
369
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -60,7 +60,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
60
60
  var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
61
61
  var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
62
62
  var packageName = "@atlaskit/renderer";
63
- var packageVersion = "109.51.4";
63
+ var packageVersion = "109.51.6";
64
64
  var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
65
65
  var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
66
66
  (0, _inherits2.default)(Renderer, _PureComponent);
package/dist/cjs/ui/Renderer/style.js CHANGED
@@ -85,7 +85,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
85
85
  if (allowNestedHeaderLinks) {
86
86
  headingsCss = "\n /**\n * When the sort button is enabled we want the heading's copy link button\n * to reserve space so that it can prematurely wrap to avoid the button\n * being displayed underneath the sort button (hidden or obscured).\n *\n * The two buttons fight each other since the sort button is displayed\n * on hover of the <th /> and the copy link button is displayed on hover\n * of the heading.\n *\n * Note that this can break the WYSIWYG experience in the case where\n * a heading fills the width of the table cell and the only thing which\n * wraps is the copy link button. This is hopefully a rare fringe case.\n */\n .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n position: unset;\n }\n > {\n h1, h2, h3, h4, h5, h6 {\n margin-right: 30px;\n }\n }\n ");
87
87
  }
88
- return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", ";\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin: 0;\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, (0, _platformFeatureFlags.fg)('platform_editor_tables_padding_increase') ? "".concat(_styles.tableCellPadding, "px ", "var(--ds-space-250, 20px)") : "".concat(_styles.tableCellPadding, "px"), "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME);
88
+ return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", ";\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin: 0;\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, (0, _experiments.editorExperiment)('table-nested-dnd', true) ? "".concat(_styles.tableCellPadding, "px ", "var(--ds-space-250, 20px)") : "".concat(_styles.tableCellPadding, "px"), "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME);
89
89
  };
90
90
  var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
91
91
  var appearance = _ref3.appearance;
package/dist/es2019/react/nodes/table/colgroup.js CHANGED
@@ -31,10 +31,15 @@ const fixColumnWidth = (columnWidth, _tableWidth, _layoutWidth, zeroWidthColumns
31
31
  const calcScalePercent = ({
32
32
  renderWidth,
33
33
  tableWidth,
34
- maxScale
34
+ maxScale,
35
+ isNumberColumnEnabled
35
36
  }) => {
36
- const diffPercent = 1 - renderWidth / tableWidth;
37
- return diffPercent < maxScale ? diffPercent : maxScale;
37
+ const noNumColumnScalePercent = renderWidth / tableWidth;
38
+ // when numbered column is enabled, we need to calculate the scale percent without the akEditorTableNumberColumnWidth
39
+ // As numbered column width is not scaled down
40
+ const numColumnScalePercent = (renderWidth - akEditorTableNumberColumnWidth) / (tableWidth - akEditorTableNumberColumnWidth);
41
+ const diffPercent = 1 - noNumColumnScalePercent;
42
+ return diffPercent < maxScale ? isNumberColumnEnabled ? 1 - numColumnScalePercent : diffPercent : maxScale;
38
43
  };
39
44
  const colWidthSum = columnWidths => columnWidths.reduce((prev, curr) => curr + prev, 0);
40
45
  const renderScaleDownColgroup = props => {
@@ -54,8 +59,6 @@ const renderScaleDownColgroup = props => {
54
59
  if (!columnWidths) {
55
60
  return [];
56
61
  }
57
-
58
- // isTableColumnResized checks if table columns were resized
59
62
  const tableColumnResized = isTableColumnResized(columnWidths);
60
63
  const noOfColumns = columnWidths.length;
61
64
  let targetWidths;
@@ -138,7 +141,8 @@ const renderScaleDownColgroup = props => {
138
141
  scaleDownPercent = calcScalePercent({
139
142
  renderWidth,
140
143
  tableWidth,
141
- maxScale: shouldTable100ScaleDown ? 1 : maxScalingPercent
144
+ maxScale: shouldTable100ScaleDown ? 1 : maxScalingPercent,
145
+ isNumberColumnEnabled: isNumberColumnEnabled
142
146
  });
143
147
  }
144
148
  return targetWidths.map(colWidth => {
package/dist/es2019/react/nodes/table.js CHANGED
@@ -296,8 +296,21 @@ export class TableContainer extends React.Component {
296
296
  updatedLayout = layout;
297
297
  }
298
298
  let finalTableContainerWidth = allowTableResizing ? tableWidth : 'inherit';
299
- if (rendererAppearance === 'comment' && allowTableResizing) {
300
- finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? tableWidth : 'inherit';
299
+ if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
300
+ // If table alignment is disabled and table width is akEditorDefaultLayoutWidth = 760,
301
+ // it is most likely a table created before "Support Table in Comments" FF was enabled
302
+ // and we would see a bug ED-24795. A table created before "Support Table in Comments",
303
+ // should inhirit the width of the renderer container.
304
+
305
+ // !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
306
+ // where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
307
+ finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== akEditorDefaultLayoutWidth ? tableWidth : 'inherit';
308
+ }
309
+ if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
310
+ // If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
311
+ // created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
312
+ // instead of 760 that was set on tableNode when the table had been published.
313
+ 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';
301
314
  }
302
315
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
303
316
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
package/dist/es2019/ui/Renderer/index.js CHANGED
@@ -42,7 +42,7 @@ import { nodeToReact } from '../../react/nodes';
42
42
  export const NORMAL_SEVERITY_THRESHOLD = 2000;
43
43
  export const DEGRADED_SEVERITY_THRESHOLD = 3000;
44
44
  const packageName = "@atlaskit/renderer";
45
- const packageVersion = "109.51.4";
45
+ const packageVersion = "109.51.6";
46
46
  export const defaultNodeComponents = nodeToReact;
47
47
  export class Renderer extends PureComponent {
48
48
  constructor(props) {
package/dist/es2019/ui/Renderer/style.js CHANGED
@@ -224,7 +224,7 @@ const tableSortableColumnStyle = ({
224
224
  .${RendererCssClassName.SORTABLE_COLUMN} {
225
225
  width: 100%;
226
226
  height: 100%;
227
- padding: ${fg('platform_editor_tables_padding_increase') ? `${tableCellPadding}px ${"var(--ds-space-250, 20px)"}` : `${tableCellPadding}px`};
227
+ padding: ${editorExperiment('table-nested-dnd', true) ? `${tableCellPadding}px ${"var(--ds-space-250, 20px)"}` : `${tableCellPadding}px`};
228
228
  border-width: 1.5px;
229
229
  border-style: solid;
230
230
  border-color: transparent;
package/dist/esm/react/nodes/table/colgroup.js CHANGED
@@ -36,9 +36,14 @@ var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWi
36
36
  var calcScalePercent = function calcScalePercent(_ref) {
37
37
  var renderWidth = _ref.renderWidth,
38
38
  tableWidth = _ref.tableWidth,
39
- maxScale = _ref.maxScale;
40
- var diffPercent = 1 - renderWidth / tableWidth;
41
- return diffPercent < maxScale ? diffPercent : maxScale;
39
+ maxScale = _ref.maxScale,
40
+ isNumberColumnEnabled = _ref.isNumberColumnEnabled;
41
+ var noNumColumnScalePercent = renderWidth / tableWidth;
42
+ // when numbered column is enabled, we need to calculate the scale percent without the akEditorTableNumberColumnWidth
43
+ // As numbered column width is not scaled down
44
+ var numColumnScalePercent = (renderWidth - akEditorTableNumberColumnWidth) / (tableWidth - akEditorTableNumberColumnWidth);
45
+ var diffPercent = 1 - noNumColumnScalePercent;
46
+ return diffPercent < maxScale ? isNumberColumnEnabled ? 1 - numColumnScalePercent : diffPercent : maxScale;
42
47
  };
43
48
  var colWidthSum = function colWidthSum(columnWidths) {
44
49
  return columnWidths.reduce(function (prev, curr) {
@@ -60,8 +65,6 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
60
65
  if (!columnWidths) {
61
66
  return [];
62
67
  }
63
-
64
- // isTableColumnResized checks if table columns were resized
65
68
  var tableColumnResized = isTableColumnResized(columnWidths);
66
69
  var noOfColumns = columnWidths.length;
67
70
  var targetWidths;
@@ -144,7 +147,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
144
147
  scaleDownPercent = calcScalePercent({
145
148
  renderWidth: renderWidth,
146
149
  tableWidth: tableWidth,
147
- maxScale: shouldTable100ScaleDown ? 1 : maxScalingPercent
150
+ maxScale: shouldTable100ScaleDown ? 1 : maxScalingPercent,
151
+ isNumberColumnEnabled: isNumberColumnEnabled
148
152
  });
149
153
  }
150
154
  return targetWidths.map(function (colWidth) {
package/dist/esm/react/nodes/table.js CHANGED
@@ -342,8 +342,21 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
342
342
  updatedLayout = layout;
343
343
  }
344
344
  var finalTableContainerWidth = allowTableResizing ? tableWidth : 'inherit';
345
- if (rendererAppearance === 'comment' && allowTableResizing) {
346
- finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? tableWidth : 'inherit';
345
+ if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
346
+ // If table alignment is disabled and table width is akEditorDefaultLayoutWidth = 760,
347
+ // it is most likely a table created before "Support Table in Comments" FF was enabled
348
+ // and we would see a bug ED-24795. A table created before "Support Table in Comments",
349
+ // should inhirit the width of the renderer container.
350
+
351
+ // !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
352
+ // where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
353
+ finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== akEditorDefaultLayoutWidth ? tableWidth : 'inherit';
354
+ }
355
+ if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
356
+ // If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
357
+ // created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
358
+ // instead of 760 that was set on tableNode when the table had been published.
359
+ 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';
347
360
  }
348
361
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
349
362
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
package/dist/esm/ui/Renderer/index.js CHANGED
@@ -52,7 +52,7 @@ import { nodeToReact } from '../../react/nodes';
52
52
  export var NORMAL_SEVERITY_THRESHOLD = 2000;
53
53
  export var DEGRADED_SEVERITY_THRESHOLD = 3000;
54
54
  var packageName = "@atlaskit/renderer";
55
- var packageVersion = "109.51.4";
55
+ var packageVersion = "109.51.6";
56
56
  export var defaultNodeComponents = nodeToReact;
57
57
  export var Renderer = /*#__PURE__*/function (_PureComponent) {
58
58
  _inherits(Renderer, _PureComponent);
package/dist/esm/ui/Renderer/style.js CHANGED
@@ -76,7 +76,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
76
76
  if (allowNestedHeaderLinks) {
77
77
  headingsCss = "\n /**\n * When the sort button is enabled we want the heading's copy link button\n * to reserve space so that it can prematurely wrap to avoid the button\n * being displayed underneath the sort button (hidden or obscured).\n *\n * The two buttons fight each other since the sort button is displayed\n * on hover of the <th /> and the copy link button is displayed on hover\n * of the heading.\n *\n * Note that this can break the WYSIWYG experience in the case where\n * a heading fills the width of the table cell and the only thing which\n * wraps is the copy link button. This is hopefully a rare fringe case.\n */\n .".concat(HeadingAnchorWrapperClassName, " {\n position: unset;\n }\n > {\n h1, h2, h3, h4, h5, h6 {\n margin-right: 30px;\n }\n }\n ");
78
78
  }
79
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", ";\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin: 0;\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, fg('platform_editor_tables_padding_increase') ? "".concat(tableCellPadding, "px ", "var(--ds-space-250, 20px)") : "".concat(tableCellPadding, "px"), "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME);
79
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", ";\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin: 0;\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, editorExperiment('table-nested-dnd', true) ? "".concat(tableCellPadding, "px ", "var(--ds-space-250, 20px)") : "".concat(tableCellPadding, "px"), "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME);
80
80
  };
81
81
  var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
82
82
  var appearance = _ref3.appearance;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "109.51.4",
3
+ "version": "109.51.6",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/emoji": "^67.7.0",
38
38
  "@atlaskit/feature-gate-js-client": "^4.18.0",
39
39
  "@atlaskit/icon": "^22.15.0",
40
- "@atlaskit/link-datasource": "^2.11.0",
40
+ "@atlaskit/link-datasource": "^2.12.0",
41
41
  "@atlaskit/media-card": "^78.2.0",
42
42
  "@atlaskit/media-client": "^27.6.0",
43
43
  "@atlaskit/media-client-react": "^2.2.0",
@@ -46,7 +46,7 @@
46
46
  "@atlaskit/media-ui": "^25.11.0",
47
47
  "@atlaskit/media-viewer": "^48.7.0",
48
48
  "@atlaskit/platform-feature-flags": "^0.3.0",
49
- "@atlaskit/smart-card": "^27.19.0",
49
+ "@atlaskit/smart-card": "^27.20.0",
50
50
  "@atlaskit/status": "^1.4.0",
51
51
  "@atlaskit/task-decision": "^17.10.0",
52
52
  "@atlaskit/theme": "^13.0.0",
@@ -72,7 +72,7 @@
72
72
  "@af/visual-regression": "*",
73
73
  "@atlaskit/analytics-gas-types": "^5.1.0",
74
74
  "@atlaskit/css-reset": "^6.10.0",
75
- "@atlaskit/editor-test-helpers": "^18.32.0",
75
+ "@atlaskit/editor-test-helpers": "^18.33.0",
76
76
  "@atlaskit/link-provider": "^1.14.0",
77
77
  "@atlaskit/link-test-helpers": "^7.5.0",
78
78
  "@atlaskit/linking-common": "^5.11.0",
@@ -128,9 +128,6 @@
128
128
  "platform.editor.inline_extension.extended_lcqdn": {
129
129
  "type": "boolean"
130
130
  },
131
- "platform_editor_tables_padding_increase": {
132
- "type": "boolean"
133
- },
134
131
  "platform_editor_table_support_in_comment": {
135
132
  "type": "boolean"
136
133
  },