Public
Edited
May 22, 2023
textRanges = [
{ start: 6, end: 26 },
{ start: 40, end: 60 },
]
{
const elem = html`<div style="max-width: 640px;" contentEditable="true"></div>`
elem.textContent = text
if (window.CSS.highlights && window.Highlight) {
const node = elem.childNodes[0]
const ranges = textRanges.map(textRange => {
const range = document.createRange()
range.setStart(node, textRange.start)
range.setEnd(node, textRange.end)
return range
})
const highlight = new window.Highlight(...ranges);
window.CSS.highlights.clear()
window.CSS.highlights.set("user-1-highlight", highlight);
}
const style = html`
<style>
::highlight(user-1-highlight) {
background-color: yellow;
color: black;
text-decoration: underline;
}
</style>
`
const root = document.createElement("root");
root.appendChild(elem)
root.appendChild(style)
//elem.textContent = text
elem.innerHTML = text
if (window.CSS.highlights && window.Highlight) {
const node = elem.childNodes[0]
const ranges = textRanges.map(textRange => {
const range = document.createRange()
range.setStart(node, textRange.start)
range.setEnd(node, textRange.end)
return range
})
const highlight = new window.Highlight(...ranges);
window.CSS.highlights.clear()
window.CSS.highlights.set("user-1-highlight", highlight);
}
return root
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
