From 4fa3270f4e2b413843585fa2246bd9258cad2493 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sat, 16 Sep 2023 08:36:22 -0400 Subject: [PATCH] Port changes from enterprise codebase --- shared/editor/lib/emoji.test.ts | 13 +++++++++++++ shared/editor/lib/emoji.ts | 33 +++++++++++++++++++++++++-------- shared/editor/nodes/Emoji.tsx | 8 ++++---- 3 files changed, 42 insertions(+), 12 deletions(-) create mode 100644 shared/editor/lib/emoji.test.ts diff --git a/shared/editor/lib/emoji.test.ts b/shared/editor/lib/emoji.test.ts new file mode 100644 index 000000000..89a78a7e2 --- /dev/null +++ b/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("🤔"); + }); +}); diff --git a/shared/editor/lib/emoji.ts b/shared/editor/lib/emoji.ts index 763cf4523..3dc0addb9 100644 --- a/shared/editor/lib/emoji.ts +++ b/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 = 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]; diff --git a/shared/editor/nodes/Emoji.tsx b/shared/editor/nodes/Emoji.tsx index c9c4fd96f..a4e49b144 100644 --- a/shared/editor/nodes/Emoji.tsx +++ b/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"]), }; }