diff --git a/packages/xpub-edit/src/components/Editor.js b/packages/xpub-edit/src/components/Editor.js index 740b76d2700d74861458fce650f41ded45ae5514..0499102f1cb2872af8f7833341ede8c1807e951d 100644 --- a/packages/xpub-edit/src/components/Editor.js +++ b/packages/xpub-edit/src/components/Editor.js @@ -1,4 +1,5 @@ import React from 'react' +import { debounce } from 'lodash' import { Editor as SlateEditor, Plain } from 'slate' import EditorToolbar from './EditorToolbar' @@ -10,6 +11,12 @@ class Editor extends React.Component { state: undefined } + constructor (props) { + super(props) + + this.throttledOnDocumentChange = debounce(this.onDocumentChange, 1000) + } + componentDidMount () { this.deserialize(this.props.value) } @@ -46,8 +53,7 @@ class Editor extends React.Component { this.setState({ state }) } - // TODO: debouncing? - onDocumentChange = (document, state) => { + onDocumentChange = (document, state) => { const { converter, onDocumentChange } = this.props if (typeof onDocumentChange === 'function') { @@ -152,7 +158,7 @@ class Editor extends React.Component { onKeyDown={this.onKeyDown} onPaste={this.onReceive} onDrop={this.onReceive} - onDocumentChange={this.onDocumentChange} + onDocumentChange={this.throttledOnDocumentChange} placeholder={placeholder} spellCheck />