fix(react): heading with links not rendered

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 />;
  }

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

@@ -63,12 +63,22 @@ describe('@graphcms/rich-text-react-renderer', () => {
  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>

packages/react-renderer/test/content.ts

@@ -30,6 +30,26 @@ export const emptyContent: RichTextContent = [
  },
  ],
  },
+ {
+ type: 'heading-two',
+ children: [
+ {
+ text: '',
+ },
+ {
+ href: 'https://graphcms.com',
+ type: 'link',
+ children: [
+ {
+ text: 'Link',
+ },
+ ],
+ },
+ {
+ text: ' 2',
+ },
+ ],
+ },
  {
  type: 'heading-one',
  children: [