@atlaskit/editor-plugin-table 7.24.0 → 7.24.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 7.24.2
+
+### Patch Changes
+
+- [#124709](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124709)
+  [`a52d9a09ddd5c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a52d9a09ddd5c) -
+  [ux] When table resized to full-width in comment editor, it inherits the width of the editor.
+
+## 7.24.1
+
+### Patch Changes
+
+- [#124890](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124890)
+  [`04951dd1969d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/04951dd1969d5) -
+  [ux] ED-24278: Turned on table dnd in chromeless editor
+- Updated dependencies
+
 ## 7.24.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -471,18 +471,43 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         clearTimeout(this.initialOverflowCaptureTimerId);
       }
     }
+  }, {
+    key: "removeInlineTableWidth",
+    value:
+    // Should be called only when table node width is reset to undefined in Comment Editor
+    // Maybe replaced by handleColgroupUpdates as we implement new table's support in Comment Editor.
+    function removeInlineTableWidth() {
+      var _this$props9 = this.props,
+        isResizing = _this$props9.isResizing,
+        getNode = _this$props9.getNode,
+        view = _this$props9.view,
+        getPos = _this$props9.getPos;
+      if (!this.table) {
+        return;
+      }
+      var tableNode = getNode();
+      var newTableWidth = tableNode.attrs.width;
+      var start = getPos() || 0;
+      var depth = view.state.doc.resolve(start).depth;
+      if (depth !== 0) {
+        return;
+      }
+      if (!isResizing && newTableWidth === null) {
+        this.table.style.width = '';
+      }
+    }
   }, {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
       var _this2 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var _this$props9 = this.props,
-        getNode = _this$props9.getNode,
-        containerWidth = _this$props9.containerWidth,
-        isResizing = _this$props9.isResizing,
-        view = _this$props9.view,
-        getPos = _this$props9.getPos,
-        getEditorFeatureFlags = _this$props9.getEditorFeatureFlags;
+      var _this$props10 = this.props,
+        getNode = _this$props10.getNode,
+        containerWidth = _this$props10.containerWidth,
+        isResizing = _this$props10.isResizing,
+        view = _this$props10.view,
+        getPos = _this$props10.getPos,
+        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
       if (!this.table) {
         return;
       }
@@ -551,18 +576,19 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$wrapper,
+      var _this$props$options3,
+        _this$wrapper,
         _this3 = this;
-      var _this$props10 = this.props,
-        view = _this$props10.view,
-        getNode = _this$props10.getNode,
-        isMediaFullscreen = _this$props10.isMediaFullscreen,
-        allowColumnResizing = _this$props10.allowColumnResizing,
-        isResizing = _this$props10.isResizing,
-        options = _this$props10.options,
-        isTableScalingEnabled = _this$props10.isTableScalingEnabled,
-        getPos = _this$props10.getPos,
-        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
+      var _this$props11 = this.props,
+        view = _this$props11.view,
+        getNode = _this$props11.getNode,
+        isMediaFullscreen = _this$props11.isMediaFullscreen,
+        allowColumnResizing = _this$props11.allowColumnResizing,
+        isResizing = _this$props11.isResizing,
+        options = _this$props11.options,
+        isTableScalingEnabled = _this$props11.isTableScalingEnabled,
+        getPos = _this$props11.getPos,
+        getEditorFeatureFlags = _this$props11.getEditorFeatureFlags;
       var isInDanger = this.props.isInDanger;
       var table = (0, _utils2.findTable)(view.state.selection);
       if (!(0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook')) {
@@ -590,6 +616,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
+      if ((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+        this.removeInlineTableWidth();
+      }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
         if (this.props.isDragAndDropEnabled) {
           // requestAnimationFrame is used here to fix a race condition issue
@@ -675,30 +704,30 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this4 = this,
         _classnames;
-      var _this$props11 = this.props,
-        view = _this$props11.view,
-        getNode = _this$props11.getNode,
-        isResizing = _this$props11.isResizing,
-        _this$props11$allowCo = _this$props11.allowControls,
-        allowControls = _this$props11$allowCo === void 0 ? true : _this$props11$allowCo,
-        isHeaderRowEnabled = _this$props11.isHeaderRowEnabled,
-        ordering = _this$props11.ordering,
-        isHeaderColumnEnabled = _this$props11.isHeaderColumnEnabled,
-        tableActive = _this$props11.tableActive,
-        containerWidth = _this$props11.containerWidth,
-        options = _this$props11.options,
-        getPos = _this$props11.getPos,
-        pluginInjectionApi = _this$props11.pluginInjectionApi,
-        isDragAndDropEnabled = _this$props11.isDragAndDropEnabled,
-        getEditorFeatureFlags = _this$props11.getEditorFeatureFlags,
-        isTableScalingEnabled = _this$props11.isTableScalingEnabled,
-        isTableAlignmentEnabled = _this$props11.isTableAlignmentEnabled;
       var _this$props12 = this.props,
-        isInDanger = _this$props12.isInDanger,
-        hoveredRows = _this$props12.hoveredRows,
-        hoveredCell = _this$props12.hoveredCell,
-        isTableHovered = _this$props12.isTableHovered,
-        isWholeTableInDanger = _this$props12.isWholeTableInDanger;
+        view = _this$props12.view,
+        getNode = _this$props12.getNode,
+        isResizing = _this$props12.isResizing,
+        _this$props12$allowCo = _this$props12.allowControls,
+        allowControls = _this$props12$allowCo === void 0 ? true : _this$props12$allowCo,
+        isHeaderRowEnabled = _this$props12.isHeaderRowEnabled,
+        ordering = _this$props12.ordering,
+        isHeaderColumnEnabled = _this$props12.isHeaderColumnEnabled,
+        tableActive = _this$props12.tableActive,
+        containerWidth = _this$props12.containerWidth,
+        options = _this$props12.options,
+        getPos = _this$props12.getPos,
+        pluginInjectionApi = _this$props12.pluginInjectionApi,
+        isDragAndDropEnabled = _this$props12.isDragAndDropEnabled,
+        getEditorFeatureFlags = _this$props12.getEditorFeatureFlags,
+        isTableScalingEnabled = _this$props12.isTableScalingEnabled,
+        isTableAlignmentEnabled = _this$props12.isTableAlignmentEnabled;
+      var _this$props13 = this.props,
+        isInDanger = _this$props13.isInDanger,
+        hoveredRows = _this$props13.hoveredRows,
+        hoveredCell = _this$props13.hoveredCell,
+        isTableHovered = _this$props13.isTableHovered,
+        isWholeTableInDanger = _this$props13.isWholeTableInDanger;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
@@ -736,7 +765,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader,
         tableWrapperWidth: this.state.tableWrapperWidth,
-        api: pluginInjectionApi
+        api: pluginInjectionApi,
+        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
       });
       var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(node);
       var colControls = isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_TableFloatingColumnControls.default, {
@@ -764,7 +794,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           return ((_this4$wrapper = _this4.wrapper) === null || _this4$wrapper === void 0 ? void 0 : _this4$wrapper.scrollLeft) || 0;
         },
         tableWrapperHeight: this.state.tableWrapperHeight,
-        api: pluginInjectionApi
+        api: pluginInjectionApi,
+        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
       }) : null;
       var shadowPadding = allowControls && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
       var shadowStyle = (0, _memoizeOne.default)(function (visible) {
@@ -810,7 +841,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isWholeTableInDanger: isWholeTableInDanger,
         isTableAlignmentEnabled: isTableAlignmentEnabled,
         shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
-        isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
+        isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
       }, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,

package/dist/cjs/nodeviews/TableContainer.js

@@ -297,7 +297,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
     isTableWithFixedColumnWidthsOptionEnabled = _ref6.isTableWithFixedColumnWidthsOptionEnabled,
     isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
     shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent,
-    isCommentEditor = _ref6.isCommentEditor;
+    isCommentEditor = _ref6.isCommentEditor,
+    isChromelessEditor = _ref6.isChromelessEditor;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -329,7 +330,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
     }),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      width: 'inherit'
