Merge pull request #1890 from matrix-org/matthew/slate
Replace Draft with Slate
This commit is contained in:
commit
d16ac4d80c
42 changed files with 1397 additions and 1141 deletions
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2017 Vector Creations Ltd
|
||||
Copyright 2017, 2018 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.
|
||||
|
@ -14,16 +14,18 @@ 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';
|
||||
import { Store } from 'flux/utils';
|
||||
import { Value } from 'slate';
|
||||
|
||||
const INITIAL_STATE = {
|
||||
editorStateMap: localStorage.getItem('content_state') ?
|
||||
JSON.parse(localStorage.getItem('content_state')) : {},
|
||||
// a map of room_id to rich text editor composer state
|
||||
editorStateMap: localStorage.getItem('editor_state') ?
|
||||
JSON.parse(localStorage.getItem('editor_state')) : {},
|
||||
};
|
||||
|
||||
/**
|
||||
* A class for storing application state to do with the message composer. This is a simple
|
||||
* A class for storing application state to do with the message composer (specifically
|
||||
* in-progress message drafts). This is a simple
|
||||
* flux store that listens for actions and updates its state accordingly, informing any
|
||||
* listeners (views) of state changes.
|
||||
*/
|
||||
|
@ -42,8 +44,8 @@ class MessageComposerStore extends Store {
|
|||
|
||||
__onDispatch(payload) {
|
||||
switch (payload.action) {
|
||||
case 'content_state':
|
||||
this._contentState(payload);
|
||||
case 'editor_state':
|
||||
this._editorState(payload);
|
||||
break;
|
||||
case 'on_logged_out':
|
||||
this.reset();
|
||||
|
@ -51,18 +53,28 @@ class MessageComposerStore extends Store {
|
|||
}
|
||||
}
|
||||
|
||||
_contentState(payload) {
|
||||
_editorState(payload) {
|
||||
const editorStateMap = this._state.editorStateMap;
|
||||
editorStateMap[payload.room_id] = convertToRaw(payload.content_state);
|
||||
localStorage.setItem('content_state', JSON.stringify(editorStateMap));
|
||||
editorStateMap[payload.room_id] = {
|
||||
editor_state: payload.editor_state,
|
||||
rich_text: payload.rich_text,
|
||||
};
|
||||
localStorage.setItem('editor_state', JSON.stringify(editorStateMap));
|
||||
this._setState({
|
||||
editorStateMap: editorStateMap,
|
||||
});
|
||||
}
|
||||
|
||||
getContentState(roomId) {
|
||||
return this._state.editorStateMap[roomId] ?
|
||||
convertFromRaw(this._state.editorStateMap[roomId]) : null;
|
||||
getEditorState(roomId) {
|
||||
const editorStateMap = this._state.editorStateMap;
|
||||
// const entry = this._state.editorStateMap[roomId];
|
||||
if (editorStateMap[roomId] && !Value.isValue(editorStateMap[roomId].editor_state)) {
|
||||
// rehydrate lazily to prevent massive churn at launch and cache it
|
||||
editorStateMap[roomId].editor_state = Value.fromJSON(editorStateMap[roomId].editor_state);
|
||||
}
|
||||
// explicitly don't setState here because the value didn't actually change, we just hydrated it,
|
||||
// if a listener received an update they too would call this method and have a hydrated Value
|
||||
return editorStateMap[roomId];
|
||||
}
|
||||
|
||||
reset() {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue