react-contenteditable 3.3.1 → 3.3.5

package/README.md

@@ -4,6 +4,10 @@ react-contenteditable
 React component for a div with editable contents
 
 [![Build Status](https://travis-ci.org/lovasoa/react-contenteditable.svg?branch=master)](https://travis-ci.org/lovasoa/react-contenteditable)
+[![download count](https://img.shields.io/npm/dm/react-contenteditable.svg)](https://www.npmjs.com/package/react-contenteditable)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/react-contenteditable.svg)](https://www.npmjs.com/package/react-contenteditable)
+[![license](https://img.shields.io/github/license/lovasoa/react-contenteditable.svg)](https://github.com/lovasoa/react-contenteditable/blob/master/LICENSE)
+
 
 ## Install
 
@@ -48,11 +52,28 @@ class MyComponent extends React.Component {
 |disabled|use true to disable editing|Boolean|
 |onChange|called whenever `innerHTML` changes|Function|
 |onBlur|called whenever the html element is [blurred](https://developer.mozilla.org/en-US/docs/Web/Events/blur)|Function|
+|onFocus|event fires when an element has received [focus](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event)|Function|
 |onKeyUp|called whenever a key is released|Function|
 |onKeyDown|called whenever a key is pressed |Function|
 |className|the element's [CSS class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class)|String|
 |style|a collection of CSS properties to apply to the element|Object|
 
+## Known Issues
+If you are using hooks, please see [this issue](https://github.com/lovasoa/react-contenteditable/issues/161). Using this component with [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate) doesn't work, but you can still use [`useRef`](https://reactjs.org/docs/hooks-reference.html#useref) : 
+
+```js
+const text = useRef('');
+
+const handleChange = evt => {
+    text.current = evt.target.value;
+};
+
+const handleBlur = () => {
+    console.log(text.current);
+};
+
+return <ContentEditable html={text.current} onBlur={handleBlur} onChange={handleChange} />
+```
 
 ## Examples
 

package/lib/react-contenteditable.d.ts

@@ -25,22 +25,21 @@ export default class ContentEditable extends React.Component<Props> {
         slot?: string | undefined;
         title?: string | undefined;
         color?: string | undefined;
-        key?: string | number | undefined;
         children?: React.ReactNode;
+        key?: string | number | undefined;
         defaultChecked?: boolean | undefined;
-        defaultValue?: string | string[] | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         contextMenu?: string | undefined;
-        draggable?: boolean | undefined;
+        draggable?: boolean | "false" | "true" | undefined;
         id?: string | undefined;
         lang?: string | undefined;
         placeholder?: string | undefined;
-        spellCheck?: boolean | undefined;
+        spellCheck?: boolean | "false" | "true" | undefined;
         tabIndex?: number | undefined;
-        inputMode?: string | undefined;
-        is?: string | undefined;
+        translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: string | undefined;
         about?: string | undefined;
@@ -62,9 +61,11 @@ export default class ContentEditable extends React.Component<Props> {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        inputMode?: "search" | "none" | "text" | "numeric" | "tel" | "url" | "email" | "decimal" | undefined;
+        is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: boolean | "false" | "true" | undefined;
-        'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+        'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
         'aria-busy'?: boolean | "false" | "true" | undefined;
         'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
         'aria-colcount'?: number | undefined;
@@ -253,8 +254,8 @@ export default class ContentEditable extends React.Component<Props> {
         onGotPointerCaptureCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
         onLostPointerCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
         onLostPointerCaptureCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
-        onScroll?: ((event: React.UIEvent<HTMLDivElement>) => void) | undefined;
-        onScrollCapture?: ((event: React.UIEvent<HTMLDivElement>) => void) | undefined;
+        onScroll?: ((event: React.UIEvent<HTMLDivElement, UIEvent>) => void) | undefined;
+        onScrollCapture?: ((event: React.UIEvent<HTMLDivElement, UIEvent>) => void) | undefined;
         onWheel?: ((event: React.WheelEvent<HTMLDivElement>) => void) | undefined;
         onWheelCapture?: ((event: React.WheelEvent<HTMLDivElement>) => void) | undefined;
         onAnimationStart?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
@@ -269,7 +270,7 @@ export default class ContentEditable extends React.Component<Props> {
     }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
     shouldComponentUpdate(nextProps: Props): boolean;
     componentDidUpdate(): void;
-    emitChange: (originalEvt: React.SyntheticEvent<any, Event>) => void;
+    emitChange: (originalEvt: React.SyntheticEvent<any>) => void;
     static propTypes: {
         html: PropTypes.Validator<string>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/react-contenteditable.js

@@ -23,6 +23,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -34,13 +53,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -51,20 +63,10 @@ var PropTypes = __importStar(require("prop-types"));
 function normalizeHtml(str) {
     return str && str.replace(/&nbsp;|\u202F|\u00A0/g, ' ');
 }
-function findLastTextNode(node) {
-    if (node.nodeType === Node.TEXT_NODE)
-        return node;
-    var children = node.childNodes;
-    for (var i = children.length - 1; i >= 0; i--) {
-        var textNode = findLastTextNode(children[i]);
-        if (textNode !== null)
-            return textNode;
-    }
-    return null;
-}
 function replaceCaret(el) {
     // Place the caret at the end of the element
-    var target = findLastTextNode(el);
+    var target = document.createTextNode('');
+    el.appendChild(target);
     // do not move caret if element was not focused
     var isTargetFocused = document.activeElement === el;
     if (target !== null && target.nodeValue !== null && isTargetFocused) {
@@ -112,7 +114,7 @@ var ContentEditable = /** @class */ (function (_super) {
     ContentEditable.prototype.render = function () {
         var _this = this;
         var _a = this.props, tagName = _a.tagName, html = _a.html, innerRef = _a.innerRef, props = __rest(_a, ["tagName", "html", "innerRef"]);
-        return React.createElement(tagName || 'div', __assign({}, props, { ref: typeof innerRef === 'function' ? function (current) {
+        return React.createElement(tagName || 'div', __assign(__assign({}, props), { ref: typeof innerRef === 'function' ? function (current) {
                 innerRef(current);
                 _this.el.current = current;
             } : innerRef || this.el, onInput: this.emitChange, onBlur: this.props.onBlur || this.emitChange, onKeyUp: this.props.onKeyUp || this.emitChange, onKeyDown: this.props.onKeyDown || this.emitChange, contentEditable: !this.props.disabled, dangerouslySetInnerHTML: { __html: html } }), this.props.children);
@@ -143,8 +145,9 @@ var ContentEditable = /** @class */ (function (_super) {
         // 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;
+            el.innerHTML = this.props.html;
         }
+        this.lastHtml = this.props.html;
         replaceCaret(el);
     };
     ContentEditable.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-contenteditable",
-  "version": "3.3.1",
+  "version": "3.3.5",
   "description": "React component representing an element with editable contents",
   "main": "./lib/react-contenteditable.js",
   "types": "./lib/react-contenteditable.d.ts",
@@ -8,7 +8,7 @@
     "react": ">=16.3"
   },
   "author": "Ophir LOJKINE (original code posted by Sebastien Lorber on stackoverflow)",
-  "license": " Apache-2.0",
+  "license": "Apache-2.0",
   "keywords": [
     "react-component",
     "contenteditable",
@@ -21,9 +21,9 @@
     "url": "https://github.com/lovasoa/react-contenteditable.git"
   },
   "devDependencies": {
-    "@types/react": "^16.8.23",
-    "react": "^16.8.6",
-    "typescript": "^3.5.3"
+    "@types/react": "^16.9.37",
+    "react": "^16.13.1",
+    "typescript": "^3.9.5"
   },
   "scripts": {
     "compile": "tsc",
@@ -31,7 +31,7 @@
     "prepare": "npm run compile"
   },
   "dependencies": {
-    "@types/prop-types": "^15.7.1",
+    "prop-types": "^15.7.1",
     "fast-deep-equal": "^2.0.1"
   }
 }