bvaughn / highlight-words-core Goto Github PK

Is there anyway (like a ref or something) to access the active highlighted element? I need to scroll to the new active element each time the activeIndex changes.

babel-runtime is listed as dependency in package.json rather than devDependency - is that intended? How is it required to use this lib? There's no dependency on React, but why is there a dependency on Babel?

Hi :-)

babel-preset-flow has been added to dependencies, whereas it seems like it should be in devDependencies?
6189dfe#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R60

Hi @bvaughn, thanks for this package, very useful!

I wanted to see whether you'd be open to also returning a Text Fragment (blog post) in addition to the chunks matched in a string.

Eg.

1. Returning the Text Fragment Modules in Web for usage in the URL below, for matching and scrolling to that part of the page:
   https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Modules%20in%20Web
   
   
   
2. Returning the Text Fragment details%20about%20the-,API,-%2C%20see%20Experimenting%20with for usage in the URL below, for matching a specific instance of API in the page:
   https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=details%20about%20the-,API,-%2C%20see%20Experimenting%20with
   

Ideas for implementation can be inspired by the doGenerateFragment function in fragment-generation-utils.js from the text-fragments-polyfill package:

https://github.com/GoogleChromeLabs/text-fragments-polyfill//blob/e5252cb6eba768cdc4166b27cbe8080fc67f37c7/src/fragment-generation-utils.js#L145-L243

const textToHighlight = "This is C++ some text to highlight."
const searchWords = ["This", "i", "C++"];

==》

SyntaxError
Invalid regular expression: /C++/: Nothing to repeat
eval
https://n9544l.csb.app/node_modules/highlight-words-core/dist/index.js:180:18
defaultFindChunks
https://n9544l.csb.app/node_modules/highlight-words-core/dist/index.js:173:5
findAll
https://n9544l.csb.app/node_modules/highlight-words-core/dist/index.js:112:16
$csb$eval
/src/index.js:5:23
2 |
3 | const textToHighlight = "This is C++ some text to highlight."
4 | const searchWords = ["This", "i", "C++"];

5 | const chunks = findAll({
| ^
6 | caseSensitive: false,
7 | searchWords,
8 | textToHighlight

So this can become rather complicated, and I have not thought this quite through yet, but here we go:

I would like a truncate functionality that limits the length of the highlighted text.
It should be able to replace the start, the end or both with a custom ellipsis.
It should find the index of the first highlight and perhaps allow for a custom number of letters or words to be present before the highlighted word. I guess knowing what is a word becomes a problem of language so number of letters should be a sufficient starting point.

It should not insert ellipsis if the string is short enough.

I needs to do all that before applying html elements like for instance bold.

I could not find any npm module for this. And due to its complexity I figure it needs to be part of the highlighter.

I'm not sure why yet, but if searchWords is immutable, findAll is failing.

Error: The sort method cannot be invoked on an Immutable data structure.

Looks like it's this sort:

But I don't see why/when searchWords gets modified.
It's used only in findChunks, and a new array is returned so I don't understand :/

I'll try to find the source later, but I'm creating the ticket in case you have an idea. FWIW, I'm using seamless-immutable.

I noticed that package would mess up a string if I pass in text that has markup in it. I needed it to ignore anchor tags, so that it would not mess up the href.

I was able to solve it by modifying the findChunks method

from

var regex = new RegExp(searchWord, 'gi');

to

var regex = new RegExp('('+searchWord+')(?![^<]*>)', 'gi');

Would this be something you want to include in this package? Right now im using my own fork.
I could submit a PR for this.