gh-84: Addition additional states of contenteditable

This fixes #84
lovasoa · Mar 31, 2018 · a30669a · a30669a
1 parent aa9a487
commit a30669a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 8 deletions.
diff --git 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'];
diff --git a/src/react-contenteditable.js b/src/react-contenteditable.js
@@ -11,14 +11,36 @@ 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',
       {
         ...props,
         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);