@atlaskit/editor-plugin-table 7.16.15 → 7.16.17

package/src/toolbar.tsx

@@ -3,7 +3,7 @@ import { jsx } from '@emotion/react';
 
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
@@ -69,10 +69,10 @@ import {
 	setTableAlignmentWithAnalytics,
 	sortColumnWithAnalytics,
 	splitCellWithAnalytics,
+	toggleFixedColumnWidthsOptionAnalytics,
 	toggleHeaderColumnWithAnalytics,
 	toggleHeaderRowWithAnalytics,
 	toggleNumberColumnWithAnalytics,
-	toggleTableLockWithAnalytics,
 	wrapTableInExpandWithAnalytics,
 } from './commands-with-analytics';
 import type { TablePluginOptions } from './plugin';
@@ -90,7 +90,6 @@ import type {
 } from './types';
 import { TableCssClassName } from './types';
 import { FloatingAlignmentButtons } from './ui/FloatingAlignmentButtons/FloatingAlignmentButtons';
-import { DisplayModeIcon } from './ui/icons';
 import {
 	getMergedCellsPositions,
 	getSelectedColumnIndexes,
@@ -104,6 +103,8 @@ export const getToolbarMenuConfig = (
 	state: ToolbarMenuState,
 	{ formatMessage }: ToolbarMenuContext,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+	isTableScalingWithFixedColumnWidthsOptionShown = false,
+	areTableColumnWidthsFixed = false,
 ): FloatingToolbarItem<Command> => {
 	const optionItem: typeOption = getBooleanFF(
 		'platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33',
@@ -112,6 +113,14 @@ export const getToolbarMenuConfig = (
 		: 'item';
 
 	const options = [
+		{
+			id: 'editor.table.lockColumnWidths',
+			title: formatMessage(messages.lockColumnWidths),
+			onClick: toggleFixedColumnWidthsOptionAnalytics(editorAnalyticsAPI, INPUT_METHOD.FLOATING_TB),
+			selected: areTableColumnWidthsFixed,
+			hidden: !isTableScalingWithFixedColumnWidthsOptionShown,
+			domItemOptions: { type: optionItem },
+		},
 		{
 			id: 'editor.table.headerRow',
 			title: formatMessage(messages.headerRow),
@@ -156,6 +165,7 @@ export const getToolbarMenuConfig = (
 			title: formatMessage(messages.tableOptions),
 			hidden: options.every((option) => option.hidden),
 			options,
+			dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined,
 		};
 	} else {
 		return {
@@ -165,6 +175,7 @@ export const getToolbarMenuConfig = (
 			title: formatMessage(messages.tableOptions),
 			hidden: options.every((option) => option.hidden),
 			options,
+			dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined,
 		};
 	}
 };
@@ -434,6 +445,7 @@ export const getToolbarConfig =
 		getEditorFeatureFlags: GetEditorFeatureFlags,
 		getEditorView: () => EditorView | null,
 		options?: TablePluginOptions,
+		isTableScalingWithFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
 	) =>
 	(config: PluginConfig): FloatingToolbarHandler =>
@@ -448,11 +460,21 @@ export const getToolbarConfig =
 
 		if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
 			const nodeType = state.schema.nodes.table;
-			const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
-
-			let alignmentMenu: Array<FloatingToolbarItem<Command>>;
 			const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
+			const isTableScalingWithFixedColumnWidthsOptionShown =
+				isTableScalingWithFixedColumnWidthsOptionEnabled && !isNested;
+			const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
+
+			const menu = getToolbarMenuConfig(
+				config,
+				pluginState,
+				intl,
+				editorAnalyticsAPI,
+				isTableScalingWithFixedColumnWidthsOptionShown,
+				areTableColumWidthsFixed,
+			);
 
+			let alignmentMenu: Array<FloatingToolbarItem<Command>>;
 			alignmentMenu =
 				options?.isTableAlignmentEnabled && !isNested
 					? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth)
@@ -612,29 +634,6 @@ const getCellItems = (
 	return [];
 };
 
-export const getLockBtnConfig =
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null): Command =>
-	(state, dispatch, editorView) => {
-		const selectionOrTableRect = getClosestSelectionOrTableRect(state);
-		if (!editorView || !selectionOrTableRect) {
-			return false;
-		}
-
-		const { tr } = state;
-		const table = findTable(tr.selection);
-
-		if (!table) {
-			return false;
-		} else {
-			const { displayMode } = table.node.attrs;
-			toggleTableLockWithAnalytics(editorAnalyticsAPI)(displayMode, INPUT_METHOD.FLOATING_TB)(
-				state,
-				dispatch,
-			);
-			return true;
-		}
-	};
-
 export const getDistributeConfig =
 	(
 		getEditorContainerWidth: GetEditorContainerWidth,
@@ -693,32 +692,6 @@ const getColumnSettingItems = (
 
 	const items: Array<FloatingToolbarItem<Command>> = [];
 
-	const isNested = pluginState.tablePos && isTableNested(editorState, pluginState.tablePos);
-
-	const isTableScalingLockBtnEnabled =
-		!isNested &&
-		isTableScalingEnabled &&
-		getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-
-	if (isTableScalingLockBtnEnabled) {
-		const areColumnWidthsLocked = pluginState?.tableNode?.attrs.displayMode === 'fixed';
-
-		const title = areColumnWidthsLocked
-			? formatMessage(messages.unlockColumnWidths)
-			: formatMessage(messages.lockColumnWidths);
-
-		items.push({
-			id: 'editor.table.lockColumns',
-			type: 'button',
-			title,
-			icon: () => <DisplayModeIcon size="medium" label={title} />,
-			onClick: (state, dispatch, view) =>
-				getLockBtnConfig(editorAnalyticsAPI)(state, dispatch, view),
-			selected: areColumnWidthsLocked,
-			testId: 'table-lock-column-widths-btn',
-		});
-	}
-
 	if (pluginState?.pluginConfig?.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
 		items.push({
 			id: 'editor.table.distributeColumns',
@@ -875,6 +848,7 @@ export const getAlignmentOptionsConfig = (
 				value,
 				currentLayout,
 				INPUT_METHOD.FLOATING_TB,
+				CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED,
 			),
 			...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
 				disabled: value !== 'center',

package/src/ui/TableFloatingControls/index.tsx

@@ -149,22 +149,23 @@ export const TableFloatingControls = ({
 					<>
 						{isDragAndDropEnabled ? (
 							<>
-								{getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
-									<DragCornerControlsWithSelection
-										editorView={editorView}
-										tableRef={tableRef}
-										isInDanger={isInDanger}
-										isResizing={isResizing}
-										api={api}
-									/>
-								) : (
-									<DragCornerControls
-										editorView={editorView}
-										tableRef={tableRef}
-										isInDanger={isInDanger}
-										isResizing={isResizing}
-									/>
-								)}
+								{!getBooleanFF('platform.editor.drag-and-drop_wmv9t') &&
+									(getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
+										<DragCornerControlsWithSelection
+											editorView={editorView}
+											tableRef={tableRef}
+											isInDanger={isInDanger}
+											isResizing={isResizing}
+											api={api}
+										/>
+									) : (
+										<DragCornerControls
+											editorView={editorView}
+											tableRef={tableRef}
+											isInDanger={isInDanger}
+											isResizing={isResizing}
+										/>
+									))}
 								<DragControls
 									tableRef={tableRef}
 									tableNode={tableNode}

package/src/ui/icons/index.ts

@@ -1,7 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
-export { DisplayModeIcon } from './DisplayModeIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
 export { MergeCellsIcon } from './MergeCellsIcon';
 export { SplitCellIcon } from './SplitCellIcon';

package/src/utils/snapping.ts

@@ -4,7 +4,7 @@ import {
 	akEditorCalculatedWideLayoutWidth,
 	akEditorDefaultLayoutWidth,
 	akEditorFullWidthLayoutWidth,
-	akEditorGutterPadding,
+	akEditorGutterPaddingDynamic,
 } from '@atlaskit/editor-shared-styles';
 
 const numberOfLanesInDefaultLayoutWidth = 12;
@@ -39,9 +39,9 @@ export const calculateDefaultTablePreserveSnappings = (
 	},
 ) => {
 	const dynamicFullWidthLine =
-		editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth
+		editorContainerWith - akEditorGutterPaddingDynamic() * 2 >= akEditorFullWidthLayoutWidth
 			? akEditorFullWidthLayoutWidth
-			: editorContainerWith - akEditorGutterPadding * 2;
+			: editorContainerWith - akEditorGutterPaddingDynamic() * 2;
 
 	const guides = [dynamicFullWidthLine - lengthOffset];
 
@@ -77,7 +77,7 @@ export const defaultTablePreserveSnappingWidths = (
 		breakoutPoints: false,
 	},
 ) => {
-	return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth
+	return editorContainerWidth - akEditorGutterPaddingDynamic() * 2 > akEditorFullWidthLayoutWidth
 		? calculateDefaultSnappings()
 		: calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };

package/dist/cjs/ui/icons/DisplayModeIcon.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DisplayModeIcon = exports.DisplayModeGlyth = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _icon = _interopRequireDefault(require("@atlaskit/icon"));
-var DisplayModeGlyth = exports.DisplayModeGlyth = function DisplayModeGlyth(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/_react.default.createElement("rect", {
-    x: "4",
-    y: "5",
-    width: "4",
-    height: "14",
-    rx: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M11 5C10.4477 5 10 5.44772 10 6V9.10102C11.0503 8.02921 12.4424 7.29368 14 7.07089V6C14 5.44772 13.5523 5 13 5H11Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M17 5C16.4477 5 16 5.44772 16 6V7.07089C17.5576 7.29368 18.9497 8.02921 20 9.10102V6C20 5.44772 19.5523 5 19 5H17Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M21 14C21 17.3137 18.3137 20 15 20C11.6863 20 9 17.3137 9 14C9 10.6863 11.6863 8 15 8C18.3137 8 21 10.6863 21 14ZM12 15C12 14.4477 12.4477 14 13 14V12C13 10.8954 13.8954 10 15 10C16.1046 10 17 10.8954 17 12V14C17.5523 14 18 14.4477 18 15V17C18 17.5523 17.5523 18 17 18H13C12.4477 18 12 17.5523 12 17V15ZM16 14V12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12V14H16Z",
-    fill: "currentColor"
-  }));
-};
-var DisplayModeIcon = exports.DisplayModeIcon = function DisplayModeIcon(props) {
-  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
-    glyph: DisplayModeGlyth
-  }, props));
-};

package/dist/es2019/ui/icons/DisplayModeIcon.js

@@ -1,39 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import Icon from '@atlaskit/icon';
-export const DisplayModeGlyth = props => {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("rect", {
-    x: "4",
-    y: "5",
-    width: "4",
-    height: "14",
-    rx: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M11 5C10.4477 5 10 5.44772 10 6V9.10102C11.0503 8.02921 12.4424 7.29368 14 7.07089V6C14 5.44772 13.5523 5 13 5H11Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M17 5C16.4477 5 16 5.44772 16 6V7.07089C17.5576 7.29368 18.9497 8.02921 20 9.10102V6C20 5.44772 19.5523 5 19 5H17Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M21 14C21 17.3137 18.3137 20 15 20C11.6863 20 9 17.3137 9 14C9 10.6863 11.6863 8 15 8C18.3137 8 21 10.6863 21 14ZM12 15C12 14.4477 12.4477 14 13 14V12C13 10.8954 13.8954 10 15 10C16.1046 10 17 10.8954 17 12V14C17.5523 14 18 14.4477 18 15V17C18 17.5523 17.5523 18 17 18H13C12.4477 18 12 17.5523 12 17V15ZM16 14V12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12V14H16Z",
-    fill: "currentColor"
-  }));
-};
-export const DisplayModeIcon = props => {
-  return /*#__PURE__*/React.createElement(Icon, _extends({
-    glyph: DisplayModeGlyth
-  }, props));
-};

package/dist/esm/ui/icons/DisplayModeIcon.js

@@ -1,39 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import Icon from '@atlaskit/icon';
-export var DisplayModeGlyth = function DisplayModeGlyth(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("rect", {
-    x: "4",
-    y: "5",
-    width: "4",
-    height: "14",
-    rx: "1",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M11 5C10.4477 5 10 5.44772 10 6V9.10102C11.0503 8.02921 12.4424 7.29368 14 7.07089V6C14 5.44772 13.5523 5 13 5H11Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M17 5C16.4477 5 16 5.44772 16 6V7.07089C17.5576 7.29368 18.9497 8.02921 20 9.10102V6C20 5.44772 19.5523 5 19 5H17Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M21 14C21 17.3137 18.3137 20 15 20C11.6863 20 9 17.3137 9 14C9 10.6863 11.6863 8 15 8C18.3137 8 21 10.6863 21 14ZM12 15C12 14.4477 12.4477 14 13 14V12C13 10.8954 13.8954 10 15 10C16.1046 10 17 10.8954 17 12V14C17.5523 14 18 14.4477 18 15V17C18 17.5523 17.5523 18 17 18H13C12.4477 18 12 17.5523 12 17V15ZM16 14V12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12V14H16Z",
-    fill: "currentColor"
-  }));
-};
-export var DisplayModeIcon = function DisplayModeIcon(props) {
-  return /*#__PURE__*/React.createElement(Icon, _extends({
-    glyph: DisplayModeGlyth
-  }, props));
-};

package/dist/types/ui/icons/DisplayModeIcon.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { CustomGlyphProps, GlyphProps } from '@atlaskit/icon/types';
-export declare const DisplayModeGlyth: (props: CustomGlyphProps) => JSX.Element;
-export declare const DisplayModeIcon: (props: GlyphProps) => JSX.Element;

package/dist/types-ts4.5/ui/icons/DisplayModeIcon.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { CustomGlyphProps, GlyphProps } from '@atlaskit/icon/types';
-export declare const DisplayModeGlyth: (props: CustomGlyphProps) => JSX.Element;
-export declare const DisplayModeIcon: (props: GlyphProps) => JSX.Element;

package/src/ui/icons/DisplayModeIcon.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import Icon from '@atlaskit/icon';
-import type { CustomGlyphProps, GlyphProps } from '@atlaskit/icon/types';
-
-export const DisplayModeGlyth = (props: CustomGlyphProps) => {
-	return (
-		<svg
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-		>
-			<rect x="4" y="5" width="4" height="14" rx="1" fill="currentColor" />
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M11 5C10.4477 5 10 5.44772 10 6V9.10102C11.0503 8.02921 12.4424 7.29368 14 7.07089V6C14 5.44772 13.5523 5 13 5H11Z"
-				fill="currentColor"
-			/>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M17 5C16.4477 5 16 5.44772 16 6V7.07089C17.5576 7.29368 18.9497 8.02921 20 9.10102V6C20 5.44772 19.5523 5 19 5H17Z"
-				fill="currentColor"
-			/>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M21 14C21 17.3137 18.3137 20 15 20C11.6863 20 9 17.3137 9 14C9 10.6863 11.6863 8 15 8C18.3137 8 21 10.6863 21 14ZM12 15C12 14.4477 12.4477 14 13 14V12C13 10.8954 13.8954 10 15 10C16.1046 10 17 10.8954 17 12V14C17.5523 14 18 14.4477 18 15V17C18 17.5523 17.5523 18 17 18H13C12.4477 18 12 17.5523 12 17V15ZM16 14V12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12V14H16Z"
-				fill="currentColor"
-			/>
-		</svg>
-	);
-};
-
-export const DisplayModeIcon = (props: GlyphProps) => {
-	return <Icon glyph={DisplayModeGlyth} {...props} />;
-};