diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index ee3b566a7f..83e717d55d 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -43,6 +43,8 @@ import Markdown from '../../../Markdown'; import ComposerHistoryManager from '../../../ComposerHistoryManager'; import {onSendMessageFailed} from './MessageComposerInputOld'; +import MessageComposerStore from '../../../stores/MessageComposerStore'; + const TYPING_USER_TIMEOUT = 10000, TYPING_SERVER_TIMEOUT = 30000; const ZWS_CODE = 8203; @@ -130,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, @@ -143,10 +148,6 @@ export default class MessageComposerInput extends React.Component { someCompletions: 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(); } @@ -339,6 +340,14 @@ export default class MessageComposerInput extends React.Component { this.onFinishedTyping(); } + // Record the editor state for this room so that it can be retrieved after + // switching to another room and back + dis.dispatch({ + action: 'content_state', + room_id: this.props.room.roomId, + content_state: state.editorState.getCurrentContent(), + }); + if (!state.hasOwnProperty('originalEditorState')) { state.originalEditorState = null; } @@ -635,6 +644,10 @@ export default class MessageComposerInput extends React.Component { }; onVerticalArrow = (e, up) => { + if (e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) { + return; + } + // Select history only if we are not currently auto-completing if (this.autocomplete.state.completionList.length === 0) { // Don't go back in history if we're in the middle of a multi-line message diff --git a/src/stores/MessageComposerStore.js b/src/stores/MessageComposerStore.js new file mode 100644 index 0000000000..6e13c8f825 --- /dev/null +++ b/src/stores/MessageComposerStore.js @@ -0,0 +1,78 @@ +/* +Copyright 2017 Vector Creations Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ +import dis from '../dispatcher'; +import {Store} from 'flux/utils'; +import {convertToRaw, convertFromRaw} from 'draft-js'; + +const INITIAL_STATE = { + editorStateMap: localStorage.getItem('content_state') ? + JSON.parse(localStorage.getItem('content_state')) : {}, +}; + +/** + * A class for storing application state to do with the message composer. This is a simple + * flux store that listens for actions and updates its state accordingly, informing any + * listeners (views) of state changes. + */ +class MessageComposerStore extends Store { + constructor() { + super(dis); + + // Initialise state + this._state = Object.assign({}, INITIAL_STATE); + } + + _setState(newState) { + this._state = Object.assign(this._state, newState); + this.__emitChange(); + } + + __onDispatch(payload) { + switch (payload.action) { + case 'content_state': + this._contentState(payload); + break; + case 'on_logged_out': + this.reset(); + break; + } + } + + _contentState(payload) { + const editorStateMap = this._state.editorStateMap; + 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, + }); + } + + getContentState(roomId) { + return this._state.editorStateMap[roomId] ? + convertFromRaw(this._state.editorStateMap[roomId]) : null; + } + + reset() { + this._state = Object.assign({}, INITIAL_STATE); + } +} + +let singletonMessageComposerStore = null; +if (!singletonMessageComposerStore) { + singletonMessageComposerStore = new MessageComposerStore(); +} +module.exports = singletonMessageComposerStore;