search

alienzhou / web-highlighter

✨ A no-runtime dependency lib for text highlighting & persistence on any website ✨🖍️
https://alienzhou.github.io/web-highlighter/
MIT License
888 stars 144 forks source link

fix(classname): keep the only latest classname when wrapping a partial node or an overlap node #82

Closed alienzhou closed 3 years ago

alienzhou commented 3 years ago

After changing the className by .setOption(), highlighting a node still retains its existing classnames.

https://github.com/alienzhou/web-highlighter/blob/576508afd218d10218160d89b7b0ab048540d6dc/src/painter/dom.ts#L234-L236

https://github.com/alienzhou/web-highlighter/blob/576508afd218d10218160d89b7b0ab048540d6dc/src/painter/dom.ts#L278

As a result it may hit a wrong style rule.

With styles below

.yellow {
  background-color: #FF9;
}
.blue {
  background-color: #9FF;
}

The wrappers with class="yellow blue" and class="blue yellow" look the same. But they should be different.