@atlaskit/editor-plugin-table 15.4.21 → 15.4.23

package/dist/es2019/nodeviews/toDOM.js

@@ -31,37 +31,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
       if (config.allowColumnResizing) {
         colgroup = ['colgroup', {}, ...generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)];
       }
-
-      // For Chromeless editor, and nested tables in full page editor
-      const tableContainerDivLegacy = ['div', {
-        class: 'pm-table-container',
-        'data-number-column': node.attrs.isNumberColumnEnabled,
-        'data-layout': node.attrs.layout,
-        'data-testid': 'table-container'
-      }, ['div', {
-        class: 'pm-table-sticky-sentinel-top',
-        'data-testid': 'sticky-sentinel-top'
-      }], ['div', {
-        class: 'pm-table-row-controls-wrapper'
-      }, ['div']], ['div', {
-        class: 'pm-table-with-left-shadow',
-        style: 'visibility: hidden'
-      }], ['div', {
-        class: 'pm-table-wrapper'
-      }, ['table', attrs, ['span', {
-        class: 'pm-table-shadow-sentinel-right'
-      }], ['span', {
-        class: 'pm-table-shadow-sentinel-left'
-      }], colgroup, ['tbody', 0]]], ['div', {
-        class: 'pm-table-with-right-shadow',
-        style: 'visibility: hidden'
-      }], ['div', {
-        class: 'pm-table-sticky-sentinel-bottom',
-        'data-testid': 'sticky-sentinel-bottom'
-      }]];
-
-      // removed the left/right shadow divs
-      const tableContainerDivNext = ['div', {
+      const tableContainerDiv = ['div', {
         class: 'pm-table-container',
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -77,7 +47,6 @@ export const tableNodeSpecWithFixedToDOM = config => {
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
       }]];
-      const tableContainerDiv = expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant1') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') ? tableContainerDivNext : tableContainerDivLegacy;
       if (!config.tableResizingEnabled || config.isNested) {
         return ['div', {
           class: 'tableView-content-wrap',

package/dist/es2019/pm-plugins/main.js

@@ -67,7 +67,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       }),
       tableRow: tableRowView({
         eventDispatcher,
-        pluginInjectionApi
+        pluginInjectionApi,
+        isDragAndDropEnabled: dragAndDropEnabled
       }),
       tableCell: tableCellView({
         eventDispatcher,

package/dist/es2019/pm-plugins/table-resizing/utils/consts.js

@@ -1,5 +1,4 @@
 export const COLUMN_MIN_WIDTH = 48;
-// Remove TABLE_MAX_WIDTH_OLD when cleaning up editor_tinymce_full_width_mode experiment
 export const TABLE_FULL_WIDTH = 1800;
 export const TABLE_MAX_WIDTH = 4000;
 export const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;

package/dist/es2019/ui/ContentComponent.js

@@ -107,7 +107,8 @@ const ContentComponentInternal = ({
     isContextualMenuOpen: isContextualMenuOpen,
     stickyHeader: stickyHeader,
     tableWrapper: tableWrapperTarget,
-    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
+    isDragAndDropEnabled: isDragAndDropEnabled
   }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
     tableNode: tableNode,
     tableRef: tableRef,

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

@@ -42,6 +42,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     tableWrapper,
     targetCellPosition,
     isCellMenuOpenByKeyboard,
+    isDragAndDropEnabled,
     intl: {
       formatMessage
     }
@@ -101,7 +102,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   }));
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   const parentStickyNative = targetCellRef.parentElement && targetCellRef.parentElement.classList.contains(ClassName.NATIVE_STICKY);
-  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && isAnchorSupported() && targetCellRef.nodeName === 'TH' && parentStickyNative) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && isAnchorSupported() && targetCellRef.nodeName === 'TH' && parentStickyNative && isDragAndDropEnabled) {
     var _targetCellRef$datase, _targetCellRef$parent, _targetCellRef$parent2;
     const anchorName = (_targetCellRef$datase = targetCellRef.dataset.nodeAnchor) !== null && _targetCellRef$datase !== void 0 ? _targetCellRef$datase : '';
     const rowAnchorName = (_targetCellRef$parent = (_targetCellRef$parent2 = targetCellRef.parentElement) === null || _targetCellRef$parent2 === void 0 ? void 0 : _targetCellRef$parent2.dataset.nodeAnchor) !== null && _targetCellRef$parent !== void 0 ? _targetCellRef$parent : '';
@@ -114,6 +115,8 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         positionAnchor: anchorName
       } // need to do this because CSSProperties doesn't have positionAnchor property even though it's a valid CSS property
