@atlaskit/editor-plugin-table 4.1.0 → 4.1.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 4.1.1
+
+### Patch Changes
+
+- [#41220](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41220) [`9e66f4b0610`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9e66f4b0610) - Add a new feature flag (platform.editor.table.update-table-resizer-styles) that uses display: flex; to center resizable tables in full page editor. This replaces the current method which uses margin to calculate an offset
+- Updated dependencies
+
 ## 4.1.0
 
 ### Minor Changes

package/dist/cjs/plugins/table/nodeviews/TableContainer.js

@@ -44,7 +44,7 @@ var InnerContainer = exports.InnerContainer = /*#__PURE__*/(0, _react.forwardRef
     "data-test-id": "table-container"
   }, children);
 });
-var ResizableTableContainer = exports.ResizableTableContainer = function ResizableTableContainer(_ref2) {
+var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_react.default.memo(function (_ref2) {
   var children = _ref2.children,
     className = _ref2.className,
     node = _ref2.node,
@@ -94,7 +94,6 @@ var ResizableTableContainer = exports.ResizableTableContainer = function Resizab
     if (!containerRef.current) {
       return;
     }
-    var marginLeft = getMarginLeft(lineLength, width);
 
     // make sure during resizing
     // the pm-table-resizer-container width is the same as its child div resizer-item
@@ -103,10 +102,13 @@ var ResizableTableContainer = exports.ResizableTableContainer = function Resizab
     if (containerRef.current.style.width !== "".concat(width, "px")) {
       containerRef.current.style.width = "".concat(width, "px");
     }
-    if (marginLeftRef.current !== marginLeft) {
-      marginLeftRef.current = marginLeft;
-      if (Number.isFinite(marginLeft)) {
-        containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.update-table-resizer-styles')) {
+      var marginLeft = getMarginLeft(lineLength, width);
+      if (marginLeftRef.current !== marginLeft) {
+        marginLeftRef.current = marginLeft;
+        if (Number.isFinite(marginLeft)) {
+          containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+        }
       }
     }
   }, [lineLength]);
@@ -130,7 +132,9 @@ var ResizableTableContainer = exports.ResizableTableContainer = function Resizab
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
-    marginLeftRef.current = getMarginLeft(lineLength, width);
+    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.update-table-resizer-styles')) {
+      marginLeftRef.current = getMarginLeft(lineLength, width);
+    }
   }
   var maxResizerWidth = Math.min(responsiveContainerWidth, _utils.TABLE_MAX_WIDTH);
   var tableResizerProps = {
@@ -152,7 +156,21 @@ var ResizableTableContainer = exports.ResizableTableContainer = function Resizab
       onResizeStop: onResizeStop
     });
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.update-table-resizer-styles') ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: tableWidthRef.current
+    },
+    className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, tableResizerProps, /*#__PURE__*/_react.default.createElement(InnerContainer, {
+    className: className,
+    node: node
+  }, children)))) : /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginLeft: marginLeftRef.current,
       width: tableWidthRef.current
@@ -163,7 +181,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = function Resizab
     className: className,
     node: node
   }, children)));
-};
+});
 var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
   var children = _ref3.children,
     node = _ref3.node,

package/dist/es2019/plugins/table/nodeviews/TableContainer.js

@@ -32,7 +32,7 @@ export const InnerContainer = /*#__PURE__*/forwardRef(({
     "data-test-id": "table-container"
   }, children);
 });
