@atlaskit/editor-core 172.1.2 → 172.2.1

package/dist/esm/plugins/table/event-handlers.js

@@ -6,7 +6,7 @@ import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, remo
 import { browser } from '@atlaskit/editor-common/utils';
 import { isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '../../utils';
 import { closestElement } from '../../utils/dom';
-import { ACTION_SUBJECT, addAnalytics, EVENT_TYPE, TABLE_ACTION } from '../analytics';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverColumns, selectColumn, setEditorFocus, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
@@ -14,7 +14,6 @@ import { deleteColumns, deleteRows } from './transforms';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
 import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableControlsButton, isTableContainerOrWrapper } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
-import { getFeatureFlags } from '../feature-flags-context';
 
 var isFocusingCalendar = function isFocusingCalendar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
@@ -201,86 +200,88 @@ export var handleMouseLeave = function handleMouseLeave(view, event) {
 
   return false;
 };
-export var handleMouseMove = function handleMouseMove(view, event, tableCellOptimization, elementContentRects) {
-  if (!(event.target instanceof HTMLElement)) {
-    return false;
-  }
+export var handleMouseMove = function handleMouseMove(getEditorFeatureFlags) {
+  return function (view, event, tableCellOptimization, elementContentRects) {
+    if (!(event.target instanceof HTMLElement)) {
+      return false;
+    }
 
-  var element = event.target;
+    var element = event.target;
 
-  if (isColumnControlsDecorations(element)) {
-    var state = view.state,
-        dispatch = view.dispatch;
+    if (isColumnControlsDecorations(element)) {
+      var state = view.state,
+          dispatch = view.dispatch;
 
-    var _getPluginState3 = getPluginState(state),
-        insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
+      var _getPluginState3 = getPluginState(state),
+          insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
 
-    var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
-        _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
-        startIndex = _getColumnOrRowIndex10[0],
-        endIndex = _getColumnOrRowIndex10[1];
+      var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
+          _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
+          startIndex = _getColumnOrRowIndex10[0],
+          endIndex = _getColumnOrRowIndex10[1];
 
-    var positionColumn = getMousePositionHorizontalRelativeByElement(event, tableCellOptimization, elementContentRects) === 'right' ? endIndex : startIndex;
+      var positionColumn = getMousePositionHorizontalRelativeByElement(event, tableCellOptimization, elementContentRects) === 'right' ? endIndex : startIndex;
 
-    if (positionColumn !== insertColumnButtonIndex) {
-      return showInsertColumnButton(positionColumn)(state, dispatch);
+      if (positionColumn !== insertColumnButtonIndex) {
+        return showInsertColumnButton(positionColumn)(state, dispatch);
+      }
     }
-  }
 
-  if (isRowControlsButton(element)) {
-    var _state3 = view.state,
-        _dispatch4 = view.dispatch;
+    if (isRowControlsButton(element)) {
+      var _state3 = view.state,
+          _dispatch4 = view.dispatch;
 
-    var _getPluginState4 = getPluginState(_state3),
-        insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
+      var _getPluginState4 = getPluginState(_state3),
+          insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
 
-    var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
-        _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
-        _startIndex3 = _getColumnOrRowIndex12[0],
-        _endIndex2 = _getColumnOrRowIndex12[1];
+      var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
+          _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
+          _startIndex3 = _getColumnOrRowIndex12[0],
+          _endIndex2 = _getColumnOrRowIndex12[1];
 
-    var positionRow = getMousePositionVerticalRelativeByElement(event) === 'bottom' ? _endIndex2 : _startIndex3;
+      var positionRow = getMousePositionVerticalRelativeByElement(event) === 'bottom' ? _endIndex2 : _startIndex3;
 
-    if (positionRow !== insertRowButtonIndex) {
-      return showInsertRowButton(positionRow)(_state3, _dispatch4);
+      if (positionRow !== insertRowButtonIndex) {
+        return showInsertRowButton(positionRow)(_state3, _dispatch4);
+      }
     }
-  }
 
-  var _ref = getFeatureFlags(view.state) || {},
-      mouseMoveOptimization = _ref.mouseMoveOptimization; // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
-  // because it relies on tableCell node view that is added  via tableCellOptimization
+    var _getEditorFeatureFlag = getEditorFeatureFlags(),
+        mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization; // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
+    // because it relies on tableCell node view that is added  via tableCellOptimization
 
 
-  var useMouseMoveOptimisation = tableCellOptimization && mouseMoveOptimization;
+    var useMouseMoveOptimisation = tableCellOptimization && mouseMoveOptimization;
 
-  if (!isResizeHandleDecoration(element) && isCell(element)) {
-    var positionColumn = getMousePositionHorizontalRelativeByElement(event, useMouseMoveOptimisation, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
+    if (!isResizeHandleDecoration(element) && isCell(element)) {
+      var positionColumn = getMousePositionHorizontalRelativeByElement(event, useMouseMoveOptimisation, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
 
-    if (positionColumn !== null) {
-      var _state4 = view.state,
-          _dispatch5 = view.dispatch;
+      if (positionColumn !== null) {
+        var _state4 = view.state,
+            _dispatch5 = view.dispatch;
 
-      var _getPluginState5 = getPluginState(_state4),
-          resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex;
+        var _getPluginState5 = getPluginState(_state4),
+            resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex;
 
-      var tableCell = closestElement(element, 'td, th');
-      var cellStartPosition = view.posAtDOM(tableCell, 0);
-      var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
+        var tableCell = closestElement(element, 'td, th');
+        var cellStartPosition = view.posAtDOM(tableCell, 0);
+        var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
 
-      if (rect) {
-        var columnEndIndexTarget = positionColumn === 'left' ? rect.left : rect.right;
+        if (rect) {
+          var columnEndIndexTarget = positionColumn === 'left' ? rect.left : rect.right;
 
-        if (columnEndIndexTarget !== resizeHandleColumnIndex || !hasResizeHandler({
-          target: element,
-          columnEndIndexTarget: columnEndIndexTarget
-        })) {
-          return addResizeHandleDecorations(columnEndIndexTarget)(_state4, _dispatch5);
+          if (columnEndIndexTarget !== resizeHandleColumnIndex || !hasResizeHandler({
+            target: element,
+            columnEndIndexTarget: columnEndIndexTarget
+          })) {
+            return addResizeHandleDecorations(columnEndIndexTarget)(_state4, _dispatch5);
+          }
         }
       }
     }
-  }
 
-  return false;
+    return false;
+  };
 };
 export function handleTripleClick(view, pos) {
   var state = view.state,
@@ -305,7 +306,7 @@ export function handleTripleClick(view, pos) {
 
   return false;
 }
-export var handleCut = function handleCut(oldTr, oldState, newState) {
+export var handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI) {
   var oldSelection = oldState.tr.selection;
   var tr = newState.tr;
 
@@ -327,7 +328,7 @@ export var handleCut = function handleCut(oldTr, oldState, newState) {
             totalColumnCount = _getSelectedCellInfo.totalColumnCount; // Reassigning to make it more obvious and consistent
 
 
-        tr = addAnalytics(newState, tr, {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
           action: TABLE_ACTION.CUT,
           actionSubject: ACTION_SUBJECT.TABLE,
           actionSubjectId: null,
@@ -339,7 +340,7 @@ export var handleCut = function handleCut(oldTr, oldState, newState) {
             totalColumnCount: totalColumnCount
           },
           eventType: EVENT_TYPE.TRACK
-        }); // Need this check again since we are overriding the tr in previous statement
+        })(tr); // Need this check again since we are overriding the tr in previous statement
 
         if (tr.selection instanceof CellSelection) {
           var isTableSelected = tr.selection.isRowSelection() && tr.selection.isColSelection();

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

@@ -5,8 +5,8 @@ import { createTable } from '@atlaskit/editor-tables/utils';
 import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import { toggleTable, tooltip } from '../../keymaps';
 import WithPluginState from '../../ui/WithPluginState';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../analytics';
-import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconTable } from '../quick-insert/assets';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
@@ -28,6 +28,18 @@ import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
 import { ErrorBoundary } from '../../ui/ErrorBoundary';
 
+var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
+  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 defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
+  return {};
+};
+
 var tablesPlugin = function tablesPlugin(options) {
   return {
     name: 'table',
@@ -59,9 +71,11 @@ var tablesPlugin = function tablesPlugin(options) {
               fullWidthEnabled = _ref2.fullWidthEnabled,
               wasFullWidthEnabled = _ref2.wasFullWidthEnabled,
               breakoutEnabled = _ref2.breakoutEnabled,
-              tableOptions = _ref2.tableOptions;
+              tableOptions = _ref2.tableOptions,
+              editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
+              getEditorFeatureFlags = _ref2.getEditorFeatureFlags;
 
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), (options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI);
         }
       }, {
         name: 'tablePMColResizing',
@@ -70,14 +84,17 @@ var tablesPlugin = function tablesPlugin(options) {
 
           var _ref4 = options || {},
               fullWidthEnabled = _ref4.fullWidthEnabled,
-              tableOptions = _ref4.tableOptions;
+              tableOptions = _ref4.tableOptions,
+              editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
+              getEditorFeatureFlags = _ref4.getEditorFeatureFlags,
+              getEditorContainerWidth = _ref4.getEditorContainerWidth;
 
           var _pluginConfig = pluginConfig(tableOptions),
               allowColumnResizing = _pluginConfig.allowColumnResizing;
 
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }) : undefined;
+          }, getEditorContainerWidth || defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI) : undefined;
         }
       }, {
         name: 'tableEditing',
@@ -89,12 +106,12 @@ var tablesPlugin = function tablesPlugin(options) {
       {
         name: 'tableKeymap',
         plugin: function plugin() {
-          return keymapPlugin();
+          return keymapPlugin((options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI);
         }
       }, {
         name: 'tableSelectionKeymap',
         plugin: function plugin() {
-          return tableSelectionKeymapPlugin();
+          return tableSelectionKeymapPlugin(options === null || options === void 0 ? void 0 : options.editorSelectionAPI);
         }
       }, {
         name: 'tableEditing',
@@ -106,7 +123,9 @@ var tablesPlugin = function tablesPlugin(options) {
         plugin: function plugin(_ref5) {
           var dispatch = _ref5.dispatch,
               eventDispatcher = _ref5.eventDispatcher;
-          return options && options.tableOptions.stickyHeaders ? createStickyHeadersPlugin(dispatch, eventDispatcher) : undefined;
+          return options && options.tableOptions.stickyHeaders ? createStickyHeadersPlugin(dispatch, eventDispatcher, function () {
+            return [];
+          }, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined;
         }
       }, {
         name: 'tableLocalId',
@@ -202,14 +221,18 @@ var tablesPlugin = function tablesPlugin(options) {
             boundariesElement: popupsBoundariesElement,
             scrollableElement: popupsScrollableElement,
             hasStickyHeaders: stickyHeader && stickyHeader.sticky,
-            dispatchAnalyticsEvent: dispatchAnalyticsEvent
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
+            getEditorContainerWidth: (options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth
           }), /*#__PURE__*/React.createElement(FloatingContextualMenu, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
             targetCellPosition: targetCellPosition,
             isOpen: Boolean(isContextualMenuOpen),
-            pluginConfig: pluginConfig
+            pluginConfig: pluginConfig,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
+            getEditorContainerWidth: (options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth
           }), allowControls && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,
@@ -218,7 +241,8 @@ var tablesPlugin = function tablesPlugin(options) {
             boundariesElement: popupsBoundariesElement,
             scrollableElement: popupsScrollableElement,
             stickyHeaders: stickyHeader,
-            isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled
+            isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
           }), isLayoutSupported(state) && options && options.breakoutEnabled && /*#__PURE__*/React.createElement(LayoutButton, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
@@ -227,14 +251,31 @@ var tablesPlugin = function tablesPlugin(options) {
             targetRef: tableWrapperTarget,
             layout: layout,
             isResizing: !!resizingPluginState && !!resizingPluginState.dragging,
-            stickyHeader: stickyHeader
+            stickyHeader: stickyHeader,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
           }));
         }
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref10) {
-        var formatMessage = _ref10.formatMessage;
+      // TODO: ED-14676 This is not the final API design
+      // For now, we are using this on (insert-api/api.ts) but we may create a proper place for it
+      createNodeHandler: function createNodeHandler(_ref10) {
+        var nodeName = _ref10.nodeName,
+            schema = _ref10.schema;
+
+        // An EditorPlugin may manage more than one node.
+        if (nodeName !== 'table') {
+          return null;
+        }
+
+        var table = createTable({
+          schema: schema
+        });
+        return table;
+      },
+      quickInsert: function quickInsert(_ref11) {
+        var formatMessage = _ref11.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),
@@ -246,10 +287,12 @@ var tablesPlugin = function tablesPlugin(options) {
             return /*#__PURE__*/React.createElement(IconTable, null);
           },
           action: function action(insert, state) {
+            var _options$editorAnalyt;
+
             var tr = insert(createTable({
               schema: state.schema
             }));
-            return addAnalytics(state, tr, {
+            options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: ACTION_SUBJECT_ID.TABLE,
@@ -257,11 +300,12 @@ var tablesPlugin = function tablesPlugin(options) {
                 inputMethod: INPUT_METHOD.QUICK_INSERT
               },
               eventType: EVENT_TYPE.TRACK
-            });
+            })(tr);
+            return tr;
           }
         }];
       },
-      floatingToolbar: getToolbarConfig(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: getToolbarConfig((options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

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

@@ -22,7 +22,7 @@ import { calcTableWidth, tableMarginSides } from '@atlaskit/editor-common/styles
 import { browser } from '@atlaskit/editor-common/utils';
 import { akEditorMobileBreakoutPoint, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { isValidPosition } from '../../../utils';
-import { getParentNodeWidth } from '../../../utils/node-width';
+import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { parsePx } from '../../../utils/dom';
 import { autoSizeTable } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -34,7 +34,6 @@ import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
 import { updateOverflowShadows } from './update-overflow-shadows';
-import { getFeatureFlags } from '../../feature-flags-context';
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 var isIE11 = browser.ie_version === 11;
@@ -78,8 +77,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onStickyState", function (state) {
-      var _ref = getFeatureFlags(_this.props.view.state) || {},
-          tableOverflowShadowsOptimization = _ref.tableOverflowShadowsOptimization;
+      var _this$props$getEditor = _this.props.getEditorFeatureFlags(),
+          tableOverflowShadowsOptimization = _this$props$getEditor.tableOverflowShadowsOptimization;
 
       var pos = _this.props.getPos();
 
@@ -134,8 +133,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      var _ref2 = getFeatureFlags(_this.props.view.state) || {},
-          tableOverflowShadowsOptimization = _ref2.tableOverflowShadowsOptimization;
+      var _this$props$getEditor2 = _this.props.getEditorFeatureFlags(),
+          tableOverflowShadowsOptimization = _this$props$getEditor2.tableOverflowShadowsOptimization;
 
       if (!tableOverflowShadowsOptimization) {
         _this.updateShadows();
@@ -321,7 +320,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     var _options = props.options,
         _containerWidth = props.containerWidth,
         _getNode = props.getNode,
-        _view = props.view;
+        getEditorFeatureFlags = props.getEditorFeatureFlags;
     _this.node = _getNode();
     _this.containerWidth = _containerWidth; // store table size using previous full-width mode so can detect if it has changed
 
@@ -339,8 +338,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       });
     }
 
-    var _ref3 = getFeatureFlags(_view.state) || {},
-        initialRenderOptimization = _ref3.initialRenderOptimization;
+    var _getEditorFeatureFlag = getEditorFeatureFlags(),
+        initialRenderOptimization = _getEditorFeatureFlag.initialRenderOptimization;
 
     if (!initialRenderOptimization) {
       // @see ED-7945
@@ -410,13 +409,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this$props8 = this.props,
-          view = _this$props8.view,
           getNode = _this$props8.getNode,
           isMediaFullscreen = _this$props8.isMediaFullscreen,
           allowColumnResizing = _this$props8.allowColumnResizing;
 
-      var _ref4 = getFeatureFlags(view.state) || {},
-          tableOverflowShadowsOptimization = _ref4.tableOverflowShadowsOptimization;
+      var _this$props$getEditor3 = this.props.getEditorFeatureFlags(),
+          tableOverflowShadowsOptimization = _this$props$getEditor3.tableOverflowShadowsOptimization;
 
       if (!tableOverflowShadowsOptimization) {
         this.updateShadows();
@@ -447,9 +445,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var previousTable = this.node;
 
         if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || tablesHaveDifferentNoOfColumns(currentTable, previousTable)) {
-          var _view2 = this.props.view;
+          var view = this.props.view;
           recreateResizeColsByNode(this.table, currentTable);
-          updateControls(_view2.state);
+          updateControls(this.props.getEditorFeatureFlags)(view.state);
         }
 
         this.handleTableResizingDebounced();
@@ -465,7 +463,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (this.wrapper && parent) {
         var rightShadows = parent.querySelectorAll(".".concat(ClassName.TABLE_RIGHT_SHADOW));
         var leftShadows = parent.querySelectorAll(".".concat(ClassName.TABLE_LEFT_SHADOW));
-        updateOverflowShadows(this.props.view.state, this.wrapper, this.table, rightShadows, leftShadows);
+        updateOverflowShadows(this.props.getEditorFeatureFlags)(this.props.view.state, this.wrapper, this.table, rightShadows, leftShadows);
       }
     }
   }, {
@@ -496,11 +494,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           isInDanger = _getPluginState.isInDanger,
           hoveredRows = _getPluginState.hoveredRows;
 
-      var _ref5 = getFeatureFlags(view.state) || {},
-          stickyHeadersOptimization = _ref5.stickyHeadersOptimization,
-          initialRenderOptimization = _ref5.initialRenderOptimization,
-          tableRenderOptimization = _ref5.tableRenderOptimization,
-          tableOverflowShadowsOptimization = _ref5.tableOverflowShadowsOptimization;
+      var _this$props$getEditor4 = this.props.getEditorFeatureFlags(),
+          stickyHeadersOptimization = _this$props$getEditor4.stickyHeadersOptimization,
+          initialRenderOptimization = _this$props$getEditor4.initialRenderOptimization,
+          tableRenderOptimization = _this$props$getEditor4.tableRenderOptimization,
+          tableOverflowShadowsOptimization = _this$props$getEditor4.tableOverflowShadowsOptimization;
 
       var tableRef = this.table || undefined;
       var isResizing = !!tableResizingPluginState && !!tableResizingPluginState.dragging;
@@ -526,7 +524,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         selection: view.state.selection,
         tableHeight: tableHeight,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-        stickyHeader: this.state.stickyHeader
+        stickyHeader: this.state.stickyHeader,
+        getEditorFeatureFlags: this.props.getEditorFeatureFlags
       }));
       var shadowPadding = allowControls && (!isLoading || initialRenderOptimization) && tableActive ? -tableToolbarSize : tableMarginSides;
       var shadowStyle = tableOverflowShadowsOptimization ? memoizeOne(function (visible) {

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

@@ -18,7 +18,6 @@ import { DOMSerializer } from 'prosemirror-model';
 import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/plugin-key';
 import ReactNodeView from '../../../nodeviews/ReactNodeView';
 import WithPluginState from '../../../ui/WithPluginState';
-import { pluginKey as widthPluginKey } from '../../width';
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey } from '../pm-plugins/plugin-key';
@@ -26,7 +25,6 @@ import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizin
 import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import TableComponent from './TableComponent';
-import { getFeatureFlags } from '../../feature-flags-context';
 import { EmitterEvents } from '../../../extensibility';
 
 var tableAttributes = function tableAttributes(node) {
@@ -102,10 +100,19 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     value: function render(props, forwardRef) {
       var _this3 = this;
 
+      // TODO: ED-15663
+      // Please, do not copy or use this kind of code below
+      // @ts-ignore
+      var fakePluginKey = {
+        key: 'widthPlugin$',
+        getState: function getState(state) {
+          return state['widthPlugin$'];
+        }
+      };
       return /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
-          containerWidth: widthPluginKey,
           pluginState: pluginKey,
+          widthPlugin: fakePluginKey,
           tableResizingPluginState: tableResizingPluginKey,
           mediaState: mediaPluginKey
         },
@@ -113,9 +120,9 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
         render: function render(pluginStates) {
           var tableResizingPluginState = pluginStates.tableResizingPluginState,
               pluginState = pluginStates.pluginState,
-              containerWidth = pluginStates.containerWidth,
               mediaState = pluginStates.mediaState;
           var tableActive = props.getPos() === pluginState.tablePos;
+          var containerWidth = props.getEditorContainerWidth();
           return /*#__PURE__*/React.createElement(TableComponent, {
             view: props.view,
             allowColumnResizing: props.allowColumnResizing,
@@ -131,7 +138,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             tableResizingPluginState: tableResizingPluginState,
             getNode: _this3.getNode,
             containerWidth: containerWidth,
-            contentDOM: forwardRef
+            contentDOM: forwardRef,
+            getEditorFeatureFlags: props.getEditorFeatureFlags
           });
         }
       });
@@ -201,15 +209,15 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
 }(ReactNodeView);
 
 export { TableView as default };
