From fee43349f9868f8797f280cf180a22a3999cc236 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 15 Sep 2021 09:38:14 +1000
Subject: [PATCH] updated contentful deps, improved image rendering for rich
 content

---
 components/RichBody.tsx | 37 +++++++++++++++++++++++++++----------
 package.json            |  8 ++++----
 services/render.tsx     | 19 ++++++++++---------
 yarn.lock               | 38 +++++++++++++++++++-------------------
 4 files changed, 60 insertions(+), 42 deletions(-)

diff --git a/components/RichBody.tsx b/components/RichBody.tsx
index 6913910..8bb65c0 100644
--- a/components/RichBody.tsx
+++ b/components/RichBody.tsx
@@ -76,16 +76,33 @@ export function RichBody(props: Props): ReactElement {
         // const children;
         const plaintext = documentToPlainTextString(node);
         const isShortcode = CMS.SHORTCODE_REGEX.test(plaintext);
-
-        return isShortcode ? (
-          renderShortcode(plaintext)
-        ) : (
-          <p
-            className={classNames('mb-3 font-sans tracking-wide text-justify')}
-          >
-            {children}
-          </p>
-        );
+        if (isShortcode) {
+          return renderShortcode(plaintext);
+        } else {
+          let hasImage = false;
+          Children.map(children, (child: any) => {
+            if (child.type === 'figure') {
+              hasImage = true;
+              return;
+            }
+          });
+          if (hasImage) {
+            return (
+              <span className={classNames('leading-relaxed pb-6')}>
+                {children}
+              </span>
+            );
+          }
+          return (
+            <p
+              className={classNames(
+                'mb-3 font-sans tracking-wide text-justify',
+              )}
+            >
+              {children}
+            </p>
+          );
+        }
       },
       [BLOCKS.HEADING_1]: (node, children) => (
         <h1
diff --git a/package.json b/package.json
index d6247e8..b7653da 100644
--- a/package.json
+++ b/package.json
@@ -14,9 +14,9 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.2.2",
-    "@contentful/rich-text-html-renderer": "^15.0.0",
-    "@contentful/rich-text-plain-text-renderer": "^15.0.0",
-    "@contentful/rich-text-react-renderer": "^15.0.0",
+    "@contentful/rich-text-html-renderer": "^15.3.5",
+    "@contentful/rich-text-plain-text-renderer": "^15.3.5",
+    "@contentful/rich-text-react-renderer": "^15.3.5",
     "@tailwindcss/aspect-ratio": "^0.2.0",
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.161",
@@ -64,7 +64,7 @@
     "@babel/core": "^7.12.17",
     "@babel/preset-env": "^7.12.17",
     "@babel/preset-react": "^7.12.13",
-    "@contentful/rich-text-types": "^15.0.0",
+    "@contentful/rich-text-types": "^15.3.5",
     "@tailwindcss/forms": "^0.3.3",
     "@types/base-64": "^1.0.0",
     "@types/lodash.get": "^4.4.6",
diff --git a/services/render.tsx b/services/render.tsx
index 695aa0a..596408b 100644
--- a/services/render.tsx
+++ b/services/render.tsx
@@ -7,7 +7,7 @@ import sanitize from '../utils/sanitize';
 
 import EmbedContent from '../components/EmbedContent';
 import { ScreenContext } from '../contexts/screen';
-import { ReactElement } from 'react';
+import { ReactElement, CSSProperties } from 'react';
 
 function Markup(node: any): ReactElement {
   const frontTags: string[] = [];
@@ -72,7 +72,7 @@ function EmbeddedMedia(node: any, isInline = false): ReactElement {
     const imageWidth = node.width ?? media.file.details.image.width;
     const imageHeight = node.height ?? media.file.details.image.height;
     const figureClasses = [
-      isInline && node.position && 'text-center mx-auto mb-5',
+      isInline && node.position && 'text-center mx-auto mt-4 mb-5',
       isInline && !node.position && 'inline-block align-middle mx-1',
       isInline && node.position === 'left' && 'tablet:float-left tablet:mr-4',
       isInline && node.position === 'right' && 'tablet:float-right tablet:ml-4',
@@ -84,14 +84,15 @@ function EmbeddedMedia(node: any, isInline = false): ReactElement {
         !node.position &&
         'text-center tablet:inline-block tablet:align-middle tablet:mx-1',
     ];
+    const figureStyles: CSSProperties = {};
+    if (!isMobile && node.position) {
+      figureStyles.width = imageWidth;
+    }
+    if (isDesktop) {
+      figureStyles.maxWidth = '800px';
+    }
     return (
-      <figure
-        className={classNames(figureClasses)}
-        style={{
-          width: !isMobile && node.position ? imageWidth : '',
-          maxWidth: isDesktop ? '800px' : '',
-        }}
-      >
+      <figure className={classNames(figureClasses)} style={figureStyles}>
         <Image
           src={`${url}${isMobile ? '?w=300' : isTablet ? '?w=600' : ''}`}
           alt={node.title}
diff --git a/yarn.lock b/yarn.lock
index 19c33fc..e4f44e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1414,32 +1414,32 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@contentful/rich-text-html-renderer@^15.0.0":
-  version "15.2.0"
-  resolved "https://registry.yarnpkg.com/@contentful/rich-text-html-renderer/-/rich-text-html-renderer-15.2.0.tgz#112bb9f748b5bc4df9d2e2065cb9f6d6e9ca085a"
-  integrity sha512-htcPzKiKsfINv6wkHtx38Vw0QLeGwzRTLe8dNHU2lvGZ+tgmqsgmt6C0XcpBbdon98Afl8xdToOpZdfQImI8NA==
+"@contentful/rich-text-html-renderer@^15.3.5":
+  version "15.3.5"
+  resolved "https://registry.yarnpkg.com/@contentful/rich-text-html-renderer/-/rich-text-html-renderer-15.3.5.tgz#b8e9d5226f9e75f2ac7cf2c5761d2b4ea195b7bd"
+  integrity sha512-xB9mL8Vb1Ebh0To5jxDb1mYuf1fy4j/pfcl8ZxQppB9nIc7jlHfYUePMl3P3t1kPtED7GjHmsV7kLAxEoWqtgg==
   dependencies:
-    "@contentful/rich-text-types" "^15.1.0"
+    "@contentful/rich-text-types" "^15.3.5"
     escape-html "^1.0.3"
 
-"@contentful/rich-text-plain-text-renderer@^15.0.0":
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/@contentful/rich-text-plain-text-renderer/-/rich-text-plain-text-renderer-15.1.0.tgz#d6deb9f78de24b606d96dffd00abe8e2f957801e"
-  integrity sha512-aPyDMQpb5rXfTJFRDur10qNZm1roKtXcXi6nIUP582NSLEzkp5GRydJsbp0Zcu+8qLcNMfvc7nwn4725P+Ma8w==
+"@contentful/rich-text-plain-text-renderer@^15.3.5":
+  version "15.3.5"
+  resolved "https://registry.yarnpkg.com/@contentful/rich-text-plain-text-renderer/-/rich-text-plain-text-renderer-15.3.5.tgz#d92761ca118c5f0b16b2c55c9a190a8c02e75ffd"
+  integrity sha512-AFNP1gAopmFiFK8E4qzMcgemYzSUHfmgVZeZAzypPDKQhhS3x/L4u9kihZcK55YkLpSJgUisc8XcrJlUTYMl4g==
   dependencies:
-    "@contentful/rich-text-types" "^15.1.0"
+    "@contentful/rich-text-types" "^15.3.5"
 
-"@contentful/rich-text-react-renderer@^15.0.0":
-  version "15.2.0"
-  resolved "https://registry.yarnpkg.com/@contentful/rich-text-react-renderer/-/rich-text-react-renderer-15.2.0.tgz#b5ff25b4746f063f15d83eccaff555597d46683e"
-  integrity sha512-mMvs1tvd8Uab1Rqu1oNNqrVwaiQ3+EiLbjZQkBuQ0vTpVCmFI5w60X/mUg5aLMQzJMyEW/kzzcGEjo5oG7im5Q==
+"@contentful/rich-text-react-renderer@^15.3.5":
+  version "15.3.5"
+  resolved "https://registry.yarnpkg.com/@contentful/rich-text-react-renderer/-/rich-text-react-renderer-15.3.5.tgz#94a94ea937c7a2f331942307f9998c460a5dd221"
+  integrity sha512-BDZQ0Z1koj5C9VzOt9V5vaEIKRfbakHBqU2DpjmWCx0h+wRdmmVQdTX6VHousH7TOHjWLUi8w7xHH3Kjnzh0EQ==
   dependencies:
-    "@contentful/rich-text-types" "^15.1.0"
+    "@contentful/rich-text-types" "^15.3.5"
 
-"@contentful/rich-text-types@^15.0.0", "@contentful/rich-text-types@^15.1.0":
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/@contentful/rich-text-types/-/rich-text-types-15.1.0.tgz#5637452257e6c7c6fc406ec1ec6ab7fcc1158105"
-  integrity sha512-3PgQi/B5yKC3xXDar1Ry4i4l9jgt56PFZ40cOkE+oCNLmNlFtZolo6cTrf4VunuufSsCfjTs4iWovy7fbM1I8Q==
+"@contentful/rich-text-types@^15.3.5":
+  version "15.3.5"
+  resolved "https://registry.yarnpkg.com/@contentful/rich-text-types/-/rich-text-types-15.3.5.tgz#414e7b4e671d9c3a4f75e5c762e4e109ccd4ba20"
+  integrity sha512-NOAdIfWUadOxhnv4IR+vBtgPtAtV0hv1uoZJogm2mniXZHRIpmKNbEBncjfr/SSHhOG98tQgHCUw6b/nvDTVaQ==
 
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"