-export const ResizableTableContainer = ({
+export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   children,
   className,
   node,
@@ -83,7 +83,6 @@ export const ResizableTableContainer = ({
     if (!containerRef.current) {
       return;
     }
-    const marginLeft = getMarginLeft(lineLength, width);
 
     // make sure during resizing
     // the pm-table-resizer-container width is the same as its child div resizer-item
@@ -92,10 +91,13 @@ export const ResizableTableContainer = ({
     if (containerRef.current.style.width !== `${width}px`) {
       containerRef.current.style.width = `${width}px`;
     }
-    if (marginLeftRef.current !== marginLeft) {
-      marginLeftRef.current = marginLeft;
-      if (Number.isFinite(marginLeft)) {
-        containerRef.current.style.marginLeft = `${marginLeft}px`;
+    if (!getBooleanFF('platform.editor.table.update-table-resizer-styles')) {
+      const marginLeft = getMarginLeft(lineLength, width);
+      if (marginLeftRef.current !== marginLeft) {
+        marginLeftRef.current = marginLeft;
+        if (Number.isFinite(marginLeft)) {
+          containerRef.current.style.marginLeft = `${marginLeft}px`;
+        }
       }
     }
   }, [lineLength]);
@@ -119,7 +121,9 @@ export const ResizableTableContainer = ({
   const width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
-    marginLeftRef.current = getMarginLeft(lineLength, width);
+    if (!getBooleanFF('platform.editor.table.update-table-resizer-styles')) {
+      marginLeftRef.current = getMarginLeft(lineLength, width);
+    }
   }
   const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   let tableResizerProps = {
@@ -142,7 +146,21 @@ export const ResizableTableContainer = ({
       onResizeStop: onResizeStop
     };
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return getBooleanFF('platform.editor.table.update-table-resizer-styles') ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: tableWidthRef.current
+    },
+    className: ClassName.TABLE_RESIZER_CONTAINER,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
+    className: className,
+    node: node
+  }, children)))) : /*#__PURE__*/React.createElement("div", {
     style: {
       marginLeft: marginLeftRef.current,
       width: tableWidthRef.current
@@ -153,7 +171,7 @@ export const ResizableTableContainer = ({
     className: className,
     node: node
   }, children)));
-};
+});
 export const TableContainer = ({
   children,
   node,

package/dist/esm/plugins/table/nodeviews/TableContainer.js

@@ -34,7 +34,7 @@ export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-test-id": "table-container"
   }, children);
 });
-export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
+export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
   var children = _ref2.children,
     className = _ref2.className,
     node = _ref2.node,
@@ -84,7 +84,6 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     if (!containerRef.current) {
       return;
     }
-    var marginLeft = getMarginLeft(lineLength, width);
 
     // make sure during resizing
     // the pm-table-resizer-container width is the same as its child div resizer-item
@@ -93,10 +92,13 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     if (containerRef.current.style.width !== "".concat(width, "px")) {
       containerRef.current.style.width = "".concat(width, "px");
     }
-    if (marginLeftRef.current !== marginLeft) {
-      marginLeftRef.current = marginLeft;
-      if (Number.isFinite(marginLeft)) {
-        containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+    if (!getBooleanFF('platform.editor.table.update-table-resizer-styles')) {
+      var marginLeft = getMarginLeft(lineLength, width);
+      if (marginLeftRef.current !== marginLeft) {
+        marginLeftRef.current = marginLeft;
+        if (Number.isFinite(marginLeft)) {
+          containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+        }
       }
     }
   }, [lineLength]);
@@ -120,7 +122,9 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
-    marginLeftRef.current = getMarginLeft(lineLength, width);
+    if (!getBooleanFF('platform.editor.table.update-table-resizer-styles')) {
+      marginLeftRef.current = getMarginLeft(lineLength, width);
+    }
   }
   var maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   var tableResizerProps = {
@@ -142,7 +146,21 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
       onResizeStop: onResizeStop
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return getBooleanFF('platform.editor.table.update-table-resizer-styles') ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: tableWidthRef.current
+    },
+    className: ClassName.TABLE_RESIZER_CONTAINER,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
+    className: className,
+    node: node
+  }, children)))) : /*#__PURE__*/React.createElement("div", {
     style: {
       marginLeft: marginLeftRef.current,
       width: tableWidthRef.current
@@ -153,7 +171,7 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     className: className,
     node: node
   }, children)));
