reactjs-content-editable
Version:
React content editable component
36 lines • 1.78 kB
JavaScript
;
exports.__esModule = true;
exports.ContentEditable = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
/**
* ContentEditable Component
* @param html - html content
* @param onChange - return the updated html content
* @returns
*/
var ContentEditable = function (_a) {
var html = _a.html, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.style, style = _d === void 0 ? { height: 200 } : _d, innerRef = _a.innerRef, onChange = _a.onChange;
var _e = React.useState(html), content = _e[0], setContent = _e[1];
var contentRef = React.useRef(null);
var ref = typeof innerRef === 'string' ? undefined : innerRef || contentRef;
var normalizeHtml = function (str) {
return str && str.replace(/ |\u202F|\u00A0/g, ' ').replace(/<br \/>/g, '<br>');
};
React.useEffect(function () {
var _a;
var currentHtml = ref && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.innerHTML);
if (normalizeHtml(html) != normalizeHtml(currentHtml || '')) {
setContent(html);
}
}, [html]);
var emitChange = function (event) {
var newHtml = event.currentTarget.innerHTML;
if (html !== newHtml) {
onChange(newHtml);
}
};
return (React.createElement("div", { className: className, style: style, ref: ref, onInput: emitChange, onBlur: emitChange, onKeyUp: emitChange, onKeyDown: emitChange, contentEditable: !disabled, dangerouslySetInnerHTML: { __html: content } }));
};
exports.ContentEditable = ContentEditable;
//# sourceMappingURL=ContentEditable.js.map