Update dependency emoji-picker-element to v1.3.0 (#744)

* Update dependency emoji-picker-element to v1.3.0

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

package.json

@@ -40,7 +40,7 @@
         "copy-webpack-plugin": "6.3.0",
         "d3-graphviz": "3.1.0",
         "diff": "4.0.2",
-        "emoji-picker-element": "1.2.2",
+        "emoji-picker-element": "1.3.0",
         "emojibase-data": "5.1.1",
         "eslint-config-react-app": "6.0.0",
         "eslint-config-standard": "16.0.1",

src/components/editor/editor-pane/autocompletion/emoji.ts

@@ -25,6 +25,21 @@ const findEmojiInDatabase = async (emojiIndex: Database, term: string): Promise<
   }
 }
 
+const convertEmojiEventToHint = (emojiData:EmojiClickEventDetail): Hint | undefined => {
+  const shortCode = getEmojiShortCode(emojiData)
+  if (!shortCode) {
+    return undefined
+  }
+  return {
+    text: shortCode,
+    render: (parent: HTMLLIElement) => {
+      const wrapper = document.createElement('div')
+      wrapper.innerHTML = `${getEmojiIcon(emojiData)}   ${shortCode}`
+      parent.appendChild(wrapper)
+    }
+  }
+}
+
 const generateEmojiHints = async (editor: Editor): Promise<Hints | null> => {
   const searchTerm = findWordAtCursor(editor)
   const searchResult = emojiWordRegex.exec(searchTerm.text)
@@ -34,21 +49,20 @@ const generateEmojiHints = async (editor: Editor): Promise<Hints | null> => {
   const suggestionList: Emoji[] = await findEmojiInDatabase(emojiIndex, searchResult[1])
   const cursor = editor.getCursor()
   const skinTone = await emojiIndex.getPreferredSkinTone()
-  const emojiEventDetails: EmojiClickEventDetail[] = suggestionList.map((emoji) => ({
-    emoji,
-    skinTone: skinTone,
-    unicode: ((emoji as NativeEmoji).unicode ? (emoji as NativeEmoji).unicode : undefined),
-    name: emoji.name
-  }))
+  const emojiEventDetails: EmojiClickEventDetail[] = suggestionList
+    .filter(emoji => !!emoji.shortcodes)
+    .map((emoji) => ({
+      emoji,
+      skinTone: skinTone,
+      unicode: ((emoji as NativeEmoji).unicode ? (emoji as NativeEmoji).unicode : undefined),
+      name: emoji.name
+    }))
+
+  const hints = emojiEventDetails
+    .map(convertEmojiEventToHint)
+    .filter(o => !!o) as Hint[]
   return {
-    list: emojiEventDetails.map((emojiData): Hint => ({
-      text: getEmojiShortCode(emojiData),
-      render: (parent: HTMLLIElement) => {
-        const wrapper = document.createElement('div')
-        wrapper.innerHTML = `${getEmojiIcon(emojiData)}   ${getEmojiShortCode(emojiData)}`
-        parent.appendChild(wrapper)
-      }
-    })),
+    list: hints,
     from: Pos(cursor.line, searchTerm.start),
     to: Pos(cursor.line, searchTerm.end)
   }

src/components/editor/editor-pane/tool-bar/utils/emojiUtils.ts

@@ -11,7 +11,10 @@ export const getEmojiIcon = (emoji: EmojiClickEventDetail): string => {
   return ''
 }
 
-export const getEmojiShortCode = (emoji: EmojiClickEventDetail): string => {
+export const getEmojiShortCode = (emoji: EmojiClickEventDetail): string|undefined => {
+  if (!emoji.emoji.shortcodes) {
+    return undefined
+  }
   let skinToneModifier = ''
   if ((emoji.emoji as NativeEmoji).skins && emoji.skinTone !== 0) {
     skinToneModifier = `:skin-tone-${emoji.skinTone as number}:`

src/components/editor/editor-pane/tool-bar/utils/toolbarButtonUtils.ts

@@ -26,7 +26,10 @@ export const addComment = (editor: Editor): void => changeLines(editor, line =>
 export const addTable = (editor: Editor): void => changeLines(editor, line => `${line}\n| # 1  | # 2  | # 3  |\n| ---- | ---- | ---- |\n| Text | Text | Text |`)
 
 export const addEmoji = (emoji: EmojiClickEventDetail, editor: Editor): void => {
-  insertAtCursor(editor, getEmojiShortCode(emoji))
+  const shortCode = getEmojiShortCode(emoji)
+  if (shortCode) {
+    insertAtCursor(editor, shortCode)
+  }
 }
 
 export const wrapTextWith = (editor: Editor, symbol: string, endSymbol?: string): void => {

yarn.lock

@@ -5937,10 +5937,10 @@ emittery@^0.7.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
   integrity sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==
 
-emoji-picker-element@1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/emoji-picker-element/-/emoji-picker-element-1.2.2.tgz#821b2dcdb89183a098dcaa6df10f3dae798b3acb"
-  integrity sha512-iQDMY+7lGYKQRL5tgC51PKWqf1V5uGNDQgP+tR1ga//4BUP+HVs/A70oo53Q4iuzkd1IVaUbJBL3YY/6ky9KQA==
+emoji-picker-element@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/emoji-picker-element/-/emoji-picker-element-1.3.0.tgz#d78deba0ebc4b87731bb2c16f7be00ec458d7647"
+  integrity sha512-Zg+8rtr3vXKuAgBXWpSBghHq+I6o7+35N+25MN3P07pUyk07GXJ6B+gKr8ttUo2LZrLDZVoqKOVMzowkNwwZIg==
 
 emoji-regex@^7.0.1:
   version "7.0.3"