@atlaskit/editor-plugin-table 7.24.0 → 7.24.1

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.1",
 	"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

@@ -703,6 +703,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 +730,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 +791,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/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(

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -5,7 +5,7 @@ import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
@@ -37,6 +37,7 @@ export interface Props {
 	getScrollOffset?: () => number;
 	tableWrapperHeight?: number;
 	api?: PluginInjectionAPI;
+	isChromelessEditor?: boolean;
 }
 
 export const TableFloatingColumnControls = ({
@@ -56,6 +57,7 @@ export const TableFloatingColumnControls = ({
 	getScrollOffset,
 	tableWrapperHeight,
 	api,
+	isChromelessEditor,
 }: Props) => {
 	const [isDragging, setIsDragging] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -109,7 +111,10 @@ export const TableFloatingColumnControls = ({
 		<div
 			ref={containerRef}
 			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-			className={ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}
+			className={
+				ClassName.DRAG_COLUMN_CONTROLS_WRAPPER +
+				(isChromelessEditor ? ' ' + ClassName.DRAG_CONTROLS_CHROMELESS : '')
+			}
 			data-testid="table-floating-column-controls-wrapper"
 		>
 			<ColumnControls
@@ -128,7 +133,7 @@ export const TableFloatingColumnControls = ({
 				isNumberColumnEnabled={isNumberColumnEnabled}
 				isDragging={isDragging}
 				getScrollOffset={getScrollOffset}
-				api={getBooleanFF('platform.editor.table.use-shared-state-hook') ? api : undefined}
+				api={fg('platform.editor.table.use-shared-state-hook') ? api : undefined}
 			/>
 			{isDragging && (
 				<ColumnDropTargets

package/src/ui/TableFloatingControls/index.tsx

@@ -47,6 +47,7 @@ export interface TableFloatingControlsProps {
 	stickyHeader?: RowStickyState;
 	insertRowButtonIndex?: number;
 	tableWrapperWidth?: number;
+	isChromelessEditor?: boolean;
 }
 
 export const TableFloatingControls = ({
@@ -67,6 +68,7 @@ export const TableFloatingControls = ({
 	isTableHovered,
 	tableWrapperWidth,
 	api,
+	isChromelessEditor,
 }: TableFloatingControlsProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
 	const _selectRow = useCallback(
 		(row: number, expand: boolean) => {
@@ -126,7 +128,9 @@ export const TableFloatingControls = ({
 		stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
 
 	const wrapperClassName = isDragAndDropEnabled
-		? ClassName.DRAG_ROW_CONTROLS_WRAPPER
+		? isChromelessEditor
+			? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.DRAG_CONTROLS_CHROMELESS
+			: ClassName.DRAG_ROW_CONTROLS_WRAPPER
 		: ClassName.ROW_CONTROLS_WRAPPER;
 
 	const tablePos = findTable(editorView.state.selection)?.pos;

package/src/ui/common-styles.ts

@@ -514,10 +514,18 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 			}
 		}
 
+		.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.DRAG_CONTROLS_CHROMELESS} {
+			left: -4px;
+		}
+
 		.${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
 			padding: 0 ${tablePadding}px;
 		}
 
+		.${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}.${ClassName.DRAG_CONTROLS_CHROMELESS} {
+			left: -8px;
+		}
+
 		&.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
 			padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
 		}