@atlaskit/editor-plugin-table 5.7.2 → 5.7.4

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

@@ -13,7 +13,10 @@ import {
 } from '@atlaskit/editor-common/analytics';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
+import {
+  getParentNodeWidth,
+  getTableContainerWidth,
+} from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import type {
   EditorContainerWidth,
@@ -510,7 +513,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         stickyHeader={this.state.stickyHeader}
       />
     );
-
+    const tableContainerWidth = getTableContainerWidth(node);
     const colControls = isDragAndDropEnabled ? (
       <TableFloatingColumnControls
         editorView={view}
@@ -530,6 +533,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         stickyHeader={this.state.stickyHeader}
         canDrag={canDrag}
         getEditorFeatureFlags={getEditorFeatureFlags}
+        tableContainerWidth={tableContainerWidth}
+        isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
       />
     ) : null;
 

package/src/plugin.tsx

@@ -515,6 +515,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       canDrag={dragAndDropState?.canDrag}
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
                       editorAnalyticsAPI={editorAnalyticsAPI}
+                      stickyHeaders={stickyHeader}
                     />
                   )}
                   {allowControls && !isDragAndDropEnabled && !isResizing && (

package/src/pm-plugins/main.ts

@@ -37,8 +37,6 @@ import {
   findParentNodeOfType,
 } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   addBoldInEmptyHeaderCells,
@@ -83,7 +81,6 @@ import {
   transformSliceToCorrectEmptyTableCells,
   transformSliceToFixHardBreakProblemOnCopyFromCell,
   transformSliceToRemoveOpenTable,
-  updateResizeHandles,
 } from '../utils';
 import { isHeaderRowRequired } from '../utils/paste';
 
@@ -209,7 +206,6 @@ export const createPlugin = (
           const { selection } = state;
           const pluginState = getPluginState(state);
           let tableRef: HTMLTableElement | undefined;
-          let tableNode;
           if (pluginState.editorHasFocus) {
             const parent = findParentDomRefOfType(
               state.schema.nodes.table,
@@ -221,26 +217,12 @@ export const createPlugin = (
                   'table',
                 ) || undefined;
             }
-
-            tableNode = findTable(state.selection);
           }
 
           if (pluginState.tableRef !== tableRef) {
             setTableRef(tableRef)(state, dispatch);
           }
 
-          // Removes updateResizeHandles
-          if (
-            getBooleanFF(
-              'platform.editor.table-remove-update-resize-handles_djvab',
-            )
-          ) {
-          } else {
-            if (pluginState.tableNode !== tableNode) {
-              updateResizeHandles(tableRef);
-            }
-          }
-
           if (pluginState.editorHasFocus && pluginState.tableRef) {
             const { $cursor } = state.selection as TextSelection;
             if ($cursor) {