fix(main): allow code elements to work in h2/h3 headings with anchor links

src/components/MDXComponents/MDXHeading.tsx

@@ -4,20 +4,28 @@ import slug from './utils/slug';
 
 export const MDXHeading = (props) => {
   const { level, children } = props;
-
   let href = '';
 
+  /* Test if children element is not a string before creating the url slug */
   if (children && typeof children != 'string') {
     let newChildren = '';
-    for (let i = 0; i < children.length; i++) {
-      if (typeof children[i] == 'string') {
-        newChildren = newChildren + children[i];
-      } else if (typeof children[i] != 'string') {
-        newChildren = newChildren + children[i].props.children;
+    /* Test if child element is a single object */
+    if (typeof children == 'object' && children.props?.children) {
+      newChildren = children.props.children;
+    } else {
+      /* If not a single object, we expect an array of
+      elements and loop through them */
+      for (let i = 0; i < children.length; i++) {
+        if (typeof children[i] == 'string') {
+          newChildren = newChildren + children[i];
+        } else {
+          newChildren = newChildren + children[i].props.children;
+        }
       }
     }
     href = `${slug(newChildren)}`;
   } else {
+    /* If children element is a string, use that to create the url slug */
     href = `${slug(children)}`;
   }
 

src/components/MDXComponents/__tests__/MDXHeading.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import { MDXHeading } from '../MDXHeading';
+
+describe('MDXHeading', () => {
+  it('should render H2 with string and anchor link', () => {
+    const props = {
+      level: 2,
+      children: 'Test heading'
+    };
+    render(<MDXHeading {...props} />);
+
+    const heading = screen.queryByRole('heading', { level: 2 });
+    const link = screen.queryByRole('link');
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveTextContent(props.children);
+    expect(link).toHaveAttribute(
+      'href',
+      expect.stringMatching(/#test-heading/)
+    );
+  });
+
+  it('should render H3 with string and anchor link', () => {
+    const props = {
+      level: 3,
+      children: 'Test heading'
+    };
+    render(<MDXHeading {...props} />);
+
+    const heading = screen.queryByRole('heading', { level: 3 });
+    const link = screen.queryByRole('link');
+
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveTextContent(props.children);
+    expect(link).toHaveAttribute(
+      'href',
+      expect.stringMatching(/#test-heading/)
+    );
+  });
+
+  it('should render H4 with string and no anchor link', () => {
+    const props = {
+      level: 4,
+      children: 'Test heading'
+    };
+    render(<MDXHeading {...props} />);
+
+    const heading = screen.queryByRole('heading', { level: 4 });
+    const link = screen.queryByRole('link');
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveTextContent(props.children);
+    expect(link).not.toBeInTheDocument();
+  });
+
+  it('should render H2 with HTML code element and anchor link', () => {
+    const props = {
+      level: 2,
+      children: <code>runtime</code>
+    };
+    render(<MDXHeading {...props} />);
+
+    const heading = screen.queryByRole('heading', { level: 2 });
+    const link = screen.queryByRole('link', { name: 'runtime' });
+    expect(heading).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', expect.stringMatching(/#runtime/));
+  });
+
+  it('should render H2 with mixed elements and anchor link', () => {
+    render(
+      <MDXHeading level={2}>
+        <code>runtime</code> and <code>test</code>
+      </MDXHeading>
+    );
+
+    const heading = screen.queryByRole('heading', { level: 2 });
+    const link = screen.queryByRole('link', { name: 'runtime and test' });
+    expect(heading).toBeInTheDocument();
+    expect(link).toHaveAttribute(
+      'href',
+      expect.stringMatching(/#runtime-and-test/)
+    );
+  });
+});