diff --git a/web/js/textHighlight.js b/web/js/textHighlight.js
index c00fb1c..4098613 100644
--- a/web/js/textHighlight.js
+++ b/web/js/textHighlight.js
@@ -544,15 +544,38 @@ async function syncText(inputEl, overlayEl, tries = 1) {
}
});
- highlightedText = highlightedText
- .split(",")
- .map((tag) => {
- if (!tag.trim()) return tag;
- return `${tag}`;
- })
- .join(",");
+ const processNode = (node) => {
+ if (node.nodeType === Node.TEXT_NODE) {
+ // Split and wrap text nodes
+ return node.textContent
+ .split(",")
+ .map((tag) => {
+ if (!tag.trim()) return tag;
+ return `${tag}`;
+ })
+ .join(",");
+ } else if (node.nodeType === Node.ELEMENT_NODE) {
+ // For element nodes, preserve attributes but process inner content
+ const clone = node.cloneNode(false); // Shallow clone to keep attributes
+ const innerProcessed = Array.from(node.childNodes)
+ .map((child) => processNode(child))
+ .join("");
+ clone.innerHTML = innerProcessed;
+ return clone.outerHTML;
+ }
+ return "";
+ };
- overlayEl.innerHTML = highlightedText;
+ // Create a temporary container to parse HTML
+ const tempDiv = document.createElement("div");
+ tempDiv.innerHTML = highlightedText;
+
+ // Process all nodes recursively
+ let result = Array.from(tempDiv.childNodes)
+ .map((node) => processNode(node))
+ .join("");
+
+ overlayEl.innerHTML = result;
}
async function showTagTooltip(element, tag) {
@@ -590,7 +613,7 @@ async function showTagTooltip(element, tag) {
margin-bottom: ${description ? "8px" : "0"};
color: var(--comfy-menu-text);
`;
- titleElement.textContent = tag;
+ titleElement.textContent = booruApi.cleanTag(tag).replaceAll("_", " ");
tooltip.innerHTML = "";
tooltip.appendChild(titleElement);