moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'subdir-emoji' into 'develop' 

Subdirectory fix: load emojis

See merge request soapbox-pub/soapbox-fe!712
This commit is contained in:
Alex Gleason 2021-09-04 18:14:39 +00:00
parent 57e1fec66a e8a4a69b4e
commit 4157cae9c9
3 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/soapbox/components/autosuggest_emoji.js
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light'; import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
import { join } from 'path';
const assetHost = process.env.CDN_HOST || ''; import { FE_BASE_PATH } from 'soapbox/build_config';
export default class AutosuggestEmoji extends React.PureComponent { export default class AutosuggestEmoji extends React.PureComponent {
@ -23,7 +23,7 @@ export default class AutosuggestEmoji extends React.PureComponent {
return null; return null;
} }
url = `${assetHost}/emoji/${mapping.filename}.svg`; url = join(FE_BASE_PATH, 'emoji', `${mapping.filename}.svg`);
} }
return ( return (

7
app/soapbox/features/compose/components/emoji_picker_dropdown.js
View File

@ -7,6 +7,8 @@ import classNames from 'classnames';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { supportsPassiveEvents } from 'detect-passive-events'; import { supportsPassiveEvents } from 'detect-passive-events';
import { buildCustomEmojis } from '../../emoji/emoji'; import { buildCustomEmojis } from '../../emoji/emoji';
import { join } from 'path';
import { FE_BASE_PATH } from 'soapbox/build_config';
const messages = defineMessages({ const messages = defineMessages({
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' }, emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@ -25,10 +27,9 @@ const messages = defineMessages({
flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' }, flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
}); });
const assetHost = process.env.CDN_HOST || '';
let EmojiPicker, Emoji; // load asynchronously let EmojiPicker, Emoji; // load asynchronously
const backgroundImageFn = () => `${assetHost}/emoji/sheet_13.png`; const backgroundImageFn = () => join(FE_BASE_PATH, 'emoji', 'sheet_13.png');
const listenerOptions = supportsPassiveEvents ? { passive: true } : false; const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
const categoriesSort = [ const categoriesSort = [
@ -358,7 +359,7 @@ class EmojiPickerDropdown extends React.PureComponent {
<img <img
className={classNames('emojione', { 'pulse-loading': active && loading })} className={classNames('emojione', { 'pulse-loading': active && loading })}
alt='🙂' alt='🙂'
src={`${assetHost}/emoji/1f602.svg`} src={join(FE_BASE_PATH, 'emoji', '1f602.svg')}
/> />
</div> </div>

6
app/soapbox/features/emoji/emoji.js
View File

@ -1,10 +1,10 @@
import unicodeMapping from './emoji_unicode_mapping_light'; import unicodeMapping from './emoji_unicode_mapping_light';
import Trie from 'substring-trie'; import Trie from 'substring-trie';
import { join } from 'path';
import { FE_BASE_PATH } from 'soapbox/build_config';
const trie = new Trie(Object.keys(unicodeMapping)); const trie = new Trie(Object.keys(unicodeMapping));
const assetHost = process.env.CDN_HOST || '';
const emojify = (str, customEmojis = {}, autoplay = false) => { const emojify = (str, customEmojis = {}, autoplay = false) => {
const tagCharsWithoutEmojis = '<&'; const tagCharsWithoutEmojis = '<&';
const tagCharsWithEmojis = Object.keys(customEmojis).length ? '<&:' : '<&'; const tagCharsWithEmojis = Object.keys(customEmojis).length ? '<&:' : '<&';
@ -62,7 +62,7 @@ const emojify = (str, customEmojis = {}, autoplay = false) => {
} else { // matched to unicode emoji } else { // matched to unicode emoji
const { filename, shortCode } = unicodeMapping[match]; const { filename, shortCode } = unicodeMapping[match];
const title = shortCode ? `:${shortCode}:` : ''; const title = shortCode ? `:${shortCode}:` : '';
replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${assetHost}/emoji/${filename}.svg" />`; replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${join(FE_BASE_PATH, 'emoji', `${filename}.svg`)}" />`;
rend = i + match.length; rend = i + match.length;
// If the matched character was followed by VS15 (for selecting text presentation), skip it. // If the matched character was followed by VS15 (for selecting text presentation), skip it.
if (str.codePointAt(rend) === 65038) { if (str.codePointAt(rend) === 65038) {