@atlaskit/editor-plugin-table 7.25.17 → 7.25.19

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 7.25.19
+
+### Patch Changes
+
+- [#136485](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136485)
+  [`96d4b8a73c2ea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/96d4b8a73c2ea) -
+  Refactored table styles so that it is inside the tables plugin and not in the editors critical
+  path.
+
+## 7.25.18
+
+### Patch Changes
+
+- [#136348](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136348)
+  [`fb4fb56f1da7c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fb4fb56f1da7c) -
+  Use optimised entry-points on editor-common for browser.
+- Updated dependencies
+
 ## 7.25.17
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableResizer.js

@@ -12,20 +12,20 @@ var _react = _interopRequireWildcard(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _browser = require("@atlaskit/editor-common/browser");
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _resizer = require("@atlaskit/editor-common/resizer");
-var _utils = require("@atlaskit/editor-common/utils");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _utils2 = require("@atlaskit/editor-tables/utils");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _commandsWithAnalytics = require("../commands-with-analytics");
 var _misc = require("../commands/misc");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
-var _utils3 = require("../pm-plugins/table-resizing/utils");
+var _utils2 = require("../pm-plugins/table-resizing/utils");
 var _tableWidth = require("../pm-plugins/table-width");
 var _consts = require("../ui/consts");
 var _alignment = require("../utils/alignment");
@@ -67,8 +67,8 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   return 'small';
 };
 var getResizerMinWidth = function getResizerMinWidth(node) {
-  var currentColumnCount = (0, _utils3.getColgroupChildrenLength)(node);
-  var minColumnWidth = Math.min(3, currentColumnCount) * _utils3.COLUMN_MIN_WIDTH;
+  var currentColumnCount = (0, _utils2.getColgroupChildrenLength)(node);
+  var minColumnWidth = Math.min(3, currentColumnCount) * _utils2.COLUMN_MIN_WIDTH;
   // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;
@@ -146,7 +146,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     formatMessage = _useIntl.formatMessage;
   var currentSelection = (_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection;
   var tableFromSelection = (0, _react.useMemo)(function () {
-    return (0, _utils2.findTable)(currentSelection);
+    return (0, _utils.findTable)(currentSelection);
   }, [currentSelection]);
   var tableFromSelectionPosition = tableFromSelection === null || tableFromSelection === void 0 ? void 0 : tableFromSelection.pos;
   var isTableSelected = (0, _react.useMemo)(function () {
@@ -260,7 +260,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     if (typeof pos !== 'number') {
       return;
     }
-    (0, _utils3.previewScaleTable)(tableRef, {
+    (0, _utils2.previewScaleTable)(tableRef, {
       node: node,
       prevNode: node,
       start: pos + 1,
@@ -278,7 +278,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       return guideline.isFullWidth;
     })[0];
     var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
-    var tableMaxWidth = isCommentEditor ? containerWidth - _utils3.TABLE_OFFSET_IN_COMMENT_EDITOR : _utils3.TABLE_MAX_WIDTH;
+    var tableMaxWidth = isCommentEditor ? containerWidth - _utils2.TABLE_OFFSET_IN_COMMENT_EDITOR : _utils2.TABLE_MAX_WIDTH;
     var shouldUpdateWidthToWidest = isCommentEditor && tableMaxWidth === newWidth || !!isTableScalingEnabled && isFullWidthGuidelineActive;
     (0, _commands.chainCommands)(function (state, dispatch) {
       return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
@@ -298,7 +298,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     var pos = getPos();
     var currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
     var tableMaxWidth = isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
-    : _utils3.TABLE_MAX_WIDTH;
+    : _utils2.TABLE_MAX_WIDTH;
     newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
     var tr = state.tr.setMeta(_tableWidth.pluginKey, {
       resizing: false,
@@ -324,7 +324,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
         width: newWidth
       }));
       var newNode = tr.doc.nodeAt(pos);
-      tr = (0, _utils3.scaleTable)(tableRef, {
+      tr = (0, _utils2.scaleTable)(tableRef, {
         node: newNode,
         prevNode: node,
         start: pos + 1,
@@ -379,7 +379,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
   }, [editorView]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
-    var metaKey = _utils.browser.mac ? event.metaKey : event.ctrlKey;
+    var metaKey = _browser.browser.mac ? event.metaKey : event.ctrlKey;
     if (event.altKey || metaKey || event.shiftKey) {
       areResizeMetaKeysPressed.current = true;
     }
@@ -404,7 +404,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     }
     var resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
     var globalKeyDownHandler = function globalKeyDownHandler(event) {
-      var metaKey = _utils.browser.mac ? event.metaKey : event.ctrlKey;
+      var metaKey = _browser.browser.mac ? event.metaKey : event.ctrlKey;
       if (!isTableSelected) {
         return;
       }

package/dist/cjs/plugin.js

@@ -9,12 +9,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _browser = require("@atlaskit/editor-common/browser");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _icons = require("@atlaskit/editor-common/icons");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _utils = require("@atlaskit/editor-common/utils");
 var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
@@ -45,8 +45,9 @@ var _FloatingDeleteButton = _interopRequireDefault(require("./ui/FloatingDeleteB
 var _FloatingDragMenu = _interopRequireDefault(require("./ui/FloatingDragMenu"));
 var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertButton"));
 var _FloatingToolbarLabel = require("./ui/FloatingToolbarLabel/FloatingToolbarLabel");
+var _globalStyles = require("./ui/global-styles");
 var _TableFullWidthLabel = require("./ui/TableFullWidthLabel");
-var _utils2 = require("./utils");
+var _utils = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
@@ -112,7 +113,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       insertTable: function insertTable(analyticsPayload) {
         return function (state, dispatch) {
           var _api$contentInsertion, _api$contentInsertion2;
-          var node = (0, _utils2.createTableWithWidth)({
+          var node = (0, _utils.createTableWithWidth)({
             isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
             isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
             isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
@@ -324,7 +325,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
 
       // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
       // https://github.com/ProseMirror/prosemirror/issues/934
-      if (_utils.browser.safari) {
+      if (_browser.browser.safari) {
         plugins.push({
           name: 'tableSafariDeleteCompositionTextIssueWorkaround',
           plugin: function plugin() {
@@ -335,6 +336,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       return plugins;
     },
     contentComponent: function contentComponent(_ref17) {
+      var _api$featureFlags;
       var editorView = _ref17.editorView,
         popupsMountPoint = _ref17.popupsMountPoint,
         popupsBoundariesElement = _ref17.popupsBoundariesElement,
@@ -344,7 +346,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         fallbackComponent: null
-      }, /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
+      }, /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, {
+        featureFlags: api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()
+      }), /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
         plugins: {
           tableAnalyticsPluginState: _pluginKey.pluginKey,
           tablePluginState: _pluginKey2.pluginKey,
@@ -487,7 +491,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             var _api$table;
             // see comment on tablesPlugin.getSharedState on usage
             var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
-            var tableNode = (0, _utils2.createTableWithWidth)({
+            var tableNode = (0, _utils.createTableWithWidth)({
               isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
               isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
               isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,

package/dist/cjs/pm-plugins/drag-and-drop/utils/getDragBehaviour.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getDragBehaviour = void 0;
-var _utils = require("@atlaskit/editor-common/utils");
+var _browser = require("@atlaskit/editor-common/browser");
 var getDragBehaviour = exports.getDragBehaviour = function getDragBehaviour(_ref) {
   var altKey = _ref.altKey,
     ctrlKey = _ref.ctrlKey;
-  var isCloneModifierKeyPressed = _utils.browser.mac ? altKey : ctrlKey;
+  var isCloneModifierKeyPressed = _browser.browser.mac ? altKey : ctrlKey;
   return isCloneModifierKeyPressed ? 'clone' : 'move';
 };

package/dist/cjs/ui/DragHandle/index.js

@@ -12,8 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
+var _browser = require("@atlaskit/editor-common/browser");
 var _messages = require("@atlaskit/editor-common/messages");
-var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorTables = require("@atlaskit/editor-tables");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
@@ -21,7 +21,7 @@ var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/ele
 var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
 var _pluginFactory2 = require("../../pm-plugins/plugin-factory");
 var _types = require("../../types");
-var _utils2 = require("../../utils");
+var _utils = require("../../utils");
 var _consts = require("../consts");
 var _DragPreview = require("../DragPreview");
 var _HandleIconComponent = require("./HandleIconComponent");
@@ -82,8 +82,8 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     if (hoveredCell && hoveredCell.rowIndex !== undefined && hoveredCell.colIndex !== undefined && selection instanceof _state.TextSelection) {
       var rowIndex = hoveredCell.rowIndex,
         colIndex = hoveredCell.colIndex;
-      var mergedPositionInRow = (0, _utils2.findDuplicatePosition)(mapByRow[rowIndex]);
-      var mergedPositionInCol = (0, _utils2.findDuplicatePosition)(mapByColumn[colIndex]);
+      var mergedPositionInRow = (0, _utils.findDuplicatePosition)(mapByRow[rowIndex]);
+      var mergedPositionInCol = (0, _utils.findDuplicatePosition)(mapByColumn[colIndex]);
       var hasMergedCellsInFirstRowOrColumn = direction === 'column' ? mergedPositionInRow.includes(mapByRow[0][colIndex]) : mergedPositionInCol.includes(mapByColumn[0][rowIndex]);
       var isHoveredOnFirstRowOrColumn = direction === 'column' ? hoveredCell.rowIndex === 0 && hasMergedCellsInFirstRowOrColumn : hoveredCell.colIndex === 0 && hasMergedCellsInFirstRowOrColumn;
       if (isHoveredOnFirstRowOrColumn) {
@@ -92,11 +92,11 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
         }).length : mapByColumn[0].filter(function (el) {
           return el === mapByColumn[0][rowIndex];
         }).length;
-        var mergedSelection = (0, _utils2.hasMergedCellsInSelection)(direction === 'column' ? [colIndex, colIndex + mergedSizes - 1] : [rowIndex, rowIndex + mergedSizes - 1], direction)(selection);
+        var mergedSelection = (0, _utils.hasMergedCellsInSelection)(direction === 'column' ? [colIndex, colIndex + mergedSizes - 1] : [rowIndex, rowIndex + mergedSizes - 1], direction)(selection);
         return mergedSelection;
       }
     }
-    return (0, _utils2.hasMergedCellsInSelection)(indexes, direction)(selection);
+    return (0, _utils.hasMergedCellsInSelection)(indexes, direction)(selection);
   }, [indexes, selection, direction, hoveredCell]);
   var handleIconProps = {
     forceDefaultHandle: forceDefaultHandle,
@@ -124,7 +124,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
             getOffset: function getOffset(_ref3) {
               var container = _ref3.container;
               var rect = container.getBoundingClientRect();
-              if (_utils.browser.safari) {
+              if (_browser.browser.safari) {
                 // See: https://product-fabric.atlassian.net/browse/ED-21442
                 // We need to ensure that the preview is not overlaying screen content when the snapshot is taken, otherwise
                 // safari will composite the screen text elements into the bitmap snapshot. The container is a wrapper which is already
@@ -220,7 +220,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     }
   }, appearance !== 'placeholder' ?
   //  cannot block pointer events in Firefox as it breaks Dragging functionality
-  _utils.browser.gecko ? /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps) :
+  _browser.browser.gecko ? /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps) :
   /*#__PURE__*/
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   _react.default.createElement("span", {

package/dist/cjs/ui/TableFloatingControls/index.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.TableFloatingControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _utils = require("@atlaskit/editor-common/utils");
-var _utils2 = require("@atlaskit/editor-tables/utils");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../commands");
 var _types = require("../../types");
@@ -44,7 +44,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
     var state = editorView.state,
       dispatch = editorView.dispatch;
     // fix for issue ED-4665
-    if (_utils.browser.ie_version === 11) {
+    if (_browser.browser.ie_version === 11) {
       editorView.dom.blur();
     }
     (0, _commands.selectRow)(row, expand)(state, dispatch);
@@ -53,7 +53,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
     var state = editorView.state,
       dispatch = editorView.dispatch;
     // fix for issue ED-4665
-    if (_utils.browser.ie_version === 11) {
+    if (_browser.browser.ie_version === 11) {
       editorView.dom.blur();
     }
     (0, _commands.selectRows)(rowIndexes)(state, dispatch);
@@ -83,7 +83,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
   }
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
   var wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + _types.TableCssClassName.TABLE_CHROMELESS : _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER;
-  var tablePos = (_findTable = (0, _utils2.findTable)(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
+  var tablePos = (_findTable = (0, _utils.findTable)(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
   var isNested = tablePos !== undefined && (0, _nodes.isTableNested)(editorView.state, tablePos);
   var shouldShowCornerControls = !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop) || isNested;
   return (

package/dist/cjs/ui/common-styles.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.tableStyles = exports.tableRowHeight = exports.tableFullPageEditorStyles = exports.tableCommentEditorStyles = exports.insertColumnButtonOffset = exports.baseTableStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
+var _browser = require("@atlaskit/editor-common/browser");
 var _styles = require("@atlaskit/editor-common/styles");
 var _table = require("@atlaskit/editor-common/table");
-var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -68,7 +68,7 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
      This fixes a bug which occurs in firefox when the first row becomes sticky.
      see https://product-fabric.atlassian.net/browse/ED-19177
    */
-  if (_utils.browser.gecko) {
+  if (_browser.browser.gecko) {
     return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t.", " > tbody::before {\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t"])), _types.TableCssClassName.TABLE_STICKY);
   }
 };

package/dist/cjs/ui/global-styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalStylesWrapper = void 0;
+var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _commonStyles = require("./common-styles");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
+  var featureFlags = _ref.featureFlags;
+  return (0, _platformFeatureFlags.fg)('platform_editor_move_table_styles_to_plugin') ? (0, _react.jsx)(_react.Global, {
+    styles: (0, _commonStyles.tableStyles)({
+      featureFlags: featureFlags
+    })
+  }) : null;
+};

package/dist/es2019/nodeviews/TableResizer.js

@@ -2,13 +2,13 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 import rafSchd from 'raf-schd';
 import { useIntl } from 'react-intl-next';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import { browser } from '@atlaskit/editor-common/browser';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { browser } from '@atlaskit/editor-common/utils';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';

package/dist/es2019/plugin.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { browser } from '@atlaskit/editor-common/browser';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
@@ -37,6 +37,7 @@ import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
+import { GlobalStylesWrapper } from './ui/global-styles';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { createTableWithWidth } from './utils';
 const defaultGetEditorFeatureFlags = () => ({});
@@ -329,11 +330,14 @@ const tablesPlugin = ({
       popupsScrollableElement,
       dispatchAnalyticsEvent
     }) {
+      var _api$featureFlags;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         fallbackComponent: null
-      }, /*#__PURE__*/React.createElement(WithPluginState, {
+      }, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
+        featureFlags: api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()
+      }), /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
           tableAnalyticsPluginState: tableAnalyticsPluginKey,
           tablePluginState: pluginKey,

package/dist/es2019/pm-plugins/drag-and-drop/utils/getDragBehaviour.js

@@ -1,4 +1,4 @@
-import { browser } from '@atlaskit/editor-common/utils';
+import { browser } from '@atlaskit/editor-common/browser';
 export const getDragBehaviour = ({
   altKey,
   ctrlKey

package/dist/es2019/ui/DragHandle/index.js

@@ -2,8 +2,8 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
+import { browser } from '@atlaskit/editor-common/browser';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { browser } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

package/dist/es2019/ui/TableFloatingControls/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
+import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { browser } from '@atlaskit/editor-common/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';

package/dist/es2019/ui/common-styles.js

@@ -2,9 +2,9 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+import { browser } from '@atlaskit/editor-common/browser';
 import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
-import { browser } from '@atlaskit/editor-common/utils';
 import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';

package/dist/es2019/ui/global-styles.js

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { Global, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { tableStyles } from './common-styles';
+export const GlobalStylesWrapper = ({
+  featureFlags
+}) => {
+  return fg('platform_editor_move_table_styles_to_plugin') ? jsx(Global, {
+    styles: tableStyles({
+      featureFlags
+    })
+  }) : null;
+};

package/dist/esm/nodeviews/TableResizer.js

@@ -6,13 +6,13 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 import rafSchd from 'raf-schd';
 import { useIntl } from 'react-intl-next';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import { browser } from '@atlaskit/editor-common/browser';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { browser } from '@atlaskit/editor-common/utils';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';

package/dist/esm/plugin.js

@@ -4,12 +4,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { browser } from '@atlaskit/editor-common/browser';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
@@ -40,6 +40,7 @@ import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
+import { GlobalStylesWrapper } from './ui/global-styles';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { createTableWithWidth } from './utils';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
@@ -328,6 +329,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       return plugins;
     },
     contentComponent: function contentComponent(_ref17) {
+      var _api$featureFlags;
       var editorView = _ref17.editorView,
         popupsMountPoint = _ref17.popupsMountPoint,
         popupsBoundariesElement = _ref17.popupsBoundariesElement,
@@ -337,7 +339,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         fallbackComponent: null
-      }, /*#__PURE__*/React.createElement(WithPluginState, {
+      }, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
+        featureFlags: api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()
+      }), /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
           tableAnalyticsPluginState: tableAnalyticsPluginKey,
           tablePluginState: pluginKey,

package/dist/esm/pm-plugins/drag-and-drop/utils/getDragBehaviour.js

@@ -1,4 +1,4 @@
-import { browser } from '@atlaskit/editor-common/utils';
+import { browser } from '@atlaskit/editor-common/browser';
 export var getDragBehaviour = function getDragBehaviour(_ref) {
   var altKey = _ref.altKey,
     ctrlKey = _ref.ctrlKey;

package/dist/esm/ui/DragHandle/index.js

@@ -4,8 +4,8 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
+import { browser } from '@atlaskit/editor-common/browser';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { browser } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

package/dist/esm/ui/TableFloatingControls/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
+import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { browser } from '@atlaskit/editor-common/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';

package/dist/esm/ui/common-styles.js

@@ -4,9 +4,9 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+import { browser } from '@atlaskit/editor-common/browser';
 import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
-import { browser } from '@atlaskit/editor-common/utils';
 import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';

package/dist/esm/ui/global-styles.js

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { Global, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { tableStyles } from './common-styles';
+export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
+  var featureFlags = _ref.featureFlags;
+  return fg('platform_editor_move_table_styles_to_plugin') ? jsx(Global, {
+    styles: tableStyles({
+      featureFlags: featureFlags
+    })
+  }) : null;
+};

package/dist/types/ui/global-styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import type { FeatureFlags } from '@atlaskit/editor-common/types';
+export declare const GlobalStylesWrapper: ({ featureFlags, }: {
+    featureFlags: FeatureFlags | undefined;
+}) => jsx.JSX.Element | null;

package/dist/types-ts4.5/ui/global-styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import type { FeatureFlags } from '@atlaskit/editor-common/types';
+export declare const GlobalStylesWrapper: ({ featureFlags, }: {
+    featureFlags: FeatureFlags | undefined;
+}) => jsx.JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.25.17",
+	"version": "7.25.19",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^88.7.0",
+		"@atlaskit/editor-common": "^88.8.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
@@ -117,6 +117,9 @@
 		"platform_editor_dark_mode_cell_header_color_fix": {
 			"type": "boolean"
 		},
+		"platform_editor_move_table_styles_to_plugin": {
+			"type": "boolean"
+		},
 		"platform_editor_a11y_table_context_menu": {
 			"type": "boolean"
 		},

package/src/nodeviews/TableResizer.tsx

@@ -10,6 +10,7 @@ import {
 	INPUT_METHOD,
 	TABLE_OVERFLOW_CHANGE_TRIGGER,
 } from '@atlaskit/editor-common/analytics';
+import { browser } from '@atlaskit/editor-common/browser';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -18,7 +19,6 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import type { HandleResize, HandleSize } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { browser } from '@atlaskit/editor-common/utils';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';

package/src/plugin.tsx

@@ -10,6 +10,7 @@ import {
 	INPUT_METHOD,
 	TABLE_ACTION,
 } from '@atlaskit/editor-common/analytics';
+import { browser } from '@atlaskit/editor-common/browser';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
@@ -24,7 +25,6 @@ import type {
 	NextEditorPlugin,
 	OptionalPlugin,
 } from '@atlaskit/editor-common/types';
-import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
@@ -82,6 +82,7 @@ import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
+import { GlobalStylesWrapper } from './ui/global-styles';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { createTableWithWidth } from './utils';
 
@@ -515,6 +516,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 					dispatchAnalyticsEvent={dispatchAnalyticsEvent}
 					fallbackComponent={null}
 				>
+					<GlobalStylesWrapper featureFlags={api?.featureFlags?.sharedState.currentState()} />
 					<WithPluginState
 						plugins={{
 							tableAnalyticsPluginState: tableAnalyticsPluginKey,

package/src/pm-plugins/drag-and-drop/utils/getDragBehaviour.ts

@@ -1,4 +1,4 @@
-import { browser } from '@atlaskit/editor-common/utils';
+import { browser } from '@atlaskit/editor-common/browser';
 import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
 
 import type { DraggableBehaviour } from '../../../types';

package/src/ui/DragHandle/index.tsx

@@ -6,8 +6,8 @@ import ReactDOM from 'react-dom';
 import type { WrappedComponentProps } from 'react-intl-next';
 import { injectIntl } from 'react-intl-next';
 
+import { browser } from '@atlaskit/editor-common/browser';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { browser } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable, TableMap } from '@atlaskit/editor-tables';

package/src/ui/TableFloatingControls/index.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { browser } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';

package/src/ui/common-styles.ts

@@ -3,10 +3,10 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 
+import { browser } from '@atlaskit/editor-common/browser';
 import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import { browser } from '@atlaskit/editor-common/utils';
 import {
 	akEditorSelectedNodeClassName,
 	akEditorSmallZIndex,

package/src/ui/global-styles.tsx

@@ -0,0 +1,21 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { Global, jsx } from '@emotion/react';
+
+import type { FeatureFlags } from '@atlaskit/editor-common/types';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+import { tableStyles } from './common-styles';
+
+export const GlobalStylesWrapper = ({
+	featureFlags,
+}: {
+	featureFlags: FeatureFlags | undefined;
+}) => {
+	return fg('platform_editor_move_table_styles_to_plugin') ? (
+		<Global styles={tableStyles({ featureFlags })} />
+	) : null;
+};