sforkowany z mirror/soapbox
Merge branch 'twemoji-revert' into 'develop'
Webpack: move Twemoji icons back to CopyPlugin Closes #740 See merge request soapbox-pub/soapbox-fe!746v1.x.x
Alex Gleason
commit
9b40d1a602
|
|
@ -20,11 +20,7 @@ exports[`<AutosuggestEmoji /> renders native emoji 1`] = `
|
|||
<img
|
||||
alt="💙"
|
||||
className="emojione"
|
||||
src={
|
||||
Object {
|
||||
"process": [Function],
|
||||
}
|
||||
}
|
||||
src="/packs/emoji/1f499.svg"
|
||||
/>
|
||||
:foobar:
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
|
|||
className="emoji-react-selector__emoji"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"👍\\" title=\\":+1:\\" src=\\"[object Object]\\" />",
|
||||
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"👍\\" title=\\":+1:\\" src=\\"/packs/emoji/1f44d.svg\\" />",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
|
|
@ -26,7 +26,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
|
|||
className="emoji-react-selector__emoji"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"[object Object]\\" />",
|
||||
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"/packs/emoji/2764.svg\\" />",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
|
|
@ -37,7 +37,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
|
|||
className="emoji-react-selector__emoji"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😆\\" title=\\":laughing:\\" src=\\"[object Object]\\" />",
|
||||
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😆\\" title=\\":laughing:\\" src=\\"/packs/emoji/1f606.svg\\" />",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
|
|
@ -48,7 +48,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
|
|||
className="emoji-react-selector__emoji"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😮\\" title=\\":open_mouth:\\" src=\\"[object Object]\\" />",
|
||||
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😮\\" title=\\":open_mouth:\\" src=\\"/packs/emoji/1f62e.svg\\" />",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
|
|
@ -59,7 +59,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
|
|||
className="emoji-react-selector__emoji"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😢\\" title=\\":cry:\\" src=\\"[object Object]\\" />",
|
||||
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😢\\" title=\\":cry:\\" src=\\"/packs/emoji/1f622.svg\\" />",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
|
|
@ -70,7 +70,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
|
|||
className="emoji-react-selector__emoji"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😩\\" title=\\":weary:\\" src=\\"[object Object]\\" />",
|
||||
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😩\\" title=\\":weary:\\" src=\\"/packs/emoji/1f629.svg\\" />",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
|
||||
import { joinPublicPath } from 'soapbox/utils/static';
|
||||
|
||||
export default class AutosuggestEmoji extends React.PureComponent {
|
||||
|
||||
|
|
@ -21,7 +22,7 @@ export default class AutosuggestEmoji extends React.PureComponent {
|
|||
return null;
|
||||
}
|
||||
|
||||
url = require(`twemoji/assets/svg/${mapping.filename}.svg`);
|
||||
url = joinPublicPath(`packs/emoji/${mapping.filename}.svg`);
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import classNames from 'classnames';
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { supportsPassiveEvents } from 'detect-passive-events';
|
||||
import { buildCustomEmojis } from '../../emoji/emoji';
|
||||
import { joinPublicPath } from 'soapbox/utils/static';
|
||||
|
||||
const messages = defineMessages({
|
||||
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
|
||||
|
|
@ -357,7 +358,7 @@ class EmojiPickerDropdown extends React.PureComponent {
|
|||
<img
|
||||
className={classNames('emojione', { 'pulse-loading': active && loading })}
|
||||
alt='😂'
|
||||
src={require('twemoji/assets/svg/1f602.svg')}
|
||||
src={joinPublicPath('packs/emoji/1f602.svg')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,23 +22,23 @@ describe('emoji', () => {
|
|||
|
||||
it('does unicode', () => {
|
||||
expect(emojify('\uD83D\uDC69\u200D\uD83D\uDC69\u200D\uD83D\uDC66\u200D\uD83D\uDC66')).toEqual(
|
||||
'<img draggable="false" class="emojione" alt="👩👩👦👦" title=":woman-woman-boy-boy:" src="[object Object]" />');
|
||||
'<img draggable="false" class="emojione" alt="👩👩👦👦" title=":woman-woman-boy-boy:" src="/packs/emoji/1f469-200d-1f469-200d-1f466-200d-1f466.svg" />');
|
||||
expect(emojify('👨👩👧👧')).toEqual(
|
||||
'<img draggable="false" class="emojione" alt="👨👩👧👧" title=":man-woman-girl-girl:" src="[object Object]" />');
|
||||
expect(emojify('👩👩👦')).toEqual('<img draggable="false" class="emojione" alt="👩👩👦" title=":woman-woman-boy:" src="[object Object]" />');
|
||||
'<img draggable="false" class="emojione" alt="👨👩👧👧" title=":man-woman-girl-girl:" src="/packs/emoji/1f468-200d-1f469-200d-1f467-200d-1f467.svg" />');
|
||||
expect(emojify('👩👩👦')).toEqual('<img draggable="false" class="emojione" alt="👩👩👦" title=":woman-woman-boy:" src="/packs/emoji/1f469-200d-1f469-200d-1f466.svg" />');
|
||||
expect(emojify('\u2757')).toEqual(
|
||||
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="[object Object]" />');
|
||||
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/packs/emoji/2757.svg" />');
|
||||
});
|
||||
|
||||
it('does multiple unicode', () => {
|
||||
expect(emojify('\u2757 #\uFE0F\u20E3')).toEqual(
|
||||
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="[object Object]" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="[object Object]" />');
|
||||
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/packs/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/packs/emoji/23-20e3.svg" />');
|
||||
expect(emojify('\u2757#\uFE0F\u20E3')).toEqual(
|
||||
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="[object Object]" /><img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="[object Object]" />');
|
||||
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/packs/emoji/2757.svg" /><img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/packs/emoji/23-20e3.svg" />');
|
||||
expect(emojify('\u2757 #\uFE0F\u20E3 \u2757')).toEqual(
|
||||
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="[object Object]" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="[object Object]" /> <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="[object Object]" />');
|
||||
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/packs/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/packs/emoji/23-20e3.svg" /> <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/packs/emoji/2757.svg" />');
|
||||
expect(emojify('foo \u2757 #\uFE0F\u20E3 bar')).toEqual(
|
||||
'foo <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="[object Object]" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="[object Object]" /> bar');
|
||||
'foo <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/packs/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/packs/emoji/23-20e3.svg" /> bar');
|
||||
});
|
||||
|
||||
it('ignores unicode inside of tags', () => {
|
||||
|
|
@ -46,16 +46,16 @@ describe('emoji', () => {
|
|||
});
|
||||
|
||||
it('does multiple emoji properly (issue 5188)', () => {
|
||||
expect(emojify('👌🌈💕')).toEqual('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="[object Object]" /><img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="[object Object]" /><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="[object Object]" />');
|
||||
expect(emojify('👌 🌈 💕')).toEqual('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="[object Object]" /> <img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="[object Object]" /> <img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="[object Object]" />');
|
||||
expect(emojify('👌🌈💕')).toEqual('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="/packs/emoji/1f44c.svg" /><img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="/packs/emoji/1f308.svg" /><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/packs/emoji/1f495.svg" />');
|
||||
expect(emojify('👌 🌈 💕')).toEqual('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="/packs/emoji/1f44c.svg" /> <img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="/packs/emoji/1f308.svg" /> <img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/packs/emoji/1f495.svg" />');
|
||||
});
|
||||
|
||||
it('does an emoji that has no shortcode', () => {
|
||||
expect(emojify('👁🗨')).toEqual('<img draggable="false" class="emojione" alt="👁🗨" title="" src="[object Object]" />');
|
||||
expect(emojify('👁🗨')).toEqual('<img draggable="false" class="emojione" alt="👁🗨" title="" src="/packs/emoji/1f441-200d-1f5e8.svg" />');
|
||||
});
|
||||
|
||||
it('does an emoji whose filename is irregular', () => {
|
||||
expect(emojify('↙️')).toEqual('<img draggable="false" class="emojione" alt="↙️" title=":arrow_lower_left:" src="[object Object]" />');
|
||||
expect(emojify('↙️')).toEqual('<img draggable="false" class="emojione" alt="↙️" title=":arrow_lower_left:" src="/packs/emoji/2199.svg" />');
|
||||
});
|
||||
|
||||
it('avoid emojifying on invisible text', () => {
|
||||
|
|
@ -67,16 +67,16 @@ describe('emoji', () => {
|
|||
|
||||
it('avoid emojifying on invisible text with nested tags', () => {
|
||||
expect(emojify('<span class="invisible">😄<span class="foo">bar</span>😴</span>😇'))
|
||||
.toEqual('<span class="invisible">😄<span class="foo">bar</span>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="[object Object]" />');
|
||||
.toEqual('<span class="invisible">😄<span class="foo">bar</span>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/packs/emoji/1f607.svg" />');
|
||||
expect(emojify('<span class="invisible">😄<span class="invisible">😕</span>😴</span>😇'))
|
||||
.toEqual('<span class="invisible">😄<span class="invisible">😕</span>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="[object Object]" />');
|
||||
.toEqual('<span class="invisible">😄<span class="invisible">😕</span>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/packs/emoji/1f607.svg" />');
|
||||
expect(emojify('<span class="invisible">😄<br/>😴</span>😇'))
|
||||
.toEqual('<span class="invisible">😄<br/>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="[object Object]" />');
|
||||
.toEqual('<span class="invisible">😄<br/>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/packs/emoji/1f607.svg" />');
|
||||
});
|
||||
|
||||
it('skips the textual presentation VS15 character', () => {
|
||||
expect(emojify('✴︎')) // This is U+2734 EIGHT POINTED BLACK STAR then U+FE0E VARIATION SELECTOR-15
|
||||
.toEqual('<img draggable="false" class="emojione" alt="✴" title=":eight_pointed_black_star:" src="[object Object]" />');
|
||||
.toEqual('<img draggable="false" class="emojione" alt="✴" title=":eight_pointed_black_star:" src="/packs/emoji/2734.svg" />');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import unicodeMapping from './emoji_unicode_mapping_light';
|
||||
import Trie from 'substring-trie';
|
||||
import { joinPublicPath } from 'soapbox/utils/static';
|
||||
|
||||
const trie = new Trie(Object.keys(unicodeMapping));
|
||||
|
||||
|
|
@ -60,7 +61,7 @@ const emojify = (str, customEmojis = {}, autoplay = false) => {
|
|||
} else { // matched to unicode emoji
|
||||
const { filename, shortCode } = unicodeMapping[match];
|
||||
const title = shortCode ? `:${shortCode}:` : '';
|
||||
const src = require(`twemoji/assets/svg/${filename}.svg`);
|
||||
const src = joinPublicPath(`packs/emoji/${filename}.svg`);
|
||||
replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${src}" />`;
|
||||
rend = i + match.length;
|
||||
// If the matched character was followed by VS15 (for selecting text presentation), skip it.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
/**
|
||||
* Static: functions related to static files.
|
||||
* @module soapbox/utils/static
|
||||
*/
|
||||
|
||||
import { join } from 'path';
|
||||
import { FE_SUBDIRECTORY } from 'soapbox/build_config';
|
||||
|
||||
export const joinPublicPath = (...paths) => {
|
||||
return join(FE_SUBDIRECTORY, ...paths);
|
||||
};
|
||||
|
|
@ -1,11 +1,15 @@
|
|||
// Note: You must restart bin/webpack-dev-server for changes to take effect
|
||||
console.log('Running in production mode'); // eslint-disable-line no-console
|
||||
|
||||
const { join } = require('path');
|
||||
const { merge } = require('webpack-merge');
|
||||
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
|
||||
const OfflinePlugin = require('@lcdp/offline-plugin');
|
||||
const sharedConfig = require('./shared');
|
||||
|
||||
const { FE_SUBDIRECTORY } = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
|
||||
const joinPublicPath = (...paths) => join(FE_SUBDIRECTORY, ...paths);
|
||||
|
||||
module.exports = merge(sharedConfig, {
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
|
|
@ -26,28 +30,32 @@ module.exports = merge(sharedConfig, {
|
|||
caches: {
|
||||
main: [':rest:'],
|
||||
additional: [
|
||||
'packs/emoji/1f602-*.svg', // used for emoji picker dropdown
|
||||
'packs/images/32-*.png', // used in emoji-mart
|
||||
|
||||
// Default emoji reacts
|
||||
'packs/emoji/1f44d-*.svg', // Thumbs up
|
||||
'packs/emoji/2764-*.svg', // Heart
|
||||
'packs/emoji/1f606-*.svg', // Laughing
|
||||
'packs/emoji/1f62e-*.svg', // Surprised
|
||||
'packs/emoji/1f622-*.svg', // Crying
|
||||
'packs/emoji/1f629-*.svg', // Weary
|
||||
'packs/emoji/1f621-*.svg', // Angry (Spinster)
|
||||
':externals:',
|
||||
'packs/images/32-*.png', // used in emoji-mart
|
||||
],
|
||||
optional: [
|
||||
'**/locale_*.js', // don't fetch every locale; the user only needs one
|
||||
'**/*_polyfills-*.js', // the user may not need polyfills
|
||||
'**/*.chunk.js', // only cache chunks when needed
|
||||
'**/*.chunk.css',
|
||||
'**/*.woff2', // the user may have system-fonts enabled
|
||||
// images can be cached on-demand
|
||||
'**/*.png',
|
||||
'**/*.svg',
|
||||
],
|
||||
},
|
||||
externals: [
|
||||
joinPublicPath('packs/emoji/1f602.svg'), // used for emoji picker dropdown
|
||||
|
||||
// Default emoji reacts
|
||||
joinPublicPath('packs/emoji/1f44d.svg'), // Thumbs up
|
||||
joinPublicPath('packs/emoji/2764.svg'), // Heart
|
||||
joinPublicPath('packs/emoji/1f606.svg'), // Laughing
|
||||
joinPublicPath('packs/emoji/1f62e.svg'), // Surprised
|
||||
joinPublicPath('packs/emoji/1f622.svg'), // Crying
|
||||
joinPublicPath('packs/emoji/1f629.svg'), // Weary
|
||||
joinPublicPath('packs/emoji/1f621.svg'), // Angry (Spinster)
|
||||
],
|
||||
excludes: [
|
||||
'**/*.gz',
|
||||
'**/*.map',
|
||||
|
|
@ -69,12 +77,16 @@ module.exports = merge(sharedConfig, {
|
|||
// https://github.com/bromite/bromite/issues/1294
|
||||
'index.html',
|
||||
'404.html',
|
||||
'assets-manifest.json',
|
||||
// It would be nice to serve these, but they bloat up sw.js
|
||||
'packs/images/crypto/**/*',
|
||||
'packs/emoji/**/*',
|
||||
],
|
||||
// ServiceWorker: {
|
||||
// entry: join(__dirname, '../app/soapbox/service_worker/entry.js'),
|
||||
// cacheName: 'soapbox',
|
||||
// minify: true,
|
||||
// },
|
||||
ServiceWorker: {
|
||||
// entry: join(__dirname, '../app/soapbox/service_worker/entry.js'),
|
||||
// cacheName: 'soapbox',
|
||||
minify: true,
|
||||
},
|
||||
safeToUseOptionalCaches: true,
|
||||
}),
|
||||
],
|
||||
|
|
|
|||
|
|
@ -88,6 +88,9 @@ module.exports = {
|
|||
new HtmlWebpackHarddiskPlugin(),
|
||||
new CopyPlugin({
|
||||
patterns: [{
|
||||
from: join(__dirname, '../node_modules/twemoji/assets/svg'),
|
||||
to: join(output.path, 'packs/emoji'),
|
||||
}, {
|
||||
from: join(__dirname, '../app/instance'),
|
||||
to: join(output.path, 'instance'),
|
||||
}],
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue