Как сделать гладкий редактор в режиме реального времени с функциональностью проверки грамматики?

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

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

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

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

 import {updateEditorState, checkEditorState} from './logic/actions'; ... class RichTextEditor extends React.Component { ... onChange = (editorState) ={amp}gt; { this.props.updateEditorState(editorState); this.props.checkEditorState(editorState); } ... render() { return ({amp}lt;Editor editorState={this.props.editorState} onChange={this.onChange} /{amp}gt;); } } const mapStateToProps = state ={amp}gt; ({ }); const mapDispatchToProps = dispatch ={amp}gt; ({ updateEditorState: bindActionCreators(updateEditorState, dispatch), checkEditorState: bindActionCreators(checkEditorState, dispatch) }); export default connect(mapStateToProps, mapDispatchToProps)(RichTextEditor); 

логика / actions.js

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

логика / 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) ]); } 

логика / 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) ={amp}gt; { switch (action.type) { case actionTypes.UPDATE_EDITOR_STATE: return { ...state, editorState: action.data }; ... } } 

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

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector