@dndbuilder.com/react
Version:
Drag and drop builder for React
71 lines (70 loc) • 2.23 kB
JavaScript
"use client";
import * as g from "react";
import { useRef as m, useEffect as R } from "react";
import b from "../../../../../_virtual/index12.js";
function s(e) {
return e && e.replace(/ |\u202F|\u00A0/g, " ").replace(/<br \/>/g, "<br>");
}
function E(e) {
if (!(typeof document > "u" || typeof window > "u"))
try {
const n = document.createTextNode("");
e.appendChild(n);
const a = document.activeElement === e;
if (n !== null && n.nodeValue !== null && a) {
const t = window.getSelection();
if (t !== null) {
const c = document.createRange();
c.setStart(n, n.nodeValue.length), c.collapse(!0), t.removeAllRanges(), t.addRange(c);
}
e instanceof HTMLElement && e.focus();
}
} catch (n) {
console.error("Error in replaceCaret:", n);
}
}
const C = (e) => {
const { tagName: n, html: a, innerRef: t, ...c } = e, u = m(a), i = m(null), f = () => t ? typeof t == "function" ? null : t.current : i.current, r = (l) => {
const d = f();
if (!d) return;
const o = d.innerHTML;
if (e.onChange && o !== u.current) {
const y = Object.assign({}, l, {
target: {
value: o
}
});
e.onChange(y);
}
u.current = o;
};
R(() => {
const l = f();
l && (e.html !== l.innerHTML && (l.innerHTML = e.html), u.current = e.html, E(l));
}, [e.html]);
const h = typeof t == "function" ? (l) => {
t(l), i.current = l;
} : t || i;
return g.createElement(
n || "div",
{
...c,
ref: h,
onInput: r,
onBlur: e.onBlur || r,
onKeyUp: e.onKeyUp || r,
onKeyDown: e.onKeyDown || r,
contentEditable: !e.disabled,
dangerouslySetInnerHTML: { __html: a }
},
e.children
);
}, w = g.memo(C, (e, n) => {
const a = e.innerRef && typeof e.innerRef != "function" ? e.innerRef.current : null;
return !a || s(n.html) !== s(a.innerHTML) ? !1 : e.disabled === n.disabled && e.tagName === n.tagName && e.className === n.className && e.innerRef === n.innerRef && e.placeholder === n.placeholder && b(e.style, n.style);
});
export {
C as ContentEditable,
w as default
};
//# sourceMappingURL=content-editable.js.map