@atlaskit/editor-plugin-table 7.13.0 → 7.13.2

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

@@ -32,6 +32,7 @@ import {
   getTableMaxWidth,
   pointsAtCell,
   resizeColumn,
+  resizeColumnAndTable,
   updateControls,
 } from './utils';
 
@@ -197,22 +198,31 @@ export const handleMouseDown = (
             shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
 
-        const newResizeState = resizeColumn(
-          resizeState,
-          colIndex,
-          clientX - startX,
-          dom,
-          originalTable,
-          resizingSelectedColumns ? selectedColumns : undefined,
-          shouldScale,
-        );
-
         const resizedDelta = clientX - startX;
 
-        tr = updateColumnWidths(newResizeState, table, start)(tr);
-
         if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+          const newResizeState = resizeColumnAndTable(
+            resizeState,
+            colIndex,
+            clientX - startX,
+            dom,
+            originalTable,
+            resizingSelectedColumns ? selectedColumns : undefined,
+            shouldScale,
+          );
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+        } else {
+          const newResizeState = resizeColumn(
+            resizeState,
+            colIndex,
+            clientX - startX,
+            dom,
+            originalTable,
+            resizingSelectedColumns ? selectedColumns : undefined,
+            shouldScale,
+          );
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
         }
 
         if (colIndex === map.width - 1) {
@@ -300,15 +310,27 @@ export const handleMouseDown = (
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
 
-    resizeColumn(
-      resizeState,
-      colIndex,
-      clientX - dragging.startX,
-      dom,
-      table,
-      undefined,
-      shouldScale,
-    );
+    if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+      resizeColumnAndTable(
+        resizeState,
+        colIndex,
+        clientX - dragging.startX,
+        dom,
+        table,
+        undefined,
+        shouldScale,
+      );
+    } else {
+      resizeColumn(
+        resizeState,
+        colIndex,
+        clientX - dragging.startX,
+        dom,
+        table,
+        undefined,
+        shouldScale,
+      );
+    }
 
     updateControls()(state);
   }

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

@@ -42,7 +42,7 @@ export {
 } from './scale-table';
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
-export { resizeColumn } from './resize-column';
+export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export {
   COLUMN_MIN_WIDTH,
   TABLE_MAX_WIDTH,

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

@@ -167,3 +167,14 @@ export const getTableScalingPercent = (
   scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
   return Math.min(scalePercent, 1);
 };
+
+export const getStaticTableScalingPercent = (
+  table: PMNode,
+  tableRenderWidth: number,
+) => {
+  const tableWidth = getTableContainerElementWidth(table);
+  // minus 1 here to avoid any 1px scroll in Firefox
+  let scalePercent = (tableRenderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
+};

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

@@ -1,6 +1,5 @@
 // Resize a given column by an amount from the current state
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { TableCssClassName as ClassName } from '../../../types';
 
@@ -18,79 +17,100 @@ 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: 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;
-  }
+  let 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 (
-    isTableScalingEnabled &&
-    !getBooleanFF('platform.editor.table.colum-resizing-improvements')
-  ) {
+  if (isTableScalingEnabled) {
     scalePercent = getTableScalingPercent(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
 
-  const newState = getBooleanFF(
-    'platform.editor.table.colum-resizing-improvements',
-  )
-    ? updateAffectedColumn(resizeState, colIndex, resizeAmount)
-    : resizeAmount > 0
-    ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns)
-    : resizeAmount < 0
-    ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
-    : resizeState;
-
-  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
-    const delta =
-      newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-
-    updateTable(delta, tableRef, tableNode);
-    return {
-      ...newState,
-      tableWidth: resizeState.tableWidth + delta,
-    };
-  }
+  const newState =
+    resizeAmount > 0
+      ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns)
+      : resizeAmount < 0
+        ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
+        : resizeState;
+
+  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
 
   return newState;
 };
 
