From cde1b1f11ec7b2c8706e82398da3ab7d6197c75d Mon Sep 17 00:00:00 2001
From: wonderlandpark <wonderbotsupport@naver.com>
Date: Sun, 7 Mar 2021 21:38:56 +0900
Subject: [PATCH] chore: added Message component

---
 components/Markdown.tsx                    | 10 ++++++++--
 pages/developers/docs/[first]/[second].tsx |  3 ++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/Markdown.tsx b/components/Markdown.tsx
index 93cfa0e..f843476 100644
--- a/components/Markdown.tsx
+++ b/components/Markdown.tsx
@@ -1,9 +1,11 @@
-import { anchorHeader, customEmoji, twemoji } from '@utils/Tools'
 import MarkdownView from 'react-showdown'
 import sanitizeHtml from 'sanitize-html'
 import Emoji from 'node-emoji'
+import { FunctionComponent } from 'react'
 
-const Markdown = ({ text, options={} }: MarkdownProps): JSX.Element => {
+import { anchorHeader, customEmoji, twemoji } from '@utils/Tools'
+
+const Markdown = ({ text, options={}, allowedTag=[], components={} }: MarkdownProps): JSX.Element => {
 	return (
 		<div className='markdown-body w-full'>
 			<MarkdownView
@@ -23,6 +25,7 @@ const Markdown = ({ text, options={} }: MarkdownProps): JSX.Element => {
 					encodeEmails: true,
 					...options
 				}}
+				components={components}
 				sanitizeHtml={html =>
 					sanitizeHtml(html, {
 						allowedTags: [
@@ -94,6 +97,7 @@ const Markdown = ({ text, options={} }: MarkdownProps): JSX.Element => {
 							'svg',
 							'path',
 							'input',
+							...allowedTag
 						],
 						allowedAttributes: false,
 					})
@@ -108,6 +112,8 @@ interface MarkdownProps {
 	options?: {
 		[key: string]: boolean
 	}
+	allowedTag?: string[]
+	components?: Record<string, FunctionComponent>
 }
 
 export default Markdown
diff --git a/pages/developers/docs/[first]/[second].tsx b/pages/developers/docs/[first]/[second].tsx
index 7c08144..fb7e0e2 100644
--- a/pages/developers/docs/[first]/[second].tsx
+++ b/pages/developers/docs/[first]/[second].tsx
@@ -8,6 +8,7 @@ import { join } from 'path'
 import { DocsData } from '@types'
 
 import NotFound from 'pages/404'
+import Message from '@components/Message'
 
 const DeveloperLayout = dynamic(() => import('@components/DeveloperLayout'))
 const Markdown = dynamic(() => import ('@components/Markdown'))
@@ -30,7 +31,7 @@ const Docs: NextPage<DocsProps> = ({ docs }) => {
 		<div className='px-2'>
 			{
 				!document ? ''
-					: <Markdown text={document.text} options={{ openLinksInNewWindow: false }}/>
+					: <Markdown text={document.text} options={{ openLinksInNewWindow: false }} components={{ message: Message }} allowedTag={['message']} />
 			}
 		</div>
 	</DeveloperLayout>