diff --git a/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js b/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js index 7983afb4..d19164b6 100644 --- a/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js +++ b/src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js @@ -1,5 +1,6 @@ import React, { PropTypes } from 'react'; import { Editor as Slate, Plain } from 'slate'; +import { debounce } from 'lodash'; import Toolbar from '../Toolbar/Toolbar'; import { Sticky } from '../../../../UI/Sticky/Sticky'; import styles from './index.css'; @@ -20,13 +21,15 @@ export default class RawEditor extends React.Component { this.setState({ editorState }); } + onChange = debounce(this.props.onChange, 250); + /** * When the document value changes, serialize from Slate's AST back to plain * text (which is Markdown) and pass that up as the new value. */ handleDocumentChange = (doc, editorState) => { const value = Plain.serialize(editorState); - this.props.onChange(value); + this.onChange(value); }; /** diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js index 3a67ad7a..2fa9323a 100644 --- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js +++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js @@ -1,5 +1,5 @@ import React, { Component, PropTypes } from 'react'; -import { get, isEmpty } from 'lodash'; +import { get, isEmpty, debounce } from 'lodash'; import { Editor as Slate, Raw, Block, Text } from 'slate'; import { slateToMarkdown, markdownToSlate, htmlToSlate } from '../../serializers'; import registry from '../../../../../lib/registry'; @@ -43,11 +43,13 @@ export default class Editor extends Component { return state.transform().insertFragment(doc).apply(); } + onChange = debounce(this.props.onChange, 250); + handleDocumentChange = (doc, editorState) => { const raw = Raw.serialize(editorState, { terse: true }); const plugins = this.state.shortcodePlugins; const markdown = slateToMarkdown(raw, plugins); - this.props.onChange(markdown); + this.onChange(markdown); }; hasMark = type => this.state.editorState.marks.some(mark => mark.type === type);