gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

debounce markdown editor change handler

Browse Source
This commit is contained in:
Shawn Erquhart 2017-08-31 21:25:44 -04:00
parent 4821959951
commit c25a7c4abb
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Widgets/Markdown/MarkdownControl/RawEditor/index.js
View File

@ -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);
};
/**

6
src/components/Widgets/Markdown/MarkdownControl/VisualEditor/index.js
View File

@ -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);