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