React legacy

README.md

@@ -24,17 +24,21 @@ import ContentEditable from 'react-contenteditable'
 class MyComponent extends React.Component {
   constructor() {
     super()
-    this.contentEditable = React.createRef();
+    this.contentEditable = null;
     this.state = {html: "<b>Hello <i>World</i></b>"};
   };
 
+  handleRef = (el) => {
+    this.contentEditable = el;
+  }
+
   handleChange = evt => {
     this.setState({html: evt.target.value});
   };
 
   render = () => {
     return <ContentEditable
-              innerRef={this.contentEditable}
+              innerRef={this.handleRef}
               html={this.state.html} // innerHTML of the editable div
               disabled={false}       // use true to disable editing
               onChange={this.handleChange} // handle innerHTML change
@@ -47,7 +51,7 @@ class MyComponent extends React.Component {
 ## Available props
 |prop|description|type|
 |--|----|----|
-|innerRef|element's [`ref` attribute](https://reactjs.org/docs/refs-and-the-dom.html)|Object \| Function|
+|element's [`ref` attribute](https://react-legacy.netlify.com/docs/refs-and-the-dom.html)|Function|
 |html|**required:** innerHTML of the editable element|String|
 |disabled|use true to disable editing|Boolean|
 |onChange|called whenever `innerHTML` changes|Function|

package.json

@@ -5,7 +5,7 @@
   "main": "./lib/react-contenteditable.js",
   "types": "./lib/react-contenteditable.d.ts",
   "peerDependencies": {
-    "react": ">=16.3"
+    "react": ">=0.14 <=15.6"
   },
   "author": "Ophir LOJKINE (original code posted by Sebastien Lorber on stackoverflow)",
   "license": " Apache-2.0",
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@types/react": "^16.8.23",
-    "react": "^16.8.6",
+    "react": "^15.6.2",
     "typescript": "^3.5.3"
   },
   "scripts": {

src/react-contenteditable.tsx

@@ -39,21 +39,23 @@ function replaceCaret(el: HTMLElement) {
  */
 export default class ContentEditable extends React.Component<Props> {
   lastHtml: string = this.props.html;
-  el: any = typeof this.props.innerRef === 'function' ? { current: null } : React.createRef<HTMLElement>();
+  el: any;
 
-  getEl = () => (this.props.innerRef && typeof this.props.innerRef !== 'function' ? this.props.innerRef : this.el).current;
+  handleRef = (el: HTMLElement) => {
+    this.el = el;
+    if (typeof this.props.innerRef === 'function') {
+      this.props.innerRef(el);
+    }
+  };
 
   render() {
-    const { tagName, html, innerRef, ...props } = this.props;
+    const { tagName, html, ...props } = this.props;
 
     return React.createElement(
       tagName || 'div',
       {
         ...props,
-        ref: typeof innerRef === 'function' ? (current: HTMLElement) => {
-          innerRef(current)
-          this.el.current = current
-        } : innerRef || this.el,
+        ref: this.handleRef,
         onInput: this.emitChange,
         onBlur: this.props.onBlur || this.emitChange,
         onKeyUp: this.props.onKeyUp || this.emitChange,
@@ -66,17 +68,16 @@ export default class ContentEditable extends React.Component<Props> {
 
   shouldComponentUpdate(nextProps: Props): boolean {
     const { props } = this;
-    const el = this.getEl();
 
     // We need not rerender if the change of props simply reflects the user's edits.
     // Rerendering in this case would make the cursor/caret jump
 
     // Rerender if there is no element yet... (somehow?)
-    if (!el) return true;
+    if (!this.el) return true;
 
     // ...or if html really changed... (programmatically, not by user edit)
     if (
-      normalizeHtml(nextProps.html) !== normalizeHtml(el.innerHTML)
+      normalizeHtml(nextProps.html) !== normalizeHtml(this.el.innerHTML)
     ) {
       return true;
     }
@@ -90,22 +91,20 @@ export default class ContentEditable extends React.Component<Props> {
   }
 
   componentDidUpdate() {
-    const el = this.getEl();
-    if (!el) return;
+    if (!this.el) return;
 
     // Perhaps React (whose VDOM gets outdated because we often prevent
     // rerendering) did not update the DOM. So we update it manually now.
-    if (this.props.html !== el.innerHTML) {
-      el.innerHTML = this.lastHtml = this.props.html;
+    if (this.props.html !== this.el.innerHTML) {
+      this.el.innerHTML = this.lastHtml = this.props.html;
     }
-    replaceCaret(el);
+    replaceCaret(this.el);
   }
 
   emitChange = (originalEvt: React.SyntheticEvent<any>) => {
-    const el = this.getEl();
-    if (!el) return;
+    if (!this.el) return;
 
-    const html = el.innerHTML;
+    const html = this.el.innerHTML;
     if (this.props.onChange && html !== this.lastHtml) {
       // Clone event with Object.assign to avoid
       // "Cannot assign to read only property 'target' of object"
@@ -143,5 +142,5 @@ export interface Props extends DivProps {
   tagName?: string,
   className?: string,
   style?: Object,
-  innerRef?: React.RefObject<HTMLElement> | Function,
+  innerRef?: Function,
 }