@atlaskit/editor-plugin-table 1.4.1 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-table
 
+## 1.5.0
+
+### Minor Changes
+
+- [`20809d41658`](https://bitbucket.org/atlassian/atlassian-frontend/commits/20809d41658) - Added feature flag `platform.editor.custom-table-width` which toggles the new table experience
+
+### Patch Changes
+
+- [`1549c2e6dda`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1549c2e6dda) - Extract width plugin from `editor-core` to separate `editor-plugin-width` package.
+- Updated dependencies
+
 ## 1.4.1
 
 ### Patch Changes

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

@@ -34,6 +34,7 @@ var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertB
 var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
 var _utils3 = require("./utils");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
@@ -77,9 +78,10 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }
     },
     nodes: function nodes() {
+      var tableNode = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? _adfSchema.tableWithCustomWidth : _adfSchema.table;
       return [{
         name: 'table',
-        node: _adfSchema.table
+        node: tableNode
       }, {
         name: 'tableHeader',
         node: _adfSchema.tableHeader

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

@@ -16,6 +16,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _utils = require("@atlaskit/editor-tables/utils");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils2 = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -481,6 +482,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           visibility: visible ? 'visible' : 'hidden'
         };
       }) : NOOP;
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
+        // new table experience code goes here
+        // return <Resizer>...
+      }
       return /*#__PURE__*/_react.default.createElement("div", {
         style: {
           width: tableContainerWidth,

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

@@ -33,7 +33,8 @@ var tableAttributes = function tableAttributes(node) {
     '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-local-id': node.attrs.localId || '',
+    'data-table-width': node.attrs.width
   };
 };
 var toDOM = function toDOM(node, props) {

package/dist/cjs/version.json

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

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

@@ -3,7 +3,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser } from '@atlaskit/editor-common/utils';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { createTable } from '@atlaskit/editor-tables/utils';
-import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import { table, tableCell, tableHeader, tableRow, tableWithCustomWidth } from '@atlaskit/adf-schema';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
@@ -27,6 +27,7 @@ import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const defaultGetEditorFeatureFlags = () => ({});
 const tablesPlugin = (options, api) => {
   const editorViewRef = {
@@ -70,9 +71,10 @@ const tablesPlugin = (options, api) => {
       }
     },
     nodes() {
+      const tableNode = getBooleanFF('platform.editor.custom-table-width') ? tableWithCustomWidth : table;
       return [{
         name: 'table',
-        node: table
+        node: tableNode
       }, {
         name: 'tableHeader',
         node: tableHeader

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

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import rafSchedule from 'raf-schd';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { calcTableWidth, tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorMobileBreakoutPoint, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
@@ -484,6 +485,10 @@ class TableComponent extends React.Component {
     const shadowStyle = tableOverflowShadowsOptimization ? memoizeOne(visible => ({
       visibility: visible ? 'visible' : 'hidden'
     })) : NOOP;
+    if (getBooleanFF('platform.editor.custom-table-width')) {
+      // new table experience code goes here
+      // return <Resizer>...
+    }
     return /*#__PURE__*/React.createElement("div", {
       style: {
         width: tableContainerWidth,

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

@@ -15,7 +15,8 @@ const tableAttributes = node => {
     '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-local-id': node.attrs.localId || '',
+    'data-table-width': node.attrs.width
   };
 };
 const toDOM = (node, props) => {

package/dist/es2019/version.json

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

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

@@ -3,7 +3,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser } from '@atlaskit/editor-common/utils';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { createTable } from '@atlaskit/editor-tables/utils';
-import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import { table, tableCell, tableHeader, tableRow, tableWithCustomWidth } from '@atlaskit/adf-schema';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
@@ -27,6 +27,7 @@ import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
@@ -70,9 +71,10 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }
     },
     nodes: function nodes() {
+      var tableNode = getBooleanFF('platform.editor.custom-table-width') ? tableWithCustomWidth : table;
       return [{
         name: 'table',
-        node: table
+        node: tableNode
       }, {
         name: 'tableHeader',
         node: tableHeader

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

@@ -14,6 +14,7 @@ import classnames from 'classnames';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import rafSchedule from 'raf-schd';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { calcTableWidth, tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorMobileBreakoutPoint, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
@@ -476,6 +477,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           visibility: visible ? 'visible' : 'hidden'
         };
       }) : NOOP;
+      if (getBooleanFF('platform.editor.custom-table-width')) {
+        // new table experience code goes here
+        // return <Resizer>...
+      }
       return /*#__PURE__*/React.createElement("div", {
         style: {
           width: tableContainerWidth,

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

@@ -26,7 +26,8 @@ var tableAttributes = function tableAttributes(node) {
     '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-local-id': node.attrs.localId || '',
+    'data-table-width': node.attrs.width
   };
 };
 var toDOM = function toDOM(node, props) {

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,14 +26,15 @@
     "releaseModel": "scheduled"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^25.6.0",
-    "@atlaskit/editor-common": "^74.1.0",
+    "@atlaskit/adf-schema": "^25.7.0",
+    "@atlaskit/editor-common": "^74.2.0",
     "@atlaskit/editor-palette": "1.4.2",
     "@atlaskit/editor-plugin-analytics": "^0.0.1",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.1",
     "@atlaskit/editor-shared-styles": "^2.4.0",
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.4.0",
     "@atlaskit/tooltip": "^17.8.0",
@@ -62,9 +63,11 @@
   "devDependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.7.0",
-    "@atlaskit/editor-core": "^183.1.0",
+    "@atlaskit/editor-core": "^184.0.0",
     "@atlaskit/editor-plugin-feature-flags": "^0.1.0",
-    "@atlaskit/editor-test-helpers": "^18.3.0",
+    "@atlaskit/editor-plugin-grid": "^0.1.0",
+    "@atlaskit/editor-plugin-width": "^0.0.1",
+    "@atlaskit/editor-test-helpers": "^18.4.0",
     "@atlaskit/link-provider": "^1.6.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
@@ -98,5 +101,10 @@
         "emotion"
       ]
     }
+  },
+  "platform-feature-flags": {
+    "platform.editor.custom-table-width": {
+      "type": "boolean"
+    }
   }
 }

package/src/__tests__/integration/auto-size.ts

@@ -41,7 +41,9 @@ async function loadAndRetrieveDocument(
 
 BrowserTestCase(
   'Doesnt scale past default',
-  { skip: ['*'] },
+  {
+    skip: ['*'],
+  },
   async (client: any, testName: string) => {
     const page = await goToEditorTestingWDExample(
       client,
@@ -54,7 +56,9 @@ BrowserTestCase(
 
 BrowserTestCase(
   'Scales to wide',
-  { skip: ['*'] },
+  {
+    skip: ['*'],
+  },
   async (client: any, testName: string) => {
     const page = await goToEditorTestingWDExample(
       client,

package/src/__tests__/integration/sticky-header.ts

@@ -51,12 +51,9 @@ const insertColumn = async (page: any, cell: 'first' | 'last') => {
   await page.click(insertButton);
 };
 
-// FIXME: This test was automatically skipped due to failure on 01/04/2023: https://product-fabric.atlassian.net/browse/ED-17364
 BrowserTestCase(
   'Sticky header should correctly toggle on and off',
-  {
-    skip: ['*'],
-  },
+  {},
   async (client: any, testName: string) => {
     const page = await goToEditorTestingWDExample(
       client,

package/src/__tests__/unit/collab.ts

@@ -18,7 +18,7 @@ import {
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import tablePlugin from '../../plugins/table-plugin';
-import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';

package/src/__tests__/unit/color-picker.ts

@@ -26,6 +26,7 @@ import { getToolbarConfig } from '../../plugins/table/toolbar';
 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 formatMessage: (t: { id: string }) => string = (message) =>
   `${message.id}`;
@@ -46,6 +47,7 @@ describe('color picker', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add(dataConsumerPlugin)
         .add(extensionPlugin)
         .add(tablePlugin),

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

@@ -20,7 +20,7 @@ import tablePlugin from '../../../plugins/table/index';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { TablePluginState } from '../../../plugins/table/types';
 import { addColumnAt } from '../../../plugins/table/commands/insert';
-import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';

package/src/__tests__/unit/commands.ts

@@ -59,8 +59,8 @@ import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
 import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
 import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';
 import mediaPlugin from '@atlaskit/editor-core/src/plugins/media';
-import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
-import gridPlugin from '@atlaskit/editor-core/src/plugins/grid';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import textFormattingPlugin from '@atlaskit/editor-core/src/plugins/text-formatting';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';

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

@@ -35,8 +35,8 @@ import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import { TableCssClassName as ClassName } from '../../plugins/table/types';
 import tablePlugin from '../../plugins/table-plugin';
 import mediaPlugin from '@atlaskit/editor-core/src/plugins/media';
-import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
-import gridPlugin from '@atlaskit/editor-core/src/plugins/grid';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';

package/src/__tests__/unit/get-toolbar-config.ts

@@ -31,6 +31,7 @@ import type {
 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 formatMessage: (t: { id: string }) => string = (message) =>
   `${message.id}`;
@@ -79,6 +80,7 @@ describe('getToolbarConfig', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add(dataConsumerPlugin)
         .add(extensionPlugin)
         .add(tablePlugin),

package/src/__tests__/unit/index.ts

@@ -57,8 +57,8 @@ import deprecatedAnalyticsPlugin from '@atlaskit/editor-core/src/plugins/analyti
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import mediaPlugin from '@atlaskit/editor-core/src/plugins/media';
 import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
-import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
-import gridPlugin from '@atlaskit/editor-core/src/plugins/grid';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import { insertMediaAsMediaSingle } from '@atlaskit/editor-core/src/plugins/media/utils/media-single';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getPluginState } from '../../plugins/table/pm-plugins/plugin-factory';

package/src/__tests__/unit/keymap.ts

@@ -36,7 +36,7 @@ import {
 import { uuid } from '@atlaskit/adf-schema';
 import { uuid as tablesUuid } from '@atlaskit/editor-tables';
 
-import gridPlugin from '@atlaskit/editor-core/src/plugins/grid';
+import { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
 import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
 import tasksDecisionsPlugin from '@atlaskit/editor-core/src/plugins/tasks-and-decisions';
@@ -58,7 +58,7 @@ import statusPlugin from '@atlaskit/editor-core/src/plugins/status';
 import tablePlugin from '../../plugins/table';
 import { TablePluginState } from '../../plugins/table/types';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
-import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import editorDisabledPlugin from '@atlaskit/editor-core/src/plugins/editor-disabled';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';

package/src/__tests__/unit/layout.ts

@@ -38,6 +38,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('table toolbar', () => {
   const tableOptions = {
@@ -52,6 +53,7 @@ describe('table toolbar', () => {
     .add([featureFlagsPlugin, {}])
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
+    .add(widthPlugin)
     .add([tablePlugin, { tableOptions }])
     .add(expandPlugin)
     .add(extensionPlugin)

package/src/__tests__/unit/pm-plugins/main-with-allow-collapse.ts

@@ -24,6 +24,7 @@ import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';
 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('tables: main plugin with allowCollapse: true', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -34,6 +35,7 @@ describe('tables: main plugin with allowCollapse: true', () => {
         .add([featureFlagsPlugin, {}])
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
+        .add(widthPlugin)
         .add(tablePlugin)
         .add(expandPlugin)
         .add(extensionPlugin),

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

@@ -24,7 +24,7 @@ import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
 import { TextSelection, NodeSelection, EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
-import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
   akEditorFullPageMaxWidth,

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

@@ -24,7 +24,7 @@ import { colsToRect } from '../../plugins/table/utils/table';
 import sendKeyToPm from '@atlaskit/editor-test-helpers/send-key-to-pm';
 import clone from 'lodash/clone';
 import tablePlugin from '../../plugins/table';
-import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';

package/src/plugins/table/index.tsx

@@ -7,7 +7,13 @@ import { browser } from '@atlaskit/editor-common/utils';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { createTable } from '@atlaskit/editor-tables/utils';
 
-import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import {
+  table,
+  tableCell,
+  tableHeader,
+  tableRow,
+  tableWithCustomWidth,
+} from '@atlaskit/adf-schema';
 
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 
@@ -63,6 +69,7 @@ import type {
 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';
 
 interface TablePluginOptions {
   tableOptions: PluginConfig;
@@ -135,8 +142,12 @@ const tablesPlugin: NextEditorPlugin<
     },
 
     nodes() {
+      const tableNode = getBooleanFF('platform.editor.custom-table-width')
+        ? tableWithCustomWidth
+        : table;
+
       return [
-        { name: 'table', node: table },
+        { name: 'table', node: tableNode },
         { name: 'tableHeader', node: tableHeader },
         { name: 'tableRow', node: tableRow },
         { name: 'tableCell', node: tableCell },

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

@@ -5,6 +5,7 @@ import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import rafSchedule from 'raf-schd';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   calcTableWidth,
@@ -393,6 +394,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         )
       : NOOP;
 
+    if (getBooleanFF('platform.editor.custom-table-width')) {
+      // new table experience code goes here
+      // return <Resizer>...
+    }
+
     return (
       <div
         style={{

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

@@ -38,6 +38,7 @@ const tableAttributes = (node: PmNode) => {
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
+    'data-table-width': node.attrs.width,
   };
 };