@atlaskit/editor-plugin-table 19.0.1 → 20.0.0

package/dist/esm/ui/toolbar.js

@@ -32,6 +32,7 @@ import AlignImageLeftIcon from '@atlaskit/icon/core/align-image-left';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import CustomizeIcon from '@atlaskit/icon/core/customize';
 import DeleteIcon from '@atlaskit/icon/core/delete';
+import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
 import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -48,6 +49,7 @@ import { normaliseAlignment } from '../pm-plugins/utils/alignment';
 import { isTableNested } from '../pm-plugins/utils/nodes';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../pm-plugins/utils/selection';
 import { getMergedCellsPositions } from '../pm-plugins/utils/table';
+import { applyMeasuredWidthToSelectedTable, isContentModeSupported } from '../pm-plugins/utils/tableMode';
 import { TableCssClassName } from '../types';
 import { FloatingAlignmentButtons } from './FloatingAlignmentButtons/FloatingAlignmentButtons';
 export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
@@ -441,7 +443,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
       // We don't want to show floating toolbar while resizing the table
       var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
       if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
-        var _api$limitedMode$shar, _api$limitedMode, _api$extension, _api$extension2;
+        var _api$limitedMode$shar, _api$limitedMode, _api$editorViewMode2, _api$extension, _api$extension2;
         var isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
         var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
         var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
@@ -471,6 +473,27 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
         var cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor, isLimitedModeEnabled);
         var columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor, isLimitedModeEnabled) : [];
         var colorPicker = !areAnyNewToolbarFlagsEnabled ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];
