Color swatches ( 🟩 green 🟥 #ffaaaa )

[nik-rev]

This PR adds a feature where a colorful square appears next to colors

We're building on top of the existing LSP by Helix by adding support for the textDocument/documentColor language server protocol method.

It's so nice, because we aren't actually hard-coding anything at all. This is not depedant on anything specific like CSS or tailwind, but rather a general implementations that works for any server which implements it. Since Helix already implements most of the LSP, we are building on top of it here.

The advantage here is that we have a lot more flexibility. For example, a popular neovim plugin that adds this functionality is nvchad-colorizer which hard-codes all the values which means if you define custom colors in your config they won't be shown. Here we won't have that problem

Closes #1115

[gabydd]

most of this is good but the decorations need some changes for the first change see my comment for the second problem I am not sure how to solve it but because of how decorations are done being attached to an actual char index when softwrap is at the same char index as the color indicator then the softwrap indicator is highlighted instead see the attached screenshot

[gabydd]

something to note here for interested parties the reason that we decided to go with decorations for now is that InlineAnnotations are styled by using theme variables(this is the Highlight newtype in the code which is an index into one of the theme styles) but for this feature we need to be able to give arbitrary styles to the text. I am sure there are other ways this could have been done but this seemed like the least invasive way to achieve this though it does still suffer a bit cause we cant differintiate from if this is the color indicator or the softwrap indicator unless we compare the grapheme.

[nik-rev]

something to note here for interested parties the reason that we decided to go with decorations for now is that InlineAnnotations are styled by using theme variables(this is the Highlight newtype in the code which is an index into one of the theme styles) but for this feature we need to be able to give arbitrary styles to the text. I am sure there are other ways this could have been done but this seemed like the least invasive way to achieve this though it does still suffer a bit cause we cant differintiate from if this is the color indicator or the softwrap indicator unless we compare the grapheme.

Not totally sure why but after using your latest commit for some time I noticed that the colors take a long time to update. Or they just don't update at all. For now I've reverted it

[gabydd]

Ah good to know, sorry about that I'll have a better version just have been out all day

[TornaxO7]

Just some suggestions.

[TornaxO7]

[nik-rev]

@the-mikedavis I finally fixed this PR, previously it was very hacky and it would also color the wrap indicator. Now, that bug is gone. it's ready to be reviewed now (I realise I should've put it as a draft earlier)

[David-Else]

I found a glitch:

#TableOfContents {
  background-color: #e5e7eb;
  font-size: 0.875rem; /* This is equivalent to Tailwind's text-sm, needs to change with mobile */
  line-height: 1.25rem; /* Tailwind adjusts line-height for better spacing, needs to change with mobile */
}

Insert the cursor right in front of the color block and enter insert mode, autocomplete appears, go through the colors, you will get this:

[nik-rev]

I found a glitch:

#TableOfContents {
  background-color: #e5e7eb;
  font-size: 0.875rem; /* This is equivalent to Tailwind's text-sm, needs to change with mobile */
  line-height: 1.25rem; /* Tailwind adjusts line-height for better spacing, needs to change with mobile */
}

Insert the cursor right in front of the color block and enter insert mode, autocomplete appears, go through the colors, you will get this:

Hmm this is weird. Likely the positions of the color swatches aren't being updated when doing the auto complete transaction

[q60]

sorry for interrupting, but here i've made a tiny language server that sends documentColor on colors like "#ABC", "#AABBCC", "#AABBCCDD" - https://github.com/q60/uwu_colors. i guess it's a bit janky but it works

cc @DoctorRyner

[nik-rev]

sorry for interrupting, but here i've made a tiny language server that sends documentColor on colors like "#ABC", "#AABBCC", "#AABBCCDD" - https://github.com/q60/uwu_colors. i guess it's a bit janky but it works

cc @DoctorRyner

wow, that is really cool! Thanks for sharing. I like how simple it is, makes it a good starting point for learning how to create your own language server

[q60]

sorry for interrupting, but here i've made a tiny language server that sends documentColor on colors like "#ABC", "#AABBCC", "#AABBCCDD" - https://github.com/q60/uwu_colors. i guess it's a bit janky but it works

wow, that is really cool! Thanks for sharing. I like how simple it is, makes it a good starting point for learning how to create your own language server

thanks for the kind words! i didn't think of making it an example on how to write a language server... which is ironic considering how i struggled because of the bad example code in tower_lsp docs with no information about handling files and their contents
i was looking looking at some language servers written in rust, and they do this in many different ways, that's a bit frustrating for me

i guess i will add comments to my code to make it more readable and understandable for someone who tries to write their own langserver! i am also planning to improve the regex situation and probably make some cli arguments so it'll work perfectly in different scenarios

[DoctorRainer]

sorry for interrupting, but here i've made a tiny language server that sends documentColor on colors like "#ABC", "#AABBCC", "#AABBCCDD" - https://github.com/q60/uwu_colors. i guess it's a bit janky but it works

cc @DoctorRyner

Wow, this is exactly what the world needed, you are a hero. And we don't deserve you