基于Electron的一个即时通讯PC端软件，输入框是最基本的组件。起初只通过
textarea和<img>两标签的动态切换来实现基本的文字或图片输入功能。后续开发中，为实现@和图文输入功能，决定采用Draftjs去构建聊天输入框
第三方库
引用下别人对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值。
功能点
- 群组@功能
- 输入框支持图文编辑和发送
- 输入框支持emoji表情
- 链接识别
- 草稿
- 输入框支持右击菜单
- 自定义快捷键绑定
- 文件拖拽的处理
- 中文输入(IME)bug解决
几个较为复杂的功能在后续文章一一作了详细介绍
中文输入法bug
这是electron 1.6.x上的bug。https://github.com/electron/electron/issues/9380，作者提到已经在1.7.x中修复
TODO
- 图文的复制粘贴问题；
- 粘贴gif图片到输入框变为png
- @组件在未使用时，也会捕捉up/down arrow事件，导致输入框无法正常表现
- 输入框组件移除再切换回来，decorators和plugins不起作用，移除当前会话后重新打开则正常
- 为适应草稿，图片需只以路径的形式存储；
- 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重复赋值。问题是解决了，但原因并不是很清楚
网友评论