@atlaskit/editor-plugin-table 1.5.2 → 1.5.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 1.5.4
+
+### Patch Changes
+
+- [`00d7488cf36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/00d7488cf36) - [ux] The table shadow sentinels when rendered out of view would sometimes return a 0 root bounds object in the intersection observer. This became an issue because we ignore intersection entities with 0 root bounds. This fixes the right shadow not appear on tablessimply by removing the root bounds check from the observer
+
+## 1.5.3
+
+### Patch Changes
+
+- [`b38a0fcd924`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b38a0fcd924) - Use NextEditorPlugin API for width plugin in tables.
+
 ## 1.5.2
 
 ### Patch Changes

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

@@ -43,18 +43,11 @@ var tablesPlugin = function tablesPlugin(options, api) {
     current: null
   };
   var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
-    if (!editorViewRef.current) {
-      var _document, _document$body;
-      return {
-        width: ((_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) || 500
-      };
-    }
-    var state = editorViewRef.current.state;
-
-    // TODO: ED-15663
-    // Please, do not copy or use this kind of code below
-    // @ts-ignore
-    return state['widthPlugin$'];
+    var _document$body$offset, _document, _document$body, _api$dependencies$wid;
+    var defaultState = {
+      width: (_document$body$offset = (_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
+    };
+    return (_api$dependencies$wid = api === null || api === void 0 ? void 0 : api.dependencies.width.sharedState.currentState()) !== null && _api$dependencies$wid !== void 0 ? _api$dependencies$wid : defaultState;
   };
   return {
     name: 'table',

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

@@ -28,15 +28,11 @@ var OverflowShadowsObserver = /*#__PURE__*/function () {
       }
       if (!_this.tableIntersectionObserver) {
         var intersectonOnbserverCallback = function intersectonOnbserverCallback(entry) {
-          var _entry$rootBounds, _entry$rootBounds2;
-          if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
-            return;
-          }
           if (entry.target !== _this.leftShadowSentinel && entry.target !== _this.rightShadowSentinel) {
             return;
           }
           _this.updateStickyShadowsHeightIfChanged();
-          _this.checkIntersectionEvent(entry, _this.leftShadowSentinel === entry.target ? _types.ShadowEvent.SHOW_BEFORE_SHADOW : _types.ShadowEvent.SHOW_AFTER_SHADOW);
+          _this.updateShadowState(_this.leftShadowSentinel === entry.target ? _types.ShadowEvent.SHOW_BEFORE_SHADOW : _types.ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
         };
         _this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
           entries.forEach(function (entry) {
@@ -50,17 +46,6 @@ var OverflowShadowsObserver = /*#__PURE__*/function () {
         return;
       }
     });
-    (0, _defineProperty2.default)(this, "checkIntersectionEvent", function (entry, shadowKey) {
-      if (
-      // If it's in full view, don't show shadow.
-      entry.isIntersecting && entry.intersectionRatio === 1) {
-        _this.updateShadowState(shadowKey, false);
-      } else if (
-      // If it's in partial view, show a shadow
-      entry.intersectionRatio < 1) {
-        _this.updateShadowState(shadowKey, true);
-      }
-    });
     (0, _defineProperty2.default)(this, "observeShadowSentinels", function (isSticky) {
       var _this$table, _this$table2;
       _this.isSticky = !!isSticky;

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

@@ -59,10 +59,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (_this.state[shadowKey] === value) {
         return;
       }
-      // need this check to satisfy types for the setState argument
-      if (shadowKey === _types.ShadowEvent.SHOW_BEFORE_SHADOW) {
-        return _this.setState((0, _defineProperty3.default)({}, shadowKey, value));
-      }
       _this.setState((0, _defineProperty3.default)({}, shadowKey, value));
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "createShadowSentinels", function (table) {
@@ -123,11 +119,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!tableOverflowShadowsOptimization) {
         _this.updateShadows();
       }
-      if (_this.wrapper.scrollLeft === 0) {
-        _this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false));
-      } else {
-        _this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, true));
-      }
+      _this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, _this.wrapper.scrollLeft !== 0));
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizing", function () {
       var _this$props = _this.props,

package/dist/cjs/version.json

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

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

@@ -34,22 +34,11 @@ const tablesPlugin = (options, api) => {
     current: null
   };
   const defaultGetEditorContainerWidth = () => {
-    if (!editorViewRef.current) {
-      var _document, _document$body;
-      return {
-        width: ((_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) || 500
-      };
-    }
-    const {
-      current: {
-        state
-      }
-    } = editorViewRef;
-
-    // TODO: ED-15663
-    // Please, do not copy or use this kind of code below
-    // @ts-ignore
-    return state['widthPlugin$'];
+    var _document$body$offset, _document, _document$body, _api$dependencies$wid;
+    const defaultState = {
+      width: (_document$body$offset = (_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
+    };
+    return (_api$dependencies$wid = api === null || api === void 0 ? void 0 : api.dependencies.width.sharedState.currentState()) !== null && _api$dependencies$wid !== void 0 ? _api$dependencies$wid : defaultState;
   };
   return {
     name: 'table',

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

@@ -17,15 +17,11 @@ export class OverflowShadowsObserver {
       }
       if (!this.tableIntersectionObserver) {
         const intersectonOnbserverCallback = entry => {
-          var _entry$rootBounds, _entry$rootBounds2;
-          if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
-            return;
-          }
           if (entry.target !== this.leftShadowSentinel && entry.target !== this.rightShadowSentinel) {
             return;
           }
           this.updateStickyShadowsHeightIfChanged();
-          this.checkIntersectionEvent(entry, this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW);
+          this.updateShadowState(this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
         };
         this.tableIntersectionObserver = new IntersectionObserver((entries, _) => {
           entries.forEach(entry => intersectonOnbserverCallback(entry));
@@ -37,17 +33,6 @@ export class OverflowShadowsObserver {
         return;
       }
     });
-    _defineProperty(this, "checkIntersectionEvent", (entry, shadowKey) => {
-      if (
-      // If it's in full view, don't show shadow.
-      entry.isIntersecting && entry.intersectionRatio === 1) {
-        this.updateShadowState(shadowKey, false);
-      } else if (
-      // If it's in partial view, show a shadow
-      entry.intersectionRatio < 1) {
-        this.updateShadowState(shadowKey, true);
-      }
-    });
     _defineProperty(this, "observeShadowSentinels", isSticky => {
       var _this$table, _this$table2;
       this.isSticky = !!isSticky;

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

@@ -39,12 +39,6 @@ class TableComponent extends React.Component {
       if (this.state[shadowKey] === value) {
         return;
       }
-      // need this check to satisfy types for the setState argument
-      if (shadowKey === ShadowEvent.SHOW_BEFORE_SHADOW) {
-        return this.setState({
-          [shadowKey]: value
-        });
-      }
       this.setState({
         [shadowKey]: value
       });
@@ -113,15 +107,9 @@ class TableComponent extends React.Component {
       if (!tableOverflowShadowsOptimization) {
         this.updateShadows();
       }
-      if (this.wrapper.scrollLeft === 0) {
-        this.setState({
-          [ShadowEvent.SHOW_BEFORE_SHADOW]: false
-        });
-      } else {
-        this.setState({
-          [ShadowEvent.SHOW_BEFORE_SHADOW]: true
-        });
-      }
+      this.setState({
+        [ShadowEvent.SHOW_BEFORE_SHADOW]: this.wrapper.scrollLeft !== 0
+      });
     });
     _defineProperty(this, "handleTableResizing", () => {
       const {

package/dist/es2019/version.json

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

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

@@ -36,18 +36,11 @@ var tablesPlugin = function tablesPlugin(options, api) {
     current: null
   };
   var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
-    if (!editorViewRef.current) {
-      var _document, _document$body;
-      return {
-        width: ((_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) || 500
-      };
-    }
-    var state = editorViewRef.current.state;
-
-    // TODO: ED-15663
-    // Please, do not copy or use this kind of code below
-    // @ts-ignore
-    return state['widthPlugin$'];
+    var _document$body$offset, _document, _document$body, _api$dependencies$wid;
+    var defaultState = {
+      width: (_document$body$offset = (_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
+    };
+    return (_api$dependencies$wid = api === null || api === void 0 ? void 0 : api.dependencies.width.sharedState.currentState()) !== null && _api$dependencies$wid !== void 0 ? _api$dependencies$wid : defaultState;
   };
   return {
     name: 'table',

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

@@ -21,15 +21,11 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
       }
       if (!_this.tableIntersectionObserver) {
         var intersectonOnbserverCallback = function intersectonOnbserverCallback(entry) {
-          var _entry$rootBounds, _entry$rootBounds2;
-          if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
-            return;
-          }
           if (entry.target !== _this.leftShadowSentinel && entry.target !== _this.rightShadowSentinel) {
             return;
           }
           _this.updateStickyShadowsHeightIfChanged();
-          _this.checkIntersectionEvent(entry, _this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW);
+          _this.updateShadowState(_this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
         };
         _this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
           entries.forEach(function (entry) {
@@ -43,17 +39,6 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
         return;
       }
     });
-    _defineProperty(this, "checkIntersectionEvent", function (entry, shadowKey) {
-      if (
-      // If it's in full view, don't show shadow.
-      entry.isIntersecting && entry.intersectionRatio === 1) {
-        _this.updateShadowState(shadowKey, false);
-      } else if (
-      // If it's in partial view, show a shadow
-      entry.intersectionRatio < 1) {
-        _this.updateShadowState(shadowKey, true);
-      }
-    });
     _defineProperty(this, "observeShadowSentinels", function (isSticky) {
       var _this$table, _this$table2;
       _this.isSticky = !!isSticky;

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

@@ -54,10 +54,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (_this.state[shadowKey] === value) {
         return;
       }
-      // need this check to satisfy types for the setState argument
-      if (shadowKey === ShadowEvent.SHOW_BEFORE_SHADOW) {
-        return _this.setState(_defineProperty({}, shadowKey, value));
-      }
       _this.setState(_defineProperty({}, shadowKey, value));
     });
     _defineProperty(_assertThisInitialized(_this), "createShadowSentinels", function (table) {
@@ -118,11 +114,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!tableOverflowShadowsOptimization) {
         _this.updateShadows();
       }
-      if (_this.wrapper.scrollLeft === 0) {
-        _this.setState(_defineProperty({}, ShadowEvent.SHOW_BEFORE_SHADOW, false));
-      } else {
-        _this.setState(_defineProperty({}, ShadowEvent.SHOW_BEFORE_SHADOW, true));
-      }
+      _this.setState(_defineProperty({}, ShadowEvent.SHOW_BEFORE_SHADOW, _this.wrapper.scrollLeft !== 0));
     });
     _defineProperty(_assertThisInitialized(_this), "handleTableResizing", function () {
       var _this$props = _this.props,

package/dist/esm/version.json

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

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

@@ -6,6 +6,7 @@ import { PluginConfig } from './types';
 import type { GetEditorFeatureFlags, NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 interface TablePluginOptions {
     tableOptions: PluginConfig;
     breakoutEnabled?: boolean;
@@ -22,6 +23,10 @@ declare const tablesPlugin: NextEditorPlugin<'table', {
     actions: {
         insertTable: InsertTableAction;
     };
-    dependencies: [typeof analyticsPlugin, typeof contentInsertionPlugin];
+    dependencies: [
+        typeof analyticsPlugin,
+        typeof contentInsertionPlugin,
+        typeof widthPlugin
+    ];
 }>;
 export default tablesPlugin;

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

@@ -11,7 +11,6 @@ export declare class OverflowShadowsObserver {
     private stickyRowHeight;
     constructor(updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void, table: HTMLElement, wrapper: HTMLDivElement);
     private init;
-    private checkIntersectionEvent;
     private updateStickyShadowsHeightIfChanged;
     private getStickyCell;
     observeShadowSentinels: (isSticky?: boolean) => void;

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

@@ -6,6 +6,7 @@ import { PluginConfig } from './types';
 import type { GetEditorFeatureFlags, NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 interface TablePluginOptions {
     tableOptions: PluginConfig;
     breakoutEnabled?: boolean;
@@ -24,7 +25,8 @@ declare const tablesPlugin: NextEditorPlugin<'table', {
     };
     dependencies: [
         typeof analyticsPlugin,
-        typeof contentInsertionPlugin
+        typeof contentInsertionPlugin,
+        typeof widthPlugin
     ];
 }>;
 export default tablesPlugin;

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

@@ -11,7 +11,6 @@ export declare class OverflowShadowsObserver {
     private stickyRowHeight;
     constructor(updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void, table: HTMLElement, wrapper: HTMLDivElement);
     private init;
-    private checkIntersectionEvent;
     private updateStickyShadowsHeightIfChanged;
     private getStickyCell;
     observeShadowSentinels: (isSticky?: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -63,12 +63,12 @@
   "devDependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.7.0",
-    "@atlaskit/editor-core": "^185.1.0",
+    "@atlaskit/editor-core": "^185.2.0",
     "@atlaskit/editor-plugin-decorations": "^0.1.0",
     "@atlaskit/editor-plugin-feature-flags": "^0.1.0",
     "@atlaskit/editor-plugin-grid": "^0.1.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
-    "@atlaskit/editor-test-helpers": "^18.5.0",
+    "@atlaskit/editor-test-helpers": "^18.6.0",
     "@atlaskit/link-provider": "^1.6.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/media-integration-test-helpers": "^3.0.0",

package/report.api.md

@@ -24,6 +24,7 @@ import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import { TableLayout } from '@atlaskit/adf-schema';
+import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 // @public (undocumented)
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
@@ -107,7 +108,11 @@ export const tablesPlugin: NextEditorPlugin<
     actions: {
       insertTable: InsertTableAction;
     };
-    dependencies: [typeof analyticsPlugin, typeof contentInsertionPlugin];
+    dependencies: [
+      typeof analyticsPlugin,
+      typeof contentInsertionPlugin,
+      typeof widthPlugin,
+    ];
   }
 >;
 

package/src/__tests__/unit/analytics.ts

@@ -46,6 +46,7 @@ import quickInsertPlugin from '@atlaskit/editor-core/src/plugins/quick-insert';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 const defaultTableDoc = doc(
   table()(
@@ -86,6 +87,7 @@ describe('Table analytic events', () => {
         .add(typeAheadPlugin)
         .add(contentInsertionPlugin)
         .add(quickInsertPlugin)
+        .add(widthPlugin)
         .add([
           tablePlugin,
           { tableOptions, editorAnalyticsAPI: editorAnalyticsAPIFake },
@@ -316,7 +318,6 @@ describe('Table analytic events', () => {
 
       setColorWithAnalytics(editorAnalyticsAPIFake)(
         INPUT_METHOD.CONTEXT_MENU,
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
         B50,
       )(editorView.state, editorView.dispatch);
     });

package/src/__tests__/unit/collab.ts

@@ -42,8 +42,8 @@ describe('Tables with Collab editing', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
-        .add([tablePlugin, { tableOptions }])
-        .add(widthPlugin),
+        .add(widthPlugin)
+        .add([tablePlugin, { tableOptions }]),
       pluginKey: tablePluginKey,
     });
   };

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

@@ -23,6 +23,7 @@ import { goToNextCell } from '../../../plugins/table/commands/go-to-next-cell';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -37,6 +38,7 @@ describe('table plugin: goToNextCell', () => {
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
+    .add(widthPlugin)
     .add(tablePlugin);
   const editor = (doc: DocBuilder) =>
     createEditor<TablePluginState, PluginKey>({

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

@@ -44,13 +44,13 @@ describe('table plugin: insert', () => {
       .add([featureFlagsPlugin, {}])
       .add([analyticsPlugin, {}])
       .add(contentInsertionPlugin)
+      .add(widthPlugin)
       .add([
         tablePlugin,
         {
           tableOptions: {},
         },
-      ])
-      .add(widthPlugin);
+      ]);
 
     const editor = (doc: DocBuilder) =>
       createEditor<TablePluginState, PluginKey>({

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

@@ -31,6 +31,7 @@ import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 describe('table plugin: commands', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -40,6 +41,7 @@ describe('table plugin: commands', () => {
     .add(decorationsPlugin)
     .add(panelPlugin)
     .add(contentInsertionPlugin)
+    .add(widthPlugin)
     .add([
       tablePlugin,
       {

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

@@ -28,6 +28,7 @@ import datePlugin from '@atlaskit/editor-core/src/plugins/date';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -47,6 +48,7 @@ describe('Sort Table', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add([tablePlugin, { tableOptions: { allowHeaderRow: true } }]),
       doc: doc(
         table()(
@@ -77,6 +79,7 @@ describe('Sort Table', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add([tablePlugin, { tableOptions: { allowHeaderRow: true } }]),
       doc: doc(
         table()(tr(td({})(p('2{<>}'))), tr(td({})(p('5'))), tr(td({})(p('4')))),
@@ -101,6 +104,7 @@ describe('Sort Table', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add([tablePlugin, { tableOptions: { allowHeaderRow: true } }]),
       doc: doc(
         table()(tr(td({})(p('2{<>}'))), tr(td({})(p('5'))), tr(td({})(p('4')))),
@@ -129,6 +133,7 @@ describe('Sort Table', () => {
           .add([analyticsPlugin, {}])
           .add(contentInsertionPlugin)
           .add(editorDisabledPlugin)
+          .add(widthPlugin)
           .add([tablePlugin, { tableOptions: { allowHeaderRow: true } }])
           .add([statusPlugin, { menuDisabled: false }])
           .add(mentionsPlugin)

package/src/__tests__/unit/copy-paste.ts

@@ -46,6 +46,7 @@ import undoRedoPlugin from '@atlaskit/editor-core/src/plugins/undo-redo';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 const array = (...args: any): Node[] => args.map((i: any) => i(defaultSchema));
@@ -107,6 +108,7 @@ describe('table plugin', () => {
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
+    .add(widthPlugin)
     .add([tablePlugin, { tableOptions }])
     .add(undoRedoPlugin);
 

package/src/__tests__/unit/event-handlers/index.ts

@@ -20,6 +20,7 @@ import { PluginKey } from 'prosemirror-state';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 describe('event-handlers', () => {
   let editor: any;
@@ -32,6 +33,7 @@ describe('event-handlers', () => {
           .add([featureFlagsPlugin, {}])
           .add([analyticsPlugin, {}])
           .add(contentInsertionPlugin)
+          .add(widthPlugin)
           .add([tablePlugin, { tableOptions: { allowColumnResizing: false } }]);
         editor = (doc: DocBuilder) =>
           createEditor<TablePluginState, PluginKey>({
@@ -63,6 +65,7 @@ describe('event-handlers', () => {
           .add([featureFlagsPlugin, {}])
           .add([analyticsPlugin, {}])
           .add(contentInsertionPlugin)
+          .add(widthPlugin)
           .add([tablePlugin, { tableOptions: { allowColumnResizing: false } }]);
         editor = (doc: DocBuilder) =>
           createEditor<TablePluginState, PluginKey>({

package/src/__tests__/unit/event-handlers.ts

@@ -51,6 +51,7 @@ describe('table plugin: decorations', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/fix-tables.ts

@@ -19,6 +19,7 @@ import tablePlugin from '../../plugins/table-plugin';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -43,6 +44,7 @@ describe('fix tables', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add([tablePlugin, { tableOptions }]),
       pluginKey: tablePluginKey,
     });

package/src/__tests__/unit/handlers.ts

@@ -21,6 +21,7 @@ import tablePlugin from '../../plugins/table-plugin';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 describe('table action handlers', () => {
   let editor: any;
@@ -32,6 +33,7 @@ describe('table action handlers', () => {
       .add([featureFlagsPlugin, {}])
       .add([analyticsPlugin, {}])
       .add(contentInsertionPlugin)
+      .add(widthPlugin)
       .add(tablePlugin);
 
     editor = (doc: DocBuilder) =>

package/src/__tests__/unit/hover-selection.ts

@@ -34,6 +34,7 @@ import { PluginKey } from 'prosemirror-state';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 describe('table hover selection plugin', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -41,6 +42,7 @@ describe('table hover selection plugin', () => {
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
+    .add(widthPlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>