diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index 01e836765a..965b954233 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -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')) { diff --git a/src/stores/MessageComposerStore.js b/src/stores/MessageComposerStore.js index 1e83105300..ac48c522e4 100644 --- a/src/stores/MessageComposerStore.js +++ b/src/stores/MessageComposerStore.js @@ -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() {