@atlaskit/editor-plugin-table 7.4.9 → 7.5.1

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,
       },
       {

package/src/transforms/column-width.ts

@@ -9,7 +9,11 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { ResizeState } from '../pm-plugins/table-resizing/utils';
-import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
+import {
+  getTableContainerElement,
+  getTableElementWidth,
+  hasTableBeenResized,
+} from '../pm-plugins/table-resizing/utils';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
@@ -104,7 +108,7 @@ export const updateColumnWidths =
  * @returns Updated transaction with rescaled columns for a given table
  */
 export const rescaleColumns =
-  () =>
+  (tablePreserveWidth = false) =>
   (table: ContentNodeWithPos, view: EditorView | undefined) =>
   (tr: Transaction): Transaction => {
     if (!view) {
@@ -121,18 +125,35 @@ export const rescaleColumns =
     }
 
     const isResized = hasTableBeenResized(table.node);
-    // get current table info
-    const previousTableInfo = {
-      // when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
-      width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
-      /** the is the width the table can reach before overflowing */
-      possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width')
-        ? tableRef?.parentElement?.clientWidth || 0
-        : (tableRef?.parentElement?.clientWidth || 0) -
-          insertColumnButtonOffset,
+
+    let previousTableInfo = {
+      width: 0,
+      possibleMaxWidth: 0,
       isResized,
     };
 
+    if (tablePreserveWidth) {
+      previousTableInfo = {
+        // TODO - ensure correct width is returned when table doesn't have a width value
+        width: getTableElementWidth(table.node),
+        possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width')
+          ? getTableContainerElement(table.node)
+          : getTableContainerElement(table.node) - insertColumnButtonOffset,
+        isResized,
+      };
+    } else {
+      previousTableInfo = {
+        // when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
+        width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
+        /** the is the width the table can reach before overflowing */
+        possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width')
+          ? tableRef?.parentElement?.clientWidth || 0
+          : (tableRef?.parentElement?.clientWidth || 0) -
+            insertColumnButtonOffset,
+        isResized,
+      };
+    }
+
     // determine the new table, based on new width
     const newTableInfo = {
       noOfColumns: TableMap.get(newTable).width,
@@ -195,6 +216,7 @@ export const rescaleColumns =
       tableRef,
       domAtPos,
       maxSize: previousTableInfo.possibleMaxWidth,
+      tablePreserveWidth,
     });
 
     // Two scenarios that require scaling:

package/src/transforms/delete-columns.ts

@@ -249,7 +249,12 @@ function fixRowSpans(table: PMNode): PMNode | null {
 }
 
 export const deleteColumns =
-  (rect: Rect, allowCustomStep: boolean, view?: EditorView) =>
+  (
+    rect: Rect,
+    allowCustomStep: boolean,
+    view?: EditorView,
+    tablePreserveWidth = false,
+  ) =>
   (tr: Transaction) => {
     let updatedTr = tr;
     updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
@@ -264,7 +269,7 @@ export const deleteColumns =
     const table = findTable(updatedTr.selection);
 
     if (table) {
-      updatedTr = rescaleColumns()(table, view)(updatedTr);
+      updatedTr = rescaleColumns(tablePreserveWidth)(table, view)(updatedTr);
     }
     return updatedTr;
   };

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -23,7 +23,10 @@ import {
 } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 import {
   backgroundPaletteTooltipMessages,
   cellBackgroundColorPalette,
@@ -99,6 +102,7 @@ export interface Props {
   offset?: Array<number>;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
   getEditorContainerWidth: GetEditorContainerWidth;
+  getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 
 export interface State {
@@ -464,11 +468,14 @@ export class ContextualMenu extends Component<
       (!isDragAndDropEnabled ||
         !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))
     ) {
+      const { tablePreserveWidth = false } =
+        this.props.getEditorFeatureFlags?.() || {};
       const newResizeState = getNewResizeStateFromSelectedColumns(
         selectionRect,
         editorView.state,
         editorView.domAtPos.bind(editorView),
         getEditorContainerWidth,
+        tablePreserveWidth,
       );
 
       const wouldChange = newResizeState?.changed ?? false;
@@ -583,10 +590,12 @@ 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 } = getPluginState(state);
+    const { tablePreserveWidth = false } = getEditorFeatureFlags?.() || {};
 
     switch (item.value.name) {
       case 'sort_column_desc':
@@ -626,6 +635,7 @@ export class ContextualMenu extends Component<
             state,
             editorView.domAtPos.bind(editorView),
             getEditorContainerWidth,
+            tablePreserveWidth,
           );
 
         if (newResizeStateWithAnalytics) {
@@ -644,10 +654,15 @@ export class ContextualMenu extends Component<
         this.toggleOpen();
         break;
       case 'insert_column':
-        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(
-          INPUT_METHOD.CONTEXT_MENU,
-          selectionRect.right,
-        )(state, dispatch, editorView);
+        insertColumnWithAnalytics(
+          getEditorContainerWidth,
+          editorAnalyticsAPI,
+          tablePreserveWidth,
+        )(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(
+          state,
+          dispatch,
+          editorView,
+        );
         this.toggleOpen();
         break;
       case 'insert_row':

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

@@ -101,6 +101,7 @@ type DragMenuProps = {
   mountPoint?: HTMLElement;
   boundariesElement?: HTMLElement;
   scrollableElement?: HTMLElement;
+  tablePreserveWidth?: boolean;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -279,6 +280,7 @@ export const DragMenu = React.memo(
     mountPoint,
     scrollableElement,
     boundariesElement,
+    tablePreserveWidth,
   }: DragMenuProps & WrappedComponentProps) => {
     const { state, dispatch } = editorView;
     const { selection } = state;
@@ -311,6 +313,7 @@ export const DragMenu = React.memo(
       selectionRect,
       editorAnalyticsAPI,
       pluginConfig?.isHeaderRowRequired,
+      tablePreserveWidth,
     );
 
     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';
@@ -32,6 +35,7 @@ export interface Props {
   editorAnalyticsAPI?: EditorAnalyticsAPI;
   stickyHeaders?: RowStickyState;
   pluginConfig?: PluginConfig;
+  getEditorFeatureFlags: GetEditorFeatureFlags;
 }
 
 const FloatingDragMenu = ({
@@ -48,6 +52,7 @@ const FloatingDragMenu = ({
   editorAnalyticsAPI,
   stickyHeaders,
   pluginConfig,
+  getEditorFeatureFlags,
 }: Props) => {
   if (
     !isOpen ||
@@ -72,6 +77,8 @@ const FloatingDragMenu = ({
     return null;
   }
 
+  const { tablePreserveWidth = false } = getEditorFeatureFlags();
+
   return (
     <Popup
       alignX={direction === 'row' ? 'right' : undefined}
@@ -110,6 +117,7 @@ const FloatingDragMenu = ({
         mountPoint={mountPoint}
         boundariesElement={boundariesElement}
         scrollableElement={scrollableElement}
+        tablePreserveWidth={tablePreserveWidth}
       />
     </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';
@@ -52,6 +55,7 @@ export interface Props {
   hasStickyHeaders?: boolean;
   dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
+  getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 
 export class FloatingInsertButton extends React.Component<
@@ -284,11 +288,19 @@ export class FloatingInsertButton extends React.Component<
     if (typeof insertColumnButtonIndex !== 'undefined') {
       event.preventDefault();
 
+      const { tablePreserveWidth = false } =
+        this.props.getEditorFeatureFlags?.() || {};
+
       const { state, dispatch } = editorView;
-      insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(
-        INPUT_METHOD.BUTTON,
-        insertColumnButtonIndex,
-      )(state, dispatch, editorView);
+      insertColumnWithAnalytics(
+        getEditorContainerWidth,
+        editorAnalyticsAPI,
+        tablePreserveWidth,
+      )(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(
+        state,
+        dispatch,
+        editorView,
+      );
     }
   }
 }

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -159,7 +159,10 @@ export const ColumnControls = ({
   }, [editorView, tableActive]);
 
   const toggleDragMenuHandler = useCallback(
-    (trigger: TriggerType, event) => {
+    (
+      trigger: TriggerType,
+      event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | undefined,
+    ) => {
       const { state, dispatch } = editorView;
       if (event?.shiftKey) {
         return;

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -114,7 +114,10 @@ const DragControlsComponent = ({
   }, [editorView]);
 
   const toggleDragMenuHandler = useCallback(
-    (trigger: TriggerType, event) => {
+    (
+      trigger: TriggerType,
+      event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent> | undefined,
+    ) => {
       if (event?.shiftKey) {
         return;
       }

package/src/utils/create.ts

@@ -14,9 +14,7 @@ export const createTableWithWidth =
     },
   ) =>
   (schema: Schema) => {
-    const { tablePreserveWidth = false } = getEditorFeatureFlags
-      ? getEditorFeatureFlags()
-      : {};
+    const { tablePreserveWidth = false } = getEditorFeatureFlags?.() || {};
 
     if (tablePreserveWidth && isFullWidthModeEnabled) {
       return createTable({

package/src/utils/drag-menu.ts

@@ -159,6 +159,7 @@ export const getDragMenuConfig = (
   selectionRect?: Rect,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   isHeaderRowRequired?: boolean,
+  tablePreserveWidth = false,
 ): DragMenuConfig[] => {
   const addOptions =
     direction === 'row'
@@ -296,6 +297,7 @@ export const getDragMenuConfig = (
           insertColumnWithAnalytics(
             getEditorContainerWidth,
             editorAnalyticsAPI,
+            tablePreserveWidth,
           )(INPUT_METHOD.TABLE_CONTEXT_MENU, (index ?? 0) + offset)(
             state,
             dispatch,
@@ -319,6 +321,7 @@ export const getDragMenuConfig = (
                 state,
                 editorView.domAtPos.bind(editorView),
                 getEditorContainerWidth,
+                tablePreserveWidth,
               );
 
               if (newResizeState) {
@@ -359,7 +362,7 @@ export const getDragMenuConfig = (
             !!isHeaderRowRequired,
           )(state, dispatch);
         } else {
-          deleteColumnsWithAnalytics(editorAnalyticsAPI)(
+          deleteColumnsWithAnalytics(editorAnalyticsAPI, tablePreserveWidth)(
             INPUT_METHOD.TABLE_CONTEXT_MENU,
             selectionRect ?? defaultSelectionRect,
           )(state, dispatch, editorView);

package/tsconfig.dev.json

@@ -40,7 +40,7 @@
       "path": "../../../build/website/docs/tsconfig.app.json"
     },
     {
-      "path": "../editor-core/tsconfig.app.json"
+      "path": "../editor-common/tsconfig.app.json"
     },
     {
       "path": "../../design-system/tokens/tsconfig.app.json"