Use ContentState instead and persist over localStorage
parent
084a933dbd
commit
3d5b3ed7ad
|
@ -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')) {
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in New Issue