@atlaskit/editor-plugin-table 2.10.0 → 2.10.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 2.10.2
+
+### Patch Changes
+
+- [`31031f52f80`](https://bitbucket.org/atlassian/atlassian-frontend/commits/31031f52f80) - Fix table shift when two users resize the same table in collab mode
+- Updated dependencies
+
+## 2.10.1
+
+### Patch Changes
+
+- [`30d49e87f62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30d49e87f62) - Added danger apperance to ReszierNext component and toggled it when the delete icon in the table floating toolbar is rolled over
+- Updated dependencies
+
 ## 2.10.0
 
 ### Minor Changes

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

@@ -320,7 +320,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         view = _this$props8.view,
         getNode = _this$props8.getNode,
         isMediaFullscreen = _this$props8.isMediaFullscreen,
-        allowColumnResizing = _this$props8.allowColumnResizing;
+        allowColumnResizing = _this$props8.allowColumnResizing,
+        isResizing = _this$props8.isResizing,
+        options = _this$props8.options;
       var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
         isInDanger = _getPluginState.isInDanger;
       var table = (0, _utils2.findTable)(view.state.selection);
@@ -347,7 +349,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var previousTable = this.node;
         if ((0, _utils4.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils4.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
           var _view = this.props.view;
-          (0, _utils3.insertColgroupFromNode)(this.table, currentTable);
+          var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || (0, _utils4.tablesHaveDifferentNoOfColumns)(currentTable, previousTable) && isResizing;
+          if (shouldRecreateResizeCols) {
+            (0, _utils3.insertColgroupFromNode)(this.table, currentTable);
+          }
           (0, _dom.updateControls)()(_view.state);
         }
         this.handleTableResizingDebounced();
@@ -421,7 +426,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
         isNested: isNested,
         pluginInjectionApi: pluginInjectionApi,
-        isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+        isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
+        isResizing: isResizing
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

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

@@ -50,9 +50,11 @@ var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     editorView = _ref2.editorView,
     getPos = _ref2.getPos,
     tableRef = _ref2.tableRef,
+    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 updateWidth = (0, _react.useCallback)(function (width) {
     if (!containerRef.current) {
       return;
@@ -87,12 +89,15 @@ var ResizableTableContainer = function ResizableTableContainer(_ref2) {
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = containerWidth - 76;
   var width = Math.min(tableWidth, responsiveContainerWidth);
-  marginLeftRef.current = getMarginLeft(lineLength, width);
+  if (!isResizing) {
+    tableWidthRef.current = width;
+    marginLeftRef.current = getMarginLeft(lineLength, width);
+  }
   var maxResizerWidth = Math.min(responsiveContainerWidth, _utils.TABLE_MAX_WIDTH);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginLeft: marginLeftRef.current,
-      width: width
+      width: tableWidthRef.current
     },
     className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
@@ -126,6 +131,7 @@ var TableContainer = function TableContainer(_ref3) {
     getPos = _ref3.getPos,
     tableRef = _ref3.tableRef,
     isNested = _ref3.isNested,
+    isResizing = _ref3.isResizing,
     pluginInjectionApi = _ref3.pluginInjectionApi;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
@@ -136,6 +142,7 @@ var TableContainer = function TableContainer(_ref3) {
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi
     }, children);
   }

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

@@ -14,6 +14,7 @@ var _guideline = require("@atlaskit/editor-common/guideline");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _utils2 = require("../pm-plugins/table-resizing/utils");
 var _tableWidth = require("../pm-plugins/table-width");
 var _consts = require("../ui/consts");
@@ -86,6 +87,8 @@ var TableResizer = function TableResizer(_ref) {
     setSnappingEnabled = _useState2[1];
   var resizerMinWidth = getResizerMinWidth(node);
   var handleHeightSize = getResizerHandleHeight(tableRef);
+  var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+    isInDanger = _getPluginState.isInDanger;
   var _useMeasureFramerate = (0, _analytics.useMeasureFramerate)(),
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
@@ -213,7 +216,8 @@ var TableResizer = function TableResizer(_ref) {
     handlePositioning: "adjacent",
     innerPadding: tableHandlePosition,
     isHandleVisible: ((_findTable = (0, _utils.findTable)((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos(),
-    handleComponent: handleComponent
+    handleComponent: handleComponent,
+    appearance: isInDanger ? 'danger' : undefined
   }, children);
 };
 exports.TableResizer = TableResizer;

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

@@ -96,7 +96,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
-      var _this2 = this;
+      var _this2 = this,
+        _tableWidthPluginKey$;
       if (!this.table) {
         return;
       }
@@ -107,7 +108,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
 
       // handle inline style when table been resized
       var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
-      if (tableInlineWidth) {
+      var isTableResizing = (_tableWidthPluginKey$ = _tableWidth.pluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+      if (!isTableResizing && tableInlineWidth) {
         handleInlineTableWidth(this.table, tableInlineWidth);
       }
     }

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

@@ -312,7 +312,9 @@ class TableComponent extends React.Component {
       view,
       getNode,
       isMediaFullscreen,
-      allowColumnResizing
+      allowColumnResizing,
+      isResizing,
+      options
     } = this.props;
     const {
       isInDanger
@@ -343,7 +345,10 @@ class TableComponent extends React.Component {
         const {
           view
         } = this.props;
-        recreateResizeColsByNode(this.table, currentTable);
+        const shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || tablesHaveDifferentNoOfColumns(currentTable, previousTable) && isResizing;
+        if (shouldRecreateResizeCols) {
+          recreateResizeColsByNode(this.table, currentTable);
+        }
         updateControls()(view.state);
       }
       this.handleTableResizingDebounced();
@@ -418,7 +423,8 @@ class TableComponent extends React.Component {
       isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
       isNested: isNested,
       pluginInjectionApi: pluginInjectionApi,
-      isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+      isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
+      isResizing: isResizing
     }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,
       "data-testid": "sticky-sentinel-top"

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

@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
-import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
@@ -40,10 +40,12 @@ export const ResizableTableContainer = ({
   editorView,
   getPos,
   tableRef,
+  isResizing,
   pluginInjectionApi
 }) => {
   const containerRef = useRef(null);
   const marginLeftRef = useRef(0);
+  const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const updateWidth = useCallback(width => {
     if (!containerRef.current) {
       return;
@@ -78,12 +80,15 @@ export const ResizableTableContainer = ({
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   const responsiveContainerWidth = containerWidth - 76;
   const width = Math.min(tableWidth, responsiveContainerWidth);
-  marginLeftRef.current = getMarginLeft(lineLength, width);
+  if (!isResizing) {
+    tableWidthRef.current = width;
+    marginLeftRef.current = getMarginLeft(lineLength, width);
+  }
   const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       marginLeft: marginLeftRef.current,
-      width
+      width: tableWidthRef.current
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
@@ -117,6 +122,7 @@ export const TableContainer = ({
   getPos,
   tableRef,
   isNested,
+  isResizing,
   pluginInjectionApi
 }) => {
   if (isTableResizingEnabled && !isNested) {
@@ -128,6 +134,7 @@ export const TableContainer = ({
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi
     }, children);
   }

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

@@ -4,6 +4,7 @@ import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getPluginState } from '../pm-plugins/plugin-factory';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
@@ -70,6 +71,9 @@ export const TableResizer = ({
   const [snappingEnabled, setSnappingEnabled] = useState(false);
   const resizerMinWidth = getResizerMinWidth(node);
   const handleHeightSize = getResizerHandleHeight(tableRef);
+  const {
+    isInDanger
+  } = getPluginState(editorView.state);
   const {
     startMeasure,
     endMeasure,
@@ -200,6 +204,7 @@ export const TableResizer = ({
     handlePositioning: "adjacent",
     innerPadding: tableHandlePosition,
     isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos(),
-    handleComponent: handleComponent
+    handleComponent: handleComponent,
+    appearance: isInDanger ? 'danger' : undefined
   }, children);
 };

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

@@ -69,6 +69,7 @@ export default class TableView extends ReactNodeView {
     return rendered;
   }
   setDomAttrs(node) {
+    var _tableWidthPluginKey$;
     if (!this.table) {
       return;
     }
@@ -79,7 +80,8 @@ export default class TableView extends ReactNodeView {
 
     // handle inline style when table been resized
     const tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
-    if (tableInlineWidth) {
+    const isTableResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+    if (!isTableResizing && tableInlineWidth) {
       handleInlineTableWidth(this.table, tableInlineWidth);
     }
   }

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

@@ -313,7 +313,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         view = _this$props8.view,
         getNode = _this$props8.getNode,
         isMediaFullscreen = _this$props8.isMediaFullscreen,
-        allowColumnResizing = _this$props8.allowColumnResizing;
+        allowColumnResizing = _this$props8.allowColumnResizing,
+        isResizing = _this$props8.isResizing,
+        options = _this$props8.options;
       var _getPluginState = getPluginState(view.state),
         isInDanger = _getPluginState.isInDanger;
       var table = findTable(view.state.selection);
@@ -340,7 +342,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var previousTable = this.node;
         if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || tablesHaveDifferentNoOfColumns(currentTable, previousTable)) {
           var _view = this.props.view;
-          recreateResizeColsByNode(this.table, currentTable);
+          var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || tablesHaveDifferentNoOfColumns(currentTable, previousTable) && isResizing;
+          if (shouldRecreateResizeCols) {
+            recreateResizeColsByNode(this.table, currentTable);
+          }
           updateControls()(_view.state);
         }
         this.handleTableResizingDebounced();
@@ -414,7 +419,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
         isNested: isNested,
         pluginInjectionApi: pluginInjectionApi,
-        isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+        isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
+        isResizing: isResizing
       }, /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

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

@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
-import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
@@ -39,9 +39,11 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     editorView = _ref2.editorView,
     getPos = _ref2.getPos,
     tableRef = _ref2.tableRef,
+    isResizing = _ref2.isResizing,
     pluginInjectionApi = _ref2.pluginInjectionApi;
   var containerRef = useRef(null);
   var marginLeftRef = useRef(0);
+  var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   var updateWidth = useCallback(function (width) {
     if (!containerRef.current) {
       return;
@@ -76,12 +78,15 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = containerWidth - 76;
   var width = Math.min(tableWidth, responsiveContainerWidth);
-  marginLeftRef.current = getMarginLeft(lineLength, width);
+  if (!isResizing) {
+    tableWidthRef.current = width;
+    marginLeftRef.current = getMarginLeft(lineLength, width);
+  }
   var maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       marginLeft: marginLeftRef.current,
-      width: width
+      width: tableWidthRef.current
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
@@ -114,6 +119,7 @@ export var TableContainer = function TableContainer(_ref3) {
     getPos = _ref3.getPos,
     tableRef = _ref3.tableRef,
     isNested = _ref3.isNested,
+    isResizing = _ref3.isResizing,
     pluginInjectionApi = _ref3.pluginInjectionApi;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
@@ -124,6 +130,7 @@ export var TableContainer = function TableContainer(_ref3) {
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi
     }, children);
   }

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

@@ -8,6 +8,7 @@ import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getPluginState } from '../pm-plugins/plugin-factory';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
@@ -76,6 +77,8 @@ export var TableResizer = function TableResizer(_ref) {
     setSnappingEnabled = _useState2[1];
   var resizerMinWidth = getResizerMinWidth(node);
   var handleHeightSize = getResizerHandleHeight(tableRef);
+  var _getPluginState = getPluginState(editorView.state),
+    isInDanger = _getPluginState.isInDanger;
   var _useMeasureFramerate = useMeasureFramerate(),
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
@@ -203,6 +206,7 @@ export var TableResizer = function TableResizer(_ref) {
     handlePositioning: "adjacent",
     innerPadding: tableHandlePosition,
     isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos(),
-    handleComponent: handleComponent
+    handleComponent: handleComponent,
+    appearance: isInDanger ? 'danger' : undefined
   }, children);
 };

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

@@ -89,7 +89,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
-      var _this2 = this;
+      var _this2 = this,
+        _tableWidthPluginKey$;
       if (!this.table) {
         return;
       }
@@ -100,7 +101,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
 
       // handle inline style when table been resized
       var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
-      if (tableInlineWidth) {
+      var isTableResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+      if (!isTableResizing && tableInlineWidth) {
         handleInlineTableWidth(this.table, tableInlineWidth);
       }
     }

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

@@ -23,9 +23,10 @@ type ResizableTableContainerProps = {
     editorView: EditorView;
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
+    isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
+export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -36,7 +37,8 @@ type TableContainerProps = {
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
     isNested: boolean;
+    isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

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

@@ -3,10 +3,10 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags, getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-import { PluginInjectionAPI } from '../types';
-import { Props, TableOptions } from './types';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../types';
+import type { Props, TableOptions } from './types';
 type ForwardRef = (node: HTMLElement | null) => void;
 export default class TableView extends ReactNodeView<Props> {
     private table;

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

@@ -23,9 +23,10 @@ type ResizableTableContainerProps = {
     editorView: EditorView;
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
+    isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
+export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -36,7 +37,8 @@ type TableContainerProps = {
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
     isNested: boolean;
+    isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

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

@@ -3,10 +3,10 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags, getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-import { PluginInjectionAPI } from '../types';
-import { Props, TableOptions } from './types';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../types';
+import type { Props, TableOptions } from './types';
 type ForwardRef = (node: HTMLElement | null) => void;
 export default class TableView extends ReactNodeView<Props> {
     private table;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.10.0",
+  "version": "2.10.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^28.1.0",
-    "@atlaskit/editor-common": "^74.47.0",
+    "@atlaskit/editor-common": "^74.49.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.8",
@@ -38,7 +38,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tokens": "^1.15.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/src/__tests__/unit/commands/go-to-next-cell.ts

@@ -4,15 +4,15 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -24,7 +24,7 @@ import {
 import tablePlugin from '../../../plugins/table';
 import { goToNextCell } from '../../../plugins/table/commands/go-to-next-cell';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import { TablePluginState } from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -43,7 +43,7 @@ describe('table plugin: goToNextCell', () => {
     .add(guidelinePlugin)
     .add(tablePlugin);
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey,

package/src/__tests__/unit/commands/insert.ts

@@ -4,15 +4,15 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -23,7 +23,7 @@ import {
 import tablePlugin from '../../../plugins/table';
 import { addColumnAt } from '../../../plugins/table/commands/insert';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import { TablePluginState } from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -54,7 +54,7 @@ describe('table plugin: insert', () => {
       ]);
 
     const editor = (doc: DocBuilder) =>
-      createEditor<TablePluginState, PluginKey>({
+      createEditor<TablePluginState, PluginKey, typeof preset>({
         doc,
         preset,
         pluginKey,

package/src/__tests__/unit/commands/misc.ts

@@ -4,16 +4,16 @@ import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { isColumnSelected } from '@atlaskit/editor-tables/utils';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -29,10 +29,8 @@ import {
 import { getDecorations } from '../../../plugins/table/pm-plugins/decorations/plugin';
 import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import {
-  TableDecorations,
-  TablePluginState,
-} from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
+import { TableDecorations } from '../../../plugins/table/types';
 
 describe('table plugin: commands', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -50,7 +48,7 @@ describe('table plugin: commands', () => {
       },
     ]);
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey,