Return an IMG element instead of a SPAN

[armandofreire]

Hi there guys!

First of all, thanks for the awesome work with emoji-mart! I just realized the component returns something like this for the grinning emoji, for example:

<span class="emoji-mart-emoji"><span style="width: 24px; height: 24px; display: inline-block; background-image: url(&quot;https://unpkg.com/emoji-datasource@2.4.4/sheet_google_64.png&quot;); background-size: 4100%; background-position: 65% 37.5%;"></span></span>

Is there any possiblity to specify what type of element we would receive as return of the <Emoji /> component? For example, transforming the<span><span/></span> to a single <img /> element solved a few problems with my implementation!

Or to make it simpler: is there any way to setup the <Emoji /> to return an <img /> instead of a couple of spans?

EDIT: or the data that will compose the emoji? Like the BG position and stuff?

Thanks a lot guys! <3

[EtienneLem]

or the data that will compose the emoji? Like the BG position and stuff?

Yeah, I was thinking that perhaps the Emoji component could have a render props that could receive all the data needed. When present, the component would call props.render instead of using the default <span> technique. Would that work for you?

[armandofreire]

Oh, it looks great! I currently have a function that returns an <Emoji ... /> and passes it to the render method but in that case would I be able to grab these props of the component before rendering, so I can decide whether to render an <img/> or a <span/>, for example?

Anyways, thank you so much for your attention! :D

[darklightblue]

This will also fix the issue where you can't copy emojis.

You can just add the :code: on the alt so when you highlight it, it is being selected and copied.

[satyapendem]

Hi @EtienneLem ,

I'm using emoji mart in non react I just exposed Emoji and I'm just using Emoji({ html: true, set: 'apple', emoji: emojiName, size: 22 }). From this how I can get the <img /> html. Please help me.

[daiict218]

Can we prioritise it. I'm facing the same issue while using emoji-mart with draft-js

[daiict218]

I can open up a PR for nimble-picker which can behave as renderProps (if some prop is coming) and pass on the data to be rendered to the component

[darklightblue]

If you want to make it so you can copy-paste it, you can actually pass the :code: as a children when generating NimbleEmoji:

In my case:

const emojiComponent= NimbleEmoji({
   emoji,
   html: true,
   data,
   size: 18 // change the line height and font size on css based on this
   set: 'emojione',
   sheetSize: 32.
   children: :code: here
})

then on your css (of course you can change the values here):

.emoji-mart-emoji {
    font-size: 1.3em;
    line-height: 1em; 
}

and it worked like a charm

[daiict218]

Hey @darklightblue, whenever I'll render

const emojiComponent= NimbleEmoji({
   emoji,
   html: true,
   data,
   size: 18 // change the line height and font size on css based on this
   set: 'emojione',
   sheetSize: 32.
   children: :code: here
})

It'll give me a string of image-url being the background image of span as the nimble-picker gives me a string

return `<${Tag.name} style='${style}' aria-label='${label}' ${
      title ? `title='${title}'` : ''
    } class='${className}'>${children || ''}</${Tag.name}>`

And Tag is hardcoded as span in there. I just want the image-url so that I can customise the element that I want to render as emoji

[daiict218]

Well, I guess I'll need the image-url and background position in the sprite where emoji is rendered and the sprite as well 😛

[daiict218]

I tried

const getEmoji = ({ emoji, set, size }) => NimbleEmoji({
  emoji,
  html: true,
  data,
  size,
  set,
  sheetSize: 32,
  children: `<span style="z-index: -1; color: transparent;display: inline-block; transform: translateY(-3px)">${emoji.native}</span>`,
});

return (
    <span dangerouslySetInnerHTML={{ __html: emojiComponent }}></span>
  );

But I'm facing the same issues of cursor not available just after the emoji.

[baldarian]

Are there any news on this ?

It would be also a good solution to pass the tagName as a prop (img, span or whatever) and then it would be used to render the JSX.

What do you think ?

[danilkinkin]

Are there any news on this ?

children in Emoji component solves the problem with copying the line, but does not solve the problem with the selection

[itsdevcoffee]

Yeah, I'd also like a follow-up on this. Currently working on a component with SlateJS to enter in emojis. There are several UX issues with rendering it as a background-image. For instance, there is no text-highlighting and copying.

[EtienneLem]

In latest version, <em-emoji> uses image by default.