-export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options) {
+export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags) {
   var _getPluginState2 = getPluginState(view.state),
       pluginConfig = _getPluginState2.pluginConfig;
 
   var _getPluginConfig = getPluginConfig(pluginConfig),
       allowColumnResizing = _getPluginConfig.allowColumnResizing;
 
-  var _ref = getFeatureFlags(view.state) || {},
-      tableRenderOptimization = _ref.tableRenderOptimization;
+  var _getEditorFeatureFlag = getEditorFeatureFlags(),
+      tableRenderOptimization = _getEditorFeatureFlag.tableRenderOptimization;
 
   return new TableView({
     node: node,
@@ -219,6 +227,8 @@ export var createTableView = function createTableView(node, view, getPos, portal
     eventDispatcher: eventDispatcher,
     getPos: getPos,
     options: options,
-    tableRenderOptimization: tableRenderOptimization
+    tableRenderOptimization: tableRenderOptimization,
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
   }).init();
 };

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

@@ -4,10 +4,9 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import uuid from 'uuid';
 import { DOMSerializer } from 'prosemirror-model';
 import { getCellDomAttrs, getCellAttrs } from '@atlaskit/adf-schema';
-import { getFeatureFlags } from '../../feature-flags-context';
 
 var TableCellNodeView = /*#__PURE__*/function () {
-  function TableCellNodeView(node, view, getPos, observer) {
+  function TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer) {
     _classCallCheck(this, TableCellNodeView);
 
     this.view = view;
@@ -21,8 +20,8 @@ var TableCellNodeView = /*#__PURE__*/function () {
     this.dom = dom;
     this.contentDOM = contentDOM;
 
-    var _ref = getFeatureFlags(view.state) || {},
-        mouseMoveOptimization = _ref.mouseMoveOptimization;
+    var _getEditorFeatureFlag = getEditorFeatureFlags(),
+        mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization;
 
     if (mouseMoveOptimization && observer) {
       this.contentDOM.id = uuid();
@@ -58,10 +57,10 @@ var TableCellNodeView = /*#__PURE__*/function () {
       } // added + changed attributes
 
 
-      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-            key = _ref3[0],
-            value = _ref3[1];
+      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            key = _ref2[0],
+            value = _ref2[1];
 
         return attrs[key] !== value;
       });
@@ -70,10 +69,10 @@ var TableCellNodeView = /*#__PURE__*/function () {
       });
 
       if (addedAttrs.length || removedAttrs.length) {
-        addedAttrs.forEach(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2),
-              key = _ref5[0],
-              value = _ref5[1];
+        addedAttrs.forEach(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+              key = _ref4[0],
+              value = _ref4[1];
 
           return _this.dom.setAttribute(key, value || '');
         });