+      ,
+      "data-testid": "table-cell-options-anchor-wrapper"
     }, button);
   }
   if (stickyHeader && parentSticky && tableWrapper) {

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

@@ -25,7 +25,8 @@ const TableFloatingColumnControls = ({
   getScrollOffset,
   tableWrapperHeight,
   api,
-  isChromelessEditor
+  isChromelessEditor,
+  isDragAndDropEnabled
 }) => {
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef(null);
@@ -73,7 +74,7 @@ const TableFloatingColumnControls = ({
     containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.removeProperty('top');
   }
   let anchorStyles = {};
-  if (isAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+  if (isAnchorSupported() && isDragAndDropEnabled && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _tableRef$querySelect;
     // cast here is due to CSSProperties missing valid positionAnchor property
     anchorStyles = {

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

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
 import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { ANCHOR_VARIABLE_NAME, tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
-import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, SelectionStyle, relativeSizeToBaseFontSize, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, SelectionStyle, relativeSizeToBaseFontSize, relativeFontSizeToBase16, akEditorSelectedBorderColor } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N40A, R500 } from '@atlaskit/theme/colors';
@@ -41,6 +41,12 @@ const rangeSelectionStyles = `
   }
 }
 `;
+const rangeSelectionStylesForFakeBorders = `
+.${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} .pm-table-left-border,
+.${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} .pm-table-right-border {
+	  background: ${akEditorSelectedBorderColor};
+}
+`;
 const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
   > .${ClassName.TABLE_STICKY_SENTINEL_TOP}, > .${ClassName.TABLE_STICKY_SENTINEL_BOTTOM} {
     position: absolute;
@@ -204,47 +210,6 @@ const tableStickyHeaderFirefoxFixStyle = () => {
   }
 };
 
-/**
- * Styles for the table scroll inline shadow
- * inspired by https://css-scroll-shadows.vercel.app/
- */
-const tableScrollInlineShadowStyles = () => {
-  return css`
-		.${ClassName.TABLE_SCROLL_INLINE_SHADOW} {
-			--editor-table-shadow-cover: #fff;
-			--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),
-				linear-gradient(to right, transparent, var(--editor-table-shadow-cover) 66%),
-				linear-gradient(to right, var(--editor-table-shadow-color), transparent),
-				linear-gradient(to left, var(--editor-table-shadow-color), transparent);
-			background-size:
-				calc(var(--editor-table-shadow-size) * 3) 100%,
-				calc(var(--editor-table-shadow-size) * 3) 100%,
-				calc(var(--editor-table-shadow-size) * 1) 100%,
-				calc(var(--editor-table-shadow-size) * 1) 100%;
-			background-position:
-				left ${"var(--ds-space-300, 24px)"},
-				right ${"var(--ds-space-300, 24px)"},
-				left ${"var(--ds-space-300, 24px)"},
-				right ${"var(--ds-space-300, 24px)"};
-			background-attachment: local, local, scroll, scroll;
-			background-repeat: no-repeat;
-
-			th,
-			td {
-				mix-blend-mode: multiply;
-			}
-		}
-
-		.${ClassName.TABLE_STICKY} .${ClassName.TABLE_SCROLL_INLINE_SHADOW} tr.sticky th,
-		.${ClassName.TABLE_STICKY} .${ClassName.TABLE_SCROLL_INLINE_SHADOW} tr.sticky td {
-			mix-blend-mode: normal;
-		}
-	`;
-};
-
 // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
 export const baseTableStyles = props => {
   var _props$featureFlags;
@@ -257,6 +222,7 @@ export const baseTableStyles = props => {
 	${insertLine()};
 	${resizeHandle()};
 	${rangeSelectionStyles};
+	${fg('platform_editor_table_numbered_table_border') && rangeSelectionStylesForFakeBorders};
 	${viewModeSortStyles()};
 	${expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles};
 
@@ -288,8 +254,6 @@ export const baseTableStyles = props => {
 		}
 	}
 
-	${expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') && tableScrollInlineShadowStyles()}
-
 	.${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
 		${insertColumnButtonWrapper()}
 	}
@@ -1167,16 +1131,27 @@ export const baseTableStyles = props => {
 		top: ${tableMarginTop}px;
 	}
 
+	${fg('platform_editor_table_sticky_header_patch_1') ? `
 	.${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} > .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
 		/* +2px is to overlap the table border on the sides */
 		width: calc(anchor-size(width) + 2px);
 		height: ${tableMarginTop}px;
 		background: ${"var(--ds-surface, #FFFFFF)"};
+		top: unset;
 		position: fixed;
 		position-area: top center;
 		position-visibility: anchors-visible;
 		z-index: ${nativeStickyHeaderZIndex + 1};
-	}
+	}` : `.${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} > .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
+		/* +2px is to overlap the table border on the sides */
+		width: calc(anchor-size(width) + 2px);
+		height: ${tableMarginTop}px;
+		background: ${"var(--ds-surface, #FFFFFF)"};
+		position: fixed;
+		position-area: top center;
+		position-visibility: anchors-visible;
+		z-index: ${nativeStickyHeaderZIndex + 1};
+	}`}
 
 	/** Mask for content to the left of the column controls */
 
@@ -1205,24 +1180,36 @@ export const baseTableStyles = props => {
 		outline: 1px solid ${tableBorderColor};
 		border-left: 1px solid ${tableBorderColor};
 		background: ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"};
+		${fg('platform_editor_table_sticky_header_patch_1') ? `border-top: 1px solid ${tableBorderColor};` : ``}
 	}
 
 	.${ClassName.TABLE_CONTAINER}[data-number-column="true"].${ClassName.TABLE_SELECTED} .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.SELECTED_CELL}:not(.${ClassName.HOVERED_CELL_IN_DANGER}):first-of-type::before, .${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.SELECTED_CELL}:not(.${ClassName.HOVERED_CELL_IN_DANGER}, .${ClassName.COLUMN_SELECTED}):first-of-type::before {
 		outline: none;
 		border-left-color: ${tableBorderSelectedColor};
+		${fg('platform_editor_table_sticky_header_patch_1') ? `border-top-color: ${tableBorderSelectedColor};` : ``}
 		background: ${tableHeaderCellSelectedColor};
 	}
 
-	.${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.HOVERED_CELL_IN_DANGER}:not(.${ClassName.COLUMN_SELECTED}):first-of-type::before {
-		outline: none;
-		background: ${tableCellDeleteColor};
-	}
-
-	.${ClassName.TABLE_CONTAINER}[data-number-column="true"].${ClassName.HOVERED_DELETE_BUTTON} .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.SELECTED_CELL}:not(.${ClassName.COLUMN_SELECTED}):first-of-type::before {
+	${fg('platform_editor_table_sticky_header_patch_1') ? `.${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.HOVERED_CELL_IN_DANGER}:first-of-type::before, .${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.HOVERED_CELL_IN_DANGER}:not(.${ClassName.COLUMN_SELECTED}):first-of-type::before {
+			outline: none;
+			border-left: unset;
+			border-top: unset;
+			background: ${tableCellDeleteColor};
+		}
+		.${ClassName.TABLE_CONTAINER}[data-number-column="true"].${ClassName.TABLE_SELECTED}.${ClassName.HOVERED_DELETE_BUTTON} .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th:first-of-type::before, .${ClassName.TABLE_CONTAINER}[data-number-column="true"].${ClassName.HOVERED_DELETE_BUTTON} .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.SELECTED_CELL}:not(.${ClassName.COLUMN_SELECTED}):first-of-type::before {
 		outline: none;
 		border-left-color: ${tableBorderDeleteColor};
+		border-top-color: ${tableBorderDeleteColor};
 		background: ${tableCellDeleteColor};
-	}
+		}` : `	.${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.HOVERED_CELL_IN_DANGER}:not(.${ClassName.COLUMN_SELECTED}):first-of-type::before {
+				outline: none;
+				background: ${tableCellDeleteColor};
+			}
+			.${ClassName.TABLE_CONTAINER}[data-number-column="true"].${ClassName.HOVERED_DELETE_BUTTON} .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.SELECTED_CELL}:not(.${ClassName.COLUMN_SELECTED}):first-of-type::before {
+				outline: none;
+				border-left-color: ${tableBorderDeleteColor};
+				background: ${tableCellDeleteColor};
+		}`}
 
 	.${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} .${ClassName.NATIVE_STICKY_ACTIVE} th:first-of-type::before {
 		box-shadow: 0 6px 4px -4px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"};

package/dist/esm/nodeviews/{TableComponentNext.js → TableComponent.js}

@@ -851,7 +851,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         },
         tableWrapperHeight: this.state.tableWrapperHeight,
         api: pluginInjectionApi,
-        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
+        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
+        isDragAndDropEnabled: isDragAndDropEnabled
       }) : null;
 
       /**
@@ -916,7 +917,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
       }), /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: classnames(ClassName.TABLE_NODE_WRAPPER, expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') && ClassName.TABLE_SCROLL_INLINE_SHADOW),
+        className: classnames(ClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
           _this5.wrapper = elem;
           if (elem) {
@@ -963,14 +964,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"
-      }), expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') && /*#__PURE__*/React.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         contentEditable: false
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
         className: ClassName.TABLE_LEFT_BORDER,
         "data-with-numbered-table": node.attrs.isNumberColumnEnabled,
         "data-testid": "table-left-border"
-      }), expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') && /*#__PURE__*/React.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         contentEditable: false
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -1,18 +1,11 @@
 import React from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { findTable } from '@atlaskit/editor-tables';
-import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import TableComponentLegacy from './TableComponentLegacy';
-import TableComponentNext from './TableComponentNext';
+import TableComponent from './TableComponent';
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-var TableComponent = componentWithCondition(function () {
-  return expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant1') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3');
-}, TableComponentNext, TableComponentLegacy);
-
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */

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

@@ -24,7 +24,7 @@ export var tableHeaderView = function tableHeaderView(options) {
 };
 export var tableRowView = function tableRowView(options) {
   return function (node, view, getPos) {
-    if (isAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+    if (isAnchorSupported() && options.isDragAndDropEnabled && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && 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/esm/nodeviews/toDOM.js

@@ -40,37 +40,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
       if (config.allowColumnResizing) {
         colgroup = ['colgroup', {}].concat(_toConsumableArray(generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
       }
-
-      // For Chromeless editor, and nested tables in full page editor
-      var tableContainerDivLegacy = ['div', {
-        class: 'pm-table-container',
-        'data-number-column': node.attrs.isNumberColumnEnabled,
-        'data-layout': node.attrs.layout,
-        'data-testid': 'table-container'
-      }, ['div', {
-        class: 'pm-table-sticky-sentinel-top',
-        'data-testid': 'sticky-sentinel-top'
-      }], ['div', {
-        class: 'pm-table-row-controls-wrapper'
-      }, ['div']], ['div', {
-        class: 'pm-table-with-left-shadow',
-        style: 'visibility: hidden'
-      }], ['div', {
-        class: 'pm-table-wrapper'
-      }, ['table', attrs, ['span', {
-        class: 'pm-table-shadow-sentinel-right'
-      }], ['span', {
-        class: 'pm-table-shadow-sentinel-left'
-      }], colgroup, ['tbody', 0]]], ['div', {
-        class: 'pm-table-with-right-shadow',
-        style: 'visibility: hidden'
-      }], ['div', {
-        class: 'pm-table-sticky-sentinel-bottom',
-        'data-testid': 'sticky-sentinel-bottom'
-      }]];
-
-      // removed the left/right shadow divs
-      var tableContainerDivNext = ['div', {
+      var tableContainerDiv = ['div', {
         class: 'pm-table-container',
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -86,7 +56,6 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
       }]];
-      var tableContainerDiv = expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant1') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') ? tableContainerDivNext : tableContainerDivLegacy;
       if (!config.tableResizingEnabled || config.isNested) {
         return ['div', {
           class: 'tableView-content-wrap',

package/dist/esm/pm-plugins/main.js

@@ -69,7 +69,8 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       }),
       tableRow: tableRowView({
         eventDispatcher: eventDispatcher,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        isDragAndDropEnabled: dragAndDropEnabled
       }),
       tableCell: tableCellView({
         eventDispatcher: eventDispatcher,

package/dist/esm/pm-plugins/table-resizing/utils/consts.js

@@ -1,5 +1,4 @@
 export var COLUMN_MIN_WIDTH = 48;
-// Remove TABLE_MAX_WIDTH_OLD when cleaning up editor_tinymce_full_width_mode experiment
 export var TABLE_FULL_WIDTH = 1800;
 export var TABLE_MAX_WIDTH = 4000;
 export var FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;

package/dist/esm/ui/ContentComponent.js

@@ -104,7 +104,8 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     isContextualMenuOpen: isContextualMenuOpen,
     stickyHeader: stickyHeader,
     tableWrapper: tableWrapperTarget,
-    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
+    isDragAndDropEnabled: isDragAndDropEnabled
   }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
     tableNode: tableNode,
     tableRef: tableRef,

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

@@ -41,6 +41,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     tableWrapper = props.tableWrapper,
     targetCellPosition = props.targetCellPosition,
     isCellMenuOpenByKeyboard = props.isCellMenuOpenByKeyboard,
+    isDragAndDropEnabled = props.isDragAndDropEnabled,
     formatMessage = props.intl.formatMessage; //  : Props & WrappedComponentProps
 
   var handleClick = function handleClick() {
@@ -93,7 +94,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   var parentStickyNative = targetCellRef.parentElement && targetCellRef.parentElement.classList.contains(ClassName.NATIVE_STICKY);
-  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && isAnchorSupported() && targetCellRef.nodeName === 'TH' && parentStickyNative) {
+  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && isAnchorSupported() && targetCellRef.nodeName === 'TH' && parentStickyNative && isDragAndDropEnabled) {
     var _targetCellRef$datase, _targetCellRef$parent, _targetCellRef$parent2;
     var anchorName = (_targetCellRef$datase = targetCellRef.dataset.nodeAnchor) !== null && _targetCellRef$datase !== void 0 ? _targetCellRef$datase : '';
     var rowAnchorName = (_targetCellRef$parent = (_targetCellRef$parent2 = targetCellRef.parentElement) === null || _targetCellRef$parent2 === void 0 ? void 0 : _targetCellRef$parent2.dataset.nodeAnchor) !== null && _targetCellRef$parent !== void 0 ? _targetCellRef$parent : '';
@@ -106,6 +107,8 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         positionAnchor: anchorName
       } // need to do this because CSSProperties doesn't have positionAnchor property even though it's a valid CSS property
+      ,
+      "data-testid": "table-cell-options-anchor-wrapper"
     }, button);
   }
   if (stickyHeader && parentSticky && tableWrapper) {

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

@@ -26,7 +26,8 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     getScrollOffset = _ref.getScrollOffset,
     tableWrapperHeight = _ref.tableWrapperHeight,
     api = _ref.api,
-    isChromelessEditor = _ref.isChromelessEditor;
+    isChromelessEditor = _ref.isChromelessEditor,
+    isDragAndDropEnabled = _ref.isDragAndDropEnabled;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDragging = _useState2[0],
@@ -74,7 +75,7 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.style.removeProperty('top');
   }
   var anchorStyles = {};
-  if (isAnchorSupported() && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+  if (isAnchorSupported() && isDragAndDropEnabled && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _tableRef$querySelect;
     // cast here is due to CSSProperties missing valid positionAnchor property
     anchorStyles = {