@atlaskit/editor-plugin-table 7.24.0 → 7.24.2

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

@@ -49,7 +49,7 @@ var InsertButtonHover = function InsertButtonHover() {
   return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), ClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
 };
 export var dragInsertButtonWrapper = function dragInsertButtonWrapper() {
-  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tbottom: -3px;\n\t\tleft: 2px;\n\t}\n\n\t.", " {\n\t\tleft: -3px;\n\t\tbottom: -2px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, ClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n    background: ".concat("var(--ds-surface-overlay, white)", ";\n    color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n    border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n    border-radius: 50%;\n    height: ", dragTableInsertColumnButtonSize, "px;\n    width: ").concat(dragTableInsertColumnButtonSize, "px;\n  ")), ClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tbottom: -3px;\n\t\tleft: 2px;\n\t}\n\n\t.", " {\n\t\tleft: -3px;\n\t\tbottom: -2px;\n\t}\n\t.", " {\n\t\tleft: 6px;\n\t\tbottom: -2px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS, ClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n    background: ".concat("var(--ds-surface-overlay, white)", ";\n    color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n    border: 1px solid ", "var(--ds-background-accent-gray-subtler, #C1C7D0)", ";\n    border-radius: 50%;\n    height: ", dragTableInsertColumnButtonSize, "px;\n    width: ").concat(dragTableInsertColumnButtonSize, "px;\n  ")), ClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-background-brand-bold, ".concat(B300, ")"), "var(--ds-icon-inverse, white)");
 };
 
 // Explicit pixel values required here to ensure corner button aligns correctly

package/dist/types/nodeviews/TableContainer.d.ts

@@ -52,6 +52,7 @@ type TableContainerProps = {
     isTableAlignmentEnabled?: boolean;
     shouldUseIncreasedScalingPercent?: boolean;
     isCommentEditor?: boolean;
+    isChromelessEditor?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types/nodeviews/lazy-node-views.d.ts

@@ -16,6 +16,7 @@ type TableViewOptions = {
     pluginInjectionApi?: PluginInjectionAPI;
     isTableAlignmentEnabled?: boolean;
     isCommentEditor?: boolean;
+    isChromelessEditor?: boolean;
 };
 export declare const lazyTableView: (options: TableViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
 type TableCellViewOptions = {

package/dist/types/nodeviews/table.d.ts

@@ -32,5 +32,5 @@ export default class TableView extends ReactNodeView<Props> {
     }): boolean;
     destroy(): void;
 }
-export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean) => NodeView;
+export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean) => NodeView;
 export {};

package/dist/types/nodeviews/types.d.ts

