@atlaskit/editor-plugin-table 7.25.18 → 7.25.19

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

package/dist/cjs/plugin.js

@@ -45,6 +45,7 @@ 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 _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; }
@@ -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,

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/plugin.js

@@ -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/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/plugin.js

@@ -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/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.18",
+	"version": "7.25.19",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -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/plugin.tsx

@@ -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/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;
+};