@atlaskit/editor-plugin-table 1.6.4 → 1.6.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 1.6.5
+
+### Patch Changes
+
+- [`dcb378acc03`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dcb378acc03) - [ux] ED-17625: add restriction of resizing table
+
 ## 1.6.4
 
 ### Patch Changes

package/dist/cjs/plugins/table/nodeviews/TableResizer.js

@@ -23,6 +23,8 @@ var TableResizer = function TableResizer(_ref) {
     getPos = _ref.getPos,
     node = _ref.node,
     tableRef = _ref.tableRef;
+  var currentColumnCount = (0, _utils.getColgroupChildrenLength)(node);
+  var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * _utils.COLUMN_MIN_WIDTH : 3 * _utils.COLUMN_MIN_WIDTH;
   return /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
     enable: handles,
     width: width,
@@ -59,7 +61,9 @@ var TableResizer = function TableResizer(_ref) {
       updateWidth(newWidth);
       return newWidth;
     },
-    resizeRatio: 2
+    resizeRatio: 2,
+    minWidth: minColumnWidth,
+    maxWidth: _utils.TABLE_MAX_WIDTH
   }, children);
 };
 exports.TableResizer = TableResizer;

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

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isMinCellWidthTable = exports.insertColgroupFromNode = exports.hasTableBeenResized = exports.generateColgroup = void 0;
+exports.isMinCellWidthTable = exports.insertColgroupFromNode = exports.hasTableBeenResized = exports.getColgroupChildrenLength = exports.generateColgroup = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _prosemirrorModel = require("prosemirror-model");
 var _utils = require("@atlaskit/editor-common/utils");
 var _styles = require("@atlaskit/editor-common/styles");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
 var generateColgroup = function generateColgroup(table) {
   var cols = [];
   table.content.firstChild.content.forEach(function (cell) {
@@ -69,4 +70,9 @@ exports.isMinCellWidthTable = isMinCellWidthTable;
 function renderColgroupFromNode(table) {
   var rendered = _prosemirrorModel.DOMSerializer.renderSpec(document, ['colgroup', {}].concat((0, _toConsumableArray2.default)(generateColgroup(table))));
   return rendered.dom;
-}
+}
+var getColgroupChildrenLength = function getColgroupChildrenLength(table) {
+  var map = _tableMap.TableMap.get(table);
+  return map.width;
+};
+exports.getColgroupChildrenLength = getColgroupChildrenLength;

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TABLE_MAX_WIDTH = exports.COLUMN_MIN_WIDTH = void 0;
+var COLUMN_MIN_WIDTH = 48;
+exports.COLUMN_MIN_WIDTH = COLUMN_MIN_WIDTH;
+var TABLE_MAX_WIDTH = 1800;
+exports.TABLE_MAX_WIDTH = TABLE_MAX_WIDTH;

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

@@ -3,6 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "COLUMN_MIN_WIDTH", {
+  enumerable: true,
+  get: function get() {
+    return _consts.COLUMN_MIN_WIDTH;
+  }
+});
+Object.defineProperty(exports, "TABLE_MAX_WIDTH", {
+  enumerable: true,
+  get: function get() {
+    return _consts.TABLE_MAX_WIDTH;
+  }
+});
 Object.defineProperty(exports, "addContainerLeftRightPadding", {
   enumerable: true,
   get: function get() {
@@ -69,6 +81,12 @@ Object.defineProperty(exports, "getCellsRefsInColumn", {
     return _columnState.getCellsRefsInColumn;
   }
 });
+Object.defineProperty(exports, "getColgroupChildrenLength", {
+  enumerable: true,
+  get: function get() {
+    return _colgroup.getColgroupChildrenLength;
+  }
+});
 Object.defineProperty(exports, "getColumnStateFromDOM", {
   enumerable: true,
   get: function get() {
@@ -203,4 +221,5 @@ var _resizeState = require("./resize-state");
 var _misc = require("./misc");
 var _dom = require("./dom");
 var _scaleTable = require("./scale-table");
-var _resizeColumn = require("./resize-column");
+var _resizeColumn = require("./resize-column");
+var _consts = require("./consts");

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.6.4",
+	"version": "1.6.5",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import rafSchd from 'raf-schd';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { scaleTable, previewScaleTable } from '../pm-plugins/table-resizing/utils';
+import { scaleTable, previewScaleTable, getColgroupChildrenLength, COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 const handles = {
   right: true
 };
@@ -14,6 +14,8 @@ export const TableResizer = ({
   node,
   tableRef
 }) => {
+  const currentColumnCount = getColgroupChildrenLength(node);
+  const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
@@ -51,6 +53,8 @@ export const TableResizer = ({
       updateWidth(newWidth);
       return newWidth;
     },
-    resizeRatio: 2
+    resizeRatio: 2,
+    minWidth: minColumnWidth,
+    maxWidth: TABLE_MAX_WIDTH
   }, children);
 };

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

@@ -1,6 +1,7 @@
 import { DOMSerializer } from 'prosemirror-model';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 export const generateColgroup = table => {
   const cols = [];
   table.content.firstChild.content.forEach(cell => {
@@ -53,4 +54,8 @@ export const isMinCellWidthTable = table => {
 function renderColgroupFromNode(table) {
   const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table)]);
   return rendered.dom;
-}
+}
+export const getColgroupChildrenLength = table => {
+  const map = TableMap.get(table);
+  return map.width;
+};

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

@@ -0,0 +1,2 @@
+export const COLUMN_MIN_WIDTH = 48;
+export const TABLE_MAX_WIDTH = 1800;

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

@@ -1,4 +1,4 @@
-export { generateColgroup, insertColgroupFromNode, hasTableBeenResized } from './colgroup';
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength } from './colgroup';
 export { contentWidth } from './content-width';
 export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateColumnWidth, addContainerLeftRightPadding } from './column-state';
 export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
@@ -6,4 +6,5 @@ export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bu
 export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
-export { resizeColumn } from './resize-column';
+export { resizeColumn } from './resize-column';
+export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH } from './consts';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.6.4",
+	"version": "1.6.5",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/nodeviews/TableResizer.js

@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import rafSchd from 'raf-schd';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { scaleTable, previewScaleTable } from '../pm-plugins/table-resizing/utils';
+import { scaleTable, previewScaleTable, getColgroupChildrenLength, COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 var handles = {
   right: true
 };
@@ -16,6 +16,8 @@ export var TableResizer = function TableResizer(_ref) {
     getPos = _ref.getPos,
     node = _ref.node,
     tableRef = _ref.tableRef;
+  var currentColumnCount = getColgroupChildrenLength(node);
+  var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
@@ -52,6 +54,8 @@ export var TableResizer = function TableResizer(_ref) {
       updateWidth(newWidth);
       return newWidth;
     },
-    resizeRatio: 2
+    resizeRatio: 2,
+    minWidth: minColumnWidth,
+    maxWidth: TABLE_MAX_WIDTH
   }, children);
 };

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

@@ -2,6 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { DOMSerializer } from 'prosemirror-model';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 export var generateColgroup = function generateColgroup(table) {
   var cols = [];
   table.content.firstChild.content.forEach(function (cell) {
@@ -58,4 +59,8 @@ export var isMinCellWidthTable = function isMinCellWidthTable(table) {
 function renderColgroupFromNode(table) {
   var rendered = DOMSerializer.renderSpec(document, ['colgroup', {}].concat(_toConsumableArray(generateColgroup(table))));
   return rendered.dom;
-}
+}
+export var getColgroupChildrenLength = function getColgroupChildrenLength(table) {
+  var map = TableMap.get(table);
+  return map.width;
+};

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

@@ -0,0 +1,2 @@
+export var COLUMN_MIN_WIDTH = 48;
+export var TABLE_MAX_WIDTH = 1800;

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

@@ -1,4 +1,4 @@
-export { generateColgroup, insertColgroupFromNode, hasTableBeenResized } from './colgroup';
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength } from './colgroup';
 export { contentWidth } from './content-width';
 export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateColumnWidth, addContainerLeftRightPadding } from './column-state';
 export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
@@ -6,4 +6,5 @@ export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bu
 export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
-export { resizeColumn } from './resize-column';
+export { resizeColumn } from './resize-column';
+export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH } from './consts';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.6.4",
+	"version": "1.6.5",
 	"sideEffects": false
 }

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

@@ -12,4 +12,5 @@ export declare const hasTableBeenResized: (table: PmNode) => boolean;
  * @returns true if all column width is equal to tableCellMinWidth or null, false otherwise
  */
 export declare const isMinCellWidthTable: (table: PmNode) => boolean;
+export declare const getColgroupChildrenLength: (table: PmNode) => number;
 export {};

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

@@ -0,0 +1,2 @@
+export declare const COLUMN_MIN_WIDTH = 48;
+export declare const TABLE_MAX_WIDTH = 1800;

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

@@ -1,4 +1,4 @@
-export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, } from './colgroup';
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, } from './colgroup';
 export { contentWidth } from './content-width';
 export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateColumnWidth, addContainerLeftRightPadding, } from './column-state';
 export type { ColumnState } from './column-state';
