From adb6cf1df26b0a1f06c6aebf99b4b0fa9627bf3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= Date: Thu, 4 Feb 2021 20:41:30 +0900 Subject: [PATCH] feat: using twemoji --- components/Markdown.tsx | 4 ++-- github-markdown.css | 6 ++++++ package.json | 14 ++++++++----- utils/Regex.ts | 3 +++ utils/ShowdownExtensions.ts | 15 +++++++++++++- utils/Tools.ts | 2 +- yarn.lock | 40 ++++++++++++++++++++++++++++++++++--- 7 files changed, 72 insertions(+), 12 deletions(-) diff --git a/components/Markdown.tsx b/components/Markdown.tsx index 116fe83..8ae33b6 100644 --- a/components/Markdown.tsx +++ b/components/Markdown.tsx @@ -1,10 +1,10 @@ -import { anchorHeader } from '@utils/Tools' +import { anchorHeader, twemoji } from '@utils/Tools' import MarkdownView from 'react-showdown' import sanitizeHtml from 'sanitize-html' const Markdown = ({ text }:MarkdownProps):JSX.Element => { return
- sanitizeHtml(html, { + sanitizeHtml(html, { allowedTags: [ 'addr', 'address', 'article', 'aside', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'section', 'blockquote', 'dd', 'div', diff --git a/github-markdown.css b/github-markdown.css index cecd6de..88f8369 100644 --- a/github-markdown.css +++ b/github-markdown.css @@ -1062,4 +1062,10 @@ .markdown-body input:not([type=checkbox]) { display: none; +} + +.markdown-body .emoji { + width: 1.5rem; + height: 1.5rem; + vertical-align: center; } \ No newline at end of file diff --git a/package.json b/package.json index 88e93c8..e64ba84 100644 --- a/package.json +++ b/package.json @@ -17,11 +17,7 @@ "@sentry/integrations": "^6.0.4", "@sentry/node": "^6.0.4", "@sentry/webpack-plugin": "^1.14.0", - "@types/cookie": "^0.4.0", - "@types/josa": "^3.0.2", - "@types/react-select": "^4.0.12", - "@types/sanitize-html": "^1.27.1", - "@types/url-regex-safe": "^1.0.0", + "@types/twemoji": "^12.1.1", "autoprefixer": "^10.2.4", "cookie": "^0.4.1", "core-js": "^3.8.3", @@ -36,6 +32,7 @@ "next": "10.0.6", "next-connect": "^0.9.1", "next-themes": "^0.0.10", + "node-emoji": "^1.10.0", "postcss": "^8.2.4", "postcss-preset-env": "^6.7.0", "react": "17.0.1", @@ -46,17 +43,24 @@ "stream-cache": "^0.0.2", "tailwindcss": "^2.0.2", "tlru": "^1.0.2", + "twemoji": "^13.0.1", "url-regex-safe": "^1.0.2", "yup": "^0.32.8", "yup-locales-ko": "^1.0.2" }, "devDependencies": { + "@types/cookie": "^0.4.0", "@types/core-js": "^2.5.4", "@types/jest": "^26.0.20", + "@types/josa": "^3.0.2", "@types/jsonwebtoken": "^8.5.0", "@types/node": "^14.14.22", + "@types/node-emoji": "^1.8.1", "@types/node-fetch": "^2.5.8", "@types/react": "^17.0.1", + "@types/react-select": "^4.0.12", + "@types/sanitize-html": "^1.27.1", + "@types/url-regex-safe": "^1.0.0", "@typescript-eslint/eslint-plugin": "^4.14.2", "@typescript-eslint/parser": "^4.14.2", "eslint": "^7.19.0", diff --git a/utils/Regex.ts b/utils/Regex.ts index 7a235e7..a3e9d77 100644 --- a/utils/Regex.ts +++ b/utils/Regex.ts @@ -5,3 +5,6 @@ export const Vanity = /^[A-Za-z\d-]+$/ export const Prefix = /^[^\s]$/ export const HTTPProtocol = /^https?:\/\/.*?/ 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)>' diff --git a/utils/ShowdownExtensions.ts b/utils/ShowdownExtensions.ts index 174f5c8..14b26d4 100644 --- a/utils/ShowdownExtensions.ts +++ b/utils/ShowdownExtensions.ts @@ -1,6 +1,9 @@ +import { Emoji, Heading } from './Regex' +import Twemoji from 'twemoji' + export const anchorHeader = { type: 'output', - regex: '(.*?)<\\/h(\\d)>', + regex: Heading, replace: function (__match, id:string, title:string, level:number) { // github anchor style @@ -14,3 +17,13 @@ export const anchorHeader = { } } +export const twemoji = { + type: 'output', + regex: Emoji, + replace: function(__match, emoji: string) { + console.log(emoji) + const emoj = Twemoji.parse(emoji, { folder: 'svg', ext: '.svg' }) + if(!emoj) return emoji + return emoj + } +} \ No newline at end of file diff --git a/utils/Tools.ts b/utils/Tools.ts index 54bbfdf..ed0749d 100644 --- a/utils/Tools.ts +++ b/utils/Tools.ts @@ -90,4 +90,4 @@ export function redirectTo(router: NextRouter, to: string) { return } -export { anchorHeader } from './ShowdownExtensions' \ No newline at end of file +export { anchorHeader, twemoji } from './ShowdownExtensions' \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index ad72863..33e3f94 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1000,6 +1000,11 @@ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.167.tgz#ce7d78553e3c886d4ea643c37ec7edc20f16765e" integrity sha512-w7tQPjARrvdeBkX/Rwg95S592JwxqOjmms3zWQ0XZgSyxSLdzWaYH3vErBhdVS/lRBX7F8aBYcYJYTr5TMGOzw== +"@types/node-emoji@^1.8.1": + version "1.8.1" + resolved "https://registry.yarnpkg.com/@types/node-emoji/-/node-emoji-1.8.1.tgz#689cb74fdf6e84309bcafce93a135dfecd01de3f" + integrity sha512-0fRfA90FWm6KJfw6P9QGyo0HDTCmthZ7cWaBQndITlaWLTZ6njRyKwrwpzpg+n6kBXBIGKeUHEQuBx7bphGJkA== + "@types/node-fetch@^2.5.8": version "2.5.8" resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.5.8.tgz#e199c835d234c7eb0846f6618012e558544ee2fb" @@ -1077,6 +1082,11 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff" integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw== +"@types/twemoji@^12.1.1": + version "12.1.1" + resolved "https://registry.yarnpkg.com/@types/twemoji/-/twemoji-12.1.1.tgz#34c5dcecff438b5be173889a6ee8ad51ba90445f" + integrity sha512-dW1B1WHTfrWmEzXb/tp8xsZqQHAyMB9JwLwbBqkIQVzmNUI02R7lJqxUpKFM114ygNZHKA1r74oPugCAiYHt1A== + "@types/url-regex-safe@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@types/url-regex-safe/-/url-regex-safe-1.0.0.tgz#78d0742fbc0438ab5805ae12ddb7ed0cf5daf493" @@ -3327,7 +3337,7 @@ fs-constants@^1.0.0: resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad" integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow== -fs-extra@^8.0.0: +fs-extra@^8.0.0, fs-extra@^8.0.1: version "8.1.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== @@ -4658,6 +4668,15 @@ jsonfile@^4.0.0: optionalDependencies: graceful-fs "^4.1.6" +jsonfile@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-5.0.0.tgz#e6b718f73da420d612823996fdf14a03f6ff6922" + integrity sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w== + dependencies: + universalify "^0.1.2" + optionalDependencies: + graceful-fs "^4.1.6" + jsonfile@^6.0.1: version "6.1.0" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae" @@ -5308,7 +5327,7 @@ node-addon-api@^3.0.2: resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.1.0.tgz#98b21931557466c6729e51cb77cd39c965f42239" integrity sha512-flmrDNB06LIl5lywUz7YlNGZH/5p0M7W28k8hzd9Lshtdh1wshD2Y+U4h9LD6KObOy1f+fEVdgprPrEymjM5uw== -node-emoji@^1.8.1: +node-emoji@^1.10.0, node-emoji@^1.8.1: version "1.10.0" resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da" integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw== @@ -7774,6 +7793,21 @@ tweetnacl@^1.0.3: resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-1.0.3.tgz#ac0af71680458d8a6378d0d0d050ab1407d35596" integrity sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw== +twemoji-parser@13.0.0: + version "13.0.0" + resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-13.0.0.tgz#bd9d1b98474f1651dc174696b45cabefdfa405af" + integrity sha512-zMaGdskpH8yKjT2RSE/HwE340R4Fm+fbie4AaqjDa4H/l07YUmAvxkSfNl6awVWNRRQ0zdzLQ8SAJZuY5MgstQ== + +twemoji@^13.0.1: + version "13.0.1" + resolved "https://registry.yarnpkg.com/twemoji/-/twemoji-13.0.1.tgz#57ddc8bd86c8175c11376f5f9ab322a02e739c2d" + integrity sha512-mrTBq+XpCLM4zm76NJOjLHoQNV9mHdBt3Cba/T5lS1rxn8ArwpqE47mqTocupNlkvcLxoeZJjYSUW0DU5ZwqZg== + dependencies: + fs-extra "^8.0.1" + jsonfile "^5.0.0" + twemoji-parser "13.0.0" + universalify "^0.1.2" + type-check@^0.4.0, type-check@~0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1" @@ -7845,7 +7879,7 @@ uniq@^1.0.1: resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff" integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8= -universalify@^0.1.0: +universalify@^0.1.0, universalify@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66" integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==