Add text align styling

src/StyleWrapper/schema.js

@@ -4,7 +4,7 @@ export const StyleSchema = () => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['style_name', 'align', 'size'],
+      fields: ['style_name', 'textAlign', 'align', 'size'],
     },
     {
       id: 'advanced',
@@ -17,6 +17,10 @@ export const StyleSchema = () => ({
       title: 'Style',
       widget: 'style_select',
     },
+    textAlign: {
+      title: 'Text align',
+      widget: 'style_text_align',
+    },
     align: {
       title: 'Align',
       widget: 'style_align',

src/Widgets/TextAlign.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+
+import alignLeftSVG from '@plone/volto/icons/align-left.svg';
+import alignRightSVG from '@plone/volto/icons/align-right.svg';
+import alignJustifySVG from '@plone/volto/icons/align-justify.svg';
+import alignCenterSVG from '@plone/volto/icons/align-center.svg';
+
+const VALUE_MAP = [
+  ['left', alignLeftSVG],
+  ['right', alignRightSVG],
+  ['center', alignCenterSVG],
+  ['justify', alignJustifySVG],
+];
+
+export default (props) => {
+  const { value, onChange, id } = props;
+  return (
+    <FormFieldWrapper {...props}>
+      <Button.Group>
+        {VALUE_MAP.map(([name, icon]) => (
+          <Button
+            icon
+            basic
+            compact
+            active={value === name}
+            aria-label={name}
+            onClick={() => {
+              onChange(id, name);
+            }}
+          >
+            <Icon name={icon} size="24px" />
+          </Button>
+        ))}
+      </Button.Group>
+    </FormFieldWrapper>
+  );
+};