@@ -10,3 +10,4 @@ export { scale, scaleWithParent, scaleTable, previewScaleTable, } from './scale-
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
 export { resizeColumn } from './resize-column';
+export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH } from './consts';

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

@@ -12,4 +12,5 @@ export declare const hasTableBeenResized: (table: PmNode) => boolean;
  * @returns true if all column width is equal to tableCellMinWidth or null, false otherwise
  */
 export declare const isMinCellWidthTable: (table: PmNode) => boolean;
+export declare const getColgroupChildrenLength: (table: PmNode) => number;
 export {};

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

@@ -0,0 +1,2 @@
+export declare const COLUMN_MIN_WIDTH = 48;
+export declare const TABLE_MAX_WIDTH = 1800;

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

@@ -1,4 +1,4 @@
-export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, } from './colgroup';
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, } from './colgroup';
 export { contentWidth } from './content-width';
 export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateColumnWidth, addContainerLeftRightPadding, } from './column-state';
 export type { ColumnState } from './column-state';
@@ -10,3 +10,4 @@ export { scale, scaleWithParent, scaleTable, previewScaleTable, } from './scale-
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
 export { resizeColumn } from './resize-column';
+export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH } from './consts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/__tests__/unit/pm-plugins/table-resizing/colgroup.ts

