From 8e7f0c4889c5b19412bab8c007d214a186598f3d Mon Sep 17 00:00:00 2001
From: Daniel da Silva <danielfdsilva@gmail.com>
Date: Thu, 15 Jun 2023 16:24:29 +0100
Subject: [PATCH] Add alignment option to images without captions

---
 .../components/common/blocks/images/index.js  | 31 ++++++++++++-------
 app/scripts/styles/content-block.js           |  9 ++++++
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/app/scripts/components/common/blocks/images/index.js b/app/scripts/components/common/blocks/images/index.js
index 2a804eb7e..612546f53 100644
--- a/app/scripts/components/common/blocks/images/index.js
+++ b/app/scripts/components/common/blocks/images/index.js
@@ -29,17 +29,26 @@ Caption.propTypes = {
 export default function Image(props) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { align, caption, attrAuthor, ...propsWithoutAttrs } = props;
-  const imageAlign = align ? align : 'center';
-  return caption || attrAuthor ? (
-    // if it is an inline image with a caption
-    <Figure className={`align-${imageAlign}`}>
-      <img loading='lazy' {...propsWithoutAttrs} />
-      <Caption attrAuthor={attrAuthor} attrUrl={props.attrUrl}>
-        {caption}
-      </Caption>
-    </Figure>
-  ) : (
-    <img loading='lazy' {...propsWithoutAttrs} />
+  if (caption || attrAuthor) {
+    const imageAlign = align ? align : 'center';
+    return (
+      // if it is an inline image with a caption
+      <Figure className={`align-${imageAlign}`}>
+        <img loading='lazy' {...propsWithoutAttrs} />
+        <Caption attrAuthor={attrAuthor} attrUrl={props.attrUrl}>
+          {caption}
+        </Caption>
+      </Figure>
+    );
+  }
+
+  const imageAlign = align ? align : 'left';
+  return (
+    <img
+      className={`img-align-${imageAlign}`}
+      loading='lazy'
+      {...propsWithoutAttrs}
+    />
   );
 }
 
diff --git a/app/scripts/styles/content-block.js b/app/scripts/styles/content-block.js
index c35a7ac35..d29429f91 100644
--- a/app/scripts/styles/content-block.js
+++ b/app/scripts/styles/content-block.js
@@ -99,6 +99,15 @@ const ContentBlockProse = styled(VarProse)`
       text-align: center;
     }
   }
+
+  .img-align-right {
+    margin-left: auto;
+  }
+
+  .img-align-center {
+    margin-left: auto;
+    margin-right: auto;
+  }
 `;
 
 // assign displayName that a block can tell