@atlaskit/editor-plugin-table 5.6.1 → 5.6.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.6.2
+
+### Patch Changes
+
+- [#61138](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61138) [`d3a57afcd62b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d3a57afcd62b) - Cleaned references for feature flag: platform.editor.table.update-table-resizer-styles
+
 ## 5.6.1
 
 ### Patch Changes

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

@@ -48,7 +48,6 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
   var children = _ref2.children,
     className = _ref2.className,
     node = _ref2.node,
-    lineLength = _ref2.lineLength,
     containerWidth = _ref2.containerWidth,
     editorView = _ref2.editorView,
     getPos = _ref2.getPos,
@@ -56,7 +55,6 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     isResizing = _ref2.isResizing,
     pluginInjectionApi = _ref2.pluginInjectionApi;
   var containerRef = (0, _react.useRef)(null);
-  var marginLeftRef = (0, _react.useRef)(0);
   var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
   var updateContainerHeight = (0, _react.useCallback)(function (height) {
     var _containerRef$current;
@@ -102,16 +100,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     if (containerRef.current.style.width !== "".concat(width, "px")) {
       containerRef.current.style.width = "".concat(width, "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]);
+  }, []);
   var displayGuideline = (0, _react.useCallback)(function (guidelines) {
     var _pluginInjectionApi$g, _pluginInjectionApi$g2;
     return (_pluginInjectionApi$g = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g2 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g2 === void 0 || (_pluginInjectionApi$g2 = _pluginInjectionApi$g2.actions) === null || _pluginInjectionApi$g2 === void 0 ? void 0 : _pluginInjectionApi$g2.displayGuideline(editorView)({
@@ -132,9 +121,6 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = 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 = {
@@ -156,7 +142,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
       onResizeStop: onResizeStop
     });
   }
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.update-table-resizer-styles') ? /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'center'
@@ -170,17 +156,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
   }, /*#__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
-    },
-    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)));
+  }, children))));
 });
 var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
   var children = _ref3.children,
@@ -201,7 +177,6 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
       className: className,
       node: node,
-      lineLength: lineLength,
       containerWidth: editorWidth,
       editorView: editorView,
       getPos: getPos,

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

@@ -36,7 +36,6 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   children,
   className,
   node,
-  lineLength,
   containerWidth,
   editorView,
   getPos,
@@ -45,7 +44,6 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   pluginInjectionApi
 }) => {
   const containerRef = useRef(null);
-  const marginLeftRef = useRef(0);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const updateContainerHeight = useCallback(height => {
     var _containerRef$current;
@@ -91,16 +89,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     if (containerRef.current.style.width !== `${width}px`) {
       containerRef.current.style.width = `${width}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]);
+  }, []);
   const displayGuideline = useCallback(guidelines => {
     var _pluginInjectionApi$g, _pluginInjectionApi$g2, _pluginInjectionApi$g3;
     return (_pluginInjectionApi$g = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$g2 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g2 === void 0 ? void 0 : (_pluginInjectionApi$g3 = _pluginInjectionApi$g2.actions) === null || _pluginInjectionApi$g3 === void 0 ? void 0 : _pluginInjectionApi$g3.displayGuideline(editorView)({
@@ -121,9 +110,6 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const width = Math.min(tableWidth, responsiveContainerWidth);
   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 = {
@@ -146,7 +132,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
       onResizeStop: onResizeStop
     };
   }
-  return getBooleanFF('platform.editor.table.update-table-resizer-styles') ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'center'
@@ -160,17 +146,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   }, /*#__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
-    },
-    className: ClassName.TABLE_RESIZER_CONTAINER,
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
-    className: className,
-    node: node
-  }, children)));
+  }, children))));
 });
 export const TableContainer = ({
   children,
@@ -193,7 +169,6 @@ export const TableContainer = ({
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
       className: className,
       node: node,
-      lineLength: lineLength,
       containerWidth: editorWidth,
       editorView: editorView,
       getPos: getPos,

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

@@ -38,7 +38,6 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
   var children = _ref2.children,
     className = _ref2.className,
     node = _ref2.node,
-    lineLength = _ref2.lineLength,
     containerWidth = _ref2.containerWidth,
     editorView = _ref2.editorView,
     getPos = _ref2.getPos,
@@ -46,7 +45,6 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     isResizing = _ref2.isResizing,
     pluginInjectionApi = _ref2.pluginInjectionApi;
   var containerRef = useRef(null);
-  var marginLeftRef = useRef(0);
   var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   var updateContainerHeight = useCallback(function (height) {
     var _containerRef$current;
@@ -92,16 +90,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     if (containerRef.current.style.width !== "".concat(width, "px")) {
       containerRef.current.style.width = "".concat(width, "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]);
+  }, []);
   var displayGuideline = useCallback(function (guidelines) {
     var _pluginInjectionApi$g, _pluginInjectionApi$g2;
     return (_pluginInjectionApi$g = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g2 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g2 === void 0 || (_pluginInjectionApi$g2 = _pluginInjectionApi$g2.actions) === null || _pluginInjectionApi$g2 === void 0 ? void 0 : _pluginInjectionApi$g2.displayGuideline(editorView)({
@@ -122,9 +111,6 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = 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 = {
@@ -146,7 +132,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
       onResizeStop: onResizeStop
     });
   }
-  return getBooleanFF('platform.editor.table.update-table-resizer-styles') ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'center'
@@ -160,17 +146,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
   }, /*#__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
-    },
-    className: ClassName.TABLE_RESIZER_CONTAINER,
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
-    className: className,
-    node: node
-  }, children)));
+  }, children))));
 });
 export var TableContainer = function TableContainer(_ref3) {
   var children = _ref3.children,
@@ -191,7 +167,6 @@ export var TableContainer = function TableContainer(_ref3) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
       className: className,
       node: node,
-      lineLength: lineLength,
       containerWidth: editorWidth,
       editorView: editorView,
       getPos: getPos,

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

@@ -17,7 +17,6 @@ export declare const InnerContainer: React.ForwardRefExoticComponent<InnerContai
 } & React.RefAttributes<HTMLDivElement>>;
 type ResizableTableContainerProps = {
     containerWidth: number;
-    lineLength?: number;
     node: PMNode;
     className: string;
     editorView: EditorView;
@@ -26,7 +25,7 @@ type ResizableTableContainerProps = {
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, 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

@@ -17,7 +17,6 @@ export declare const InnerContainer: React.ForwardRefExoticComponent<InnerContai
 } & React.RefAttributes<HTMLDivElement>>;
 type ResizableTableContainerProps = {
     containerWidth: number;
-    lineLength?: number;
     node: PMNode;
     className: string;
     editorView: EditorView;
@@ -26,7 +25,7 @@ type ResizableTableContainerProps = {
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, 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": "5.6.1",
+  "version": "5.6.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -127,9 +127,6 @@
     "platform.editor.table.shift-arrowup-fix": {
       "type": "boolean"
     },
-    "platform.editor.table.update-table-resizer-styles": {
-      "type": "boolean"
-    },
     "platform.editor.table-update-colwidths-after-column-is-deleted": {
       "type": "boolean"
     },

package/src/__tests__/unit/nodeviews/TableContainer.tsx

@@ -258,7 +258,6 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       const { container } = render(
         <ResizableTableContainer
           containerWidth={1800}
-          lineLength={720}
           node={table}
           className={''}
           editorView={editorView}
@@ -272,10 +271,10 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
 
     test('when width attribute is not set', () => {
       const container = buildContainer({ layout: 'wide' });
-
-      const style = window.getComputedStyle(container.firstChild as Element);
+      const style = window.getComputedStyle(
+        container.firstChild?.firstChild as Element,
+      );
       expect(style.width).toBe(`${akEditorWideLayoutWidth}px`);
-      expect(style.marginLeft).toBe('-120px');
     });
   });
 
@@ -287,7 +286,6 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       const { container } = render(
         <ResizableTableContainer
           containerWidth={1800}
-          lineLength={720}
           node={table}
           className={''}
           editorView={editorView}
@@ -383,7 +381,6 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       const { container } = render(
         <ResizableTableContainer
           containerWidth={1800}
-          lineLength={720}
           node={table}
           className={''}
           editorView={editorView}
@@ -442,7 +439,6 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       const { container, unmount } = render(
         <ResizableTableContainer
           containerWidth={1800}
-          lineLength={720}
           node={table}
           className={''}
           editorView={editorView}

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

@@ -68,7 +68,6 @@ export const InnerContainer = forwardRef<
 
 type ResizableTableContainerProps = {
   containerWidth: number;
-  lineLength?: number;
   node: PMNode;
   className: string;
   editorView: EditorView;
@@ -83,7 +82,6 @@ export const ResizableTableContainer = React.memo(
     children,
     className,
     node,
-    lineLength,
     containerWidth,
     editorView,
     getPos,
@@ -92,7 +90,6 @@ export const ResizableTableContainer = React.memo(
     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') => {
@@ -143,34 +140,19 @@ export const ResizableTableContainer = React.memo(
       resizeObserverRef.current.disconnect();
     }, [updateContainerHeight]);
 
-    const updateWidth = useCallback(
-      (width: number) => {
-        if (!containerRef.current) {
-          return;
-        }
-
-        // 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 updateWidth = useCallback((width: number) => {
+      if (!containerRef.current) {
+        return;
+      }
 
-        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],
-    );
+      // 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 displayGuideline = useCallback(
       (guidelines: GuidelineConfig[]) => {
@@ -210,9 +192,6 @@ export const ResizableTableContainer = React.memo(
 
     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);
 
@@ -238,7 +217,7 @@ export const ResizableTableContainer = React.memo(
       };
     }
 
-    return getBooleanFF('platform.editor.table.update-table-resizer-styles') ? (
+    return (
       <div
         style={{
           display: 'flex',
@@ -259,21 +238,6 @@ export const ResizableTableContainer = React.memo(
           </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>
     );
   },
 );
@@ -311,7 +275,6 @@ export const TableContainer = ({
       <ResizableTableContainer
         className={className}
         node={node}
-        lineLength={lineLength!}
         containerWidth={editorWidth!}
         editorView={editorView}
         getPos={getPos}