@atlaskit/editor-plugin-table 12.1.15 → 12.2.0

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

@@ -1,10 +1,11 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
+import { calcTableColumnWidths, getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { COLUMN_MIN_WIDTH } from './consts';
-import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './misc';
+import { COLUMN_MIN_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
+import { getScalingPercentForTableWithoutWidth, getTableContainerElementWidth, getTableScalingPercent } from './misc';
 /**
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
  * than the table and table wrapper elements. This is necessary as there is no longer
@@ -14,6 +15,75 @@ import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from '.
 export var getColWidthFix = function getColWidthFix(colwidth, tableColumnCount) {
   return colwidth - 1 / tableColumnCount;
 };
+var generateColStyle = function generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth, hasTableBeenResized) {
+  var maxScalingPercent = shouldUseIncreasedScalingPercent ? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : MAX_SCALING_PERCENT;
+  var maxScaledRatio = 1 - maxScalingPercent;
+  var isFullPageEditor = !isChromelessEditor && !isCommentEditor;
+
+  // for nested tables, or chromeless editor, which used non resizable table container
+  if (isNested || isChromelessEditor) {
+    if (hasTableBeenResized) {
+      return "width: max(".concat(fixedColWidth, "px, ").concat(tableCellMinWidth, "px)");
+    }
+    return "width: ".concat(tableCellMinWidth, "px)");
+  }
+  if (isFullPageEditor || !isFullPageEditor && isTableHasWidth) {
+    var scaledPercent = isNumberColumnEnabled ? "calc(calc(var(--ak-editor-table-width) - ".concat(akEditorTableNumberColumnWidth, "px - 1px)/").concat(tableWidth, ")") : "calc(calc(var(--ak-editor-table-width) - 1px)/".concat(tableWidth, ")");
+    return "width: max(calc(".concat(fixedColWidth, "px * ").concat(maxScaledRatio, "), calc(").concat(fixedColWidth, " * ").concat(scaledPercent, "), ").concat(tableCellMinWidth, "px)");
+  }
+  // table resized to full-width in comment editor
+  // it doesn't have a width attribute, and cols has been resized
+  if (hasTableBeenResized) {
+    var _scaledPercent = isNumberColumnEnabled ? "calc(calc(var(--ak-editor-table-width) - ".concat(akEditorTableNumberColumnWidth, "px - 1px)/").concat(tableWidth, ")") : "calc(calc(var(--ak-editor-table-width) - 1px)/".concat(tableWidth, ")");
+    return "width: max(calc(".concat(fixedColWidth, " * ").concat(_scaledPercent, "), ").concat(tableCellMinWidth, "px)");
+  }
+  return "width: ".concat(tableCellMinWidth, "px");
+};
+export var generateColgroupFromNode = function generateColgroupFromNode(table, isCommentEditor, isChromelessEditor, isNested, isTableScalingEnabled, shouldUseIncreasedScalingPercent) {
+  var cols = [];
+  var map = TableMap.get(table);
+  var isTableHasWidth = !!table.attrs.width;
+  var isNumberColumnEnabled = table.attrs.isNumberColumnEnabled || false;
+  var isFullPageEditor = !isChromelessEditor && !isCommentEditor;
+
+  // Ignored via go/ees005
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  table.content.firstChild.content.forEach(function (cell) {
+    var colspan = cell.attrs.colspan || 1;
+    // if the table has been resized
+    if (Array.isArray(cell.attrs.colwidth)) {
+      cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
+        // existing logic for calculating the width of the column
+        var fixedColWidth = getColWidthFix(width, map.width);
+        var tableWidth = isFullPageEditor || !isFullPageEditor && isTableHasWidth ? getTableContainerElementWidth(table) : calcTableColumnWidths(table).reduce(function (sum, width) {
+          return sum + width;
+        }, 0);
+        if (isTableScalingEnabled) {
+          cols.push(['col', {
+            style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth, true)
+          }]);
+        } else {
+          cols.push(['col', {
+            style: "width: max(".concat(fixedColWidth, "px, ").concat(tableCellMinWidth, "px)")
+          }]);
+        }
+      });
+    } else {
+      // columns has not been resized, so distribute the width evenly
+      cols.push.apply(cols, _toConsumableArray(Array.from({
+        length: colspan
+      }, function (_) {
+        var tableWidth = getTableContainerElementWidth(table);
+        var columnWidth = tableWidth / map.width || 0;
+        var fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
+        return ['col', {
+          style: generateColStyle(fixedColWidth, tableWidth, isCommentEditor, isChromelessEditor, isNested, shouldUseIncreasedScalingPercent, isNumberColumnEnabled, isTableHasWidth)
+        }];
+      })));
+    }
+  });
+  return cols;
+};
 export var generateColgroup = function generateColgroup(table, tableRef, shouldUseIncreasedScalingPercent, isCommentEditor) {
   var cols = [];
   var map = TableMap.get(table);
@@ -35,6 +105,7 @@ export var generateColgroup = function generateColgroup(table, tableRef, shouldU
           scalePercent = getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent);
         }
         cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
+          // existing logic for calculating the width of the column
           var fixedColWidth = getColWidthFix(width, map.width);
           var scaledWidth = fixedColWidth * scalePercent;
           var finalWidth = Math.max(scaledWidth, tableCellMinWidth);

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

@@ -4,7 +4,7 @@ import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { hasTableBeenResized, hasTableColumnBeenResized } from './colgroup';
-import { MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
+import { MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION, TABLE_MAX_WIDTH } from './consts';
 
 // Translates named layouts in number values.
 export function getLayoutSize(tableLayout) {
@@ -85,6 +85,75 @@ export var getTableElementWidth = function getTableElementWidth(table) {
 export var getTableContainerElementWidth = function getTableContainerElementWidth(table) {
   return getTableContainerWidth(table);
 };
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used to set the max width for table resizer container.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @param isTableScalingEnabled Whether table scaling is enabled.
+ * @returns The CSS max-width value
+ */
+export var getTableResizerContainerMaxWidthInCSS = function getTableResizerContainerMaxWidthInCSS(isCommentEditor, isChromelessEditor, isTableScalingEnabled) {
+  var maxResizerWidthForNonCommentEditor = isTableScalingEnabled ? "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ".concat(TABLE_MAX_WIDTH, "px)") : "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ".concat(TABLE_MAX_WIDTH, "px)");
+  return isCommentEditor || isChromelessEditor ? '100%' : maxResizerWidthForNonCommentEditor;
+};
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used in NodeView for TableResizer to set the max width for table resizer container
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @returns The CSS max-width value for the table resizer container.
+ */
+export var getTableResizerItemWidth = function getTableResizerItemWidth(node, isCommentEditor, isChromelessEditor) {
+  var tableWidthAttribute = getTableContainerWidth(node);
+  if (!node.attrs.width && (isCommentEditor || isChromelessEditor)) {
+    // width undefined would make .resizer-item width to be `auto`
+    return undefined;
+  }
+  return tableWidthAttribute;
+};
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used to set the CSS width value for the table resizer-item.
+ * Because comment and chromeless editors don't have container-type: inline-size set,
+ * we need to calculate the width based on the table node width.
+ * If the table node width is not set, it will return 'auto'.
+ * This is used in table toDOM
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @returns The CSS width value for the table container.
+ */
+export var getTableResizerItemWidthInCSS = function getTableResizerItemWidthInCSS(node, isCommentEditor, isChromelessEditor) {
+  var tableWidthAttribute = getTableResizerItemWidth(node, isCommentEditor, isChromelessEditor);
+  return tableWidthAttribute ? "".concat(tableWidthAttribute, "px") : 'auto';
+};
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used to set the table width --ak-editor-table-width CSS property for full page editor.
+ * Which is applied to the table resizer container.
+ * For Full page appearance, we don't need to use containerWidth from JS, as we can use cqw value.
+ * So we set dynamic containerWidth from JS to CSS property.
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @param isTableScalingEnabled Whether table scaling is enabled.
+ * @param tableWidthFromJS The width of the container element. In toDOM it'd be undefined, but will have a value from nodeView.
+ * @returns The CSS width value for the table.
+ */
+export var getTableResizerContainerForFullPageWidthInCSS = function getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled) {
+  var tableWidth = getTableContainerElementWidth(node);
+  // for full page appearance
+  if (isTableScalingEnabled) {
+    return "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ".concat(tableWidth, "px)");
+  }
+  return "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ".concat(tableWidth, "px)");
+};
 export var getTableScalingPercent = function getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent) {
   var _tableRef$parentEleme;
   var maxScalingPercent = shouldUseIncreasedScalingPercent ? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : MAX_SCALING_PERCENT;

package/dist/esm/tablePlugin.js

@@ -232,18 +232,28 @@ var tablePlugin = function tablePlugin(_ref) {
       } : insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, options === null || options === void 0 ? void 0 : options.isCommentEditor)
     },
     nodes: function nodes() {
-      var _options$tableOptions2;
+      var _options$tableOptions2, _options$getEditorFea3;
       var _pluginConfig = pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions),
         allowColumnResizing = _pluginConfig.allowColumnResizing;
       // TODO: ED-25901 - We need to move this into a plugin config option so we don't accidentally enable nested nodes in Jira
       var isNestingSupported = Boolean(options === null || options === void 0 || (_options$tableOptions2 = options.tableOptions) === null || _options$tableOptions2 === void 0 ? void 0 : _options$tableOptions2.allowNestedTables);
