Adding markdown to block-text (#106)

packages/block-text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usewaypoint/block-text",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "@usewaypoint/document compatible Text component",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -26,5 +26,8 @@
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.1"
+  },
+  "dependencies": {
+    "markdown-parser-react": "^1.1.2"
   }
 }

packages/block-text/src/__snapshots__/index.spec.tsx.snap

@@ -5,3 +5,23 @@ exports[`block-text renders with default values 1`] = `
   <div />
 </DocumentFragment>
 `;
+
+exports[`block-text renders with safe markdown 1`] = `
+<DocumentFragment>
+  <div>
+    <div>
+      <h2>
+        This is &lt;span&gt;markdown&lt;/span&gt;
+      </h2>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`block-text renders without markdown 1`] = `
+<DocumentFragment>
+  <div>
+    ## This is not &lt;span&gt;markdown&lt;/span&gt;
+  </div>
+</DocumentFragment>
+`;

packages/block-text/src/index.spec.tsx

@@ -8,4 +8,29 @@ describe('block-text', () => {
   it('renders with default values', () => {
     expect(render(<Text />).asFragment()).toMatchSnapshot();
   });
+
+  it('renders with safe markdown', () => {
+    expect(
+      render(
+        <Text
+          props={{
+            text: `## This is <span>markdown</span>`,
+            markdown: true,
+          }}
+        />
+      ).asFragment()
+    ).toMatchSnapshot();
+  });
+
+  it('renders without markdown', () => {
+    expect(
+      render(
+        <Text
+          props={{
+            text: `## This is not <span>markdown</span>`,
+          }}
+        />
+      ).asFragment()
+    ).toMatchSnapshot();
+  });
 });

packages/block-text/src/index.tsx

@@ -1,3 +1,4 @@
+import Markdown from 'markdown-parser-react';
 import React, { CSSProperties } from 'react';
 import { z } from 'zod';
 
@@ -74,6 +75,7 @@ export const TextPropsSchema = z.object({
     .nullable(),
   props: z
     .object({
+      markdown: z.boolean().optional().nullable(),
       text: z.string().optional().nullable(),
     })
     .optional()
@@ -98,5 +100,12 @@ export function Text({ style, props }: TextProps) {
   };
 
   const text = props?.text ?? TextPropsDefaults.text;
+  if (props?.markdown) {
+    return (
+      <div style={wStyle}>
+        <Markdown content={text} />
+      </div>
+    );
+  }
   return <div style={wStyle}>{text}</div>;
 }