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>

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 => {