@atlaskit/editor-plugin-table 3.1.2 → 3.1.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 3.1.3
+
+### Patch Changes
+
+- [`5b783c0f957`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5b783c0f957) - Clean up resizing plugin state for table when deleted
+
 ## 3.1.2
 
 ### Patch Changes

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

@@ -133,11 +133,17 @@ var TableResizer = function TableResizer(_ref) {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
+        var dispatch = editorView.dispatch,
+          _tr = editorView.state.tr;
         displayGapCursor(true);
         displayGuideline([]);
+        _tr.setMeta(_tableWidth.pluginKey, {
+          resizing: false
+        });
+        dispatch(_tr);
       }
     };
-  }, [displayGuideline, displayGapCursor]);
+  }, [editorView, displayGuideline, displayGapCursor]);
   var handleResizeStart = (0, _react.useCallback)(function () {
     startMeasure();
     isResizing.current = true;

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

@@ -119,11 +119,21 @@ export const TableResizer = ({
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
+        const {
+          dispatch,
+          state: {
+            tr
+          }
+        } = editorView;
         displayGapCursor(true);
         displayGuideline([]);
+        tr.setMeta(tableWidthPluginKey, {
+          resizing: false
+        });
+        dispatch(tr);
       }
     };
-  }, [displayGuideline, displayGapCursor]);
+  }, [editorView, displayGuideline, displayGapCursor]);
   const handleResizeStart = useCallback(() => {
     startMeasure();
     isResizing.current = true;

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

@@ -123,11 +123,17 @@ export var TableResizer = function TableResizer(_ref) {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
+        var dispatch = editorView.dispatch,
+          _tr = editorView.state.tr;
         displayGapCursor(true);
         displayGuideline([]);
+        _tr.setMeta(tableWidthPluginKey, {
+          resizing: false
+        });
+        dispatch(_tr);
       }
     };
-  }, [displayGuideline, displayGapCursor]);
+  }, [editorView, displayGuideline, displayGapCursor]);
   var handleResizeStart = useCallback(function () {
     startMeasure();
     isResizing.current = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

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

@@ -29,6 +29,7 @@ import {
   TableContainer,
 } from '../../../plugins/table/nodeviews/TableContainer';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import { pluginKey as tableResizingPluginKey } from '../../../plugins/table/pm-plugins/table-width';
 import type { TablePluginState } from '../../../plugins/table/types';
 
 const mockStartMeasure = jest.fn();
@@ -66,9 +67,14 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
     return createEditor({
       doc,
       editorProps: {
+        appearance: 'full-page',
         allowTables: false,
         dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ config: undefined })],
+          __plugins: [
+            tablePlugin({
+              config: { tableResizingEnabled: true, tableOptions: {} },
+            }),
+          ],
         },
         featureFlags,
       },
@@ -228,21 +234,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!);
       fireEvent.mouseUp(container.querySelector('.resizer-handle.right')!);
 
-      expect(analyticsMock).toHaveBeenCalledWith({
-        action: TABLE_ACTION.RESIZED,
-        actionSubject: ACTION_SUBJECT.TABLE,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          width: undefined, // Can't get the events right to trigger re-resizeable
-          prevWidth: null,
-          nodeSize: 20,
-          totalTableWidth: null,
-          totalRowCount: 1,
-          totalColumnCount: 3,
-        },
-      });
-
-      expect(analyticsMock).toHaveBeenCalledWith({
+      expect(analyticsMock).toHaveBeenNthCalledWith(1, {
         action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
         actionSubject: ACTION_SUBJECT.TABLE,
         eventType: EVENT_TYPE.OPERATIONAL,
@@ -254,7 +246,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
         },
       });
 
-      expect(analyticsMock).toHaveBeenCalledWith({
+      expect(analyticsMock).toHaveBeenNthCalledWith(2, {
         action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
         actionSubject: ACTION_SUBJECT.TABLE,
         eventType: EVENT_TYPE.OPERATIONAL,
@@ -266,6 +258,20 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
         },
       });
 
+      expect(analyticsMock).toHaveBeenNthCalledWith(3, {
+        action: TABLE_ACTION.RESIZED,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          newWidth: 0, // Can't get the events right to trigger re-resizeable
+          prevWidth: 960,
+          nodeSize: 20,
+          totalTableWidth: null,
+          totalRowCount: 1,
+          totalColumnCount: 3,
+        },
+      });
+
       analyticsMock.mockReset();
     });
 
@@ -378,7 +384,13 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
         />,
       );
 
-      return { container, unmount, selectionActionMock, actualGuidelineMock };
+      return {
+        container,
+        unmount,
+        editorView,
+        selectionActionMock,
+        actualGuidelineMock,
+      };
     };
 
     afterEach(() => {
@@ -408,5 +420,18 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       unmount();
       expect(actualGuidelineMock).toHaveBeenCalledWith({ guidelines: [] });
     });
+
+    // this is testing logic inside TableResizer, targeting the clean up in the useEffect
+    it('should call restore resizing plugin state when removed', () => {
+      const { container, unmount, editorView } = buildContainer({});
+
+      fireEvent.mouseDown(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!);
+
+      unmount();
+      expect(tableResizingPluginKey.getState(editorView.state)).toStrictEqual({
+        resizing: false,
+      });
+    });
   });
 });

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

@@ -201,11 +201,17 @@ export const TableResizer = ({
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
+        const {
+          dispatch,
+          state: { tr },
+        } = editorView;
         displayGapCursor(true);
         displayGuideline([]);
+        tr.setMeta(tableWidthPluginKey, { resizing: false });
+        dispatch(tr);
       }
     };
-  }, [displayGuideline, displayGapCursor]);
+  }, [editorView, displayGuideline, displayGapCursor]);
 
   const handleResizeStart = useCallback(() => {
     startMeasure();