@atlaskit/editor-plugin-table 7.28.7 → 7.28.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.28.8
+
+### Patch Changes
+
+- [#150410](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150410)
+  [`aabd4874bd3a0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aabd4874bd3a0) -
+  set correct min-width value in table lazy load view
+
 ## 7.28.7
 
 ### Patch Changes

package/dist/cjs/pm-plugins/table-resizing/utils/colgroup.js

@@ -4,12 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isMinCellWidthTable = exports.insertColgroupFromNode = exports.hasTableColumnBeenResized = exports.hasTableBeenResized = exports.getColgroupChildrenLength = exports.getColWidthFix = exports.generateColgroup = void 0;
+exports.isMinCellWidthTable = exports.insertColgroupFromNode = exports.hasTableColumnBeenResized = exports.hasTableBeenResized = exports.getResizerMinWidth = exports.getColgroupChildrenLength = exports.getColWidthFix = exports.generateColgroup = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _consts = require("./consts");
 var _misc = require("./misc");
 /**
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
@@ -109,4 +110,11 @@ function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingP
 var getColgroupChildrenLength = exports.getColgroupChildrenLength = function getColgroupChildrenLength(table) {
   var map = _tableMap.TableMap.get(table);
   return map.width;
+};
+var getResizerMinWidth = exports.getResizerMinWidth = function getResizerMinWidth(node) {
+  var currentColumnCount = getColgroupChildrenLength(node);
+  var minColumnWidth = Math.min(3, currentColumnCount) * _consts.COLUMN_MIN_WIDTH;
+  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+  return minColumnWidth + 1;
 };

package/dist/cjs/pm-plugins/table-resizing/utils/index.js

@@ -81,6 +81,12 @@ Object.defineProperty(exports, "getResizeState", {
     return _resizeState.getResizeState;
   }
 });
+Object.defineProperty(exports, "getResizerMinWidth", {
+  enumerable: true,
+  get: function get() {
+    return _colgroup.getResizerMinWidth;
+  }
+});
 Object.defineProperty(exports, "getTableContainerElementWidth", {
   enumerable: true,
   get: function get() {

package/dist/cjs/toDOM.js

@@ -33,6 +33,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           v = _ref2[1];
         return "".concat((0, _kebabCase.default)(k), ": ").concat((0, _kebabCase.default)(v));
       }).join(';');
+      var tableMinWidth = (0, _colgroup.getResizerMinWidth)(node);
       var attrs = _objectSpread({
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -91,7 +92,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           boxSizing: 'border-box',
           '--ak-editor-table-gutter-padding': "".concat(gutterPadding, "px"),
           '--ak-editor-table-max-width': "".concat(_consts.TABLE_MAX_WIDTH, "px"),
-          '--ak-editor-table-min-width': "145px",
+          '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
           width: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, ")")
@@ -100,7 +101,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           userSelect: 'auto',
           boxSizing: 'border-box',
           height: 'auto',
-          minWidth: '145px',
+          minWidth: "".concat(tableMinWidth, "px"),
           maxWidth: "".concat(editorWidthFromGetter, "px"),
           width: "".concat(editorWidthFromGetter, "px;")
         })

package/dist/es2019/pm-plugins/table-resizing/utils/colgroup.js

@@ -2,6 +2,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { COLUMN_MIN_WIDTH } from './consts';
 import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './misc';
 /**
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
@@ -91,4 +92,11 @@ function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingP
 export const getColgroupChildrenLength = table => {
   const map = TableMap.get(table);
   return map.width;
+};
+export const getResizerMinWidth = node => {
+  const currentColumnCount = getColgroupChildrenLength(node);
+  const minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
+  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+  return minColumnWidth + 1;
 };

package/dist/es2019/pm-plugins/table-resizing/utils/index.js

@@ -1,4 +1,4 @@
-export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength } from './colgroup';
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, getResizerMinWidth } from './colgroup';
 export { contentWidth } from './content-width';
 export { getCellsRefsInColumn, calculateColumnWidth } from './column-state';
 export { getResizeState, updateColgroup, evenAllColumnsWidths } from './resize-state';

package/dist/es2019/toDOM.js

@@ -5,7 +5,7 @@ import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getAlignmentStyle } from './nodeviews/table-container-styles';
-import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
+import { generateColgroup, getResizerMinWidth } from './pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from './pm-plugins/table-resizing/utils/consts';
 export const tableNodeSpecWithFixedToDOM = config => {
   if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
@@ -17,6 +17,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
       const gutterPadding = akEditorGutterPaddingDynamic() * 2;
       const editorWidthFromGetter = fg('platform_editor_breakout_use_css') ? undefined : Math.min(config.getEditorContainerWidth().width - gutterPadding, node.attrs.width);
       const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`).join(';');
+      const tableMinWidth = getResizerMinWidth(node);
       const attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -76,7 +77,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
           boxSizing: 'border-box',
           '--ak-editor-table-gutter-padding': `${gutterPadding}px`,
           '--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
-          '--ak-editor-table-min-width': `145px`,
+          '--ak-editor-table-min-width': `${tableMinWidth}px`,
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
           width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width})`
@@ -85,7 +86,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
           userSelect: 'auto',
           boxSizing: 'border-box',
           height: 'auto',
-          minWidth: '145px',
+          minWidth: `${tableMinWidth}px`,
           maxWidth: `${editorWidthFromGetter}px`,
           width: `${editorWidthFromGetter}px;`
         })

package/dist/esm/pm-plugins/table-resizing/utils/colgroup.js

@@ -3,6 +3,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { COLUMN_MIN_WIDTH } from './consts';
 import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './misc';
 /**
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
@@ -102,4 +103,11 @@ function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingP
 export var getColgroupChildrenLength = function getColgroupChildrenLength(table) {
   var map = TableMap.get(table);
   return map.width;
+};
+export var getResizerMinWidth = function getResizerMinWidth(node) {
+  var currentColumnCount = getColgroupChildrenLength(node);
+  var minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
+  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+  return minColumnWidth + 1;
 };

package/dist/esm/pm-plugins/table-resizing/utils/index.js

@@ -1,4 +1,4 @@
-export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength } from './colgroup';
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, getResizerMinWidth } from './colgroup';
 export { contentWidth } from './content-width';
 export { getCellsRefsInColumn, calculateColumnWidth } from './column-state';
 export { getResizeState, updateColgroup, evenAllColumnsWidths } from './resize-state';

package/dist/esm/toDOM.js

@@ -10,7 +10,7 @@ import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getAlignmentStyle } from './nodeviews/table-container-styles';
-import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
+import { generateColgroup, getResizerMinWidth } from './pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from './pm-plugins/table-resizing/utils/consts';
 export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
   if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
@@ -26,6 +26,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
           v = _ref2[1];
         return "".concat(kebabCase(k), ": ").concat(kebabCase(v));
       }).join(';');
+      var tableMinWidth = getResizerMinWidth(node);
       var attrs = _objectSpread({
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -84,7 +85,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
           boxSizing: 'border-box',
           '--ak-editor-table-gutter-padding': "".concat(gutterPadding, "px"),
           '--ak-editor-table-max-width': "".concat(TABLE_MAX_WIDTH, "px"),
-          '--ak-editor-table-min-width': "145px",
+          '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
           width: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, ")")
@@ -93,7 +94,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
           userSelect: 'auto',
           boxSizing: 'border-box',
           height: 'auto',
-          minWidth: '145px',
+          minWidth: "".concat(tableMinWidth, "px"),
           maxWidth: "".concat(editorWidthFromGetter, "px"),
           width: "".concat(editorWidthFromGetter, "px;")
         })

package/dist/types/pm-plugins/table-resizing/utils/colgroup.d.ts

@@ -21,4 +21,5 @@ export declare const hasTableColumnBeenResized: (table: PmNode) => boolean;
  */
 export declare const isMinCellWidthTable: (table: PmNode) => boolean;
 export declare const getColgroupChildrenLength: (table: PmNode) => number;
+export declare const getResizerMinWidth: (node: PmNode) => number;
 export {};

package/dist/types/pm-plugins/table-resizing/utils/index.d.ts

@@ -1,4 +1,4 @@
-export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, } from './colgroup';
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, getResizerMinWidth, } from './colgroup';
 export { contentWidth } from './content-width';
 export { getCellsRefsInColumn, calculateColumnWidth } from './column-state';
 export { getResizeState, updateColgroup, evenAllColumnsWidths } from './resize-state';

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/colgroup.d.ts

@@ -21,4 +21,5 @@ export declare const hasTableColumnBeenResized: (table: PmNode) => boolean;
  */
 export declare const isMinCellWidthTable: (table: PmNode) => boolean;
 export declare const getColgroupChildrenLength: (table: PmNode) => number;
+export declare const getResizerMinWidth: (node: PmNode) => number;
 export {};

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/index.d.ts

@@ -1,4 +1,4 @@
-export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, } from './colgroup';
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, getResizerMinWidth, } from './colgroup';
 export { contentWidth } from './content-width';
 export { getCellsRefsInColumn, calculateColumnWidth } from './column-state';
 export { getResizeState, updateColgroup, evenAllColumnsWidths } from './resize-state';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.28.7",
+	"version": "7.28.8",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^93.0.0",
+		"@atlaskit/editor-common": "^93.1.0",
 		"@atlaskit/editor-palette": "1.6.1",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.20.0",
+		"@atlaskit/icon": "^22.22.0",
 		"@atlaskit/menu": "^2.12.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.2.0",
+		"@atlaskit/tmp-editor-statsig": "^2.3.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",

package/src/pm-plugins/table-resizing/utils/colgroup.ts

@@ -4,6 +4,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
+import { COLUMN_MIN_WIDTH } from './consts';
 import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './misc';
 
 type Col = Array<string | { [name: string]: string }>;
@@ -152,3 +153,11 @@ export const getColgroupChildrenLength = (table: PmNode): number => {
 	const map = TableMap.get(table);
 	return map.width;
 };
+
+export const getResizerMinWidth = (node: PmNode) => {
+	const currentColumnCount = getColgroupChildrenLength(node);
+	const minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
+	// add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+	// the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+	return minColumnWidth + 1;
+};

package/src/pm-plugins/table-resizing/utils/index.ts

@@ -3,6 +3,7 @@ export {
 	insertColgroupFromNode,
 	hasTableBeenResized,
 	getColgroupChildrenLength,
+	getResizerMinWidth,
 } from './colgroup';
 export { contentWidth } from './content-width';
 export { getCellsRefsInColumn, calculateColumnWidth } from './column-state';

package/src/toDOM.ts

@@ -9,7 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { getAlignmentStyle } from './nodeviews/table-container-styles';
-import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
+import { generateColgroup, getResizerMinWidth } from './pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from './pm-plugins/table-resizing/utils/consts';
 
 type Config = {
@@ -34,6 +34,8 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 				.map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`)
 				.join(';');
 
+			const tableMinWidth = getResizerMinWidth(node);
+
 			const attrs = {
 				'data-number-column': node.attrs.isNumberColumnEnabled,
 				'data-layout': node.attrs.layout,
@@ -145,7 +147,7 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 										boxSizing: 'border-box',
 										'--ak-editor-table-gutter-padding': `${gutterPadding}px`,
 										'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
-										'--ak-editor-table-min-width': `145px`,
+										'--ak-editor-table-min-width': `${tableMinWidth}px`,
 										minWidth: 'var(--ak-editor-table-min-width)',
 										maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
 										width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width})`,
@@ -155,7 +157,7 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 										userSelect: 'auto',
 										boxSizing: 'border-box',
 										height: 'auto',
-										minWidth: '145px',
+										minWidth: `${tableMinWidth}px`,
 										maxWidth: `${editorWidthFromGetter}px`,
 										width: `${editorWidthFromGetter}px;`,
 									}),