Use ContentState instead and persist over localStorage

pull/21833/head
Luke Barnard 2017-07-05 11:49:34 +01:00
parent 084a933dbd
commit 3d5b3ed7ad
2 changed files with 18 additions and 19 deletions

View File

@ -132,7 +132,10 @@ export default class MessageComposerInput extends React.Component {
isRichtextEnabled,
// the currently displayed editor state (note: this is always what is modified on input)
editorState: null,
editorState: this.createEditorState(
isRichtextEnabled,
MessageComposerStore.getContentState(this.props.room.roomId),
),
// the original editor state, before we started tabbing through completions
originalEditorState: null,
@ -142,10 +145,6 @@ export default class MessageComposerInput extends React.Component {
currentlyComposedEditorState: null,
};
// bit of a hack, but we need to do this here since createEditorState needs isRichtextEnabled
/* eslint react/no-direct-mutation-state:0 */
this.state.editorState = this.createEditorState();
this.client = MatrixClientPeg.get();
}
@ -172,11 +171,6 @@ export default class MessageComposerInput extends React.Component {
componentDidMount() {
this.dispatcherRef = dis.register(this.onAction);
this.historyManager = new ComposerHistoryManager(this.props.room.roomId);
// Reinstate the editor state for this room
this.setState({
editorState: MessageComposerStore.getEditorState(this.props.room.roomId),
});
}
componentWillUnmount() {
@ -346,9 +340,9 @@ export default class MessageComposerInput extends React.Component {
// Record the editor state for this room so that it can be retrieved after
// switching to another room and back
dis.dispatch({
action: 'editor_state',
action: 'content_state',
room_id: this.props.room.roomId,
editor_state: state.editorState,
content_state: state.editorState.getCurrentContent(),
});
if (!state.hasOwnProperty('originalEditorState')) {

View File

@ -15,9 +15,11 @@ limitations under the License.
*/
import dis from '../dispatcher';
import {Store} from 'flux/utils';
import {convertToRaw, convertFromRaw} from 'draft-js';
const INITIAL_STATE = {
editorStateMap: {},
editorStateMap: localStorage.getItem('content_state') ?
JSON.parse(localStorage.getItem('content_state')) : {},
};
/**
@ -40,8 +42,8 @@ class MessageComposerStore extends Store {
__onDispatch(payload) {
switch (payload.action) {
case 'editor_state':
this._editorState(payload);
case 'content_state':
this._contentState(payload);
break;
case 'on_logged_out':
this.reset();
@ -49,16 +51,19 @@ class MessageComposerStore extends Store {
}
}
_editorState(payload) {
_contentState(payload) {
const editorStateMap = this._state.editorStateMap;
editorStateMap[payload.room_id] = payload.editor_state;
editorStateMap[payload.room_id] = convertToRaw(payload.content_state);
localStorage.setItem('content_state', JSON.stringify(editorStateMap));
console.info(localStorage.getItem('content_state'));
this._setState({
editorStateMap: editorStateMap,
});
}
getEditorState(roomId) {
return this._state.editorStateMap[roomId];
getContentState(roomId) {
return this._state.editorStateMap[roomId] ?
convertFromRaw(this._state.editorStateMap[roomId]) : null;
}
reset() {