Fix twemoji cdn + local storage
This commit is contained in:
parent
899a89cb3b
commit
7ed9567b8f
5 changed files with 34 additions and 3 deletions
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
[submodule "public/res/twemoji"]
|
||||||
|
path = public/res/twemoji
|
||||||
|
url = https://github.com/twitter/twemoji.git
|
1
public/res/twemoji
Submodule
1
public/res/twemoji
Submodule
|
@ -0,0 +1 @@
|
||||||
|
Subproject commit d94f4cf793e6d5ca592aa00f58a88f6a4229ad43
|
|
@ -30,6 +30,7 @@ import PhotoIC from '../../../../public/res/ic/outlined/photo.svg';
|
||||||
import BulbIC from '../../../../public/res/ic/outlined/bulb.svg';
|
import BulbIC from '../../../../public/res/ic/outlined/bulb.svg';
|
||||||
import PeaceIC from '../../../../public/res/ic/outlined/peace.svg';
|
import PeaceIC from '../../../../public/res/ic/outlined/peace.svg';
|
||||||
import FlagIC from '../../../../public/res/ic/outlined/flag.svg';
|
import FlagIC from '../../../../public/res/ic/outlined/flag.svg';
|
||||||
|
import { GetTwemojiCDN } from '../../../util/twemojify';
|
||||||
|
|
||||||
const ROW_EMOJIS_COUNT = 7;
|
const ROW_EMOJIS_COUNT = 7;
|
||||||
|
|
||||||
|
@ -37,7 +38,7 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
|
||||||
function getEmojiBoard() {
|
function getEmojiBoard() {
|
||||||
const emojiBoard = [];
|
const emojiBoard = [];
|
||||||
const totalEmojis = groupEmojis.length;
|
const totalEmojis = groupEmojis.length;
|
||||||
|
var cdn = GetTwemojiCDN()
|
||||||
for (let r = 0; r < totalEmojis; r += ROW_EMOJIS_COUNT) {
|
for (let r = 0; r < totalEmojis; r += ROW_EMOJIS_COUNT) {
|
||||||
const emojiRow = [];
|
const emojiRow = [];
|
||||||
for (let c = r; c < r + ROW_EMOJIS_COUNT; c += 1) {
|
for (let c = r; c < r + ROW_EMOJIS_COUNT; c += 1) {
|
||||||
|
@ -58,6 +59,7 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
|
||||||
hexcode: emoji.hexcode,
|
hexcode: emoji.hexcode,
|
||||||
loading: 'lazy',
|
loading: 'lazy',
|
||||||
}),
|
}),
|
||||||
|
base: cdn,
|
||||||
},
|
},
|
||||||
))
|
))
|
||||||
// This is a custom emoji, and should be render as an mxc
|
// This is a custom emoji, and should be render as an mxc
|
||||||
|
@ -250,6 +252,8 @@ function EmojiBoard({ onSelect, searchRef }) {
|
||||||
$emojiContent.children[tabIndex].scrollIntoView();
|
$emojiContent.children[tabIndex].scrollIntoView();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var cdn = GetTwemojiCDN()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="emoji-board" className="emoji-board">
|
<div id="emoji-board" className="emoji-board">
|
||||||
<ScrollView invisible>
|
<ScrollView invisible>
|
||||||
|
@ -333,7 +337,7 @@ function EmojiBoard({ onSelect, searchRef }) {
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
</div>
|
</div>
|
||||||
<div ref={emojiInfo} className="emoji-board__content__info">
|
<div ref={emojiInfo} className="emoji-board__content__info">
|
||||||
<div>{ parse(twemoji.parse('🙂')) }</div>
|
<div>{ parse(twemoji.parse('🙂', {base: cdn})) }</div>
|
||||||
<Text>:slight_smile:</Text>
|
<Text>:slight_smile:</Text>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,7 @@ import './RoomViewCmdBar.scss';
|
||||||
import parse from 'html-react-parser';
|
import parse from 'html-react-parser';
|
||||||
import twemoji from 'twemoji';
|
import twemoji from 'twemoji';
|
||||||
|
|
||||||
import { twemojify } from '../../../util/twemojify';
|
import { GetTwemojiCDN, twemojify } from '../../../util/twemojify';
|
||||||
|
|
||||||
import initMatrix from '../../../client/initMatrix';
|
import initMatrix from '../../../client/initMatrix';
|
||||||
import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
|
import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
|
||||||
|
@ -60,6 +60,7 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
|
||||||
unicode: emoji.unicode,
|
unicode: emoji.unicode,
|
||||||
shortcodes: emoji.shortcodes?.toString(),
|
shortcodes: emoji.shortcodes?.toString(),
|
||||||
}),
|
}),
|
||||||
|
base: GetTwemojiCDN()
|
||||||
},
|
},
|
||||||
));
|
));
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,6 +8,20 @@ import { sanitizeText } from './sanitize';
|
||||||
|
|
||||||
const Math = lazy(() => import('../app/atoms/math/Math'));
|
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 = {
|
const mathOptions = {
|
||||||
replace: (node) => {
|
replace: (node) => {
|
||||||
const maths = node.attribs?.['data-mx-maths'];
|
const maths = node.attribs?.['data-mx-maths'];
|
||||||
|
@ -42,7 +56,15 @@ export function twemojify(text, opts, linkify = false, sanitize = true, maths =
|
||||||
if (sanitize) {
|
if (sanitize) {
|
||||||
content = sanitizeText(content);
|
content = sanitizeText(content);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(opts){
|
||||||
|
opts.base = GetTwemojiCDN()
|
||||||
|
} else {
|
||||||
|
opts = { base: GetTwemojiCDN() }
|
||||||
|
}
|
||||||
|
|
||||||
content = twemoji.parse(content, opts);
|
content = twemoji.parse(content, opts);
|
||||||
|
|
||||||
if (linkify) {
|
if (linkify) {
|
||||||
content = linkifyHtml(content, {
|
content = linkifyHtml(content, {
|
||||||
target: '_blank',
|
target: '_blank',
|
||||||
|
|
Loading…
Reference in a new issue