Emoji

在Draftjs plugins中，emoji plugin是基于EmojiOne这个库。本项目中是使用的本地图片，通过中文含义与图片一一映射实现。因此，之前emoji在输入框是显示对应的文本。

_emojiMap为存储emoji id和中文名称映射关系的对象，

onAddEmoji为添加emoji表情到输入框的方法，根据id返回[name]；改为getEmojiById直接返回对于html字符串

// 添加emoji对应文本
  appendEmoji(emojiText) {
    console.log('emoji', emojiText);
    const editorState = this.state.editorState;
    const selection = editorState.getSelection();
    const contentState = editorState.getCurrentContent();
    const ncs = Modifier.insertText(contentState, selection, emojiText);
    const newEditorState = EditorState.push(editorState, ncs, 'insert-fragment');
    this.onChange(newEditorState);
  }

通过Modifier的insertText方法将emoji文本插入输入框，但到这里效果也和之前一样，只是显示了表情对应的中文，如[开心]。

Draftjs提供了修饰器Decorators这个概念，根据自定义正则去扫描文本快中的内容，然后根据自定义的样式去渲染，可用来高亮文本等。

// 针对emoji的修饰器
const findWithRegex = (regex, contentBlock, callback) => {
  const text = contentBlock.getText();
  let matchArr;
  let start;
  while ((matchArr = regex.exec(text)) !== null) {
    start = matchArr.index;
    callback(start, start + matchArr[0].length);
  }
};

const draftDecorator = new CompositeDecorator([
  {
    strategy: (contentBlock, callback, contentState) => {
      const emojiRegex = /\[[^\[\]]+\]/g;
      findWithRegex(emojiRegex, contentBlock, callback);
    },
    component: (props) => {
      const text = props.decoratedText.trim();
      console.log('decorated text', text);
      return <span data-offset-key={props.offsetKey}>{props.children}</span>;
    },
  },
]);

• 坑1：实际将改decorators传进去报错了，因为Editor组件是引用的draft-js-plugins-editor，这是它们的一个bug，issue里给出的解决方案是：

  import { CompositeDecorator } from 'draft-js';
  import MultiDecorator from 'draft-js-plugins-editor/lib/Editor/MultiDecorator';
  
  ....
  const createDecorator = (...) => {
      const decorators = ...;
      return new MultiDecorator([new CompositeDecorator(decorators)]);
  };
  

  ​

• 坑2：decorators虽然帮助扫描文本中的表情字符并替换了样式，但替换后不会自动Focus，且无法作为一个字符去选择，不同于标准emoji的做法，都有对应的unicode...

• 坑3：当选中一段文本再调用Modifier.insertText()方法去插入文本时，会报Target range must be collapsed for insertText错误；

• 坑4：自定义的decorators注册到输入框后，与mention插件冲突，导致mention失效...

  issue: https://github.com/draft-js-plugins/draft-js-plugins/issues/395

  const customDecorators = [
    {
      strategy: findLinkEntities,
      component: Link,
    },
  ];
  
  // Editor accepts a prop called decorators. 
  const MyEditor = ({ editorState, onChange }) => (
    <Editor
      editorState={editorState}
      onChange={onChange}
      decorators={customDecorators}
      plugins={[plugin1, plugin2]}
    />
  );
  

emoji优化

1. 因decorator只是替换了block中对应文本的样式，实际仍未对应字符的占位，而项目目前采用[xx]的格式表示一个emoji表情，可以考虑再设计一层map映射，对应一个标准emoji的unicode，这样在插入到输入框时，emoji对应的文本只占一个字符。

   /**
    * 映射的emoji unicode范围为\u1f600 - \u1f64f
    */
   module.exports.getEmojiUnicode = function(id) {
     const i = parseInt(id);
     const emojiInt = 0x1f600 + i - 1;
     const code16 = emojiInt.toString(16);
     const emojiUnicode = unescape('%u' + code16);
     return emojiUnicode;
   };
   
   module.exports.getIdByUnicode = function(unicode) {
     const codeStr = escape(unicode);
     const code16 = codeStr.split('%u')[1];
     const id = parseInt('0x'+ code16) - parseInt(0x1f600);
     return id + 1;
   };
   

   首先在网上查找了unicode中emoji主要存在的范围，这里限定了\u1f600 - \u1f64f大概80个unicode，

   对16进制int进行计算（0x），再通过toString(16)转为16进制的字符串。一开始直接用'\u'.concat(code16)的方法会报错，因为\u是转义符，不能直接作为字符串使用。其对应%u的反转义结果；

