Selection cannot be seen

[benogle]

You're using background color on the color elements. The selection regions are z-index'd below the text, so when the background color is totally opaque, the selection cannot be seen.

I dont have a great solution right now. Maybe the color should be a bit transparent (.9?) so something changes when it's selected.

Love this package!

[petrbrzek]

I will try to listen for some event and add more opacity to background color. Dunno what event yet..

[benogle]

I admittedly havent tried this yet, but what about setting the opacity on the color you use to max of .9?

[MoOx]

I'm thinking about an other solution to fix this problem:
what about not highlithing the #hexa, but using a pseudo element instead ? No idea if it's possible with atom, but it can be great to just append a pseudo after (little square) that have the color (this point is also a good idea to eventually trigger a colorpicker) ?

[petrbrzek]

Update plugin and try it now. It's hiding background if selection occurs.

[benogle]

Good idea. It sorta works. I would probably take a little different approach, though. You basically need a function that takes one of those nodes and gives you back a screen Range object. Then you can just check to see if that range is in a selection.

Also that selectedTextLen global that's getting checked is super confusing. I'll see if I can write that function next week, and do a little pull req.

[benogle]

@MoOx I like the idea of a color picker. The little square might be an interesting experiment and work in place of the selection check.

[petrbrzek]

I've done some code refactoring in last two days and I've started to implement the color square idea.
You can see the the current plugin appearance below. I think it looks fine. It is also prepared for the color picker implementation. Unfortunately, I found that I can't use native color picker <input type="color">. It just doesn't work. :(
Do you know about some simple color picker implementation?
I like the Chrome dev tools color picker for example.

[MoOx]

You should take a look to this plugin https://github.com/thomaslindstrom/color-picker

[MoOx]

Just a thing: why the square is after the ; ? Because you can have multiple color (eg: linear-gradient definition)