@atlaskit/editor-plugin-table 7.11.2 → 7.11.4

package/src/nodeviews/TableComponent.tsx

@@ -223,7 +223,18 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       }
     }
 
-    if (isTableScalingEnabled) {
+    if (
+      isTableScalingEnabled &&
+      !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+    ) {
+      this.handleColgroupUpdates(true);
+    }
+
+    if (
+      isTableScalingEnabled &&
+      getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+      getNode().attrs.displayMode !== 'fixed'
+    ) {
       this.handleColgroupUpdates(true);
     }
 
@@ -382,12 +393,17 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       const wasTableResized = hasTableBeenResized(this.node);
       const isTableResized = hasTableBeenResized(tableNode);
       const isColumnsDistributed = wasTableResized && !isTableResized;
-      const shouldScale =
+      const isTableDisplayModeChanged =
+        this.node.attrs.displayMode !== tableNode.attrs.displayMode;
+
+      const shouldUpdateColgroup =
         isWidthChanged ||
         isColumnsDistributed ||
         isTableResizedFullWidth ||
-        isTableWidthChanged;
-      if (force || (!isResizing && shouldScale)) {
+        isTableWidthChanged ||
+        isTableDisplayModeChanged;
+
+      if (force || (!isResizing && shouldUpdateColgroup)) {
         const resizeState = getResizeState({
           minWidth: COLUMN_MIN_WIDTH,
           maxSize: tableRenderWidth,
@@ -398,9 +414,34 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           isTableScalingEnabled: true,
         });
 
+        let shouldScaleOnColgroupUpdate = false;
+        if (
+          this.props.options?.isTableScalingEnabled &&
+          !getBooleanFF(
+            'platform.editor.table.preserve-widths-with-lock-button',
+          )
+        ) {
+          shouldScaleOnColgroupUpdate = true;
+        }
+
+        if (
+          this.props.options?.isTableScalingEnabled &&
+          getBooleanFF(
+            'platform.editor.table.preserve-widths-with-lock-button',
+          ) &&
+          tableNode.attrs.displayMode !== 'fixed'
+        ) {
+          shouldScaleOnColgroupUpdate = true;
+        }
+
         // Request animation frame required for Firefox
         requestAnimationFrame(() => {
-          updateColgroup(resizeState, this.table!, tableNode, true);
+          updateColgroup(
+            resizeState,
+            this.table!,
+            tableNode,
+            shouldScaleOnColgroupUpdate,
+          );
         });
       }
     }
@@ -417,7 +458,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       allowColumnResizing,
       isResizing,
       options,
-      isTableScalingEnabled,
+      isTableScalingEnabled, // we could use options.isTableScalingEnabled here
       getPos,
     } = this.props;
     let { isInDanger } = this.props;
@@ -429,7 +470,35 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       isInDanger = pluginState.isInDanger;
     }
 