@@ -1,7 +1,16 @@
-import { p, table, tr, td } from '@atlaskit/editor-test-helpers/doc-builder';
+import {
+  p,
+  table,
+  tr,
+  td,
+  th,
+} from '@atlaskit/editor-test-helpers/doc-builder';
 import defaultSchema from '@atlaskit/editor-test-helpers/schema';
 import { isMinCellWidthTable } from '../../../../plugins/table/pm-plugins/table-resizing/utils/colgroup';
-import { generateColgroup } from '../../../../plugins/table/pm-plugins/table-resizing/utils';
+import {
+  generateColgroup,
+  getColgroupChildrenLength,
+} from '../../../../plugins/table/pm-plugins/table-resizing/utils';
 
 describe('table-resizing/colgroup', () => {
   describe('#generateColgroup', () => {
@@ -121,4 +130,41 @@ describe('table-resizing/colgroup', () => {
       }
     });
   });
+
+  describe('#getColgroupChildrenLength', () => {
+    it('returns 1 when table only have 1 column', () => {
+      expect(
+        getColgroupChildrenLength(table()(tr(td()(p(''))))(defaultSchema)),
+      ).toBe(1);
+    });
+
+    it('returns 3 when table have 3 column', () => {
+      expect(
+        getColgroupChildrenLength(
+          table()(tr(td()(p('')), td()(p('')), td()(p(''))))(defaultSchema),
+        ),
+      ).toBe(3);
+    });
+
+    it('returns 5 when table have 5 column', () => {
+      expect(
+        getColgroupChildrenLength(
+          table()(
+            tr(td()(p('')), td()(p('')), td()(p('')), td()(p('')), td()(p(''))),
+          )(defaultSchema),
+        ),
+      ).toBe(5);
+    });
+
+    it('returns correct number when table have merged header column', () => {
+      expect(
+        getColgroupChildrenLength(
+          table()(
+            tr(th({ colspan: 2 })(p('')), th()(p(''))),
+            tr(td()(p('')), td()(p('')), td()(p(''))),
+          )(defaultSchema),
+        ),
+      ).toBe(3);
+    });
+  });
 });

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -8,6 +8,9 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import {
   scaleTable,
   previewScaleTable,
+  getColgroupChildrenLength,
+  COLUMN_MIN_WIDTH,
+  TABLE_MAX_WIDTH,
 } from '../pm-plugins/table-resizing/utils';
 
 interface TableResizerProps {
@@ -30,6 +33,12 @@ export const TableResizer = ({
   node,
   tableRef,
 }: PropsWithChildren<TableResizerProps>) => {
+  const currentColumnCount = getColgroupChildrenLength(node);
+  const minColumnWidth =
+    currentColumnCount <= 3
+      ? currentColumnCount * COLUMN_MIN_WIDTH
+      : 3 * COLUMN_MIN_WIDTH;
+
   return (
     <ResizerNext
       enable={handles}
@@ -81,6 +90,8 @@ export const TableResizer = ({
         return newWidth;
       }}
       resizeRatio={2}
+      minWidth={minColumnWidth}
+      maxWidth={TABLE_MAX_WIDTH}
     >
       {children}
     </ResizerNext>

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

@@ -1,6 +1,7 @@
 import { DOMSerializer, Node as PmNode } from 'prosemirror-model';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 type Col = Array<string | { [name: string]: string }>;
 
@@ -74,3 +75,8 @@ function renderColgroupFromNode(table: PmNode): HTMLElement {
 
   return rendered.dom as HTMLElement;
 }
+
+export const getColgroupChildrenLength = (table: PmNode): number => {
+  const map = TableMap.get(table);
+  return map.width;
+};

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

@@ -0,0 +1,2 @@
+export const COLUMN_MIN_WIDTH = 48;
+export const TABLE_MAX_WIDTH = 1800;

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

@@ -2,6 +2,7 @@ export {
   generateColgroup,
   insertColgroupFromNode,
   hasTableBeenResized,
+  getColgroupChildrenLength,
 } from './colgroup';
 export { contentWidth } from './content-width';
 export {
@@ -39,3 +40,4 @@ export {
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
 export { resizeColumn } from './resize-column';
+export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH } from './consts';