diff --git a/lib/react-contenteditable.js b/lib/react-contenteditable.js index d8c1aa3..ecc18fe 100644 --- a/lib/react-contenteditable.js +++ b/lib/react-contenteditable.js @@ -48,13 +48,35 @@ var ContentEditable = function (_React$Component) { html = _props.html, props = _objectWithoutProperties(_props, ['tagName', 'html']); + var contentEditableState = true; + + if (this.props.plaintextOnly) { + contentEditableState = "plaintext-only"; + } + + if (this.props.typing) { + contentEditableState = "typing"; + } + + if (this.props.caret) { + contentEditableState = "caret"; + } + + if (this.props.events) { + contentEditableState = "events"; + } + + if (this.props.disabled) { + contentEditableState = false; + } + return _react2.default.createElement(tagName || 'div', _extends({}, props, { ref: function ref(e) { return _this2.htmlEl = e; }, onInput: this.emitChange, onBlur: this.props.onBlur || this.emitChange, - contentEditable: !this.props.disabled, + contentEditable: contentEditableState, dangerouslySetInnerHTML: { __html: html } }), this.props.children); } @@ -100,12 +122,12 @@ var ContentEditable = function (_React$Component) { if (!this.htmlEl) return; var html = this.htmlEl.innerHTML; if (this.props.onChange && html !== this.lastHtml) { - // Clone event with Object.assign to avoid + // Clone event with Object.assign to avoid // "Cannot assign to read only property 'target' of object" - var evt = Object.assign({}, evt, { - target: { - value: html - } + var evt = Object.assign({}, evt, { + target: { + value: html + } }); this.props.onChange(evt); } @@ -117,4 +139,4 @@ var ContentEditable = function (_React$Component) { }(_react2.default.Component); exports.default = ContentEditable; -module.exports = exports['default']; +module.exports = exports['default']; \ No newline at end of file diff --git a/src/react-contenteditable.js b/src/react-contenteditable.js index c383d04..4e36f46 100644 --- a/src/react-contenteditable.js +++ b/src/react-contenteditable.js @@ -11,6 +11,28 @@ export default class ContentEditable extends React.Component { render() { var { tagName, html, ...props } = this.props; + var contentEditableState = true; + + if (this.props.plaintextOnly) { + contentEditableState = "plaintext-only" + } + + if (this.props.typing) { + contentEditableState = "typing" + } + + if (this.props.caret) { + contentEditableState = "caret" + } + + if (this.props.events) { + contentEditableState = "events" + } + + if (this.props.disabled) { + contentEditableState = false + } + return React.createElement( tagName || 'div', { @@ -18,7 +40,7 @@ export default class ContentEditable extends React.Component { ref: (e) => this.htmlEl = e, onInput: this.emitChange, onBlur: this.props.onBlur || this.emitChange, - contentEditable: !this.props.disabled, + contentEditable: contentEditableState, dangerouslySetInnerHTML: {__html: html} }, this.props.children);