@atlaskit/editor-plugin-table 7.25.2 → 7.25.4

package/src/pm-plugins/drag-and-drop/plugin.ts

@@ -34,6 +34,7 @@ const destroyFn = (
 	editorAnalyticsAPI: any,
 	isTableScalingEnabled: boolean,
 	isTableFixedColumnWidthsOptionEnabled: boolean,
+	isCommentEditor: boolean,
 ) => {
 	const editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
 
@@ -224,8 +225,10 @@ const destroyFn = (
 							}
 
 							const shouldUseIncreasedScalingPercent =
-								isTableScalingWithFixedColumnWidthsOptionEnabled &&
-								fg('platform.editor.table.use-increased-scaling-percent');
+								(isTableScalingWithFixedColumnWidthsOptionEnabled &&
+									fg('platform.editor.table.use-increased-scaling-percent')) ||
+								// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
+								(isTableScalingEnabled && isCommentEditor);
 
 							insertColgroupFromNode(
 								tableRef,
@@ -249,6 +252,7 @@ export const createPlugin = (
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	isTableScalingEnabled = false,
 	isTableFixedColumnWidthsOptionEnabled = false,
+	isCommentEditor = false,
 ) => {
 	return new SafePlugin({
 		state: createPluginState(dispatch, (state) => ({
@@ -264,7 +268,7 @@ export const createPlugin = (
 		appendTransaction: (transactions, oldState, newState) => {
 			const { targetCellPosition: oldTargetCellPosition } = getTablePluginState(oldState);
 			const { targetCellPosition: newTargetCellPosition } = getTablePluginState(newState);
-			const { isDragMenuOpen, dragMenuIndex } = getPluginState(newState);
+			const { isDragMenuOpen = false, dragMenuIndex } = getPluginState(newState);
 
 			transactions.forEach((transaction) => {
 				if (transaction.getMeta('selectedRowViaKeyboard')) {
@@ -323,6 +327,7 @@ export const createPlugin = (
 					editorAnalyticsAPI,
 					isTableScalingEnabled,
 					isTableFixedColumnWidthsOptionEnabled,
+					isCommentEditor,
 				),
 			};
 		},
@@ -361,7 +366,7 @@ export const createPlugin = (
 				].includes(((event.target as HTMLElement) || null)?.id);
 				const keysToTrap = ['Enter', ' '];
 
-				const { isDragMenuOpen } = getPluginState(view.state);
+				const { isDragMenuOpen = false } = getPluginState(view.state);
 
 				// drag handle is focused, and user presses any key return them back to editing
 				if (isDragHandleFocused && !isDragMenuOpen && !keysToTrap.includes(event.key)) {

package/src/pm-plugins/keymap.ts

@@ -286,6 +286,7 @@ export function keymapPlugin(
 			getEditorContainerWidth,
 			isTableScalingEnabled,
 			isTableFixedColumnWidthsOptionEnabled,
+			!!isCommentEditor,
 			INPUT_METHOD.SHORTCUT,
 			ariaNotifyPlugin,
 			getIntl,
@@ -300,6 +301,7 @@ export function keymapPlugin(
 			getEditorContainerWidth,
 			isTableScalingEnabled,
 			isTableFixedColumnWidthsOptionEnabled,
+			!!isCommentEditor,
 			INPUT_METHOD.SHORTCUT,
 			ariaNotifyPlugin,
 			getIntl,

package/src/pm-plugins/main.ts

@@ -44,7 +44,6 @@ import {
 	handleMouseEnter,
 	handleMouseLeave,
 	handleMouseMove,
-	handleMouseOut,
 	handleMouseOver,
 	handleMouseUp,
 	handleTripleClick,
@@ -375,9 +374,6 @@ export const createPlugin = (
 					? undefined
 					: withCellTracking(whenTableInFocus(handleMouseOver)),
 				mouseleave: handleMouseLeave,
-				mouseout: fg('editor_react_18_fix_table_delete_col_decorations')
-					? undefined
-					: whenTableInFocus(handleMouseOut),
 				mousemove: whenTableInFocus(handleMouseMove),
 				mouseenter: handleMouseEnter,
 				mouseup: whenTableInFocus(handleMouseUp),

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -50,6 +50,7 @@ export const handleMouseDown = (
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	isNewColumnResizingEnabled?: boolean,
 	isTableAlignmentEnabled?: boolean,
+	isCommentEditor?: boolean,
 ): boolean => {
 	const { state, dispatch } = view;
 	const editorDisabled = !view.editable;
@@ -112,8 +113,10 @@ export const handleMouseDown = (
 		domAtPos,
 		isTableScalingEnabled: shouldScale,
 		shouldUseIncreasedScalingPercent:
-			isTableScalingWithFixedColumnWidthsOptionEnabled &&
-			fg('platform.editor.table.use-increased-scaling-percent'),
+			(isTableScalingWithFixedColumnWidthsOptionEnabled &&
+				fg('platform.editor.table.use-increased-scaling-percent')) ||
+			// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
+			(isTableScalingEnabled && !!isCommentEditor),
 	});
 
 	if (
@@ -211,8 +214,9 @@ export const handleMouseDown = (
 
 				const resizedDelta = clientX - startX;
 				const shouldUseIncreasedScalingPercent =
-					isTableScalingWithFixedColumnWidthsOptionEnabled &&
-					fg('platform.editor.table.use-increased-scaling-percent');
+					(isTableScalingWithFixedColumnWidthsOptionEnabled &&
+						fg('platform.editor.table.use-increased-scaling-percent')) ||
+					(isTableScalingEnabled && !!isCommentEditor);
 
 				if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
 					const newResizeState = resizeColumnAndTable({
@@ -345,8 +349,9 @@ export const handleMouseDown = (
 		let shouldScale = tableDepth === 0 && isTableScalingEnabled;
 
 		const shouldUseIncreasedScalingPercent =
-			isTableScalingWithFixedColumnWidthsOptionEnabled &&
-			fg('platform.editor.table.use-increased-scaling-percent');
+			(isTableScalingWithFixedColumnWidthsOptionEnabled &&
+				fg('platform.editor.table.use-increased-scaling-percent')) ||
+			(isTableScalingEnabled && isCommentEditor);
 
 		if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
 			shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';

package/src/pm-plugins/table-resizing/plugin.ts

@@ -24,6 +24,7 @@ export function createPlugin(
 	isTableScalingEnabled?: boolean,
 	isNewColumnResizingEnabled?: boolean,
 	isTableAlignmentEnabled?: boolean,
+	isCommentEditor?: boolean,
 ) {
 	return new SafePlugin({
 		key: pluginKey,
@@ -76,6 +77,7 @@ export function createPlugin(
 								editorAnalyticsAPI,
 								isNewColumnResizingEnabled,
 								isTableAlignmentEnabled,
+								isCommentEditor,
 							)
 						) {
 							const { state, dispatch } = view;

package/src/pm-plugins/table-resizing/utils/resize-state.ts

@@ -5,7 +5,7 @@ import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { getSelectedTableInfo } from '../../../utils';
 
@@ -326,6 +326,7 @@ export const getNewResizeStateFromSelectedColumns = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 	isTableScalingEnabled = false,
 	isTableFixedColumnWidthsOptionEnabled = false,
+	isCommentEditor = false,
 ): ResizeStateWithAnalytics | undefined => {
 	// Fail early so that we don't do complex calculations for no reason
 	const numColumnsSelected = rect.right - rect.left;
@@ -381,8 +382,9 @@ export const getNewResizeStateFromSelectedColumns = (
 		domAtPos,
 		isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
 		shouldUseIncreasedScalingPercent:
-			isTableScalingWithFixedColumnWidthsOptionEnabled &&
-			getBooleanFF('platform.editor.table.use-increased-scaling-percent'),
+			(isTableScalingWithFixedColumnWidthsOptionEnabled &&
+				fg('platform.editor.table.use-increased-scaling-percent')) ||
+			(isTableScalingEnabled && isCommentEditor),
 	});
 
 	const newResizeState = evenSelectedColumnsWidths(resizeState, rect);

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

@@ -4,7 +4,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DomAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { updateColumnWidths } from '../../../transforms';
 import { getTableWidth } from '../../../utils';
@@ -154,6 +154,7 @@ export const previewScaleTable = (
 	domAtPos: DomAtPos,
 	isTableScalingEnabled: boolean = false,
 	isTableWithFixedColumnWidthsOptionEnabled: boolean = false,
+	isCommentEditor: boolean = false,
 ) => {
 	const { node, start, parentWidth } = options;
 
@@ -185,8 +186,10 @@ export const previewScaleTable = (
 	}
 
 	const shouldUseIncreasedScalingPercent =
-		isTableScalingWithFixedColumnWidthsOptionEnabled &&
-		getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+		(isTableScalingWithFixedColumnWidthsOptionEnabled &&
+			fg('platform.editor.table.use-increased-scaling-percent')) ||
+		// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
+		(isTableScalingEnabled && isCommentEditor);
 
 	const resizeState = parentWidth
 		? scaleWithParent(

package/src/toolbar.tsx

@@ -197,6 +197,7 @@ export const getToolbarCellOptionsConfig = (
 	isCellBackgroundDuplicated = false,
 	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
+	isCommentEditor = false,
 ): FloatingToolbarDropdown<Command> => {
 	const { top, bottom, right, left } = initialSelectionRect;
 	const numberOfColumns = right - left;
@@ -322,6 +323,7 @@ export const getToolbarCellOptionsConfig = (
 					getEditorContainerWidth,
 					isTableScalingEnabled,
 					isTableFixedColumnWidthsOptionEnabled,
+					isCommentEditor,
 				)
 			: undefined;
 		const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
@@ -549,6 +551,7 @@ export const getToolbarConfig =
 						isCellBackgroundDuplicated,
 						isTableFixedColumnWidthsOptionEnabled,
 						shouldUseIncreasedScalingPercent,
+						options?.isCommentEditor,
 					);
 
 			const columnSettingsItems = pluginState.isDragAndDropEnabled
@@ -560,6 +563,7 @@ export const getToolbarConfig =
 						editorAnalyticsAPI,
 						isTableScalingEnabled,
 						isTableFixedColumnWidthsOptionEnabled,
+						options?.isCommentEditor,
 					)
 				: [];
 			const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
@@ -661,6 +665,7 @@ const getCellItems = (
 	isCellBackgroundDuplicated = false,
 	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
+	isCommentEditor = false,
 ): Array<FloatingToolbarItem<Command>> => {
 	const initialSelectionRect = getClosestSelectionRect(state);
 	if (initialSelectionRect) {
@@ -675,6 +680,7 @@ const getCellItems = (
 			isCellBackgroundDuplicated,
 			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
+			isCommentEditor,
 		);
 		return [cellOptions, separator(cellOptions.hidden!)];
 	}
@@ -687,6 +693,7 @@ export const getDistributeConfig =
 		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 		isTableScalingEnabled = false,
 		isTableFixedColumnWidthsOptionEnabled = false,
+		isCommentEditor = false,
 	): Command =>
 	(state, dispatch, editorView) => {
 		const selectionOrTableRect = getClosestSelectionOrTableRect(state);
@@ -701,6 +708,7 @@ export const getDistributeConfig =
 			getEditorContainerWidth,
 			isTableScalingEnabled,
 			isTableFixedColumnWidthsOptionEnabled,
+			isCommentEditor,
 		);
 
 		if (newResizeStateWithAnalytics) {
@@ -723,13 +731,13 @@ const getColumnSettingItems = (
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	isTableScalingEnabled = false,
 	isTableFixedColumnWidthsOptionEnabled = false,
+	isCommentEditor = false,
 ): Array<FloatingToolbarItem<Command>> => {
 	const pluginState = getPluginState(editorState);
 	const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
 	if (!selectionOrTableRect || !editorView) {
 		return [];
 	}
-
 	const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(
 		selectionOrTableRect,
 		editorState,
@@ -755,6 +763,7 @@ const getColumnSettingItems = (
 					editorAnalyticsAPI,
 					isTableScalingEnabled,
 					isTableFixedColumnWidthsOptionEnabled,
+					isCommentEditor,
 				)(state, dispatch, view),
 			disabled: !wouldChange,
 		});

package/src/ui/DragHandle/index.tsx

@@ -72,7 +72,7 @@ const DragHandleComponent = ({
 		state: { selection },
 	} = editorView;
 	const { hoveredColumns, hoveredRows } = getPluginState(state);
-	const { isDragMenuOpen } = getDnDPluginState(state);
+	const { isDragMenuOpen = false } = getDnDPluginState(state);
 
 	const isRow = direction === 'row';
 	const isColumn = direction === 'column';

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -101,6 +101,7 @@ export interface Props {
 	getEditorContainerWidth: GetEditorContainerWidth;
 	getEditorFeatureFlags?: GetEditorFeatureFlags;
 	isCellMenuOpenByKeyboard?: boolean;
+	isCommentEditor?: boolean;
 }
 
 export interface State {
@@ -651,6 +652,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			getEditorContainerWidth,
 			getEditorFeatureFlags,
 			isCellMenuOpenByKeyboard,
+			isCommentEditor,
 		} = this.props;
 		// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
 		const { state, dispatch } = editorView;
@@ -679,8 +681,10 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 
 		const shouldUseIncreasedScalingPercent =
 			isTableScalingEnabled &&
-			tableWithFixedColumnWidthsOption &&
-			fg('platform.editor.table.use-increased-scaling-percent');
+			((tableWithFixedColumnWidthsOption &&
+				fg('platform.editor.table.use-increased-scaling-percent')) ||
+				// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
+				isCommentEditor);
 
 		switch (item.value.name) {
 			case 'sort_column_desc':

package/src/ui/FloatingContextualMenu/index.tsx

@@ -44,6 +44,7 @@ export interface Props {
 	pluginConfig?: PluginConfig;
 	editorAnalyticsAPI?: EditorAnalyticsAPI;
 	isCellMenuOpenByKeyboard?: boolean;
+	isCommentEditor?: boolean;
 }
 
 const FloatingContextualMenu = ({
@@ -57,6 +58,7 @@ const FloatingContextualMenu = ({
 	getEditorContainerWidth,
 	getEditorFeatureFlags,
 	isCellMenuOpenByKeyboard,
+	isCommentEditor,
 }: Props) => {
 	// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
 	const { targetCellPosition, isDragAndDropEnabled } = getPluginState(editorView.state);
@@ -114,6 +116,7 @@ const FloatingContextualMenu = ({
 					getEditorContainerWidth={getEditorContainerWidth}
 					getEditorFeatureFlags={getEditorFeatureFlags}
 					isCellMenuOpenByKeyboard={isCellMenuOpenByKeyboard}
+					isCommentEditor={isCommentEditor}
 				/>
 			</div>
 		</Popup>

package/dist/cjs/nodeviews/ignore-mutation-delegate.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = exports.default = function _default(mutation) {
-  var type = mutation.type,
-    _mutation$target = mutation.target,
-    nodeName = _mutation$target.nodeName,
-    firstChild = _mutation$target.firstChild;
-  if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
-    return false;
-  }
-
-  // ED-16668
-  // Do not remove this fixes an issue with windows firefox that relates to
-  // the addition of the shadow sentinels
-  if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
-    return false;
-  }
-  return true;
-};

package/dist/es2019/nodeviews/ignore-mutation-delegate.js

@@ -1,20 +0,0 @@
-export default (mutation => {
-  const {
-    type,
-    target: {
-      nodeName,
-      firstChild
-    }
-  } = mutation;
-  if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
-    return false;
-  }
-
-  // ED-16668
-  // Do not remove this fixes an issue with windows firefox that relates to
-  // the addition of the shadow sentinels
-  if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
-    return false;
-  }
-  return true;
-});

package/dist/esm/nodeviews/ignore-mutation-delegate.js

@@ -1,17 +0,0 @@
-export default (function (mutation) {
-  var type = mutation.type,
-    _mutation$target = mutation.target,
-    nodeName = _mutation$target.nodeName,
-    firstChild = _mutation$target.firstChild;
-  if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
-    return false;
-  }
-
-  // ED-16668
-  // Do not remove this fixes an issue with windows firefox that relates to
-  // the addition of the shadow sentinels
-  if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
-    return false;
-  }
-  return true;
-});

package/dist/types/nodeviews/ignore-mutation-delegate.d.ts

@@ -1,5 +0,0 @@
-declare const _default: (mutation: MutationRecord | {
-    type: 'selection';
-    target: Element;
-}) => boolean;
-export default _default;

package/dist/types-ts4.5/nodeviews/ignore-mutation-delegate.d.ts

@@ -1,5 +0,0 @@
-declare const _default: (mutation: MutationRecord | {
-    type: 'selection';
-    target: Element;
-}) => boolean;
-export default _default;

package/src/nodeviews/ignore-mutation-delegate.ts

@@ -1,28 +0,0 @@
-export default (mutation: MutationRecord | { type: 'selection'; target: Element }) => {
-	const {
-		type,
-		target: { nodeName, firstChild },
-	} = mutation;
-
-	if (
-		type === 'selection' &&
-		nodeName?.toUpperCase() === 'DIV' &&
-		firstChild?.nodeName.toUpperCase() === 'TABLE'
-	) {
-		return false;
-	}
-
-	// ED-16668
-	// Do not remove this fixes an issue with windows firefox that relates to
-	// the addition of the shadow sentinels
-	if (
-		type === 'selection' &&
-		nodeName?.toUpperCase() === 'TABLE' &&
-		(firstChild?.nodeName.toUpperCase() === 'COLGROUP' ||
-			firstChild?.nodeName.toUpperCase() === 'SPAN')
-	) {
-		return false;
-	}
-
-	return true;
-};