@atlaskit/editor-core 172.1.2 → 172.2.0

package/dist/es2019/plugins/table/commands-with-analytics.js

@@ -1,7 +1,7 @@
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findCellClosestToPos, findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
-import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_BREAKOUT, withAnalytics } from '../analytics';
+import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_BREAKOUT } from '@atlaskit/editor-common/analytics';
 import { clearMultipleCells } from './commands/clear';
 import { wrapTableInExpand } from './commands/collapse';
 import { insertColumn, insertRow } from './commands/insert';
@@ -13,6 +13,7 @@ import { distributeColumnsWidths } from './pm-plugins/table-resizing/commands';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { deleteColumns, deleteRows, mergeCells } from './transforms';
 import { checkIfNumberColumnEnabled, getSelectedCellInfo, getSelectedTableInfo } from './utils';
+import { withEditorAnalyticsAPI } from './utils/analytics';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 const TABLE_BREAKOUT_NAME_MAPPING = {
   default: TABLE_BREAKOUT.NORMAL,
@@ -20,7 +21,7 @@ const TABLE_BREAKOUT_NAME_MAPPING = {
   'full-width': TABLE_BREAKOUT.FULL_WIDTH
 }; // #region Analytics wrappers
 
-export const emptyMultipleCellsWithAnalytics = (inputMethod, targetCellPosition) => withAnalytics(({
+export const emptyMultipleCellsWithAnalytics = editorAnalyticsAPI => (inputMethod, targetCellPosition) => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -42,8 +43,8 @@ export const emptyMultipleCellsWithAnalytics = (inputMethod, targetCellPosition)
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(clearMultipleCells(targetCellPosition));
-export const mergeCellsWithAnalytics = () => withAnalytics(({
+})(editorAnalyticsAPI)(clearMultipleCells(targetCellPosition));
+export const mergeCellsWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -66,14 +67,14 @@ export const mergeCellsWithAnalytics = () => withAnalytics(({
     },
     eventType: EVENT_TYPE.TRACK
   };
-})((state, dispatch) => {
+})(editorAnalyticsAPI)((state, dispatch) => {
   if (dispatch) {
     dispatch(mergeCells(state.tr));
   }
 
   return true;
 });
-export const splitCellWithAnalytics = () => withAnalytics(({
+export const splitCellWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -103,8 +104,8 @@ export const splitCellWithAnalytics = () => withAnalytics(({
   }
 
   return;
-})(splitCell);
-export const setColorWithAnalytics = (cellColor, targetCellPosition) => withAnalytics(({
+})(editorAnalyticsAPI)(splitCell);
+export const setColorWithAnalytics = editorAnalyticsAPI => (cellColor, targetCellPosition) => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -128,10 +129,10 @@ export const setColorWithAnalytics = (cellColor, targetCellPosition) => withAnal
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(setMultipleCellAttrs({
+})(editorAnalyticsAPI)(setMultipleCellAttrs({
   background: cellColor
 }, targetCellPosition));
-export const addRowAroundSelection = side => (state, dispatch) => {
+export const addRowAroundSelection = editorAnalyticsAPI => side => (state, dispatch) => {
   const {
     selection
   } = state;
@@ -144,12 +145,12 @@ export const addRowAroundSelection = side => (state, dispatch) => {
 
   const position = isCellSelection && side === 'TOP' ? rect.top : rect.bottom - 1;
   const offset = side === 'BOTTOM' ? 1 : 0;
-  return insertRowWithAnalytics(INPUT_METHOD.SHORTCUT, {
+  return insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, {
     index: position + offset,
     moveCursorToInsertedRow: false
   })(state, dispatch);
 };
-export const insertRowWithAnalytics = (inputMethod, options) => withAnalytics(state => {
+export const insertRowWithAnalytics = editorAnalyticsAPI => (inputMethod, options) => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,
     totalColumnCount
@@ -166,8 +167,8 @@ export const insertRowWithAnalytics = (inputMethod, options) => withAnalytics(st
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(insertRow(options.index, options.moveCursorToInsertedRow));
-export const insertColumnWithAnalytics = (inputMethod, position) => withAnalytics(state => {
+})(editorAnalyticsAPI)(insertRow(options.index, options.moveCursorToInsertedRow));
+export const insertColumnWithAnalytics = (getEditorContainerWidth, editorAnalyticsAPI) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,
     totalColumnCount
@@ -184,8 +185,8 @@ export const insertColumnWithAnalytics = (inputMethod, position) => withAnalytic
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(insertColumn(position));
-export const deleteRowsWithAnalytics = (inputMethod, rect, isHeaderRowRequired) => withAnalytics(({
+})(editorAnalyticsAPI)(insertColumn(getEditorContainerWidth)(position));
+export const deleteRowsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect, isHeaderRowRequired) => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -205,14 +206,14 @@ export const deleteRowsWithAnalytics = (inputMethod, rect, isHeaderRowRequired)
     },
     eventType: EVENT_TYPE.TRACK
   };
-})((state, dispatch) => {
+})(editorAnalyticsAPI)((state, dispatch) => {
   if (dispatch) {
     dispatch(deleteRows(rect, isHeaderRowRequired)(state.tr));
   }
 
   return true;
 });
-export const deleteColumnsWithAnalytics = (inputMethod, rect) => withAnalytics(({
+export const deleteColumnsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect) => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -232,7 +233,7 @@ export const deleteColumnsWithAnalytics = (inputMethod, rect) => withAnalytics((
     },
     eventType: EVENT_TYPE.TRACK
   };
-})((state, dispatch) => {
+})(editorAnalyticsAPI)((state, dispatch) => {
   if (dispatch) {
     dispatch(deleteColumns(rect, getAllowAddColumnCustomStep(state))(state.tr));
   }
@@ -257,13 +258,13 @@ const getTableDeletedAnalytics = (selection, inputMethod) => {
   };
 };
 
-export const deleteTableWithAnalytics = () => withAnalytics(({
+export const deleteTableWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(({
   selection
-}) => getTableDeletedAnalytics(selection, INPUT_METHOD.FLOATING_TB))(deleteTable);
-export const deleteTableIfSelectedWithAnalytics = inputMethod => withAnalytics(({
+}) => getTableDeletedAnalytics(selection, INPUT_METHOD.FLOATING_TB))(editorAnalyticsAPI)(deleteTable);
+export const deleteTableIfSelectedWithAnalytics = editorAnalyticsAPI => inputMethod => withEditorAnalyticsAPI(({
   selection
-}) => getTableDeletedAnalytics(selection, inputMethod))(deleteTableIfSelected);
-export const toggleHeaderRowWithAnalytics = () => withAnalytics(state => {
+}) => getTableDeletedAnalytics(selection, inputMethod))(editorAnalyticsAPI)(deleteTableIfSelected);
+export const toggleHeaderRowWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,
     totalColumnCount
@@ -282,8 +283,8 @@ export const toggleHeaderRowWithAnalytics = () => withAnalytics(state => {
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(toggleHeaderRow);
-export const toggleHeaderColumnWithAnalytics = () => withAnalytics(state => {
+})(editorAnalyticsAPI)(toggleHeaderRow);
+export const toggleHeaderColumnWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,
     totalColumnCount
@@ -302,8 +303,8 @@ export const toggleHeaderColumnWithAnalytics = () => withAnalytics(state => {
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(toggleHeaderColumn);
-export const toggleNumberColumnWithAnalytics = () => withAnalytics(state => {
+})(editorAnalyticsAPI)(toggleHeaderColumn);
+export const toggleNumberColumnWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,
     totalColumnCount
@@ -319,8 +320,8 @@ export const toggleNumberColumnWithAnalytics = () => withAnalytics(state => {
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(toggleNumberColumn);
-export const toggleTableLayoutWithAnalytics = () => withAnalytics(state => {
+})(editorAnalyticsAPI)(toggleNumberColumn);
+export const toggleTableLayoutWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(state => {
   const {
     table,
     totalRowCount,
@@ -346,8 +347,8 @@ export const toggleTableLayoutWithAnalytics = () => withAnalytics(state => {
   }
 
   return;
-})(toggleTableLayout);
-export const sortColumnWithAnalytics = (inputMethod, columnIndex, sortOrder) => withAnalytics(state => {
+})(editorAnalyticsAPI)(toggleTableLayout);
+export const sortColumnWithAnalytics = editorAnalyticsAPI => (inputMethod, columnIndex, sortOrder) => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,
     totalColumnCount
@@ -365,13 +366,13 @@ export const sortColumnWithAnalytics = (inputMethod, columnIndex, sortOrder) =>
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(sortByColumn(columnIndex, sortOrder));
-export const distributeColumnsWidthsWithAnalytics = (inputMethod, {
+})(editorAnalyticsAPI)(sortByColumn(columnIndex, sortOrder));
+export const distributeColumnsWidthsWithAnalytics = editorAnalyticsAPI => (inputMethod, {
   resizeState,
   table,
   attributes
 }) => {
-  return withAnalytics(() => {
+  return withEditorAnalyticsAPI(() => {
     return {
       action: TABLE_ACTION.DISTRIBUTED_COLUMNS_WIDTHS,
       actionSubject: ACTION_SUBJECT.TABLE,
@@ -382,7 +383,7 @@ export const distributeColumnsWidthsWithAnalytics = (inputMethod, {
       },
       eventType: EVENT_TYPE.TRACK
     };
-  })((state, dispatch) => {
+  })(editorAnalyticsAPI)((state, dispatch) => {
     if (dispatch) {
       distributeColumnsWidths(resizeState, table)(state, dispatch);
     }
@@ -390,7 +391,7 @@ export const distributeColumnsWidthsWithAnalytics = (inputMethod, {
     return true;
   });
 };
-export const wrapTableInExpandWithAnalytics = () => withAnalytics(state => {
+export const wrapTableInExpandWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,
     totalColumnCount
@@ -405,4 +406,4 @@ export const wrapTableInExpandWithAnalytics = () => withAnalytics(state => {
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(wrapTableInExpand); // #endregion
+})(editorAnalyticsAPI)(wrapTableInExpand); // #endregion

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

@@ -5,7 +5,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';
@@ -13,7 +13,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';
 
 const isFocusingCalendar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
 
@@ -204,7 +203,7 @@ export const handleMouseLeave = (view, event) => {
 
   return false;
 };
-export const handleMouseMove = (view, event, tableCellOptimization, elementContentRects) => {
+export const handleMouseMove = getEditorFeatureFlags => (view, event, tableCellOptimization, elementContentRects) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
@@ -245,7 +244,7 @@ export const handleMouseMove = (view, event, tableCellOptimization, elementConte
 
   const {
     mouseMoveOptimization
-  } = getFeatureFlags(view.state) || {}; // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
+  } = getEditorFeatureFlags(); // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
   // because it relies on tableCell node view that is added  via tableCellOptimization
 
   const useMouseMoveOptimisation = tableCellOptimization && mouseMoveOptimization;
@@ -305,7 +304,7 @@ export function handleTripleClick(view, pos) {
 
   return false;
 }
-export const handleCut = (oldTr, oldState, newState) => {
+export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI) => {
   const oldSelection = oldState.tr.selection;
   let {
     tr
@@ -329,7 +328,7 @@ export const handleCut = (oldTr, oldState, newState) => {
           totalColumnCount
         } = getSelectedCellInfo(tr.selection); // 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,
@@ -341,7 +340,7 @@ export const handleCut = (oldTr, oldState, newState) => {
             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) {
           const isTableSelected = tr.selection.isRowSelection() && tr.selection.isColSelection();

package/dist/es2019/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,16 @@ import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
 import { ErrorBoundary } from '../../ui/ErrorBoundary';
 
+const 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
+  };
+};
+
+const defaultGetEditorFeatureFlags = () => ({});
+
 const tablesPlugin = options => ({
   name: 'table',
 
@@ -60,9 +70,11 @@ const tablesPlugin = options => ({
           fullWidthEnabled,
           wasFullWidthEnabled,
           breakoutEnabled,
-          tableOptions
+          tableOptions,
+          editorAnalyticsAPI,
+          getEditorFeatureFlags
         } = options || {};
-        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',
@@ -71,14 +83,17 @@ const tablesPlugin = options => ({
       }) => {
         const {
           fullWidthEnabled,
-          tableOptions
+          tableOptions,
+          editorAnalyticsAPI,
+          getEditorFeatureFlags,
+          getEditorContainerWidth
         } = options || {};
         const {
           allowColumnResizing
         } = pluginConfig(tableOptions);
         return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
           lastColumnResizable: !fullWidthEnabled
-        }) : undefined;
+        }, getEditorContainerWidth || defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI) : undefined;
       }
     }, {
       name: 'tableEditing',
@@ -87,10 +102,10 @@ const tablesPlugin = options => ({
     // plugin as it is currently swallowing backspace events inside tables
     {
       name: 'tableKeymap',
-      plugin: () => keymapPlugin()
+      plugin: () => keymapPlugin((options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI)
     }, {
       name: 'tableSelectionKeymap',
-      plugin: () => tableSelectionKeymapPlugin()
+      plugin: () => tableSelectionKeymapPlugin(options === null || options === void 0 ? void 0 : options.editorSelectionAPI)
     }, {
       name: 'tableEditing',
       plugin: () => tableEditing()
@@ -99,7 +114,7 @@ const tablesPlugin = options => ({
       plugin: ({
         dispatch,
         eventDispatcher
-      }) => options && options.tableOptions.stickyHeaders ? createStickyHeadersPlugin(dispatch, eventDispatcher) : undefined
+      }) => options && options.tableOptions.stickyHeaders ? createStickyHeadersPlugin(dispatch, eventDispatcher, () => [], (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined
     }, {
       name: 'tableLocalId',
       plugin: ({
@@ -201,14 +216,18 @@ const 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,
@@ -217,7 +236,8 @@ const 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,
@@ -226,13 +246,30 @@ const 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: {
+    // 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: ({
+      nodeName,
+      schema
+    }) => {
+      // An EditorPlugin may manage more than one node.
+      if (nodeName !== 'table') {
+        return null;
+      }
+
+      const table = createTable({
+        schema
+      });
+      return table;
+    },
     quickInsert: ({
       formatMessage
     }) => [{
@@ -245,10 +282,12 @@ const tablesPlugin = options => ({
       icon: () => /*#__PURE__*/React.createElement(IconTable, null),
 
       action(insert, state) {
+        var _options$editorAnalyt;
+
         const 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,
@@ -256,11 +295,12 @@ const 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/es2019/plugins/table/nodeviews/TableComponent.js

@@ -7,7 +7,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';
@@ -19,7 +19,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';
 const isIE11 = browser.ie_version === 11;
@@ -59,7 +58,7 @@ class TableComponent extends React.Component {
     _defineProperty(this, "onStickyState", state => {
       const {
         tableOverflowShadowsOptimization
-      } = getFeatureFlags(this.props.view.state) || {};
+      } = this.props.getEditorFeatureFlags();
       const pos = this.props.getPos();
 
       if (!isValidPosition(pos, this.props.view.state)) {
@@ -119,7 +118,7 @@ class TableComponent extends React.Component {
 
       const {
         tableOverflowShadowsOptimization
-      } = getFeatureFlags(this.props.view.state) || {};
+      } = this.props.getEditorFeatureFlags();
 
       if (!tableOverflowShadowsOptimization) {
         this.updateShadows();
@@ -308,7 +307,7 @@ class TableComponent extends React.Component {
       options: _options,
       containerWidth: _containerWidth,
       getNode: _getNode,
-      view: _view
+      getEditorFeatureFlags
     } = props;
     this.node = _getNode();
     this.containerWidth = _containerWidth; // store table size using previous full-width mode so can detect if it has changed
@@ -329,7 +328,7 @@ class TableComponent extends React.Component {
 
     const {
       initialRenderOptimization
-    } = getFeatureFlags(_view.state) || {};
+    } = getEditorFeatureFlags();
 
     if (!initialRenderOptimization) {
       // @see ED-7945
@@ -394,14 +393,13 @@ class TableComponent extends React.Component {
 
   componentDidUpdate(prevProps) {
     const {
-      view,
       getNode,
       isMediaFullscreen,
       allowColumnResizing
     } = this.props;
     const {
       tableOverflowShadowsOptimization
-    } = getFeatureFlags(view.state) || {};
+    } = this.props.getEditorFeatureFlags();
 
     if (!tableOverflowShadowsOptimization) {
       this.updateShadows();
@@ -436,7 +434,7 @@ class TableComponent extends React.Component {
           view
         } = this.props;
         recreateResizeColsByNode(this.table, currentTable);
-        updateControls(view.state);
+        updateControls(this.props.getEditorFeatureFlags)(view.state);
       }
 
       this.handleTableResizingDebounced();
@@ -451,7 +449,7 @@ class TableComponent extends React.Component {
     if (this.wrapper && parent) {
       const rightShadows = parent.querySelectorAll(`.${ClassName.TABLE_RIGHT_SHADOW}`);
       const leftShadows = parent.querySelectorAll(`.${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);
     }
   }
 
@@ -484,7 +482,7 @@ class TableComponent extends React.Component {
       initialRenderOptimization,
       tableRenderOptimization,
       tableOverflowShadowsOptimization
-    } = getFeatureFlags(view.state) || {};
+    } = this.props.getEditorFeatureFlags();
     const tableRef = this.table || undefined;
     const isResizing = !!tableResizingPluginState && !!tableResizingPluginState.dragging;
     const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined; //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
@@ -509,7 +507,8 @@ class TableComponent extends 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
     }));
     const shadowPadding = allowControls && (!isLoading || initialRenderOptimization) && tableActive ? -tableToolbarSize : tableMarginSides;
     const shadowStyle = tableOverflowShadowsOptimization ? memoizeOne(visible => ({

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

@@ -4,7 +4,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';
@@ -12,7 +11,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';
 
 const tableAttributes = node => {
@@ -71,10 +69,19 @@ export default class TableView extends ReactNodeView {
   }
 
   render(props, forwardRef) {
+    // TODO: ED-15663
+    // Please, do not copy or use this kind of code below
+    // @ts-ignore
+    const fakePluginKey = {
+      key: 'widthPlugin$',
+      getState: state => {
+        return state['widthPlugin$'];
+      }
+    };
     return /*#__PURE__*/React.createElement(WithPluginState, {
       plugins: {
-        containerWidth: widthPluginKey,
         pluginState: pluginKey,
+        widthPlugin: fakePluginKey,
         tableResizingPluginState: tableResizingPluginKey,
         mediaState: mediaPluginKey
       },
@@ -83,10 +90,10 @@ export default class TableView extends ReactNodeView {
         const {
           tableResizingPluginState,
           pluginState,
-          containerWidth,
           mediaState
         } = pluginStates;
         const tableActive = props.getPos() === pluginState.tablePos;
+        const containerWidth = props.getEditorContainerWidth();
         return /*#__PURE__*/React.createElement(TableComponent, {
           view: props.view,
           allowColumnResizing: props.allowColumnResizing,
@@ -102,7 +109,8 @@ export default class TableView extends ReactNodeView {
           tableResizingPluginState: tableResizingPluginState,
           getNode: this.getNode,
           containerWidth: containerWidth,
-          contentDOM: forwardRef
+          contentDOM: forwardRef,
+          getEditorFeatureFlags: props.getEditorFeatureFlags
         });
       }
     });
@@ -164,7 +172,7 @@ export default class TableView extends ReactNodeView {
   }
 
 }
-export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, options) => {
+export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags) => {
   const {
     pluginConfig
   } = getPluginState(view.state);
@@ -173,7 +181,7 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
   } = getPluginConfig(pluginConfig);
   const {
     tableRenderOptimization
-  } = getFeatureFlags(view.state) || {};
+  } = getEditorFeatureFlags();
   return new TableView({
     node,
     view,
@@ -182,6 +190,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     eventDispatcher,
     getPos: getPos,
     options,
-    tableRenderOptimization
+    tableRenderOptimization,
+    getEditorContainerWidth,
+    getEditorFeatureFlags
   }).init();
 };