Opti: emoji picker style and fix missing emoji error (#985)

* opti: emoji picker style

* fix: emoji render error

* update emoji regexp

* update emoji.json to latest version

src/muya/lib/contentState/index.js

@@ -180,10 +180,10 @@ class ContentState {
   }
 
   /**
-   * A block in Aganippe present a paragraph(block syntax in GFM) or a line in paragraph.
-   * a line block must in a `p block` or `pre block(frontmatter)` and `p block`'s children must be line blocks.
+   * A block in Mark Text present a paragraph(block syntax in GFM) or a line in paragraph.
+   * a `span` block must in a `p block` or `pre block` and `p block`'s children must be `span` blocks.
    */
-  createBlock (type = 'span', text = '', editable = true) { // span type means it is a line block.
+  createBlock (type = 'span', text = '', editable = true) {
     const key = getUniqueId()
     return {
       key,

src/muya/lib/parser/marked/inlineRules.js

@@ -116,7 +116,7 @@ export const gfm = Object.assign({}, normal, {
   // ------------------------
   // extra
 
-  emoji: /^(:)([a-z_]+?)\1/ // not real GFM but put it in here
+  emoji: /^(:)([a-z_\d+-]+?)\1/ // not real GFM but put it in here
 })
 
 gfm.url = edit(gfm.url, 'i').

src/muya/lib/parser/rules.js

@@ -17,7 +17,7 @@ export const inlineRules = {
   'inline_code': /^(`{1,3})([^`]+?|.{2,})\1/,
   'image': /^(\!\[)(.*?)(\\*)\]\((.*?)(\\*)\)/,
   'link': /^(\[)((?:\[[^\]]*\]|[^\[\]]|\](?=[^\[]*\]))*?)(\\*)\]\((.*?)(\\*)\)/, // can nest
-  'emoji': /^(:)([a-z_]+?)\1/,
+  'emoji': /^(:)([a-z_\d+-]+?)\1/,
   'del': /^(~{2})(?=\S)([\s\S]*?\S)(\\*)\1/, // can nest
   'auto_link': /^(https?:\/\/[^\s]+)(?=\s|$)/,
   'reference_link': /^\[([^\]]+?)(\\*)\](?:\[([^\]]*?)(\\*)\])?/,

src/muya/lib/ui/emojiPicker/index.css

@@ -1,21 +1,21 @@
 .ag-emoji-picker {
-  width: 324px;
-  max-height: 307px;
+  width: 348px;
+  max-height: 350px;
   overflow-y: auto;
 }
 
 .ag-emoji-picker .title {
-  color: var(--editorColor);
-  line-height: 120%;
-  font-size: 11px;
-  padding: 10px 14px 12px 14px;
+  color: var(--editorColor80);
+  line-height: 1.15;
+  font-size: 12px;
+  padding: 10px 12px 12px 12px;
   display: flex;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 600;
   position: sticky;
   top: 0;
-  background: var(--floatBgColor);
+  background: var(--itemBgColor);
   z-index: 1001;
 }
 
@@ -23,18 +23,19 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  padding: 0 15px;
+  padding: 0 12px;
 }
 
 .ag-emoji-picker section .emoji-wrapper .item {
-  width: 42px;
-  height: 42px;
+  width: 36px;
+  height: 36px;
   flex-shrink: 0;
   cursor: pointer;
   display: flex;
   justify-content: space-around;
   align-items: center;
   box-sizing: border-box;
+  border-radius: 50%;
 }
 
 .ag-emoji-picker:hover .active {
@@ -47,13 +48,13 @@
 }
 
 .ag-emoji-picker section .emoji-wrapper .item span {
-  width: 42px;
-  height: 42px;
+  width: 24px;
+  height: 24px;
   display: block;
-  font-size: 26px;
+  font-size: 24px;
   text-align: center;
-  line-height: 42px;
-  color: var(--editorColor);
+  line-height: 1.15;
+  color: #000;
   transition: transform .2s ease-in;
   transform-origin: center;
 }

src/muya/lib/ui/emojis/emojisJson.json

@@ -1644,7 +1644,11 @@
     "aliases": [
       "policewoman"
     ],
-    "tags": []
+    "tags": [
+      "police",
+      "law",
+      "cop"
+    ]
   },
   {
     "emoji": "👮",
@@ -1996,7 +2000,7 @@
     "tags": []
   },
   {
-    "emoji": "👩‍✈",
+    "emoji": "👩‍✈️",
     "description": "woman pilot",
     "category": "People",
     "aliases": [
@@ -2005,7 +2009,7 @@
     "tags": []
   },
   {
-    "emoji": "👨‍✈",
+    "emoji": "👨‍✈️",
     "description": "man pilot",
     "category": "People",
     "aliases": [
@@ -2036,7 +2040,7 @@
     ]
   },
   {
-    "emoji": "👩‍⚖",
+    "emoji": "👩‍⚖️",
     "description": "woman judge",
     "category": "People",
     "aliases": [
@@ -2047,7 +2051,7 @@
     ]
   },
   {
-    "emoji": "👨‍⚖",
+    "emoji": "👨‍⚖️",
     "description": "man judge",
     "category": "People",
     "aliases": [

src/muya/lib/ui/emojis/index.js

@@ -5,7 +5,6 @@ import { CLASS_OR_ID } from '../../config'
 const emojisForSearch = {}
 
 for (const emoji of emojis) {
-  if (emoji.emoji.length > 2) continue
   const newEmoji = Object.assign({}, emoji, { search: [...emoji.aliases, ...emoji.tags].join(' ') })
   if (emojisForSearch[newEmoji.category]) {
     emojisForSearch[newEmoji.category].push(newEmoji)