Add a custom Emoji shortname implementation

In some custom integrations you may want to use some keyboard shortcuts to allow quick emoji insertion.

CTLive Agent SDK offers an object hash that contains all the Unicode 11 Emoji shortnames and symbols.

LIVECHATSDK.SDK.getEmojiShortcut().then(
  function(EmojiShortcutClass) {
    // Deep copy into new object
    window.Emoji_by_ShortName = jQuery.extend(true, {}, EmojiShortcutClass);
  }
);

Download the complete JSON Emoji shortnames and shortcuts file by clicking on the following box:

Using a regular expression pattern we can define a special sequence of characters (like : shortname:) to search and replace with the equivalent emoji stored in the LIVECHATSDK.LIVECHAT.emojiShortNames hash.

The following code search for any shortname that matches the last typed word with preceding and following “:” character. Example :grinning_face:

jQuery("#myTextArea").on("change keyup", 
  function() {
    var text = jQuery("#myTextArea").val();
    text = text.replace(
      // Regular Expression: search for :shortname: or shortcut (':-)', ':)', ...)
      new RegExp("(\\:\\w+\\:)$|(.{2,3}\\ )$", "gi"),
      function(match) {
        console.log("[CTLIVE] Emoji match", match);
        if (typeof Emoji_by_ShortName[ match.replace(/\:/g, "") ] !== "undefined") {
          return Emoji_by_ShortName[ match.replace(/\:/g, "") ];
        } else if (typeof Emoji_by_ShortName[ match.trim() ] !== "undefined") {
          return " " + Emoji_by_ShortName[ match.trim() ] + " ";
        } else {
          return match;
        }
      }
    );
    jQuery("#myTextArea").val( text );
  }
);