diff --git a/.gitignore b/.gitignore index e9e5124cb..d56898684 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ coverage node_modules dist +nbproject \ No newline at end of file diff --git a/packages/emoji-mart/src/components/Emoji/Emoji.tsx b/packages/emoji-mart/src/components/Emoji/Emoji.tsx index 267ab0ef9..2dc1be5b1 100644 --- a/packages/emoji-mart/src/components/Emoji/Emoji.tsx +++ b/packages/emoji-mart/src/components/Emoji/Emoji.tsx @@ -2,7 +2,15 @@ import { Data } from '../../config' import { SearchIndex } from '../../helpers' export default function Emoji(props) { - let { id, skin, emoji } = props + let { + id, + skin, + emoji, + imageURL, + spritesheetURL, + fallbackImageURL, + fallbackSpritesheetURL, + } = props if (props.shortcodes) { const matches = props.shortcodes.match(SearchIndex.SHORTCODES_REGEX) @@ -24,15 +32,13 @@ export default function Emoji(props) { const imageSrc = emojiSkin.src || (props.set != 'native' && !props.spritesheet - ? typeof props.getImageURL === 'function' - ? props.getImageURL(props.set, emojiSkin.unified) - : `https://cdn.jsdelivr.net/npm/emoji-datasource-${props.set}@14.0.0/img/${props.set}/64/${emojiSkin.unified}.png` + ? imageURL !== null + ? imageURL.replace('emojiskin-unified', emojiSkin.unified) + : fallbackImageURL.replace('emojiskin-unified', emojiSkin.unified) : undefined) const spritesheetSrc = - typeof props.getSpritesheetURL === 'function' - ? props.getSpritesheetURL(props.set) - : `https://cdn.jsdelivr.net/npm/emoji-datasource-${props.set}@14.0.0/img/${props.set}/sheets-256/64.png` + spritesheetURL !== null ? spritesheetURL : fallbackSpritesheetURL return ( diff --git a/packages/emoji-mart/src/components/Emoji/EmojiElement.jsx b/packages/emoji-mart/src/components/Emoji/EmojiElement.jsx index 179596688..a707a1274 100644 --- a/packages/emoji-mart/src/components/Emoji/EmojiElement.jsx +++ b/packages/emoji-mart/src/components/Emoji/EmojiElement.jsx @@ -14,6 +14,11 @@ export default class EmojiElement extends HTMLElement { async connectedCallback() { const props = getProps(this.props, EmojiProps, this) + // These aren't needed at this point; including them only bloats the resulting HTML + this.removeAttribute('imageurl') + this.removeAttribute('spritesheeturl') + this.removeAttribute('fallbackimageurl') + this.removeAttribute('fallbackspritesheeturl') props.element = this props.ref = (component) => { this.component = component diff --git a/packages/emoji-mart/src/components/Emoji/EmojiProps.ts b/packages/emoji-mart/src/components/Emoji/EmojiProps.ts index 0f698d71b..fe455d986 100644 --- a/packages/emoji-mart/src/components/Emoji/EmojiProps.ts +++ b/packages/emoji-mart/src/components/Emoji/EmojiProps.ts @@ -20,4 +20,9 @@ export default { // Shared set: PickerProps.set, skin: PickerProps.skin, + // Added to ensure the Emoji object can access these parameters + imageURL: PickerProps.imageURL, + spritesheetURL: PickerProps.spritesheetURL, + fallbackImageURL: PickerProps.fallbackImageURL, + fallbackSpritesheetURL: PickerProps.fallbackSpritesheetURL, } diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx index cced465bd..ee625de44 100644 --- a/packages/emoji-mart/src/components/Picker/Picker.tsx +++ b/packages/emoji-mart/src/components/Picker/Picker.tsx @@ -718,7 +718,10 @@ export default class Picker extends Component { size={this.props.emojiButtonSize} skin={this.state.tempSkin || this.state.skin} spritesheet={true} - getSpritesheetURL={this.props.getSpritesheetURL} + imageURL={this.props.imageURL} + spritesheetURL={this.props.spritesheetURL} + fallbackImageURL={this.props.fallbackImageURL} + fallbackSpritesheetURL={this.props.fallbackSpritesheetURL} /> @@ -793,7 +796,10 @@ export default class Picker extends Component { size={this.props.emojiSize} skin={skin} spritesheet={true} - getSpritesheetURL={this.props.getSpritesheetURL} + imageURL={this.props.imageURL} + spritesheetURL={this.props.spritesheetURL} + fallbackImageURL={this.props.fallbackImageURL} + fallbackSpritesheetURL={this.props.fallbackSpritesheetURL} /> diff --git a/packages/emoji-mart/src/components/Picker/PickerProps.ts b/packages/emoji-mart/src/components/Picker/PickerProps.ts index 5f1a9af77..d868d4665 100644 --- a/packages/emoji-mart/src/components/Picker/PickerProps.ts +++ b/packages/emoji-mart/src/components/Picker/PickerProps.ts @@ -105,10 +105,12 @@ export default { custom: null, data: null, i18n: null, + imageURL: null, + spritesheetURL: null, + fallbackImageURL: null, + fallbackSpritesheetURL: null, // Callbacks - getImageURL: null, - getSpritesheetURL: null, onAddCustomEmoji: null, onClickOutside: null, onEmojiSelect: null,