@atlaskit/editor-plugin-table 2.8.0 → 2.8.2

package/.eslintrc.js

@@ -1,6 +1,5 @@
 module.exports = {
   rules: {
-    'no-duplicate-imports': 'off',
     '@typescript-eslint/no-duplicate-imports': 'error',
   },
 };

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 2.8.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.8.1
+
+### Patch Changes
+
+- [`800c927efd1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/800c927efd1) - [ux] ED-19317: fix numbered column shift up issue with custom table FF on
+
 ## 2.8.0
 
 ### Minor Changes

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

@@ -13,8 +13,8 @@ var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
@@ -32,35 +32,38 @@ var _utils2 = require("../utils");
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var tableAttributes = function tableAttributes(node, options, state, pos) {
-  // provide a width for tables when custom table width is supported
-  // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
-  // support screen size adjustments
-  var shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !(0, _utils2.isTableNested)(state, pos);
-  var style = "width: ".concat(node.attrs.isNumberColumnEnabled ? (0, _nodeWidth.getTableContainerWidth)(node) - _editorSharedStyles.akEditorTableNumberColumnWidth : (0, _nodeWidth.getTableContainerWidth)(node), "px");
-  var dataAttrsInTable = {
+var tableAttributes = function tableAttributes(node) {
+  return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
     'data-table-width': node.attrs.width
   };
-  if (shouldHaveInlineWidth) {
-    // this should be fixed because style will overwrite any existing styles, current found conflict with sticky headers
-    return _objectSpread(_objectSpread({}, dataAttrsInTable), {}, {
-      style: style
-    });
+};
+var getInlineWidth = function getInlineWidth(node, options, state, pos) {
+  // provide a width for tables when custom table width is supported
+  // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
+  // support screen size adjustments
+  var shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !(0, _utils2.isTableNested)(state, pos);
+  var widthValue = (0, _nodeWidth.getTableContainerWidth)(node);
+  if (node.attrs.isNumberColumnEnabled) {
+    widthValue -= _editorSharedStyles.akEditorTableNumberColumnWidth;
+  }
+  return shouldHaveInlineWidth ? widthValue : undefined;
+};
+var handleInlineTableWidth = function handleInlineTableWidth(table, width) {
+  if (!table || !width) {
+    return;
   }
-  return dataAttrsInTable;
+  table.style.setProperty('width', "".concat(width, "px"));
 };
 var toDOM = function toDOM(node, props) {
   var colgroup = '';
   if (props.allowColumnResizing) {
     colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _utils.generateColgroup)(node)));
   }
-  return ['table', tableAttributes(node, props.options, props.view.state, props.getPos()), colgroup, ['tbody', 0]];
+  return ['table', tableAttributes(node), colgroup, ['tbody', 0]];
 };
 var TableView = /*#__PURE__*/function (_ReactNodeView) {
   (0, _inherits2.default)(TableView, _ReactNodeView);
@@ -82,8 +85,12 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     key: "getContentDOM",
     value: function getContentDOM() {
       var rendered = _model.DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
+      var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
       if (rendered.dom) {
         this.table = rendered.dom;
+        if (tableInlineWidth) {
+          handleInlineTableWidth(this.table, tableInlineWidth);
+        }
       }
       return rendered;
     }
@@ -94,10 +101,16 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
       if (!this.table) {
         return;
       }
-      var attrs = tableAttributes(node, this.reactComponentProps.options, this.view.state, this.getPos());
+      var attrs = tableAttributes(node);
       Object.keys(attrs).forEach(function (attr) {
         _this2.table.setAttribute(attr, attrs[attr]);
       });
+
+      // handle inline style when table been resized
+      var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
+      if (tableInlineWidth) {
+        handleInlineTableWidth(this.table, tableInlineWidth);
+      }
     }
   }, {
     key: "render",

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.8.0",
+	"version": "2.8.2",
 	"sideEffects": false
 }

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

@@ -14,34 +14,38 @@ import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested } from '../utils';
 import TableComponent from './TableComponent';
-const tableAttributes = (node, options, state, pos) => {
-  // provide a width for tables when custom table width is supported
-  // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
-  // support screen size adjustments
-  const shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
-  let style = `width: ${node.attrs.isNumberColumnEnabled ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth : getTableContainerWidth(node)}px`;
-  const dataAttrsInTable = {
+const tableAttributes = node => {
+  return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
     'data-table-width': node.attrs.width
   };
-  if (shouldHaveInlineWidth) {
-    // this should be fixed because style will overwrite any existing styles, current found conflict with sticky headers
-    return {
-      ...dataAttrsInTable,
-      style
-    };
+};
+const getInlineWidth = (node, options, state, pos) => {
+  // provide a width for tables when custom table width is supported
+  // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
+  // support screen size adjustments
+  const shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
+  let widthValue = getTableContainerWidth(node);
+  if (node.attrs.isNumberColumnEnabled) {
+    widthValue -= akEditorTableNumberColumnWidth;
+  }
+  return shouldHaveInlineWidth ? widthValue : undefined;
+};
+const handleInlineTableWidth = (table, width) => {
+  if (!table || !width) {
+    return;
   }
-  return dataAttrsInTable;
+  table.style.setProperty('width', `${width}px`);
 };
 const toDOM = (node, props) => {
   let colgroup = '';
   if (props.allowColumnResizing) {
     colgroup = ['colgroup', {}, ...generateColgroup(node)];
   }
-  return ['table', tableAttributes(node, props.options, props.view.state, props.getPos()), colgroup, ['tbody', 0]];
+  return ['table', tableAttributes(node), colgroup, ['tbody', 0]];
 };
 export default class TableView extends ReactNodeView {
   constructor(props) {
@@ -56,8 +60,12 @@ export default class TableView extends ReactNodeView {
   }
   getContentDOM() {
     const rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
+    const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
     if (rendered.dom) {
       this.table = rendered.dom;
+      if (tableInlineWidth) {
+        handleInlineTableWidth(this.table, tableInlineWidth);
+      }
     }
     return rendered;
   }
@@ -65,10 +73,16 @@ export default class TableView extends ReactNodeView {
     if (!this.table) {
       return;
     }
-    const attrs = tableAttributes(node, this.reactComponentProps.options, this.view.state, this.getPos());
+    const attrs = tableAttributes(node);
     Object.keys(attrs).forEach(attr => {
       this.table.setAttribute(attr, attrs[attr]);
     });
+
+    // handle inline style when table been resized
+    const tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
+    if (tableInlineWidth) {
+      handleInlineTableWidth(this.table, tableInlineWidth);
+    }
   }
   render(props, forwardRef) {
     // TODO: ED-15663

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.8.0",
+	"version": "2.8.2",
 	"sideEffects": false
 }

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

@@ -6,12 +6,10 @@ import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
@@ -27,33 +25,38 @@ import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested } from '../utils';
 import TableComponent from './TableComponent';
-var tableAttributes = function tableAttributes(node, options, state, pos) {
-  // provide a width for tables when custom table width is supported
-  // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
-  // support screen size adjustments
-  var shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
-  var style = "width: ".concat(node.attrs.isNumberColumnEnabled ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth : getTableContainerWidth(node), "px");
-  var dataAttrsInTable = {
+var tableAttributes = function tableAttributes(node) {
+  return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
     'data-table-width': node.attrs.width
   };
-  if (shouldHaveInlineWidth) {
-    // this should be fixed because style will overwrite any existing styles, current found conflict with sticky headers
-    return _objectSpread(_objectSpread({}, dataAttrsInTable), {}, {
-      style: style
-    });
+};
+var getInlineWidth = function getInlineWidth(node, options, state, pos) {
+  // provide a width for tables when custom table width is supported
+  // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
+  // support screen size adjustments
+  var shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
+  var widthValue = getTableContainerWidth(node);
+  if (node.attrs.isNumberColumnEnabled) {
+    widthValue -= akEditorTableNumberColumnWidth;
+  }
+  return shouldHaveInlineWidth ? widthValue : undefined;
+};
+var handleInlineTableWidth = function handleInlineTableWidth(table, width) {
+  if (!table || !width) {
+    return;
   }
-  return dataAttrsInTable;
+  table.style.setProperty('width', "".concat(width, "px"));
 };
 var toDOM = function toDOM(node, props) {
   var colgroup = '';
   if (props.allowColumnResizing) {
     colgroup = ['colgroup', {}].concat(_toConsumableArray(generateColgroup(node)));
   }
-  return ['table', tableAttributes(node, props.options, props.view.state, props.getPos()), colgroup, ['tbody', 0]];
+  return ['table', tableAttributes(node), colgroup, ['tbody', 0]];
 };
 var TableView = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(TableView, _ReactNodeView);
@@ -75,8 +78,12 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     key: "getContentDOM",
     value: function getContentDOM() {
       var rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
+      var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
       if (rendered.dom) {
         this.table = rendered.dom;
+        if (tableInlineWidth) {
+          handleInlineTableWidth(this.table, tableInlineWidth);
+        }
       }
       return rendered;
     }
@@ -87,10 +94,16 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
       if (!this.table) {
         return;
       }
-      var attrs = tableAttributes(node, this.reactComponentProps.options, this.view.state, this.getPos());
+      var attrs = tableAttributes(node);
       Object.keys(attrs).forEach(function (attr) {
         _this2.table.setAttribute(attr, attrs[attr]);
       });
+
+      // handle inline style when table been resized
+      var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
+      if (tableInlineWidth) {
+        handleInlineTableWidth(this.table, tableInlineWidth);
+      }
     }
   }, {
     key: "render",

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.8.0",
+	"version": "2.8.2",
 	"sideEffects": false
 }

package/dist/types/plugins/table/pm-plugins/decorations/plugin.d.ts

@@ -4,4 +4,4 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export declare const pluginKey: PluginKey<any>;
 export declare const getDecorations: (state: EditorState) => DecorationSet;
 export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, decorationSet: DecorationSet, oldState: EditorState, newState: EditorState) => DecorationSet;
-export declare const createPlugin: () => SafePlugin<any>;
+export declare const createPlugin: () => SafePlugin<DecorationSet>;

package/dist/types/plugins/table/pm-plugins/plugin-factory.d.ts

@@ -1,3 +1 @@
-/// <reference path="../../../../../../../../typings/prosemirror.d.ts" />
-/// <reference path="../../../../../../../../typings/prosemirror-state.d.ts" />
 export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: import("../types").TablePluginState | ((state: import("prosemirror-state").EditorState) => import("../types").TablePluginState)) => import("prosemirror-state").SafeStateField<import("../types").TablePluginState>, createCommand: <A = import("../types").TablePluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => import("../types").TablePluginState;

package/dist/types/plugins/table/pm-plugins/sticky-headers/plugin-state.d.ts

@@ -1,5 +1,3 @@
-/// <reference path="../../../../../../../../../typings/prosemirror.d.ts" />
-/// <reference path="../../../../../../../../../typings/prosemirror-state.d.ts" />
 import { StickyPluginAction, StickyPluginState } from './types';
 declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: StickyPluginState | ((state: import("prosemirror-state").EditorState) => StickyPluginState)) => import("prosemirror-state").SafeStateField<StickyPluginState>, createCommand: <A = StickyPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
 export { createPluginState, createCommand };

package/dist/types/plugins/table/pm-plugins/table-resizing/plugin-factory.d.ts

@@ -1,5 +1,3 @@
-/// <reference path="../../../../../../../../../typings/prosemirror.d.ts" />
-/// <reference path="../../../../../../../../../typings/prosemirror-state.d.ts" />
 import { ColumnResizingPluginState } from '../../types';
 export declare const createCommand: <A = import("../../types").ColumnResizingPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
 export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: ColumnResizingPluginState | ((state: import("prosemirror-state").EditorState) => ColumnResizingPluginState)) => import("prosemirror-state").SafeStateField<ColumnResizingPluginState>;

package/dist/types/plugins/table/pm-plugins/table-resizing/utils/misc.d.ts

@@ -6,7 +6,7 @@ import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableOptions } from '../../../nodeviews/types';
 export declare function getLayoutSize(tableLayout: TableLayout, containerWidth: number | undefined, options: TableOptions): number;
 export declare function getDefaultLayoutMaxWidth(containerWidth?: number): number;
-export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null | undefined;
+export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null;
 export declare function currentColWidth(view: EditorView, cellPos: number, { colspan, colwidth }: CellAttributes): number;
 export declare function domCellAround(target: HTMLElement | null): HTMLElement | null;
 interface getTableMaxWidthProps {

package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/plugin.d.ts

@@ -4,4 +4,4 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export declare const pluginKey: PluginKey<any>;
 export declare const getDecorations: (state: EditorState) => DecorationSet;
 export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, decorationSet: DecorationSet, oldState: EditorState, newState: EditorState) => DecorationSet;
-export declare const createPlugin: () => SafePlugin<any>;
+export declare const createPlugin: () => SafePlugin<DecorationSet>;

package/dist/types-ts4.5/plugins/table/pm-plugins/plugin-factory.d.ts

@@ -1,3 +1 @@
-/// <reference path="../../../../../../../../typings/prosemirror.d.ts" />
-/// <reference path="../../../../../../../../typings/prosemirror-state.d.ts" />
 export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: import("../types").TablePluginState | ((state: import("prosemirror-state").EditorState) => import("../types").TablePluginState)) => import("prosemirror-state").SafeStateField<import("../types").TablePluginState>, createCommand: <A = import("../types").TablePluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => import("../types").TablePluginState;

package/dist/types-ts4.5/plugins/table/pm-plugins/sticky-headers/plugin-state.d.ts

@@ -1,5 +1,3 @@
-/// <reference path="../../../../../../../../../typings/prosemirror.d.ts" />
-/// <reference path="../../../../../../../../../typings/prosemirror-state.d.ts" />
 import { StickyPluginAction, StickyPluginState } from './types';
 declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: StickyPluginState | ((state: import("prosemirror-state").EditorState) => StickyPluginState)) => import("prosemirror-state").SafeStateField<StickyPluginState>, createCommand: <A = StickyPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
 export { createPluginState, createCommand };

package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/plugin-factory.d.ts

@@ -1,5 +1,3 @@
-/// <reference path="../../../../../../../../../typings/prosemirror.d.ts" />
-/// <reference path="../../../../../../../../../typings/prosemirror-state.d.ts" />
 import { ColumnResizingPluginState } from '../../types';
 export declare const createCommand: <A = import("../../types").ColumnResizingPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
 export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: ColumnResizingPluginState | ((state: import("prosemirror-state").EditorState) => ColumnResizingPluginState)) => import("prosemirror-state").SafeStateField<ColumnResizingPluginState>;

package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/utils/misc.d.ts

@@ -6,7 +6,7 @@ import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableOptions } from '../../../nodeviews/types';
 export declare function getLayoutSize(tableLayout: TableLayout, containerWidth: number | undefined, options: TableOptions): number;
 export declare function getDefaultLayoutMaxWidth(containerWidth?: number): number;
-export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null | undefined;
+export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null;
 export declare function currentColWidth(view: EditorView, cellPos: number, { colspan, colwidth }: CellAttributes): number;
 export declare function domCellAround(target: HTMLElement | null): HTMLElement | null;
 interface getTableMaxWidthProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,12 +27,12 @@
     "releaseModel": "continuous"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^28.0.0",
+    "@atlaskit/adf-schema": "^28.1.0",
     "@atlaskit/editor-common": "^74.42.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
-    "@atlaskit/editor-plugin-content-insertion": "^0.0.7",
-    "@atlaskit/editor-prosemirror": "1.0.2",
+    "@atlaskit/editor-plugin-content-insertion": "^0.0.8",
+    "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.6.0",
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/icon": "^21.12.0",

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

@@ -36,41 +36,45 @@ import { Props, TableOptions } from './types';
 
 type ForwardRef = (node: HTMLElement | null) => void;
 
-const tableAttributes = (
+const tableAttributes = (node: PmNode) => {
+  return {
+    'data-number-column': node.attrs.isNumberColumnEnabled,
+    'data-layout': node.attrs.layout,
+    'data-autosize': node.attrs.__autoSize,
+    'data-table-local-id': node.attrs.localId || '',
+    'data-table-width': node.attrs.width,
+  };
+};
+
+const getInlineWidth = (
   node: PmNode,
   options: Props['options'],
   state: EditorState,
   pos: number | undefined,
-) => {
+): number | undefined => {
   // provide a width for tables when custom table width is supported
   // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
   // support screen size adjustments
   const shouldHaveInlineWidth =
     options?.isTableResizingEnabled && !isTableNested(state, pos);
 
-  let style = `width: ${
-    node.attrs.isNumberColumnEnabled
-      ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth
-      : getTableContainerWidth(node)
-  }px`;
+  let widthValue = getTableContainerWidth(node);
 
-  const dataAttrsInTable = {
-    'data-number-column': node.attrs.isNumberColumnEnabled,
-    'data-layout': node.attrs.layout,
-    'data-autosize': node.attrs.__autoSize,
-    'data-table-local-id': node.attrs.localId || '',
-    'data-table-width': node.attrs.width,
-  };
-
-  if (shouldHaveInlineWidth) {
-    // this should be fixed because style will overwrite any existing styles, current found conflict with sticky headers
-    return {
-      ...dataAttrsInTable,
-      style,
-    };
+  if (node.attrs.isNumberColumnEnabled) {
+    widthValue -= akEditorTableNumberColumnWidth;
   }
 
-  return dataAttrsInTable;
+  return shouldHaveInlineWidth ? widthValue : undefined;
+};
+
+const handleInlineTableWidth = (
+  table: HTMLElement,
+  width: number | undefined,
+) => {
+  if (!table || !width) {
+    return;
+  }
+  table.style.setProperty('width', `${width}px`);
 };
 
 const toDOM = (node: PmNode, props: Props) => {
@@ -82,7 +86,7 @@ const toDOM = (node: PmNode, props: Props) => {
 
   return [
     'table',
-    tableAttributes(node, props.options, props.view.state, props.getPos()),
+    tableAttributes(node),
     colgroup,
     ['tbody', 0],
   ] as DOMOutputSpec;
@@ -123,8 +127,18 @@ export default class TableView extends ReactNodeView<Props> {
       contentDOM?: HTMLElement;
     };
 
+    const tableInlineWidth = getInlineWidth(
+      this.node,
+      this.reactComponentProps.options,
+      this.reactComponentProps.view.state,
+      this.reactComponentProps.getPos(),
+    );
+
     if (rendered.dom) {
       this.table = rendered.dom;
+      if (tableInlineWidth) {
+        handleInlineTableWidth(this.table, tableInlineWidth);
+      }
     }
 
     return rendered;
@@ -135,15 +149,22 @@ export default class TableView extends ReactNodeView<Props> {
       return;
     }
 
-    const attrs = tableAttributes(
+    const attrs = tableAttributes(node);
+    (Object.keys(attrs) as Array<keyof typeof attrs>).forEach((attr) => {
+      this.table!.setAttribute(attr, attrs[attr]);
+    });
+
+    // handle inline style when table been resized
+    const tableInlineWidth = getInlineWidth(
       node,
       (this.reactComponentProps as Props).options,
       this.view.state,
       this.getPos(),
     );
-    (Object.keys(attrs) as Array<keyof typeof attrs>).forEach((attr) => {
-      this.table!.setAttribute(attr, attrs[attr]);
-    });
+
+    if (tableInlineWidth) {
+      handleInlineTableWidth(this.table, tableInlineWidth);
+    }
   }
 
   getNode = () => {