Inconvenient emoji ascii replacement

[felpsio]

The regex that identifies ascii emojis and replaces them by the actual emojis should check for whitespace before and after the match. Or it may add inconvenient emojis in some cases. Example:

"chrome://settings/content/notifications" is translated to "chrome😕/settings/content/notifications"

Suggestion:

only apply the ascii conversion when:

• the emoji is between "start of line" and "end of line"
• the emoji is between whitespace

[felpsio]

To solve my user case I updated the asciiRegex to:

(?: |^)(${edgeCases})?(${names}|:)([${allowedAliasCharacters}]*:)?(?: |$)

I basically added (?: |^) and (?: |$)

This forces the regex to make a emoji substitution only when the ascii match is separated by a whitespace or start/end of line

[enzoferey]

Hey @felpsio, chrome:// URLs are indeed edge cases. I prepared the regex to support those kind of issues via the edgeCases variable that be found here:

react-emoji-render/src/aliasRegex.js

Lines 7 to 15 in e959d6d

	const startOfURL = "https?\\S*";
	const names = flatten(
	Object.keys(asciiAliases).map(name => {
	return asciiAliases[name].map(escapeStringToBeUsedInRegExp);
	})
	).sort().reverse().join("|"); // reverse sort for most specific match
	const edgeCases = [startOfURL].join("|");

In the same way we have startOfURL, we could have startOfChromeURL and cover that.

[felpsio]

hey @enzoferey, but this can help on many other cases.

For example, instead of chrome: safari, brave, firefox, file, base64 etc.

So it's probably safer require a whitespace or start/end of line to avoid all these cases.

Still going to work on these cases: :), :), :). But it won't work on <any string without whitespace>:)<any string without whitespace>

[enzoferey]

Right, the design decisions for this library was to support emojis without required whitespaces, hence going for this solution. I'm happy to add as many edge cases as needed.

Note that you can always escape certain parts of a string, transform the rest of the string with this library, and then concatenate back.

[felpsio]

Thanks @enzoferey.

You're right. My use case may not suit the goal of this lib. So for now, I'll probably keep my forked version and bring the updates from the main version manually as they update.

But I suggest then adding these edge cases: brave://, chrome:// and file://.

Feel free to close my issue then :).

If somebody else needs to add whitespaces as a requirement, you can use my adapted version: https://github.com/felpsio/react-emoji-render or just fork and apply the same regex change

[enzoferey]

As you prefer @felpsio, happy to accept PRs for such edge cases 👍🏻

[nicolasvidelac]

Hi @felpsio, I encountered an issue really close to this one so i didn't feel like opening a new issue was necessary.
If i have the text: "https://somexample.com/tommoor/react-emoji-render/issues/96", it will not add an emoji to it.

But, if i have "Https" instead of "https", it will, so "Https://somexample.com/issues/96" becomes "Https😕/somexample.com/issues/96".

So, the case should not matter when checking if it's an exception or not.

[felpsio]

@nicolasvidelac maybe for your case you can just transform the string in lower case. Https is not an usual way for URLs, so change the regex to accept the upper case H may cause some undesired side effects or other edge cases.