@atlaskit/editor-plugin-table 15.3.14 → 15.3.16

package/dist/es2019/nodeviews/table-node-views.js

@@ -1,7 +1,9 @@
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 // TODO: ED-23976 - Clean up
 import { createTableView } from './table';
 import TableCell from './TableCell';
 import TableRow from './TableRow';
+import TableRowNativeStickyWithFallback from './TableRowNativeStickyWithFallback';
 export const tableView = options => {
   return (node, view, getPos) => {
     return createTableView(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isCommentEditor, options.isChromelessEditor);
@@ -21,6 +23,10 @@ export const tableHeaderView = options => {
 };
 export const tableRowView = options => {
   return (node, view, getPos) => {
-    return new TableRow(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
+    if (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+      return new TableRowNativeStickyWithFallback(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
+    } else {
+      return new TableRow(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
+    }
   };
 };

package/dist/es2019/types/index.js

@@ -161,7 +161,8 @@ export const TableCssClassName = {
   WITH_ROW_INSERT_LINE: `${tablePrefixSelector}-row-insert-line`,
   WITH_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-row-insert-line__inactive`,
   WITH_LAST_ROW_INSERT_LINE: `${tablePrefixSelector}-last-row-insert-line`,
-  WITH_LAST_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-last-row-insert-line__inactive`
+  WITH_LAST_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-last-row-insert-line__inactive`,
+  NATIVE_STICKY: `${tablePrefixSelector}-row-native-sticky`
 };
 export let ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";

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

@@ -212,7 +212,7 @@ const tableScrollInlineShadowStyles = () => {
   return css`
 		.${ClassName.TABLE_SCROLL_INLINE_SHADOW} {
 			--editor-table-shadow-cover: #fff;
-			--editor-table-shadow-color: ${"var(--ds-shadow-overflow-spread, #091e4229)"};
+			--editor-table-shadow-color: ${"var(--ds-shadow-overflow-spread, #1E1F2129)"};
 			--editor-table-shadow-size: ${"var(--ds-space-100, 8px)"};
 			background-image:
 				linear-gradient(to right, var(--editor-table-shadow-cover) 33%, transparent),
@@ -461,6 +461,12 @@ export const baseTableStyles = props => {
 		z-index: 1;
 	}
 
+	tr.${ClassName.NATIVE_STICKY} {
+		position: sticky;
+		top: 0;
+		z-index: ${akEditorTableCellOnStickyHeaderZIndex};
+	}
+
 	.${ClassName.WITH_CONTROLS} tr.sticky {
 		padding-top: ${tableControlsSpacing}px;
 	}
@@ -1108,6 +1114,10 @@ export const baseTableStyles = props => {
 		overflow-y: hidden;
 		position: relative;
 	}
+
+	.${ClassName.TABLE_NODE_WRAPPER}.${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} {
+		overflow: visible;
+	}
 `;
 };
 

package/dist/es2019/ui/toolbar.js

@@ -129,7 +129,7 @@ export const getToolbarMenuConfig = (config, state, {
 // with native widgets. It's enabled via a plugin config.
 export const getToolbarCellOptionsConfig = (editorState, editorView, initialSelectionRect, {
   formatMessage
-}, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false) => {
+}, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false, isLimitedModeEnabled = false) => {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
   const {
     top,
@@ -230,15 +230,35 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     });
   }
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
-    var _newResizeStateWithAn;
-    const newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor) : undefined;
-    const wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
-    const distributeColumnWidths = (state, dispatch) => {
-      if (newResizeStateWithAnalytics) {
-        distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
-        return true;
+    let wouldChange = true; // Default to enabled - show the button.
+    let newResizeStateWithAnalytics;
+
+    // Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
+    // This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
+    if (!expValEquals('cc_editor_limited_mode_table_align_bttn', 'isEnabled', true) || !isLimitedModeEnabled) {
+      var _newResizeStateWithAn, _newResizeStateWithAn2;
+      newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor) : undefined;
+      wouldChange = (_newResizeStateWithAn = (_newResizeStateWithAn2 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn2 === void 0 ? void 0 : _newResizeStateWithAn2.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
+    }
+    const distributeColumnWidths = (state, dispatch, view) => {
+      // When optimization is enabled, calculate on-demand when clicked
+      if (expValEquals('cc_editor_limited_mode_table_align_bttn', 'isEnabled', true) && isLimitedModeEnabled) {
+        if (view) {
+          const resizeState = getNewResizeStateFromSelectedColumns(initialSelectionRect, state, view.domAtPos.bind(view), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
+          if (resizeState) {
+            distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(INPUT_METHOD.FLOATING_TB, resizeState)(state, dispatch);
+            return true;
+          }
+        }
+        return false;
+      } else {
+        // Original behavior: use pre-calculated state
+        if (newResizeStateWithAnalytics) {
+          distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
+          return true;
+        }
+        return false;
       }
-      return false;
     };
     options.push({
       id: 'editor.table.distributeColumns',
@@ -389,7 +409,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
   // We don't want to show floating toolbar while resizing the table
   const isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
   if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
-    var _api$extension, _api$extension$shared, _api$extension2;
+    var _api$limitedMode$shar, _api$limitedMode, _api$limitedMode$shar2, _api$extension, _api$extension$shared, _api$extension2;
     const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
     const isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
     const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
@@ -411,8 +431,9 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
     };
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
     const alignmentMenu = config.allowTableAlignment && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, areAnyNewToolbarFlagsEnabled, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
-    const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
-    const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
+    const isLimitedModeEnabled = (_api$limitedMode$shar = api === null || api === void 0 ? void 0 : (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 ? void 0 : (_api$limitedMode$shar2 = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode$shar2 === void 0 ? void 0 : _api$limitedMode$shar2.enabled) !== null && _api$limitedMode$shar !== void 0 ? _api$limitedMode$shar : false;
+    const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor, isLimitedModeEnabled);
+    const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor, isLimitedModeEnabled) : [];
     const colorPicker = !areAnyNewToolbarFlagsEnabled ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];
 
     // Check if we need to show confirm dialog for delete button
@@ -556,12 +577,12 @@ const separator = hidden => {
 };
 const getCellItems = (state, view, {
   formatMessage
-}, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false) => {
+}, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false, isLimitedModeEnabled = false) => {
   const initialSelectionRect = getClosestSelectionRect(state);
   if (initialSelectionRect) {
     const cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
       formatMessage
-    }, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor);
+    }, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isLimitedModeEnabled);
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     return [cellOptions, separator(cellOptions.hidden)];
@@ -585,15 +606,23 @@ const getDistributeConfig = (getEditorContainerWidth, api, editorAnalyticsAPI, i
 // fixed column button should be in this function call in the future
 const getColumnSettingItems = (editorState, editorView, {
   formatMessage
-}, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, isCommentEditor = false) => {
-  var _newResizeStateWithAn2, _pluginState$pluginCo3;
+}, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, isCommentEditor = false, isLimitedModeEnabled = false) => {
+  var _pluginState$pluginCo3;
   const pluginState = getPluginState(editorState);
   const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
   if (!selectionOrTableRect || !editorView) {
     return [];
   }
-  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
-  const wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
+  let wouldChange = true; // Default to enabled - show the button.
+  let newResizeStateWithAnalytics;
+
+  // Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
+  // This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
+  if (!expValEquals('cc_editor_limited_mode_table_align_bttn', 'isEnabled', true) || !isLimitedModeEnabled) {
+    var _newResizeStateWithAn3, _newResizeStateWithAn4;
+    newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
+    wouldChange = (_newResizeStateWithAn3 = (_newResizeStateWithAn4 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn4 === void 0 ? void 0 : _newResizeStateWithAn4.changed) !== null && _newResizeStateWithAn3 !== void 0 ? _newResizeStateWithAn3 : false;
+  }
   const items = [];
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
     items.push({