Merge pull request #14760 from overleaf/mj-table-gen-toolbar-alignment

[visual] Update alignment icon based on selection

GitOrigin-RevId: 37019ba2fdf9f587da56a1d030cd89e6e740173c

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

@@ -58,6 +58,42 @@ export const Toolbar = memo(function Toolbar() {
     return t('caption_below')
   }, [tableEnvironment, positions.tabular.from, t])
 
+  const currentAlignment = useMemo(() => {
+    if (!selection) {
+      return undefined
+    }
+    if (selection.isMergedCellSelected(table)) {
+      const cell = table.getCell(selection.from.row, selection.from.cell)
+      if (cell.multiColumn) {
+        // NOTE: Assumes merged columns can only have one internal column
+        return cell.multiColumn.columns.specification[0].alignment
+      }
+    }
+    const { minX, maxX } = selection.normalized()
+    const alignment = table.columns[minX].alignment
+    for (let x = minX + 1; x <= maxX; x++) {
+      if (table.columns[x].alignment !== alignment) {
+        return undefined
+      }
+    }
+    return alignment
+  }, [selection, table])
+
+  const alignmentIcon = useMemo(() => {
+    switch (currentAlignment) {
+      case 'left':
+        return 'format_align_left'
+      case 'center':
+        return 'format_align_center'
+      case 'right':
+        return 'format_align_right'
+      case 'paragraph':
+        return 'format_align_justify'
+      default:
+        return 'format_align_left'
+    }
+  }, [currentAlignment])
+
   if (!selection) {
     return null
   }
@@ -149,7 +185,7 @@ export const Toolbar = memo(function Toolbar() {
       <div className="table-generator-button-group">
         <ToolbarButtonMenu
           label={t('alignment')}
-          icon="format_align_left"
+          icon={alignmentIcon}
           id="table-generator-align-dropdown"
           disabledLabel={t('select_a_column_or_a_merged_cell_to_align')}
           disabled={

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

@@ -223,7 +223,11 @@ cell 3 & cell 4 \\\\
         .click()
 
       cy.get('.table-generator-floating-toolbar').as('toolbar').should('exist')
-      cy.get('@toolbar').findByLabelText('Alignment').should('be.disabled')
+      cy.get('@toolbar')
+        .findByLabelText('Alignment')
+        .should('be.disabled')
+        .should('contain.text', 'format_align_center')
+
       cy.get('.column-selector').first().click()
       cy.get('@toolbar')
         .findByLabelText('Alignment')
@@ -237,6 +241,13 @@ cell 3 & cell 4 \\\\
         ['cell 1', 'cell 2'],
         ['cell 3', 'cell 4'],
       ])
+      // Check that alignment button updated to reflect the left alignment
+      cy.get('.table-generator-cell').first().click()
+      cy.get('@toolbar')
+        .findByLabelText('Alignment')
+        .should('be.disabled')
+        .should('contain.text', 'format_align_left')
+
       cy.get('.table-generator-cell')
         .eq(0)
         .should('have.class', 'alignment-left')