Draft.js - Как сделать плавный редактор в реальном времени с функциональностью проверки грамматики? - PullRequest
Новая
       36

Draft.js - Как сделать плавный редактор в реальном времени с функциональностью проверки грамматики?

3 голосов
/ 18 октября 2019

Я попытался создать расширенный текстовый редактор с функцией проверки грамматики в реальном времени. У меня есть собственный словарь и механизм проверки.

Проблема в том, что редактор не является гладким, так как механизм проверки запускается каждый раз, когда я изменяю редактор draft.js, даже если я просто перемещаю позицию курсора.

Вот мой компонент RichTextEditor. 

import {updateEditorState, checkEditorState} from './logic/actions';
...
class RichTextEditor extends React.Component {

    ...
    onChange = (editorState) => {
        this.props.updateEditorState(editorState);
        this.props.checkEditorState(editorState);
    }
    ...
    render() {
        return (<Editor
                        editorState={this.props.editorState}
                        onChange={this.onChange}
                    />);
    }
}

const mapStateToProps = state => ({
});

const mapDispatchToProps = dispatch => ({
    updateEditorState: bindActionCreators(updateEditorState, dispatch),
    checkEditorState: bindActionCreators(checkEditorState, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(RichTextEditor);

logic / actions.js 

import * as actionTypes from './rteActionTypes'
...
export const updateEditorState = (data) => {
    return ({
        type: actionTypes.UPDATE_EDITOR_STATE,
        data: data
    });
}

export const checkEditorState = (data) => {
    return ({
        type: actionTypes.CHECK_EDITOR_STATE,
        data: data
    });
}
...

logic / saga.js 

import { takeLatest, all, call, put } from 'redux-saga/effects';
import * as actionTypes from './rteActionTypes';

import { checkEditorState } from './CheckEngine';

function* checkEditor(action) {
    const {updated, editorState} = yield call(checkEditorState, action.data)
    if (updated) {
        yield put({ type: actionTypes.UPDATE_EDITOR_STATE, data: editorState })
    }
}

export default function* saga() {
    yield all([
        takeLatest(actionTypes.CHECK_EDITOR_STATE, checkEditor)
    ]);
}

logic / reducer.js 

import * as actionTypes from './rteActionTypes';
import {
    EditorState,
    CompositeDecorator,
    convertFromRaw
} from 'draft-js';
const initialState = {
    editorState: EditorState.createEmpty(decorator),
};
export default (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.UPDATE_EDITOR_STATE:
            return {
                ...state,
                editorState: action.data
            };
    ...
    }
}

Я знаю, что эта реализация не является хорошей практикой, поскольку пользовательский интерфейс будет заблокирован, пока не будет отправлено действие приставкиуспешно, и это основная причина негладкого редактирования. Я хочу сделать фоновый поток, который обнаруживает изменения переменной магазина 'editorState'. Как только изменение обнаружено, оно запускает checkEngine, а затем отправляет новое редукционное действие для обновления editorState с проверкой грамматики editorState.

Но я не знаю, как создать фоновый поток или рабочий дляМагазин редуксов в React.js Можете ли вы помочь мне с этой проблемой? Спасибо.

...