@atlaskit/editor-plugin-table 12.1.14 → 12.2.0

package/src/pm-plugins/table-resizing/utils/misc.ts

@@ -25,6 +25,7 @@ import { hasTableBeenResized, hasTableColumnBeenResized } from './colgroup';
 import {
 	MAX_SCALING_PERCENT,
 	MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION,
+	TABLE_MAX_WIDTH,
 } from './consts';
 
 // Translates named layouts in number values.
@@ -138,6 +139,92 @@ export const getTableContainerElementWidth = (table: PMNode) => {
 	return getTableContainerWidth(table);
 };
 
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used to set the max width for table resizer container.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @param isTableScalingEnabled Whether table scaling is enabled.
+ * @returns The CSS max-width value
+ */
+export const getTableResizerContainerMaxWidthInCSS = (
+	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
+	isTableScalingEnabled?: boolean,
+): string => {
+	const maxResizerWidthForNonCommentEditor = isTableScalingEnabled
+		? `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${TABLE_MAX_WIDTH}px)`
+		: `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ${TABLE_MAX_WIDTH}px)`;
+	return isCommentEditor || isChromelessEditor ? '100%' : maxResizerWidthForNonCommentEditor;
+};
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used in NodeView for TableResizer to set the max width for table resizer container
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @returns The CSS max-width value for the table resizer container.
+ */
+export const getTableResizerItemWidth = (
+	node: PMNode,
+	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
+): number | undefined => {
+	const tableWidthAttribute = getTableContainerWidth(node);
+	if (!node.attrs.width && (isCommentEditor || isChromelessEditor)) {
+		// width undefined would make .resizer-item width to be `auto`
+		return undefined;
+	}
+	return tableWidthAttribute;
+};
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used to set the CSS width value for the table resizer-item.
+ * Because comment and chromeless editors don't have container-type: inline-size set,
+ * we need to calculate the width based on the table node width.
+ * If the table node width is not set, it will return 'auto'.
+ * This is used in table toDOM
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @returns The CSS width value for the table container.
+ */
+export const getTableResizerItemWidthInCSS = (
+	node: PMNode,
+	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
+): string => {
+	const tableWidthAttribute = getTableResizerItemWidth(node, isCommentEditor, isChromelessEditor);
+	return tableWidthAttribute ? `${tableWidthAttribute}px` : 'auto';
+};
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used to set the table width --ak-editor-table-width CSS property for full page editor.
+ * Which is applied to the table resizer container.
+ * For Full page appearance, we don't need to use containerWidth from JS, as we can use cqw value.
+ * So we set dynamic containerWidth from JS to CSS property.
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @param isTableScalingEnabled Whether table scaling is enabled.
+ * @param tableWidthFromJS The width of the container element. In toDOM it'd be undefined, but will have a value from nodeView.
+ * @returns The CSS width value for the table.
+ */
+export const getTableResizerContainerForFullPageWidthInCSS = (
+	node: PMNode,
+	isTableScalingEnabled?: boolean,
+): string => {
+	const tableWidth = getTableContainerElementWidth(node);
+	// for full page appearance
+	if (isTableScalingEnabled) {
+		return `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${tableWidth}px)`;
+	}
+	return `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ${tableWidth}px)`;
+};
+
 export const getTableScalingPercent = (
 	table: PMNode,
 	tableRef: HTMLElement | null,

package/src/tablePlugin.tsx

@@ -309,6 +309,19 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 			// TODO: ED-25901 - We need to move this into a plugin config option so we don't accidentally enable nested nodes in Jira
 			const isNestingSupported = Boolean(options?.tableOptions?.allowNestedTables);
 
+			const isTableFixedColumnWidthsOptionEnabled =
+				options?.getEditorFeatureFlags?.().tableWithFixedColumnWidthsOption || false;
+
+			const shouldUseIncreasedScalingPercent =
+				options?.isTableScalingEnabled &&
+				(isTableFixedColumnWidthsOptionEnabled ||
+					// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
+					options?.isCommentEditor);
+
+			const isTableScalingEnabled = options?.isTableScalingEnabled;
+			const isCommentEditor = options?.isCommentEditor;
+			const isChromelessEditor = options?.isChromelessEditor;
+
 			return isNestingSupported
 				? [
 						{
@@ -318,6 +331,10 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 								tableResizingEnabled: Boolean(options?.tableOptions.allowTableResizing),
 								getEditorContainerWidth: defaultGetEditorContainerWidth,
 								isNestingSupported,
+								isTableScalingEnabled,
+								shouldUseIncreasedScalingPercent,
+								isCommentEditor,
+								isChromelessEditor,
 							}),
 						},
 						{ name: 'tableHeader', node: tableHeaderWithNestedTable },
