Implementing highlighting of certain words

[6peterlu]

I need to implement a toggleable highlighting of certain words, for example, highlighting all instances of the word "hello" when a button is pressed. This is a stepping stone to implementing something like customized document search, for example.

Applying highlights via $wrapSelectionInMarkNode is not bad, but I'm struggling to figure out how to get the right selection data to pass into this function.

What would be your suggestion for the golden path here? Thank you so much! Have been having a blast with Lexical so far.

[6peterlu]

I see that code highlighting is implemented by processing each node:

function getHighlightNodes(
  tokens: (string | Prism.Token)[],
): Array<LexicalNode> {
  const nodes: LexicalNode[] = [];

  tokens.forEach((token) => {
    if (typeof token === 'string') {
      const partials = token.split('\n');
      for (let i = 0; i < partials.length; i++) {
        const text = partials[i];
        if (text.length) {
          nodes.push($createCodeHighlightNode(text));
        }
        if (i < partials.length - 1) {
          nodes.push($createLineBreakNode());
        }
      }
    } else {
      const {content} = token;
      if (typeof content === 'string') {
        nodes.push($createCodeHighlightNode(content, token.type));
      } else if (
        Array.isArray(content) &&
        content.length === 1 &&
        typeof content[0] === 'string'
      ) {
        nodes.push($createCodeHighlightNode(content[0], token.type));
      } else if (Array.isArray(content)) {
        nodes.push(...getHighlightNodes(content));
      }
    }
  });

  return nodes;
}

but in my case text may be split across nodes.

[acywatson]

This is kind of a tricky one, actually. You could do a $nodesOfType to get all TextNodes, then you'd need to check their content, find instances of the word you're looking for, get the start and end offsets of that instance, createRangeSelection from that, then $wrapSelectionInMarkNodes. That's the best I can think of at the moment.

[lwestenberg]

Did you already find a solution for this? I found this article from Logrocket that seems to do something similar with the CSS higlight api: https://blog.logrocket.com/getting-started-css-custom-highlight-api/

Maybe we can do something similar?

[thedjpetersen]

I am still looking for a solution to this problem - would be happy to get an update if possible

[barrymichaeldoyle]

Yeah this is also an area that I'm going to need a solution for soon. It would be awesome if there was a lexical plugin for this 🤔