基于Draftjs实现的Electron富文本聊天输入框

基于Electron的一个即时通讯PC端软件，输入框是最基本的组件。起初只通过 textarea和两标签的动态切换来实现基本的文字或图片输入功能。后续开发中，为实现@和图文输入功能，决定采用Draftjs去构建聊天输入框

第三方库

Draftjs

Draft plugins

引用下别人对Draftjs主要属性的介绍：

EditorState

EditorState 是一个用于表示 Editor 组件的顶级（top-level）状态对象，其内容包括：

• 当前文本内容状态（ContentState）
• 当前选中内容状态（SelectionState）
• 所有的内容修饰器（Decorator）
• 撤销和重做栈
• 最后一次变更操作的类型

EditorState 有两个静态的方法用于创建一个新的对象：createEmpty 方法和 createWithContent 方法，其中 createWithContent 会根据传入的 ContentState 来创建对象。

EditorState 和 ContentState 都是 Immutable 的对象，所以 Draft.js 提供 covertToRaw 方法来将 ContentState 对象转换成 plain JavaScript 对象，从而可以以 JSON 的格式进行存取。对应的，convertFromRaw方法可以将 JSON 数据转换成 ContentState 对象。

ContentState

经过 covertToRaw 转换的 JSON 输出有两部分组成：blocks 和 entityMap

blocks 是一个数组，每一项代表当前内容中的一个块级元素（比如标题、段落、列表等）。其中 text 表示该块级元素中的纯文本，type 表示该块级元素的类型（header-one 表示一级标题、unstyled 表示普通段落、atomic 表示多媒体类的块级元素）。

在 Draft.js 中，超链接、图片、视频等多媒体元素的数据通过 Entity 对象来表示，而 Entity 的位置信息存储于 entityRanges 数组中，其元数据可以通过 key 值，可以在 entityMap 中索引到。

Entity

一个 Entity 对象表示一段文本（长度可能为 0）的元数据，所以可以用来表示超链接、图片、视频等需要额外数据项的多媒体内容。该对象有三个属性：

• 用于表示该 Entity 类型的 type，比如可以取值为 link、image；
• 根据 Entity 是否可变，mutability 具有三种取值：IMMUTABLE、MUTABLE 和 SEGMENTED;
• 用于存储 Entity 元数据的 data 字段，比如对于超链接 Entity，应该有一个 href 值；

下面代码描述了如何创建一个超链接 Entity，并根据生成的 key 更新 EditorState 对象：

const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity(
  'LINK',
  'MUTABLE',
  {url: 'https://myanbin.github.io/'}
);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = EditorState.set(editorState, { currentContent: contentStateWithEntity });
RichUtils.toggleLink(newEditorState, newEditorState.getSelection(), entityKey);

e.g : 如获取mention插件的Mention对象，raw.entityMap[0].data.mention对应第一个mention的Map对象，通过get(key)可以获取该mention对象的指定key值。

功能点

1. 群组@功能
2. 输入框支持图文编辑和发送
3. 输入框支持emoji表情
4. 链接识别
5. 草稿
6. 输入框支持右击菜单
7. 自定义快捷键绑定
8. 文件拖拽的处理
9. 中文输入(IME)bug解决

几个较为复杂的功能在后续文章一一作了详细介绍

中文输入法bug

这是electron 1.6.x上的bug。https://github.com/electron/electron/issues/9380，作者提到已经在1.7.x中修复

TODO

1. 图文的复制粘贴问题；
2. 粘贴gif图片到输入框变为png
3. @组件在未使用时，也会捕捉up/down arrow事件，导致输入框无法正常表现
4. 输入框组件移除再切换回来，decorators和plugins不起作用，移除当前会话后重新打开则正常
5. 为适应草稿，图片需只以路径的形式存储；
6. focus在输入框时，表情选择框弹出交互问题

Bug 解决

• 输入框组件移除再切换回来，decorators和plugins不起作用，移除当前会话后重新打开则正常

  分析：受影响的是draft plugins库提供的plugins和decorators两个属性，draftjs提供的功能均正常；因此主要查看draft plugin的issue。

  issue里有很多相关但都没有准确解决方案的问题，https://github.com/draft-js-plugins/draft-js-plugins/issues/251

  draft plugin的Editor是在componentWillMount的方法里去注册decorators，issue里提到注册的时候需要正确的EditorState。修改如下：

  let initialDraft = null;
  
  // 根据issue, 这里需重设editorState，否则出现decorators失效问题
  componentWillMount() {
      if (!!this.props.draft) {
        initialDraft = this.props.draft;
        this.setStateWithDraft(this.props.draft);
      } else {
        this.setEmptyState();
      }
    }
  
  componentWillReceiveProps(nextProps) {
      .......
      
      if (this.props.draft && nextProps.draft && initialDraft !== nextProps.draft) {
        this.setStateWithDraft(nextProps.draft);
      }
    }
  
  

  在自定义的Editor组件里添加了对componentWillMount方法的重写，通过EditorState.push去重设editorState。同时记录了Mount时的draft值，避免在componentWillReceiveProps重复赋值。

  问题是解决了，但原因并不是很清楚