feat: parse code blocks children to plain text (#17)

* feat: parse code blocks children to plain text

* use contat

Author: remidej

README.md

@@ -40,12 +40,12 @@ 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
-  - list
+  - heading (receives `level`)
+  - list (receives `format`)
   - quote
-  - code
-  - image
-  - link
+  - code (receives `plainText`)
+  - image (receives `image`)
+  - link (receives `url`)
 - **Modifiers** are inline elements, used to change the appearance of fragments of text within a block. The available options are:
   - bold
   - italic

src/Block.tsx

@@ -11,6 +11,37 @@ interface BlockProps {
 
 const voidTypes = ['image'];
 
+/**
+ * Add props that are specific to a block type, and not present in that node type
+ */
+const augmentProps = (content: Node) => {
+  const { children: childrenNodes, type, ...props } = content;
+
+  if (type === 'code') {
+    // 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) => {
+        if (node.type === 'text') {
+          return currentPlainText.concat(node.text);
+        }
+
+        if (node.type === 'link') {
+          return currentPlainText.concat(getPlainText(node.children));
+        }
+
+        return currentPlainText;
+      }, '');
+    };
+
+    return {
+      ...props,
+      plainText: getPlainText(content.children),
+    };
+  }
+
+  return props;
+};
+
 const Block = ({ content }: BlockProps) => {
   const { children: childrenNodes, type, ...props } = content;
 
@@ -34,8 +65,10 @@ const Block = ({ content }: BlockProps) => {
     return <BlockComponent {...props} />;
   }
 
+  const augmentedProps = augmentProps(content);
+
   return (
-    <BlockComponent {...props}>
+    <BlockComponent {...augmentedProps}>
       {childrenNodes.map((childNode, index) => {
         if (childNode.type === 'text') {
           const { type: _type, ...childNodeProps } = childNode;

src/BlocksRenderer.tsx

@@ -85,7 +85,11 @@ type RootNode =
 type Node = RootNode | NonTextInlineNode;
 
 // Util to convert a node to the props of the corresponding React component
-type GetPropsFromNode<T> = Omit<T, 'type' | 'children'> & { children?: React.ReactNode };
+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;
+};
 
 // Map of all block types to their matching React component
 type BlocksComponents = {
@@ -118,7 +122,7 @@ const defaultComponents: ComponentsContextValue = {
     quote: (props) => <blockquote>{props.children}</blockquote>,
     code: (props) => (
       <pre>
-        <code>{props.children}</code>
+        <code>{props.plainText}</code>
       </pre>
     ),
     heading: ({ level, children }) => {

tests/BlocksRenderer.test.tsx

@@ -386,5 +386,37 @@ describe('BlocksRenderer', () => {
 
       console.warn = originalWarn;
     });
+
+    it('parses code blocks to plain text', () => {
+      render(
+        <BlocksRenderer
+          content={[
+            {
+              type: 'code',
+              children: [
+                {
+                  type: 'text',
+                  text: 'const a = 1;',
+                },
+                {
+                  type: 'link',
+                  url: 'https://test.com',
+                  children: [{ type: 'text', text: 'const b = 2;', bold: true }],
+                },
+              ],
+            },
+          ]}
+          blocks={{
+            code: (props) => (
+              <pre>
+                <code>{props.plainText}</code>
+              </pre>
+            ),
+          }}
+        />
+      );
+
+      expect(screen.getByText('const a = 1;const b = 2;')).toBeInTheDocument();
+    });
   });
 });