New rich text resolution

.github/workflows/node.js.yml

@@ -19,8 +19,7 @@ jobs:
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v2
       with:
-        node-version: 14.x
-        cache: 'npm'
+        node-version-file: '.nvmrc'
     - run: npm ci
     - run: npm run build --if-present
       env:

.nvmrc

@@ -0,0 +1 @@
+lts/*

README.md

@@ -2,6 +2,7 @@
 
 [![Node.js CI](https://github.com/kontent-ai/sample-app-graphql-react/actions/workflows/node.js.yml/badge.svg)](https://github.com/kontent-ai/sample-app-graphql-react/actions/workflows/node.js.yml)
 [![Live Demo](https://img.shields.io/badge/Live-DEMO-brightgreen.svg?logo=github&logoColor=white)](https://kontent-ai.github.io/sample-app-graphql-react/)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/500af2e7-5312-47d8-af3c-16534378aa21/deploy-status)](https://app.netlify.com/sites/sample-app-graphql-react/deploys)
 
 [![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kontent-ai)
 [![Konten.ai Discord](https://img.shields.io/discord/821885171984891914?color=%237289DA&label=Kontent.ai%20Discord&logo=discord)](https://discord.gg/SKCxwPtevJ)

package.json

@@ -1,20 +1,14 @@
 {
   "name": "@kentico/kontent-sample-app-graphql-react",
   "version": "0.1.0",
-  "homepage": "https://kentico.github.io/kontent-sample-app-graphql-react/",
+  "homepage": ".",
   "license": "MIT",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -28,27 +22,28 @@
     ]
   },
   "dependencies": {
-    "@apollo/client": "^3.4.17",
-    "@kentico/kontent-delivery": "^11.0.0",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^12.1.2",
+    "@apollo/client": "^3.7.12",
+    "@kontent-ai/delivery-sdk": "^14.0.1",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@kontent-ai/rich-text-resolver": "^0.0.2",
+    "@portabletext/react": "^2.0.2",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
-    "clsx": "^1.1.1",
-    "graphql": "^16.0.1",
-    "html-react-parser": "^1.4.0",
+    "clsx": "^1.2.1",
+    "graphql": "^16.6.0",
     "lodash.camelcase": "^4.3.0",
     "lodash.get": "^4.4.2",
     "lodash.upperfirst": "^4.3.1",
     "material-ui-image": "^3.3.2",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-ga": "^3.3.0",
-    "react-helmet-async": "^1.0.9",
+    "react-ga": "^3.3.1",
+    "react-helmet-async": "^1.3.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^1.0.1"
+    "react-scripts": "5.0.1",
+    "web-vitals": "^3.3.1"
   }
-}
+}

src/components/RichText.js

@@ -2,7 +2,8 @@ import { makeStyles, Typography, useTheme } from "@material-ui/core";
 import get from "lodash.get";
 import { Image, Link } from ".";
 import { getUrlFromMappingByCodename } from "../utils";
-import RichTextComponent from "./RichTextComponent";
+import { PortableText, } from '@portabletext/react';
+import { browserParse, transformToPortableText } from '@kontent-ai/rich-text-resolver';
 
 const useStyles = makeStyles((theme) => ({
   richText: {
@@ -45,14 +46,16 @@ function RichText(props) {
   const classes = useStyles();
   const theme = useTheme();
 
-  return (
-    <RichTextComponent
-      className={classes.richText}
-      richTextElement={richTextElement}
-      mappings={mappings}
-      // TODO adjust naming and detection linked item vs. component - internal link https://kontent-ai.atlassian.net/browse/DEL-3081
-      resolveLinkedItem={(linkedItem, domNode, domToReact) => {
-        switch (linkedItem?._system_.type._system_.codename) {
+  const portableTextComponents = {
+    types: {
+      // image: () => {
+
+      // },
+      component: (block) => {
+        const linkedItem = richTextElement.components.items.find(item => item._system_.codename === block.value.component._ref);
+        const contentItemType = linkedItem ? linkedItem._system_.type._system_.codename : '';
+
+        switch (contentItemType) {
           case "quote":
             return (
               <blockquote className={classes.quote}>
@@ -69,39 +72,69 @@ function RichText(props) {
               </Typography>
             );
           default:
-            return domToReact([domNode]);
+            return <div>Content item not supported</div>;
         }
-      }}
-      resolveImage={(image, _domNode, _domToReact) => {
-        return (
-          <div className={classes.inlineImage}>
-            <Image
-              sizes={`${theme.breakpoints.values.sm}px`}
-              asset={image}
-              width={theme.breakpoints.values.sm}
-              alt={image.description || image.name} />
-          </div>
+      },
+      table: ({ value }) => {
+        const table = (
+          <table>
+            {
+              value.rows.map(row => (
+                <tr>
+                  {row.cells.map(cell => {
+                    return (
+                      <td>
+                        <PortableText
+                          value={cell.content}
+                          components={portableTextComponents}
+                        />
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))
+            }
+          </table>
         );
-      }}
-      resolveLink={(link, mappings, domNode, domToReact) => {
+        return table;
+      }
+    },
+    marks: {
+      link: ({ value, children }) => {
+        const target = (value?.href || '').startsWith('http') ? '_blank' : undefined
+        return (
+          <a href={value?.href} target={target} rel={value?.rel} title={value?.title} data-new-window={value['data-new-window']}>
+            {children}
+          </a>
+        )
+      },
+      internalLink: ({ value, children }) => {
+        const link = richTextElement.itemHyperlinks.items.find(link => link?._system_.id == value.reference._ref);
         const url = getUrlFromMappingByCodename(mappings, link._system_.codename);
         if (url) {
           return (
             <Link href={url}>
-              {domNode.children[0].data}
+              {children}
             </Link>
           );
         }
         else {
           return (
-            <del>{domToReact([domNode])}</del>
+            <del>{children}</del>
           );
         }
-      }}
-      resolveDomNode={(domNode, _domToReact) => {
-        return domNode;
-      }}
-    />
+      }
+    }
+  }
+
+  const parsedTree = browserParse(richTextElement.html);
+  const portableText = transformToPortableText(parsedTree);
+
+  return (
+    <PortableText
+      className={classes.richText}
+      value={portableText}
+      components={portableTextComponents} />
   );
 }
 

src/index.js

@@ -4,7 +4,7 @@ import ReactGA from 'react-ga';
 import App from './App';
 import { HelmetProvider } from 'react-helmet-async';
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-import { name, version } from "../package.json";
+import packageInfo from "../package.json";
 
 const PREVIEW_API_KEY = process.env.REACT_APP_KONTENT_PREVIEW_API_KEY;
 const GQL_ENDPOINT = process.env.REACT_APP_KONTENT_GRAPHQL_ENDPOINT ||
@@ -29,7 +29,7 @@ const client = new ApolloClient({
     }),
     uri: `${GQL_ENDPOINT}/${PROJECT_ID}`,
     headers: Object.assign({
-        'X-KC-SOURCE': `${name};${version}`
+        'X-KC-SOURCE': `${packageInfo.name};${packageInfo.version}`
     }, authorizationHeader)
 });
 

src/utils/kontentImageLoader.js

@@ -1,4 +1,4 @@
-import { transformImageUrl } from '@kentico/kontent-delivery';
+import { transformImageUrl } from '@kontent-ai/delivery-sdk';
 
 
 const kontentImageLoader = ({ src, width, quality }) => {