updated story editor

Author: gokultp

package.json

@@ -17,6 +17,7 @@
     "@editorjs/paragraph": "^2.8.0",
     "@editorjs/table": "^2.0.2",
     "@react-icons/all-files": "^4.1.0",
+    "md5": "^2.3.0",
     "next": "12.0.10",
     "node-fetch": "^3.2.0",
     "react": "17.0.2",

src/components/Layout.tsx

@@ -9,7 +9,7 @@ sidebarContentLeft?: ReactNode
 
 export default function Layout ({sidebarContentLeft, children, sidebarContentRight}: LayoutProps) {
     return (
-        <div className="mx-auto bg-gray-100">
+        <div className="mx-auto bg-gray-100 min-h-screen">
             <Navbar />
         <div className="grid grid-cols-9 gap-10 mt-10 px-20 pt-10">
             {sidebarContentLeft && (

src/components/editor/StoryEditor.tsx

@@ -18,11 +18,22 @@ const DEFAULT_INITIAL_DATA = () => {
     ]
   }
 }
+
+const getAbstract = (content) => {
+  let abstract = ''
+  for(let i =0; i< content.blocks.length; i++){
+    if (content.blocks[i].type == "header" || content.blocks[i].type =="paragraph") {
+      abstract += content.blocks[i].data.text
+    }
+    if (abstract.length >= 200) break;
+  }
+  return abstract;
+}
 
 const EDITTOR_HOLDER_ID = 'editorjs';
 
 export default function Editor () {
-    const [postTitle, setPostTitle] = useState('Enter Title')
+    const [postTitle, setPostTitle] = useState('Your Title Goes Here')
     const ejInstance = useRef();
     const [editorData, setEditorData] = React.useState(DEFAULT_INITIAL_DATA);
 
@@ -65,11 +76,15 @@ export default function Editor () {
         `
     );
     const handleStorySubmit = () => {
-        console.log(postTitle)
-        console.log(editorData)
         commitMutation({
             variables: {
-              input: {title: postTitle, contentJson: JSON.stringify(editorData), abstractContent: '', urlSuffix: '', thumbnail: ''},
+              input: {
+                title: postTitle, 
+                contentJson: JSON.stringify(editorData), 
+                abstractContent: getAbstract(editorData), 
+                urlSuffix: postTitle.toLowerCase().replace(" ", "-").substring(0, 32), 
+                thumbnail: ''
+              },
             },
         })
     }

src/pages/story.tsx

@@ -5,7 +5,7 @@ const Editor = dynamic(() => import('../components/editor/StoryEditor'))
 export default function Story () {
     return (
         <div>
-            <Layout  sidebarContentRight={<div>Promoted</div>}>
+            <Layout  sidebarContentRight={<div>Promoted</div>} sidebarContentLeft={<div/>}>
                 <Editor />
             </Layout>
         </div>

yarn.lock

@@ -634,6 +634,11 @@ chalk@^4.0.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+[email protected]:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
+  integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
+
 chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
@@ -741,6 +746,11 @@ cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+[email protected]:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
+  integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
@@ -1444,6 +1454,11 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-buffer@~1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
 is-callable@^1.1.4, is-callable@^1.2.4:
   version "1.2.4"
   resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz"
@@ -1669,6 +1684,15 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+md5@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"
+  integrity sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==
+  dependencies:
+    charenc "0.0.2"
+    crypt "0.0.2"
+    is-buffer "~1.1.6"
+
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"