From 29c3c80cf41ebb5da5c9a6155825bae233c21e6d Mon Sep 17 00:00:00 2001
From: Arzl James <70579069+arzljames@users.noreply.github.com>
Date: Sat, 17 Feb 2024 13:17:52 +0800
Subject: [PATCH] fix: distorted images in wysiwyg articles (#2362)

# Description

Fix the distorted images when has a style property of `float`. Also,
made sure to add the inline styling only in the client side not in the
server to avoid hydration issues.

Fixes #2358

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce.

- [x] Manual Test

# Screenshots / Screen recording

Please add screenshots or recording if applicable
**ISSUES:**

![image](https://github.com/zesty-io/website/assets/70579069/fa69e139-8af8-47d6-81ac-dc6320279480)

![image](https://github.com/zesty-io/website/assets/70579069/511598da-07e3-4355-85ea-753cf586d1b0)

**FIX:**

![image](https://github.com/zesty-io/website/assets/70579069/1233ff5b-4db3-4006-a295-59f540513f01)

![image](https://github.com/zesty-io/website/assets/70579069/3ec30c78-5fa5-40fa-9604-a3a88ce528a4)

---------

Co-authored-by: root <root@PHLTZTIO002.gbs.local>
Co-authored-by: darwin.apolinario <darwin.apolinario@gmail.com>
---
 package-lock.json          |  4 ++--
 package.json               |  2 +-
 src/views/zesty/Article.js | 29 ++++++++++++++++++++++-------
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8f3a244a9..eea086d32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "zesty-website",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "zesty-website",
-      "version": "1.0.17",
+      "version": "1.0.18",
       "dependencies": {
         "@codemirror/lang-javascript": "^6.2.1",
         "@codemirror/view": "^6.21.2",
diff --git a/package.json b/package.json
index 33ef77973..0460ef3cc 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "zesty-website",
   "author": "Zesty.io Platform Inc.",
   "email": "marketing@zesty.io",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "private": true,
   "scripts": {
     "dev": "NODE_OPTIONS='--inspect' next dev",
diff --git a/src/views/zesty/Article.js b/src/views/zesty/Article.js
index d2610f5bf..d0d26522d 100644
--- a/src/views/zesty/Article.js
+++ b/src/views/zesty/Article.js
@@ -55,6 +55,7 @@ import { getCookie, hasCookie, setCookie } from 'cookies-next';
 
 function Article({ content }) {
   const [newContent, setNewContent] = useState(content.article);
+  const [isClient, setIsClient] = useState(false);
   const [relatedArticles, setRelatedArticles] = useState([]);
   const { palette } = useTheme();
 
@@ -120,7 +121,7 @@ function Article({ content }) {
     setRelatedArticles(
       getRelatedArticles(content?.related_articles, latestArticles),
     );
-    console.log(content);
+    setIsClient(true); // set inline styling in client not in server
   }, [latestArticles]);
 
   const verifyPathnameInCookie = (path) => {
@@ -206,6 +207,25 @@ function Article({ content }) {
     setShowPopup,
   };
 
+  const inlineStyles = isClient
+    ? `
+p img[style*="float:left"],  p img[style*="float: left"] {
+  margin-top: 0;
+  width: auto !important;
+}
+
+p img[style*="float:right"],  p img[style*="float: right"] {
+  margin-top: 0;
+  width: auto !important;
+}
+
+p img {
+  margin-top: 48px;
+  width: 100%;
+}
+}`
+    : ``;
+
   return (
     <Box sx={{ position: 'relative' }}>
       <ThemeProvider theme={() => revampTheme(palette.mode)}>
@@ -239,6 +259,7 @@ function Article({ content }) {
               },
             })}
           >
+            <style>{inlineStyles}</style>
             <MuiMarkdown
               options={{
                 overrides: {
@@ -464,12 +485,6 @@ function Article({ content }) {
                   },
                   img: {
                     component: 'img',
-                    props: {
-                      style: {
-                        marginTop: '48px',
-                        width: '100%',
-                      },
-                    },
                   },
                   iframe: {
                     component: ({ children, ...props }) => (