-    if (isTableScalingEnabled) {
+    let shouldScale = false;
+    let shouldHandleColgroupUpdates = false;
+
+    if (
+      isTableScalingEnabled &&
+      !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+    ) {
+      shouldScale = true;
+      shouldHandleColgroupUpdates = true;
+    }
+
+    if (
+      isTableScalingEnabled &&
+      getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+      getNode().attrs.displayMode !== 'fixed'
+    ) {
+      shouldScale = true;
+      shouldHandleColgroupUpdates = true;
+    }
+
+    if (
+      isTableScalingEnabled &&
+      getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+      getNode().attrs.displayMode !== this.node.attrs.displayMode
+    ) {
+      shouldHandleColgroupUpdates = true;
+    }
+
+    if (shouldHandleColgroupUpdates) {
       this.handleColgroupUpdates();
     }
 
@@ -506,7 +575,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         if (shouldRecreateResizeCols) {
           const start = getPos() || 0;
           const depth = view.state.doc.resolve(start).depth;
-          const shouldScale = depth === 0 && isTableScalingEnabled;
+          shouldScale = depth === 0 && shouldScale;
+
           insertColgroupFromNode(this.table, currentTable, shouldScale);
         }
 
@@ -610,7 +680,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       pluginInjectionApi,
       isDragAndDropEnabled,
       getEditorFeatureFlags,
-      isTableScalingEnabled,
+      isTableScalingEnabled, // here we can use options.isTableScalingEnabled
     } = this.props;
 
     let {

package/src/nodeviews/table.tsx

@@ -136,16 +136,37 @@ export default class TableView extends ReactNodeView<Props> {
 
     if (rendered.dom) {
       this.table = rendered.dom;
-      // Preserve Table Width cannot have inline width set on the table
-      if (!this.options?.isTableScalingEnabled) {
-        const tableInlineWidth = getInlineWidth(
-          this.node,
-          this.reactComponentProps.options,
-          this.reactComponentProps.view.state,
-          this.reactComponentProps.getPos(),
-        );
-        if (tableInlineWidth) {
-          handleInlineTableWidth(this.table, tableInlineWidth);
+
+      if (
+        !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+      ) {
+        if (!this.options?.isTableScalingEnabled) {
+          // Preserve Table Width cannot have inline width set on the table
+          const tableInlineWidth = getInlineWidth(
+            this.node,
+            this.reactComponentProps.options,
+            this.reactComponentProps.view.state,
+            this.reactComponentProps.getPos(),
+          );
+          if (tableInlineWidth) {
+            handleInlineTableWidth(this.table, tableInlineWidth);
+          }
+        }
+      } else {
+        if (
+          !this.options?.isTableScalingEnabled ||
+          this.node.attrs.displayMode === 'fixed'
+        ) {
+          // Preserve Table Width cannot have inline width set on the table
+          const tableInlineWidth = getInlineWidth(
+            this.node,
+            this.reactComponentProps.options,
+            this.reactComponentProps.view.state,
+            this.reactComponentProps.getPos(),
+          );
+          if (tableInlineWidth) {
+            handleInlineTableWidth(this.table, tableInlineWidth);
+          }
         }
       }
     }
@@ -157,26 +178,28 @@ export default class TableView extends ReactNodeView<Props> {
     if (!this.table) {
       return;
     }
-
     const attrs = tableAttributes(node);
     (Object.keys(attrs) as Array<keyof typeof attrs>).forEach((attr) => {
       this.table!.setAttribute(attr, attrs[attr]);
     });
 
-    // handle inline style when table been resized
-    const tableInlineWidth = getInlineWidth(
-      node,
-      (this.reactComponentProps as Props).options,
-      this.view.state,
-      this.getPos(),
-    );
+    // Preserve Table Width cannot have inline width set on the table
+    if (!this.options?.isTableScalingEnabled) {
+      // handle inline style when table been resized
+      const tableInlineWidth = getInlineWidth(
+        node,
+        (this.reactComponentProps as Props).options,
+        this.view.state,
+        this.getPos(),
+      );
 
-    const isTableResizing = tableWidthPluginKey.getState(
-      this.view.state,
-    )?.resizing;
+      const isTableResizing = tableWidthPluginKey.getState(
+        this.view.state,
+      )?.resizing;
 
-    if (!isTableResizing && tableInlineWidth) {
-      handleInlineTableWidth(this.table, tableInlineWidth);
+      if (!isTableResizing && tableInlineWidth) {
+        handleInlineTableWidth(this.table, tableInlineWidth);
+      }
     }
   }
 
@@ -275,7 +298,7 @@ export default class TableView extends ReactNodeView<Props> {
               isHeaderRowEnabled={pluginState!.isHeaderRowEnabled}
               isHeaderColumnEnabled={pluginState!.isHeaderColumnEnabled}
               isDragAndDropEnabled={pluginState!.isDragAndDropEnabled}
-              isTableScalingEnabled={pluginState!.isTableScalingEnabled}
+              isTableScalingEnabled={props.options?.isTableScalingEnabled} // this.options?.isTableScalingEnabled sams as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
               tableActive={tableActive}
               ordering={pluginState!.ordering as TableColumnOrdering}
               isResizing={isResizing}
@@ -381,7 +404,7 @@ export const createTableView = (
     wasFullWidthModeEnabled,
     isTableResizingEnabled,
     isDragAndDropEnabled,
-    isTableScalingEnabled,
+    isTableScalingEnabled, // same as options.isTableScalingEnabled
   } = getPluginState(view.state);
   const { allowColumnResizing, allowControls } = getPluginConfig(pluginConfig);
   const hasIntlContext = true;
@@ -399,7 +422,7 @@ export const createTableView = (
       wasFullWidthModeEnabled,
       isTableResizingEnabled,
       isDragAndDropEnabled,
-      isTableScalingEnabled,
+      isTableScalingEnabled, // same as options.isTableScalingEnabled
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,

package/src/plugin.tsx

@@ -287,8 +287,12 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         {
           name: 'tablePMColResizing',
           plugin: ({ dispatch }) => {
-            const { fullWidthEnabled, tableOptions, getEditorFeatureFlags } =
-              options || ({} as TablePluginOptions);
+            const {
+              fullWidthEnabled,
+              tableOptions,
+              getEditorFeatureFlags,
+              isTableScalingEnabled,
+            } = options || ({} as TablePluginOptions);
             const { allowColumnResizing } = pluginConfig(tableOptions);
             return allowColumnResizing
               ? createFlexiResizingPlugin(
@@ -299,6 +303,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                   defaultGetEditorContainerWidth,
                   getEditorFeatureFlags || defaultGetEditorFeatureFlags,
                   editorAnalyticsAPI,
+                  isTableScalingEnabled || false,
                 )
               : undefined;
           },
@@ -394,6 +399,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                   dispatch,
                   dispatchAnalyticsEvent,
                   options?.fullWidthEnabled ?? false,
+                  options?.isTableScalingEnabled ?? false,
                 )
               : undefined,
         },
@@ -569,6 +575,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       editorAnalyticsAPI={editorAnalyticsAPI}
                       stickyHeaders={stickyHeader}
                       pluginConfig={pluginConfig}
+                      isTableScalingEnabled={options?.isTableScalingEnabled}
                     />
                   )}
                   {allowControls && !isDragAndDropEnabled && !isResizing && (
@@ -607,11 +614,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
           action(insert, state) {
             // see comment on tablesPlugin.getSharedState on usage
             const tableState = api?.table?.sharedState.currentState();
-            const { isTableScalingEnabled = false } = getPluginState(state);
 
             const tr = insert(
               createTableWithWidth(
-                isTableScalingEnabled,
+                options?.isTableScalingEnabled,
                 tableState?.isFullWidthModeEnabled,
               )(state.schema),
             );

package/src/pm-plugins/drag-and-drop/plugin.ts

@@ -9,6 +9,7 @@ import {
   getCellsInRow,
   getSelectedCellInfo,
 } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -235,10 +236,22 @@ const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
               const { isTableScalingEnabled = false } = getTablePluginState(
                 editorView.state,
               );
+
+              let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+              if (
+                isTableScalingEnabled &&
+                getBooleanFF(
+                  'platform.editor.table.preserve-widths-with-lock-button',
+                )
+              ) {
+                isTableScalingEnabledOnCurrentTable =
+                  tableNode.attrs.displayMode !== 'fixed';
+              }
+
               insertColgroupFromNode(
                 tableRef,
                 tableNode,
-                isTableScalingEnabled,
+                isTableScalingEnabledOnCurrentTable,
               );
             }
           }

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

@@ -41,12 +41,12 @@ export const handleMouseDown = (
   localResizeHandlePos: number,
   getEditorContainerWidth: GetEditorContainerWidth,
   getEditorFeatureFlags: GetEditorFeatureFlags,
+  isTableScalingEnabled: boolean,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
 ): boolean => {
   const { state, dispatch } = view;
   const editorDisabled = !view.editable;
   const domAtPos = view.domAtPos.bind(view);
-  const { isTableScalingEnabled = false } = getTablePluginState(state);
 
   if (
     editorDisabled ||
@@ -85,7 +85,14 @@ export const handleMouseDown = (
     getEditorContainerWidth,
   });
 
-  const shouldScale = tableDepth === 0 && isTableScalingEnabled;
+  let shouldScale = tableDepth === 0 && isTableScalingEnabled;
+  if (
+    isTableScalingEnabled &&
+    getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+  ) {
+    shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
+  }
+
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize,
@@ -181,7 +188,15 @@ export const handleMouseDown = (
           selectedColumns.indexOf(colIndex) > -1 ||
           selectedColumns.indexOf(colIndex + 1) > -1;
 
-        const shouldScale = tableDepth === 0 && isTableScalingEnabled;
+        let shouldScale = tableDepth === 0 && isTableScalingEnabled;
+        if (
+          isTableScalingEnabled &&
+          getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+        ) {
+          shouldScale =
+            shouldScale && originalTable.attrs.displayMode !== 'fixed';
+        }
+
         const newResizeState = resizeColumn(
           resizeState,
           colIndex,
@@ -277,7 +292,14 @@ export const handleMouseDown = (
       $cell.nodeAfter!.attrs.colspan -
       1;
 
-    const shouldScale = tableDepth === 0 && isTableScalingEnabled;
+    let shouldScale = tableDepth === 0 && isTableScalingEnabled;
+    if (
+      isTableScalingEnabled &&
+      getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+    ) {
+      shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
+    }
+
     resizeColumn(
       resizeState,
       colIndex,

package/src/pm-plugins/table-resizing/plugin.ts

@@ -25,6 +25,7 @@ export function createPlugin(
   getEditorContainerWidth: GetEditorContainerWidth,
   getEditorFeatureFlags: GetEditorFeatureFlags,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
+  isTableScalingEnabled?: boolean,
 ) {
   return new SafePlugin({
     key: pluginKey,
@@ -79,6 +80,7 @@ export function createPlugin(
                 resizeHandlePos,
                 getEditorContainerWidth,
                 getEditorFeatureFlags,
+                isTableScalingEnabled || false,
                 editorAnalyticsAPI,
               )
             ) {

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

@@ -384,14 +384,25 @@ export const getNewResizeStateFromSelectedColumns = (
     getEditorContainerWidth,
   });
 
-  const resizeState = getResizeState({
+  let resizeState;
+
+  let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+  if (
+    isTableScalingEnabled &&
+    getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+  ) {
+    isTableScalingEnabledOnCurrentTable =
+      table.node.attrs.displayMode !== 'fixed';
+  }
+
+  resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize,
     table: table.node,
     tableRef,
     start: table.start,
     domAtPos,
-    isTableScalingEnabled,
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
   });
 
   const newResizeState = evenSelectedColumnsWidths(resizeState, rect);

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

@@ -4,6 +4,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DomAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { updateColumnWidths } from '../../../transforms';
 import { getTableWidth } from '../../../utils';
@@ -38,7 +39,7 @@ export const scale = (
   tableRef: HTMLTableElement,
   options: ScaleOptions,
   domAtPos: DomAtPos,
-  isTableScalingEnabled = false,
+  isTableScalingEnabledOnCurrentTable = false,
 ): ResizeState | undefined => {
   const {
     node,
@@ -87,7 +88,7 @@ export const scale = (
     tableRef,
     start,
     domAtPos,
-    isTableScalingEnabled,
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
   });
 
   return scaleTableTo(resizeState, newWidth);
@@ -99,7 +100,7 @@ export const scaleWithParent = (
   table: PMNode,
   start: number,
   domAtPos: DomAtPos,
-  isTableScalingEnabled = false,
+  isTableScalingEnabledOnCurrentTable = false,
 ) => {
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
@@ -108,7 +109,7 @@ export const scaleWithParent = (
     tableRef,
     start,
     domAtPos,
-    isTableScalingEnabled,
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
   });
 
   if (table.attrs.isNumberColumnEnabled) {
@@ -163,15 +164,23 @@ export const previewScaleTable = (
     tableRef.style.width = `${width}px`;
   }
 
+  let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+  if (
+    isTableScalingEnabled &&
+    getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+  ) {
+    isTableScalingEnabledOnCurrentTable =
+      isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
+  }
   // If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
   // If we are scaling the table down with isTableScalingEnabled, the colgroup widths may be scaled to a value that is not 48px.
-  if (!hasTableBeenResized(node) && !isTableScalingEnabled) {
+  if (!hasTableBeenResized(node) && !isTableScalingEnabledOnCurrentTable) {
     syncStickyRowToTable(tableRef);
     return;
   }
 
   const resizeState = parentWidth
-    ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false)
+    ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) // Here last value is isTableScalingEnabled = false
     : scale(tableRef, options, domAtPos, false);
 
   if (resizeState) {
@@ -185,7 +194,7 @@ export const scaleTable =
     tableRef: HTMLTableElement | null | undefined,
     options: ScaleOptions,
     domAtPos: DomAtPos,
-    isTableScalingEnabled = false,
+    isTableScalingEnabledOnCurrentTable = false,
   ) =>
   (tr: Transaction) => {
     if (!tableRef) {
@@ -197,7 +206,7 @@ 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.
-      if (!isTableScalingEnabled) {
+      if (!isTableScalingEnabledOnCurrentTable) {
         insertColgroupFromNode(tableRef, node);
       }
       tr.setMeta('scrollIntoView', false);
@@ -212,10 +221,15 @@ export const scaleTable =
         node,
         start,
         domAtPos,
-        isTableScalingEnabled,
+        isTableScalingEnabledOnCurrentTable,
       );
     } else {
-      resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabled);
+      resizeState = scale(
+        tableRef,
+        options,
+        domAtPos,
+        isTableScalingEnabledOnCurrentTable,
+      );
     }
 
     if (resizeState) {

package/src/pm-plugins/table-width.ts

@@ -23,7 +23,6 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
-import { getPluginState } from './plugin-factory';
 import { TABLE_MAX_WIDTH } from './table-resizing/utils';
 
 type __ReplaceStep = ReplaceStep & {
@@ -44,6 +43,7 @@ const createPlugin = (
   dispatch: Dispatch,
   dispatchAnalyticsEvent: DispatchAnalyticsEvent,
   fullWidthEnabled: boolean,
+  isTableScalingEnabled: boolean,
 ) => {
   return new SafePlugin({
     key: pluginKey,
@@ -122,8 +122,6 @@ const createPlugin = (
         tr.getMeta('referentialityTableInserted'),
       );
 
-      const { isTableScalingEnabled = false } = getPluginState(newState);
-
       const shouldPatchTable = fullWidthEnabled && isTableScalingEnabled;
 
       if (