diff --git a/s4-main.js b/s4-main.js
index 3554794..b6aaf27 100644
--- a/s4-main.js
+++ b/s4-main.js
@@ -15,7 +15,8 @@
//alert("mypath="+mypath);
}
function escapeChars(old) {
- return old.replaceAll('"', '"')
+ return old.replaceAll('&', '&')
+ .replaceAll('"', '"')
.replaceAll("<", '<')
.replaceAll(">", '>');
}
@@ -1147,26 +1148,31 @@
}
unit = unit||document;
for (let td of unit.querySelectorAll("td.repl")) {
- let text = td.innerHTML;
- if (text.startsWith("\>#")) {
- let newline = text.indexOf("\n");
- let first, rest;
+ let firstC = td.firstChild;
+ // Direct replacing innerHTML breaks embedded DOM event handlers.
+ // So, we split td.repl into elements and replace the first
+ // textNode(nodeType==3) with hover-text embeded content.
+ if (firstC.nodeType==3 && firstC.nodeValue.startsWith(">#")) {
+ let newline = firstC.nodeValue.indexOf("\n");
+ let firstline;
if (newline > 0) {
- first = text.substring(0, newline);
- rest = text.substring(newline);
+ firstline = firstC.nodeValue.substring(0, 1+newline);
+ firstC.nodeValue = firstC.nodeValue.substring(1+newline);
} else {
- first = text;
- rest = "";
+ // Cannot be reached here, but leave this for robustness
+ firstline = firstC.nodeValue;
+ firstC.nodeValue = "";
}
- td.innerHTML = first.replace(
- /#([0-9]+)/g,
- (match, start, whole) => {
- let id = RegExp.$1
- return '' + match + '';
- }
- ) + rest;
+ td.insertAdjacentHTML(
+ 'afterbegin',
+ escapeChars(firstline).replace(
+ /#([0-9]+)/g,
+ (match, start, whole) => {
+ let id = RegExp.$1
+ return '' + match + '';
+ }));
}
}
}