From cadbdce255d4b09249a253ed6fd8176ffdbd26c2 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Mon, 11 Sep 2023 10:59:17 +0100
Subject: [PATCH] Merge pull request #14760 from
 overleaf/mj-table-gen-toolbar-alignment

[visual] Update alignment icon based on selection

GitOrigin-RevId: 37019ba2fdf9f587da56a1d030cd89e6e740173c
---
 .../table-generator/toolbar/toolbar.tsx       | 38 ++++++++++++++++++-
 ...codemirror-editor-table-generator.spec.tsx | 13 ++++++-
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar.tsx b/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar.tsx
index 7f7505bc52..7fa6af6894 100644
--- a/services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar.tsx
+++ b/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={
diff --git a/services/web/test/frontend/features/source-editor/components/codemirror-editor-table-generator.spec.tsx b/services/web/test/frontend/features/source-editor/components/codemirror-editor-table-generator.spec.tsx
index 9f0377ce4e..20ad0fa9c6 100644
--- a/services/web/test/frontend/features/source-editor/components/codemirror-editor-table-generator.spec.tsx
+++ b/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')