@@ -13,6 +13,7 @@ export type TableOptions = {
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
     isCommentEditor?: boolean;
+    isChromelessEditor?: boolean;
 };
 export interface Props {
     node: PmNode;

package/dist/types/plugin.d.ts

@@ -22,6 +22,7 @@ export interface TablePluginOptions {
     isTableAlignmentEnabled?: boolean;
     isNewColumnResizingEnabled?: boolean;
     isCommentEditor?: boolean;
+    isChromelessEditor?: boolean;
 }
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
 type MediaPlugin = NextEditorPlugin<'media', {

package/dist/types/pm-plugins/main.d.ts

@@ -5,4 +5,4 @@ import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { PluginConfig, PluginInjectionAPI } from '../types';
-export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;
+export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;

package/dist/types/types.d.ts

@@ -318,6 +318,7 @@ export declare const TableCssClassName: {
     DRAG_CONTROLS_INSERT_BUTTON_INNER: string;
     DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: string;
     DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: string;
+    DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS: string;
     DRAG_CONTROLS_INSERT_BUTTON_WRAP: string;
     CONTROLS_INSERT_MARKER: string;
     CONTROLS_INSERT_COLUMN: string;
@@ -333,6 +334,7 @@ export declare const TableCssClassName: {
     /** drag and drop controls */
     DRAG_ROW_CONTROLS_WRAPPER: string;
     DRAG_ROW_CONTROLS: string;
+    DRAG_CONTROLS_CHROMELESS: string;
     DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: string;
     DRAG_ROW_FLOATING_INSERT_DOT: string;
     DRAG_COLUMN_CONTROLS: string;

package/dist/types/ui/FloatingInsertButton/InsertButton.d.ts

@@ -7,8 +7,9 @@ export interface ButtonProps {
     tableRef: HTMLElement;
     onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
     hasStickyHeaders: boolean;
+    isChromelessEditor?: boolean;
 }
-export declare const InsertButtonForDragAndDrop: ({ onMouseDown, tableRef, type, intl: { formatMessage }, hasStickyHeaders, }: ButtonProps & WrappedComponentProps) => JSX.Element;
+export declare const InsertButtonForDragAndDrop: ({ onMouseDown, tableRef, type, intl: { formatMessage }, hasStickyHeaders, isChromelessEditor, }: ButtonProps & WrappedComponentProps) => JSX.Element;
 export declare const DragAndDropInsertButton: React.FC<import("react-intl-next").WithIntlProps<ButtonProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<ButtonProps & WrappedComponentProps>;
 };

package/dist/types/ui/FloatingInsertButton/index.d.ts

@@ -22,6 +22,7 @@ export interface Props {
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
     getEditorFeatureFlags?: GetEditorFeatureFlags;
+    isChromelessEditor?: boolean;
 }
 export declare class FloatingInsertButton extends React.Component<Props & WrappedComponentProps, any> {
     static displayName: string;

package/dist/types/ui/TableFloatingColumnControls/index.d.ts

@@ -27,6 +27,7 @@ export interface Props {
     getScrollOffset?: () => number;
     tableWrapperHeight?: number;
     api?: PluginInjectionAPI;
+    isChromelessEditor?: boolean;
 }
-export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, }: Props) => JSX.Element | null;
+export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, isChromelessEditor, }: Props) => JSX.Element | null;
 export default TableFloatingColumnControls;

package/dist/types/ui/TableFloatingControls/index.d.ts

@@ -28,8 +28,9 @@ export interface TableFloatingControlsProps {
     stickyHeader?: RowStickyState;
     insertRowButtonIndex?: number;
     tableWrapperWidth?: number;
+    isChromelessEditor?: boolean;
 }
