基于Electron的一個(gè)即時(shí)通訊PC端軟件田柔，輸入框是最基本的組件俐巴。起初只通過
textarea和<img>兩標(biāo)簽的動(dòng)態(tài)切換來實(shí)現(xiàn)基本的文字或圖片輸入功能。后續(xù)開發(fā)中硬爆，為實(shí)現(xiàn)@和圖文輸入功能欣舵，決定采用Draftjs去構(gòu)建聊天輸入框
第三方庫
引用下別人對(duì)Draftjs主要屬性的介紹：
EditorState
EditorState 是一個(gè)用于表示 Editor 組件的頂級(jí)（top-level）狀態(tài)對(duì)象，其內(nèi)容包括：
- 當(dāng)前文本內(nèi)容狀態(tài)（ContentState）
- 當(dāng)前選中內(nèi)容狀態(tài)（SelectionState）
- 所有的內(nèi)容修飾器（Decorator）
- 撤銷和重做棧
- 最后一次變更操作的類型
EditorState 有兩個(gè)靜態(tài)的方法用于創(chuàng)建一個(gè)新的對(duì)象：createEmpty 方法和 createWithContent 方法缀磕，其中 createWithContent 會(huì)根據(jù)傳入的 ContentState 來創(chuàng)建對(duì)象缘圈。
EditorState 和 ContentState 都是 Immutable 的對(duì)象，所以 Draft.js 提供 covertToRaw 方法來將 ContentState 對(duì)象轉(zhuǎn)換成 plain JavaScript 對(duì)象袜蚕，從而可以以 JSON 的格式進(jìn)行存取糟把。對(duì)應(yīng)的，convertFromRaw方法可以將 JSON 數(shù)據(jù)轉(zhuǎn)換成 ContentState 對(duì)象牲剃。
ContentState
經(jīng)過 covertToRaw 轉(zhuǎn)換的 JSON 輸出有兩部分組成：blocks 和 entityMap
blocks 是一個(gè)數(shù)組遣疯，每一項(xiàng)代表當(dāng)前內(nèi)容中的一個(gè)塊級(jí)元素（比如標(biāo)題、段落凿傅、列表等）缠犀。其中 text 表示該塊級(jí)元素中的純文本，type 表示該塊級(jí)元素的類型（header-one 表示一級(jí)標(biāo)題狭归、unstyled 表示普通段落、atomic 表示多媒體類的塊級(jí)元素）文判。
在 Draft.js 中过椎，超鏈接、圖片戏仓、視頻等多媒體元素的數(shù)據(jù)通過 Entity 對(duì)象來表示疚宇，而 Entity 的位置信息存儲(chǔ)于 entityRanges 數(shù)組中，其元數(shù)據(jù)可以通過 key 值赏殃，可以在 entityMap 中索引到敷待。
Entity
一個(gè) Entity 對(duì)象表示一段文本（長度可能為 0）的元數(shù)據(jù)，所以可以用來表示超鏈接仁热、圖片榜揖、視頻等需要額外數(shù)據(jù)項(xiàng)的多媒體內(nèi)容。該對(duì)象有三個(gè)屬性：
- 用于表示該 Entity 類型的 type，比如可以取值為
link举哟、image思劳； - 根據(jù) Entity 是否可變，mutability 具有三種取值：
IMMUTABLE妨猩、MUTABLE和SEGMENTED; - 用于存儲(chǔ) Entity 元數(shù)據(jù)的 data 字段潜叛，比如對(duì)于超鏈接 Entity，應(yīng)該有一個(gè) href 值壶硅；
下面代碼描述了如何創(chuàng)建一個(gè)超鏈接 Entity威兜，并根據(jù)生成的 key 更新 EditorState 對(duì)象：
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對(duì)象，raw.entityMap[0].data.mention對(duì)應(yīng)第一個(gè)mention的Map對(duì)象庐椒，通過get(key)可以獲取該mention對(duì)象的指定key值椒舵。
功能點(diǎn)
- 群組@功能
- 輸入框支持圖文編輯和發(fā)送
- 輸入框支持emoji表情
- 鏈接識(shí)別
- 草稿
- 輸入框支持右擊菜單
- 自定義快捷鍵綁定
- 文件拖拽的處理
- 中文輸入(IME)bug解決
幾個(gè)較為復(fù)雜的功能在后續(xù)文章一一作了詳細(xì)介紹
中文輸入法bug
這是electron 1.6.x上的bug。https://github.com/electron/electron/issues/9380扼睬，作者提到已經(jīng)在1.7.x中修復(fù)
TODO
- 圖文的復(fù)制粘貼問題逮栅；
- 粘貼gif圖片到輸入框變?yōu)閜ng
- @組件在未使用時(shí)，也會(huì)捕捉up/down arrow事件窗宇，導(dǎo)致輸入框無法正常表現(xiàn)
- 輸入框組件移除再切換回來措伐，decorators和plugins不起作用，移除當(dāng)前會(huì)話后重新打開則正常
- 為適應(yīng)草稿军俊，圖片需只以路徑的形式存儲(chǔ)侥加；
- focus在輸入框時(shí)，表情選擇框彈出交互問題
Bug 解決
-
輸入框組件移除再切換回來粪躬，decorators和plugins不起作用担败，移除當(dāng)前會(huì)話后重新打開則正常
分析：受影響的是draft plugins庫提供的plugins和decorators兩個(gè)屬性，draftjs提供的功能均正常镰官；因此主要查看draft plugin的issue提前。
issue里有很多相關(guān)但都沒有準(zhǔn)確解決方案的問題，https://github.com/draft-js-plugins/draft-js-plugins/issues/251
draft plugin的Editor是在
componentWillMount的方法里去注冊(cè)decorators泳唠，issue里提到注冊(cè)的時(shí)候需要正確的EditorState狈网。修改如下：let initialDraft = null; // 根據(jù)issue, 這里需重設(shè)editorState，否則出現(xiàn)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組件里添加了對(duì)
componentWillMount方法的重寫笨腥，通過EditorState.push去重設(shè)editorState拓哺。同時(shí)記錄了Mount時(shí)的draft值，避免在componentWillReceiveProps重復(fù)賦值脖母。問題是解決了士鸥，但原因并不是很清楚