-};
+});
 export var TableContainer = function TableContainer(_ref3) {
   var children = _ref3.children,
     node = _ref3.node,

package/dist/types/plugins/table/nodeviews/TableContainer.d.ts

@@ -8,7 +8,7 @@ type InnerContainerProps = {
     className: string;
     style?: {
         width: number | 'inherit';
-        marginLeft: number | undefined;
+        marginLeft?: number;
     };
     node: PMNode;
 };
@@ -17,7 +17,7 @@ export declare const InnerContainer: React.ForwardRefExoticComponent<InnerContai
 } & React.RefAttributes<HTMLDivElement>>;
 type ResizableTableContainerProps = {
     containerWidth: number;
-    lineLength: number;
+    lineLength?: number;
     node: PMNode;
     className: string;
     editorView: EditorView;
@@ -26,7 +26,7 @@ type ResizableTableContainerProps = {
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;

package/dist/types-ts4.5/plugins/table/nodeviews/TableContainer.d.ts

@@ -8,7 +8,7 @@ type InnerContainerProps = {
     className: string;
     style?: {
         width: number | 'inherit';
-        marginLeft: number | undefined;
+        marginLeft?: number;
     };
     node: PMNode;
 };
@@ -17,7 +17,7 @@ export declare const InnerContainer: React.ForwardRefExoticComponent<InnerContai
 } & React.RefAttributes<HTMLDivElement>>;
 type ResizableTableContainerProps = {
     containerWidth: number;
-    lineLength: number;
+    lineLength?: number;
     node: PMNode;
     className: string;
     editorView: EditorView;
@@ -26,7 +26,7 @@ type ResizableTableContainerProps = {
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/custom-steps": "^0.0.2",
-    "@atlaskit/editor-common": "^76.5.0",
+    "@atlaskit/editor-common": "^76.6.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -123,6 +123,9 @@
     },
     "platform.editor.table.increase-shadow-visibility_lh89r": {
       "type": "boolean"
+    },
+    "platform.editor.table.update-table-resizer-styles": {
+      "type": "boolean"
     }
   }
 }

package/src/plugins/table/nodeviews/TableContainer.tsx

@@ -23,7 +23,10 @@ import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
 import type { TableResizerImprovementProps } from './TableResizer';
 