-export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, api, }: TableFloatingControlsProps & {
+export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, api, isChromelessEditor, }: TableFloatingControlsProps & {
     api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"table", {
         pluginConfiguration: import("../../plugin").TablePluginOptions | undefined;
         actions: {

package/dist/types-ts4.5/nodeviews/TableContainer.d.ts

@@ -52,6 +52,7 @@ type TableContainerProps = {
     isTableAlignmentEnabled?: boolean;
     shouldUseIncreasedScalingPercent?: boolean;
     isCommentEditor?: boolean;
+    isChromelessEditor?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/nodeviews/lazy-node-views.d.ts

@@ -16,6 +16,7 @@ type TableViewOptions = {
     pluginInjectionApi?: PluginInjectionAPI;
     isTableAlignmentEnabled?: boolean;
     isCommentEditor?: boolean;
+    isChromelessEditor?: boolean;
 };
 export declare const lazyTableView: (options: TableViewOptions) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
 type TableCellViewOptions = {

package/dist/types-ts4.5/nodeviews/table.d.ts

@@ -32,5 +32,5 @@ export default class TableView extends ReactNodeView<Props> {
     }): boolean;
     destroy(): void;
 }
-export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean) => NodeView;
+export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean) => NodeView;
 export {};

package/dist/types-ts4.5/nodeviews/types.d.ts

@@ -13,6 +13,7 @@ export type TableOptions = {
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
     isCommentEditor?: boolean;
+    isChromelessEditor?: boolean;
 };
 export interface Props {
     node: PmNode;

package/dist/types-ts4.5/plugin.d.ts

@@ -22,6 +22,7 @@ export interface TablePluginOptions {
     isTableAlignmentEnabled?: boolean;
     isNewColumnResizingEnabled?: boolean;
     isCommentEditor?: boolean;
+    isChromelessEditor?: boolean;
 }
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
 type MediaPlugin = NextEditorPlugin<'media', {

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -5,4 +5,4 @@ import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { PluginConfig, PluginInjectionAPI } from '../types';
-export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;
+export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;

package/dist/types-ts4.5/types.d.ts

@@ -318,6 +318,7 @@ export declare const TableCssClassName: {
     DRAG_CONTROLS_INSERT_BUTTON_INNER: string;
     DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: string;
     DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: string;
+    DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS: string;
     DRAG_CONTROLS_INSERT_BUTTON_WRAP: string;
     CONTROLS_INSERT_MARKER: string;
     CONTROLS_INSERT_COLUMN: string;
@@ -333,6 +334,7 @@ export declare const TableCssClassName: {
     /** drag and drop controls */
     DRAG_ROW_CONTROLS_WRAPPER: string;
     DRAG_ROW_CONTROLS: string;
+    DRAG_CONTROLS_CHROMELESS: string;
     DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: string;
     DRAG_ROW_FLOATING_INSERT_DOT: string;
     DRAG_COLUMN_CONTROLS: string;

package/dist/types-ts4.5/ui/FloatingInsertButton/InsertButton.d.ts

@@ -7,8 +7,9 @@ export interface ButtonProps {
     tableRef: HTMLElement;
     onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
     hasStickyHeaders: boolean;
+    isChromelessEditor?: boolean;
 }
-export declare const InsertButtonForDragAndDrop: ({ onMouseDown, tableRef, type, intl: { formatMessage }, hasStickyHeaders, }: ButtonProps & WrappedComponentProps) => JSX.Element;
+export declare const InsertButtonForDragAndDrop: ({ onMouseDown, tableRef, type, intl: { formatMessage }, hasStickyHeaders, isChromelessEditor, }: ButtonProps & WrappedComponentProps) => JSX.Element;
 export declare const DragAndDropInsertButton: React.FC<import("react-intl-next").WithIntlProps<ButtonProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<ButtonProps & WrappedComponentProps>;
 };

package/dist/types-ts4.5/ui/FloatingInsertButton/index.d.ts

@@ -22,6 +22,7 @@ export interface Props {
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
     getEditorFeatureFlags?: GetEditorFeatureFlags;
+    isChromelessEditor?: boolean;
 }
 export declare class FloatingInsertButton extends React.Component<Props & WrappedComponentProps, any> {
     static displayName: string;

package/dist/types-ts4.5/ui/TableFloatingColumnControls/index.d.ts

@@ -27,6 +27,7 @@ export interface Props {
     getScrollOffset?: () => number;
     tableWrapperHeight?: number;
     api?: PluginInjectionAPI;
+    isChromelessEditor?: boolean;
 }
-export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, }: Props) => JSX.Element | null;
+export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, isChromelessEditor, }: Props) => JSX.Element | null;
 export default TableFloatingColumnControls;

package/dist/types-ts4.5/ui/TableFloatingControls/index.d.ts

@@ -28,8 +28,9 @@ export interface TableFloatingControlsProps {
     stickyHeader?: RowStickyState;
     insertRowButtonIndex?: number;
     tableWrapperWidth?: number;
+    isChromelessEditor?: boolean;
 }
-export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, api, }: TableFloatingControlsProps & {
+export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, api, isChromelessEditor, }: TableFloatingControlsProps & {
     api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"table", {
         pluginConfiguration: import("../../plugin").TablePluginOptions | undefined;
         actions: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.24.0",
+	"version": "7.24.2",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.7.0",
+		"@atlaskit/icon": "^22.8.0",
 		"@atlaskit/menu": "^2.8.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",

package/src/nodeviews/TableComponent.tsx

@@ -343,6 +343,28 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		this.props.view.dispatch(tr);
 	};
 
+	// 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.
+	removeInlineTableWidth() {
+		const { isResizing, getNode, view, getPos } = this.props;
+		if (!this.table) {
+			return;
+		}
+
+		const tableNode = getNode();
+		const newTableWidth = tableNode.attrs.width;
+
+		const start = getPos() || 0;
+		const depth = view.state.doc.resolve(start).depth;
+		if (depth !== 0) {
+			return;
+		}
+
+		if (!isResizing && newTableWidth === null) {
+			this.table.style.width = '';
+		}
+	}
+
 	handleColgroupUpdates(force = false) {
 		const { getNode, containerWidth, isResizing, view, getPos, getEditorFeatureFlags } = this.props;
 
@@ -498,6 +520,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			clearHoverSelection()(view.state, view.dispatch);
 		}
 
+		if (this.props.options?.isCommentEditor && options?.isTableResizingEnabled) {
+			this.removeInlineTableWidth();
+		}
+
 		if (this.wrapper?.parentElement && this.table && !this.overflowShadowsObserver) {
 			if (this.props.isDragAndDropEnabled) {
 				// requestAnimationFrame is used here to fix a race condition issue
@@ -533,6 +559,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				{ priority: 'important' },
 			);
 		}
+
 		if (currentTable.attrs.__autoSize) {
 			// Wait for next tick to handle auto sizing, gives the browser time to do layout calc etc.
 			this.handleAutoSizeDebounced();
@@ -566,6 +593,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 			this.handleTableResizingDebounced();
 		}
+
 		if (isOverflowAnalyticsEnabled) {
 			const newIsOverflowing =
 				this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
@@ -703,6 +731,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				stickyHeader={this.state.stickyHeader}
 				tableWrapperWidth={this.state.tableWrapperWidth}
 				api={pluginInjectionApi}
+				isChromelessEditor={options?.isChromelessEditor}
 			/>
 		);
 		const tableContainerWidth = getTableContainerWidth(node);
@@ -729,6 +758,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				getScrollOffset={() => this.wrapper?.scrollLeft || 0}
 				tableWrapperHeight={this.state.tableWrapperHeight}
 				api={pluginInjectionApi}
+				isChromelessEditor={options?.isChromelessEditor}
 			/>
 		) : null;
 
