diff --git a/lib/components/content.js b/lib/components/content.js index ffe2ca860..1df2605a7 100644 --- a/lib/components/content.js +++ b/lib/components/content.js @@ -165,14 +165,9 @@ class Content extends React.Component { onBlur = (e) => { if (this.props.readOnly) return if (this.tmp.isCopying) return - let { state } = this.props - state = state - .transform() - .blur() - .apply({ isNative: true }) - - this.onChange(state) + const data = {} + this.props.onBlur(e, data) } /** diff --git a/lib/components/editor.js b/lib/components/editor.js index 5b2a4a532..5a1a58e5a 100644 --- a/lib/components/editor.js +++ b/lib/components/editor.js @@ -6,12 +6,31 @@ import State from '../models/state' /** * Noop. + * + * @type {Function} */ function noop() {} +/** + * Event handlers to mix in to the editor. + * + * @type {Array} + */ + +const EVENT_HANDLERS = [ + 'onBeforeInput', + 'onBlur', + 'onDrop', + 'onKeyDown', + 'onPaste', + 'onSelect' +] + /** * Editor. + * + * @type {Component} */ class Editor extends React.Component { @@ -22,13 +41,8 @@ class Editor extends React.Component { static propTypes = { className: React.PropTypes.string, - onBeforeInput: React.PropTypes.func, onChange: React.PropTypes.func.isRequired, onDocumentChange: React.PropTypes.func, - onDrop: React.PropTypes.func, - onKeyDown: React.PropTypes.func, - onPaste: React.PropTypes.func, - onSelect: React.PropTypes.func, onSelectionChange: React.PropTypes.func, placeholder: React.PropTypes.any, placeholderClassName: React.PropTypes.string, @@ -43,6 +57,10 @@ class Editor extends React.Component { style: React.PropTypes.object }; + /** + * Default properties. + */ + static defaultProps = { onDocumentChange: noop, onSelectionChange: noop, @@ -63,6 +81,13 @@ class Editor extends React.Component { this.state = {} this.state.plugins = this.resolvePlugins(props) this.state.state = props.state + + // Mix in the event handlers. + for (const method of EVENT_HANDLERS) { + this[method] = (...args) => { + this.onEvent(method, ...args) + } + } } /** @@ -80,7 +105,7 @@ class Editor extends React.Component { } /** - * Blur the editor. + * Programmatically blur the editor. */ blur = () => { @@ -93,7 +118,7 @@ class Editor extends React.Component { } /** - * Focus the editor. + * Programmatically focus the editor. */ focus = () => { @@ -108,7 +133,7 @@ class Editor extends React.Component { /** * Get the editor's current `state`. * - * @return {State} state + * @return {State} */ getState = () => { @@ -162,73 +187,25 @@ class Editor extends React.Component { } } - /** - * On before input. - * - * @param {Mixed} ...args - */ - - onBeforeInput = (...args) => { - this.onEvent('onBeforeInput', ...args) - } - - /** - * On drop. - * - * @param {Mixed} ...args - */ - - onDrop = (...args) => { - this.onEvent('onDrop', ...args) - } - - /** - * On key down. - * - * @param {Mixed} ...args - */ - - onKeyDown = (...args) => { - this.onEvent('onKeyDown', ...args) - } - - /** - * On paste. - * - * @param {Mixed} ...args - */ - - onPaste = (...args) => { - this.onEvent('onPaste', ...args) - } - - /** - * On selection. - * - * @param {Mixed} ...args - */ - - onSelect = (...args) => { - this.onEvent('onSelect', ...args) - } - /** * Render the editor. * - * @return {Element} element + * @return {Element} */ render = () => { + const handlers = {} + + for (const property of EVENT_HANDLERS) { + handlers[property] = this[property] + } + return ( { @@ -263,7 +240,7 @@ class Editor extends React.Component { * * @param {Mark} mark * @param {Set} marks - * @return {Object} style + * @return {Object} */ renderMark = (mark, marks) => { @@ -280,7 +257,7 @@ class Editor extends React.Component { * Render a `node`, cascading through the plugins. * * @param {Node} node - * @return {Element} element + * @return {Element} */ renderNode = (node) => { @@ -302,7 +279,7 @@ class Editor extends React.Component { * for the editor, like delete characters and such. * * @param {Object} props - * @return {Array} plugins + * @return {Array} */ resolvePlugins = (props) => { @@ -317,6 +294,14 @@ class Editor extends React.Component { } +/** + * Mix in the property types for the event handlers. + */ + +for (const property of EVENT_HANDLERS) { + Editor.propTypes[property] = React.PropTypes.func +} + /** * Export. */ diff --git a/lib/plugins/core.js b/lib/plugins/core.js index 8661909e5..cc5e0642b 100644 --- a/lib/plugins/core.js +++ b/lib/plugins/core.js @@ -119,6 +119,22 @@ function Plugin(options = {}) { return next } + /** + * On blur. + * + * @param {Event} e + * @param {Object} data + * @param {State} state + * @return {State} + */ + + function onBlur(e, data, state) { + return state + .transform() + .blur() + .apply({ isNative: true }) + } + /** * On drop. *