@atlaskit/editor-plugin-table 1.5.2 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.5.2",
+	"version": "1.5.3",
 	"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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.5.2",
+	"version": "1.5.3",
 	"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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.5.2",
+	"version": "1.5.3",
 	"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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -68,7 +68,7 @@
     "@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 },

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) =>

package/src/__tests__/unit/nodeviews/cell.ts

@@ -34,6 +34,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';
 
 jest.mock('@atlaskit/editor-common/utils', () => ({
   ...jest.requireActual<Object>('@atlaskit/editor-common/utils'),
@@ -68,6 +69,7 @@ describe('table -> nodeviews -> tableCell.tsx', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add([tablePlugin, { tableOptions: { advanced: true, ...props } }])
         .add(undoRedoPlugin),
       pluginKey,

package/src/__tests__/unit/nodeviews/table.ts

@@ -24,6 +24,7 @@ import { hoverRows } from '../../../plugins/table/commands';
 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 -> nodeviews -> table.tsx', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -41,6 +42,7 @@ describe('table -> nodeviews -> table.tsx', () => {
             .add([featureFlagsPlugin, {}])
             .add([analyticsPlugin, {}])
             .add(contentInsertionPlugin)
+            .add(widthPlugin)
             .add([
               tablePlugin,
               {

package/src/__tests__/unit/pm-plugins/decorations/column-resizing.ts

@@ -35,6 +35,7 @@ import {
 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('tables: column resizing decorations', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -46,6 +47,7 @@ describe('tables: column resizing decorations', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add([
           tablePlugin,
           {

package/src/__tests__/unit/pm-plugins/decorations/plugin.ts

@@ -27,6 +27,7 @@ import tablePlugin from '../../../../plugins/table';
 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('decorations plugin', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -38,6 +39,7 @@ describe('decorations plugin', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/pm-plugins/main.ts

@@ -31,6 +31,7 @@ import {
 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('tables: main plugin', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -41,6 +42,7 @@ describe('tables: main plugin', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add(tablePlugin)
         .add(textFormattingPlugin),
       pluginKey,

package/src/__tests__/unit/pm-plugins/safari-delete-composition-text-issue-workaround.ts

@@ -16,6 +16,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/safari-delete-composition-text-issue-workaround', () => {
   let editor: any;
@@ -28,6 +29,7 @@ describe('table/safari-delete-composition-text-issue-workaround', () => {
           .add([featureFlagsPlugin, {}])
           .add([analyticsPlugin, {}])
           .add(contentInsertionPlugin)
+          .add(widthPlugin)
           .add([tablePlugin, { tableOptions: { allowColumnResizing: true } }]),
         pluginKey,
       });

package/src/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx

@@ -46,6 +46,7 @@ import {
 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('TableRowNodeView', () => {
   let tableRowNodeView: TableRowNodeView;
@@ -60,6 +61,7 @@ describe('TableRowNodeView', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add(tablePlugin),
       pluginKey,
       attachTo: document.body,
@@ -91,6 +93,7 @@ describe('TableRowNodeView', () => {
             .add([featureFlagsPlugin, {}])
             .add([analyticsPlugin, {}])
             .add(contentInsertionPlugin)
+            .add(widthPlugin)
             .add(tablePlugin),
           pluginKey,
         });

package/src/__tests__/unit/pm-plugins/table-resizing/event-handlers.ts

@@ -51,6 +51,7 @@ describe('table-resizing/event-handlers', () => {
           .add([analyticsPlugin, {}])
           .add(contentInsertionPlugin)
           .add(decorationsPlugin)
+          .add(widthPlugin)
           .add([
             tablePlugin,
             {
@@ -58,7 +59,6 @@ describe('table-resizing/event-handlers', () => {
               editorAnalyticsAPI: editorAnalyticsAPIFake,
             },
           ])
-          .add(widthPlugin)
           .add(panelPlugin),
         pluginKey,
       });

package/src/__tests__/unit/pm-plugins/table-selection-keymap.ts

@@ -32,6 +32,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 describe('table selection keymap', () => {
@@ -51,6 +52,7 @@ describe('table selection keymap', () => {
     .add(contentInsertionPlugin)
     .add(decorationsPlugin)
     .add(selectionPlugin)
+    .add(widthPlugin)
     .add([tablePlugin, { tableOptions: {}, editorSelectionAPI }])
     .add(panelPlugin)
     .add([codeBlockPlugin, { appearance: 'full-page' }]);

package/src/__tests__/unit/sort-column.ts

@@ -29,6 +29,7 @@ import { PluginKey } from 'prosemirror-state';
 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';
 
@@ -54,6 +55,7 @@ describe('table plugin', () => {
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
+    .add(widthPlugin)
     .add([tablePlugin, { tableOptions }])
     .add(textFormattingPlugin)
     .add(blockTypePlugin);

package/src/__tests__/unit/toolbar.ts

@@ -34,6 +34,7 @@ import { getNewResizeStateFromSelectedColumns } from '../../plugins/table/pm-plu
 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';
 
 jest.mock('@atlaskit/editor-tables/utils');
 jest.mock('../../plugins/table/transforms');
@@ -158,6 +159,7 @@ describe('getToolbarCellOptionsConfig', () => {
       .add([featureFlagsPlugin, {}])
       .add([analyticsPlugin, {}])
       .add(contentInsertionPlugin)
+      .add(widthPlugin)
       .add([
         tablePlugin,
         {

package/src/__tests__/unit/transforms/delete-columns.ts

@@ -24,6 +24,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 colsToRect = (cols: Array<number>, noOfRows: number): Rect => ({
   left: Math.min(...cols),
@@ -48,6 +49,7 @@ describe('table plugin -> transforms -> delete columns', () => {
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
+    .add(widthPlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/transforms/delete-rows.ts

@@ -25,6 +25,7 @@ import tablePlugin from '../../../plugins/table-plugin';
 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 rowsToRect = (rows: Array<number>, noOfColumns: number): Rect => ({
   left: 0,
@@ -48,6 +49,7 @@ describe('table plugin -> transforms -> delete rows', () => {
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
+    .add(widthPlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/transforms/merging.ts

@@ -21,6 +21,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';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -38,6 +39,7 @@ describe('table plugin -> transforms -> merge cells', () => {
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
+    .add(widthPlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/ui/ContextualMenu.tsx

@@ -20,6 +20,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';
 
 import { ContextualMenu } from '../../../plugins/table/ui/FloatingContextualMenu/ContextualMenu';
 
@@ -36,6 +37,7 @@ describe('ContextualMenu', () => {
           .add([featureFlagsPlugin, {}])
           .add([analyticsPlugin, {}])
           .add(contentInsertionPlugin)
+          .add(widthPlugin)
           .add([tablePlugin, { tableOptions: { advanced: true } }]),
       }));
     });

package/src/__tests__/unit/ui/CornerControls.tsx

@@ -22,6 +22,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('CornerControls', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -33,6 +34,7 @@ describe('CornerControls', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/ui/FloatingContextualButton.tsx

@@ -26,6 +26,7 @@ import tablePlugin from '../../../plugins/table-plugin';
 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 createEditor = createProsemirrorEditorFactory();
 let createAnalyticsEvent = jest.fn(() => ({ fire() {} } as UIAnalyticsEvent));
@@ -36,6 +37,7 @@ const editor = (doc: DocBuilder) =>
       .add([featureFlagsPlugin, {}])
       .add([analyticsPlugin, {}])
       .add(contentInsertionPlugin)
+      .add(widthPlugin)
       .add(tablePlugin),
   });
 

package/src/__tests__/unit/ui/FloatingContextualMenu.tsx

@@ -23,6 +23,7 @@ import tablePlugin from '../../../plugins/table-plugin';
 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';
 
 describe('FloatingContextualMenu', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -35,6 +36,7 @@ describe('FloatingContextualMenu', () => {
           .add([featureFlagsPlugin, {}])
           .add([analyticsPlugin, {}])
           .add(contentInsertionPlugin)
+          .add(widthPlugin)
           .add(tablePlugin),
       }));
     });

package/src/__tests__/unit/ui/RowControls.tsx

@@ -28,6 +28,7 @@ import tablePlugin from '../../../plugins/table-plugin';
 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';
 
 describe('RowControls', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -59,6 +60,7 @@ describe('RowControls', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/ui/TableFloatingControls.tsx

@@ -27,6 +27,7 @@ import { PluginKey } from 'prosemirror-state';
 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';
 
 describe('TableFloatingControls', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -35,6 +36,7 @@ describe('TableFloatingControls', () => {
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
+    .add(widthPlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/undo-redo.ts

@@ -65,8 +65,8 @@ describe('undo/redo with tables', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
-        .add([tablePlugin, { tableOptions }])
-        .add(widthPlugin),
+        .add(widthPlugin)
+        .add([tablePlugin, { tableOptions }]),
       pluginKey: tablePluginKey,
     });
   };

package/src/__tests__/unit/utils/collapse.ts

@@ -13,6 +13,7 @@ import {
 
 import tablePlugin from '../../../plugins/table';
 import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 import {
   isTableCollapsible,
@@ -31,6 +32,7 @@ describe('collapse', () => {
       .add([featureFlagsPlugin, {}])
       .add([analyticsPlugin, {}])
       .add(contentInsertionPlugin)
+      .add(widthPlugin)
       .add(tablePlugin);
 
     const finalPreset = expandInPlugins

package/src/__tests__/unit/utils/nodes.ts

@@ -21,6 +21,7 @@ import tablePlugin from '../../../plugins/table-plugin';
 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';
 
 describe('table merging logic', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -32,6 +33,7 @@ describe('table merging logic', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/utils/row-controls.ts

@@ -22,6 +22,7 @@ import tablePlugin from '../../../plugins/table-plugin';
 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';
 
@@ -42,6 +43,7 @@ describe('table plugin: utils/row-controls.js', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/utils.ts

@@ -31,6 +31,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 plugin: utils', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -38,6 +39,7 @@ describe('table plugin: utils', () => {
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
+    .add(widthPlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/plugins/table/index.tsx

@@ -70,6 +70,7 @@ import { EditorState, Transaction } from 'prosemirror-state';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 interface TablePluginOptions {
   tableOptions: PluginConfig;
@@ -94,25 +95,19 @@ const tablesPlugin: NextEditorPlugin<
     actions: {
       insertTable: InsertTableAction;
     };
-    dependencies: [typeof analyticsPlugin, typeof contentInsertionPlugin];
+    dependencies: [
+      typeof analyticsPlugin,
+      typeof contentInsertionPlugin,
+      typeof widthPlugin,
+    ];
   }
 > = (options?: TablePluginOptions, api?) => {
   const editorViewRef: Record<'current', EditorView | null> = { current: null };
   const defaultGetEditorContainerWidth: GetEditorContainerWidth = () => {
-    if (!editorViewRef.current) {
-      return {
-        width: 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 as any)['widthPlugin$'];
+    const defaultState = {
+      width: document?.body?.offsetWidth ?? 500,
+    };
+    return api?.dependencies.width.sharedState.currentState() ?? defaultState;
   };
 
   return {

package/tmp/api-report-tmp.d.ts

@@ -13,6 +13,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;
@@ -94,7 +95,11 @@ export const tablesPlugin: NextEditorPlugin<'table', {
     actions: {
         insertTable: InsertTableAction;
     };
-    dependencies: [typeof analyticsPlugin, typeof contentInsertionPlugin];
+    dependencies: [
+    typeof analyticsPlugin,
+    typeof contentInsertionPlugin,
+    typeof widthPlugin
+    ];
 }>;
 
 // (No @packageDocumentation comment for this package)