3 ms·

The example on their website is editable and it looks like they overlay the highlighted output on top of the textarea with `pointer-events: none` like you menti

by debazel 10mo ago

The example on their website is editable and it looks like they overlay the highlighted output on top of the textarea with `pointer-events: none` like you mentioned. The code isn't minified so you can see how they do it by looking at the `doHighlight()` function here https://arborium.bearcove.eu/pkg/app.generated.js https://arborium.bearcove.eu/pkg/app.generated.js

mg 10mo ago
Oh, you are right! Hmm .. and the approach already shows its weaknesses when I play with it: When I search for something on the page, it gives me twice as many hits as there are. And jumps around two times to each hit when I use the "next" button. I wonder if that is fixable.
- knallfrosch 10mo ago
  One simply needs the Highlight API. I held back, but now even Firefox ESR supports it. https://developer.mozilla.org/en-US/docs/Web/API/Highlight https://developer.mozilla.org/en-US/docs/Web/API/Highlight All the trickery vanishes and you get first-class CSS support.
  - bakkoting 10mo ago
    And there's an open issue for that already: https://github.com/bearcove/arborium/issues/62 https://github.com/bearcove/arborium/issues/62
  - mg 10mo ago
    That works on the text inside a textarea? Is there a demo showcasing this somewhere?
- debazel 10mo ago
  There is a neat `inert` html attribute you can use to disable all interactions as well as hide the text from ctrl+f searches. (Sadly Safari is the weird one out, and does not exclude the content from searches.) https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
- fsfod 10mo ago
  GitHub had to solve the same problem when speeding up there code viewer. https://github.blog/engineering/architecture-optimization/crafting-a-better-faster-code-view/ https://github.blog/engineering/architecture-optimization/cr...

by debazel 10mo ago

mg 10mo ago

Oh, you are right! Hmm .. and the approach already shows its weaknesses when I play with it: When I search for something on the page, it gives me twice as many hits as there are. And jumps around two times to each hit when I use the "next" button. I wonder if that is fixable.

knallfrosch 10mo ago
One simply needs the Highlight API. I held back, but now even Firefox ESR supports it. https://developer.mozilla.org/en-US/docs/Web/API/Highlight https://developer.mozilla.org/en-US/docs/Web/API/Highlight All the trickery vanishes and you get first-class CSS support.
- bakkoting 10mo ago
  And there's an open issue for that already: https://github.com/bearcove/arborium/issues/62 https://github.com/bearcove/arborium/issues/62
- mg 10mo ago
  That works on the text inside a textarea? Is there a demo showcasing this somewhere?
debazel 10mo ago
There is a neat `inert` html attribute you can use to disable all interactions as well as hide the text from ctrl+f searches. (Sadly Safari is the weird one out, and does not exclude the content from searches.) https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
fsfod 10mo ago
GitHub had to solve the same problem when speeding up there code viewer. https://github.blog/engineering/architecture-optimization/crafting-a-better-faster-code-view/ https://github.blog/engineering/architecture-optimization/cr...