+      width: 'inherit',
+      marginLeft: isChromelessEditor ? 18 : undefined
     }
   }, children);
 };

package/dist/cjs/nodeviews/TableResizer.js

@@ -297,7 +297,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       dispatch = editorView.dispatch;
     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 ? containerWidth - _utils3.TABLE_OFFSET_IN_COMMENT_EDITOR : _utils3.TABLE_MAX_WIDTH;
+    var tableMaxWidth = isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
+    : _utils3.TABLE_MAX_WIDTH;
     newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
     var tr = state.tr.setMeta(_tableWidth.pluginKey, {
       resizing: false,
@@ -337,12 +338,12 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     }
     displayGapCursor(true);
     dispatch(tr);
-    if (delta.width < 0) {
+    if (delta.width < 0 && newWidth !== undefined) {
       var _pluginInjectionApi$a3;
       pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeDecreaseScreenReaderInformation, {
         newWidth: newWidth
       }));
-    } else if (delta.width > 0) {
+    } else if (delta.width > 0 && newWidth !== undefined) {
       var _pluginInjectionApi$a4;
       pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeIncreaseScreenReaderInformation, {
         newWidth: newWidth
@@ -351,13 +352,13 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
 
     // Hide guidelines when resizing stops
     displayGuideline([]);
-    updateWidth(newWidth);
+    newWidth !== undefined && updateWidth(newWidth);
     scheduleResize.cancel();
     if (onResizeStop) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, containerWidth, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/cjs/nodeviews/lazy-node-views.js

@@ -16,7 +16,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var lazyTableView = exports.lazyTableView = function lazyTableView(options) {
   if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
     return function (node, view, getPos) {
-      return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled, options.isCommentEditor);
+      return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled, options.isCommentEditor, options.isChromelessEditor);
     };
   }
   var loader = function loader() {
@@ -34,8 +34,9 @@ var lazyTableView = exports.lazyTableView = function lazyTableView(options) {
           dispatchAnalyticsEvent = _getNodeViewOptions.dispatchAnalyticsEvent,
           pluginInjectionApi = _getNodeViewOptions.pluginInjectionApi,
           isTableAlignmentEnabled = _getNodeViewOptions.isTableAlignmentEnabled,
-          isCommentEditor = _getNodeViewOptions.isCommentEditor;
-        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor);
+          isCommentEditor = _getNodeViewOptions.isCommentEditor,
+          isChromelessEditor = _getNodeViewOptions.isChromelessEditor;
+        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor, isChromelessEditor);
       };
     });
     return result;

