chore: update emoji-picker-element, use declarative format (#1840)

package.json

@@ -62,7 +62,7 @@
     "cross-env": "^7.0.2",
     "css-dedoupe": "^0.1.1",
     "css-loader": "^3.6.0",
-    "emoji-picker-element": "^1.0.3",
+    "emoji-picker-element": "^1.1.0",
     "emoji-regex": "^9.0.0",
     "emojibase-data": "^5.0.1",
     "encoding": "^0.1.13",

src/routes/_components/dialog/components/EmojiDialog.html

@@ -5,7 +5,15 @@
   shrinkWidthToFit={true}
   background="var(--main-bg)"
 >
-  <div class="emoji-container" ref:container ></div>
+  <div class="emoji-container">
+    <emoji-picker
+      ref:picker
+      data-source="/emoji-all-en.json"
+      class={darkMode ? 'dark' : 'light'}
+      on:emoji-click="onEmojiSelected(event)"
+      on:keydown="onPickerKeydown(event)"
+    ></emoji-picker>
+  </div>
 </ModalDialog>
 <style>
   :global(emoji-picker) {
@@ -54,7 +62,7 @@
   import { close } from '../helpers/closeDialog'
   import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
   import { isDarkTheme } from '../../../_utils/isDarkTheme'
-  import Picker from 'emoji-picker-element/picker'
+  import 'emoji-picker-element/picker'
   import 'focus-visible'
   import { registerShadowRoot, unregisterShadowRoot } from '../../../_thirdparty/a11y-dialog/a11y-dialog'
   import { doubleRAF } from '../../../_utils/doubleRAF'
@@ -97,23 +105,11 @@
   export default {
     async oncreate () {
       onCreateDialog.call(this)
-      const { customEmoji, darkMode } = this.get()
+      const { customEmoji } = this.get()
       const { enableGrayscale, isUserTouching } = this.store.get()
-      const picker = new Picker({
-        dataSource: '/emoji-all-en.json',
-        customEmoji
-      })
-      picker.classList.add(darkMode ? 'dark' : 'light')
-      picker.addEventListener('emoji-click', this.onEmojiSelected.bind(this))
-      // workaround for shortcuts -- see acceptShortcutEvent() in shortcuts.js
-      picker.addEventListener('keydown', event => {
-        if (event.key === 'Backspace' &&
-        picker.shadowRoot.activeElement &&
-        picker.shadowRoot.activeElement.tagName === 'INPUT') {
-          event.stopPropagation() // prevent our hotkeys from activating when pressing backspace in the input
-        }
-      })
-      // break into shadow DOM to fix grayscale in Welness grayscale mode
+      const { picker } = this.refs
+      picker.customEmoji = customEmoji
+      // break into shadow DOM to fix grayscale in Wellness grayscale mode
       if (enableGrayscale) {
         const style = document.createElement('style')
         style.textContent = '.emoji { filter: grayscale(100%); }'
@@ -124,7 +120,6 @@
       if (process.env.LEGACY && !HTMLElement.prototype.attachShadow.toString().includes('[native code]')) {
         applyShadowDomPolyfill(picker)
       }
-      this.refs.container.appendChild(picker)
       this.on('destroy', () => unregisterShadowRoot(picker.shadowRoot))
       if (!isUserTouching) { // auto focus the input on desktop
         doubleRAF(() => { // triple rAF because a11y tries to focus as well
@@ -151,6 +146,14 @@
         const { realm } = this.get()
         insertEmoji(realm, event.detail.emoji)
         this.close()
+      },
+      onPickerKeydown (event) {
+        // workaround for shortcuts -- see acceptShortcutEvent() in shortcuts.js
+        if (event.key === 'Backspace' &&
+          event.target.shadowRoot.activeElement &&
+          event.target.shadowRoot.activeElement.tagName === 'INPUT') {
+          event.stopPropagation() // prevent our hotkeys from activating when pressing backspace in the input
+        }
       }
     }
   }

yarn.lock

@@ -3693,10 +3693,10 @@ emittery@^0.4.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.4.1.tgz#abe9d3297389ba424ac87e53d1c701962ce7433d"
   integrity sha512-r4eRSeStEGf6M5SKdrQhhLK5bOwOBxQhIE3YSTnZE3GpKiLfnnhE+tPtrJE79+eDJgm39BM6LSoI8SCx4HbwlQ==
 
-emoji-picker-element@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-picker-element/-/emoji-picker-element-1.0.3.tgz#62f945c49fd9e79f5809ba7037cce413f55f712f"
-  integrity sha512-b/RyfC6sjaDulvDptCIgZYFA++utpdBLUh63D8x7smPV4eSYYA1o5rfrgjoy9GKITNDrCLm9Ugbqd8dLz7HcGg==
+emoji-picker-element@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/emoji-picker-element/-/emoji-picker-element-1.1.0.tgz#d07b7aaee15ba307d90cd13d5d97045a1650d808"
+  integrity sha512-0ledPSn6sKqEdHzEbrNIse3iMAlxWM4EO/ZZY5r51eetd1Sc+oDHfHP0UFt2XvmIHBYpTYShDEKsyahu/Nte1A==
 
 emoji-regex@^7.0.1:
   version "7.0.3"