@atlaskit/editor-plugin-table 7.7.3 → 7.8.0

package/src/commands/toggle.ts

@@ -15,7 +15,7 @@ import { META_KEYS } from '../pm-plugins/table-analytics';
  * Table layout toggle logic
  * default -> wide -> full-width -> default
  */
-export const getNextLayout = (currentLayout: TableLayout): TableLayout => {
+export const getNextLayout = (currentLayout: TableLayout) => {
   switch (currentLayout) {
     case 'default':
       return 'wide';

package/src/commands-with-analytics.ts

@@ -1,6 +1,5 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 
-import type { TableLayout } from '@atlaskit/adf-schema';
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import {
@@ -535,7 +534,9 @@ export const toggleTableLayoutWithAnalytics = (
     );
 
     if (table) {
-      const { layout } = table.node.attrs as { layout: TableLayout };
+      const { layout } = table.node.attrs as {
+        layout: 'default' | 'wide' | 'full-width';
+      };
       return {
         action: TABLE_ACTION.CHANGED_BREAKOUT_MODE,
         actionSubject: ACTION_SUBJECT.TABLE,

package/src/nodeviews/table.tsx

@@ -50,6 +50,7 @@ const tableAttributes = (node: PmNode) => {
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
     'data-table-width': node.attrs.width,
+    'data-table-display-mode': node.attrs.displayMode,
   };
 };
 

package/src/plugin.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 
-import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import {
+  table,
+  tableCell,
+  tableHeader,
+  tableRow,
+  tableStage0,
+} from '@atlaskit/adf-schema';
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
 import {
   ACTION,
@@ -223,8 +229,14 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
     },
 
     nodes() {
+      const tableNode =
+        options?.isTableScalingEnabled &&
+        getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+          ? tableStage0
+          : table;
+
       return [
-        { name: 'table', node: table },
+        { name: 'table', node: tableNode },
         { name: 'tableHeader', node: tableHeader },
         { name: 'tableRow', node: tableRow },
         { name: 'tableCell', node: tableCell },
@@ -610,6 +622,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         editorAnalyticsAPI,
         options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
         () => editorViewRef.current,
+        options,
       )(pluginConfig(options?.tableOptions)),
     },
   };

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

@@ -1,4 +1,4 @@
-import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes } from '@atlaskit/adf-schema';
 import {
   getParentNodeWidth,
   getTableContainerWidth,
@@ -34,7 +34,7 @@ import { MAX_SCALING_PERCENT } from './consts';
 
 // Translates named layouts in number values.
 export function getLayoutSize(
-  tableLayout: TableLayout,
+  tableLayout: 'default' | 'wide' | 'full-width',
   containerWidth: number = 0,
   options: TableOptions,
 ): number {
@@ -112,7 +112,7 @@ interface getTableMaxWidthProps {
   table: PMNode;
   tableStart: number;
   state: EditorState;
-  layout: TableLayout;
+  layout: 'default' | 'wide' | 'full-width';
   getEditorContainerWidth: GetEditorContainerWidth;
 }
 

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

@@ -18,12 +18,39 @@ export const resizeColumn = (
   selectedColumns?: number[],
   isTableScalingEnabled = false,
 ): ResizeState => {
+  // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
   let scalePercent = 1;
-  let resizeAmount = getBooleanFF(
-    'platform.editor.table.colum-resizing-improvements',
-  )
-    ? amount * 2
-    : amount;
+  let resizeAmount: number;
+
+  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+    // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
+    const tableWidth = tableRef?.clientWidth;
+    const tableContainerWidth = tableRef.closest('.resizer-item')?.clientWidth;
+
+    const isOverflowed = !!(
+      tableWidth &&
+      tableContainerWidth &&
+      tableWidth > tableContainerWidth
+    );
+
+    resizeAmount = amount * 2;
+
+    if (isOverflowed) {
+      resizeAmount =
+        amount < 0
+          ? amount
+          : resizeAmount -
+            (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+    } else {
+      resizeAmount =
+        amount > 0 && tableContainerWidth
+          ? resizeAmount -
+            (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2
+          : resizeAmount;
+    }
+  } else {
+    resizeAmount = amount;
+  }
 
   // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
   if (
@@ -44,7 +71,9 @@ export const resizeColumn = (
     ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
     : resizeState;
 
-  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
+  getBooleanFF('platform.editor.table.colum-resizing-improvements')
+    ? updateColgroup(newState, tableRef, tableNode, false)
+    : updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
 
   if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
     // use the difference in width from affected column to update overall table width
@@ -65,7 +94,6 @@ const updateTable = (
   resizeAmount: number,
   tableRef: HTMLElement,
   tableNode: PmNode,
-  // isTableScalingEnabled: boolean,
 ) => {
   const currentWidth = getTableContainerElementWidth(tableNode);
   const resizingContainer = tableRef.closest(

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

@@ -1,4 +1,3 @@
-import type { TableLayout } from '@atlaskit/adf-schema';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import {
   tableCellMinWidth,
@@ -113,8 +112,12 @@ export const updateColgroup = (
   isTableScalingEnabled?: boolean,
 ): void => {
   const cols = tableRef.querySelectorAll('col');
-
   const columnsCount = cols.length;
+  /**
+     updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
+     We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
+     We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
+     * */
   if (isTableScalingEnabled && tableNode) {
     const scalePercent = getTableScalingPercent(tableNode, tableRef);
     state.cols
@@ -321,9 +324,7 @@ export const areColumnsEven = (resizeState: ResizeState): boolean => {
 };
 
 // Get the layout
-export const normaliseTableLayout = (
-  input: string | undefined | null,
-): TableLayout => {
+export const normaliseTableLayout = (input: string | undefined | null) => {
   switch (input) {
     case 'wide':
       return input;

package/src/toolbar.tsx

@@ -13,6 +13,7 @@ import {
 import commonMessages, {
   tableMessages as messages,
 } from '@atlaskit/editor-common/messages';
+import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import type { typeOption } from '@atlaskit/editor-common/src/types/floating-toolbar';
 import type {
   Command,
@@ -61,6 +62,7 @@ import {
   hoverRows,
   hoverTable,
   removeDescendantNodes,
+  setTableDisplayMode,
 } from './commands';
 import {
   deleteColumnsWithAnalytics,
@@ -79,6 +81,7 @@ import {
   toggleNumberColumnWithAnalytics,
   wrapTableInExpandWithAnalytics,
 } from './commands-with-analytics';
+import type { TablePluginOptions } from './plugin';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
@@ -91,6 +94,7 @@ import type {
   ToolbarMenuState,
 } from './types';
 import { TableCssClassName } from './types';
+import { DisplayModeIcon } from './ui/icons';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import {
   getMergedCellsPositions,
@@ -450,6 +454,7 @@ export const getToolbarConfig =
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
     getEditorFeatureFlags: GetEditorFeatureFlags,
     getEditorView: () => EditorView | null,
+    options?: TablePluginOptions,
   ) =>
   (config: PluginConfig): FloatingToolbarHandler =>
   (state, intl) => {
@@ -465,7 +470,7 @@ export const getToolbarConfig =
     const currentTableNodeLocalId = tableObject?.node?.attrs?.localId ?? '';
 
     if (
-      isTableScalingEnabled &&
+      isTableScalingEnabled && // TODO ED-21670: check if need options.isTableScalingEnabled
       isWidthResizing &&
       widthToWidest &&
       currentTableNodeLocalId &&
@@ -526,7 +531,7 @@ export const getToolbarConfig =
         editorAnalyticsAPI,
       );
 
-      const { isTableScalingEnabled = false } = getPluginState(state);
+      const { isTableScalingEnabled = false } = getPluginState(state); // TODO ED-21670: check if we need options.isTableScalingEnabled and not an acutual state of displayNode attr on the table
 
       let cellItems: Array<FloatingToolbarItem<Command>>;
       cellItems = pluginState.isDragAndDropEnabled
@@ -548,6 +553,7 @@ export const getToolbarConfig =
             intl,
             getEditorContainerWidth,
             editorAnalyticsAPI,
+            options,
             isTableScalingEnabled,
           )
         : [];
@@ -728,6 +734,7 @@ const getColumnSettingItems = (
   { formatMessage }: ToolbarMenuContext,
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  options: TablePluginOptions | undefined,
   isTableScalingEnabled = false,
 ): Array<FloatingToolbarItem<Command>> => {
   const pluginState = getPluginState(editorState);
@@ -742,35 +749,62 @@ const getColumnSettingItems = (
     editorState,
     editorView.domAtPos.bind(editorView),
     getEditorContainerWidth,
-    isTableScalingEnabled,
+    isTableScalingEnabled, // TODO ED-21670: Here should be actual state of tableNode's displayMode attr
   );
 
   const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
 
+  const items: Array<FloatingToolbarItem<Command>> = [];
+
+  const isTableScalingLockBtnEnabled =
+    options?.isTableScalingEnabled &&
+    getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+
+  if (isTableScalingLockBtnEnabled) {
+    const areColumnWidthsLocked =
+      pluginState?.tableNode?.attrs.displayMode === 'fixed';
+
+    const title = areColumnWidthsLocked
+      ? formatMessage(messages.unlockColumnWidths)
+      : formatMessage(messages.lockColumnWidths);
+
+    items.push({
+      id: 'editor.table.lockColumns',
+      type: 'button',
+      title,
+      icon: () => <DisplayModeIcon size="medium" label={title} />,
+      onClick: editorCommandToPMCommand(setTableDisplayMode),
+      selected: areColumnWidthsLocked,
+      testId: 'table-lock-column-widths-btn',
+    });
+  }
+
   if (
     pluginState?.pluginConfig?.allowDistributeColumns &&
     pluginState.isDragAndDropEnabled
   ) {
-    return [
-      {
-        id: 'editor.table.distributeColumns',
-        type: 'button',
-        title: formatMessage(messages.distributeColumns),
-        icon: DistributeColumnIcon,
-        onClick: (state, dispatch, view) =>
-          getDistributeConfig(
-            getEditorContainerWidth,
-            editorAnalyticsAPI,
-            isTableScalingEnabled,
-          )(state, dispatch, view),
-        disabled: !wouldChange,
-      },
-      {
-        type: 'separator',
-      },
-    ];
+    items.push({
+      id: 'editor.table.distributeColumns',
+      type: 'button',
+      title: formatMessage(messages.distributeColumns),
+      icon: DistributeColumnIcon,
+      onClick: (state, dispatch, view) =>
+        getDistributeConfig(
+          getEditorContainerWidth,
+          editorAnalyticsAPI,
+          isTableScalingEnabled, // TODO ED-21670: Maybe here too we an actual state of tableNode's displayMode attr
+        )(state, dispatch, view),
+      disabled: !wouldChange,
+    });
   }
-  return [];
+
+  if (items.length !== 0) {
+    items.push({
+      type: 'separator',
+    });
+  }
+
+  return items;
 };
 
 const getColorPicker = (

package/src/transforms/fix-tables.ts

@@ -1,4 +1,3 @@
-import type { TableLayout } from '@atlaskit/adf-schema';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
@@ -186,7 +185,7 @@ export const fixAutoSizedTable = (
     .setMeta('addToHistory', false);
 };
 
-const getLayoutBasedOnWidth = (totalWidth: number): TableLayout => {
+const getLayoutBasedOnWidth = (totalWidth: number) => {
   if (totalWidth > akEditorWideLayoutWidth) {
     return 'full-width';
   } else if (

package/src/types.ts

@@ -174,6 +174,11 @@ export interface TablePluginState {
   isTableResizingEnabled?: boolean;
   isDragAndDropEnabled?: boolean;
   isTableHovered?: boolean;
+
+  // Currently isTableScalingEnabled is the same as options.isTableScalingEnabled from TablePluginOptions.
+  // However, if you want to learn if tablePlugin is configured to enable Preserve Table Widths feature,
+  // use options.isTableScalingEnabled and avoid using pluginState.isTableScalingEnabled or
+  // const { isTableScalingEnabled } = getPluginState(state) for that purpose.
   isTableScalingEnabled?: boolean;
 }
 

package/src/ui/icons/DisplayModeIcon.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import Icon from '@atlaskit/icon';
+import type { CustomGlyphProps, GlyphProps } from '@atlaskit/icon/types';
+
+export const DisplayModeGlyth = (props: CustomGlyphProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect x="4" y="5" width="4" height="14" rx="1" fill="currentColor" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11 5C10.4477 5 10 5.44772 10 6V9.10102C11.0503 8.02921 12.4424 7.29368 14 7.07089V6C14 5.44772 13.5523 5 13 5H11Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17 5C16.4477 5 16 5.44772 16 6V7.07089C17.5576 7.29368 18.9497 8.02921 20 9.10102V6C20 5.44772 19.5523 5 19 5H17Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21 14C21 17.3137 18.3137 20 15 20C11.6863 20 9 17.3137 9 14C9 10.6863 11.6863 8 15 8C18.3137 8 21 10.6863 21 14ZM12 15C12 14.4477 12.4477 14 13 14V12C13 10.8954 13.8954 10 15 10C16.1046 10 17 10.8954 17 12V14C17.5523 14 18 14.4477 18 15V17C18 17.5523 17.5523 18 17 18H13C12.4477 18 12 17.5523 12 17V15ZM16 14V12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12V14H16Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const DisplayModeIcon = (props: GlyphProps) => {
+  return <Icon glyph={DisplayModeGlyth} {...props} />;
+};

package/src/ui/icons/index.ts

@@ -1,6 +1,7 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
+export { DisplayModeIcon } from './DisplayModeIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
 export { MergeCellsIcon } from './MergeCellsIcon';
 export { SplitCellIcon } from './SplitCellIcon';