question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

per-pattern className when passing an Array of strings to mark

See original GitHub issue

Is your feature request related to a problem? Please describe. Different patterns marked using different classes.

Describe the solution you’d like If I want to mark “E” in red and “A” in blue, the only solution is to initialize mark.js twice with two different regexps and a distinct opt.className for each. But with possibly up to 40 such patterns, mark.js may (likely?) be inefficient (didn’t tried yet) and may have to proceed many more DOM nodes and miss the opportunity of significant optimization logics.

Still:

  1. mark.js already supports multiple patterns (even if it compile them as one regex)
  2. mark.js seems to care greetly about capturing groups index

Describe a potential solution approach I think mark.js could (possibly?) keep track of the capturing group index in order to map them to metadata (eg: className) associated with the initial pattern so that during the replacing phase, wrapGroups() (and inner functions) could be passed the per-regexp class/element override) so that wrapRangeInTextNode is not stuck with only opt.className.

With this feature, mark() would possibly accept an object like {patternA: className, patternB: className2} or {patternA: {…optsA}}`. This also open the door at whether a list of patterns (instead of mere strings) could be passed with each having its own className…

Additional context

  • Use-case is for coloring characters (and/or adding images nearby of particular strings) for educational / mind-training purposes.
  • #450 probably needs to be merged first before any further modification is attempted to src/lib/mark.js.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
angezidcommented, Jun 7, 2022

It seems you are using diacritics. The current term can be gotten from filter callback:

let array = [ 'str1', 'str2', .. ];
let classNames = { 'str1' : 'class1', 'str2' : 'class2', .. };
let key;

context.mark(array, {
    'filter' : function(node, term, totalCount, count) {
        key = term;
        return true; 
    },
    'each' : function(node) {
        node.className = classNames[key];
    }
});
0reactions
stale[bot]commented, Jul 7, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use a array of strings as a options in the react-select
React select expect options props as array of object with property value and label <Select styles={ ...
Read more >
C# pass class as string and cast it from array - Stack Overflow
I have few nested classes like "BlueprintsManager.WorkingStandardBlueprint", and ArrayList that have instances of them. I would like to pass ...
Read more >
Passing array of objects as parameter in C++ - GeeksforGeeks
Syntax: classname array_name [size];. Below is the C++ program to illustrate the array of objects by calculating the highest marks among 3 ...
Read more >
little question about "any" data type and arrays - Google Groups
How can I know if a parameter of type "any" passed to a function is an array or no? ----. ClassName() function only...
Read more >
passing array of strings from Teststand to LV dll - NI Community
Solved: Hello, I am wondering, why is it not possible to pass an 1D string array from TestStand to a dll, which is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found