+        var fitToContentButton = isContentModeSupported({
+          allowColumnResizing: !!pluginState.pluginConfig.allowColumnResizing,
+          allowTableResizing: !!pluginState.pluginConfig.allowTableResizing,
+          isFullPageEditor: !pluginState.isChromelessEditor && !pluginState.isCommentEditor
+        }) && !isNested && (api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 || (_api$editorViewMode2 = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.mode) !== 'view' && expValEquals('platform_editor_table_fit_to_content_on_demand', 'isEnabled', true) ? [{
+          id: 'editor.table.fitToContent',
+          type: 'button',
+          title: intl.formatMessage(messages.fitToContent),
+          icon: function icon() {
+            return jsx(ShrinkHorizontalIcon, {
+              spacing: 'spacious',
+              label: ''
+            });
+          },
+          onClick: function onClick(_state, _dispatch, view) {
+            if (view) {
+              applyMeasuredWidthToSelectedTable(view, api !== null && api !== void 0 ? api : undefined);
+            }
+            return true;
+          }
+        }] : [];
 
         // Check if we need to show confirm dialog for delete button
         var confirmDialog;
@@ -549,7 +572,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           },
           zIndex: akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu].concat(_toConsumableArray(!areAnyNewToolbarFlagsEnabled ? [separator(menu.hidden)] : []), _toConsumableArray(alignmentMenu), _toConsumableArray(!areAnyNewToolbarFlagsEnabled ? [separator(alignmentMenu.length === 0)] : []), _toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), _toConsumableArray(colorPicker), _toConsumableArray(!areAnyNewToolbarFlagsEnabled ? [{
+          items: [menu].concat(_toConsumableArray(!areAnyNewToolbarFlagsEnabled ? [separator(menu.hidden)] : []), _toConsumableArray(alignmentMenu), _toConsumableArray(!areAnyNewToolbarFlagsEnabled ? [separator(alignmentMenu.length === 0)] : []), _toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), fitToContentButton, _toConsumableArray(colorPicker), _toConsumableArray(!areAnyNewToolbarFlagsEnabled ? [{
             type: 'extensions-placeholder',
             separator: 'end'
           }, copyButton, {

package/dist/types/pm-plugins/transforms/content-mode.d.ts

@@ -0,0 +1,8 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export type TableMeasurement = {
+    colWidths: Array<number>;
+    tableWidth: number;
+};
+export declare const getTableMeasurement: (tableRef: HTMLTableElement) => TableMeasurement;
+export declare const applyTableMeasurement: (tr: Transaction, tableNode: PMNode, { colWidths, tableWidth }: TableMeasurement, tablePos: number) => Transaction;

package/dist/types/pm-plugins/transforms/table-transform-utils.d.ts

@@ -0,0 +1,11 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const replaceCells: (tr: Transaction, table: PMNode, tablePos: number, modifyCell: (cell: PMNode, rowIndex: number, colIndex: number) => PMNode) => Transaction;
+/**
+ * Position-preserving alternative to `replaceCells`.
+ *
+ * Uses `setNodeMarkup` per cell instead of rebuilding the whole table with
+ * `replaceWith`, so document positions inside cells are never invalidated.
+ * This preserves any existing selection through `tr.mapping`.
+ */
+export declare const updateCellsMarkup: (tr: Transaction, table: PMNode, tablePos: number, modifyCell: (cell: PMNode, rowIndex: number, colIndex: number) => PMNode) => Transaction;

package/dist/types/pm-plugins/utils/tableMode.d.ts

@@ -0,0 +1,22 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../../types';
+type ContentModePluginOptions = {
+    allowColumnResizing: boolean;
+    allowTableResizing: boolean;
+    isFullPageEditor: boolean;
+};
+export declare const isTableInContentMode: ({ allowColumnResizing, allowTableResizing, isFullPageEditor, isTableNested, node, }: ContentModePluginOptions & {
+    isTableNested?: boolean;
+    node?: PMNode;
+}) => boolean;
+export declare const isContentModeSupported: ({ allowColumnResizing, allowTableResizing, isFullPageEditor, }: ContentModePluginOptions) => boolean;
+export declare const hasTableBeenResized: (node: PMNode) => boolean;
+/**
+ * Iterates all top-level tables in the document, and for those in content mode,
+ * measures rendered column widths and sets colwidth + table width attributes
+ * in a single batched transaction.
+ */
+export declare const applyMeasuredWidthToAllTables: (view: EditorView, pluginInjectionApi?: PluginInjectionAPI) => void;
+export declare const applyMeasuredWidthToSelectedTable: (view: EditorView, api?: PluginInjectionAPI) => void;
+export {};

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

@@ -95,6 +95,8 @@ export interface TablePluginState {
     insertColumnButtonIndex?: number;
     insertRowButtonIndex?: number;
     isCellMenuOpenByKeyboard?: boolean;
+    isChromelessEditor?: boolean;
+    isCommentEditor?: boolean;
     isContextualMenuOpen?: boolean;
     isDragAndDropEnabled?: boolean;
     isFullWidthModeEnabled?: boolean;
@@ -448,6 +450,7 @@ export declare const TableCssClassName: {
     TABLE_STICKY_SENTINEL_TOP: "pm-table-sticky-sentinel-top";
     TABLE_STICKY_SHADOW: "pm-table-sticky-shadow";
     TABLE_STICKY_WRAPPER: "pm-table-sticky-wrapper";
+    TABLE_VIEW_CONTENT_WRAP: "tableView-content-wrap";
 };
 export interface ToolbarMenuConfig {
     allowCollapse?: boolean;

package/dist/types-ts4.5/pm-plugins/transforms/content-mode.d.ts

@@ -0,0 +1,8 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export type TableMeasurement = {
+    colWidths: Array<number>;
+    tableWidth: number;
+};
+export declare const getTableMeasurement: (tableRef: HTMLTableElement) => TableMeasurement;
+export declare const applyTableMeasurement: (tr: Transaction, tableNode: PMNode, { colWidths, tableWidth }: TableMeasurement, tablePos: number) => Transaction;

package/dist/types-ts4.5/pm-plugins/transforms/table-transform-utils.d.ts

@@ -0,0 +1,11 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const replaceCells: (tr: Transaction, table: PMNode, tablePos: number, modifyCell: (cell: PMNode, rowIndex: number, colIndex: number) => PMNode) => Transaction;
+/**
+ * Position-preserving alternative to `replaceCells`.
+ *
+ * Uses `setNodeMarkup` per cell instead of rebuilding the whole table with
+ * `replaceWith`, so document positions inside cells are never invalidated.
+ * This preserves any existing selection through `tr.mapping`.
+ */
+export declare const updateCellsMarkup: (tr: Transaction, table: PMNode, tablePos: number, modifyCell: (cell: PMNode, rowIndex: number, colIndex: number) => PMNode) => Transaction;

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

@@ -0,0 +1,22 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../../types';
+type ContentModePluginOptions = {
+    allowColumnResizing: boolean;
+    allowTableResizing: boolean;
+    isFullPageEditor: boolean;
+};
+export declare const isTableInContentMode: ({ allowColumnResizing, allowTableResizing, isFullPageEditor, isTableNested, node, }: ContentModePluginOptions & {
+    isTableNested?: boolean;
+    node?: PMNode;
+}) => boolean;
+export declare const isContentModeSupported: ({ allowColumnResizing, allowTableResizing, isFullPageEditor, }: ContentModePluginOptions) => boolean;
+export declare const hasTableBeenResized: (node: PMNode) => boolean;
+/**
+ * Iterates all top-level tables in the document, and for those in content mode,
+ * measures rendered column widths and sets colwidth + table width attributes
+ * in a single batched transaction.
+ */
+export declare const applyMeasuredWidthToAllTables: (view: EditorView, pluginInjectionApi?: PluginInjectionAPI) => void;
+export declare const applyMeasuredWidthToSelectedTable: (view: EditorView, api?: PluginInjectionAPI) => void;
+export {};

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

@@ -95,6 +95,8 @@ export interface TablePluginState {
     insertColumnButtonIndex?: number;
     insertRowButtonIndex?: number;
     isCellMenuOpenByKeyboard?: boolean;
+    isChromelessEditor?: boolean;
+    isCommentEditor?: boolean;
     isContextualMenuOpen?: boolean;
     isDragAndDropEnabled?: boolean;
     isFullWidthModeEnabled?: boolean;
@@ -448,6 +450,7 @@ export declare const TableCssClassName: {
     TABLE_STICKY_SENTINEL_TOP: "pm-table-sticky-sentinel-top";
     TABLE_STICKY_SHADOW: "pm-table-sticky-shadow";
     TABLE_STICKY_WRAPPER: "pm-table-sticky-wrapper";
+    TABLE_VIEW_CONTENT_WRAP: "tableView-content-wrap";
 };
 export interface ToolbarMenuConfig {
     allowCollapse?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "19.0.1",
+	"version": "20.0.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,40 +28,41 @@
 		"singleton": true
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.4.0",
+		"@atlaskit/adf-schema": "^52.5.0",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/custom-steps": "^0.16.0",
 		"@atlaskit/editor-palette": "^2.1.0",
-		"@atlaskit/editor-plugin-accessibility-utils": "^8.0.0",
-		"@atlaskit/editor-plugin-analytics": "^8.0.0",
-		"@atlaskit/editor-plugin-batch-attribute-updates": "^8.0.0",
-		"@atlaskit/editor-plugin-content-insertion": "^8.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^10.0.0",
-		"@atlaskit/editor-plugin-extension": "11.0.35",
-		"@atlaskit/editor-plugin-guideline": "^8.0.0",
-		"@atlaskit/editor-plugin-interaction": "^17.0.0",
-		"@atlaskit/editor-plugin-limited-mode": "^5.0.0",
-		"@atlaskit/editor-plugin-selection": "^8.0.0",
-		"@atlaskit/editor-plugin-toolbar": "^5.1.0",
-		"@atlaskit/editor-plugin-user-intent": "^6.0.0",
-		"@atlaskit/editor-plugin-width": "^9.0.0",
+		"@atlaskit/editor-plugin-accessibility-utils": "^9.0.0",
+		"@atlaskit/editor-plugin-analytics": "^9.0.0",
+		"@atlaskit/editor-plugin-batch-attribute-updates": "^9.0.0",
+		"@atlaskit/editor-plugin-content-insertion": "^9.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^11.0.0",
+		"@atlaskit/editor-plugin-extension": "12.0.0",
+		"@atlaskit/editor-plugin-guideline": "^9.0.0",
+		"@atlaskit/editor-plugin-interaction": "^18.0.0",
+		"@atlaskit/editor-plugin-limited-mode": "^6.0.0",
+		"@atlaskit/editor-plugin-selection": "^9.0.0",
+		"@atlaskit/editor-plugin-toolbar": "^6.0.0",
+		"@atlaskit/editor-plugin-user-intent": "^7.0.0",
+		"@atlaskit/editor-plugin-width": "^10.0.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^34.1.0",
+		"@atlaskit/icon": "^34.2.0",
 		"@atlaskit/insm": "^0.4.0",
-		"@atlaskit/menu": "^8.4.0",
+		"@atlaskit/menu": "^8.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^62.3.0",
-		"@atlaskit/toggle": "^15.5.0",
+		"@atlaskit/tmp-editor-statsig": "^62.4.0",
+		"@atlaskit/toggle": "^15.6.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
+		"bind-event-listener": "^3.0.0",
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",
@@ -69,7 +70,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.22.0",
+		"@atlaskit/editor-common": "^113.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"