Skip to content

Commit c2bff27

Browse files
BobDotComBobDotCom
committed
Implement twemoji
1 parent 8290b38 commit c2bff27

File tree

3 files changed

+102
-34
lines changed

3 files changed

+102
-34
lines changed

‎packages/react/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"prepublishOnly": "yarn build"
2828
},
2929
"dependencies": {
30-
"@discord-message-components/core": "^0.2.1"
30+
"@discord-message-components/core": "^0.2.1",
31+
"react-twemoji": "^0.5.0"
3132
},
3233
"peerDependencies": {
3334
"react": "^17.0.0",
@@ -41,6 +42,7 @@
4142
"@storybook/react": "^6.2.7",
4243
"@types/react": "^17.0.0",
4344
"@types/react-dom": "^17.0.0",
45+
"@types/react-twemoji": "^0.4.0",
4446
"@vitejs/plugin-react-refresh": "^1.1.0",
4547
"babel-loader": "^8.2.2",
4648
"eslint-plugin-react": "^7.22.0",

‎packages/react/src/components/DiscordMessage.tsx

Lines changed: 52 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import DiscordDefaultOptions, { DiscordMessageOptions, Profile } from '../contex
55
import DiscordOptionsContext from '../context/DiscordOptionsContext'
66
import AuthorInfo from './AuthorInfo'
77
import '@discord-message-components/core/dist/styles/discord-message.css'
8+
import Twemoji from 'react-twemoji'
89

910
export type DiscordMessageProps = PropsWithChildren<{
1011
author?: string
@@ -13,9 +14,26 @@ export type DiscordMessageProps = PropsWithChildren<{
1314
edited?: boolean
1415
profile?: string
1516
roleColor?: string
16-
timestamp?: Date | string
17+
timestamp?: Date | string,
18+
useTwemoji?: boolean
1719
}>
1820

21+
type MaybeTwemojiProps = PropsWithChildren<{
22+
useTwemoji?: boolean
23+
}>
24+
25+
26+
function MaybeTwemoji({
27+
useTwemoji,
28+
children,
29+
}: MaybeTwemojiProps): ReactElement {
30+
if (useTwemoji) {
31+
return <Twemoji>{children}</Twemoji>
32+
}
33+
return <>{children}</>
34+
}
35+
36+
1937
export default function DiscordMessage({
2038
author,
2139
avatar,
@@ -26,6 +44,7 @@ export default function DiscordMessage({
2644
profile: profileKey,
2745
roleColor,
2846
timestamp = util.defaultTimestamp,
47+
useTwemoji,
2948
}: DiscordMessageProps & { compactMode?: boolean }): ReactElement {
3049
const options: DiscordMessageOptions = useContext(DiscordOptionsContext) ?? DiscordDefaultOptions
3150

@@ -93,37 +112,39 @@ export default function DiscordMessage({
93112
if (highlightMessage && !ephemeralMessage) messageClasses += ' discord-mention-highlight'
94113

95114
return (
96-
<div className={messageClasses}>
97-
{slots.interactions}
98-
<div className="discord-message-content">
99-
<div className="discord-author-avatar">
100-
<img src={user.avatar} alt="" />
101-
</div>
102-
<div className="discord-message-body">
103-
{!compactMode
104-
? <div>
105-
<AuthorInfo author={user.author} bot={user.bot} roleColor={user.roleColor} />
106-
<span className="discord-message-timestamp">
107-
{messageTimestamp}
108-
</span>
109-
</div>
110-
: <Fragment>
111-
<span className="discord-message-timestamp">
112-
{messageTimestamp}
113-
</span>
114-
<AuthorInfo author={user.author} bot={user.bot} roleColor={user.roleColor} />
115-
</Fragment>
116-
}
117-
{slots.default}
118-
{edited && <span className="discord-message-edited">(edited)</span>}
119-
{slots.embeds}
120-
{slots.actions}
121-
{ephemeralMessage && <div className="discord-message-ephemeral-notice">
122-
Only you can see this
123-
</div>}
124-
{slots.reactions}
115+
<MaybeTwemoji useTwemoji={useTwemoji}>
116+
<div className={messageClasses}>
117+
{slots.interactions}
118+
<div className="discord-message-content">
119+
<div className="discord-author-avatar">
120+
<img src={user.avatar} alt="" />
121+
</div>
122+
<div className="discord-message-body">
123+
{!compactMode
124+
? <div>
125+
<AuthorInfo author={user.author} bot={user.bot} roleColor={user.roleColor} />
126+
<span className="discord-message-timestamp">
127+
{messageTimestamp}
128+
</span>
129+
</div>
130+
: <Fragment>
131+
<span className="discord-message-timestamp">
132+
{messageTimestamp}
133+
</span>
134+
<AuthorInfo author={user.author} bot={user.bot} roleColor={user.roleColor} />
135+
</Fragment>
136+
}
137+
{slots.default}
138+
{edited && <span className="discord-message-edited">(edited)</span>}
139+
{slots.embeds}
140+
{slots.actions}
141+
{ephemeralMessage && <div className="discord-message-ephemeral-notice">
142+
Only you can see this
143+
</div>}
144+
{slots.reactions}
145+
</div>
125146
</div>
126147
</div>
127-
</div>
148+
</MaybeTwemoji>
128149
)
129150
}

‎yarn.lock

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3246,6 +3246,13 @@
32463246
dependencies:
32473247
"@types/react" "*"
32483248

3249+
"@types/react-twemoji@^0.4.0":
3250+
version "0.4.0"
3251+
resolved "https://registry.yarnpkg.com/@types/react-twemoji/-/react-twemoji-0.4.0.tgz#3f3ce96e273ec0aa4b4ddca2913951b168fd72ee"
3252+
integrity sha512-OVkDaNTg9WqqM2MBqL68FNPsn+5aabQIbL9KY+ofK/Q4ENOuaHOWsg/jRD9zQ+GX5L+7LC1Ztgr4iK0/qZd17w==
3253+
dependencies:
3254+
"@types/react" "*"
3255+
32493256
"@types/react@*", "@types/react@^17.0.0":
32503257
version "17.0.6"
32513258
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.6.tgz#0ec564566302c562bf497d73219797a5e0297013"
@@ -6831,7 +6838,7 @@ fs-extra@^0.30.0:
68316838
path-is-absolute "^1.0.0"
68326839
rimraf "^2.2.8"
68336840

6834-
fs-extra@^8.1.0:
6841+
fs-extra@^8.0.1, fs-extra@^8.1.0:
68356842
version "8.1.0"
68366843
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
68376844
integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
@@ -8511,6 +8518,15 @@ jsonfile@^4.0.0:
85118518
optionalDependencies:
85128519
graceful-fs "^4.1.6"
85138520

8521+
jsonfile@^5.0.0:
8522+
version "5.0.0"
8523+
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-5.0.0.tgz#e6b718f73da420d612823996fdf14a03f6ff6922"
8524+
integrity sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==
8525+
dependencies:
8526+
universalify "^0.1.2"
8527+
optionalDependencies:
8528+
graceful-fs "^4.1.6"
8529+
85148530
jsonfile@^6.0.1:
85158531
version "6.1.0"
85168532
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
@@ -8778,6 +8794,11 @@ lodash.debounce@^4.0.8:
87788794
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
87798795
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
87808796

8797+
lodash.isequal@^4.5.0:
8798+
version "4.5.0"
8799+
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
8800+
integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
8801+
87818802
lodash.ismatch@^4.4.0:
87828803
version "4.4.0"
87838804
resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
@@ -11133,6 +11154,15 @@ react-textarea-autosize@^8.3.0:
1113311154
use-composed-ref "^1.0.0"
1113411155
use-latest "^1.0.0"
1113511156

11157+
react-twemoji@^0.5.0:
11158+
version "0.5.0"
11159+
resolved "https://registry.yarnpkg.com/react-twemoji/-/react-twemoji-0.5.0.tgz#0565f8e427fc4c9ef3680977c4a88fbdef79f874"
11160+
integrity sha512-xz3NLWTFCfWOmPd559jcFX4f976ORIPpL9SwdBQO5BZwIYD1U1vpbY2E6k2vwPCVH78s2m1GbG5jpHKGUPZ+gw==
11161+
dependencies:
11162+
lodash.isequal "^4.5.0"
11163+
prop-types "^15.7.2"
11164+
twemoji "14.0.1"
11165+
1113611166
[email protected]:
1113711167
version "16.14.0"
1113811168
resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -12880,6 +12910,21 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
1288012910
resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
1288112911
integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
1288212912

12913+
[email protected]:
12914+
version "14.0.0"
12915+
resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-14.0.0.tgz#13dabcb6d3a261d9efbf58a1666b182033bf2b62"
12916+
integrity sha512-9DUOTGLOWs0pFWnh1p6NF+C3CkQ96PWmEFwhOVmT3WbecRC+68AIqpsnJXygfkFcp4aXbOp8Dwbhh/HQgvoRxA==
12917+
12918+
[email protected]:
12919+
version "14.0.1"
12920+
resolved "https://registry.yarnpkg.com/twemoji/-/twemoji-14.0.1.tgz#0640887ef149403ae577081cbc2480a026e55ed6"
12921+
integrity sha512-eoqhea0sUhmC10iTacksyp1v9O4BP1jKmVqtK+Nztw40/dzawSHkXL3/xCpyh+mukmEvJ0Gw9VLvwZfQ9HKXDw==
12922+
dependencies:
12923+
fs-extra "^8.0.1"
12924+
jsonfile "^5.0.0"
12925+
twemoji-parser "14.0.0"
12926+
universalify "^0.1.2"
12927+
1288312928
type-check@^0.4.0, type-check@~0.4.0:
1288412929
version "0.4.0"
1288512930
resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -13109,7 +13154,7 @@ universal-user-agent@^6.0.0:
1310913154
resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-6.0.0.tgz#3381f8503b251c0d9cd21bc1de939ec9df5480ee"
1311013155
integrity sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==
1311113156

13112-
universalify@^0.1.0:
13157+
universalify@^0.1.0, universalify@^0.1.2:
1311313158
version "0.1.2"
1311413159
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
1311513160
integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==

0 commit comments

Comments
 (0)