Add color indicator

[ArkadiuszMichalski]

Any chance to add some indicator for color, something like we have in palette.js addons: http://www.jeditoolkit.com/CodeMirror/demo/palette.html

This can be optional, and if turn on then it should be synhronized with slider, when we change color then coresponding color indicator will change too. This can be very useful to faster orientation for a visual representation of any declaration of color.

[georules]

I love this - it does remove a click to see what the color code represents. What do you think about modifying the textcolor instead of adding a dot?

I mocked this up using the palette plugin you provided. To get the demo to work I needed:

1. The latest version of CodeMirror (the one provided in the Inlet project for demonstration purposes is older and missing some functions palette.js depends on)
2. The regex that palette.js uses does not match colors in quotes. I added spaces around the color in the index.html demo as a hack just to see what it's like.

Check it out if you like (make sure to checkout the palette branch)

https://github.com/georules/Inlet/tree/palette

[georules]

I derped on my push. Repushed to the palette branch -- thanks to @enjalot for the heads up. Should work now.

[ArkadiuszMichalski]

Hi, thx for fast answear. I test your branch and have this feelings:

• modyfing dot (not text) is probably for prevent for situation when text has the same value as background, dot has some shadows, so even for the same color we see this. And having the same stable color for text (color value) is more practice and readable. Everyone can style this dot for what they want.
• ah I missing problem for "", but in future will be better not adding any additional space.
• next case is problem for activate/deactivate Inlet, would be nice if we can config this behavioiur in option; click on color is too invasive when I want just change value (without open slider) and the same is for closing, now me must click somewher outside slider, why not press any key (at least Escape)? For open would be better doubleclick/middleclick/click+someKey or click on color indicator (if exist).
• and last what is already worth mentioning; palette.js don't work correct in actual CodeMirror. I try find what is wrong but my knowlage around CM is too less, so only what I can do is presents steps for reproduce:

Old version http://www.jeditoolkit.com/CodeMirror/demo/palette.html works correct, but for new CM version check this:

1. Open above page (save them ass complet page and change CM to new version) or open your mockup example.
2. Copy example code, remove this code from CM, and again past code.
3. Indicator for colors aren't show up, we must make some trick, like 2 times past code and make one undo, or manualy goes to end of color value and press some key (its show up), etc.

This is very annoying, if you figure out how fix above problem please write.

[georules]

It seems to me that the palette.js is only scanning the lines to add the dot when the line is edited, or if the text was there from the initial load. This seems to be why if you copy-paste a line and don't edit it, the dot does not show up. I find if I edit the line after I copy-paste, that the dots do show. Two things:

1. I think that for the purposes of Inlet, we might go another path to directly provide the functionality rather than depending on a codemirror addon to be present (and also to avoid doing more regexes than is needed.) I think that adding an option when creating the inlet object like {colorIndicator:false} would be pretty simple. I think it would be cool enough to leave as a default-on and seems to be in the spirit of what Inlet intends to be.
2. For the purposes of debugging the palette plugin, do you have a repository that I can contribute to? I have suspicions for the bug you noted, but I have not looked into it far enough to know for sure. I think that conversion would be best placed elsewhere.

[ArkadiuszMichalski]

Hmm I don't have any live repo, but If you have any solution solving this "past problem" please put it on your mockup example and I will test.

Backing to Inlet, of course it will be better to having such things bult-in, without any depending on other addons (pallete.js is old and no longer maintained, missing in actual CM addons folder). In practice color indicator and pallete exist toogether, what we cane see in browser devs tools, so putting it to Inlet will be nice future.