-const getMarginLeft = (lineLength: number, tableWidth: number | 'inherit') => {
+const getMarginLeft = (
+  lineLength: number | undefined,
+  tableWidth: number | 'inherit',
+) => {
   let marginLeft;
   if (tableWidth !== 'inherit' && lineLength) {
     const containerWidth = tableWidth;
@@ -40,7 +43,7 @@ type InnerContainerProps = {
   className: string;
   style?: {
     width: number | 'inherit';
-    marginLeft: number | undefined;
+    marginLeft?: number;
   };
   node: PMNode;
 };
@@ -65,7 +68,7 @@ export const InnerContainer = forwardRef<
 
 type ResizableTableContainerProps = {
   containerWidth: number;
-  lineLength: number;
+  lineLength?: number;
   node: PMNode;
   className: string;
   editorView: EditorView;
@@ -75,178 +78,205 @@ type ResizableTableContainerProps = {
   pluginInjectionApi?: PluginInjectionAPI;
 };
 
-export const ResizableTableContainer = ({
-  children,
-  className,
-  node,
-  lineLength,
-  containerWidth,
-  editorView,
-  getPos,
-  tableRef,
-  isResizing,
-  pluginInjectionApi,
-}: PropsWithChildren<ResizableTableContainerProps>) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const marginLeftRef = useRef<number | undefined>(0);
-  const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
-
-  const updateContainerHeight = useCallback((height: number | 'auto') => {
-    // current StickyHeader State is not stable to be fetch.
-    // we need to update stickyHeader plugin to make sure state can be
-    //    consistently fetch and refactor below
-    const stickyHeaders =
-      containerRef.current?.getElementsByClassName('pm-table-sticky');
-    if (!stickyHeaders || stickyHeaders.length < 1) {
-      // when starting to drag, we need to keep the original space,
-      // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
-      //    1px is border width but collapse make it 0.5.
-      // -- When sticky header appear, we should add first row height but reduce
-      //    collapsed border
-      containerRef.current?.style.setProperty(
-        'height',
-        typeof height === 'number' ? `${height + 40.5}px` : 'auto',
-      );
-    } else {
-      const stickyHeaderHeight =
-        containerRef.current
-          ?.getElementsByTagName('th')[0]
-          .getBoundingClientRect().height || 0;
-      containerRef.current?.style.setProperty(
-        'height',
-        typeof height === 'number'
-          ? `${height + stickyHeaderHeight + 39.5}px`
-          : 'auto',
-      );
-    }
-  }, []);
-
-  const resizeObserverRef = useRef(
-    new ResizeObserver((entries) => {
-      updateContainerHeight(entries[entries.length - 1].contentRect.height);
-    }),
-  );
-
-  const onResizeStart = useCallback(() => {
-    if (tableRef) {
-      resizeObserverRef.current.observe(tableRef);
-    }
-  }, [tableRef]);
-
-  const onResizeStop = useCallback(() => {
-    updateContainerHeight('auto');
-
-    resizeObserverRef.current.disconnect();
-  }, [updateContainerHeight]);
-
-  const updateWidth = useCallback(
-    (width: number) => {
-      if (!containerRef.current) {
-        return;
+export const ResizableTableContainer = React.memo(
+  ({
+    children,
+    className,
+    node,
+    lineLength,
+    containerWidth,
+    editorView,
+    getPos,
+    tableRef,
+    isResizing,
+    pluginInjectionApi,
+  }: PropsWithChildren<ResizableTableContainerProps>) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const marginLeftRef = useRef<number | undefined>(0);
+    const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
+
+    const updateContainerHeight = useCallback((height: number | 'auto') => {
+      // current StickyHeader State is not stable to be fetch.
+      // we need to update stickyHeader plugin to make sure state can be
+      //    consistently fetch and refactor below
+      const stickyHeaders =
+        containerRef.current?.getElementsByClassName('pm-table-sticky');
+      if (!stickyHeaders || stickyHeaders.length < 1) {
+        // when starting to drag, we need to keep the original space,
+        // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
+        //    1px is border width but collapse make it 0.5.
+        // -- When sticky header appear, we should add first row height but reduce
+        //    collapsed border
+        containerRef.current?.style.setProperty(
+          'height',
+          typeof height === 'number' ? `${height + 40.5}px` : 'auto',
+        );
+      } else {
+        const stickyHeaderHeight =
+          containerRef.current
+            ?.getElementsByTagName('th')[0]
+            .getBoundingClientRect().height || 0;
+        containerRef.current?.style.setProperty(
+          'height',
+          typeof height === 'number'
+            ? `${height + stickyHeaderHeight + 39.5}px`
+            : 'auto',
+        );
       }
+    }, []);
 
-      const marginLeft = getMarginLeft(lineLength, width);
+    const resizeObserverRef = useRef(
+      new ResizeObserver((entries) => {
+        updateContainerHeight(entries[entries.length - 1].contentRect.height);
+      }),
+    );
 
-      // make sure during resizing
-      // the pm-table-resizer-container width is the same as its child div resizer-item
-      // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
-      // and cause the fabric-editor-popup-scroll-parent to overflow
-      if (containerRef.current.style.width !== `${width}px`) {
-        containerRef.current.style.width = `${width}px`;
+    const onResizeStart = useCallback(() => {
+      if (tableRef) {
+        resizeObserverRef.current.observe(tableRef);
       }
+    }, [tableRef]);
+
+    const onResizeStop = useCallback(() => {
+      updateContainerHeight('auto');
 
-      if (marginLeftRef.current !== marginLeft) {
-        marginLeftRef.current = marginLeft;
+      resizeObserverRef.current.disconnect();
+    }, [updateContainerHeight]);
 
-        if (Number.isFinite(marginLeft)) {
-          containerRef.current.style.marginLeft = `${marginLeft}px`;
+    const updateWidth = useCallback(
+      (width: number) => {
+        if (!containerRef.current) {
+          return;
         }
-      }
-    },
-    [lineLength],
-  );
 
-  const displayGuideline = useCallback(
-    (guidelines: GuidelineConfig[]) => {
-      return (
-        pluginInjectionApi?.guideline?.actions?.displayGuideline(editorView)({
-          guidelines,
-        }) ?? false
-      );
-    },
-    [pluginInjectionApi, editorView],
-  );
+        // make sure during resizing
+        // the pm-table-resizer-container width is the same as its child div resizer-item
+        // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
+        // and cause the fabric-editor-popup-scroll-parent to overflow
+        if (containerRef.current.style.width !== `${width}px`) {
+          containerRef.current.style.width = `${width}px`;
+        }
 
-  const attachAnalyticsEvent = useCallback(
-    (payload: TableEventPayload) => {
-      return pluginInjectionApi?.analytics?.actions.attachAnalyticsEvent(
-        payload,
-      );
-    },
-    [pluginInjectionApi],
-  );
+        if (
+          !getBooleanFF('platform.editor.table.update-table-resizer-styles')
+        ) {
+          const marginLeft = getMarginLeft(lineLength, width);
+          if (marginLeftRef.current !== marginLeft) {
+            marginLeftRef.current = marginLeft;
+            if (Number.isFinite(marginLeft)) {
+              containerRef.current.style.marginLeft = `${marginLeft}px`;
+            }
+          }
+        }
+      },
+      [lineLength],
+    );
 
-  const displayGapCursor = useCallback(
-    (toggle) => {
-      return (
-        pluginInjectionApi?.core?.actions.execute(
-          pluginInjectionApi?.selection?.commands.displayGapCursor(toggle),
-        ) ?? false
-      );
-    },
-    [pluginInjectionApi],
-  );
+    const displayGuideline = useCallback(
+      (guidelines: GuidelineConfig[]) => {
+        return (
+          pluginInjectionApi?.guideline?.actions?.displayGuideline(editorView)({
+            guidelines,
+          }) ?? false
+        );
+      },
+      [pluginInjectionApi, editorView],
+    );
 
-  const tableWidth = getTableContainerWidth(node);
-  // 76 is currently an accepted padding value considering the spacing for resizer handle
-  const responsiveContainerWidth = containerWidth - 76;
-  const width = Math.min(tableWidth, responsiveContainerWidth);
+    const attachAnalyticsEvent = useCallback(
+      (payload: TableEventPayload) => {
+        return pluginInjectionApi?.analytics?.actions.attachAnalyticsEvent(
+          payload,
+        );
+      },
+      [pluginInjectionApi],
+    );
 
-  if (!isResizing) {
-    tableWidthRef.current = width;
-    marginLeftRef.current = getMarginLeft(lineLength, width);
-  }
-  const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+    const displayGapCursor = useCallback(
+      (toggle) => {
+        return (
+          pluginInjectionApi?.core?.actions.execute(
+            pluginInjectionApi?.selection?.commands.displayGapCursor(toggle),
+          ) ?? false
+        );
+      },
+      [pluginInjectionApi],
+    );
 
-  let tableResizerProps: TableResizerImprovementProps = {
-    width,
-    maxWidth: maxResizerWidth,
-    containerWidth,
-    updateWidth,
-    editorView,
-    getPos,
-    node,
-    tableRef,
-    displayGuideline,
-    attachAnalyticsEvent,
-    displayGapCursor,
-  };
+    const tableWidth = getTableContainerWidth(node);
+    // 76 is currently an accepted padding value considering the spacing for resizer handle
+    const responsiveContainerWidth = containerWidth - 76;
+    const width = Math.min(tableWidth, responsiveContainerWidth);
 
-  if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
-    tableResizerProps = {
-      ...tableResizerProps,
-      onResizeStart: onResizeStart,
-      onResizeStop: onResizeStop,
+    if (!isResizing) {
+      tableWidthRef.current = width;
+      if (!getBooleanFF('platform.editor.table.update-table-resizer-styles')) {
+        marginLeftRef.current = getMarginLeft(lineLength, width);
+      }
+    }
+    const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+
+    let tableResizerProps: TableResizerImprovementProps = {
+      width,
+      maxWidth: maxResizerWidth,
+      containerWidth,
+      updateWidth,
+      editorView,
+      getPos,
+      node,
+      tableRef,
+      displayGuideline,
+      attachAnalyticsEvent,
+      displayGapCursor,
     };
-  }
 
-  return (
-    <div
-      style={{
-        marginLeft: marginLeftRef.current,
-        width: tableWidthRef.current,
-      }}
-      className={ClassName.TABLE_RESIZER_CONTAINER}
-      ref={containerRef}
-    >
-      <TableResizer {...tableResizerProps}>
-        <InnerContainer className={className} node={node}>
-          {children}
-        </InnerContainer>
-      </TableResizer>
-    </div>
-  );
-};
+    if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
+      tableResizerProps = {
+        ...tableResizerProps,
+        onResizeStart: onResizeStart,
+        onResizeStop: onResizeStop,
+      };
+    }
+
+    return getBooleanFF('platform.editor.table.update-table-resizer-styles') ? (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            width: tableWidthRef.current,
+          }}
+          className={ClassName.TABLE_RESIZER_CONTAINER}
+          ref={containerRef}
+        >
+          <TableResizer {...tableResizerProps}>
+            <InnerContainer className={className} node={node}>
+              {children}
+            </InnerContainer>
+          </TableResizer>
+        </div>
+      </div>
+    ) : (
+      <div
+        style={{
+          marginLeft: marginLeftRef.current,
+          width: tableWidthRef.current,
+        }}
+        className={ClassName.TABLE_RESIZER_CONTAINER}
+        ref={containerRef}
+      >
+        <TableResizer {...tableResizerProps}>
+          <InnerContainer className={className} node={node}>
+            {children}
+          </InnerContainer>
+        </TableResizer>
+      </div>
+    );
+  },
+);
 
 type TableContainerProps = {
   node: PMNode;