Skip to content

Commit 1821e5f

Browse files
committed
lovasoagh-84: Addition additional states of contenteditable
This fixes lovasoa#84
1 parent aa9a487 commit 1821e5f

File tree

2 files changed

+52
-8
lines changed

2 files changed

+52
-8
lines changed

lib/react-contenteditable.js

+29-7
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,35 @@ var ContentEditable = function (_React$Component) {
4848
html = _props.html,
4949
props = _objectWithoutProperties(_props, ['tagName', 'html']);
5050

51+
var contentEditableState = true;
52+
53+
if (this.props.plaintextOnly) {
54+
contentEditableState = "plaintext-only";
55+
}
56+
57+
if (this.props.typing) {
58+
contentEditableState = "typing";
59+
}
60+
61+
if (this.props.caret) {
62+
contentEditableState = "caret";
63+
}
64+
65+
if (this.props.events) {
66+
contentEditableState = "events";
67+
}
68+
69+
if (this.props.disabled) {
70+
contentEditableState = false;
71+
}
72+
5173
return _react2.default.createElement(tagName || 'div', _extends({}, props, {
5274
ref: function ref(e) {
5375
return _this2.htmlEl = e;
5476
},
5577
onInput: this.emitChange,
5678
onBlur: this.props.onBlur || this.emitChange,
57-
contentEditable: !this.props.disabled,
79+
contentEditable: contentEditableState,
5880
dangerouslySetInnerHTML: { __html: html }
5981
}), this.props.children);
6082
}
@@ -100,12 +122,12 @@ var ContentEditable = function (_React$Component) {
100122
if (!this.htmlEl) return;
101123
var html = this.htmlEl.innerHTML;
102124
if (this.props.onChange && html !== this.lastHtml) {
103-
// Clone event with Object.assign to avoid
125+
// Clone event with Object.assign to avoid
104126
// "Cannot assign to read only property 'target' of object"
105-
var evt = Object.assign({}, evt, {
106-
target: {
107-
value: html
108-
}
127+
var evt = Object.assign({}, evt, {
128+
target: {
129+
value: html
130+
}
109131
});
110132
this.props.onChange(evt);
111133
}
@@ -117,4 +139,4 @@ var ContentEditable = function (_React$Component) {
117139
}(_react2.default.Component);
118140

119141
exports.default = ContentEditable;
120-
module.exports = exports['default'];
142+
module.exports = exports['default'];

src/react-contenteditable.js

+23-1
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,36 @@ export default class ContentEditable extends React.Component {
1111
render() {
1212
var { tagName, html, ...props } = this.props;
1313

14+
var contentEditableState = true;
15+
16+
if (this.props.plainTextOnly) {
17+
contentEditableState = "plaintext-only"
18+
}
19+
20+
if (this.props.typing) {
21+
contentEditableState = "typing"
22+
}
23+
24+
if (this.props.caret) {
25+
contentEditableState = "caret"
26+
}
27+
28+
if (this.props.events) {
29+
contentEditableState = "events"
30+
}
31+
32+
if (this.props.disabled) {
33+
contentEditableState = false
34+
}
35+
1436
return React.createElement(
1537
tagName || 'div',
1638
{
1739
...props,
1840
ref: (e) => this.htmlEl = e,
1941
onInput: this.emitChange,
2042
onBlur: this.props.onBlur || this.emitChange,
21-
contentEditable: !this.props.disabled,
43+
contentEditable: contentEditableState,
2244
dangerouslySetInnerHTML: {__html: html}
2345
},
2446
this.props.children);

0 commit comments

Comments
 (0)