on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
132 lines (131 loc) • 4.19 kB
JavaScript
/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
const f = /* @__PURE__ */ new WeakMap();
function u(e) {
const o = [], t = (n, s) => {
if (f.set(n, s), n.nodeType === Node.TEXT_NODE) {
const r = n.textContent ?? "";
o.push({
path: s,
nodeType: "#text",
label: "#text",
textPreview: r.length > 40 ? `${r.slice(0, 40)}…` : r
});
return;
}
if (n.nodeType === Node.ELEMENT_NODE) {
const r = n, c = r.classList.length > 0 ? `.${Array.from(r.classList).join(".")}` : "";
o.push({
path: s,
nodeType: r.tagName,
label: `${r.tagName.toLowerCase()}${c}`
}), Array.from(n.childNodes).forEach((d, a) => {
t(d, s ? `${s}/${a}` : `${a}`);
});
}
};
return Array.from(e.childNodes).forEach((n, s) => {
t(n, `${s}`);
}), o;
}
function i(e, o) {
const t = f.get(e);
if (t) return t;
const n = [];
let s = e;
for (; s && s !== o; ) {
const r = s.parentNode;
if (!r) break;
const c = Array.from(r.childNodes).indexOf(s);
n.unshift(c), s = r;
}
return n.join("/");
}
function l(e) {
if (e.nodeType === Node.TEXT_NODE) {
const o = e.textContent ?? "";
return { nodeType: "#text", label: `"${o.length > 20 ? `${o.slice(0, 20)}…` : o}"` };
}
if (e.nodeType === Node.ELEMENT_NODE) {
const o = e, t = o.classList.length > 0 ? `.${Array.from(o.classList).join(".")}` : "";
return { nodeType: o.tagName, label: `${o.tagName.toLowerCase()}${t}` };
}
return { nodeType: String(e.nodeType), label: e.nodeName };
}
function $(e, o) {
const t = e.getRangeAt(0);
return {
collapsed: t.collapsed,
text: t.toString(),
start: {
path: i(t.startContainer, o),
offset: t.startOffset,
nodeType: l(t.startContainer).nodeType
},
end: {
path: i(t.endContainer, o),
offset: t.endOffset,
nodeType: l(t.endContainer).nodeType
},
commonAncestorPath: i(t.commonAncestorContainer, o)
};
}
function h(e, o) {
if (e.nodeType === Node.ELEMENT_NODE) {
const t = e;
return {
path: i(e, o),
tag: t.tagName,
classes: Array.from(t.classList)
};
}
return {
path: i(e, o),
tag: "#text",
classes: []
};
}
function p(e) {
const o = [
"── Format Debug Map ──",
`ID: ${e.id}`,
`Command: ${e.command} | Action: ${e.action}`,
`Selection: "${e.selection.text}" [collapsed=${e.selection.collapsed}]`,
` start: ${e.selection.start.path} offset ${e.selection.start.offset} (${e.selection.start.nodeType})`,
` end: ${e.selection.end.path} offset ${e.selection.end.offset} (${e.selection.end.nodeType})`,
` commonAncestor: ${e.selection.commonAncestorPath}`,
"",
"DOM Tree:"
];
return e.domTree.forEach((t) => {
const n = " ".repeat(t.path.split("/").length), s = t.textPreview ? ` "${t.textPreview}"` : "";
o.push(`${n}${t.path} ${t.label}${s}`);
}), o.push("", "Pipeline:"), e.pipeline.forEach((t, n) => {
const s = t.decision ? ` (${t.decision})` : "", r = t.output !== void 0 ? ` → ${JSON.stringify(t.output)}` : "";
o.push(` ${n + 1}. ${t.step}${s}${r}`);
}), e.nodesToModify.length > 0 && (o.push("", "Nodes to modify:"), e.nodesToModify.forEach((t) => {
const n = t.classes.length ? `.${t.classes.join(".")}` : "";
o.push(` ${t.path} ${t.tag}${n}`);
})), o.push("", `HTML before: ${e.htmlBefore}`, `HTML after: ${e.htmlAfter}`), o.join(`
`);
}
function T(e) {
typeof window < "u" && (window.__ON_CODE_MERGE_FORMAT_DEBUG__ = e);
}
function g() {
if (typeof window > "u") return !1;
try {
return window.location.search.includes("formatDebug=1") ? !0 : localStorage.getItem("on-codemerge:format-debug") === "1";
} catch {
return !1;
}
}
export {
u as buildDomTree,
l as describeNode,
p as formatDebugMapToString,
i as getNodePath,
g as isFormatDebugEnabled,
h as nodeToRef,
T as publishFormatDebugMap,
$ as serializeSelection
};