fix(react): heading with links not rendered (#41)

.changeset/yellow-shirts-stare.md

@@ -0,0 +1,5 @@
+---
+'@graphcms/rich-text-react-renderer': patch
+---
+
+Fix heading with links not being rendered

.eslintrc.js

@@ -1,10 +1,6 @@
 module.exports = {
-  extends: [
-    'react-app',
-    'prettier/@typescript-eslint',
-    'plugin:prettier/recommended',
-  ],
-  plugins: ['testing-library', 'jest-dom'],
+  extends: ['react-app', 'prettier/@typescript-eslint', 'prettier'],
+  plugins: ['testing-library', 'jest-dom', 'prettier'],
   settings: {
     react: {
       version: '999.999.999',

package.json

@@ -17,7 +17,6 @@
     "husky": "^6.0.0",
     "lerna": "^3.15.0",
     "lint-staged": "^11.0.0",
-    "prettier": "^2.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "size-limit": "^4.10.2",

packages/html-to-slate-ast/src/index.ts

@@ -6,7 +6,7 @@ import {
 } from 'slate';
 import { jsx } from 'slate-hyperscript';
 import { sanitizeUrl } from '@braintree/sanitize-url';
-import type { Element, Mark } from '@graphcms/rich-text-types';
+import { Element, Mark } from '@graphcms/rich-text-types';
 
 const ELEMENT_TAGS: Record<
   HTMLElement['nodeName'],
@@ -16,7 +16,7 @@ const ELEMENT_TAGS: Record<
   OL: () => ({ type: 'numbered-list' }),
   UL: () => ({ type: 'bulleted-list' }),
   P: () => ({ type: 'paragraph' }),
-  A: (el) => {
+  A: el => {
     const href = el.getAttribute('href');
     if (href === null) return {};
     return {
@@ -44,7 +44,7 @@ const ELEMENT_TAGS: Record<
   TR: () => ({ type: 'table_row' }),
   TD: () => ({ type: 'table_cell' }),
   TH: () => ({ type: 'table_cell' }),
-  IMG: (el) => {
+  IMG: el => {
     const href = el.getAttribute('src');
     const title = Boolean(el.getAttribute('alt'))
       ? el.getAttribute('alt')
@@ -108,7 +108,7 @@ function deserialize<
     parent = el.childNodes[0];
   }
   let children = Array.from(parent.childNodes)
-    .map((c) => deserialize(c, global))
+    .map(c => deserialize(c, global))
     .flat();
 
   if (children.length === 0) {
@@ -124,7 +124,7 @@ function deserialize<
   if (
     isElementNode(el) &&
     Array.from(el.attributes).find(
-      (attr) => attr.name == 'role' && attr.value === 'heading'
+      attr => attr.name === 'role' && attr.value === 'heading'
     )
   ) {
     const level = el.attributes.getNamedItem('aria-level')?.value;
@@ -190,7 +190,7 @@ function deserialize<
                 children: [{ text: '' }],
               },
             ]
-          : childNodes.map((child) => ({
+          : childNodes.map(child => ({
               type: 'paragraph',
               children: [{ text: child.textContent ? child.textContent : '' }],
             }));
@@ -204,7 +204,7 @@ function deserialize<
   if (nodeName === 'DIV') {
     const childNodes = Array.from(el.childNodes);
     const isParagraph = childNodes.every(
-      (child) =>
+      child =>
         (isElementNode(child) && isInlineElement(child)) || isTextNode(child)
     );
     if (isParagraph) {
@@ -240,36 +240,36 @@ function deserialize<
     })();
     if (tagNames) {
       const attrs = tagNames.reduce((acc, current) => {
-        return ({...acc, ...TEXT_TAGS[current]() });
+        return { ...acc, ...TEXT_TAGS[current]() };
       }, {});
-      return children.map((child) => {
+      return children.map(child => {
         if (typeof child === 'string') {
           return jsx('text', attrs, child);
         }
-  
+
         if (isChildNode(child, global)) return child;
-  
+
         if (SlateElement.isElement(child) && !SlateText.isText(child)) {
-          child.children = child.children.map((c) => ({ ...c, ...attrs }));
+          child.children = child.children.map(c => ({ ...c, ...attrs }));
           return child;
         }
-  
+
         return child;
       });
     }
   }
 
   if (TEXT_TAGS[nodeName]) {
     const attrs = TEXT_TAGS[nodeName](el as HTMLElement);
-    return children.map((child) => {
+    return children.map(child => {
       if (typeof child === 'string') {
         return jsx('text', attrs, child);
       }
 
       if (isChildNode(child, global)) return child;
 
       if (SlateElement.isElement(child) && !SlateText.isText(child)) {
-        child.children = child.children.map((c) => ({ ...c, ...attrs }));
+        child.children = child.children.map(c => ({ ...c, ...attrs }));
         return child;
       }
 
@@ -441,7 +441,7 @@ export async function htmlToSlateAST(html: string) {
   const domDocument = await parseDomDocument(normalizedHTML);
   const global = await (async () => {
     if (typeof window !== 'undefined') return window;
-    return await import('jsdom').then((jsdom) => new jsdom.JSDOM().window);
+    return await import('jsdom').then(jsdom => new jsdom.JSDOM().window);
   })();
   return deserialize(domDocument.body, global);
 }

packages/html-to-slate-ast/test/index.test.ts

@@ -7,7 +7,7 @@ test('Transforms top level span into paragraph', () => {
   in fact, is the very CSS and HTML rendered as I type this blog. There are calls to HTML element classes that style
   certain properties. For example, the font-family properties in the ".postArticle-content .graf — p" class has a serif
   font value, hence the text rendered in this article is of the serif family. All this to say, if you as a pro</span>`).then(
-    (ast) =>
+    ast =>
       expect(ast).toEqual([
         {
           type: 'paragraph',
@@ -30,7 +30,7 @@ test('Transforms inner span into paragraph', () => {
   in fact, is the very CSS and HTML rendered as I type this blog. There are calls to HTML element classes that style
   certain properties. For example, the font-family properties in</span><span> the ".postArticle-content .graf — p" class has a serif
   font value, hence the text rendered in this article is of the serif family. All this to say, if you as a pro</span></p>`).then(
-    (ast) =>
+    ast =>
       expect(ast).toEqual([
         {
           type: 'paragraph',
@@ -49,7 +49,7 @@ test('Transforms inner span into paragraph', () => {
 
 test('Transforms inner spans wrapped in a div into paragraph', () => {
   const input = fs.readFileSync(__dirname + '/html_input.html').toString();
-  return htmlToSlateAST(input).then((ast) =>
+  return htmlToSlateAST(input).then(ast =>
     expect(ast).toStrictEqual([
       {
         type: 'paragraph',
@@ -91,7 +91,7 @@ test('Transforms Google Docs input', () => {
   const input = fs
     .readFileSync(__dirname + '/google-docs_input.html')
     .toString();
-  return htmlToSlateAST(input).then((ast) =>
+  return htmlToSlateAST(input).then(ast =>
     expect(ast).toEqual([
       {
         type: 'heading-one',
@@ -362,12 +362,14 @@ test('Transforms Google Docs input', () => {
         children: [
           {
             type: 'link',
-            href: 'https://lh6.googleusercontent.com/TkJFBZvkyXTa602F0gkp2phU0O1eHu96RdKFcQ8l_EOS_CBfcI9jYRixN6sNRFnFiZ-ssbLbnLDReb3FrEZ1MnLr70c5gIvPmhJtV7appyVEDSeHLIRdNwdNzbIqs3l2GOgGLGC5=s0',
+            href:
+              'https://lh6.googleusercontent.com/TkJFBZvkyXTa602F0gkp2phU0O1eHu96RdKFcQ8l_EOS_CBfcI9jYRixN6sNRFnFiZ-ssbLbnLDReb3FrEZ1MnLr70c5gIvPmhJtV7appyVEDSeHLIRdNwdNzbIqs3l2GOgGLGC5=s0',
             title: 'Screenshot 2021-06-10 at 15.56.22.png',
             openInNewTab: true,
             children: [
               {
-                text: 'https://lh6.googleusercontent.com/TkJFBZvkyXTa602F0gkp2phU0O1eHu96RdKFcQ8l_EOS_CBfcI9jYRixN6sNRFnFiZ-ssbLbnLDReb3FrEZ1MnLr70c5gIvPmhJtV7appyVEDSeHLIRdNwdNzbIqs3l2GOgGLGC5=s0',
+                text:
+                  'https://lh6.googleusercontent.com/TkJFBZvkyXTa602F0gkp2phU0O1eHu96RdKFcQ8l_EOS_CBfcI9jYRixN6sNRFnFiZ-ssbLbnLDReb3FrEZ1MnLr70c5gIvPmhJtV7appyVEDSeHLIRdNwdNzbIqs3l2GOgGLGC5=s0',
               },
             ],
           },
@@ -388,7 +390,7 @@ test('Transforms Google Docs input', () => {
 test('Converts word documents', () => {
   return htmlToSlateAST(
     fs.readFileSync(__dirname + '/word-document.html').toString()
-  ).then((ast) =>
+  ).then(ast =>
     expect(ast).toStrictEqual([
       {
         type: 'heading-one',
@@ -580,16 +582,18 @@ test('Converts word documents', () => {
 test('Converts an image pasted from Google Docs into a link node', () => {
   return htmlToSlateAST(
     fs.readFileSync(__dirname + '/image.html').toString()
-  ).then((ast) =>
+  ).then(ast =>
     expect(ast).toStrictEqual([
       {
         type: 'link',
-        href: 'https://lh5.googleusercontent.com/EqByyE2l_VVSU6KoXFlkpPjJIBsbMTb4Dkr0cuvy2K5ctn8BoJsDHBXO0rU2wyck72_ZF1rqJ5kJ0iMEjU4Jwf7mKhRaLWoHJAzX5WvpfMytIR9sw3EwBcdQdRlIwSrsQ3odhUYq',
+        href:
+          'https://lh5.googleusercontent.com/EqByyE2l_VVSU6KoXFlkpPjJIBsbMTb4Dkr0cuvy2K5ctn8BoJsDHBXO0rU2wyck72_ZF1rqJ5kJ0iMEjU4Jwf7mKhRaLWoHJAzX5WvpfMytIR9sw3EwBcdQdRlIwSrsQ3odhUYq',
         title: "this is this image's title",
         openInNewTab: true,
         children: [
           {
-            text: 'https://lh5.googleusercontent.com/EqByyE2l_VVSU6KoXFlkpPjJIBsbMTb4Dkr0cuvy2K5ctn8BoJsDHBXO0rU2wyck72_ZF1rqJ5kJ0iMEjU4Jwf7mKhRaLWoHJAzX5WvpfMytIR9sw3EwBcdQdRlIwSrsQ3odhUYq',
+            text:
+              'https://lh5.googleusercontent.com/EqByyE2l_VVSU6KoXFlkpPjJIBsbMTb4Dkr0cuvy2K5ctn8BoJsDHBXO0rU2wyck72_ZF1rqJ5kJ0iMEjU4Jwf7mKhRaLWoHJAzX5WvpfMytIR9sw3EwBcdQdRlIwSrsQ3odhUYq',
           },
         ],
       },
@@ -600,7 +604,7 @@ test('Converts an image pasted from Google Docs into a link node', () => {
 test('Reshape an incorrectly structured table', () => {
   return htmlToSlateAST(
     '<table><colgroup><col /><col /></colgroup><tbody><tr><td></td></tr><tr></tr></tbody></table>'
-  ).then((ast) =>
+  ).then(ast =>
     expect(ast).toStrictEqual([
       {
         type: 'table',
@@ -654,13 +658,14 @@ test('Reshape an incorrectly structured table', () => {
 
 test('Transforms pre tags into code-block nodes', () => {
   const input = fs.readFileSync(__dirname + '/pre.html').toString();
-  return htmlToSlateAST(input).then((ast) =>
+  return htmlToSlateAST(input).then(ast =>
     expect(ast).toStrictEqual([
       {
         type: 'code-block',
         children: [
           {
-            text: "  L          TE\n    A       A\n      C    V\n       R A\n       DOU\n       LOU\n      REUSE\n      QUE TU\n      PORTES\n    ET QUI T'\n    ORNE O CI\n     VILISÉ\n    OTE-  TU VEUX\n     LA    BIEN\n    SI      RESPI\n            RER       - Apollinaire",
+            text:
+              "  L          TE\n    A       A\n      C    V\n       R A\n       DOU\n       LOU\n      REUSE\n      QUE TU\n      PORTES\n    ET QUI T'\n    ORNE O CI\n     VILISÉ\n    OTE-  TU VEUX\n     LA    BIEN\n    SI      RESPI\n            RER       - Apollinaire",
           },
         ],
       },

packages/react-renderer/src/RichText.tsx

@@ -17,6 +17,7 @@ import {
 } from './defaultElements';
 import { RenderText } from './RenderText';
 import { getElements } from './util/getElements';
+import { elementIsEmpty } from './util/elementIsEmpty';
 
 function RenderNode({
   node,
@@ -65,15 +66,15 @@ function RenderElement({
   const { nodeId, nodeType } = rest;
 
   /**
-   * Checks if element has empty text, so it can be removed.
+   * Checks if the element is empty, so that it can be removed.
    *
    * Elements that can be removed with empty text are defined in `defaultRemoveEmptyElements`
    */
   if (
     defaultRemoveEmptyElements?.[
       elementKeys[type] as keyof RemoveEmptyElementType
     ] &&
-    children[0].text === ''
+    elementIsEmpty({ children })
   ) {
     return <Fragment />;
   }
@@ -85,7 +86,7 @@ function RenderElement({
    * Since there won't be duplicated ID's, it's safe to use the first element.
    */
   const referenceValues = isEmbed
-    ? references?.filter((ref) => ref.id === nodeId)[0]
+    ? references?.filter(ref => ref.id === nodeId)[0]
     : null;
 
   /**
@@ -251,9 +252,7 @@ export function RichText({
     If it isn't defined and there's embed elements, it will show a warning
   */
   if (__DEV__) {
-    const embedElements = elements.filter(
-      (element) => element.type === 'embed'
-    );
+    const embedElements = elements.filter(element => element.type === 'embed');
 
     if (embedElements.length > 0 && !references) {
       console.warn(

packages/react-renderer/src/defaultElements.tsx

@@ -57,9 +57,9 @@ export const defaultElements: Required<NodeRendererType> = {
   ),
   list_item_child: ({ children }) => <>{children}</>,
   Asset: {
-    audio: (props) => <Audio {...props} url={props.url} />,
-    image: (props) => <Image {...props} src={props.url} />,
-    video: (props) => <Video {...props} src={props.url} />,
+    audio: props => <Audio {...props} url={props.url} />,
+    image: props => <Image {...props} src={props.url} />,
+    video: props => <Video {...props} src={props.url} />,
     font: FallbackForCustomAsset,
     application: FallbackForCustomAsset,
     model: FallbackForCustomAsset,

packages/react-renderer/src/util/elementIsEmpty.ts

@@ -0,0 +1,32 @@
+import {
+  ElementNode,
+  isElement,
+  isText,
+  Text,
+} from '@graphcms/rich-text-types';
+
+export function elementIsEmpty({
+  children,
+}: {
+  children: (ElementNode | Text)[];
+}): boolean {
+  // Checks if the children array has more than one element.
+  // It may have a link inside, that's why we need to check this condition.
+  if (children.length > 1) {
+    const hasText = children.filter(function f(child): boolean | number {
+      if (isText(child) && child.text !== '') {
+        return true;
+      }
+
+      if (isElement(child)) {
+        return (child.children = child.children.filter(f)).length;
+      }
+
+      return false;
+    });
+
+    return hasText.length > 0 ? false : true;
+  } else if (children[0].text === '') return true;
+
+  return true;
+}

packages/react-renderer/test/RichText.test.tsx

@@ -57,11 +57,28 @@ describe('@graphcms/rich-text-react-renderer', () => {
     `);
   });
 
-  it('renders content correctly if received a object with empty children', () => {
+  it('should not render elements if received a object with empty children', () => {
     const { container } = render(<RichText content={emptyContent} />);
 
     expect(container).toMatchInlineSnapshot(`
       <div>
+        <h2>
+          
+          <a
+            href="https://graphcms.com"
+          >
+            Testing Link
+          </a>
+        </h2>
+        <h2>
+          
+          <a
+            href="https://graphcms.com"
+          >
+            Link
+          </a>
+           2
+        </h2>
         <table>
           <tbody>
             <tr>