From c21c528dd2be62477a5807212668c6d78fef45cd Mon Sep 17 00:00:00 2001
From: Tiberiu Ichim <tiberiu.ichim@gmail.com>
Date: Sat, 3 Oct 2020 23:34:56 +0300
Subject: [PATCH] Add text align styling

---
 src/StyleWrapper/schema.js |  6 +++++-
 src/Widgets/TextAlign.jsx  | 39 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 src/Widgets/TextAlign.jsx

diff --git a/src/StyleWrapper/schema.js b/src/StyleWrapper/schema.js
index 41b1f62..285f79c 100644
--- a/src/StyleWrapper/schema.js
+++ b/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',
diff --git a/src/Widgets/TextAlign.jsx b/src/Widgets/TextAlign.jsx
new file mode 100644
index 0000000..7bbf6dd
--- /dev/null
+++ b/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>
+  );
+};