improve markdown editor serialization debounce

This commit is contained in:
Shawn Erquhart
2017-09-26 15:52:50 -04:00
parent 9e0d7696ee
commit 516a5e4c7f
2 changed files with 6 additions and 10 deletions

View File

@ -22,16 +22,14 @@ export default class RawEditor extends React.Component {
this.setState({ editorState }); this.setState({ editorState });
} }
onChange = debounce(this.props.onChange, 250);
/** /**
* When the document value changes, serialize from Slate's AST back to plain * 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. * text (which is Markdown) and pass that up as the new value.
*/ */
handleDocumentChange = (doc, editorState) => { handleDocumentChange = debounce((doc, editorState) => {
const value = Plain.serialize(editorState); const value = Plain.serialize(editorState);
this.onChange(value); this.props.onChange(value);
}; }, 150);
/** /**
* If a paste contains plain text, deserialize it to Slate's AST and insert * If a paste contains plain text, deserialize it to Slate's AST and insert

View File

@ -44,14 +44,12 @@ export default class Editor extends Component {
return state.transform().insertFragment(doc).apply(); return state.transform().insertFragment(doc).apply();
} }
onChange = debounce(this.props.onChange, 250); handleDocumentChange = debounce((doc, editorState) => {
handleDocumentChange = (doc, editorState) => {
const raw = Raw.serialize(editorState, { terse: true }); const raw = Raw.serialize(editorState, { terse: true });
const plugins = this.state.shortcodePlugins; const plugins = this.state.shortcodePlugins;
const markdown = slateToMarkdown(raw, plugins); const markdown = slateToMarkdown(raw, plugins);
this.onChange(markdown); this.props.onChange(markdown);
}; }, 150);
hasMark = type => this.state.editorState.marks.some(mark => mark.type === type); hasMark = type => this.state.editorState.marks.some(mark => mark.type === type);
hasBlock = type => this.state.editorState.blocks.some(node => node.type === type); hasBlock = type => this.state.editorState.blocks.some(node => node.type === type);