@atlaskit/editor-plugin-table 5.7.3 → 5.7.5

package/src/__tests__/unit/transforms/delete-columns.ts

@@ -27,7 +27,6 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import tablePlugin from '../../../plugin';
 import { pluginKey } from '../../../pm-plugins/plugin-key';
@@ -87,406 +86,186 @@ describe('table plugin -> transforms -> delete columns', () => {
 
   describe('when selection rect is given', () => {
     describe('when the first column is deleted', () => {
-      describe('should delete the column and move cursor to the first column', () => {
-        ffTest(
-          'platform.editor.table-update-colwidths-after-column-is-deleted',
-          () => {
-            const {
-              editorView,
-              refs: { nextCursorPos },
-            } = editor(
-              doc(
-                p('text'),
-                table()(
-                  tr(
-                    td({})(p('{nextCursorPos}')),
-                    td({})(p('c2')),
-                    td({})(p('c3')),
-                  ),
-                ),
-              ),
-            );
-            const { state, dispatch } = editorView;
-            dispatch(deleteColumns(colsToRect([0], 1), true)(state.tr));
-            expect(editorView.state.doc).toEqualDocument(
-              doc(
-                p('text'),
-                table({ localId: TABLE_LOCAL_ID })(
-                  tr(td({})(p('c2')), td()(p('c3'))),
-                ),
-              ),
-            );
-            expect(editorView.state.selection.from).toEqual(nextCursorPos);
-          },
-          () => {
-            const {
-              editorView,
-              refs: { nextCursorPos },
-            } = editor(
-              doc(
-                p('text'),
-                table()(
-                  tr(
-                    td({})(p('{nextCursorPos}')),
-                    td({})(p('c2')),
-                    td({})(p('c3')),
-                  ),
-                ),
-              ),
-            );
-            const { state, dispatch } = editorView;
-            dispatch(deleteColumns(colsToRect([0], 1), true)(state.tr));
-            expect(editorView.state.doc).toEqualDocument(
-              doc(
-                p('text'),
-                table({ localId: TABLE_LOCAL_ID })(
-                  tr(td({})(p('c2')), td()(p('c3'))),
-                ),
+      it('should delete the column and move cursor to the first column', () => {
+        const {
+          editorView,
+          refs: { nextCursorPos },
+        } = editor(
+          doc(
+            p('text'),
+            table()(
+              tr(
+                td({})(p('{nextCursorPos}')),
+                td({})(p('c2')),
+                td({})(p('c3')),
               ),
-            );
-            expect(editorView.state.selection.from).toEqual(nextCursorPos);
-          },
+            ),
+          ),
+        );
+        const { state, dispatch } = editorView;
+        dispatch(deleteColumns(colsToRect([0], 1), true)(state.tr));
+        expect(editorView.state.doc).toEqualDocument(
+          doc(
+            p('text'),
+            table({ localId: TABLE_LOCAL_ID })(
+              tr(td({})(p('c2')), td()(p('c3'))),
+            ),
+          ),
         );
+        expect(editorView.state.selection.from).toEqual(nextCursorPos);
       });
     });
 
     describe('when middle column is deleted', () => {
-      describe('should delete the column and move cursor to the previous column', () => {
-        ffTest(
-          'platform.editor.table-update-colwidths-after-column-is-deleted',
-          () => {
-            const {
-              editorView,
-              refs: { nextCursorPos },
-            } = editor(
-              doc(
-                p('text'),
-                table()(
-                  tr(
-                    td({})(p('{nextCursorPos}')),
-                    td({})(p('c2')),
-                    td({})(p('c3')),
-                  ),
-                ),
-              ),
-            );
-            const { state, dispatch } = editorView;
-            dispatch(deleteColumns(colsToRect([1], 1), true)(state.tr));
-            expect(editorView.state.doc).toEqualDocument(
-              doc(
-                p('text'),
-                table({ localId: TABLE_LOCAL_ID })(tr(tdEmpty, td()(p('c3')))),
-              ),
-            );
-            expect(editorView.state.selection.from).toEqual(nextCursorPos);
-          },
-          () => {
-            const {
-              editorView,
-              refs: { nextCursorPos },
-            } = editor(
-              doc(
-                p('text'),
-                table()(
-                  tr(
-                    td({})(p('{nextCursorPos}')),
-                    td({})(p('c2')),
-                    td({})(p('c3')),
-                  ),
-                ),
-              ),
-            );
-            const { state, dispatch } = editorView;
-            dispatch(deleteColumns(colsToRect([1], 1), true)(state.tr));
-            expect(editorView.state.doc).toEqualDocument(
-              doc(
-                p('text'),
-                table({ localId: TABLE_LOCAL_ID })(tr(tdEmpty, td()(p('c3')))),
+      it('should delete the column and move cursor to the previous column', () => {
+        const {
+          editorView,
+          refs: { nextCursorPos },
+        } = editor(
+          doc(
+            p('text'),
+            table()(
+              tr(
+                td({})(p('{nextCursorPos}')),
+                td({})(p('c2')),
+                td({})(p('c3')),
               ),
-            );
-            expect(editorView.state.selection.from).toEqual(nextCursorPos);
-          },
+            ),
+          ),
+        );
+        const { state, dispatch } = editorView;
+        dispatch(deleteColumns(colsToRect([1], 1), true)(state.tr));
+        expect(editorView.state.doc).toEqualDocument(
+          doc(
+            p('text'),
+            table({ localId: TABLE_LOCAL_ID })(tr(tdEmpty, td()(p('c3')))),
+          ),
         );
+        expect(editorView.state.selection.from).toEqual(nextCursorPos);
       });
     });
 
     describe('when multiple rows are selected', () => {
-      describe('should delete these columns', () => {
-        ffTest(
-          'platform.editor.table-update-colwidths-after-column-is-deleted',
-          () => {
-            const { editorView } = editor(
-              doc(
-                p('text'),
-                table()(tr(tdCursor, td({})(p('c1')), td({})(p('c2')))),
-              ),
-            );
-            const { state, dispatch } = editorView;
-            dispatch(deleteColumns(colsToRect([0, 1], 1), true)(state.tr));
-            expect(editorView.state.doc).toEqualDocument(
-              doc(
-                p('text'),
-                table({ localId: TABLE_LOCAL_ID })(tr(td()(p('c2')))),
-              ),
-            );
-          },
-          () => {
-            const { editorView } = editor(
-              doc(
-                p('text'),
-                table()(tr(tdCursor, td({})(p('c1')), td({})(p('c2')))),
-              ),
-            );
-            const { state, dispatch } = editorView;
-            dispatch(deleteColumns(colsToRect([0, 1], 1), true)(state.tr));
-            expect(editorView.state.doc).toEqualDocument(
-              doc(
-                p('text'),
-                table({ localId: TABLE_LOCAL_ID })(tr(td()(p('c2')))),
-              ),
-            );
-          },
+      it('should delete these columns', () => {
+        const { editorView } = editor(
+          doc(
+            p('text'),
+            table()(tr(tdCursor, td({})(p('c1')), td({})(p('c2')))),
+          ),
+        );
+        const { state, dispatch } = editorView;
+        dispatch(deleteColumns(colsToRect([0, 1], 1), true)(state.tr));
+        expect(editorView.state.doc).toEqualDocument(
+          doc(p('text'), table({ localId: TABLE_LOCAL_ID })(tr(td()(p('c2'))))),
         );
       });
     });
   });
 
   describe('when one column is selected', () => {
-    describe('should delete the column', () => {
-      ffTest(
-        'platform.editor.table-update-colwidths-after-column-is-deleted',
-        () => {
-          const { editorView } = editor(
-            doc(
-              p('text'),
-              table()(
-                tr(td({})(p('a1')), td({})(p('{<cell}a2')), td({})(p('a3'))),
-                tr(td({})(p('b1')), td({})(p('{cell>}b2')), td({})(p('b3'))),
-              ),
-            ),
-          );
-          const { state, dispatch } = editorView;
-          dispatch(
-            deleteColumns(getSelectionRect(state.selection)!, true)(state.tr),
-          );
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              p('text'),
-              table({ localId: TABLE_LOCAL_ID })(
-                tr(td({})(p('a1')), td({})(p('a3'))),
-                tr(td({})(p('b1')), td({})(p('b3'))),
-              ),
-            ),
-          );
-        },
-        () => {
-          const { editorView } = editor(
-            doc(
-              p('text'),
-              table()(
-                tr(td({})(p('a1')), td({})(p('{<cell}a2')), td({})(p('a3'))),
-                tr(td({})(p('b1')), td({})(p('{cell>}b2')), td({})(p('b3'))),
-              ),
-            ),
-          );
-          const { state, dispatch } = editorView;
-          dispatch(
-            deleteColumns(getSelectionRect(state.selection)!, true)(state.tr),
-          );
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              p('text'),
-              table({ localId: TABLE_LOCAL_ID })(
-                tr(td({})(p('a1')), td({})(p('a3'))),
-                tr(td({})(p('b1')), td({})(p('b3'))),
-              ),
-            ),
-          );
-        },
+    it('should delete the column', () => {
+      const { editorView } = editor(
+        doc(
+          p('text'),
+          table()(
+            tr(td({})(p('a1')), td({})(p('{<cell}a2')), td({})(p('a3'))),
+            tr(td({})(p('b1')), td({})(p('{cell>}b2')), td({})(p('b3'))),
+          ),
+        ),
+      );
+      const { state, dispatch } = editorView;
+      dispatch(
+        deleteColumns(getSelectionRect(state.selection)!, true)(state.tr),
+      );
+      expect(editorView.state.doc).toEqualDocument(
+        doc(
+          p('text'),
+          table({ localId: TABLE_LOCAL_ID })(
+            tr(td({})(p('a1')), td({})(p('a3'))),
+            tr(td({})(p('b1')), td({})(p('b3'))),
+          ),
+        ),
       );
     });
 
-    describe('should update each cells colWidth', () => {
-      ffTest(
-        'platform.editor.table-update-colwidths-after-column-is-deleted',
-        () => {
-          const { editorView } = editor(
-            doc(
-              table({ localId: TABLE_LOCAL_ID, layout: 'default', width: 760 })(
-                tr(
-                  td({ colwidth: [401] })(p('{<>}')),
-                  td({ colwidth: [105] })(p('')),
-                  td({ colwidth: [253] })(p('')),
-                ),
-              ),
-            ),
-          );
-          const { dispatch, state } = editorView;
-          dispatch(
-            deleteColumns(colsToRect([1], 1), true, editorView)(state.tr),
-          );
-
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              table({ localId: TABLE_LOCAL_ID, width: 760 })(
-                tr(
-                  td({ colwidth: [460] })(p('')),
-                  td({ colwidth: [289] })(p('')),
-                ),
-              ),
-            ),
-          );
-        },
-        () => {
-          const { editorView } = editor(
-            doc(
-              table({ localId: TABLE_LOCAL_ID, width: 691 })(
-                tr(
-                  td({ colwidth: [230] })(p('')),
-                  td({ colwidth: [230] })(p('')),
-                  td({ colwidth: [230] })(p('')),
-                ),
-              ),
+    it('should update each cells colWidth', () => {
+      const { editorView } = editor(
+        doc(
+          table({ localId: TABLE_LOCAL_ID, layout: 'default', width: 760 })(
+            tr(
+              td({ colwidth: [401] })(p('{<>}')),
+              td({ colwidth: [105] })(p('')),
+              td({ colwidth: [253] })(p('')),
             ),
-          );
-          const { dispatch, state } = editorView;
-
-          dispatch(
-            deleteColumns(colsToRect([1], 1), true, editorView)(state.tr),
-          );
+          ),
+        ),
+      );
+      const { dispatch, state } = editorView;
+      dispatch(deleteColumns(colsToRect([1], 1), true, editorView)(state.tr));
 
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              table({ localId: TABLE_LOCAL_ID, width: 691 })(
-                tr(
-                  td({ colwidth: [230] })(p('')),
-                  td({ colwidth: [230] })(p('')),
-                ),
-              ),
-            ),
-          );
-        },
+      expect(editorView.state.doc).toEqualDocument(
+        doc(
+          table({ localId: TABLE_LOCAL_ID, width: 760 })(
+            tr(td({ colwidth: [460] })(p('')), td({ colwidth: [290] })(p(''))),
+          ),
+        ),
       );
     });
   });
 
   describe('when multiple columns are selected', () => {
-    describe('should delete these column', () => {
-      ffTest(
-        'platform.editor.table-update-colwidths-after-column-is-deleted',
-        () => {
-          const { editorView } = editor(
-            doc(
-              p('text'),
-              table()(
-                tr(td({})(p('{<cell}a1')), td({})(p('a2')), td({})(p('a3'))),
-                tr(td({})(p('b1')), td({})(p('{cell>}b2')), td({})(p('b3'))),
-              ),
-            ),
-          );
-          const { state, dispatch } = editorView;
-          dispatch(
-            deleteColumns(getSelectionRect(state.selection)!, true)(state.tr),
-          );
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              p('text'),
-              table({ localId: TABLE_LOCAL_ID })(
-                tr(td({})(p('a3'))),
-                tr(td({})(p('b3'))),
-              ),
-            ),
-          );
-        },
-        () => {
-          const { editorView } = editor(
-            doc(
-              p('text'),
-              table()(
-                tr(td({})(p('{<cell}a1')), td({})(p('a2')), td({})(p('a3'))),
-                tr(td({})(p('b1')), td({})(p('{cell>}b2')), td({})(p('b3'))),
-              ),
-            ),
-          );
-          const { state, dispatch } = editorView;
-          dispatch(
-            deleteColumns(getSelectionRect(state.selection)!, true)(state.tr),
-          );
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              p('text'),
-              table({ localId: TABLE_LOCAL_ID })(
-                tr(td({})(p('a3'))),
-                tr(td({})(p('b3'))),
-              ),
-            ),
-          );
-        },
+    it('should delete these column', () => {
+      const { editorView } = editor(
+        doc(
+          p('text'),
+          table()(
+            tr(td({})(p('{<cell}a1')), td({})(p('a2')), td({})(p('a3'))),
+            tr(td({})(p('b1')), td({})(p('{cell>}b2')), td({})(p('b3'))),
+          ),
+        ),
+      );
+      const { state, dispatch } = editorView;
+      dispatch(
+        deleteColumns(getSelectionRect(state.selection)!, true)(state.tr),
+      );
+      expect(editorView.state.doc).toEqualDocument(
+        doc(
+          p('text'),
+          table({ localId: TABLE_LOCAL_ID })(
+            tr(td({})(p('a3'))),
+            tr(td({})(p('b3'))),
+          ),
+        ),
       );
     });
 
-    describe('should update each cells colWidth', () => {
-      ffTest(
-        'platform.editor.table-update-colwidths-after-column-is-deleted',
-        () => {
-          const { editorView } = editor(
-            doc(
-              table({ localId: TABLE_LOCAL_ID, layout: 'default', width: 760 })(
-                tr(
-                  td({ colwidth: [401] })(p('{<cell}')),
-                  td({ colwidth: [105] })(p('{cell>}')),
-                  td({ colwidth: [253] })(p('')),
-                ),
-              ),
-            ),
-          );
-          const { dispatch, state } = editorView;
-          dispatch(
-            deleteColumns(
-              getSelectionRect(state.selection)!,
-              true,
-              editorView,
-            )(state.tr),
-          );
-
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              table({ localId: TABLE_LOCAL_ID, width: 760 })(
-                tr(td({ colwidth: [749] })(p(''))),
-              ),
-            ),
-          );
-        },
-        () => {
-          const { editorView } = editor(
-            doc(
-              table({ localId: TABLE_LOCAL_ID, width: 691 })(
-                tr(
-                  td({ colwidth: [401] })(p('{<cell}')),
-                  td({ colwidth: [105] })(p('{cell>}')),
-                  td({ colwidth: [253] })(p('')),
-                ),
-              ),
+    it('should update each cells colWidth', () => {
+      const { editorView } = editor(
+        doc(
+          table({ localId: TABLE_LOCAL_ID, layout: 'default', width: 760 })(
+            tr(
+              td({ colwidth: [401] })(p('{<cell}')),
+              td({ colwidth: [105] })(p('{cell>}')),
+              td({ colwidth: [253] })(p('')),
             ),
-          );
-          const { dispatch, state } = editorView;
-
-          dispatch(
-            deleteColumns(
-              getSelectionRect(state.selection)!,
-              true,
-              editorView,
-            )(state.tr),
-          );
+          ),
+        ),
+      );
+      const { dispatch, state } = editorView;
+      dispatch(
+        deleteColumns(
+          getSelectionRect(state.selection)!,
+          true,
+          editorView,
+        )(state.tr),
+      );
 
-          expect(editorView.state.doc).toEqualDocument(
-            doc(
-              table({ localId: TABLE_LOCAL_ID, width: 691 })(
-                tr(td({ colwidth: [253] })(p(''))),
-              ),
-            ),
-          );
-        },
+      expect(editorView.state.doc).toEqualDocument(
+        doc(
+          table({ localId: TABLE_LOCAL_ID, width: 760 })(
+            tr(td({ colwidth: [750] })(p(''))),
+          ),
+        ),
       );
     });
   });

package/src/commands/insert.ts

@@ -56,9 +56,7 @@ export function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth) {
       const table = findTable(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = rescaleColumns(getEditorContainerWidth)(table, view)(
-          updatedTr,
-        );
+        updatedTr = rescaleColumns()(table, view)(updatedTr);
       }
 
       if (

package/src/nodeviews/TableComponent.tsx

@@ -569,7 +569,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           shadowPadding +
           2;
 
-    const { stickyScrollbar } = getEditorFeatureFlags();
+    const { stickyScrollbar, tableResizePerformance } = getEditorFeatureFlags();
 
     return (
       <TableContainer
@@ -589,6 +589,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         pluginInjectionApi={pluginInjectionApi}
         isTableResizingEnabled={options?.isTableResizingEnabled}
         isResizing={isResizing}
+        tableResizePerformance={tableResizePerformance}
       >
         <div
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}

package/src/nodeviews/TableContainer.tsx

@@ -75,6 +75,7 @@ type ResizableTableContainerProps = {
   tableRef: HTMLTableElement;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
+  tableResizePerformance?: boolean;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -88,6 +89,7 @@ export const ResizableTableContainer = React.memo(
     tableRef,
     isResizing,
     pluginInjectionApi,
+    tableResizePerformance,
   }: PropsWithChildren<ResizableTableContainerProps>) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
@@ -207,6 +209,7 @@ export const ResizableTableContainer = React.memo(
       displayGuideline,
       attachAnalyticsEvent,
       displayGapCursor,
+      tableResizePerformance,
     };
 
     if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
@@ -223,6 +226,9 @@ export const ResizableTableContainer = React.memo(
           display: 'flex',
           justifyContent: 'center',
         }}
+        contentEditable={
+          tableResizePerformance && isResizing ? 'false' : undefined
+        }
       >
         <div
           style={{
@@ -254,6 +260,7 @@ type TableContainerProps = {
   isNested: boolean;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
+  tableResizePerformance?: boolean;
 };
 
 export const TableContainer = ({
@@ -269,6 +276,7 @@ export const TableContainer = ({
   isNested,
   isResizing,
   pluginInjectionApi,
+  tableResizePerformance,
 }: PropsWithChildren<TableContainerProps>) => {
   if (isTableResizingEnabled && !isNested) {
     return (
@@ -281,6 +289,7 @@ export const TableContainer = ({
         tableRef={tableRef}
         isResizing={isResizing}
         pluginInjectionApi={pluginInjectionApi}
+        tableResizePerformance={tableResizePerformance}
       >
         {children}
       </ResizableTableContainer>

package/src/nodeviews/TableResizer.tsx

@@ -68,6 +68,7 @@ interface TableResizerProps {
     payload: TableEventPayload,
   ) => ((tr: Transaction) => boolean) | undefined;
   displayGapCursor: (toggle: boolean) => boolean;
+  tableResizePerformance?: boolean;
 }
 
 export interface TableResizerImprovementProps extends TableResizerProps {
@@ -162,6 +163,7 @@ export const TableResizer = ({
   displayGuideline,
   attachAnalyticsEvent,
   displayGapCursor,
+  tableResizePerformance,
 }: PropsWithChildren<TableResizerImprovementProps>) => {
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
@@ -354,6 +356,9 @@ export const TableResizer = ({
           docSize: state.doc.nodeSize,
           frameRateSamples,
           originalNode: node,
+          experiments: {
+            tableResizePerformance,
+          },
         });
         resizeFrameRatePayloads.forEach((payload) => {
           attachAnalyticsEvent(payload)?.(tr);
@@ -416,6 +421,7 @@ export const TableResizer = ({
       attachAnalyticsEvent,
       endMeasure,
       onResizeStop,
+      tableResizePerformance,
     ],
   );