From 0c40febaff6ad2d7d86ad1b99ec57e340668d20f Mon Sep 17 00:00:00 2001
From: Vitor Carvalho <lightningspirit@gmail.com>
Date: Wed, 27 Oct 2021 11:45:55 +0100
Subject: [PATCH] Add support for Raw HTML block

It's a simple block, worth adding.

Closes #25
---
 README.md                                        |  1 +
 src/index.tsx                                    |  3 +++
 .../raw/__snapshots__/index.test.tsx.snap        | 16 ++++++++++++++++
 src/renderers/raw/index.test.tsx                 | 15 +++++++++++++++
 src/renderers/raw/index.tsx                      | 13 +++++++++++++
 5 files changed, 48 insertions(+)
 create mode 100644 src/renderers/raw/__snapshots__/index.test.tsx.snap
 create mode 100644 src/renderers/raw/index.test.tsx
 create mode 100644 src/renderers/raw/index.tsx

diff --git a/README.md b/README.md
index e77d25e..e4e8dcc 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,7 @@ The package ships with the following renderers, but you can include your custom
 - Table
 - Quote
 - Delimiter
+- Raw (HTML)
 
 ## Styling and optional configs
 
diff --git a/src/index.tsx b/src/index.tsx
index 0db8bfd..e308995 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,6 +7,7 @@ import Image from './renderers/image';
 import List from './renderers/list';
 import Paragraph from './renderers/paragraph';
 import Quote from './renderers/quote';
+import Raw from './renderers/raw';
 import Table from './renderers/table';
 
 export type ConfigProp = Record<string, RenderConfig>;
@@ -59,6 +60,7 @@ const Blocks = ({
     paragraph: Paragraph,
     quote: Quote,
     table: Table,
+    raw: Raw,
   };
 
   const availableRenderers = {
@@ -92,4 +94,5 @@ export {
   Paragraph as ParagraphBlock,
   Quote as QuoteBlock,
   Table as TableBlock,
+  Raw as RawBlock,
 };
diff --git a/src/renderers/raw/__snapshots__/index.test.tsx.snap b/src/renderers/raw/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..7251270
--- /dev/null
+++ b/src/renderers/raw/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Raw /> when receives a raw block renders content as HTML 1`] = `
+<div
+  style={
+    Object {
+      "background": "#000",
+      "color": "#fff",
+      "fontSize": "30px",
+      "padding": "50px",
+    }
+  }
+>
+  Any HTML code
+</div>
+`;
diff --git a/src/renderers/raw/index.test.tsx b/src/renderers/raw/index.test.tsx
new file mode 100644
index 0000000..9e3947f
--- /dev/null
+++ b/src/renderers/raw/index.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { create } from 'react-test-renderer';
+import Raw, { RawBlockData } from '.';
+
+describe('<Raw />', () => {
+  describe('when receives a raw block', () => {
+    const data: RawBlockData = {
+      html: '<div style="background: #000; color: #fff; font-size: 30px; padding: 50px;">Any HTML code</div>',
+    };
+
+    it('renders content as HTML', () => {
+      expect(create(<Raw data={data} />).toJSON()).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/renderers/raw/index.tsx b/src/renderers/raw/index.tsx
new file mode 100644
index 0000000..e849803
--- /dev/null
+++ b/src/renderers/raw/index.tsx
@@ -0,0 +1,13 @@
+import HTMLReactParser from 'html-react-parser';
+import React from 'react';
+import { RenderFn } from '../..';
+
+export interface RawBlockData {
+  html: string;
+}
+
+const Raw: RenderFn<RawBlockData> = ({ data }) => {
+  return <>{data?.html && HTMLReactParser(data.html)}</>;
+};
+
+export default Raw;