const wrapper = document.createElement("p");
while (editor.firstChild) {
wrapper.appendChild(editor.firstChild);
}
editor.appendChild(wrapper);
// Restore caret
let newNode = wrapper.firstChild;
let offset = caretOffset;
// Traverse to the correct offset
const setCaret = (node, offset) => {
const range = document.createRange();
const selection = window.getSelection();
range.setStart(node, offset);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
};
const traverse = (node, depth = 0) => {
// Prevent infinite recursion
if (depth > 100) {
console.warn("Maximum traversal depth reached");
return;
}
if (node.nodeType === Node.TEXT_NODE) {
if (offset <= node.length) {
setCaret(node, offset);
throw "done"; // stop traversal
} else {
offset -= node.length;
}
} else {
for (let i = 0; i < node.childNodes.length; i++) {
traverse(node.childNodes[i], depth + 1);
}
}
};
try {
traverse(wrapper);
} catch (e) {}
}
function clearEditorFormatting(editor, tempDiv) {
// Always clear to truly empty string
editor.setAttribute("data-mlx-editor-empty", "true");
// Save current selection
const selection = window.getSelection();
const range = document.createRange();
// Completely clear the editor
range.selectNodeContents(editor);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
editor.innerHTML = "";
document.execCommand("removeFormat", false, null);
// Reset any formatting
// Optional: Reset any CSS styles
editor.style.cssText = "";
}
// Usage:
let content = editor.innerHTML;
content = transformHTML(content);
const tempDiv = document.createElement("div");
tempDiv.innerHTML = content;
let checkEditorIsEmptyAndGetTagName = isEditorEmpty(content);
// First check if the content is "effectively empty"
// Allow spaces at the beginning - don't strip them when checking for empty content
const hasOnlySpaces =
tempDiv.textContent &&
tempDiv.textContent.replace(/[\s\u00A0]/g, "").length === 0 &&
tempDiv.textContent.length > 0;
const isEffectivelyEmpty =
(!tempDiv.textContent || tempDiv.textContent.length === 0) &&
checkEditorIsEmptyAndGetTagName.isEmpty;
if (isEffectivelyEmpty) {
clearEditorFormatting(editor, checkEditorIsEmptyAndGetTagName.tempDiv);
onChange?.("");
} else {
editor.removeAttribute("data-mlx-editor-empty");
onChange?.(tempDiv.innerHTML);
}
// Update placeholder state after content changes
handlePlaceholder();
};
function isEditorEmpty(html) {
// Create a temporary DOM element to parse and inspect the structure
const temp = document.createElement("div");
temp.innerHTML = html;
// Remove only completely empty text nodes, but preserve those with spaces
temp.childNodes.forEach((node) => {
if (node.nodeType === Node.TEXT_NODE && node.textContent === "") {
temp.removeChild(node);
}
});
// Case 1: Only a single
or empty
if (
temp.children.length === 0 ||
temp.innerHTML === "
" ||
temp.innerHTML === ""
) {
let pTagDiv = document.createElement("P");
pTagDiv.innerHTML = "
";
return { tempDiv: pTagDiv, isEmpty: true };
}
// Case 2: Only a
with a
inside (ignore styles)
if (
temp.children.length === 1 &&
temp.children[0].children.length === 1 &&
temp.children[0].children[0].tagName === "BR"
) {
return { tempDiv: temp.children[0], isEmpty: true };
}
// Case 3: Only a
,
(unicode nbsp), or
(treat as empty) if (temp.children.length === 1 && temp.children[0].tagName === "P") { const inner = temp.children[0].innerHTML; // Check for HTML , unicode nbsp, or only whitespace if (inner === " " || inner === "\u00A0") { let pTagDiv = document.createElement("P"); pTagDiv.innerHTML = "