Merge pull request #28 from benjaminrobinet/feature/headings-plaintext

feat: add plainText to headings

Author: jhoward1994

README.md

@@ -40,7 +40,7 @@ You can provide your own React components to the renderer, both for blocks and m
 
 - **Blocks** are full-width elements, usually at the root of the content. The available options are:
   - paragraph
-  - heading (receives `level`)
+  - heading (receives `level` and `plainText`)
   - list (receives `format`)
   - quote
   - code (receives `plainText`)

src/Block.tsx

@@ -17,7 +17,7 @@ const voidTypes = ['image'];
 const augmentProps = (content: Node) => {
   const { children: childrenNodes, type, ...props } = content;
 
-  if (type === 'code') {
+  if (type === 'code' || type === 'heading') {
     // Builds a plain text string from an array of nodes, regardless of links or modifiers
     const getPlainText = (children: typeof childrenNodes): string => {
       return children.reduce((currentPlainText, node) => {

src/BlocksRenderer.tsx

@@ -88,7 +88,7 @@ type Node = RootNode | NonTextInlineNode;
 type GetPropsFromNode<T> = Omit<T, 'type' | 'children'> & {
   children?: React.ReactNode;
   // For code blocks, add a plainText property that is created by this renderer
-  plainText?: T extends { type: 'code' } ? string : never;
+  plainText?: T extends { type: 'code' | 'heading' } ? string : never;
 };
 
 // Map of all block types to their matching React component

tests/BlocksRenderer.test.tsx

@@ -455,5 +455,27 @@ describe('BlocksRenderer', () => {
 
       expect(screen.getByText('const a = 1;const b = 2;')).toBeInTheDocument();
     });
+
+    it('parses headings to plain text', () => {
+      render(
+        <BlocksRenderer
+          content={content}
+          blocks={{
+            heading: (props) => {
+              const HeadingLevel = `h${props.level}` as keyof React.JSX.IntrinsicElements;
+              return (
+                <HeadingLevel data-testid="heading-with-id" data-plain-text={props.plainText}>
+                  {props.children}
+                </HeadingLevel>
+              );
+            },
+          }}
+        />
+      );
+
+      const element = screen.getByTestId('heading-with-id');
+
+      expect(element.dataset.plainText).toBe('A cool website');
+    });
   });
 });