diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 00000000..b6c6947f --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "public/res/twemoji"] + path = public/res/twemoji + url = https://github.com/twitter/twemoji.git diff --git a/public/res/twemoji b/public/res/twemoji new file mode 160000 index 00000000..d94f4cf7 --- /dev/null +++ b/public/res/twemoji @@ -0,0 +1 @@ +Subproject commit d94f4cf793e6d5ca592aa00f58a88f6a4229ad43 diff --git a/src/app/organisms/emoji-board/EmojiBoard.jsx b/src/app/organisms/emoji-board/EmojiBoard.jsx index d9762323..5310ef10 100644 --- a/src/app/organisms/emoji-board/EmojiBoard.jsx +++ b/src/app/organisms/emoji-board/EmojiBoard.jsx @@ -30,6 +30,7 @@ import PhotoIC from '../../../../public/res/ic/outlined/photo.svg'; import BulbIC from '../../../../public/res/ic/outlined/bulb.svg'; import PeaceIC from '../../../../public/res/ic/outlined/peace.svg'; import FlagIC from '../../../../public/res/ic/outlined/flag.svg'; +import { GetTwemojiCDN } from '../../../util/twemojify'; const ROW_EMOJIS_COUNT = 7; @@ -37,7 +38,7 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => { function getEmojiBoard() { const emojiBoard = []; const totalEmojis = groupEmojis.length; - + var cdn = GetTwemojiCDN() for (let r = 0; r < totalEmojis; r += ROW_EMOJIS_COUNT) { const emojiRow = []; for (let c = r; c < r + ROW_EMOJIS_COUNT; c += 1) { @@ -58,6 +59,7 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => { hexcode: emoji.hexcode, loading: 'lazy', }), + base: cdn, }, )) // This is a custom emoji, and should be render as an mxc @@ -250,6 +252,8 @@ function EmojiBoard({ onSelect, searchRef }) { $emojiContent.children[tabIndex].scrollIntoView(); } + var cdn = GetTwemojiCDN() + return (
@@ -333,7 +337,7 @@ function EmojiBoard({ onSelect, searchRef }) {
-
{ parse(twemoji.parse('🙂')) }
+
{ parse(twemoji.parse('🙂', {base: cdn})) }
:slight_smile:
diff --git a/src/app/organisms/room/RoomViewCmdBar.jsx b/src/app/organisms/room/RoomViewCmdBar.jsx index 8c390a06..e6696537 100644 --- a/src/app/organisms/room/RoomViewCmdBar.jsx +++ b/src/app/organisms/room/RoomViewCmdBar.jsx @@ -5,7 +5,7 @@ import './RoomViewCmdBar.scss'; import parse from 'html-react-parser'; import twemoji from 'twemoji'; -import { twemojify } from '../../../util/twemojify'; +import { GetTwemojiCDN, twemojify } from '../../../util/twemojify'; import initMatrix from '../../../client/initMatrix'; import { getEmojiForCompletion } from '../emoji-board/custom-emoji'; @@ -60,6 +60,7 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) { unicode: emoji.unicode, shortcodes: emoji.shortcodes?.toString(), }), + base: GetTwemojiCDN() }, )); } diff --git a/src/util/twemojify.jsx b/src/util/twemojify.jsx index 0a4fede7..505fdf2b 100644 --- a/src/util/twemojify.jsx +++ b/src/util/twemojify.jsx @@ -8,6 +8,20 @@ import { sanitizeText } from './sanitize'; const Math = lazy(() => import('../app/atoms/math/Math')); +const CDN_LOCAL = "/public/res/twemoji/assets/" +const CDN_EXTERNAL = "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/"; + +export const GetTwemojiCDN = () => { + if(window.__TAURI__){ + return CDN_LOCAL + } + else{ + return CDN_EXTERNAL + } +}; + + + const mathOptions = { replace: (node) => { const maths = node.attribs?.['data-mx-maths']; @@ -42,7 +56,15 @@ export function twemojify(text, opts, linkify = false, sanitize = true, maths = if (sanitize) { content = sanitizeText(content); } + + if(opts){ + opts.base = GetTwemojiCDN() + } else { + opts = { base: GetTwemojiCDN() } + } + content = twemoji.parse(content, opts); + if (linkify) { content = linkifyHtml(content, { target: '_blank',