diff --git a/packages/block-text/package-lock.json b/packages/block-text/package-lock.json index c6c6be7..a890a54 100644 --- a/packages/block-text/package-lock.json +++ b/packages/block-text/package-lock.json @@ -1,13 +1,16 @@ { "name": "@usewaypoint/block-text", - "version": "0.0.3", + "version": "0.0.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@usewaypoint/block-text", - "version": "0.0.3", + "version": "0.0.4", "license": "MIT", + "dependencies": { + "markdown-parser-react": "^1.1.2" + }, "devDependencies": { "@testing-library/react": "^14.2.1" }, @@ -879,7 +882,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "peer": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -896,6 +898,14 @@ "lz-string": "bin/bin.js" } }, + "node_modules/markdown-parser-react": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/markdown-parser-react/-/markdown-parser-react-1.1.2.tgz", + "integrity": "sha512-MNLHekU1xOwKZLJK4NMWJDL9pNnJdKx2jdsHfAF4+Y5rF4tD/S/OuNehd4X46/KcJzBfas19pePVcwQoibpeNg==", + "dependencies": { + "react": "^18.2.0" + } + }, "node_modules/object-inspect": { "version": "1.13.1", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", @@ -987,7 +997,6 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, diff --git a/packages/block-text/package.json b/packages/block-text/package.json index e7d9458..692d336 100644 --- a/packages/block-text/package.json +++ b/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" } } diff --git a/packages/block-text/src/__snapshots__/index.spec.tsx.snap b/packages/block-text/src/__snapshots__/index.spec.tsx.snap index 16fcccd..5adf23a 100644 --- a/packages/block-text/src/__snapshots__/index.spec.tsx.snap +++ b/packages/block-text/src/__snapshots__/index.spec.tsx.snap @@ -5,3 +5,23 @@ exports[`block-text renders with default values 1`] = `
`; + +exports[`block-text renders with safe markdown 1`] = ` + +
+
+

+ This is <span>markdown</span> +

+
+
+
+`; + +exports[`block-text renders without markdown 1`] = ` + +
+ ## This is not <span>markdown</span> +
+
+`; diff --git a/packages/block-text/src/index.spec.tsx b/packages/block-text/src/index.spec.tsx index 48d5e1a..bd26bd6 100644 --- a/packages/block-text/src/index.spec.tsx +++ b/packages/block-text/src/index.spec.tsx @@ -8,4 +8,29 @@ describe('block-text', () => { it('renders with default values', () => { expect(render().asFragment()).toMatchSnapshot(); }); + + it('renders with safe markdown', () => { + expect( + render( + markdown`, + markdown: true, + }} + /> + ).asFragment() + ).toMatchSnapshot(); + }); + + it('renders without markdown', () => { + expect( + render( + markdown`, + }} + /> + ).asFragment() + ).toMatchSnapshot(); + }); }); diff --git a/packages/block-text/src/index.tsx b/packages/block-text/src/index.tsx index 576afc5..0cdee67 100644 --- a/packages/block-text/src/index.tsx +++ b/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 ( +
+ +
+ ); + } return
{text}
; }