React component with sane defaults to make any element contentEditable. 

React component with sane defaults to make any element contentEditable

jesstelford

ashleyw

strass

raphasilvac

react-sane-contenteditable

Object.defineProperty(exports, "__esModule", {

var _react2 = _interopRequireDefault(_react);

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

  caretPosition: _propTypes2.default.oneOf(['start', 'end']),

  // The element to make contenteditable.

  // Takes an element string ('div', 'span', 'h1') or a styled component

  tagName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),

  _inherits(ContentEditable, _Component);

    _classCallCheck(this, ContentEditable);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(ContentEditable).call(this));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "insertAtCaret", function (prevValue, valueToInsert) {

      var _this$getRange = _this.getRange(),

          startOffset = _this$getRange.startOffset,

          endOffset = _this$getRange.endOffset;

      var prefix = prevValue.slice(0, startOffset);

      var suffix = prevValue.slice(endOffset);

      return [prefix, valueToInsert, suffix].join('');

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onBlur", function (ev) {

      if ((0, _utils.isFunction)(onBlur)) {

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onInput", function (ev) {

      var maxLength = _this.props.maxLength;

      var innerText = ev.target.innerText;

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onKeyDown", function (ev) {

          maxLength = _this$props.maxLength,

          multiLine = _this$props.multiLine,

          onKeyDown = _this$props.onKeyDown;

      var value = innerText; // Return key

          var caretPosition = _this.getCaret();

          var hasLineBreak = /\r|\n/g.test(innerText.charAt(caretPosition));

          var hasCharAfter = !!innerText.charAt(caretPosition);

          value = _this.insertAtCaret(innerText, hasLineBreak || hasCharAfter ? '\n' : '\n\n');

            caretPosition: caretPosition + 1,

      } // Ensure we don't exceed `maxLength` (keycode 8 === backspace)

      if (maxLength && !ev.metaKey && ev.which !== 8 && innerText.length >= maxLength) {

      if ((0, _utils.isFunction)(onKeyDown)) {

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onKeyUp", function (ev) {

      if ((0, _utils.isFunction)(onKeyUp)) {

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onPaste", function (ev) {

      var pastedValue = ev.clipboardData.getData('text');

      var value = _this.insertAtCaret(_this.ref.innerText, pastedValue);

      var _this$getRange2 = _this.getRange(),

          startOffset = _this$getRange2.startOffset;

        caretPosition: _this.getSafeCaretPosition(startOffset + pastedValue.length, value),

        value: _this.sanitiseValue(value)

        var onPaste = _this.props.onPaste;

        if ((0, _utils.isFunction)(onPaste)) {

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setRef", function (ref) {

      var innerRef = _this.props.innerRef;

      if ((0, _utils.isFunction)(innerRef)) {

      caretPosition: _this.getCaretPositionFromProps(props),

      value: _this.sanitiseValue(props.content, props)

    _this.selection = document.getSelection();

    value: function componentDidMount() {

import _extends from "@babel/runtime/helpers/extends";

import _objectSpread from "@babel/runtime/helpers/objectSpread";

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";

import _createClass from "@babel/runtime/helpers/createClass";

import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";

import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

import _inherits from "@babel/runtime/helpers/inherits";

import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";

import _defineProperty from "@babel/runtime/helpers/defineProperty";

import React, { Component } from 'react';

import { isFunction, omit } from './utils';

  caretPosition: PropTypes.oneOf(['start', 'end']),

  tagName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

      if (innerText.length >= maxLength) {

        value: _this.sanitiseValue(innerText)

        var onChange = _this.props.onChange;

  "description": "React component with sane defaults to make any element contentEditable",

  "keywords": ["content-editable", "contenteditable", "editable", "react", "react-component"],

  "homepage": "https://github.com/ashleyw/react-sane-contenteditable#readme",

    "url": "https://github.com/ashleyw/react-sane-contenteditable/issues"

    "url": "git+https://github.com/ashleyw/react-sane-contenteditable.git"

  "author": "Ashley Williams <hi@ashleyw.co.uk>",

  "contributors": ["Nick Aspinall", "Raphael Silva Cavalcanti", "Jess Telford"],

  "files": ["lib", "LICENSE", "README.md"],

  "main": "lib/cjs/react-sane-contenteditable.js",

  "module": "lib/esm/react-sane-contenteditable.js",

    "build": "yarn run build:clean && yarn run build:esm && yarn run build:cjs && yarn run build:umd",

    "build:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir lib/cjs",

    "build:clean": "rimraf dist/ && rimraf lib/",

    "build:esm": "cross-env BABEL_ENV=esm babel src --out-dir lib/esm",

    "build:umd": "rollup -c && rimraf dist/index.esm.js",

    "demo": "rollup -c rollup.config.demo.js",

    "dev:test": "jest --watch --verbose false",

    "lint:prettier": "prettier --write src/**/*",

      "pre-commit": "yarn run lint && yarn run build && git add lib/* .size-snapshot.json",

    "@babel/plugin-proposal-class-properties": "^7.0.0-rc.1",

    "@babel/plugin-transform-runtime": "^7.1.0",

    "@babel/plugin-transform-spread": "^7.0.0-rc.1",

    "@babel/preset-react": "^7.0.0-rc.1",

    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",

    "babel-plugin-transform-react-remove-prop-types": "^0.4.15",

    "rollup-plugin-babel": "^4.0.0-beta.8",

    "rollup-plugin-babel-minify": "^5.0.0",

    "rollup-plugin-node-resolve": "^3.3.0",

    "rollup-plugin-size-snapshot": "^0.7.0",

		@@ -114,3 +114,3 @@ "use strict";
		var value = _this.state.value;
		onChange(value);
		onChange(ev, value);
		}
		@@ -117,0 +117,0 @@ });

		@@ -81,3 +81,3 @@ import _extends from "@babel/runtime/helpers/extends";
		var value = _this.state.value;
		onChange(value);
		onChange(ev, value);
		}
		@@ -84,0 +84,0 @@ });

		{
		"name": "react-sane-contenteditable",
		"version": "1.6.0",
		"version": "1.6.1",
		"description": "React component with sane defaults to make any element contentEditable",
		@@ -5,0 +5,0 @@ "keywords": ["content-editable", "contenteditable", "editable", "react", "react-component"],

Fixed alerts

Improved metrics