chore: using custom emoji

components/Markdown.tsx

@@ -1,10 +1,11 @@
-import { anchorHeader, twemoji } from '@utils/Tools'
+import { anchorHeader, customEmoji, twemoji } from '@utils/Tools'
 import MarkdownView from 'react-showdown'
 import sanitizeHtml from 'sanitize-html'
+import Emoji from 'node-emoji'
 
 const Markdown = ({ text }:MarkdownProps):JSX.Element => {
 	return <div className='w-full markdown-body'>
-		<MarkdownView markdown={text} extensions={[ anchorHeader, twemoji ]} options={{ openLinksInNewWindow: true, underline: true, emoji: true, omitExtraWLInCodeBlocks: true, literalMidWordUnderscores: true, simplifiedAutoLink: true, tables: true, strikethrough: true, smoothLivePreview: true, tasklists: true, ghCompatibleHeaderId: true, encodeEmails: true }} sanitizeHtml={(html)=> sanitizeHtml(html, {
+		<MarkdownView markdown={Emoji.emojify(text)} extensions={[ anchorHeader, twemoji, customEmoji ]} options={{ openLinksInNewWindow: true, underline: true, omitExtraWLInCodeBlocks: true, literalMidWordUnderscores: true, simplifiedAutoLink: true, tables: true, strikethrough: true, smoothLivePreview: true, tasklists: true, ghCompatibleHeaderId: true, encodeEmails: true }} sanitizeHtml={(html)=> sanitizeHtml(html, {
 			allowedTags: [
 				'addr', 'address', 'article', 'aside', 'h1', 'h2', 'h3', 'h4',
 				'h5', 'h6', 'section', 'blockquote', 'dd', 'div',

utils/Constants.ts

@@ -163,6 +163,9 @@ export const git = { 'github.com': { icon: 'github', text: 'Github' },  'gitlab.
 
 export const KoreanbotsDiscord = 'https://discord.gg/JEh53MQ'
 export const ThemeColors = [{ name: '파랑', rgb: 'rgb(51, 102, 255)', hex: '#3366FF', color: 'koreanbots-blue' }, { name: '하양', rgb: 'rgb(251, 251, 251)', hex: '#FBFBFB', color: 'little-white' }, { name: '검정', rgb: 'rgb(27, 30, 35)', hex: '#1B1E23', color: 'very-black' }, { name: '보라', rgb: 'rgb(114, 137, 218)', hex: '#7289DA', color: 'discord-blurple' } ]
+export const KoreanbotsEmoji = {
+	koreanbots: '/logo.png'
+}
 export const ErrorText = {
 	DEFAULT: '예상치 못한 에러가 발생하였습니다.',
 	200: '문제가 없는데 여기를 어떻게 오셨죠?',

utils/Regex.ts

@@ -8,3 +8,4 @@ export const Url = urlRegex({ strict: true })
 
 export const Emoji = '(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])'
 export const Heading = '<h\\d id="(.+?)">(.*?)<\\/h(\\d)>'
+export const EmojiSyntax = ':(\\w+):'

utils/ShowdownExtensions.ts

@@ -1,10 +1,11 @@
-import { Emoji, Heading } from './Regex'
+import { Emoji, EmojiSyntax, Heading } from './Regex'
 import Twemoji from 'twemoji'
+import { KoreanbotsEmoji } from './Constants'
 
 export const anchorHeader = {
 	type:    'output',
 	regex:   Heading,
-	replace: function (__match, id:string, title:string, level:number) {
+	replace: function (__match: string, id:string, title:string, level:number) {
 
 		// github anchor style
 		const octicon_html = `<a class="anchor mr-1 align-middle" aria-hidden="true" href="#${id}">
@@ -19,11 +20,20 @@ export const anchorHeader = {
 
 export const twemoji = {
 	type: 'output',
-	regex: Emoji,
+	regex: `${Emoji}{2}|${Emoji}`,
-	replace: function(__match, emoji: string) {
+	replace: function(__match: string, two: string, one: string) {
-		console.log(emoji)
+		const parsed = __match || two || one
-		const emoj = Twemoji.parse(emoji, { folder: 'svg', ext: '.svg' })
+		const emoj = Twemoji.parse(parsed, { folder: 'svg', ext: '.svg' })
-		if(!emoj) return emoji
+		if(!emoj) return parsed
 		return emoj
 	} 
+}
+
+export const customEmoji = {
+	type: 'output',
+	regex: EmojiSyntax,
+	replace: function(__match: string, name: string) {
+		if(!name) return `:${name}:`
+		return `<img class="emoji" draggable="false" alt="${name}" src="${KoreanbotsEmoji[name]}"/>`
+	}
 }

utils/Tools.ts

@@ -90,4 +90,4 @@ export function redirectTo(router: NextRouter, to: string) {
 	return
 }
 
-export { anchorHeader, twemoji } from './ShowdownExtensions'
+export { anchorHeader, twemoji, customEmoji } from './ShowdownExtensions'