@atlaskit/editor-plugin-table 7.16.2 → 7.16.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-table
 
+## 7.16.3
+
+### Patch Changes
+
+-   [#102385](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102385)
+    [`501e08d95a31`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/501e08d95a31) -
+    [ux] Resize ratio depends on table alignment option. Fixed resize ratio for the cases when table
+    alignment is not 'center'.
+
 ## 7.16.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableContainer.js

@@ -163,6 +163,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor,
+    isTableAlignmentEnabled: isTableAlignmentEnabled,
     isTableScalingEnabled: isTableScalingEnabled,
     isWholeTableInDanger: isWholeTableInDanger,
     pluginInjectionApi: pluginInjectionApi,

package/dist/cjs/nodeviews/TableResizer.js

@@ -25,6 +25,7 @@ var _tableAnalytics = require("../pm-plugins/table-analytics");
 var _utils3 = require("../pm-plugins/table-resizing/utils");
 var _tableWidth = require("../pm-plugins/table-width");
 var _consts = require("../ui/consts");
+var _alignment = require("../utils/alignment");
 var _analytics2 = require("../utils/analytics");
 var _guidelines = require("../utils/guidelines");
 var _snapping = require("../utils/snapping");
@@ -98,6 +99,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
     displayGapCursor = _ref.displayGapCursor,
     isTableScalingEnabled = _ref.isTableScalingEnabled,
+    isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
     isWholeTableInDanger = _ref.isWholeTableInDanger,
     pluginInjectionApi = _ref.pluginInjectionApi;
   var currentGap = (0, _react.useRef)(0);
@@ -365,6 +367,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
     }
   }, [width]);
+  var resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && (0, _alignment.normaliseAlignment)(node.attrs.layout) === 'center' ? 2 : 1;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
     ref: resizerRef,
     enable: handles,
@@ -375,7 +378,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     handleResizeStart: handleResizeStart,
     handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
-    resizeRatio: 2,
+    resizeRatio: resizeRatio,
     minWidth: resizerMinWidth,
     maxWidth: maxWidth,
     snapGap: _consts.TABLE_SNAP_GAP,

package/dist/es2019/nodeviews/TableContainer.js

@@ -154,6 +154,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     displayGuideline,
     attachAnalyticsEvent,
     displayGapCursor,
+    isTableAlignmentEnabled,
     isTableScalingEnabled,
     isWholeTableInDanger,
     pluginInjectionApi,

package/dist/es2019/nodeviews/TableResizer.js

@@ -15,6 +15,7 @@ import { META_KEYS } from '../pm-plugins/table-analytics';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
+import { normaliseAlignment } from '../utils/alignment';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
 import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
