Merge pull request #14649 from overleaf/mj-table-gen-remove-columns-left

[visual] Fix removing multiple columns starting from the left in table generator

GitOrigin-RevId: d52adc3cb06e897f82c8ec1157e48e165683a14e

services/web/frontend/js/features/source-editor/components/table-generator/toolbar/commands.ts

@@ -253,6 +253,8 @@ export const removeRowOrColumns = (
   const removedColumns =
     Number(selection.isColumnSelected(startCell, table)) * selection.width()
 
+  const removingFromBeginning = selection.isColumnSelected(0, table)
+
   for (let row = startRow; row <= endRow; row++) {
     if (selection.isRowSelected(row, table)) {
       const rowPosition = positions.rowPositions[row]
@@ -267,19 +269,29 @@ export const removeRowOrColumns = (
         const cellPosition = positions.cells[row][cellIndex]
         if (selection.isColumnSelected(cell, table)) {
           // We should remove this column.
-          const boundaries = table.getCellBoundaries(row, cell)
-          if (boundaries.from === 0 && cellSeparators[row].length > 0) {
-            // Remove the cell separator between the first and second cell
+          if (removingFromBeginning) {
+            // Deletes content in { }
+            // [ cell x - 1 ] & { [ cell x ] & } [ cell x + 1 ]
+            const from = cellPosition.from
+            const to = cellSeparators[row][cellIndex].to
+            if (from === undefined || to === undefined) {
+              console.error('Failed to remove column')
+              return selection
+            }
             changes.push({
-              from: positions.cells[row][cell].from,
-              to: cellSeparators[row][0].to,
+              from,
+              to,
               insert: '',
             })
           } else {
-            // Remove the cell separator between the cell before and this if possible
-            const from =
-              cellSeparators[row][cellIndex - 1]?.from ?? cellPosition.from
+            // Deletes content in { }
+            // [ cell x - 1 ] { &  [ cell x ] } & [ cell x + 1 ]
+            const from = cellSeparators[row][cellIndex - 1].from
             const to = cellPosition.to
+            if (from === undefined || to === undefined) {
+              console.error('Failed to remove column')
+              return selection
+            }
             changes.push({
               from,
               to,
@@ -294,6 +306,13 @@ export const removeRowOrColumns = (
   const filteredColumns = columnSpecification.filter(
     (_, i) => !selection.isColumnSelected(i, table)
   )
+  if (
+    table.getBorderTheme() === BorderTheme.FULLY_BORDERED &&
+    columnSpecification[0]?.borderLeft > 0 &&
+    filteredColumns.length
+  ) {
+    filteredColumns[0].borderLeft = Math.max(1, filteredColumns[0].borderLeft)
+  }
   const newSpecification = generateColumnSpecification(filteredColumns)
   changes.push({
     from: positions.columnDeclarations.from,

services/web/test/frontend/features/source-editor/components/codemirror-editor-table-generator.spec.tsx

@@ -284,6 +284,26 @@ cell 3 & cell 4 \\\\
       ])
     })
 
+    it('Removes rows correctly when removing from the left', function () {
+      mountEditor(`
+\\begin{tabular}{|c|c|c|}\\hline
+    cell 1&cell 2&cell 3 \\\\\\hline
+\\end{tabular}
+      `)
+      checkTable([['cell 1', 'cell 2', 'cell 3']])
+      cy.get('.table-generator').findByText('cell 1').click()
+      cy.get('.table-generator')
+        .findByText('cell 1')
+        .type('{shift}{rightarrow}')
+      cy.get('.table-generator-floating-toolbar').as('toolbar').should('exist')
+      cy.get('@toolbar')
+        .findByLabelText('Delete row or column')
+        .should('be.enabled')
+      cy.get('@toolbar').findByLabelText('Delete row or column').click()
+      checkTable([['cell 3']])
+      checkBordersWithNoMultiColumn([true, true], [true, true])
+    })
+
     it('Merges and unmerged cells', function () {
       mountEditor(`
 \\begin{tabular}{ccc}