+      var isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 || (_options$getEditorFea3 = options.getEditorFeatureFlags) === null || _options$getEditorFea3 === void 0 ? void 0 : _options$getEditorFea3.call(options).tableWithFixedColumnWidthsOption) || false;
+      var shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
+      options === null || options === void 0 ? void 0 : options.isCommentEditor));
+      var isTableScalingEnabled = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled;
+      var isCommentEditor = options === null || options === void 0 ? void 0 : options.isCommentEditor;
+      var isChromelessEditor = options === null || options === void 0 ? void 0 : options.isChromelessEditor;
       return isNestingSupported ? [{
         name: 'table',
         node: tableNodeSpecWithFixedToDOM({
           allowColumnResizing: Boolean(allowColumnResizing),
           tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing),
           getEditorContainerWidth: defaultGetEditorContainerWidth,
-          isNestingSupported: isNestingSupported
+          isNestingSupported: isNestingSupported,
+          isTableScalingEnabled: isTableScalingEnabled,
+          shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+          isCommentEditor: isCommentEditor,
+          isChromelessEditor: isChromelessEditor
         })
       }, {
         name: 'tableHeader',
@@ -260,7 +270,11 @@ var tablePlugin = function tablePlugin(_ref) {
           allowColumnResizing: Boolean(allowColumnResizing),
           tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing),
           getEditorContainerWidth: defaultGetEditorContainerWidth,
-          isNestingSupported: isNestingSupported
+          isNestingSupported: isNestingSupported,
+          isTableScalingEnabled: isTableScalingEnabled,
+          shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+          isCommentEditor: isCommentEditor,
+          isChromelessEditor: isChromelessEditor
         })
       }, {
         name: 'tableHeader',

package/dist/types/nodeviews/TableContainer.d.ts

@@ -13,6 +13,7 @@ type ResizableTableContainerProps = {
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
     isResizing?: boolean;
+    isWindowResized?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
     tableWrapperHeight?: number;
     isWholeTableInDanger?: boolean;
@@ -21,8 +22,11 @@ type ResizableTableContainerProps = {
     isTableAlignmentEnabled?: boolean;
     shouldUseIncreasedScalingPercent?: boolean;
     isCommentEditor?: boolean;
+    isChromelessEditor?: boolean;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, lineLength, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableWrapperHeight, isWholeTableInDanger, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, }: PropsWithChildren<ResizableTableContainerProps>) => React.JSX.Element>;
+export declare const ResizableTableContainer: React.FC<ResizableTableContainerProps & {
+    children?: React.ReactNode | undefined;
+}>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -32,6 +36,7 @@ type TableContainerProps = {
     tableRef: HTMLTableElement;
     isNested: boolean;
     isResizing?: boolean;
+    isWindowResized?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
     tableWrapperHeight?: number;
     isWholeTableInDanger?: boolean;
@@ -43,5 +48,5 @@ type TableContainerProps = {
     isCommentEditor?: boolean;
     isChromelessEditor?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => React.JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, isWindowResized, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => React.JSX.Element;
 export {};

package/dist/types/nodeviews/TableResizer.d.ts

@@ -8,7 +8,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../types';
 interface TableResizerProps {
     width: number;
-    maxWidth: number;
+    maxWidth: number | string;
     containerWidth: number;
     lineLength: number;
     updateWidth: (width: number) => void;

package/dist/types/nodeviews/toDOM.d.ts

@@ -5,6 +5,11 @@ type Config = {
     tableResizingEnabled: boolean;
     getEditorContainerWidth: GetEditorContainerWidth;
     isNestingSupported?: boolean;
+    isTableScalingEnabled?: boolean;
+    shouldUseIncreasedScalingPercent?: boolean;
+    isCommentEditor?: boolean;
+    isChromelessEditor?: boolean;
+    isNested?: boolean;
 };
 export declare const tableNodeSpecWithFixedToDOM: (config: Config) => NodeSpec & {
     toDOM: (node: PMNode) => DOMOutputSpec;

package/dist/types/nodeviews/types.d.ts

@@ -12,6 +12,7 @@ export type TableOptions = {
     isTableScalingEnabled?: boolean;
     isCommentEditor?: boolean;
     isChromelessEditor?: boolean;
+    shouldUseIncreasedScalingPercent?: boolean;
 };
 export interface Props {
     node: PmNode;

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

@@ -9,6 +9,7 @@ type Col = Array<string | {
  * overflow.
  */
 export declare const getColWidthFix: (colwidth: number, tableColumnCount: number) => number;
+export declare const generateColgroupFromNode: (table: PmNode, isCommentEditor?: boolean, isChromelessEditor?: boolean, isNested?: boolean, isTableScalingEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => Col[];
 export declare const generateColgroup: (table: PmNode, tableRef?: HTMLElement, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => Col[];
 export declare const insertColgroupFromNode: (tableRef: HTMLTableElement | null, table: PmNode, isTableScalingEnabled?: boolean, shouldRemove?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => HTMLCollection;
 export declare const hasTableBeenResized: (table: PmNode) => boolean;

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

@@ -22,6 +22,47 @@ export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getE
  */
 export declare const getTableElementWidth: (table: PMNode) => number;
 export declare const getTableContainerElementWidth: (table: PMNode) => number;
+/**
+ * This function is used to set the max width for table resizer container.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @param isTableScalingEnabled Whether table scaling is enabled.
+ * @returns The CSS max-width value
+ */
+export declare const getTableResizerContainerMaxWidthInCSS: (isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableScalingEnabled?: boolean) => string;
+/**
+ * This function is used in NodeView for TableResizer to set the max width for table resizer container
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @returns The CSS max-width value for the table resizer container.
+ */
+export declare const getTableResizerItemWidth: (node: PMNode, isCommentEditor?: boolean, isChromelessEditor?: boolean) => number | undefined;
+/**
+ * This function is used to set the CSS width value for the table resizer-item.
+ * Because comment and chromeless editors don't have container-type: inline-size set,
+ * we need to calculate the width based on the table node width.
+ * If the table node width is not set, it will return 'auto'.
+ * This is used in table toDOM
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @returns The CSS width value for the table container.
+ */
+export declare const getTableResizerItemWidthInCSS: (node: PMNode, isCommentEditor?: boolean, isChromelessEditor?: boolean) => string;
+/**
+ * This function is used to set the table width --ak-editor-table-width CSS property for full page editor.
+ * Which is applied to the table resizer container.
+ * For Full page appearance, we don't need to use containerWidth from JS, as we can use cqw value.
+ * So we set dynamic containerWidth from JS to CSS property.
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @param isTableScalingEnabled Whether table scaling is enabled.
+ * @param tableWidthFromJS The width of the container element. In toDOM it'd be undefined, but will have a value from nodeView.
+ * @returns The CSS width value for the table.
+ */
+export declare const getTableResizerContainerForFullPageWidthInCSS: (node: PMNode, isTableScalingEnabled?: boolean) => string;
 export declare const getTableScalingPercent: (table: PMNode, tableRef: HTMLElement | null, shouldUseIncreasedScalingPercent?: boolean) => number;
 export declare const getScalingPercentForTableWithoutWidth: (table: PMNode, tableRef: HTMLElement | null) => number;
 export declare const getStaticTableScalingPercent: (table: PMNode, tableRenderWidth: number, shouldUseIncreasedScalingPercent?: boolean) => number;

package/dist/types-ts4.5/nodeviews/TableContainer.d.ts

@@ -13,6 +13,7 @@ type ResizableTableContainerProps = {
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
     isResizing?: boolean;
+    isWindowResized?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
     tableWrapperHeight?: number;
     isWholeTableInDanger?: boolean;
@@ -21,8 +22,11 @@ type ResizableTableContainerProps = {
     isTableAlignmentEnabled?: boolean;
     shouldUseIncreasedScalingPercent?: boolean;
     isCommentEditor?: boolean;
+    isChromelessEditor?: boolean;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, lineLength, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableWrapperHeight, isWholeTableInDanger, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, }: PropsWithChildren<ResizableTableContainerProps>) => React.JSX.Element>;
+export declare const ResizableTableContainer: React.FC<ResizableTableContainerProps & {
+    children?: React.ReactNode | undefined;
+}>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -32,6 +36,7 @@ type TableContainerProps = {
     tableRef: HTMLTableElement;
     isNested: boolean;
     isResizing?: boolean;
+    isWindowResized?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
     tableWrapperHeight?: number;
     isWholeTableInDanger?: boolean;
@@ -43,5 +48,5 @@ type TableContainerProps = {
     isCommentEditor?: boolean;
     isChromelessEditor?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => React.JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, isWindowResized, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/nodeviews/TableResizer.d.ts

@@ -8,7 +8,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../types';
 interface TableResizerProps {
     width: number;
-    maxWidth: number;
+    maxWidth: number | string;
     containerWidth: number;
     lineLength: number;
     updateWidth: (width: number) => void;

package/dist/types-ts4.5/nodeviews/toDOM.d.ts

@@ -5,6 +5,11 @@ type Config = {
     tableResizingEnabled: boolean;
     getEditorContainerWidth: GetEditorContainerWidth;
     isNestingSupported?: boolean;
+    isTableScalingEnabled?: boolean;
+    shouldUseIncreasedScalingPercent?: boolean;
+    isCommentEditor?: boolean;
+    isChromelessEditor?: boolean;
+    isNested?: boolean;
 };
 export declare const tableNodeSpecWithFixedToDOM: (config: Config) => NodeSpec & {
     toDOM: (node: PMNode) => DOMOutputSpec;

package/dist/types-ts4.5/nodeviews/types.d.ts

@@ -12,6 +12,7 @@ export type TableOptions = {
     isTableScalingEnabled?: boolean;
     isCommentEditor?: boolean;
     isChromelessEditor?: boolean;
+    shouldUseIncreasedScalingPercent?: boolean;
 };
 export interface Props {
     node: PmNode;

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

@@ -9,6 +9,7 @@ type Col = Array<string | {
  * overflow.
  */
 export declare const getColWidthFix: (colwidth: number, tableColumnCount: number) => number;
+export declare const generateColgroupFromNode: (table: PmNode, isCommentEditor?: boolean, isChromelessEditor?: boolean, isNested?: boolean, isTableScalingEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => Col[];
 export declare const generateColgroup: (table: PmNode, tableRef?: HTMLElement, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => Col[];
 export declare const insertColgroupFromNode: (tableRef: HTMLTableElement | null, table: PmNode, isTableScalingEnabled?: boolean, shouldRemove?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => HTMLCollection;
 export declare const hasTableBeenResized: (table: PmNode) => boolean;

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

@@ -22,6 +22,47 @@ export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getE
  */
 export declare const getTableElementWidth: (table: PMNode) => number;
 export declare const getTableContainerElementWidth: (table: PMNode) => number;
+/**
+ * This function is used to set the max width for table resizer container.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @param isTableScalingEnabled Whether table scaling is enabled.
+ * @returns The CSS max-width value
+ */
+export declare const getTableResizerContainerMaxWidthInCSS: (isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableScalingEnabled?: boolean) => string;
+/**
+ * This function is used in NodeView for TableResizer to set the max width for table resizer container
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @returns The CSS max-width value for the table resizer container.
+ */
+export declare const getTableResizerItemWidth: (node: PMNode, isCommentEditor?: boolean, isChromelessEditor?: boolean) => number | undefined;
+/**
+ * This function is used to set the CSS width value for the table resizer-item.
+ * Because comment and chromeless editors don't have container-type: inline-size set,
+ * we need to calculate the width based on the table node width.
+ * If the table node width is not set, it will return 'auto'.
+ * This is used in table toDOM
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @returns The CSS width value for the table container.
+ */
+export declare const getTableResizerItemWidthInCSS: (node: PMNode, isCommentEditor?: boolean, isChromelessEditor?: boolean) => string;
+/**
+ * This function is used to set the table width --ak-editor-table-width CSS property for full page editor.
+ * Which is applied to the table resizer container.
+ * For Full page appearance, we don't need to use containerWidth from JS, as we can use cqw value.
+ * So we set dynamic containerWidth from JS to CSS property.
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @param isTableScalingEnabled Whether table scaling is enabled.
+ * @param tableWidthFromJS The width of the container element. In toDOM it'd be undefined, but will have a value from nodeView.
+ * @returns The CSS width value for the table.
+ */
+export declare const getTableResizerContainerForFullPageWidthInCSS: (node: PMNode, isTableScalingEnabled?: boolean) => string;
 export declare const getTableScalingPercent: (table: PMNode, tableRef: HTMLElement | null, shouldUseIncreasedScalingPercent?: boolean) => number;
 export declare const getScalingPercentForTableWithoutWidth: (table: PMNode, tableRef: HTMLElement | null) => number;
 export declare const getStaticTableScalingPercent: (table: PMNode, tableRenderWidth: number, shouldUseIncreasedScalingPercent?: boolean) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "12.1.15",
+	"version": "12.2.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^50.2.0",
-		"@atlaskit/button": "^23.3.0",
+		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/custom-steps": "^0.11.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^3.0.0",
@@ -37,10 +37,10 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^3.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^3.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
-		"@atlaskit/editor-plugin-extension": "6.1.6",
+		"@atlaskit/editor-plugin-extension": "6.1.7",
 		"@atlaskit/editor-plugin-guideline": "^3.0.0",
 		"@atlaskit/editor-plugin-interaction": "^5.0.0",
-		"@atlaskit/editor-plugin-limited-mode": "^0.0.0",
+		"@atlaskit/editor-plugin-limited-mode": "^0.0.1",
 		"@atlaskit/editor-plugin-selection": "^3.0.0",
 		"@atlaskit/editor-plugin-width": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -49,13 +49,14 @@
 		"@atlaskit/icon": "^27.12.0",
 		"@atlaskit/menu": "^8.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^14.11.0",
-		"@atlaskit/react-ufo": "^4.2.0",
+		"@atlaskit/react-ufo": "^4.3.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.28.0",
+		"@atlaskit/tmp-editor-statsig": "^10.0.0",
 		"@atlaskit/toggle": "^15.1.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@atlaskit/tooltip": "^20.4.0",
@@ -68,7 +69,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.23.0",
+		"@atlaskit/editor-common": "^107.25.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"