Support justified text align inside text blocks

entry_types/scrolled/config/locales/new/align_justified.de.yml

@@ -0,0 +1,11 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        textBlock:
+          attributes:
+            textAlign:
+              label: "Textausrichtung"
+              values:
+                ragged: "Flattersatz"
+                justify: "Blocksatz"

entry_types/scrolled/config/locales/new/align_justified.en.yml

@@ -0,0 +1,11 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        textBlock:
+          attributes:
+            textAlign:
+              label: "Text align"
+              values:
+                ragged: "Ragged"
+                justify: "Justified"

entry_types/scrolled/package/spec/frontend/EditableText-spec.js

@@ -342,6 +342,36 @@ describe('EditableText', () => {
                                                                 'color: rgb(0, 0, 0);');
   });
 
+  it('renders text align', () => {
+    const value = [{
+      type: 'paragraph',
+      textAlign: 'justify',
+      children: [
+        {text: 'Some text'}
+      ]
+    }];
+
+    const {container} = render(<EditableText value={value} />);
+
+    expect(container.querySelector('p[style]')).toHaveStyle('text-align: justify;');
+  });
+
+  it('can render both color and text align', () => {
+    const value = [{
+      type: 'paragraph',
+      textAlign: 'justify',
+      color: '#000',
+      children: [
+        {text: 'Some text'}
+      ]
+    }];
+
+    const {container} = render(<EditableText value={value} />);
+
+    expect(container.querySelector('p[style]')).toHaveStyle('text-align: justify;');
+    expect(container.querySelector('p[style]')).toHaveStyle('color: rgb(0, 0, 0);');
+  });
+
   it('uses body scaleCategory by default', () => {
     const value = [{
       type: 'paragraph',

entry_types/scrolled/package/spec/frontend/inlineEditing/EditableText/blocks-spec.js

@@ -2,6 +2,7 @@
 import {
   applyTypograpyhVariant,
   applyColor,
+  applyTextAlign,
   isBlockActive,
   toggleBlock,
   withBlockNormalization
@@ -423,6 +424,119 @@ describe('applyColor', () => {
   });
 });
 
+describe('applyTextAlign', () => {
+  it('sets color property deeply in lists', () => {
+    const editor = (
+      <editor>
+        <bulletedList>
+          <listItem>
+            Item 1
+            <cursor />
+          </listItem>
+          <listItem>
+            Item 1
+          </listItem>
+        </bulletedList>
+      </editor>
+    );
+
+    applyTextAlign(editor, 'justify');
+
+    const output = (
+      <editor>
+        <bulletedList textAlign="justify">
+          <listItem textAlign="justify">
+            Item 1
+          </listItem>
+          <listItem textAlign="justify">
+            Item 1
+          </listItem>
+        </bulletedList>
+      </editor>
+    );
+    expect(editor.children).toEqual(output.children);
+  });
+
+  it('sets textAlign property of multiple elements', () => {
+    const editor = (
+      <editor>
+        <paragraph>
+          <anchor />
+          Text
+        </paragraph>
+        <paragraph>
+          More Text
+          <focus />
+        </paragraph>
+        <paragraph>
+          Other Text
+        </paragraph>
+      </editor>
+    );
+
+    applyTextAlign(editor, 'justify');
+
+    const output = (
+      <editor>
+        <paragraph textAlign="justify">
+          Text
+        </paragraph>
+        <paragraph textAlign="justify">
+          More Text
+        </paragraph>
+        <paragraph>
+          Other Text
+        </paragraph>
+      </editor>
+    );
+    expect(editor.children).toEqual(output.children);
+  });
+
+  it('unsets textAlign property if set to ragged', () => {
+    const editor = (
+      <editor>
+        <paragraph textAlign="justify">
+          <cursor />
+          Text
+        </paragraph>
+      </editor>
+    );
+
+    applyTextAlign(editor, 'ragged');
+
+    const output = (
+      <editor>
+        <paragraph>
+          Text
+        </paragraph>
+      </editor>
+    );
+    expect(editor.children).toEqual(output.children);
+  });
+
+  it('unsets textAlign property if blank', () => {
+    const editor = (
+      <editor>
+        <paragraph textAlign="justify">
+          <cursor />
+          Text
+        </paragraph>
+      </editor>
+    );
+
+    applyTextAlign(editor, undefined);
+
+    const output = (
+      <editor>
+        <paragraph>
+          Text
+        </paragraph>
+      </editor>
+    );
+    expect(editor.children).toEqual(output.children);
+  });
+});
+
 describe('withBlockNormalization', () => {
   describe('with onlyParagraphs false', () => {
     it('is no-op by default', () => {

entry_types/scrolled/package/src/contentElements/textBlock/editor.js

@@ -2,7 +2,7 @@ import I18n from 'i18n-js';
 import {utils} from 'pageflow-scrolled/frontend';
 import {editor} from 'pageflow-scrolled/editor';
 import {InfoBoxView} from 'pageflow/editor';
-import {SeparatorView} from 'pageflow/ui'
+import {SeparatorView, SelectInputView} from 'pageflow/ui'
 
 import pictogram from './pictogram.svg';
 
@@ -51,6 +51,10 @@ editor.contentElementTypes.register('textBlock', {
         model: modelDelegator,
         propertyName: 'color'
       });
+      this.input('textAlign', SelectInputView, {
+        model: contentElement.transientState,
+        values: ['ragged', 'justify']
+      });
 
       this.view(SeparatorView);
 

entry_types/scrolled/package/src/contentElements/textBlock/stories.js

@@ -137,6 +137,27 @@ storiesOfContentElement(module, {
         ]
       }
     },
+    {
+      name: 'Text align justify',
+      configuration: {
+        value: [
+          {
+            type: 'heading',
+            textAlign: 'justify',
+            children: [
+              {text: 'Heading'}
+            ]
+          },
+          {
+            type: 'paragraph',
+            textAlign: 'justify',
+            children: [
+              {text: 'Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'},
+            ]
+          }
+        ]
+      }
+    },
     {
       name: 'With theme link color',
       configuration: linkExampleConfiguration,

entry_types/scrolled/package/src/frontend/EditableText.js

@@ -49,9 +49,10 @@ export function renderElement({attributes, children, element}) {
                            ['typography-textBlock',
                             camelize(element.type),
                             element.variant].join('-');
-
-  const styles = element.color &&
-                 {color: paletteColor(element.color)};
+  const styles = {
+    ...(element.color && {color: paletteColor(element.color)}),
+    ...(element.textAlign && {textAlign: element.textAlign})
+  };
 
   switch (element.type) {
   case 'block-quote':

entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/Selection.js

@@ -86,7 +86,8 @@ export function Selection(props) {
       editableTextIsSingleBlock: editor.children.length <= 1,
       exampleNode: getUniformSelectedNode(editor, 'type'),
       typographyVariant: getUniformSelectedNode(editor, 'variant')?.variant,
-      color: getUniformSelectedNode(editor, 'color')?.color
+      color: getUniformSelectedNode(editor, 'color')?.color,
+      textAlign: getUniformSelectedNode(editor, 'textAlign')?.textAlign,
     });
 
     boundsRef.current = {start, end};

entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/blocks.js

@@ -42,6 +42,10 @@ export function applyColor(editor, color) {
   applyProperties(editor, {color});
 }
 
+export function applyTextAlign(editor, textAlign) {
+  applyProperties(editor, {textAlign: textAlign === 'justify' ? 'justify' : undefined});
+}
+
 function applyProperties(editor, properties) {
   Transforms.setNodes(editor, properties, {mode: 'highest'});
   applyPropertiesToListItems(editor, properties);

entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/index.js

@@ -21,6 +21,7 @@ import {Selection} from './Selection';
 import {DropTargets} from './DropTargets';
 import {LinkTooltipProvider} from '../LinkTooltip';
 import {
+  applyTextAlign,
   applyTypograpyhVariant,
   applyColor,
   withBlockNormalization
@@ -99,6 +100,9 @@ export const EditableText = React.memo(function EditableText({
       if ('color' in command.payload) {
         applyColor(editor, command.payload.color);
       }
+      if ('textAlign' in command.payload) {
+        applyTextAlign(editor, command.payload.textAlign);
+      }
     }
   });