improve markdown editor serialization debounce
This commit is contained in:
@ -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
|
||||||
|
@ -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);
|
||||||
|
Reference in New Issue
Block a user