@atlaskit/editor-plugin-table 7.4.9 → 7.5.0

package/src/pm-plugins/keymap.ts

@@ -30,7 +30,10 @@ import {
   toggleTable,
 } from '@atlaskit/editor-common/keymaps';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -69,6 +72,7 @@ const createTableWithAnalytics = (
 export function keymapPlugin(
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  getEditorFeatureFlags?: GetEditorFeatureFlags,
   dragAndDropEnabled?: boolean,
 ): SafePlugin {
   const list = {};
@@ -178,6 +182,10 @@ export function keymapPlugin(
   }
 
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    const { tablePreserveWidth = false } = getEditorFeatureFlags
+      ? getEditorFeatureFlags()
+      : {};
+
     bindKeymapWithCommand(
       startColumnResizing.common!,
       initiateKeyboardColumnResizing,
@@ -190,13 +198,13 @@ export function keymapPlugin(
 
     bindKeymapWithCommand(
       decreaseMediaSize.common!,
-      changeColumnWidthByStep(-10, getEditorContainerWidth),
+      changeColumnWidthByStep(-10, getEditorContainerWidth, tablePreserveWidth),
       list,
     );
 
     bindKeymapWithCommand(
       increaseMediaSize.common!,
-      changeColumnWidthByStep(10, getEditorContainerWidth),
+      changeColumnWidthByStep(10, getEditorContainerWidth, tablePreserveWidth),
       list,
     );
     bindKeymapWithCommand(escape.common!, stopKeyboardColumnResizing(), list);

package/src/pm-plugins/main.ts

@@ -188,6 +188,8 @@ export const createPlugin = (
         });
       }
 
+      const { tablePreserveWidth = false } = getEditorFeatureFlags();
+
       if (tr) {
         // "fixTables" removes empty rows as we don't allow that in schema
         const updatedTr = handleCut(
@@ -196,6 +198,7 @@ export const createPlugin = (
           newState,
           editorAnalyticsAPI,
           editorViewRef || undefined,
+          tablePreserveWidth,
         );
         return fixTables(updatedTr) || updatedTr;
       }

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -48,6 +48,7 @@ export const handleMouseDown = (
   const { state, dispatch } = view;
   const editorDisabled = !view.editable;
   const domAtPos = view.domAtPos.bind(view);
+  const { tablePreserveWidth = false } = getEditorFeatureFlags();
 
   if (
     editorDisabled ||
@@ -117,6 +118,7 @@ export const handleMouseDown = (
     tableRef: dom,
     start,
     domAtPos,
+    tablePreserveWidth,
   });
 
   if (
@@ -207,6 +209,7 @@ export const handleMouseDown = (
           clientX - startX,
           dom,
           resizingSelectedColumns ? selectedColumns : undefined,
+          tablePreserveWidth,
         );
         tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (colIndex === map.width - 1) {
@@ -265,7 +268,14 @@ export const handleMouseDown = (
       $cell.nodeAfter!.attrs.colspan -
       1;
 
-    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom);
+    resizeColumn(
+      resizeState,
+      colIndex,
+      clientX - dragging.startX,
+      dom,
+      undefined,
+      tablePreserveWidth,
+    );
 
     updateControls()(state);
   }

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

@@ -5,6 +5,8 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
+import { MAX_SCALING_PERCENT } from './consts';
+
 type Col = Array<string | { [name: string]: string }>;
 
 /**
@@ -16,7 +18,7 @@ type Col = Array<string | { [name: string]: string }>;
 export const getColWidthFix = (colwidth: number, tableColumnCount: number) =>
   colwidth - 1 / tableColumnCount;
 
-export const generateColgroup = (table: PmNode) => {
+export const generateColgroup = (table: PmNode, tableRef?: HTMLElement) => {
   const cols: Col[] = [];
 
   if (getBooleanFF('platform.editor.custom-table-width')) {
@@ -26,17 +28,37 @@ export const generateColgroup = (table: PmNode) => {
       if (Array.isArray(cell.attrs.colwidth)) {
         // We slice here to guard against our colwidth array having more entries
         // Than the we actually span. We'll patch the document at a later point.
-        cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
-          cols.push([
-            'col',
-            {
-              style: `width: ${getColWidthFix(
-                width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth,
-                map.width,
-              )}px;`,
-            },
-          ]);
-        });
+        if (tableRef) {
+          const tableWidth = table.attrs && table.attrs.width;
+          let renderWidth = tableRef.parentElement?.clientWidth || 760;
+          let scalePercent = renderWidth / tableWidth;
+          scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+          cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
+            const fixedColWidth = getColWidthFix(width, map.width);
+            const scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
+            const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+            cols.push([
+              'col',
+              {
+                style: `width: ${finalWidth}px;`,
+              },
+            ]);
+          });
+        } else {
+          cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
+            cols.push([
+              'col',
+              {
+                style: `width: ${getColWidthFix(
+                  width
+                    ? Math.max(width, tableCellMinWidth)
+                    : tableCellMinWidth,
+                  map.width,
+                )}px;`,
+              },
+            ]);
+          });
+        }
       } else {
         // When we have merged cells on the first row (firstChild),
         // We want to ensure we're creating the appropriate amount of
@@ -73,14 +95,21 @@ export const generateColgroup = (table: PmNode) => {
 export const insertColgroupFromNode = (
   tableRef: HTMLTableElement,
   table: PmNode,
+  tablePreserveWidth = false,
+  shouldRemove = true,
 ): HTMLCollection => {
   let colgroup = tableRef.querySelector('colgroup') as HTMLElement;
-  if (colgroup) {
+  if (colgroup && shouldRemove) {
     tableRef.removeChild(colgroup);
   }
 
-  colgroup = renderColgroupFromNode(table);
-  tableRef.insertBefore(colgroup, tableRef.firstChild);
+  colgroup = renderColgroupFromNode(
+    table,
+    tablePreserveWidth ? tableRef : undefined,
+  );
+  if (shouldRemove) {
+    tableRef.insertBefore(colgroup, tableRef.firstChild);
+  }
 
   return colgroup.children;
 };
@@ -109,11 +138,14 @@ export const isMinCellWidthTable = (table: PmNode) => {
   return isTableMinCellWidth;
 };
 
-function renderColgroupFromNode(table: PmNode): HTMLElement {
+function renderColgroupFromNode(
+  table: PmNode,
+  maybeTableRef: HTMLElement | undefined,
+): HTMLElement {
   const rendered = DOMSerializer.renderSpec(document, [
     'colgroup',
     {},
-    ...generateColgroup(table),
+    ...generateColgroup(table, maybeTableRef),
   ]);
 
   return rendered.dom as HTMLElement;

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

@@ -1,2 +1,4 @@
 export const COLUMN_MIN_WIDTH = 48;
+export const TABLE_DEFAULT_WIDTH = 760;
 export const TABLE_MAX_WIDTH = 1800;
+export const MAX_SCALING_PERCENT = 0.3;

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

@@ -30,6 +30,8 @@ export {
   currentColWidth,
   domCellAround,
   getTableMaxWidth,
+  getTableElementWidth,
+  getTableContainerElement,
 } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export {
@@ -41,4 +43,9 @@ 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';
+export {
+  COLUMN_MIN_WIDTH,
+  TABLE_MAX_WIDTH,
+  TABLE_DEFAULT_WIDTH,
+  MAX_SCALING_PERCENT,
+} from './consts';

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

@@ -1,6 +1,7 @@
 import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
 import {
   getParentNodeWidth,
+  getTableContainerWidth,
   layoutToWidth,
 } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
@@ -9,7 +10,10 @@ import {
   getBreakpoint,
   mapBreakpointToLayoutMaxWidth,
 } from '@atlaskit/editor-common/ui';
-import { containsClassName } from '@atlaskit/editor-common/utils';
+import {
+  calcTableColumnWidths,
+  containsClassName,
+} from '@atlaskit/editor-common/utils';
 import type {
   NodeSpec,
   Node as PMNode,
@@ -26,6 +30,8 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { TableOptions } from '../../../nodeviews/types';
 
+import { hasTableBeenResized } from './colgroup';
+
 // Translates named layouts in number values.
 export function getLayoutSize(
   tableLayout: TableLayout,
@@ -132,3 +138,21 @@ export const getTableMaxWidth = ({
 
   return maxWidth as number;
 };
+
+/**
+ *
+ * @param table
+ * @returns calculated width of <table /> element derived from sum of colwidths on tableCell or tableHeader nodes or falls back to container width
+ */
+export const getTableElementWidth = (table: PMNode) => {
+  if (hasTableBeenResized(table)) {
+    // TODO: is there a scenario where ADF columns are SMALLER than container width?
+    return calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
+  }
+
+  return getTableContainerElement(table);
+};
+
+export const getTableContainerElement = (table: PMNode) => {
+  return getTableContainerWidth(table);
+};

package/src/pm-plugins/table-resizing/utils/resize-column.ts

@@ -9,6 +9,7 @@ export const resizeColumn = (
   amount: number,
   tableRef: HTMLElement,
   selectedColumns?: number[],
+  tablePreserveWidth = false,
 ): ResizeState => {
   const newState =
     amount > 0
@@ -17,7 +18,7 @@ export const resizeColumn = (
       ? shrinkColumn(resizeState, colIndex, amount, selectedColumns)
       : resizeState;
 
-  updateColgroup(newState, tableRef);
+  updateColgroup(newState, tableRef, tablePreserveWidth);
 
   return newState;
 };

package/src/pm-plugins/table-resizing/utils/resize-state.ts

@@ -23,6 +23,8 @@ import { syncStickyRowToTable } from './dom';
 import { getTableMaxWidth } from './misc';
 import type { ResizeState, ResizeStateWithAnalytics } from './types';
 
+import { MAX_SCALING_PERCENT, TABLE_DEFAULT_WIDTH } from './index';
+
 export const getResizeState = ({
   minWidth,
   maxSize,
@@ -30,6 +32,7 @@ export const getResizeState = ({
   tableRef,
   start,
   domAtPos,
+  tablePreserveWidth = false,
 }: {
   minWidth: number;
   maxSize: number;
@@ -37,7 +40,9 @@ export const getResizeState = ({
   tableRef: HTMLTableElement;
   start: number;
   domAtPos: (pos: number) => { node: Node; offset: number };
+  tablePreserveWidth: boolean;
 }): ResizeState => {
+  // If the table has been resized, we can use the column widths from the table node
   if (hasTableBeenResized(table)) {
     const cols = calcTableColumnWidths(table).map((width, index) => ({
       width: width === 0 ? tableNewColumnMinWidth : width,
@@ -58,9 +63,25 @@ export const getResizeState = ({
     };
   }
 
+  const shouldReinsertColgroup = !tablePreserveWidth;
+
   // Getting the resize state from DOM
-  const colgroupChildren = insertColgroupFromNode(tableRef, table);
+  const colgroupChildren = insertColgroupFromNode(
+    tableRef,
+    table,
+    tablePreserveWidth,
+    shouldReinsertColgroup, // don't reinsert colgroup when preserving table width - this causes widths to jump
+  );
   const cols = Array.from(colgroupChildren).map((_, index) => {
+    // If the table hasn't been resized and we have a table width attribute, we can use it
+    // to calculate the widths of the columns
+    if (tablePreserveWidth && table.attrs.width) {
+      return {
+        index,
+        width: table.attrs.width / colgroupChildren.length,
+        minWidth: 48,
+      };
+    }
     const cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
     return getColumnStateFromDOM(cellsRefs, index, minWidth);
   });
@@ -83,21 +104,43 @@ export const getResizeState = ({
 export const updateColgroup = (
   state: ResizeState,
   tableRef: HTMLElement,
+  tablePreserveWidth?: boolean,
 ): void => {
   const cols = tableRef.querySelectorAll('col');
 
   if (getBooleanFF('platform.editor.custom-table-width')) {
     const columnsCount = cols.length;
-    state.cols
-      .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
-      .forEach((column, i) => {
-        if (cols[i]) {
-          cols[i].style.width = `${getColWidthFix(
-            column.width,
-            columnsCount,
-          )}px`;
-        }
-      });
+    if (tablePreserveWidth) {
+      const tableWidth = parseInt(tableRef.dataset?.tableWidth || ''); // TODO - get this value from the table node, not the dom
+      if (tableWidth) {
+        let renderWidth =
+          tableRef.parentElement?.clientWidth || TABLE_DEFAULT_WIDTH;
+        let scalePercent = renderWidth / tableWidth;
+        scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+        state.cols
+          .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
+          .forEach((column, i) => {
+            const fixedColWidth = getColWidthFix(column.width, columnsCount);
+            const scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
+            const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+            // we aren't handling the remaining pixels here when the 48px min width is reached
+            if (cols[i]) {
+              cols[i].style.width = `${finalWidth}px`;
+            }
+          });
+      }
+    } else {
+      state.cols
+        .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
+        .forEach((column, i) => {
+          if (cols[i]) {
+            cols[i].style.width = `${getColWidthFix(
+              column.width,
+              columnsCount,
+            )}px`;
+          }
+        });
+    }
   } else {
     state.cols
       .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
@@ -306,6 +349,7 @@ export const getNewResizeStateFromSelectedColumns = (
   state: EditorState,
   domAtPos: (pos: number) => { node: Node; offset: number },
   getEditorContainerWidth: GetEditorContainerWidth,
+  tablePreserveWidth = false,
 ): ResizeStateWithAnalytics | undefined => {
   // Fail early so that we don't do complex calculations for no reason
   const numColumnsSelected = rect.right - rect.left;
@@ -350,6 +394,7 @@ export const getNewResizeStateFromSelectedColumns = (
     tableRef,
     start: table.start,
     domAtPos,
+    tablePreserveWidth,
   });
 
   const newResizeState = evenSelectedColumnsWidths(resizeState, rect);

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

@@ -39,6 +39,7 @@ export const scale = (
   tableRef: HTMLTableElement,
   options: ScaleOptions,
   domAtPos: DomAtPos,
+  tablePreserveWidth = false,
 ): ResizeState | undefined => {
   /**
    * isBreakoutEnabled === true -> default center aligned
@@ -97,6 +98,7 @@ export const scale = (
     tableRef,
     start,
     domAtPos,
+    tablePreserveWidth,
   });
 
   return scaleTableTo(resizeState, newWidth);
@@ -108,6 +110,7 @@ export const scaleWithParent = (
   table: PMNode,
   start: number,
   domAtPos: DomAtPos,
+  tablePreserveWidth = false,
 ) => {
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
@@ -116,6 +119,7 @@ export const scaleWithParent = (
     tableRef,
     start,
     domAtPos,
+    tablePreserveWidth,
   });
 
   if (table.attrs.isNumberColumnEnabled) {
@@ -154,6 +158,7 @@ export const previewScaleTable = (
   tableRef: HTMLTableElement | null | undefined,
   options: ScaleOptions,
   domAtPos: DomAtPos,
+  tablePreserveWidth: boolean = false,
 ) => {
   const { node, start, parentWidth } = options;
 
@@ -169,17 +174,26 @@ export const previewScaleTable = (
     tableRef.style.width = `${width}px`;
   }
 
-  if (!hasTableBeenResized(node)) {
+  // If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
+  // If we are scaling the table down with tablePreserveWidth, the colgroup widths may be scaled to a value that is not 48px.
+  if (!hasTableBeenResized(node) && !tablePreserveWidth) {
     syncStickyRowToTable(tableRef);
     return;
   }
 
   const resizeState = parentWidth
-    ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos)
-    : scale(tableRef, options, domAtPos);
+    ? scaleWithParent(
+        tableRef,
+        parentWidth,
+        node,
+        start,
+        domAtPos,
+        tablePreserveWidth,
+      )
+    : scale(tableRef, options, domAtPos, tablePreserveWidth);
 
   if (resizeState) {
-    updateColgroup(resizeState, tableRef);
+    updateColgroup(resizeState, tableRef, tablePreserveWidth);
   }
 };
 
@@ -189,6 +203,7 @@ export const scaleTable =
     tableRef: HTMLTableElement | null | undefined,
     options: ScaleOptions,
     domAtPos: DomAtPos,
+    tablePreserveWidth = false,
   ) =>
   (tr: Transaction) => {
     if (!tableRef) {
@@ -200,7 +215,9 @@ export const scaleTable =
     if (hasTableBeenResized(node) === false) {
       // If its not a re-sized table, we still want to re-create cols
       // To force reflow of columns upon delete.
-      insertColgroupFromNode(tableRef, node);
+      if (!tablePreserveWidth) {
+        insertColgroupFromNode(tableRef, node);
+      }
       tr.setMeta('scrollIntoView', false);
       return tr;
     }
@@ -213,9 +230,10 @@ export const scaleTable =
         node,
         start,
         domAtPos,
+        tablePreserveWidth,
       );
     } else {
-      resizeState = scale(tableRef, options, domAtPos);
+      resizeState = scale(tableRef, options, domAtPos, tablePreserveWidth);
     }
 
     if (resizeState) {

package/src/toolbar.tsx

@@ -169,6 +169,7 @@ export const getToolbarCellOptionsConfig = (
   { formatMessage }: ToolbarMenuContext,
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  tablePreserveWidth = false,
 ): FloatingToolbarDropdown<Command> => {
   const { top, bottom, right, left } = initialSelectionRect;
   const numberOfColumns = right - left;
@@ -190,6 +191,7 @@ export const getToolbarCellOptionsConfig = (
           insertColumnWithAnalytics(
             getEditorContainerWidth,
             editorAnalyticsAPI,
+            tablePreserveWidth,
           )(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
         }
         return true;
@@ -292,6 +294,7 @@ export const getToolbarCellOptionsConfig = (
           editorState,
           editorView.domAtPos.bind(editorView),
           getEditorContainerWidth,
+          tablePreserveWidth,
         )
       : undefined;
     const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
@@ -459,6 +462,8 @@ export const getToolbarConfig =
         editorAnalyticsAPI,
       );
 
+      const { tablePreserveWidth = false } = getEditorFeatureFlags();
+
       let cellItems: Array<FloatingToolbarItem<Command>>;
       cellItems = pluginState.isDragAndDropEnabled
         ? []
@@ -469,6 +474,7 @@ export const getToolbarConfig =
             intl,
             getEditorContainerWidth,
             editorAnalyticsAPI,
+            tablePreserveWidth,
           );
 
       let columnSettingsItems;
@@ -481,6 +487,7 @@ export const getToolbarConfig =
               intl,
               getEditorContainerWidth,
               editorAnalyticsAPI,
+              tablePreserveWidth,
             )
           : [];
       const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
@@ -606,6 +613,7 @@ const getCellItems = (
   { formatMessage }: ToolbarMenuContext,
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  tablePreserveWidth = false,
 ): Array<FloatingToolbarItem<Command>> => {
   const initialSelectionRect = getClosestSelectionRect(state);
   if (initialSelectionRect) {
@@ -616,6 +624,7 @@ const getCellItems = (
       { formatMessage },
       getEditorContainerWidth,
       editorAnalyticsAPI,
+      tablePreserveWidth,
     );
     return [cellOptions, separator(cellOptions.hidden!)];
   }
@@ -626,6 +635,7 @@ export const getDistributeConfig =
   (
     getEditorContainerWidth: GetEditorContainerWidth,
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+    tablePreserveWidth = false,
   ): Command =>
   (state, dispatch, editorView) => {
     const selectionOrTableRect = getClosestSelectionOrTableRect(state);
@@ -637,6 +647,7 @@ export const getDistributeConfig =
       state,
       editorView.domAtPos.bind(editorView),
       getEditorContainerWidth,
+      tablePreserveWidth,
     );
 
     if (newResizeStateWithAnalytics) {
@@ -657,6 +668,7 @@ const getColumnSettingItems = (
   { formatMessage }: ToolbarMenuContext,
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  tablePreserveWidth = false,
 ): Array<FloatingToolbarItem<Command>> => {
   const pluginState = getPluginState(editorState);
   const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
@@ -670,6 +682,7 @@ const getColumnSettingItems = (
     editorState,
     editorView.domAtPos.bind(editorView),
     getEditorContainerWidth,
+    tablePreserveWidth,
   );
 
   const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
@@ -685,11 +698,11 @@ const getColumnSettingItems = (
         title: formatMessage(messages.distributeColumns),
         icon: DistributeColumnIcon,
         onClick: (state, dispatch, view) =>
-          getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI)(
-            state,
-            dispatch,
-            view,
-          ),
+          getDistributeConfig(
+            getEditorContainerWidth,
+            editorAnalyticsAPI,
+            tablePreserveWidth,
+          )(state, dispatch, view),
         disabled: !wouldChange,
       },
       {