@@ -332,6 +349,10 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 								tableResizingEnabled: Boolean(options?.tableOptions.allowTableResizing),
 								getEditorContainerWidth: defaultGetEditorContainerWidth,
 								isNestingSupported,
+								isTableScalingEnabled,
+								shouldUseIncreasedScalingPercent,
+								isCommentEditor,
+								isChromelessEditor,
 							}),
 						},
 						{ name: 'tableHeader', node: tableHeader },

package/src/tablePluginType.ts

@@ -15,6 +15,7 @@ import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
+import type { LimitedModePlugin } from '@atlaskit/editor-plugin-limited-mode';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 
@@ -76,6 +77,7 @@ export type TablePluginDependencies = [
 	ContentInsertionPlugin,
 	WidthPlugin,
 	SelectionPlugin,
+	OptionalPlugin<LimitedModePlugin>,
 	OptionalPlugin<GuidelinePlugin>,
 	OptionalPlugin<BatchAttributeUpdatesPlugin>,
 	OptionalPlugin<AccessibilityUtilsPlugin>,

package/src/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -5,7 +5,6 @@ import classnames from 'classnames';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { getRowHeights } from '../../../pm-plugins/utils/row-controls';
@@ -142,18 +141,10 @@ export default class NumberColumn extends Component<Props, any> {
 			isRowSelected(index)(editorView.state.selection) ||
 			((hoveredRows || []).indexOf(index) !== -1 && !isResizing);
 
-		if (fg('platform_editor_nested_tables_number_column_fixes')) {
-			return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
-				[ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
-				[ClassName.HOVERED_CELL_IN_DANGER]: tableActive && isActive && isInDanger,
-				[ClassName.HOVERED_CELL_ACTIVE]: tableActive && isActive,
-			});
-		} else {
-			return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
-				[ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
-				[ClassName.HOVERED_CELL_IN_DANGER]: isActive && isInDanger,
-				[ClassName.HOVERED_CELL_ACTIVE]: isActive,
-			});
-		}
+		return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
+			[ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
+			[ClassName.HOVERED_CELL_IN_DANGER]: tableActive && isActive && isInDanger,
+			[ClassName.HOVERED_CELL_ACTIVE]: tableActive && isActive,
+		});
 	};
 }

package/tsconfig.app.json

@@ -71,6 +71,9 @@
 		{
 			"path": "../editor-plugin-interaction/tsconfig.app.json"
 		},
+		{
+			"path": "../editor-plugin-limited-mode/tsconfig.app.json"
+		},
 		{
 			"path": "../editor-plugin-selection/tsconfig.app.json"
 		},
@@ -92,6 +95,9 @@
 		{
 			"path": "../../platform/feature-flags/tsconfig.app.json"
 		},
+		{
+			"path": "../../platform/feature-flags-react/tsconfig.app.json"
+		},
 		{
 			"path": "../../pragmatic-drag-and-drop/core/tsconfig.app.json"
 		},

package/types/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/types/index.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/types/index.d.ts"
       ]

package/ui/common-styles/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../../dist/types/ui/common-styles.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../../dist/types-ts4.5/ui/common-styles.d.ts"
       ]