)/gi, "")
.replace(/
/gi, "
")
.replace(/<\/div>/gi, "")
.replace(/^
/, "");
}
/**
* Guards against "Failed to execute 'removeChild'" when innerHTML is set
* while a browser async task still holds a reference to a child node.
* @param {HTMLElement} element
*/
export function patchRemoveChild(element) {
if (element.__removeChildPatched) return;
const original = element.removeChild;
element.removeChild = function (child) {
if (child.parentNode !== this) return child;
return original.call(this, child);
};
element.__removeChildPatched = true;
}
let reactDomMutationsPatched = false;
/**
* Inline edits rewrite a target element's subtree via `innerHTML`, which orphans
* the DOM nodes React still references in its fiber tree (including *nested*
* nodes like / inside an edited ). On its next render React then
* calls `removeChild`/`insertBefore` against nodes that are no longer where it
* expects, throwing "The node to be removed is not a child of this node".
*
* Patching the per-element `removeChild` only covers the edit target, not its
* descendants, so we guard the prototypes once instead: mismatched removals
* become no-ops and mismatched insertions fall back to an append, letting React
* reconcile to the correct state on the next render. Idempotent.
*/
export function patchReactDomMutations() {
if (reactDomMutationsPatched) return;
reactDomMutationsPatched = true;
const originalRemoveChild = Node.prototype.removeChild;
Node.prototype.removeChild = function (child) {
if (child && child.parentNode !== this) return child;
return originalRemoveChild.call(this, child);
};
const originalInsertBefore = Node.prototype.insertBefore;
Node.prototype.insertBefore = function (newNode, referenceNode) {
if (referenceNode && referenceNode.parentNode !== this) {
return originalInsertBefore.call(this, newNode, null);
}
return originalInsertBefore.call(this, newNode, referenceNode);
};
}
/**
* Escapes raw HTML characters while preserving allowed inline tags
* (strong, em, a, span, br, etc.) so user content is safe to inject into the DOM.
* @param {string} text
* @returns {string}
*/
export function sanitizeText(text) {
if (typeof text !== "string") return "";
const normalized = normalizeContentEditableHtml(text);
const preserved = [];
let result = normalized.replace(/<(\/?)(?:strong|em|b|i|u|a|span|br)\b[^>]*\/?>/gi, (match) => {
preserved.push(match);
return `\x00ITAG${preserved.length - 1}\x00`;
});
result = result
.replace(//g, ">")
.replace(/{/g, "{")
.replace(/}/g, "}");
result = result.replace(/\x00ITAG(\d+)\x00/g, (_, index) => preserved[parseInt(index)]);
return result;
}
/**
* Builds a CSS selector path to uniquely identify the element.
* Uses tag + classes + nth-of-type where IDs are unavailable.
* @param {HTMLElement} element
* @returns {string}
*/
export function buildCssSelector(element) {
const path = [];
let current = element;
let depth = 0;
const maxDepth = 20;
while (current && current.nodeType === Node.ELEMENT_NODE && depth < maxDepth) {
let selector = current.nodeName.toLowerCase();
if (current.id) {
selector += `#${current.id}`;
path.unshift(selector);
break;
}
if (current.className && typeof current.className === 'string') {
const classes = current.className.trim().split(/\s+/).filter(c => c.length > 0);
if (classes.length > 0) {
selector += `.${classes.join('.')}`;
}
}
if (current.parentElement) {
const siblings = Array.from(current.parentElement.children);
const sameTypeSiblings = siblings.filter(s => s.nodeName === current.nodeName);
if (sameTypeSiblings.length > 1) {
const index = sameTypeSiblings.indexOf(current) + 1;
selector += `:nth-of-type(${index})`;
}
}
path.unshift(selector);
current = current.parentElement;
depth++;
}
return path.join(' > ');
}
function getComputedStylesForElement(element) {
const computedStyles = window.getComputedStyle(element);
return Object.fromEntries(IMPORTANT_STYLES.map((style) => {
const styleValue = computedStyles.getPropertyValue(style)?.trim();
return styleValue && styleValue !== 'none' && styleValue !== 'normal'
? [style, styleValue]
: null;
}).filter(Boolean));
}
/**
* Extracts a rich DOM context payload for an element: selector, attributes,
* computed styles, and truncated text content.
* @param {HTMLElement} element
* @returns {object|null}
*/
export function extractDOMContext(element) {
if (!element) return null;
const textContent = element.textContent?.trim();
return {
outerHTML: element.outerHTML.slice(0, OUTER_HTML_MAX_LENGTH),
selector: buildCssSelector(element),
attributes: (element.attributes && element.attributes.length > 0)
? Object.fromEntries(Array.from(element.attributes).map((attr) => [attr.name, attr.value]))
: {},
computedStyles: getComputedStylesForElement(element),
textContent: (textContent && textContent.length > 0 && textContent.length < TEXT_CONTEXT_MAX_LENGTH)
? textContent
: null,
};
}
/**
* Walks the React fiber tree from a DOM node to find the source file path.
* @param {HTMLElement} node
* @returns {string|null}
*/
export function getFilePathFromNode(node) {
const fiberKey = Object.keys(node).find(k => k.startsWith('__reactFiber'));
if (!fiberKey) return null;
let currentFiber = node[fiberKey];
while (currentFiber) {
const source = currentFiber._debugSource
|| currentFiber.memoizedProps?.__source
|| currentFiber.pendingProps?.__source;
if (source?.fileName) return source.fileName;
currentFiber = currentFiber.return;
}
return null;
}
/**
* Strips the path prefix up to and including `public_html/`.
* @param {string} filePath
* @returns {string}
*/
export function stripFilePath(filePath) {
if (!filePath) return filePath;
const publicHtmlIndex = filePath.indexOf('public_html/');
if (publicHtmlIndex !== -1) return filePath.substring(publicHtmlIndex + 'public_html/'.length);
return filePath;
}