Merge pull request #2179 from tf/text-block-justify

Support justified text align inside text blocks
codevise · Nov 27, 2024 · 04064f7 · 04064f7
2 parents 6ab8d01 + b4bbb60
commit 04064f7
Show file tree

Hide file tree

Showing 10 changed files with 206 additions and 5 deletions.
diff --git a/entry_types/scrolled/config/locales/new/align_justified.de.yml b/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"
diff --git a/entry_types/scrolled/config/locales/new/align_justified.en.yml b/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"
diff --git a/entry_types/scrolled/package/spec/frontend/EditableText-spec.js b/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',

diff --git a/entry_types/scrolled/package/spec/frontend/inlineEditing/EditableText/blocks-spec.js b/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', () => {

diff --git a/entry_types/scrolled/package/src/contentElements/textBlock/editor.js b/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);
 

diff --git a/entry_types/scrolled/package/src/contentElements/textBlock/stories.js b/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,

diff --git a/entry_types/scrolled/package/src/frontend/EditableText.js b/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':

diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/Selection.js b/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};

diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/blocks.js b/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);

diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/EditableText/index.js b/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);
+      }
     }
   });