Marks and selections

1

Hi,

I have implemented a search feature that highlights all the matching ocurrences of a word, and “selects” the first one. When the user clicks on next (or previous), it selects the next (or previous) matching occurence.

The highlighting is done through a StateField + StateEffect + Decoration mark that applies a CSS style to the matching occurences. Another CSS style is supposed to be applied to the “selected” occurence. The way I do it is by dispatching a transaction that changes the current selection:

this.view.dispatch({
  selection: { anchor: match.position, head: match.position + match.text.length },
  scrollIntoView: true
});

And the CSS is

.cm-searching span::selection {
  background-color: var(--jp-search-selected-match-background-color) !important;
  color: var(--jp-search-selected-match-color) !important;
}

However, this doe snot work (the selection has the same style as the non selected occurrence). The only way to get the proper style is to select the ocurrence with the mouse (and the styl still applies to the same occurence, even if I click on next or previous, which changes the selection via the transaction dispatching).

Is this a bug or did I misunderstand something regarding state.selection?

2

Is the editor focused when you do this? The DOM selection will only be set when it is.

3

Ha indeed, that was the issue. Thanks a lot!