fix: send text alignment command values (#66)

code-by-sia · web-flow · commit 952774fac65b · 2026-05-30T15:30:48.000+02:00
Co-authored-by: Sia &lt;me@siamand.cc&gt;
diff --git a/docs/assets/index-DrD1_fGU.js b/docs/assets/index-DrD1_fGU.js
diff --git a/docs/index.html b/docs/index.html
@@ -10,7 +10,7 @@
         crossorigin="anonymous">
   <link rel="icon" href="/OpenWebSheet/favicon.ico">
   <title>Open web sheet</title>
-  <script type="module" crossorigin src="/OpenWebSheet/assets/index-BChN-qVl.js"></script>
+  <script type="module" crossorigin src="/OpenWebSheet/assets/index-DrD1_fGU.js"></script>
   <link rel="stylesheet" crossorigin href="/OpenWebSheet/assets/index-Cs_txOUy.css">
 </head>
 <body>
diff --git a/src/features/ribbon/FormatControls.tsx b/src/features/ribbon/FormatControls.tsx
@@ -10,6 +10,12 @@ interface FormatControlsProps {
   onAction: (action: AppAction) => void;
 }
 
+const alignments = [
+  {icon: 'fa fa-align-left', label: 'Align left', value: 'left', textAlign: TextAlign.Left},
+  {icon: 'fa fa-align-center', label: 'Align center', value: 'center', textAlign: TextAlign.Center},
+  {icon: 'fa fa-align-right', label: 'Align right', value: 'right', textAlign: TextAlign.Right},
+];
+
 export function FormatControls(props: FormatControlsProps) {
   const action = (actionName: string, args?: any) => props.onAction({actionName, args});
 
@@ -30,22 +36,22 @@ export function FormatControls(props: FormatControlsProps) {
         })),
       ),
       React.createElement('div', {className: 'ows-button-row'},
-        React.createElement(AlignButton, {action, alignment: TextAlign.Left, appearance: props.appearance}),
-        React.createElement(AlignButton, {action, alignment: TextAlign.Center, appearance: props.appearance}),
-        React.createElement(AlignButton, {action, alignment: TextAlign.Right, appearance: props.appearance}),
+        alignments.map((alignment) => React.createElement(AlignButton, {
+          action,
+          alignment,
+          appearance: props.appearance,
+          key: alignment.value,
+        })),
       ),
     ),
   );
 }
 
 function AlignButton({action, alignment, appearance}: any) {
-  const icon = alignment === TextAlign.Left
-    ? 'fa fa-align-left'
-    : alignment === TextAlign.Center ? 'fa fa-align-center' : 'fa fa-align-right';
-
   return React.createElement(Button, {
-    active: appearance.textAlign === alignment,
-    icon,
-    onClick: () => action('align', alignment),
+    active: appearance.textAlign === alignment.textAlign,
+    icon: alignment.icon,
+    onClick: () => action('align', alignment.value),
+    title: alignment.label,
   });
 }
diff --git a/src/features/ribbon/RibbonMenu.test.tsx b/src/features/ribbon/RibbonMenu.test.tsx
@@ -54,6 +54,16 @@ describe('RibbonMenu', () => {
     expect(onAction).toHaveBeenCalledWith({actionName: 'outside-border', args: '#000000'});
   });
 
+  it('emits text alignment command values the core accepts', () => {
+    const onAction = renderRibbon();
+
+    fireEvent.click(screen.getByTitle('Align center'));
+    fireEvent.click(screen.getByTitle('Align right'));
+
+    expect(onAction).toHaveBeenCalledWith({actionName: 'align', args: 'center'});
+    expect(onAction).toHaveBeenCalledWith({actionName: 'align', args: 'right'});
+  });
+
   it('toggles view layout section items', async () => {
     renderRibbon();
 
