@atlaskit/editor-core 172.1.1 → 172.2.0

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

@@ -25,7 +25,7 @@ var _utils3 = require("../../utils");
 
 var _dom = require("../../utils/dom");
 
-var _analytics = require("../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 
 var _commands = require("./commands");
 
@@ -41,8 +41,6 @@ var _utils4 = require("./utils");
 
 var _getAllowAddColumnCustomStep = require("./utils/get-allow-add-column-custom-step");
 
-var _featureFlagsContext = require("../feature-flags-context");
-
 var isFocusingCalendar = function isFocusingCalendar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
 };
@@ -250,86 +248,88 @@ var handleMouseLeave = function handleMouseLeave(view, event) {
 
 exports.handleMouseLeave = handleMouseLeave;
 
-var handleMouseMove = function handleMouseMove(view, event, tableCellOptimization, elementContentRects) {
-  if (!(event.target instanceof HTMLElement)) {
-    return false;
-  }
+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 ((0, _utils4.isColumnControlsDecorations)(element)) {
-    var state = view.state,
-        dispatch = view.dispatch;
+    if ((0, _utils4.isColumnControlsDecorations)(element)) {
+      var state = view.state,
+          dispatch = view.dispatch;
 
-    var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
-        insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
+      var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
+          insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
 
-    var _getColumnOrRowIndex9 = (0, _utils4.getColumnOrRowIndex)(element),
-        _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
-        startIndex = _getColumnOrRowIndex10[0],
-        endIndex = _getColumnOrRowIndex10[1];
+      var _getColumnOrRowIndex9 = (0, _utils4.getColumnOrRowIndex)(element),
+          _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
+          startIndex = _getColumnOrRowIndex10[0],
+          endIndex = _getColumnOrRowIndex10[1];
 
-    var positionColumn = (0, _utils4.getMousePositionHorizontalRelativeByElement)(event, tableCellOptimization, elementContentRects) === 'right' ? endIndex : startIndex;
+      var positionColumn = (0, _utils4.getMousePositionHorizontalRelativeByElement)(event, tableCellOptimization, elementContentRects) === 'right' ? endIndex : startIndex;
 
-    if (positionColumn !== insertColumnButtonIndex) {
-      return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
+      if (positionColumn !== insertColumnButtonIndex) {
+        return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
+      }
     }
-  }
 
-  if ((0, _utils4.isRowControlsButton)(element)) {
-    var _state3 = view.state,
-        _dispatch4 = view.dispatch;
+    if ((0, _utils4.isRowControlsButton)(element)) {
+      var _state3 = view.state,
+          _dispatch4 = view.dispatch;
 
-    var _getPluginState4 = (0, _pluginFactory.getPluginState)(_state3),
-        insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
+      var _getPluginState4 = (0, _pluginFactory.getPluginState)(_state3),
+          insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
 
-    var _getColumnOrRowIndex11 = (0, _utils4.getColumnOrRowIndex)(element),
-        _getColumnOrRowIndex12 = (0, _slicedToArray2.default)(_getColumnOrRowIndex11, 2),
-        _startIndex3 = _getColumnOrRowIndex12[0],
-        _endIndex2 = _getColumnOrRowIndex12[1];
+      var _getColumnOrRowIndex11 = (0, _utils4.getColumnOrRowIndex)(element),
+          _getColumnOrRowIndex12 = (0, _slicedToArray2.default)(_getColumnOrRowIndex11, 2),
+          _startIndex3 = _getColumnOrRowIndex12[0],
+          _endIndex2 = _getColumnOrRowIndex12[1];
 
-    var positionRow = (0, _utils4.getMousePositionVerticalRelativeByElement)(event) === 'bottom' ? _endIndex2 : _startIndex3;
+      var positionRow = (0, _utils4.getMousePositionVerticalRelativeByElement)(event) === 'bottom' ? _endIndex2 : _startIndex3;
 
-    if (positionRow !== insertRowButtonIndex) {
-      return (0, _commands.showInsertRowButton)(positionRow)(_state3, _dispatch4);
+      if (positionRow !== insertRowButtonIndex) {
+        return (0, _commands.showInsertRowButton)(positionRow)(_state3, _dispatch4);
+      }
     }
-  }
 
-  var _ref = (0, _featureFlagsContext.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 (!(0, _utils4.isResizeHandleDecoration)(element) && (0, _utils4.isCell)(element)) {
-    var positionColumn = (0, _utils4.getMousePositionHorizontalRelativeByElement)(event, useMouseMoveOptimisation, elementContentRects, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
+    if (!(0, _utils4.isResizeHandleDecoration)(element) && (0, _utils4.isCell)(element)) {
+      var positionColumn = (0, _utils4.getMousePositionHorizontalRelativeByElement)(event, useMouseMoveOptimisation, elementContentRects, _types.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 = (0, _pluginFactory.getPluginState)(_state4),
-          resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex;
+        var _getPluginState5 = (0, _pluginFactory.getPluginState)(_state4),
+            resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex;
 
-      var tableCell = (0, _dom.closestElement)(element, 'td, th');
-      var cellStartPosition = view.posAtDOM(tableCell, 0);
-      var rect = (0, _utils.findCellRectClosestToPos)(_state4.doc.resolve(cellStartPosition));
+        var tableCell = (0, _dom.closestElement)(element, 'td, th');
+        var cellStartPosition = view.posAtDOM(tableCell, 0);
+        var rect = (0, _utils.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 || !(0, _utils4.hasResizeHandler)({
-          target: element,
-          columnEndIndexTarget: columnEndIndexTarget
-        })) {
-          return (0, _commands.addResizeHandleDecorations)(columnEndIndexTarget)(_state4, _dispatch5);
+          if (columnEndIndexTarget !== resizeHandleColumnIndex || !(0, _utils4.hasResizeHandler)({
+            target: element,
+            columnEndIndexTarget: columnEndIndexTarget
+          })) {
+            return (0, _commands.addResizeHandleDecorations)(columnEndIndexTarget)(_state4, _dispatch5);
+          }
         }
       }
     }
-  }
 
-  return false;
+    return false;
+  };
 };
 
 exports.handleMouseMove = handleMouseMove;
@@ -359,7 +359,7 @@ function handleTripleClick(view, pos) {
   return false;
 }
 
-var handleCut = function handleCut(oldTr, oldState, newState) {
+var handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI) {
   var oldSelection = oldState.tr.selection;
   var tr = newState.tr;
 
@@ -381,7 +381,7 @@ var handleCut = function handleCut(oldTr, oldState, newState) {
             totalColumnCount = _getSelectedCellInfo.totalColumnCount; // Reassigning to make it more obvious and consistent
 
 
-        tr = (0, _analytics.addAnalytics)(newState, tr, {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
           action: _analytics.TABLE_ACTION.CUT,
           actionSubject: _analytics.ACTION_SUBJECT.TABLE,
           actionSubjectId: null,
@@ -393,7 +393,7 @@ var handleCut = function handleCut(oldTr, oldState, newState) {
             totalColumnCount: totalColumnCount
           },
           eventType: _analytics.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.CellSelection) {
           var isTableSelected = tr.selection.isRowSelection() && tr.selection.isColSelection();

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

@@ -21,9 +21,9 @@ var _keymaps = require("../../keymaps");
 
 var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
 
-var _analytics = require("../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 
-var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
+var _messages = require("@atlaskit/editor-common/messages");
 
 var _assets = require("../quick-insert/assets");
 
@@ -65,6 +65,18 @@ var _utils3 = require("./utils");
 
 var _ErrorBoundary = require("../../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',
@@ -96,9 +108,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 (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled);
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), (options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI);
         }
       }, {
         name: 'tablePMColResizing',
@@ -107,14 +121,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 = (0, _createPluginConfig.pluginConfig)(tableOptions),
               allowColumnResizing = _pluginConfig.allowColumnResizing;
 
           return allowColumnResizing ? (0, _tableResizing.createPlugin)(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }) : undefined;
+          }, getEditorContainerWidth || defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI) : undefined;
         }
       }, {
         name: 'tableEditing',
@@ -126,12 +143,12 @@ var tablesPlugin = function tablesPlugin(options) {
       {
         name: 'tableKeymap',
         plugin: function plugin() {
-          return (0, _keymap.keymapPlugin)();
+          return (0, _keymap.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 (0, _tableSelectionKeymap.tableSelectionKeymapPlugin)();
+          return (0, _tableSelectionKeymap.tableSelectionKeymapPlugin)(options === null || options === void 0 ? void 0 : options.editorSelectionAPI);
         }
       }, {
         name: 'tableEditing',
@@ -143,7 +160,9 @@ var tablesPlugin = function tablesPlugin(options) {
         plugin: function plugin(_ref5) {
           var dispatch = _ref5.dispatch,
               eventDispatcher = _ref5.eventDispatcher;
-          return options && options.tableOptions.stickyHeaders ? (0, _stickyHeaders.createPlugin)(dispatch, eventDispatcher) : undefined;
+          return options && options.tableOptions.stickyHeaders ? (0, _stickyHeaders.createPlugin)(dispatch, eventDispatcher, function () {
+            return [];
+          }, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined;
         }
       }, {
         name: 'tableLocalId',
@@ -239,14 +258,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.default.createElement(_FloatingContextualMenu.default, {
             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.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,
             selection: editorView.state.selection,
@@ -255,7 +278,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
           }), (0, _utils3.isLayoutSupported)(state) && options && options.breakoutEnabled && /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
@@ -264,18 +288,35 @@ 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 = (0, _utils2.createTable)({
+          schema: schema
+        });
+        return table;
+      },
+      quickInsert: function quickInsert(_ref11) {
+        var formatMessage = _ref11.formatMessage;
         return [{
           id: 'table',
-          title: formatMessage(_messages.messages.table),
-          description: formatMessage(_messages.messages.tableDescription),
+          title: formatMessage(_messages.toolbarInsertBlockMessages.table),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.tableDescription),
           keywords: ['cell', 'table'],
           priority: 600,
           keyshortcut: (0, _keymaps.tooltip)(_keymaps.toggleTable),
@@ -283,10 +324,12 @@ var tablesPlugin = function tablesPlugin(options) {
             return /*#__PURE__*/_react.default.createElement(_assets.IconTable, null);
           },
           action: function action(insert, state) {
+            var _options$editorAnalyt;
+
             var tr = insert((0, _utils2.createTable)({
               schema: state.schema
             }));
-            return (0, _analytics.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: _analytics.ACTION.INSERTED,
               actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
@@ -294,11 +337,12 @@ var tablesPlugin = function tablesPlugin(options) {
                 inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
               },
               eventType: _analytics.EVENT_TYPE.TRACK
-            });
+            })(tr);
+            return tr;
           }
         }];
       },
-      floatingToolbar: (0, _toolbar.getToolbarConfig)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: (0, _toolbar.getToolbarConfig)((options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

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

@@ -37,7 +37,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _utils3 = require("../../../utils");
 
-var _nodeWidth = require("../../../utils/node-width");
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
 
 var _dom = require("../../../utils/dom");
 
@@ -61,8 +61,6 @@ var _utils5 = require("../utils");
 
 var _updateOverflowShadows = require("./update-overflow-shadows");
 
-var _featureFlagsContext = require("../../feature-flags-context");
-
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
 var _OverflowShadowsObserver = require("./OverflowShadowsObserver");
@@ -112,8 +110,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       _this.setState((0, _defineProperty3.default)({}, shadowKey, value));
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "onStickyState", function (state) {
-      var _ref = (0, _featureFlagsContext.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();
 
@@ -165,8 +163,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      var _ref2 = (0, _featureFlagsContext.getFeatureFlags)(_this.props.view.state) || {},
-          tableOverflowShadowsOptimization = _ref2.tableOverflowShadowsOptimization;
+      var _this$props$getEditor2 = _this.props.getEditorFeatureFlags(),
+          tableOverflowShadowsOptimization = _this$props$getEditor2.tableOverflowShadowsOptimization;
 
       if (!tableOverflowShadowsOptimization) {
         _this.updateShadows();
@@ -338,7 +336,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
 
@@ -356,8 +354,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       });
     }
 
-    var _ref3 = (0, _featureFlagsContext.getFeatureFlags)(_view.state) || {},
-        initialRenderOptimization = _ref3.initialRenderOptimization;
+    var _getEditorFeatureFlag = getEditorFeatureFlags(),
+        initialRenderOptimization = _getEditorFeatureFlag.initialRenderOptimization;
 
     if (!initialRenderOptimization) {
       // @see ED-7945
@@ -427,13 +425,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 = (0, _featureFlagsContext.getFeatureFlags)(view.state) || {},
-          tableOverflowShadowsOptimization = _ref4.tableOverflowShadowsOptimization;
+      var _this$props$getEditor3 = this.props.getEditorFeatureFlags(),
+          tableOverflowShadowsOptimization = _this$props$getEditor3.tableOverflowShadowsOptimization;
 
       if (!tableOverflowShadowsOptimization) {
         this.updateShadows();
@@ -464,9 +461,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var previousTable = this.node;
 
         if ((0, _utils5.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
-          var _view2 = this.props.view;
+          var view = this.props.view;
           (0, _utils4.insertColgroupFromNode)(this.table, currentTable);
-          (0, _dom2.updateControls)(_view2.state);
+          (0, _dom2.updateControls)(this.props.getEditorFeatureFlags)(view.state);
         }
 
         this.handleTableResizingDebounced();
@@ -482,7 +479,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (this.wrapper && parent) {
         var rightShadows = parent.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
         var leftShadows = parent.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
-        (0, _updateOverflowShadows.updateOverflowShadows)(this.props.view.state, this.wrapper, this.table, rightShadows, leftShadows);
+        (0, _updateOverflowShadows.updateOverflowShadows)(this.props.getEditorFeatureFlags)(this.props.view.state, this.wrapper, this.table, rightShadows, leftShadows);
       }
     }
   }, {
@@ -513,11 +510,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           isInDanger = _getPluginState.isInDanger,
           hoveredRows = _getPluginState.hoveredRows;
 
-      var _ref5 = (0, _featureFlagsContext.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;
@@ -544,7 +541,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 ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;

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

@@ -37,8 +37,6 @@ var _ReactNodeView2 = _interopRequireDefault(require("../../../nodeviews/ReactNo
 
 var _WithPluginState = _interopRequireDefault(require("../../../ui/WithPluginState"));
 
-var _width = require("../../width");
-
 var _createPluginConfig = require("../create-plugin-config");
 
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -53,8 +51,6 @@ var _tableMap = require("@atlaskit/editor-tables/table-map");
 
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
 
-var _featureFlagsContext = require("../../feature-flags-context");
-
 var _extensibility = require("../../../extensibility");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -130,10 +126,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.default.createElement(_WithPluginState.default, {
         plugins: {
-          containerWidth: _width.pluginKey,
           pluginState: _pluginKey2.pluginKey,
+          widthPlugin: fakePluginKey,
           tableResizingPluginState: _tableResizing.pluginKey,
           mediaState: _pluginKey.stateKey
         },
@@ -141,9 +146,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.default.createElement(_TableComponent.default, {
             view: props.view,
             allowColumnResizing: props.allowColumnResizing,
@@ -159,7 +164,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             tableResizingPluginState: tableResizingPluginState,
             getNode: _this3.getNode,
             containerWidth: containerWidth,
-            contentDOM: forwardRef
+            contentDOM: forwardRef,
+            getEditorFeatureFlags: props.getEditorFeatureFlags
           });
         }
       });
@@ -229,15 +235,15 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
 
 exports.default = TableView;
 
-var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options) {
+var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags) {
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
       pluginConfig = _getPluginState2.pluginConfig;
 
   var _getPluginConfig = (0, _createPluginConfig.pluginConfig)(pluginConfig),
       allowColumnResizing = _getPluginConfig.allowColumnResizing;
 
-  var _ref = (0, _featureFlagsContext.getFeatureFlags)(view.state) || {},
-      tableRenderOptimization = _ref.tableRenderOptimization;
+  var _getEditorFeatureFlag = getEditorFeatureFlags(),
+      tableRenderOptimization = _getEditorFeatureFlag.tableRenderOptimization;
 
   return new TableView({
     node: node,
@@ -247,7 +253,9 @@ var createTableView = function createTableView(node, view, getPos, portalProvide
     eventDispatcher: eventDispatcher,
     getPos: getPos,
     options: options,
-    tableRenderOptimization: tableRenderOptimization
+    tableRenderOptimization: tableRenderOptimization,
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
   }).init();
 };
 

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

@@ -19,10 +19,8 @@ var _prosemirrorModel = require("prosemirror-model");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _featureFlagsContext = require("../../feature-flags-context");
-
 var TableCellNodeView = /*#__PURE__*/function () {
-  function TableCellNodeView(node, view, getPos, observer) {
+  function TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer) {
     (0, _classCallCheck2.default)(this, TableCellNodeView);
     this.view = view;
     this.node = node;
@@ -35,8 +33,8 @@ var TableCellNodeView = /*#__PURE__*/function () {
     this.dom = dom;
     this.contentDOM = contentDOM;
 
-    var _ref = (0, _featureFlagsContext.getFeatureFlags)(view.state) || {},
-        mouseMoveOptimization = _ref.mouseMoveOptimization;
+    var _getEditorFeatureFlag = getEditorFeatureFlags(),
+        mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization;
 
     if (mouseMoveOptimization && observer) {
       this.contentDOM.id = (0, _uuid.default)();
@@ -72,10 +70,10 @@ var TableCellNodeView = /*#__PURE__*/function () {
       } // added + changed attributes
 
 
-      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-            key = _ref3[0],
-            value = _ref3[1];
+      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref) {
+        var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+            key = _ref2[0],
+            value = _ref2[1];
 
         return attrs[key] !== value;
       });
@@ -84,10 +82,10 @@ var TableCellNodeView = /*#__PURE__*/function () {
       });
 
       if (addedAttrs.length || removedAttrs.length) {
-        addedAttrs.forEach(function (_ref4) {
-          var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
-              key = _ref5[0],
-              value = _ref5[1];
+        addedAttrs.forEach(function (_ref3) {
+          var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+              key = _ref4[0],
+              value = _ref4[1];
 
           return _this.dom.setAttribute(key, value || '');
         });