基于Electron的一個(gè)即時(shí)通訊PC端軟件，輸入框是最基本的組件。起初只通過(guò)
textarea和<img>兩標(biāo)簽的動(dòng)態(tài)切換來(lái)實(shí)現(xiàn)基本的文字或圖片輸入功能。后續(xù)開發(fā)中，為實(shí)現(xiàn)@和圖文輸入功能，決定采用Draftjs去構(gòu)建聊天輸入框
第三方庫(kù)
引用下別人對(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 來(lái)創(chuàng)建對(duì)象。
EditorState 和 ContentState 都是 Immutable 的對(duì)象，所以 Draft.js 提供 covertToRaw 方法來(lái)將 ContentState 對(duì)象轉(zhuǎn)換成 plain JavaScript 對(duì)象，從而可以以 JSON 的格式進(jìn)行存取。對(duì)應(yīng)的，convertFromRaw方法可以將 JSON 數(shù)據(jù)轉(zhuǎn)換成 ContentState 對(duì)象。
ContentState
經(jīng)過(guò) 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ù)通過(guò) Entity 對(duì)象來(lái)表示，而 Entity 的位置信息存儲(chǔ)于 entityRanges 數(shù)組中，其元數(shù)據(jù)可以通過(guò) key 值，可以在 entityMap 中索引到。
Entity
一個(gè) Entity 對(duì)象表示一段文本（長(zhǎng)度可能為 0）的元數(shù)據(jù)，所以可以用來(lái)表示超鏈接、圖片、視頻等需要額外數(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ì)象，通過(guò)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ù)制粘貼問(wèn)題；
- 粘貼gif圖片到輸入框變?yōu)閜ng
- @組件在未使用時(shí)，也會(huì)捕捉up/down arrow事件，導(dǎo)致輸入框無(wú)法正常表現(xiàn)
- 輸入框組件移除再切換回來(lái)，decorators和plugins不起作用，移除當(dāng)前會(huì)話后重新打開則正常
- 為適應(yīng)草稿，圖片需只以路徑的形式存儲(chǔ)；
- focus在輸入框時(shí)，表情選擇框彈出交互問(wèn)題
Bug 解決
-
輸入框組件移除再切換回來(lái)，decorators和plugins不起作用，移除當(dāng)前會(huì)話后重新打開則正常
分析：受影響的是draft plugins庫(kù)提供的plugins和decorators兩個(gè)屬性，draftjs提供的功能均正常；因此主要查看draft plugin的issue。
issue里有很多相關(guān)但都沒(méi)有準(zhǔn)確解決方案的問(wè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失效問(wèn)題 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方法的重寫，通過(guò)EditorState.push去重設(shè)editorState。同時(shí)記錄了Mount時(shí)的draft值，避免在componentWillReceiveProps重復(fù)賦值。問(wèn)題是解決了，但原因并不是很清楚
