RocketChat / RocketChat/EmbeddedChat

Only the last emoji shortname in a message is converted to unicode

Open Beginner friendly
#1,315 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
165
Forks
381
Avg merge
1d 2h
Merged PRs (30d)
1

Description

Description

parseEmoji (packages/react/src/lib/emoji.js) only ever converts a single emoji shortname in a given text. It collects every :shortname: match with a global regex but then picks the last match and runs one String.replace, which replaces the first occurrence of that match string:

export const parseEmoji = (text) => {
  const regx = /:([^:]*):/g;
  const regx_data = text.match(regx);
  if (regx_data) {
    const result = regx_data[regx_data.length - 1];
    const d = emojione.shortnameToUnicode(result);
    if (d !== undefined) text = text.replace(result, d);
  }
  return text;
};

So any text containing more than one shortname is rendered incorrectly.

Steps to reproduce
  1. In the message box, paste :smile: and :heart: (paste, so it arrives in one change rather than being typed char-by-char).
  2. Or send a file with an attachment caption containing two shortnames (the caption is parsed once on submit in AttachmentPreview).
Expected

Both shortnames convert: 😄 and ❤️

Actual

Only the last converts and the first is left as raw text: :smile: and ❤️. With a repeated shortname like :tada: foo :tada:, the first occurrence is converted and the second is left literal (🎉 foo :tada:).

Notes

Incremental typing usually hides this because each shortname is converted as it's completed, but pasting and attachment captions both pass a full multi-shortname string in one call.

emoji-toolkit's shortnameToUnicode() already converts every shortname in a string and leaves unknown shortnames / plain text untouched, so the hand-rolled match/replace is both buggy and unnecessary.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with parseEmoji in packages/react/src/lib/emoji.js, then trace the message-box and AttachmentPreview paths described in the issue to see how complete text is passed in. Verify the change with pasted text and attachment captions containing multiple shortnames, including repeated and unknown names; done means every known shortname converts while plain text remains unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
84/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.