From 357698143a817ee36eca5ac27275e46cbc317eb0 Mon Sep 17 00:00:00 2001
From: unknown <hiro.biggerminds@gmail.com>
Date: Fri, 26 Aug 2022 08:08:16 -0400
Subject: [PATCH] added medium-editor to the new blogs page

---
 package-lock.json                          | 45 ++++++++++++++++++++++
 package.json                               |  1 +
 src/components/MediumEditor.jsx            | 15 ++++++++
 src/components/NewBlog.tsx                 | 26 +++++--------
 src/styles/_common.scss                    |  2 +-
 src/styles/app.scss                        |  1 +
 src/styles/components/_blog_component.scss | 14 +++++++
 src/styles/components/_medium_editor.scss  | 16 ++++++++
 src/styles/components/_new_blog_page.scss  | 13 ++++++-
 9 files changed, 115 insertions(+), 18 deletions(-)
 create mode 100644 src/components/MediumEditor.jsx
 create mode 100644 src/styles/components/_medium_editor.scss

diff --git a/package-lock.json b/package-lock.json
index 7c8785a..562646f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "react-draft-wysiwyg": "^1.15.0",
         "react-error-overlay": "^6.0.11",
         "react-icons": "^4.4.0",
+        "react-medium-editor": "^1.8.1",
         "react-notifications": "^1.7.4",
         "react-redux": "^8.0.2",
         "react-router-dom": "^6.3.0",
@@ -6673,6 +6674,11 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/blacklist": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/blacklist/-/blacklist-1.1.4.tgz",
+      "integrity": "sha512-DWdfwimA1WQxVC69Vs1Fy525NbYwisMSCdYQmW9zyzOByz9OB/tQwrKZ3T3pbTkuFjnkJFlJuyiDjPiXL5kzew=="
+    },
     "node_modules/blakejs": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/blakejs/-/blakejs-1.2.1.tgz",
@@ -15799,6 +15805,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/medium-editor": {
+      "version": "5.23.3",
+      "resolved": "https://registry.npmjs.org/medium-editor/-/medium-editor-5.23.3.tgz",
+      "integrity": "sha512-he9/TdjX8f8MGdXGfCs8AllrYnqXJJvjNkDKmPg3aPW/uoIrlRqtkFthrwvmd+u4QyzEiadhCCM0EwTiRdUCJw=="
+    },
     "node_modules/memdown": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/memdown/-/memdown-1.4.1.tgz",
@@ -18997,6 +19008,20 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/react-medium-editor": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/react-medium-editor/-/react-medium-editor-1.8.1.tgz",
+      "integrity": "sha512-p1t9Y0J8pf8U8JUN0ZyKVoyae5f3a1cetDnAdrSbKAD2Zn6+qxJQrquNvpiANeDul0j8PYW7+u/xAfme4tNsEg==",
+      "dependencies": {
+        "blacklist": "^1.1.2",
+        "medium-editor": "^5.10.0",
+        "object-assign": "^4.0.1"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0",
+        "react-dom": "^0.14.0 || ^15.0.0"
+      }
+    },
     "node_modules/react-native-fetch-api": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-native-fetch-api/-/react-native-fetch-api-2.0.0.tgz",
@@ -28348,6 +28373,11 @@
         }
       }
     },
+    "blacklist": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/blacklist/-/blacklist-1.1.4.tgz",
+      "integrity": "sha512-DWdfwimA1WQxVC69Vs1Fy525NbYwisMSCdYQmW9zyzOByz9OB/tQwrKZ3T3pbTkuFjnkJFlJuyiDjPiXL5kzew=="
+    },
     "blakejs": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/blakejs/-/blakejs-1.2.1.tgz",
@@ -35353,6 +35383,11 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
     },
+    "medium-editor": {
+      "version": "5.23.3",
+      "resolved": "https://registry.npmjs.org/medium-editor/-/medium-editor-5.23.3.tgz",
+      "integrity": "sha512-he9/TdjX8f8MGdXGfCs8AllrYnqXJJvjNkDKmPg3aPW/uoIrlRqtkFthrwvmd+u4QyzEiadhCCM0EwTiRdUCJw=="
+    },
     "memdown": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/memdown/-/memdown-1.4.1.tgz",
@@ -37550,6 +37585,16 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "react-medium-editor": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/react-medium-editor/-/react-medium-editor-1.8.1.tgz",
+      "integrity": "sha512-p1t9Y0J8pf8U8JUN0ZyKVoyae5f3a1cetDnAdrSbKAD2Zn6+qxJQrquNvpiANeDul0j8PYW7+u/xAfme4tNsEg==",
+      "requires": {
+        "blacklist": "^1.1.2",
+        "medium-editor": "^5.10.0",
+        "object-assign": "^4.0.1"
+      }
+    },
     "react-native-fetch-api": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-native-fetch-api/-/react-native-fetch-api-2.0.0.tgz",
diff --git a/package.json b/package.json
index a9025e6..41bc382 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "react-draft-wysiwyg": "^1.15.0",
     "react-error-overlay": "^6.0.11",
     "react-icons": "^4.4.0",