package/dist/cjs/nodeviews/table.js

@@ -290,7 +290,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
   }]);
   return TableView;
 }(_reactNodeView.default);
-var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor) {
+var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor, isChromelessEditor) {
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
     pluginConfig = _getPluginState2.pluginConfig,
     isFullWidthModeEnabled = _getPluginState2.isFullWidthModeEnabled,
@@ -317,7 +317,8 @@ var createTableView = exports.createTableView = function createTableView(node, v
       isTableScalingEnabled: isTableScalingEnabled,
       // same as options.isTableScalingEnabled
       isTableAlignmentEnabled: isTableAlignmentEnabled,
-      isCommentEditor: isCommentEditor
+      isCommentEditor: isCommentEditor,
+      isChromelessEditor: isChromelessEditor
     },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,

package/dist/cjs/plugin.js

@@ -204,8 +204,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dragAndDropEnabled = _ref3.dragAndDropEnabled,
             isTableScalingEnabled = _ref3.isTableScalingEnabled,
             isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
-            isCommentEditor = _ref3.isCommentEditor;
-          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor);
+            isCommentEditor = _ref3.isCommentEditor,
+            isChromelessEditor = _ref3.isChromelessEditor;
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
         }
       }, {
         name: 'tablePMColResizing',
@@ -433,7 +434,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
-            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
+            isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
           }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/_react.default.createElement(_FloatingContextualMenu.default, {
             editorView: editorView,
             mountPoint: popupsMountPoint,

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

@@ -30,7 +30,7 @@ var _pluginFactory = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 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 createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor) {
+var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) {
   var _accessibilityUtils;
   var state = (0, _pluginFactory.createPluginState)(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
@@ -260,7 +260,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
           dispatchAnalyticsEvent: dispatchAnalyticsEvent,
           pluginInjectionApi: pluginInjectionApi,
           isTableAlignmentEnabled: isTableAlignmentEnabled,
-          isCommentEditor: isCommentEditor
+          isCommentEditor: isCommentEditor,
+          isChromelessEditor: isChromelessEditor
         }),
         tableRow: (0, _lazyNodeViews.lazyTableRowView)({
           eventDispatcher: eventDispatcher

package/dist/cjs/types.js

@@ -81,6 +81,7 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   DRAG_CONTROLS_INSERT_BUTTON_INNER: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-inner"),
   DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-inner-column"),
   DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-inner-row"),
+  DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-inner-row-chromeless"),
   DRAG_CONTROLS_INSERT_BUTTON_WRAP: "".concat(_adfSchema.tablePrefixSelector, "-controls__drag-insert-button-wrap"),
   CONTROLS_INSERT_MARKER: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-marker"),
   CONTROLS_INSERT_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-column"),
@@ -96,6 +97,7 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   /** drag and drop controls */
   DRAG_ROW_CONTROLS_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-drag-row-controls-wrapper"),
   DRAG_ROW_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-drag-row-controls"),
+  DRAG_CONTROLS_CHROMELESS: "drag-controls-chromeless",
   DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-drag-row-floating-insert-dot-wrapper"),
   DRAG_ROW_FLOATING_INSERT_DOT: "".concat(_adfSchema.tablePrefixSelector, "-drag-row-floating-insert-dot"),
   DRAG_COLUMN_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-drag-column-controls"),

package/dist/cjs/ui/FloatingInsertButton/InsertButton.js

@@ -41,12 +41,12 @@ var getNumberColumnWidth = function getNumberColumnWidth(tableRef, isDragAndDrop
   }
   return 0;
 };
-var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled) {
+var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled, isChromelessEditor) {
   // The line gets width 100% from the table,
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
   var LINE_OFFSET = 4;
-  var DRAG_LINE_OFFSET = 6;
+  var DRAG_LINE_OFFSET = isChromelessEditor ? 14 : 6;
   var parentElement = tableRef.parentElement,
     offsetWidth = tableRef.offsetWidth;
   var parentOffsetWidth = parentElement.offsetWidth;
@@ -66,7 +66,8 @@ var InsertButtonForDragAndDrop = exports.InsertButtonForDragAndDrop = function I
     tableRef = _ref2.tableRef,
     type = _ref2.type,
     formatMessage = _ref2.intl.formatMessage,
-    hasStickyHeaders = _ref2.hasStickyHeaders;
+    hasStickyHeaders = _ref2.hasStickyHeaders,
+    isChromelessEditor = _ref2.isChromelessEditor;
   var isRow = type === 'row';
   var content = /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
@@ -76,7 +77,7 @@ var InsertButtonForDragAndDrop = exports.InsertButtonForDragAndDrop = function I
     position: "top"
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, (_classnames = {}, (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, isRow), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, !isRow), _classnames))
+    className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, (_classnames = {}, (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, isRow && !isChromelessEditor), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, !isRow), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS, isRow && isChromelessEditor), _classnames))
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -100,7 +101,7 @@ var InsertButtonForDragAndDrop = exports.InsertButtonForDragAndDrop = function I
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: type === 'row' ? {
-      width: getInsertLineWidth(tableRef, true),
+      width: getInsertLineWidth(tableRef, true, isChromelessEditor),
       left: "var(--ds-space-150, 12px)"
     } : {
       height: getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,

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

@@ -59,7 +59,8 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
         isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
         isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
         isDragAndDropEnabled = _this$props.isDragAndDropEnabled,
-        dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent;
+        dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
+        isChromelessEditor = _this$props.isChromelessEditor;
 
       // TODO: temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
       if (isDragAndDropEnabled && (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0)) {
@@ -144,7 +145,8 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
         type: type,
         tableRef: tableRef,
         onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
-        hasStickyHeaders: this.props.hasStickyHeaders || false
+        hasStickyHeaders: this.props.hasStickyHeaders || false,
+        isChromelessEditor: isChromelessEditor
       }) : /*#__PURE__*/_react.default.createElement(_InsertButton.default, {
         type: type,
         tableRef: tableRef,
@@ -208,7 +210,7 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
           tableDuplicateCellColouring = _ref$tableDuplicateCe === void 0 ? false : _ref$tableDuplicateCe,
           _ref$tableWithFixedCo = _ref.tableWithFixedColumnWidthsOption,
           tableWithFixedColumnWidthsOption = _ref$tableWithFixedCo === void 0 ? false : _ref$tableWithFixedCo;
-        var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
+        var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent');
         var state = editorView.state,
           dispatch = editorView.dispatch;
         (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);

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

@@ -32,7 +32,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     isNumberColumnEnabled = _ref.isNumberColumnEnabled,
     getScrollOffset = _ref.getScrollOffset,
     tableWrapperHeight = _ref.tableWrapperHeight,
-    api = _ref.api;
+    api = _ref.api,
+    isChromelessEditor = _ref.isChromelessEditor;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDragging = _useState2[0],
@@ -84,7 +85,7 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     ref: containerRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
+    className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER + (isChromelessEditor ? ' ' + _types.TableCssClassName.DRAG_CONTROLS_CHROMELESS : ''),
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_ColumnControls.ColumnControls, {
     editorView: editorView,
@@ -102,7 +103,7 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     isNumberColumnEnabled: isNumberColumnEnabled,
     isDragging: isDragging,
     getScrollOffset: getScrollOffset,
-    api: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook') ? api : undefined
+    api: (0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook') ? api : undefined
   }), isDragging && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,

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

@@ -38,7 +38,8 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
     hoveredCell = _ref.hoveredCell,
     isTableHovered = _ref.isTableHovered,
     tableWrapperWidth = _ref.tableWrapperWidth,
-    api = _ref.api;
+    api = _ref.api,
+    isChromelessEditor = _ref.isChromelessEditor;
   var _selectRow = (0, _react.useCallback)(function (row, expand) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
@@ -81,7 +82,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
     return null;
   }
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  var wrapperClassName = isDragAndDropEnabled ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER;
+  var wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + _types.TableCssClassName.DRAG_CONTROLS_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 isNested = tablePos !== undefined && (0, _nodes.isTableNested)(editorView.state, tablePos);
   var shouldShowCornerControls = (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24041') ? !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop) || isNested : !(featureFlagsState !== null && featureFlagsState !== void 0 && featureFlagsState.elementDragAndDrop);