Replace emoji-mart with emoji-picker-element (#620)

* Change dependencies

* Use emoji-picker-element instead of emoji-mart

* Optimize emoji-picker appeareance and data-source

* Add twemoji font to emoji-picker

* Add missing useEffect dependency

* Add emoji-shortcode map

* Include emoji-data into bundle and remove dynamic fetch

* Rename shortcode-map

* Fix emoji-picker being hidden on second attempt to open it

* Add support for skin-tone short-codes

* Remove whitespace line

* Don't reinitialize the picker on every open

* Fixed linting and test issues

* Update CHANGELOG entry

cypress/integration/toolbar.spec.ts

@@ -275,28 +275,14 @@ describe('Toolbar', () => {
       .should('have.text', '> []')
   })
 
-  describe('emoji', () => {
-    it('picker is show when clicked', () => {
-      cy.get('.emoji-mart')
-        .should('not.exist')
+  describe('emoji-picker', () => {
+    it('show when clicked', () => {
+      cy.get('emoji-picker')
+        .should('not.be.visible')
       cy.get('.fa-smile-o')
         .click()
-      cy.get('.emoji-mart')
-        .should('exist')
-    })
-
-    it('picker is show when clicked', () => {
-      cy.get('.fa-smile-o')
-        .click()
-      cy.get('.emoji-mart')
-        .should('exist')
-      cy.get('.emoji-mart-emoji-native')
-        .first()
-        .click()
-      cy.get('.markdown-body')
-        .should('have.text', '👍')
-      cy.get('.CodeMirror-activeline > .CodeMirror-line > span ')
-        .should('have.text', ':+1:')
+      cy.get('emoji-picker')
+        .should('be.visible')
     })
   })