-const updateTable = (
+// try not scale table during resize
+export const resizeColumnAndTable = (
+  resizeState: ResizeState,
+  colIndex: number,
+  amount: number,
+  tableRef: HTMLElement,
+  tableNode: PmNode,
+  selectedColumns?: number[],
+  isTableScalingEnabled = false,
+  originalTableWidth?: number,
+): ResizeState => {
+  // TODO: can we use document state, and apply scaling factor?
+  const tableWidth = tableRef.clientWidth;
+  const tableContainerWidth = tableRef.closest(
+    '.pm-table-container',
+  )?.clientWidth;
+
+  const isOverflowed = !!(
+    tableWidth &&
+    tableContainerWidth &&
+    tableWidth > tableContainerWidth
+  );
+
+  let resizeAmount = amount * 2;
+
+  // todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
+  // let scalePercent = 1;
+  // if (isTableScalingEnabled) {
+  // import from ./misc
+  //   scalePercent = getStaticTableScalingPercent(
+  //     tableNode,
+  //     originalTableWidth || resizeState.maxSize,
+  //   );
+  //   resizeAmount = amount / scalePercent;
+  // }
+
+  // need to look at the resize amount and try to adjust the colgroups
+  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;
+  }
+
+  const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
+
+  // this function only updates the colgroup in DOM, it reverses the scalePercent
+  // todo: change isScalingEnabled to true when reimplementing scaling
+  updateColgroup(newState, tableRef, tableNode, false);
+
+  // use the difference in width from affected column to update overall table width
+  const delta =
+    newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+
+  if (!isOverflowed) {
+    updateTablePreview(delta, tableRef, tableNode);
+  }
+
+  return {
+    ...newState,
+    tableWidth: isOverflowed
+      ? tableContainerWidth
+      : resizeState.tableWidth + delta,
+  };
+};
+
+const updateTablePreview = (
   resizeAmount: number,
   tableRef: HTMLElement | null,
   tableNode: PmNode,
@@ -101,7 +121,7 @@ const updateTable = (
   );
   const resizingItem = resizingContainer?.querySelector('.resizer-item');
 
-  if (resizingContainer && resizingItem) {
+  if (resizingItem) {
     const newWidth = `${currentWidth + resizeAmount}px`;
     if (tableRef) {
       tableRef.style.width = newWidth;

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -539,12 +539,17 @@ export class ContextualMenu extends Component<
       selectionRect,
       editorAnalyticsAPI,
       getEditorContainerWidth,
+      getEditorFeatureFlags,
     } = this.props;
     // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
     const { state, dispatch } = editorView;
     const { targetCellPosition, isTableScalingEnabled = false } =
       getPluginState(state);
 
+    const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
+      ? getEditorFeatureFlags()
+      : {};
+
     switch (item.value.name) {
       case 'sort_column_desc':
         sortColumnWithAnalytics(editorAnalyticsAPI)(
@@ -602,17 +607,25 @@ export class ContextualMenu extends Component<
         this.toggleOpen();
         break;
       case 'insert_column':
-        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(
-          INPUT_METHOD.CONTEXT_MENU,
-          selectionRect.right,
-        )(state, dispatch, editorView);
+        insertColumnWithAnalytics(
+          editorAnalyticsAPI,
+          isTableScalingEnabled,
+          tableDuplicateCellColouring,
+        )(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(
+          state,
+          dispatch,
+          editorView,
+        );
         this.toggleOpen();
         break;
       case 'insert_row':
-        insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, {
-          index: selectionRect.bottom,
-          moveCursorToInsertedRow: true,
-        })(state, dispatch);
+        insertRowWithAnalytics(editorAnalyticsAPI, tableDuplicateCellColouring)(
+          INPUT_METHOD.CONTEXT_MENU,
+          {
+            index: selectionRect.bottom,
+            moveCursorToInsertedRow: true,
+          },
+        )(state, dispatch);
         this.toggleOpen();
         break;
       case 'delete_column':

package/src/ui/FloatingContextualMenu/index.tsx

@@ -53,6 +53,7 @@ const FloatingContextualMenu = ({
   pluginConfig,
   editorAnalyticsAPI,
   getEditorContainerWidth,
+  getEditorFeatureFlags,
 }: Props) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const { targetCellPosition, isDragAndDropEnabled } = getPluginState(
@@ -122,6 +123,7 @@ const FloatingContextualMenu = ({
           boundariesElement={boundariesElement}
           editorAnalyticsAPI={editorAnalyticsAPI}
           getEditorContainerWidth={getEditorContainerWidth}
+          getEditorFeatureFlags={getEditorFeatureFlags}
         />
       </div>
     </Popup>

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -102,6 +102,7 @@ type DragMenuProps = {
   boundariesElement?: HTMLElement;
   scrollableElement?: HTMLElement;
   isTableScalingEnabled?: boolean;
+  tableDuplicateCellColouring?: boolean;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -281,6 +282,7 @@ export const DragMenu = React.memo(
     scrollableElement,
     boundariesElement,
     isTableScalingEnabled,
+    tableDuplicateCellColouring,
   }: DragMenuProps & WrappedComponentProps) => {
     const { state, dispatch } = editorView;
     const { selection } = state;
@@ -324,6 +326,7 @@ export const DragMenu = React.memo(
       editorAnalyticsAPI,
       pluginConfig?.isHeaderRowRequired,
       isTableScalingEnabled,
+      tableDuplicateCellColouring,
     );
 
     const { menuItems, menuCallback } = convertToDropdownItems(

package/src/ui/FloatingDragMenu/index.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -33,6 +36,7 @@ export interface Props {
   stickyHeaders?: RowStickyState;
   pluginConfig?: PluginConfig;
   isTableScalingEnabled?: boolean;
+  getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 
 const FloatingDragMenu = ({
@@ -50,6 +54,7 @@ const FloatingDragMenu = ({
   stickyHeaders,
   pluginConfig,
   isTableScalingEnabled,
+  getEditorFeatureFlags,
 }: Props) => {
   if (
     !isOpen ||
@@ -74,6 +79,10 @@ const FloatingDragMenu = ({
     return null;
   }
 
+  const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
+    ? getEditorFeatureFlags()
+    : {};
+
   return (
     <Popup
       alignX={direction === 'row' ? 'right' : undefined}
@@ -113,6 +122,7 @@ const FloatingDragMenu = ({
         boundariesElement={boundariesElement}
         scrollableElement={scrollableElement}
         isTableScalingEnabled={isTableScalingEnabled}
+        tableDuplicateCellColouring={tableDuplicateCellColouring}
       />
     </Popup>
   );

package/src/ui/FloatingInsertButton/index.tsx

@@ -15,7 +15,10 @@ import {
   EVENT_TYPE,
   INPUT_METHOD,
 } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -53,6 +56,7 @@ export interface Props {
   hasStickyHeaders?: boolean;
   dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
+  getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 
 export class FloatingInsertButton extends React.Component<
@@ -94,8 +98,8 @@ export class FloatingInsertButton extends React.Component<
       typeof insertColumnButtonIndex !== 'undefined'
         ? 'column'
         : typeof insertRowButtonIndex !== 'undefined'
-        ? 'row'
-        : null;
+          ? 'row'
+          : null;
 
     if (!tableNode || !tableRef || !type) {
       return null;
@@ -261,13 +265,23 @@ export class FloatingInsertButton extends React.Component<
   }
 
   private insertRow(event: React.SyntheticEvent) {
-    const { editorView, insertRowButtonIndex, editorAnalyticsAPI } = this.props;
+    const {
+      editorView,
+      insertRowButtonIndex,
+      editorAnalyticsAPI,
+      getEditorFeatureFlags,
+    } = this.props;
 
     if (typeof insertRowButtonIndex !== 'undefined') {
       event.preventDefault();
 
       const { state, dispatch } = editorView;
-      insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, {
+      const featureFlags = !!getEditorFeatureFlags && getEditorFeatureFlags();
+
+      insertRowWithAnalytics(
+        editorAnalyticsAPI,
+        featureFlags && featureFlags.tableDuplicateCellColouring,
+      )(INPUT_METHOD.BUTTON, {
         index: insertRowButtonIndex,
         moveCursorToInsertedRow: true,
       })(state, dispatch);
@@ -275,8 +289,12 @@ export class FloatingInsertButton extends React.Component<
   }
 
   private insertColumn(event: React.SyntheticEvent) {
-    const { editorView, insertColumnButtonIndex, editorAnalyticsAPI } =
-      this.props;
+    const {
+      editorView,
+      insertColumnButtonIndex,
+      editorAnalyticsAPI,
+      getEditorFeatureFlags,
+    } = this.props;
 
     if (typeof insertColumnButtonIndex !== 'undefined') {
       event.preventDefault();
@@ -285,11 +303,20 @@ export class FloatingInsertButton extends React.Component<
         editorView.state,
       );
 
+      const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
+        ? getEditorFeatureFlags()
+        : {};
+
       const { state, dispatch } = editorView;
-      insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(
-        INPUT_METHOD.BUTTON,
-        insertColumnButtonIndex,
-      )(state, dispatch, editorView);
+      insertColumnWithAnalytics(
+        editorAnalyticsAPI,
+        isTableScalingEnabled,
+        tableDuplicateCellColouring,
+      )(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(
+        state,
+        dispatch,
+        editorView,
+      );
     }
   }
 }

package/src/utils/drag-menu.ts

@@ -177,6 +177,7 @@ export const getDragMenuConfig = (
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   isHeaderRowRequired?: boolean,
   isTableScalingEnabled = false,
+  tableDuplicateCellColouring = false,
 ): DragMenuConfig[] => {
   const addOptions =
     direction === 'row'
@@ -303,18 +304,23 @@ export const getDragMenuConfig = (
       icon,
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         if (direction === 'row') {
-          insertRowWithAnalytics(editorAnalyticsAPI)(
-            INPUT_METHOD.TABLE_CONTEXT_MENU,
-            {
-              index: (index ?? 0) + offset,
-              moveCursorToInsertedRow: true,
-            },
-          )(state, dispatch);
+          insertRowWithAnalytics(
+            editorAnalyticsAPI,
+            tableDuplicateCellColouring,
+          )(INPUT_METHOD.TABLE_CONTEXT_MENU, {
+            index: (index ?? 0) + offset,
+            moveCursorToInsertedRow: true,
+          })(state, dispatch);
         } else {
-          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(
-            INPUT_METHOD.TABLE_CONTEXT_MENU,
-            (index ?? 0) + offset,
-          )(state, dispatch, editorView);
+          insertColumnWithAnalytics(
+            editorAnalyticsAPI,
+            isTableScalingEnabled,
+            tableDuplicateCellColouring,
+          )(INPUT_METHOD.TABLE_CONTEXT_MENU, (index ?? 0) + offset)(
+            state,
+            dispatch,
+            editorView,
+          );
         }
         return true;
       },