+    "react-medium-editor": "^1.8.1",
     "react-notifications": "^1.7.4",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
diff --git a/src/components/MediumEditor.jsx b/src/components/MediumEditor.jsx
new file mode 100644
index 0000000..c01ce70
--- /dev/null
+++ b/src/components/MediumEditor.jsx
@@ -0,0 +1,15 @@
+
+// load theme styles with webpack
+import 'medium-editor/dist/css/medium-editor.css';
+import 'medium-editor/dist/css/themes/beagle.css';
+ 
+// ES module
+import Editor from 'react-medium-editor';
+
+const MediumEditor = (props) => {
+  return (
+    <Editor {...props} />
+  );
+};
+
+export default MediumEditor;
diff --git a/src/components/NewBlog.tsx b/src/components/NewBlog.tsx
index 801851d..012881f 100644
--- a/src/components/NewBlog.tsx
+++ b/src/components/NewBlog.tsx
@@ -7,6 +7,7 @@ import { NotificationManager } from "./Notification";
 import { v4 as uuidv4 } from "uuid";
 import { useNavigate } from "react-router-dom";
 import { setLoading } from "slices/viewState";
+import MediumEditor from "./MediumEditor";
 
 interface INewBlog {}
 
@@ -42,35 +43,28 @@ const NewBlog = (props: INewBlog) => {
         // handle result here
         NotificationManager.success(`"${blog.Title}" Created`, "Blog Created");
         navigate("/main");
-        console.log({blog});
+        console.log({ blog });
         dispatch(setLoading(false));
       })
       .catch((rejectedValueOrSerializedError) => {
         // handle error here
-        console.log({rejectedValueOrSerializedError});
+        console.log({ rejectedValueOrSerializedError });
         dispatch(setLoading(false));
       });
   };
 
   return (
     <div className="new-blog-page">
-      <TextField
-        id="title"
-        label="Title"
-        variant="standard"
-        size="small"
+      <input
+        className="title"
+        type="text"
+        placeholder="Title"
         onChange={(e: any) => setTitle(e.target.value)}
         value={title}
       />
-      <TextField
-        id="body"
-        label="Text"
-        variant="standard"
-        multiline
-        maxRows={30}
-        size="small"
-        onChange={(e: any) => setBody(e.target.value)}
-        value={body}
+      <MediumEditor
+        text={body || "<p></p>"}
+        onChange={(text: any, medium: any) => { setBody(text); console.log({text, medium})}}
       />
       <div className="submit">
         <Button variant="contained" onClick={onCreate}>
diff --git a/src/styles/_common.scss b/src/styles/_common.scss
index 43144ae..5bbd9b1 100644
--- a/src/styles/_common.scss
+++ b/src/styles/_common.scss
@@ -49,4 +49,4 @@ button[class*="MuiButtonBase-root-MuiButton-root"] {
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
-}
\ No newline at end of file
+}
diff --git a/src/styles/app.scss b/src/styles/app.scss
index ecbc418..0406dda 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -10,6 +10,7 @@
 @import './components/profile';
 @import './components/home';
 @import './components/side_bar';
+@import './components/medium_editor';
 
 @import './pages/home_layout';
 @import './pages/welcome_page';
diff --git a/src/styles/components/_blog_component.scss b/src/styles/components/_blog_component.scss
index ec1ebc9..8e3dc4f 100644
--- a/src/styles/components/_blog_component.scss
+++ b/src/styles/components/_blog_component.scss
@@ -26,10 +26,24 @@
     line-height: 28px;
     font-size: 22px;
     cursor: pointer;
+    color: #222;
   }
 
   .blog-body {
     font-size: 15px;
     cursor: pointer;
+    outline: 0;
+    color: #333;
+  
+    blockquote {
+      border-left: 2px solid #f06;
+      margin: 0;
+      padding: 5px 20px;
+      background-color: #f5f5f5;
+    }
+
+    p {
+      margin: 6px 0;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/styles/components/_medium_editor.scss b/src/styles/components/_medium_editor.scss
new file mode 100644
index 0000000..bd48395
--- /dev/null
+++ b/src/styles/components/_medium_editor.scss
@@ -0,0 +1,16 @@
+.medium-editor-element {
+  padding: 5px 15px;
+  outline: 0;
+  color: #666;
+
+  &:after {
+    color: #999 !important;
+  }
+
+  blockquote {
+    border-left: 2px solid #f06;
+    margin: 0;
+    padding: 5px 20px;
+    background-color: #f5f5f5;
+  }
+}
diff --git a/src/styles/components/_new_blog_page.scss b/src/styles/components/_new_blog_page.scss
index b4e7bef..0311952 100644
--- a/src/styles/components/_new_blog_page.scss
+++ b/src/styles/components/_new_blog_page.scss
@@ -1,7 +1,18 @@
 .new-blog-page {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+
+  .title {
+    border: none;
+    outline: none;
+    font-size: 30px;
+    padding: 15px;
+    color: #444;
+
+    &:focus {
+      border-left: 1px solid #ccc;
+    }
+  }
 
   .submit {
     display: flex;
-- 
2.51.2