fix: #769 (#787)

* style opti

* fix: #769

* remove debug code

* rewrite set inline emoji.

* fix padding error in emoji

* remove padding of emoji picker

src/muya/lib/assets/styles/index.css

@@ -543,7 +543,7 @@ span.ag-emoji-marked-text {
 }
 
 .ag-emoji-marked-text[data-emoji] {
-  margin-left: 1.7em;
+  margin-left: 1.2em;
 }
 
 .ag-hide.ag-emoji-marked-text[data-emoji],
@@ -557,8 +557,8 @@ span.ag-emoji-marked-text {
   position: absolute;
   content: attr(data-emoji);
   color: var(--editorColor);
-  top: -6px;
-  left: -1.1em;
+  top: -2px;
+  left: -22px;
   font-size: 1em;
 }
 

src/muya/lib/contentState/emojiCtrl.js

@@ -0,0 +1,39 @@
+import { tokenizer, generator } from '../parser/parse'
+
+const emojiCtrl = ContentState => {
+  ContentState.prototype.setEmoji = function (item) {
+    let { key, offset } = this.cursor.start
+    const startBlock = this.getBlock(key)
+    const { text } = startBlock
+    const tokens = tokenizer(text)
+    let delta = 0
+
+    const findEmojiToken = (tokens, offset) => {
+      for (const token of tokens) {
+        const { start, end } = token.range
+        if (offset >= start && offset <= end) {
+          delta = end - offset
+          return token.children && Array.isArray(token.children) && token.children.length
+            ? findEmojiToken(token.children, offset)
+            : token 
+        }
+      }
+    }
+
+    const token = findEmojiToken(tokens, offset)
+    if (token && token.type === 'emoji') {
+      const emojiText = item.aliases[0]
+      offset += delta + emojiText.length - token.content.length
+      token.content = emojiText
+      token.raw = `:${emojiText}:`
+      startBlock.text = generator(tokens)
+      this.cursor = {
+        start: { key, offset },
+        end: { key, offset }
+      }
+      return this.partialRender()
+    }
+  }
+}
+
+export default emojiCtrl

src/muya/lib/contentState/index.js

@@ -23,6 +23,7 @@ import htmlBlockCtrl from './htmlBlock'
 import clickCtrl from './clickCtrl'
 import inputCtrl from './inputCtrl'
 import tocCtrl from './tocCtrl'
+import emojiCtrl from './emojiCtrl'
 import importMarkdown from '../utils/importMarkdown'
 
 const prototypes = [
@@ -46,6 +47,7 @@ const prototypes = [
   clickCtrl,
   inputCtrl,
   tocCtrl,
+  emojiCtrl,
   importMarkdown
 ]
 

src/muya/lib/eventHandler/keyboard.js

@@ -156,6 +156,7 @@ class Keyboard {
       const node = selection.getSelectionStart()
       const paragraph = findNearestParagraph(node)
       const emojiNode = checkEditEmoji(node)
+
       if (
         paragraph &&
         emojiNode &&

src/muya/lib/selection/index.js

@@ -434,7 +434,6 @@ class Selection {
     let { node: endNode, offset: endOffset } = getNodeAndOffset(endParagraph, end.offset)
     startOffset = Math.min(startOffset, startNode.textContent.length)
     endOffset = Math.min(endOffset, endNode.textContent.length)
-
     this.select(startNode, startOffset, endNode, endOffset)
   }
 

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

@@ -1,7 +1,6 @@
 .ag-emoji-picker {
   width: 324px;
   max-height: 307px;
-  padding: 10px 0;
   overflow-y: auto;
 }
 

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

@@ -1,5 +1,5 @@
 import BaseScrollFloat from '../baseScrollFloat'
-import Emoji, { setInlineEmoji } from '../emojis'
+import Emoji from '../emojis'
 import { patch, h } from '../../parser/render/snabbdom'
 import './index.css'
 
@@ -40,7 +40,7 @@ class EmojiPicker extends BaseScrollFloat {
         const renderObj = this.emoji.search(text)
         this.renderObj = renderObj
         const cb = item => {
-          setInlineEmoji(emojiNode, item)
+          this.muya.contentState.setEmoji(item)
         }
         if (this.renderArray.length) {
           this.show(reference, cb)

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

@@ -1,7 +1,6 @@
 import { filter } from 'fuzzaldrin'
 import emojis from './emojisJson'
 import { CLASS_OR_ID } from '../../config'
-import selection from '../../selection'
 
 const emojisForSearch = {}
 
@@ -35,12 +34,6 @@ export const checkEditEmoji = node => {
   return false
 }
 
-export const setInlineEmoji = (node, emoji) => {
-  node.textContent = `${emoji.aliases[0]}`
-  node.setAttribute('data-emoji', emoji.emoji)
-  selection.moveCursor(node.nextElementSibling, 1)
-}
-
 class Emoji {
   constructor () {
     this.cache = new Map()

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

@@ -46,6 +46,7 @@
   text-align: center;
   display: flex;
   justify-content: space-around;
+  color: var(--editorColor);
 }
 .ag-table-picker .footer input {
   color: var(--editorColor);

src/muya/themes/light.css

@@ -130,8 +130,7 @@ pre.ag-paragraph {
 }
 
 .v-modal {
-  backdrop-filter: blur(5px);
-  background: var(--floatBorderColor);
+  background: var(--editorColor30);
 }
 
 body>*:first-child {