2. 参考企业微信PC的做法，在检测到输入框有emoji时，改变了行高，字体大小不变，行高适应emoji大小(TODO)

3. 实际做下来，优化1并不适用，最终还是选择再建立一层emoji id和uniocde的映射。

   修改emoji的decorator中的正则：

   const emojiRegex = /[\u2600-\u2665]/g;
   

   到这里已经基本解决了emoji在Draftjs中的显示问题。但实际输出的文本里，emoji是其对应的unicode，因此还需要在获取输入框内容时，添加对文本的转换：

   // 对文本进行正则匹配，替换unicode为对应emoji
     parseContentWithEmoji(content) {
       const regex = /[\u2600-\u2665]+/g;
       const unicodeArr = content.match(regex);
       if (unicodeArr === null) {
         return content;
       }
       unicodeArr.forEach((unicode) => {
         const id = emoji.getIdByUnicode(unicode);
         if (!!id) {
           const text = emoji.getEmojiText(id);
           const replaceReg = new RegExp(unicode+ ' ', 'g');
           content = content.replace(replaceReg, text);
           console.log('replace '+ unicode+ 'by '+ text);
         }
       });
       return content;
     }
   

   先对文本进行match匹配，获取文本中所有需要转换的unicode数组，对数组进行遍历，获取unicode对应的emoji文本，同时使用replace将unicode替换之；

4. 实现上述优化后，emoji已能够正常显示到输入框和发送出去，但仍忽略了复制粘贴带有emoji文本的情况, 因为复制得到的emoji对应的是[xx]格式，需要在输入框的handlePastedText事件中添加对包含emoji文本的处理:

    // 替换emojiText为对应unicode
     parseContentWithEmojiText(text) {
       const regex = /\[[^\[\]]+\]+/g;
       const emojiTextArr = text.match(regex);
       if (emojiTextArr === null) {
         return text;
       }
       text = text.replace(/\[+/g, '');
       text = text.replace(/\]+/g, '');
       emojiTextArr.forEach((emojiText) => {
         const id = emoji.getEmojiIdByText(emojiText);
         if (!!id) {
           const unicode = emoji.getEmojiUnicode(id);
           const replaceText = emojiText.substr(1, emojiText.length-2);
           const replaceReg = new RegExp(replaceText, 'g');
           text = text.replace(replaceReg, unicode +' ');
         }
       });
       return text;
     }
   

5. 在实现4时，发现新的问题，当选中输入框中部分文本后再粘贴，Modifier.insertText()方法会报错：

   Target range must be collapsed for `insertText`
   

   查看Api得知这种情况下需使用Modifier.replaceText(), 封装输入框添加文本方法如下:

   // 添加文本内容
     appendContent(content, type) {
       const editorState = this.state.editorState;
       const selection = editorState.getSelection();
       const contentState = editorState.getCurrentContent();
       let newContentState = null;
   
       // 判断是否有选中，有则替换，无则插入
       const selectionEnd = selection.getEndOffset();
       const selectionStart = selection.getStartOffset();
       if (selectionEnd === selectionStart) {
         newContentState = Modifier.insertText(contentState, selection, content);
       } else {
         newContentState = Modifier.replaceText(contentState, selection, content);
       }
       const newEditorState = EditorState.push(editorState, newContentState, type);
       this.onChange(newEditorState);
       setTimeout(()=>{
         this.focus();
       }, 0);
     }