@@ -789,6 +819,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				isTableAlignmentEnabled={isTableAlignmentEnabled}
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
 				isCommentEditor={options?.isCommentEditor}
+				isChromelessEditor={options?.isChromelessEditor}
 			>
 				<div
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/src/nodeviews/TableContainer.tsx

@@ -405,6 +405,7 @@ type TableContainerProps = {
 	isTableAlignmentEnabled?: boolean;
 	shouldUseIncreasedScalingPercent?: boolean;
 	isCommentEditor?: boolean;
+	isChromelessEditor?: boolean;
 };
 
 export const TableContainer = ({
@@ -426,6 +427,7 @@ export const TableContainer = ({
 	isTableAlignmentEnabled,
 	shouldUseIncreasedScalingPercent,
 	isCommentEditor,
+	isChromelessEditor,
 }: PropsWithChildren<TableContainerProps>) => {
 	if (isTableResizingEnabled && !isNested) {
 		return (
@@ -463,6 +465,7 @@ export const TableContainer = ({
 			style={{
 				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
 				width: 'inherit',
+				marginLeft: isChromelessEditor ? 18 : undefined,
 			}}
 		>
 			{children}

package/src/nodeviews/TableResizer.tsx

@@ -533,13 +533,13 @@ export const TableResizer = ({
 	const handleResizeStop = useCallback<HandleResize>(
 		(originalState, delta) => {
 			isResizing.current = false;
-			let newWidth = originalState.width + delta.width;
+			let newWidth: number | undefined = originalState.width + delta.width;
 			const { state, dispatch } = editorView;
 			const pos = getPos();
 			const currentTableNodeLocalId = node?.attrs?.localId ?? '';
 
 			const tableMaxWidth = isCommentEditor
-				? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR
+				? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
 				: TABLE_MAX_WIDTH;
 
 			newWidth =
@@ -598,13 +598,13 @@ export const TableResizer = ({
 			displayGapCursor(true);
 			dispatch(tr);
 
-			if (delta.width < 0) {
+			if (delta.width < 0 && newWidth !== undefined) {
 				pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify(
 					formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
 						newWidth: newWidth,
 					}),
 				);
-			} else if (delta.width > 0) {
+			} else if (delta.width > 0 && newWidth !== undefined) {
 				pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify(
 					formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
 						newWidth: newWidth,
@@ -614,7 +614,7 @@ export const TableResizer = ({
 
 			// Hide guidelines when resizing stops
 			displayGuideline([]);
-			updateWidth(newWidth);
+			newWidth !== undefined && updateWidth(newWidth);
 			scheduleResize.cancel();
 
 			if (onResizeStop) {
@@ -632,7 +632,6 @@ export const TableResizer = ({
 			tableRef,
 			scheduleResize,
 			displayGuideline,
-			containerWidth,
 			attachAnalyticsEvent,
 			endMeasure,
 			onResizeStop,

package/src/nodeviews/lazy-node-views.ts

@@ -23,6 +23,7 @@ type TableViewOptions = {
 	pluginInjectionApi?: PluginInjectionAPI;
 	isTableAlignmentEnabled?: boolean;
 	isCommentEditor?: boolean;
+	isChromelessEditor?: boolean;
 };
 
 export const lazyTableView = (options: TableViewOptions) => {
@@ -40,6 +41,7 @@ export const lazyTableView = (options: TableViewOptions) => {
 				options.pluginInjectionApi,
 				options.isTableAlignmentEnabled,
 				options.isCommentEditor,
+				options.isChromelessEditor,
 			);
 		};
 	}
@@ -65,6 +67,7 @@ export const lazyTableView = (options: TableViewOptions) => {
 					pluginInjectionApi,
 					isTableAlignmentEnabled,
 					isCommentEditor,
+					isChromelessEditor,
 				} = getNodeViewOptions();
 
 				return createTableView(
@@ -79,6 +82,7 @@ export const lazyTableView = (options: TableViewOptions) => {
 					pluginInjectionApi,
 					isTableAlignmentEnabled,
 					isCommentEditor,
+					isChromelessEditor,
 				);
 			};
 		});

package/src/nodeviews/table.tsx

@@ -365,6 +365,7 @@ export const createTableView = (
 	pluginInjectionApi?: PluginInjectionAPI,
 	isTableAlignmentEnabled?: boolean,
 	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
 ): NodeView => {
 	const {
 		pluginConfig,
@@ -392,6 +393,7 @@ export const createTableView = (
 			isTableScalingEnabled, // same as options.isTableScalingEnabled
 			isTableAlignmentEnabled,
 			isCommentEditor,
+			isChromelessEditor,
 		},
 		getEditorContainerWidth,
 		getEditorFeatureFlags,

package/src/nodeviews/types.ts

@@ -15,6 +15,7 @@ export type TableOptions = {
 	isTableScalingEnabled?: boolean;
 	isTableAlignmentEnabled?: boolean;
 	isCommentEditor?: boolean;
+	isChromelessEditor?: boolean;
 };
 
 export interface Props {

package/src/plugin.tsx

@@ -98,6 +98,7 @@ export interface TablePluginOptions {
 	isTableAlignmentEnabled?: boolean;
 	isNewColumnResizingEnabled?: boolean;
 	isCommentEditor?: boolean;
+	isChromelessEditor?: boolean;
 }
 
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
@@ -329,6 +330,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableScalingEnabled,
 							isTableAlignmentEnabled,
 							isCommentEditor,
+							isChromelessEditor,
 						} = options || ({} as TablePluginOptions);
 
 						return createPlugin(
@@ -350,6 +352,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableAlignmentEnabled,
 							shouldUseIncreasedScalingPercent,
 							isCommentEditor,
+							isChromelessEditor,
 						);
 					},
 				},
@@ -632,6 +635,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 											getEditorFeatureFlags={
 												options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags
 											}
+											isChromelessEditor={options?.isChromelessEditor}
 										/>
 									)}
 									{options?.allowContextualMenu && (

package/src/pm-plugins/main.ts

@@ -97,6 +97,7 @@ export const createPlugin = (
 	isTableAlignmentEnabled?: boolean,
 	shouldUseIncreasedScalingPercent?: boolean,
 	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
 ) => {
 	const state = createPluginState(dispatch, {
 		pluginConfig,
@@ -360,6 +361,7 @@ export const createPlugin = (
 					pluginInjectionApi,
 					isTableAlignmentEnabled,
 					isCommentEditor,
+					isChromelessEditor,
 				}),
 				tableRow: lazyTableRowView({ eventDispatcher }),
 				tableCell: lazyTableCellView({ eventDispatcher }),

package/src/types.ts

@@ -369,6 +369,7 @@ export const TableCssClassName = {
 	DRAG_CONTROLS_INSERT_BUTTON_INNER: `${tablePrefixSelector}-controls__drag-insert-button-inner`,
 	DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: `${tablePrefixSelector}-controls__drag-insert-button-inner-column`,
 	DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: `${tablePrefixSelector}-controls__drag-insert-button-inner-row`,
+	DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS: `${tablePrefixSelector}-controls__drag-insert-button-inner-row-chromeless`,
 	DRAG_CONTROLS_INSERT_BUTTON_WRAP: `${tablePrefixSelector}-controls__drag-insert-button-wrap`,
 
 	CONTROLS_INSERT_MARKER: `${tablePrefixSelector}-controls__insert-marker`,
@@ -388,6 +389,7 @@ export const TableCssClassName = {
 	/** drag and drop controls */
 	DRAG_ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-drag-row-controls-wrapper`,
 	DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
+	DRAG_CONTROLS_CHROMELESS: `drag-controls-chromeless`,
 	DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
 	DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,
 

package/src/ui/FloatingInsertButton/InsertButton.tsx

@@ -23,6 +23,7 @@ export interface ButtonProps {
 	tableRef: HTMLElement;
 	onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
 	hasStickyHeaders: boolean;
+	isChromelessEditor?: boolean;
 }
 
 const getInsertLineHeight = (
@@ -64,12 +65,16 @@ const getNumberColumnWidth = (tableRef: HTMLElement, isDragAndDropEnabled?: bool
 	return 0;
 };
 
-const getInsertLineWidth = (tableRef: HTMLElement, isDragAndDropEnabled?: boolean) => {
+const getInsertLineWidth = (
+	tableRef: HTMLElement,
+	isDragAndDropEnabled?: boolean,
+	isChromelessEditor?: boolean,
+) => {
 	// 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.
 	const LINE_OFFSET = 4;
-	const DRAG_LINE_OFFSET = 6;
+	const DRAG_LINE_OFFSET = isChromelessEditor ? 14 : 6;
 	const { parentElement, offsetWidth } = tableRef;
 	const parentOffsetWidth = parentElement!.offsetWidth;
 	const { scrollLeft } = parentElement!;
@@ -97,6 +102,7 @@ export const InsertButtonForDragAndDrop = ({
 	type,
 	intl: { formatMessage },
 	hasStickyHeaders,
+	isChromelessEditor,
 }: ButtonProps & WrappedComponentProps) => {
 	const isRow = type === 'row';
 
@@ -114,8 +120,10 @@ export const InsertButtonForDragAndDrop = ({
 				<div
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 					className={classnames(ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, {
-						[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW]: isRow,
+						[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW]: isRow && !isChromelessEditor,
 						[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN]: !isRow,
+						[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS]:
+							isRow && isChromelessEditor,
 					})}
 				>
 					<button
@@ -147,7 +155,7 @@ export const InsertButtonForDragAndDrop = ({
 					style={
 						type === 'row'
 							? {
-									width: getInsertLineWidth(tableRef, true),
+									width: getInsertLineWidth(tableRef, true, isChromelessEditor),
 									left: token('space.150', '12px'),
 								}
 							: {

package/src/ui/FloatingInsertButton/index.tsx

@@ -25,7 +25,7 @@ import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-s
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../commands-with-analytics';
 import { TableCssClassName as ClassName } from '../../types';
@@ -52,6 +52,7 @@ export interface Props {
 	dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
 	editorAnalyticsAPI?: EditorAnalyticsAPI;
 	getEditorFeatureFlags?: GetEditorFeatureFlags;
+	isChromelessEditor?: boolean;
 }
 
 export class FloatingInsertButton extends React.Component<Props & WrappedComponentProps, any> {
@@ -76,6 +77,7 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 			isHeaderRowEnabled,
 			isDragAndDropEnabled,
 			dispatchAnalyticsEvent,
+			isChromelessEditor,
 		} = this.props;
 
 		// TODO: temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
@@ -199,6 +201,7 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 						tableRef={tableRef}
 						onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
 						hasStickyHeaders={this.props.hasStickyHeaders || false}
+						isChromelessEditor={isChromelessEditor}
 					/>
 				) : (
 					<InsertButton
@@ -273,7 +276,7 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 			const shouldUseIncreasedScalingPercent =
 				isTableScalingEnabled &&
 				tableWithFixedColumnWidthsOption &&
-				getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+				fg('platform.editor.table.use-increased-scaling-percent');
 
 			const { state, dispatch } = editorView;
 			insertColumnWithAnalytics(