search

missive / emoji-mart

🏪 One component to pick them all
https://missiveapp.com/open/emoji-mart
MIT License
8.64k stars 831 forks source link

Spritesheet source is not respected for <em-emoji> element #697

Open sora-tech opened 2 years ago

sora-tech commented 2 years ago

Following on from https://github.com/missive/emoji-mart/issues/585

When displaying an emoji using <em-emoji set="twitter" getSpritesheetURL={()=>"sprites.png"} shortcodes=":+1"></em-emoji> the image is always fetched from the cdn.

Expected result is it uses the url provided from the function in the same way the Picker element does.

<div class="flex flex-auto flex-middle flex-center" style="height: 36px; font-size: 36px;">
  <span class="emoji-mart-emoji" data-emoji-set="twitter">
    <span style="display: block; width: 36px; height: 36px; background-image: url(&quot;/emoji/sprites.png&quot;); background-size: 6100% 6100%; background-position: 93.3333% 83.3333%;"></span>
  </span>
</div>

Actual Result:

<em-emoji spritesheet="true" set="twitter" shortcodes=":hugging_face:">
  <span class="emoji-mart-emoji" data-emoji-set="twitter">
    <img alt="珞" src="https://cdn.jsdelivr.net/npm/emoji-datasource-twitter@14.0.0/img/twitter/64/1f917.png" style="height: 1em; width: auto; display: inline-block; position: relative; top: 0.1em;">
  </span>
</em-emoji>

Versions: React: 18.1.0 emoji-mart: 5.2.2 @emoji-mart/react: 1.0.1 @emoji-mart/data: 1.0.6

TranquilMarmot commented 2 years ago

It looks like this is because web components cannot take functions as attributes, but only strings.

https://stackoverflow.com/questions/50865614/can-i-pass-function-as-attribute-to-web-component

So when passed a function em-emoji will always actually get null and this will always be null:

https://github.com/missive/emoji-mart/blob/2054b155cac965bb432ca6b6cd70b51304f8ed7f/packages/emoji-mart/src/config.js#L261-L264

It seems like a good solution would be to just change getSpritesheetURL to just spritesheetURL and have it be a string.

I'm not even sure of the utility of it being a function; you'll always be passing the set attribute to the em-emoji component so you know which set you're using and don't really need it when generating the URL?

TranquilMarmot commented 2 years ago

Also worth noting that this DOES work with the emoji picker that is exported from @emoji-mart/react since it passes the props down from React.

Another solution could be to also export an Emoji component from @emoji-mart/react... at that point the web component isn't fully usable, though 🤔