@@ -83,6 +84,7 @@ export const TableResizer = ({
   attachAnalyticsEvent,
   displayGapCursor,
   isTableScalingEnabled,
+  isTableAlignmentEnabled,
   isWholeTableInDanger,
   pluginInjectionApi
 }) => {
@@ -363,6 +365,7 @@ export const TableResizer = ({
       (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 ? void 0 : _updateTooltip$curren.call(updateTooltip);
     }
   }, [width]);
+  const resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && normaliseAlignment(node.attrs.layout) === 'center' ? 2 : 1;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
     ref: resizerRef,
     enable: handles,
@@ -373,7 +376,7 @@ export const TableResizer = ({
     handleResizeStart: handleResizeStart,
     handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
-    resizeRatio: 2,
+    resizeRatio: resizeRatio,
     minWidth: resizerMinWidth,
     maxWidth: maxWidth,
     snapGap: TABLE_SNAP_GAP,

package/dist/esm/nodeviews/TableContainer.js

@@ -153,6 +153,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor,
+    isTableAlignmentEnabled: isTableAlignmentEnabled,
     isTableScalingEnabled: isTableScalingEnabled,
     isWholeTableInDanger: isWholeTableInDanger,
     pluginInjectionApi: pluginInjectionApi,

package/dist/esm/nodeviews/TableResizer.js

@@ -19,6 +19,7 @@ import { META_KEYS } from '../pm-plugins/table-analytics';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
+import { normaliseAlignment } from '../utils/alignment';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
 import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
@@ -88,6 +89,7 @@ export var TableResizer = function TableResizer(_ref) {
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
     displayGapCursor = _ref.displayGapCursor,
     isTableScalingEnabled = _ref.isTableScalingEnabled,
+    isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
     isWholeTableInDanger = _ref.isWholeTableInDanger,
     pluginInjectionApi = _ref.pluginInjectionApi;
   var currentGap = useRef(0);
@@ -355,6 +357,7 @@ export var TableResizer = function TableResizer(_ref) {
       (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
     }
   }, [width]);
+  var resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && normaliseAlignment(node.attrs.layout) === 'center' ? 2 : 1;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
     ref: resizerRef,
     enable: handles,
@@ -365,7 +368,7 @@ export var TableResizer = function TableResizer(_ref) {
     handleResizeStart: handleResizeStart,
     handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
-    resizeRatio: 2,
+    resizeRatio: resizeRatio,
     minWidth: resizerMinWidth,
     maxWidth: maxWidth,
     snapGap: TABLE_SNAP_GAP,

package/dist/types/nodeviews/TableResizer.d.ts

@@ -19,11 +19,12 @@ interface TableResizerProps {
     displayGapCursor: (toggle: boolean) => boolean;
     pluginInjectionApi?: PluginInjectionAPI;
     isTableScalingEnabled?: boolean;
+    isTableAlignmentEnabled?: boolean;
     isWholeTableInDanger?: boolean;
 }
 export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/nodeviews/TableResizer.d.ts

@@ -19,11 +19,12 @@ interface TableResizerProps {
     displayGapCursor: (toggle: boolean) => boolean;
     pluginInjectionApi?: PluginInjectionAPI;
     isTableScalingEnabled?: boolean;
+    isTableAlignmentEnabled?: boolean;
     isWholeTableInDanger?: boolean;
 }
 export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.2",
+  "version": "7.16.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/nodeviews/TableContainer.tsx

@@ -254,6 +254,7 @@ export const ResizableTableContainer = React.memo(
       displayGuideline,
       attachAnalyticsEvent,
       displayGapCursor,
+      isTableAlignmentEnabled,
       isTableScalingEnabled,
       isWholeTableInDanger,
       pluginInjectionApi,

package/src/nodeviews/TableResizer.tsx

@@ -48,6 +48,7 @@ import {
   TABLE_HIGHLIGHT_TOLERANCE,
   TABLE_SNAP_GAP,
 } from '../ui/consts';
+import { normaliseAlignment } from '../utils/alignment';
 import {
   generateResizedPayload,
   generateResizeFrameRatePayloads,
@@ -79,6 +80,7 @@ interface TableResizerProps {
   displayGapCursor: (toggle: boolean) => boolean;
   pluginInjectionApi?: PluginInjectionAPI;
   isTableScalingEnabled?: boolean;
+  isTableAlignmentEnabled?: boolean;
   isWholeTableInDanger?: boolean;
 }
 
@@ -169,6 +171,7 @@ export const TableResizer = ({
   attachAnalyticsEvent,
   displayGapCursor,
   isTableScalingEnabled,
+  isTableAlignmentEnabled,
   isWholeTableInDanger,
   pluginInjectionApi,
 }: PropsWithChildren<TableResizerImprovementProps>) => {
@@ -594,6 +597,13 @@ export const TableResizer = ({
     }
   }, [width]);
 
+  const resizeRatio =
+    !isTableAlignmentEnabled ||
+    (isTableAlignmentEnabled &&
+      normaliseAlignment(node.attrs.layout) === 'center')
+      ? 2
+      : 1;
+
   return (
     <>
       <ResizerNext
@@ -606,7 +616,7 @@ export const TableResizer = ({
         handleResizeStart={handleResizeStart}
         handleResize={scheduleResize}
         handleResizeStop={handleResizeStop}
-        resizeRatio={2}
+        resizeRatio={resizeRatio}
         minWidth={resizerMinWidth}
         maxWidth={maxWidth}
         snapGap={TABLE_SNAP_GAP}