@atlaskit/editor-plugin-table 7.16.3 → 7.16.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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/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/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/package.json

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

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,
       ),
     );