@atlaskit/editor-plugin-table 7.16.2 → 7.16.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 7.16.4
+
+### Patch Changes
+
+-   [#102667](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102667)
+    [`ab69107b7352`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ab69107b7352) -
+    Force placeholder drag handle to be positioned in first column to avoid overflow
+
+## 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/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -126,6 +126,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var generateHandleByType = function generateHandleByType(type, appearance, gridColumn, indexes) {
     var _rowHeights$reduce, _colWidths$reduce;
     var isHover = type === 'hover';
+    var isPlaceholder = appearance === 'placeholder';
     var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
       return sum + cur;
     }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
@@ -147,7 +148,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         width: '100%',
         position: 'relative'
       },
-      "data-testid": "table-floating-column-".concat(isHover ? colIndex : selectedColIndexes[0], "-drag-handle")
+      "data-testid": "table-floating-column-".concat(isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0], "-drag-handle")
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",
@@ -172,10 +173,13 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     if (!tableActive) {
       return null;
     }
+    var selectedAppearance = isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder';
 
     // placeholder / selected need to always render at least one handle
     // so it can be focused via keyboard shortcuts
-    handles.push(generateHandleByType('selected', isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder', "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length), selectedColIndexes));
+    handles.push(generateHandleByType('selected', selectedAppearance,
+    // always position placeholder in first column to avoid overflow issues
+    selectedAppearance === 'placeholder' ? '1 / span 1' : "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length), selectedColIndexes));
     if (hoveredCell && isTableHovered && colIndex !== undefined && !selectedColIndexes.includes(colIndex)) {
       handles.push(generateHandleByType('hover', 'default', "".concat(colIndex + 1, " / span 1"), colIndexes));
     }

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/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -126,6 +126,7 @@ export const ColumnControls = ({
   const generateHandleByType = (type, appearance, gridColumn, indexes) => {
     var _rowHeights$reduce, _colWidths$reduce;
     const isHover = type === 'hover';
+    const isPlaceholder = appearance === 'placeholder';
     const previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce((sum, cur) => sum + cur, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
     const previewWidth = (_colWidths$reduce = colWidths === null || colWidths === void 0 ? void 0 : colWidths.reduce((sum, v, i) => sum + (v !== null && v !== void 0 ? v : tableCellMinWidth) * (indexes.includes(i) ? 1 : 0), 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : tableCellMinWidth;
     return /*#__PURE__*/React.createElement("div", {
@@ -143,7 +144,7 @@ export const ColumnControls = ({
         width: '100%',
         position: 'relative'
       },
-      "data-testid": `table-floating-column-${isHover ? colIndex : selectedColIndexes[0]}-drag-handle`
+      "data-testid": `table-floating-column-${isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0]}-drag-handle`
     }, /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",
@@ -168,10 +169,13 @@ export const ColumnControls = ({
     if (!tableActive) {
       return null;
     }
+    const selectedAppearance = isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder';
 
     // placeholder / selected need to always render at least one handle
     // so it can be focused via keyboard shortcuts
-    handles.push(generateHandleByType('selected', isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder', `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`, selectedColIndexes));
+    handles.push(generateHandleByType('selected', selectedAppearance,
+    // always position placeholder in first column to avoid overflow issues
+    selectedAppearance === 'placeholder' ? '1 / span 1' : `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`, selectedColIndexes));
     if (hoveredCell && isTableHovered && colIndex !== undefined && !selectedColIndexes.includes(colIndex)) {
       handles.push(generateHandleByType('hover', 'default', `${colIndex + 1} / span 1`, colIndexes));
     }

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/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -117,6 +117,7 @@ export var ColumnControls = function ColumnControls(_ref) {
   var generateHandleByType = function generateHandleByType(type, appearance, gridColumn, indexes) {
     var _rowHeights$reduce, _colWidths$reduce;
     var isHover = type === 'hover';
+    var isPlaceholder = appearance === 'placeholder';
     var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
       return sum + cur;
     }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
@@ -138,7 +139,7 @@ export var ColumnControls = function ColumnControls(_ref) {
         width: '100%',
         position: 'relative'
       },
-      "data-testid": "table-floating-column-".concat(isHover ? colIndex : selectedColIndexes[0], "-drag-handle")
+      "data-testid": "table-floating-column-".concat(isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0], "-drag-handle")
     }, /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",
@@ -163,10 +164,13 @@ export var ColumnControls = function ColumnControls(_ref) {
     if (!tableActive) {
       return null;
     }
+    var selectedAppearance = isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder';
 
     // placeholder / selected need to always render at least one handle
     // so it can be focused via keyboard shortcuts
-    handles.push(generateHandleByType('selected', isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder', "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length), selectedColIndexes));
+    handles.push(generateHandleByType('selected', selectedAppearance,
+    // always position placeholder in first column to avoid overflow issues
+    selectedAppearance === 'placeholder' ? '1 / span 1' : "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length), selectedColIndexes));
     if (hoveredCell && isTableHovered && colIndex !== undefined && !selectedColIndexes.includes(colIndex)) {
       handles.push(generateHandleByType('hover', 'default', "".concat(colIndex + 1, " / span 1"), colIndexes));
     }

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.4",
   "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}

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -195,6 +195,7 @@ export const ColumnControls = ({
     indexes: number[],
   ) => {
     const isHover = type === 'hover';
+    const isPlaceholder = appearance === 'placeholder';
     const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
 
     const previewWidth =
@@ -221,7 +222,11 @@ export const ColumnControls = ({
           position: 'relative',
         }}
         data-testid={`table-floating-column-${
-          isHover ? colIndex : selectedColIndexes[0]
+          isHover
+            ? colIndex
+            : isPlaceholder
+              ? appearance
+              : selectedColIndexes[0]
         }-drag-handle`}
       >
         <DragHandle
@@ -254,17 +259,23 @@ export const ColumnControls = ({
       return null;
     }
 
+    const selectedAppearance =
+      isColumnSelected && isEntireTableSelected
+        ? isInDanger
+          ? 'danger'
+          : 'selected'
+        : 'placeholder';
+
     // placeholder / selected need to always render at least one handle
     // so it can be focused via keyboard shortcuts
     handles.push(
       generateHandleByType(
         'selected',
-        isColumnSelected && isEntireTableSelected
-          ? isInDanger
-            ? 'danger'
-            : 'selected'
-          : 'placeholder',
-        `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`,
+        selectedAppearance,
+        // always position placeholder in first column to avoid overflow issues
+        selectedAppearance === 'placeholder'
+          ? '1 / span 1'
+          : `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`,
         selectedColIndexes,
       ),
     );