Highlight Selection Matches

[TomMalbran]

I added a new preference to enable the match-highlighter addon from CodeMirror. When enabled and when a word is selected, it will highlight all the matches in the file. Similar to many other editors. CodeMirror Demo

I used the same style as in the CodeMirror demo, but maybe @larz0 might want to change it.

cc @redmunds since you merged a couple of this CM addons additions.

[larz0]

@TomMalbran how do I check this out?

[TomMalbran]

Add this to the preferences: "highlightMatches": true, and then select any word. Works best if the selected word is repeated several time.

In Sublime Text you can see the same behavior after selecting a word and seeing all the other matches surrounded with a black border.

[redmunds]

@TomMalbran For commands that do not support multiple selections, Brackets uses the primary selection, which is the last selection made (chronologically). But, this addon uses the closest selection to the start of the document. Is this just how CodeMirror works, or can that be changed?

[larz0]

@TomMalbran this is cool. It's better for theme devs if we don't use code mirror's base64 PNG background image. I'm using a 2px solid bottom border instead of 1px because I think it's better if the lines actually stand out so they can be seen effortlessly.

[TomMalbran]

@redmunds Right, I didn't noticed that before. It is how it works in CM: http://codemirror.net/demo/matchhighlighter.html. But others addons like the match tags: http://codemirror.net/demo/matchtags.html work fine. So it might be a bug in the implementation. I can open an issue in CM about that.

@larz0 I agree with you and that looks really nice. Is why I added you to the issue. By the way, what is the color for the border?

There is one other thing that I don't quite like and it is that the selected word also get the match highlight class, maybe that could be fixed in CM too.

[redmunds]

@larz0 @TomMalbran I think there is too much highlighting going on now with highlighting for selection matches, Find matches, and current selection.

What do you think about making selection match and Find highlighting mutually exclusive? In other words, if match highlighting is turned on, then there's no need to do Find highlighting (because it's already highlighted due to selection match highlighting) so it's automatically disabled. Then, since these are never used at the same time, the styling could even be the same.

[larz0]

@redmunds sounds good.

@TomMalbran that color is

.CodeMirror-focused .cm-matchhighlight {
    border-bottom: 2px solid #78B2F2;
}

[redmunds]

For selection matches, I'd like to see the same background-color that is now used for Find matches.

[TomMalbran]

@redmunds After doing a find, the editor no longer has focus, so the highlight on the matches are no longer visible. So in a way the highlights are mutually exclusive, but you can still do either a find or use the highlighting.

I don't agree with using the same color of the matches as we do with the Find results, since it would become to distractive, specially since you highlight all the time while programming, and the highlighted matches should be just a fast way to see other matches, but not a replacement for Find.

[larz0]

@redmunds I just realized that if we use the yellow background style on match highlight then we'd get text with blue background and yellow background when we do cmd+b which could seem a little strange.

[TomMalbran]

I still think it should be a subtle highlight to not make it to distracting while coding.

I would like it better if it didn't highlighted the selection. I'll make a request in CM later.

[TomMalbran]

Actually, if we used the color used for the selection for the bottom border, it might look better?

[larz0]

@TomMalbran I think it's too faint if we use the selection color.

[redmunds]

I see, it's already mutually exclusive. I'd still like to use the same highlighting as Find matches. Seems weird to have it different, and I can barely see the underscore. Maybe the highlighting could also be a preference?

UPDATE: What about same color (hue?) for background-color as Find match, but a lighter shade? That would be somewhat consistent, but not as strong.

[redmunds]

OK, here's the 2 cases where the selection match and Find match highlights overlap:

1. Ctrl-F, then type search argument
2. Select text in page, Ctrl-F

[TomMalbran]

@redmunds When I think of overlap I am thinking that you are able to see both the match highlights and the find results. But I am thinking that that is not what you are referring too. And instead I thoik that you are referring to the case that they mark the same results.

My point for using a subtle highlight which is different from the one used in Find is that when you select something, most of the times you are not looking to see the matches, but several times it becomes useful too see them. So I am thinking that the highlight should interfere with the coding. Now when you use find, you want to see the results, so the highlight should be noticeable.

Anyway I just tried how it worked in CodeBlocks (and IDE for c/c++) and the highlight matches really stand out in the same way as they might if we use the same background as Find.

Marijnh already fixed the primary selection issue: codemirror/codemirror5#2539. So it should work fin when we update CodeMirror.
I created a second issue to request to not highlight the selections: codemirror/codemirror5#2540. This might be needed if we decide to use a background color instead of a border.

[redmunds]

I think it's weird to highlight matches for both this addon and Find, but I guess this is an addon that off by default, so we'll let the user do it if they want.

UPDATE: I'm no longer seeing the selection match highlight during Find/Find Next. I'm not sure if it's the new highlight, or I was confusing the it with the bottom shadow.

[redmunds]

Merging.

[larz0]

[TomMalbran]

Awesome.

@redmunds At first I thought I saw it under the the find highlights, but then I saw that it was something else. Notice that the style is applied only when CM is focused, and when you are in the modal bar, CM isn't focused, so it shouldn't show the underlines.

[zela]

Hello! This improvent is very useful and good looking!

Maybe, there is some space for improvement! Did you see extension Quick Search?

It does quite the same thing, but it doesn't search any occurences of the highlighted word, just the same word. For example, if you have words "val" and "value" and select "val", your feature will highlight part of the "value", but that extension will highlight only whole words. I suppose it's more correct. What do you think?

[MiguelCastillo]

@TomMalbran I am very glad you added this! I was going to add it as part of the themes PR. :)

[TomMalbran]

@zela I think both approaches are good. The current addon kind of works like you want when there are no selections by changing the preference to {showToken: /\w/}. But if there is a selection it highlights everything. This PR adds the addon from CodeMirror, I didn't wrote the code, so you should ask for that change in the CodeMirror repo. Maybe it could be a new preference for that, and it might not be that hard to add, since some part of the code already works like that, so you could try to implement it.

@MiguelCastillo I noticed that, but it wasn't done in a nice way (using a global pref and not setting it in the Editor) Jeje. I saw the addon recently and really liked it. I used an extension before but was messing up with my selections so I had to uninstall it after some time.