Modifications to allow Emoji-Mart to use custom fallback images, and properly respect provided image and spritesheet URLs

.gitignore

@@ -2,3 +2,4 @@
 coverage
 node_modules
 dist
+nbproject

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 (
     <span class="emoji-mart-emoji" data-emoji-set={props.set}>

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

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,
 }

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}
             />
           </div>
 
@@ -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}
           />
         </button>
       </PureInlineComponent>

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,