Port changes from enterprise codebase

shared/editor/lib/emoji.test.ts

@@ -0,0 +1,13 @@
+import { getNameFromEmoji, getEmojiFromName } from "./emoji";
+
+describe("getNameFromEmoji", () => {
+  it("returns the correct shortcode", () => {
+    expect(getNameFromEmoji("🤔")).toBe("thinking_face");
+  });
+});
+
+describe("getEmojiFromName", () => {
+  it("returns the correct native character", () => {
+    expect(getEmojiFromName("thinking_face")).toBe("🤔");
+  });
+});

shared/editor/lib/emoji.ts

@@ -17,11 +17,28 @@ export const snakeCase = (str: string) => str.replace(/(\w)(-)(\w)/g, "$1_$2");
  * A map of emoji shortcode to emoji character. The shortcode is snake cased
  * for backwards compatibility with those already encoded into documents.
  */
-export const nameToEmoji = Object.values((data as EmojiMartData).emojis).reduce(
-  (acc, emoji) => {
-    const convertedId = snakeCase(emoji.id);
-    acc[emojiMartToGemoji[convertedId] ?? convertedId] = emoji.skins[0].native;
-    return acc;
-  },
-  {}
-);
+export const nameToEmoji: Record<string, string> = Object.values(
+  (data as EmojiMartData).emojis
+).reduce((acc, emoji) => {
+  const convertedId = snakeCase(emoji.id);
+  acc[emojiMartToGemoji[convertedId] ?? convertedId] = emoji.skins[0].native;
+  return acc;
+}, {});
+
+/**
+ * Get the emoji character for a given emoji shortcode.
+ *
+ * @param name The emoji shortcode
+ * @returns The emoji character
+ */
+export const getEmojiFromName = (name: string) =>
+  nameToEmoji[name.replace(/:/g, "")];
+
+/**
+ * Get the emoji shortcode for a given emoji character.
+ *
+ * @param emoji The emoji character
+ * @returns The emoji shortcode
+ */
+export const getNameFromEmoji = (emoji: string) =>
+  Object.entries(nameToEmoji).find(([, value]) => value === emoji)?.[0];

shared/editor/nodes/Emoji.tsx

@@ -8,7 +8,7 @@ import {
 import { Command, TextSelection } from "prosemirror-state";
 import { Primitive } from "utility-types";
 import Suggestion from "../extensions/Suggestion";
-import { nameToEmoji } from "../lib/emoji";
+import { getEmojiFromName } from "../lib/emoji";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import { SuggestionsMenuType } from "../plugins/Suggestions";
 import emojiRule from "../rules/emoji";
@@ -71,19 +71,19 @@ export default class Emoji extends Suggestion {
         },
       ],
       toDOM: (node) => {
-        if (nameToEmoji[node.attrs["data-name"]]) {
+        if (getEmojiFromName(node.attrs["data-name"])) {
           return [
             "strong",
             {
               class: `emoji ${node.attrs["data-name"]}`,
               "data-name": node.attrs["data-name"],
             },
-            nameToEmoji[node.attrs["data-name"]],
+            getEmojiFromName(node.attrs["data-name"]),
           ];
         }
         return ["strong", { class: "emoji" }, `:${node.attrs["data-name"]}:`];
       },
-      toPlainText: (node) => nameToEmoji[node.attrs["data-name"]],
+      toPlainText: (node) => getEmojiFromName(node.attrs["data-name"]),
     };
   }