Post Editor v2 (based on blocks)

package.json

@@ -94,11 +94,12 @@
     "@polkadot/ui-assets": "^0.52.0-beta.3",
     "@subsocial/api": "^0.2.15",
     "@subsocial/types": "^0.1.29",
-    "@subsocial/utils": "^0.1.21",
+    "@subsocial/utils": "^0.1.23",
     "@zeit/next-css": "^1.0.1",
     "antd": "^3.25.0",
     "antd-mobile": "^2.3.1",
     "axios": "^0.18.0",
+    "brace": "^0.11.1",
     "dotenv-webpack": "^1.7.0",
     "formik": "^1.5.0",
     "lodash.isempty": "^4.4.0",
@@ -108,11 +109,13 @@
     "moment-timezone": "^0.5.26",
     "next": "^9.1.1",
     "query-string": "^6.2.0",
+    "react-ace": "^8.1.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-device-detect": "^1.11.14",
     "react-markdown": "^4.0.6",
     "react-router-hash-link": "^1.2.2",
     "react-tooltip": "^3.9.2",
+    "react-twitter-widgets": "^1.7.1",
     "store": "^2.0.12",
     "strip-markdown": "^3.0.3",
     "tsconfig-paths-webpack-plugin": "^3.2.0",

src/components/blogs/EditBlog.tsx

@@ -120,7 +120,7 @@ const InnerForm = (props: FormProps) => {
 
   return (<>
     <HeadMeta title={title}/>
-    <Section className='EditEntityBox' title={title}>
+    <Section className='EditEntityBox bookPage' title={title}>
       <Form className='ui form DfForm EditEntityForm'>
 
         <LabelledText name='name' label='Blog name' placeholder='Name of your blog.' {...props} />

src/components/blogs/ViewBlog.tsx

@@ -33,6 +33,7 @@ import { Blog } from '@subsocial/types/substrate/interfaces';
 import { BlogData, ExtendedPostData } from '@subsocial/types/dto'
 import { getSubsocialApi } from '../utils/SubsocialConnect';
 import ViewTags from '../utils/ViewTags';
+import { BlockValueWithOptions } from '../types';
 
 const log = newLogger('View blog')
 
@@ -238,8 +239,8 @@ export const ViewBlogPage: NextPage<Props> = (props: Props) => {
     return <ListData
       title={postsSectionTitle()}
       dataSource={posts}
-      renderItem={(item, index) =>
-        <ViewPostPage key={index} variant='preview' postData={item.post} postExtData={item.ext}/>}
+      renderItem={(item: any, index) =>
+        <ViewPostPage key={index} variant='preview' postData={item.post} postExtData={item.ext} blockValues={item.blockValues} />}
       noDataDesc='No posts yet'
       noDataExt={isMyBlog ? <Button href={`/blogs/${id}/posts/new`}>Create post</Button> : null}
     />;
@@ -272,7 +273,7 @@ export const ViewBlogPage: NextPage<Props> = (props: Props) => {
   );
 
   return <div className='ViewBlogWrapper'>
-    <Section className='DfContentPage'>
+    <Section className='DfContentPage bookPage'>
       <HeadMeta title={name} desc={mdToText(desc)} image={image} />
       <div className='FullProfile'>
         {renderPreview()}
@@ -298,9 +299,10 @@ export const ViewBlogPage: NextPage<Props> = (props: Props) => {
 ViewBlogPage.getInitialProps = async (props): Promise<any> => {
   const { res, query: { blogId } } = props
   const subsocial = await getSubsocialApi()
-  const { substrate } = subsocial;
+  const { substrate, ipfs } = subsocial;
   const idOrHandle = blogId as string
   const id = await getBlogId(idOrHandle)
+
   if (!id && res) {
     res.statusCode = 404
     return { statusCode: 404 }
@@ -313,7 +315,28 @@ ViewBlogPage.getInitialProps = async (props): Promise<any> => {
   }
 
   const postIds = await substrate.postIdsByBlogId(new BN(blogId as string))
-  const posts = await subsocial.findPostsWithExt(postIds.reverse());
+  const posts: any = await subsocial.findPostsWithExt(postIds.reverse());
+
+  let i = 0;
+  for (const item of posts) {
+    const postBlockValues = []
+    const blocks = item?.post?.content?.blocks
+
+    if (blocks && blocks.length > 0) {
+
+      for (const x of blocks) {
+        if (x.featured) {
+          const res = await ipfs.findPost(x.cid) as unknown as BlockValueWithOptions
+          if (x.featured && res) res.featured = true
+          postBlockValues.push(res)
+        }
+      }
+    }
+    posts[i].blockValues = postBlockValues
+    i++
+  }
+
+  console.log('posts in initialProps in ViewBlog', posts)
   return {
     blogData,
     posts

src/components/posts/EditComment.tsx

@@ -137,7 +137,7 @@ const InnerForm = (props: FormProps) => {
           name='body'
           value={body}
           onChange={(data: string) => setFieldValue('body', data)}
-          className={`DfMdEditor ${errors['body'] && 'error'}`}
+          className={`DfMdEditor ${errors['body'] && 'error'} markdown-body CommentsEditor`}
           style={{ marginTop: '1rem' }}
           option={{
             autofocus: autoFocus,