Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add colored boxes next to colors #12308

Open
wants to merge 27 commits into
base: master
Choose a base branch
from

Conversation

nik-rev
Copy link
Contributor

@nik-rev nik-rev commented Dec 20, 2024

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

image

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


Big thank you to @gabydd for showing me how to apply custom Styles to InlineAnnotation :)

Most of these changes were based off existing work done by @poliorcetics with the Inlay Hints.


Closes #1115

@nik-rev nik-rev changed the title Color swatches Color swatches 🟥🟧🟨🟦🟩🟪 implementation of textDocument/documentColor Dec 20, 2024
@nik-rev nik-rev changed the title Color swatches 🟥🟧🟨🟦🟩🟪 implementation of textDocument/documentColor Color swatches, for example: 🟩 green, 🟥 #ffaaaa Dec 20, 2024
helix-lsp/src/client.rs Outdated Show resolved Hide resolved
helix-lsp/src/client.rs Outdated Show resolved Hide resolved
helix-term/src/commands/lsp.rs Outdated Show resolved Hide resolved
helix-term/src/commands/lsp.rs Show resolved Hide resolved
helix-term/src/commands/lsp.rs Show resolved Hide resolved
helix-term/src/commands/lsp.rs Outdated Show resolved Hide resolved
helix-view/src/document.rs Show resolved Hide resolved
helix-view/src/document.rs Show resolved Hide resolved
helix-view/src/document.rs Show resolved Hide resolved
helix-view/src/editor.rs Show resolved Hide resolved
@nik-rev nik-rev changed the title Color swatches, for example: 🟩 green, 🟥 #ffaaaa Color swatches ( 🟩 green 🟥 #ffaaaa ) Dec 20, 2024
Copy link
Member

@gabydd gabydd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
image

helix-term/src/ui/text_decorations.rs Show resolved Hide resolved
@gabydd
Copy link
Member

gabydd commented Dec 22, 2024

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 nik-rev force-pushed the textDocument/documentColor branch 2 times, most recently from 23abef8 to 5f59c19 Compare December 23, 2024 02:22
@nik-rev
Copy link
Contributor Author

nik-rev commented Dec 23, 2024

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
Copy link
Member

gabydd commented Dec 23, 2024

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

Copy link
Contributor

@TornaxO7 TornaxO7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just some suggestions.

helix-lsp/src/client.rs Outdated Show resolved Hide resolved
helix-term/src/commands/lsp.rs Outdated Show resolved Hide resolved
helix-term/src/commands/lsp.rs Outdated Show resolved Hide resolved
helix-term/src/commands/lsp.rs Outdated Show resolved Hide resolved
Co-authored-by: TornaxO7 <tornax@proton.me>
@nik-rev nik-rev force-pushed the textDocument/documentColor branch from 0eb1e4e to 54ff7a5 Compare December 23, 2024 13:39
@nik-rev nik-rev force-pushed the textDocument/documentColor branch from efca472 to d120a35 Compare December 23, 2024 15:39
Copy link
Contributor

@TornaxO7 TornaxO7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

peepoAwesome

@nik-rev nik-rev force-pushed the textDocument/documentColor branch from 5b205c6 to 67552f6 Compare December 25, 2024 18:29
@archseer archseer requested a review from the-mikedavis January 4, 2025 02:50
uncenter added a commit to uncenter/helix that referenced this pull request Jan 6, 2025
`patchy` is a tool which makes it easy to declaratively manage personal forks by automatically merging pull requests.

Check it out here: https://github.com/NikitaRevenco/patchy
@nik-rev nik-rev changed the title Color swatches ( 🟩 green 🟥 #ffaaaa ) feat: add colored boxes next to colors Jan 17, 2025
@kirawi kirawi added A-language-server Area: Language server client A-helix-term Area: Helix term improvements S-waiting-on-review Status: Awaiting review from a maintainer. labels Jan 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-helix-term Area: Helix term improvements A-language-server Area: Language server client S-waiting-on-review Status: Awaiting review from a maintainer.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Display the color of color-hex-codes, color functions
5 participants