@light-sheet/react/esm/components/SheetOverlay/ContentEditable.js

FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
import React, { useCallback, useEffect, useRef } from "react";
import _ from "lodash";
var ContentEditable = function ContentEditable(_ref) {
  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
  var lastHtml = useRef("");
  var root = useRef(null);
  var autoFocus = props.autoFocus,
    initialContent = props.initialContent,
    onChange = props.onChange;
  useEffect(function () {
    if (autoFocus) {
      var _root$current;
      (_root$current = root.current) === null || _root$current === void 0 || _root$current.focus();
    }
  }, [autoFocus]);

  // UNSAFE_componentWillUpdate
  useEffect(function () {
    if (initialContent && root.current != null) {
      root.current.innerHTML = initialContent;
    }
  }, [initialContent]);
  var fnEmitChange = useCallback(function (__, isBlur) {
    var html;
    if (root.current != null) {
      html = root.current.innerHTML;
    }
    if (onChange && html !== lastHtml.current) {
      onChange(html || "", isBlur);
    }
    lastHtml.current = html || "";
  }, [root, onChange]);
  var innerRef = props.innerRef,
    _onBlur = props.onBlur;
  var allowEdit = props.allowEdit;
  if (_.isNil(allowEdit)) allowEdit = true;
  return /*#__PURE__*/React.createElement("div", _extends({
    onDoubleClick: function onDoubleClick(e) {
      return e.stopPropagation();
    },
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, _.omit(props, "innerRef", "onChange", "html", "onBlur", "autoFocus", "allowEdit", "initialContent"), {
    ref: function ref(e) {
      root.current = e;
      innerRef === null || innerRef === void 0 || innerRef(e);
    },
    tabIndex: 0,
    onInput: fnEmitChange,
    onBlur: function onBlur(e) {
      fnEmitChange(null, true);
      _onBlur === null || _onBlur === void 0 || _onBlur(e);
    },
    contentEditable: allowEdit
  }));
};
export default ContentEditable;