markdown-it-emoji icon indicating copy to clipboard operation
markdown-it-emoji copied to clipboard

Doesn't convert unicode emoji chars

Open seahindeniz opened this issue 5 years ago • 5 comments

Hi

Does the library supports for converting Unicode emojis into custom emojis?

In here, we can see literal wink emoji has transformed but not the Unicode one. It would be very nice if both emojis would look like the same. image

## 😉
## :wink:

seahindeniz avatar Oct 13 '20 18:10 seahindeniz

Could you add more details, what api do you expect?

puzrin avatar Oct 13 '20 23:10 puzrin

Sure @puzrin Here, let's say we have this

import emojiToolkit from "emoji-toolkit";
import MarkdownIt from "markdown-it";
import MDEmoji from "markdown-it-emoji/light";

emojiToolkit.emojiSize = "64";

const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
});

md.use(MDEmoji);

md.renderer.rules.emoji = function (token, idx) {
  return emojiToolkit.toImage(token[idx].content);
};

const str = `## 😉
## :wink:`;

const result = md.render(str);

console.log(result);

Output will be:

<h2 id="%F0%9F%98%89">😉</h2>
<h2 id=""><img class="joypixels" alt="😉" title=":wink:" src="https://cdn.jsdelivr.net/joypixels/assets/6.0/png/unicode/64/1f609.png"/></h2>

Expected output would be like:

<h2 id=""><img class="joypixels" alt="😉" title=":wink:" src="https://cdn.jsdelivr.net/joypixels/assets/6.0/png/unicode/64/1f609.png"/></h2>
<h2 id="-1"><img class="joypixels" alt="😉" title=":wink:" src="https://cdn.jsdelivr.net/joypixels/assets/6.0/png/unicode/64/1f609.png"/></h2>

In short term, md.renderer.rules.emoji should also get triggered when a non-literal(Unicode) emoji was placed in the input string

seahindeniz avatar Oct 28 '20 12:10 seahindeniz

First, you can also override .text rule and apply emojiToolkit.toImage() there, after escape.

Second, it's not clear, how do you plan to define list of suppored unicode chars. Because it may be more wide than :named:

I see some reasonable logic in your suggestion, but still not sure if it can have good solution after more deep investigation.

puzrin avatar Oct 28 '20 12:10 puzrin

I was expecting the same thing and the twemoji package has a parser for this.

This fork introduced the functionality but wasn't published to npm https://github.com/makepanic/markdown-it-unicode-emoji

necolas avatar Dec 21 '20 23:12 necolas

I ran into this same issue, and implemented a very straightforward way to get this behavior. Works great! See my PR above.

carter-thaxton avatar May 13 '24 23:05 carter-thaxton