feat:replace RTE with JSON RTE [ECO-184]

components/about-section-bucket.js

@@ -12,7 +12,7 @@ export default function AboutSectionBucket(props) {
 
         <div className="mission-section-content">
           {bucket.title_h3 && <h3>{bucket.title_h3}</h3>}
-          {bucket.description && parse(bucket.description)}
+          {typeof bucket.description === "string" && parse(bucket.description)}
         </div>
       </div>
     );

components/archive-relative.js

@@ -11,7 +11,7 @@ export default function ArchiveRelative(props) {
           <a>
             <div>
               <h4>{blog.title}</h4>
-              {parse(blog.body.slice(0, 80))}
+              {typeof blog.body === "string" && parse(blog.body.slice(0, 80))}
             </div>
           </a>
         </Link>

components/blog-section.js

@@ -29,7 +29,7 @@ class BlogSection extends React.Component {
               )}
               <div className="featured-content">
                 {blog.title && <h3>{blog.title}</h3>}
-                {blog.body && parse(blog.body.slice(0, 300))}
+                {typeof blog.body === "string" && parse(blog.body.slice(0, 300))}
                 {blog.url && (
                   <Link href={blog.url} passHref>
                     <a className="blogpost-readmore">{"Read More -->"}</a>

components/footer.js

@@ -43,7 +43,7 @@ export default function Footer(props) {
         </div>
       </div>
       <div className="copyright">
-        {footer.copyright && parse(footer.copyright)}
+        {typeof footer.copyright === "string" && parse(footer.copyright)}
       </div>
     </footer>
   );

components/header.js

@@ -9,9 +9,10 @@ export default function Header(props) {
   return (
     <header className="header">
       <div className="note-div">
-        {header.notification_bar.show_announcement ? (
-          parse(header.notification_bar.announcement_text)
-        ) : (
+        {header.notification_bar.show_announcement ? typeof header.notification_bar.announcement_text === "string"
+          && (
+            parse(header.notification_bar.announcement_text)
+          ) : (
           <div style={{ visibility: "hidden" }}>Devtools section</div>
         )}
         <span

components/section-bucket.js

@@ -17,7 +17,7 @@ class SectionBucket extends React.Component {
               {bucket.icon && <img src={bucket.icon.url} alt="bucket icon" />}
 
               {bucket.title_h3 ? <h3>{bucket.title_h3}</h3> : ""}
-              {bucket.description && parse(bucket.description)}
+              {typeof bucket.description === "string" && parse(bucket.description)}
               {bucket.call_to_action.title ? (
                 <Link
                   href={

components/section-with-html-code.js

@@ -7,10 +7,10 @@ export default function SectionWithHtmlCode(props) {
       <div className="contact-page-section max-width">
         <div className="contact-page-content">
           {embedCode.title && <h1>{embedCode.title}</h1>}
-          {embedCode.description && parse(embedCode.description)}
+          {typeof embedCode.description === "string" && parse(embedCode.description)}
         </div>
         <div className="contact-page-form">
-          {embedCode.html_code
+          {typeof embedCode.html_code === "string"
             && parse(embedCode.html_code)}
         </div>
       </div>
@@ -19,15 +19,15 @@ export default function SectionWithHtmlCode(props) {
   return (
     <div className="contact-maps-section max-width">
       <div className="maps-details">
-        {parse(embedCode.html_code)}
+        {typeof embedCode.html_code === "string" && parse(embedCode.html_code)}
       </div>
       <div className="contact-maps-content">
         {embedCode.title ? (
           <h2>{embedCode.title}</h2>
         ) : (
           ""
         )}
-        {embedCode.description && parse(embedCode.description)}
+        {typeof embedCode.description === "string" && parse(embedCode.description)}
       </div>
     </div>
   );

package.json

@@ -1,7 +1,7 @@
 {
   "name": "contentstack-nextjs-starter-app",
   "description": "A starter app for Contentstack and Nextjs",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "private": true,
   "author": "Contentstack",
   "scripts": {

pages/about-us.jsx

@@ -22,12 +22,20 @@ export default function About(props) {
 
 export async function getServerSideProps(context) {
   try {
-    const result = await Stack.getEntryByUrl("page", context.resolvedUrl);
-    const header = await Stack.getEntry(
-      "header",
-      "navigation_menu.page_reference",
-    );
-    const footer = await Stack.getEntry("footer");
+    const result = await Stack.getEntryByUrl({
+      contentTypeUid: "page",
+      entryUrl: context.resolvedUrl,
+      jsonRtePath: ["page_components.section_with_buckets.buckets.description"],
+    });
+    const header = await Stack.getEntry({
+      contentTypeUid: "header",
+      referenceFieldPath: ["navigation_menu.page_reference"],
+      jsonRtePath: ["notification_bar.announcement_text"],
+    });
+    const footer = await Stack.getEntry({
+      contentTypeUid: "footer",
+      jsonRtePath: ["copyright"],
+    });
     return {
       props: {
         header: header[0][0],

pages/blog/[...post].jsx

@@ -8,9 +8,7 @@ import RenderComponents from "../../components/render-components";
 import ArchiveRelative from "../../components/archive-relative";
 
 export default function BlogPost(props) {
-  const {
-    header, banner, footer, result,
-  } = props;
+  const { header, banner, footer, result } = props;
   return (
     <Layout header={header} footer={footer} page={banner} blogpost={result}>
       {banner.page_components && (
@@ -26,12 +24,10 @@ export default function BlogPost(props) {
         <div className="blog-detail">
           <h2>{result.title ? result.title : ""}</h2>
           <p>
-            {moment(result.date).format("ddd, MMM D YYYY")}
-            ,
-            {" "}
+            {moment(result.date).format("ddd, MMM D YYYY")},{" "}
             <strong>{result.author[0].title}</strong>
           </p>
-          {parse(result.body)}
+          {typeof result.body === "string" && parse(result.body)}
         </div>
         <div className="blog-column-right">
           <div className="related-post">
@@ -49,17 +45,25 @@ export default function BlogPost(props) {
 }
 export async function getServerSideProps({ params }) {
   try {
-    const banner = await Stack.getEntryByUrl("page", "/blog");
-    const header = await Stack.getEntry(
-      "header",
-      "navigation_menu.page_reference",
-    );
-    const footer = await Stack.getEntry("footer");
-    const blog = await Stack.getEntryByUrl(
-      "blog_post",
-      `/blog/${params.post}`,
-      ["author", "related_post"],
-    );
+    const banner = await Stack.getEntryByUrl({
+      contentTypeUid: "page",
+      entryUrl: "/blog",
+    });
+    const blog = await Stack.getEntryByUrl({
+      contentTypeUid: "blog_post",
+      entryUrl: `/blog/${params.post}`,
+      referenceFieldPath: ["author", "related_post"],
+      jsonRtePath: ["body", "related_post.body"],
+    });
+    const header = await Stack.getEntry({
+      contentTypeUid: "header",
+      referenceFieldPath: ["navigation_menu.page_reference"],
+      jsonRtePath: ["notification_bar.announcement_text"],
+    });
+    const footer = await Stack.getEntry({
+      contentTypeUid: "footer",
+      jsonRtePath: ["copyright"],
+    });
     return {
       props: {
         header: header[0][0],

pages/blog/index.jsx

@@ -58,7 +58,8 @@ export default function Blog(props) {
                   {" "}
                   <strong>{bloglist.author[0].title}</strong>
                 </p>
-                {bloglist.body && parse(bloglist.body.slice(0, 300))}
+                {typeof bloglist.body === "string"
+                  && parse(bloglist.body.slice(0, 300))}
                 {bloglist.url ? (
                   <Link href={bloglist.url}>
                     <a>
@@ -88,16 +89,24 @@ export default function Blog(props) {
 
 export async function getServerSideProps(context) {
   try {
-    const blog = await Stack.getEntryByUrl("page", context.resolvedUrl);
-    const result = await Stack.getEntry("blog_post", [
-      "author",
-      "related_post",
-    ]);
-    const header = await Stack.getEntry(
-      "header",
-      "navigation_menu.page_reference",
-    );
-    const footer = await Stack.getEntry("footer");
+    const blog = await Stack.getEntryByUrl({
+      contentTypeUid: "page",
+      entryUrl: context.resolvedUrl,
+    });
+    const result = await Stack.getEntry({
+      contentTypeUid: "blog_post",
+      referenceFieldPath: ["author", "related_post"],
+      jsonRtePath: ["body"],
+    });
+    const header = await Stack.getEntry({
+      contentTypeUid: "header",
+      referenceFieldPath: ["navigation_menu.page_reference"],
+      jsonRtePath: ["notification_bar.announcement_text"],
+    });
+    const footer = await Stack.getEntry({
+      contentTypeUid: "footer",
+      jsonRtePath: ["copyright"],
+    });
     let archived = [],
       blogList = [];
     result[0].forEach((blogs) => {

pages/contact-us.jsx

@@ -21,14 +21,21 @@ export default function Contact(props) {
 }
 export async function getServerSideProps(context) {
   try {
-    const result = await Stack.getEntryByUrl("page", context.resolvedUrl, [
-      "page_components.from_blog.featured_blogs",
-    ]);
-    const header = await Stack.getEntry(
-      "header",
-      "navigation_menu.page_reference",
-    );
-    const footer = await Stack.getEntry("footer");
+    const result = await Stack.getEntryByUrl({
+      contentTypeUid: "page",
+      entryUrl: context.resolvedUrl,
+      referenceFieldPath: ["page_components.from_blog.featured_blogs"],
+      jsonRtePath: ["page_components.section_with_html_code.description"],
+    });
+    const header = await Stack.getEntry({
+      contentTypeUid: "header",
+      referenceFieldPath: ["navigation_menu.page_reference"],
+      jsonRtePath: ["notification_bar.announcement_text"],
+    });
+    const footer = await Stack.getEntry({
+      contentTypeUid: "footer",
+      jsonRtePath: ["copyright"],
+    });
     return {
       props: {
         header: header[0][0],

pages/index.jsx

@@ -21,14 +21,26 @@ export default function Home(props) {
 
 export async function getServerSideProps(context) {
   try {
-    const result = await Stack.getEntryByUrl("page", context.resolvedUrl, [
-      "page_components.from_blog.featured_blogs",
-    ]);
-    const header = await Stack.getEntry(
-      "header",
-      "navigation_menu.page_reference",
-    );
-    const footer = await Stack.getEntry("footer");
+    const result = await Stack.getEntryByUrl({
+      contentTypeUid: "page",
+      entryUrl: context.resolvedUrl,
+      referenceFieldPath: [
+        "page_components.from_blog.featured_blogs",
+      ],
+      jsonRtePath: [
+        "page_components.from_blog.featured_blogs.body",
+        "page_components.section_with_buckets.buckets.description",
+      ],
+    });
+    const header = await Stack.getEntry({
+      contentTypeUid: "header",
+      referenceFieldPath: ["navigation_menu.page_reference"],
+      jsonRtePath: ["notification_bar.announcement_text"],
+    });
+    const footer = await Stack.getEntry({
+      contentTypeUid: "footer",
+      jsonRtePath: ["copyright"],
+    });
     return {
       props: {
         header: header[0][0],

sdk-plugin/index.js

@@ -1,4 +1,5 @@
-const contentstack = require("contentstack");
+import * as contentstack from "contentstack";
+import * as Utils from "@contentstack/utils";
 
 const Stack = contentstack.Stack({
   api_key: process.env.CONTENTSTACK_API_KEY,
@@ -10,15 +11,23 @@ const Stack = contentstack.Stack({
 if (process.env.CONTENTSTACK_CUSTOM_HOST) {
   Stack.setHost(process.env.CONTENTSTACK_CUSTOM_HOST);
 }
+
+const renderOption = {
+  ["span"]: (node, next) => {
+    return next(node.children);
+  },
+};
+
 export default {
   /**
    *
    * fetches all the entries from specific content-type
    * @param {* content-type uid} contentTypeUid
    * @param {* reference field name} referenceFieldPath
+   * @param {* Json RTE path} jsonRtePath
    *
    */
-  getEntry(contentTypeUid, referenceFieldPath) {
+  getEntry({ contentTypeUid, referenceFieldPath, jsonRtePath }) {
     return new Promise((resolve, reject) => {
       const query = Stack.ContentType(contentTypeUid).Query();
       if (referenceFieldPath) query.includeReference(referenceFieldPath);
@@ -28,11 +37,17 @@ export default {
         .find()
         .then(
           (result) => {
+            jsonRtePath &&
+              Utils.jsonToHTML({
+                entry: result,
+                paths: jsonRtePath,
+                renderOption,
+              });
             resolve(result);
           },
           (error) => {
             reject(error);
-          },
+          }
         );
     });
   },
@@ -43,22 +58,29 @@ export default {
    * @param {* content-type uid} contentTypeUid
    * @param {* url for entry to be fetched} entryUrl
    * @param {* reference field name} referenceFieldPath
+   * @param {* Json RTE path} jsonRtePath
    * @returns
    */
-  getEntryByUrl(contentTypeUid, entryUrl, referenceFieldPath) {
+  getEntryByUrl({ contentTypeUid, entryUrl, referenceFieldPath, jsonRtePath }) {
     return new Promise((resolve, reject) => {
       const blogQuery = Stack.ContentType(contentTypeUid).Query();
       if (referenceFieldPath) blogQuery.includeReference(referenceFieldPath);
       blogQuery.includeOwner().toJSON();
       const data = blogQuery.where("url", `${entryUrl}`).find();
       data.then(
         (result) => {
+          jsonRtePath &&
+            Utils.jsonToHTML({
+              entry: result,
+              paths: jsonRtePath,
+              renderOption,
+            });
           resolve(result[0]);
         },
         (error) => {
           reject(error);
-        },
+        }
       );
     });
   },
-};
+};