Merge pull request #2214 from tf/justified-center-ragged-list

Fix indentation of justified lists in center ragged sections

Author: tf

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

@@ -2,6 +2,8 @@ import React from 'react';
 
 import {EditableText} from 'frontend';
 
+import styles from 'frontend/EditableText.module.css';
+
 import {render} from '@testing-library/react';
 import {renderInEntry} from 'support';
 import '@testing-library/jest-dom/extend-expect'
@@ -398,23 +400,7 @@ describe('EditableText', () => {
 
     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);');
+    expect(container.querySelector('p')).toHaveClass(styles.justify);
   });
 
   it('uses body scaleCategory by default', () => {

entry_types/scrolled/package/src/contentElements/textBlock/TextBlock.module.css

@@ -120,8 +120,6 @@
   text-align: center;
 }
 
-.layout-centerRagged ol,
-.layout-centerRagged ul {
-  padding-left: 0;
-  list-style-position: inside;
+.layout-centerRagged {
+  --editable-text-list-style-position: inside;
 }

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

@@ -153,6 +153,53 @@ storiesOfContentElement(module, {
             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.'},
+              {
+                type: 'bulleted-list',
+                children: [
+                  {
+                    type: 'list-item',
+                    children: [
+                      {text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'}
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      name: 'Text align justify - Center Ragged',
+      sectionConfiguration: {
+        layout: 'centerRagged'
+      },
+      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.'}
+            ]
+          },
+          {
+            type: 'bulleted-list',
+            textAlign: 'justify',
+            children: [
+              {
+                type: 'list-item',
+                children: [
+                  {text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'}
+                ]
+              }
             ]
           }
         ]

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

@@ -55,35 +55,38 @@ export function renderElement({attributes, children, element}) {
                          camelize(element.type),
                          element.size].join('-');
 
-  const className = classNames(variantClassName, sizeClassName);
+  const className = classNames(
+    variantClassName,
+    sizeClassName,
+    {[styles.justify]: element.textAlign === 'justify'}
+  );
 
-  const styles = {
-    ...(element.color && {color: paletteColor(element.color)}),
-    ...(element.textAlign && {textAlign: element.textAlign})
+  const inlineStyles = {
+    ...(element.color && {color: paletteColor(element.color)})
   };
 
   switch (element.type) {
   case 'block-quote':
     return (
       <blockquote {...attributes}
                   className={className}
-                  style={styles}>
+                  style={inlineStyles}>
         {children}
       </blockquote>
     );
   case 'bulleted-list':
     return (
       <ul {...attributes}
           className={className}
-          style={styles}>
+          style={inlineStyles}>
         {children}
       </ul>
     );
   case 'numbered-list':
     return (
       <ol {...attributes}
           className={className}
-          style={styles}>
+          style={inlineStyles}>
         {children}
       </ol>
     );
@@ -96,7 +99,7 @@ export function renderElement({attributes, children, element}) {
       <Heading key={key}
                attributes={otherAttributes}
                className={className}
-               styles={styles}>
+               inlineStyles={inlineStyles}>
         {children}
       </Heading>
     );
@@ -106,14 +109,14 @@ export function renderElement({attributes, children, element}) {
     return (
       <p {...attributes}
          className={className}
-         style={styles}>
+         style={inlineStyles}>
         {children}
       </p>
     );
   }
 }
 
-function Heading({attributes, className, styles: inlineStyles, children}) {
+function Heading({attributes, className, inlineStyles, children}) {
   const darkBackground = useDarkBackground();
 
   return (

entry_types/scrolled/package/src/frontend/EditableText.module.css

@@ -8,6 +8,20 @@
   white-space: pre-line;
 }
 
+.root ul,
+.root ol {
+  list-style-position: var(--editable-text-list-style-position);
+}
+
+.justify {
+  text-align: justify;
+}
+
+ul.justify,
+ol.justify {
+  list-style-position: outside;
+}
+
 .light {
   color: lightContentTextColor;
 }