Show color swatches for LSP completions (#18665)

Closes #11991

Release Notes:

- Added support for color swatches for language server completions.

<img width="502" alt="Screenshot 2024-10-02 at 19 02 22"
src="https://github.com/user-attachments/assets/57e85492-3760-461a-9b17-a846dc40576b">

<img width="534" alt="Screenshot 2024-10-02 at 19 02 48"
src="https://github.com/user-attachments/assets/713ac41c-16f0-4ad3-9103-d2c9b3fa8b2e">

This implementation is mostly a port of the VSCode version of the
ColorExtractor. It seems reasonable the we should support _at least_
what VSCode does for detecting color swatches from LSP completions.

This implementation could definitely be better perf-wise by writing a
dedicated color parser. I also think it would be neat if, in the future,
Zed handled _more_ color formats — especially wide-gamut colors.

There are a few differences to the regexes in the VSCode implementation
but mainly so simplify the implementation :
- The hex vs rgb/hsl regexes were split into two parts
- The rgb/hsl regexes allow 3 or 4 color components whether hsla/rgba or
not and the parsing implementation accepts/rejects colors as needed

---------

Co-authored-by: Marshall Bowers <elliott.codes@gmail.com>

crates/editor/src/editor.rs

@@ -1228,6 +1228,10 @@ impl CompletionsMenu {
                                 None
                             };
 
+                        let color_swatch = completion
+                            .color()
+                            .map(|color| div().size_4().bg(color).rounded(px(2.)));
+
                         div().min_w(px(220.)).max_w(px(540.)).child(
                             ListItem::new(mat.candidate_id)
                                 .inset(true)
@@ -1243,6 +1247,7 @@ impl CompletionsMenu {
                                         task.detach_and_log_err(cx)
                                     }
                                 }))
+                                .start_slot::<Div>(color_swatch)
                                 .child(h_flex().overflow_hidden().child(completion_label))
                                 .end_slot::<Label>(documentation_label),
                         )

crates/project/src/color_extractor.rs

@@ -0,0 +1,297 @@
+use std::sync::LazyLock;
+
+use gpui::{Hsla, Rgba};
+use lsp::{CompletionItem, Documentation};
+use regex::{Regex, RegexBuilder};
+
+const HEX: &'static str = r#"(#(?:[\da-fA-F]{3}){1,2})"#;
+const RGB_OR_HSL: &'static str = r#"(rgba?|hsla?)\(\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*(?:,\s*(1|0?\.\d+))?\s*\)"#;
+
+static RELAXED_HEX_REGEX: LazyLock<Regex> = LazyLock::new(|| {
+    RegexBuilder::new(HEX)
+        .case_insensitive(false)
+        .build()
+        .expect("Failed to create RELAXED_HEX_REGEX")
+});
+
+static STRICT_HEX_REGEX: LazyLock<Regex> = LazyLock::new(|| {
+    RegexBuilder::new(&format!("^{HEX}$"))
+        .case_insensitive(true)
+        .build()
+        .expect("Failed to create STRICT_HEX_REGEX")
+});
+
+static RELAXED_RGB_OR_HSL_REGEX: LazyLock<Regex> = LazyLock::new(|| {
+    RegexBuilder::new(RGB_OR_HSL)
+        .case_insensitive(false)
+        .build()
+        .expect("Failed to create RELAXED_RGB_OR_HSL_REGEX")
+});
+
+static STRICT_RGB_OR_HSL_REGEX: LazyLock<Regex> = LazyLock::new(|| {
+    RegexBuilder::new(&format!("^{RGB_OR_HSL}$"))
+        .case_insensitive(true)
+        .build()
+        .expect("Failed to create STRICT_RGB_OR_HSL_REGEX")
+});
+
+/// Extracts a color from an LSP [`CompletionItem`].
+///
+/// Adapted from https://github.com/microsoft/vscode/blob/a6870fcb6d79093738c17e8319b760cf1c41764a/src/vs/editor/contrib/suggest/browser/suggestWidgetRenderer.ts#L34-L61
+pub fn extract_color(item: &CompletionItem) -> Option<Hsla> {
+    // Try to extract from entire `label` field.
+    parse(&item.label, ParseMode::Strict)
+        // Try to extract from entire `detail` field.
+        .or_else(|| {
+            item.detail
+                .as_ref()
+                .and_then(|detail| parse(detail, ParseMode::Strict))
+        })
+        // Try to extract from beginning or end of `documentation` field.
+        .or_else(|| match item.documentation {
+            Some(Documentation::String(ref str)) => parse(str, ParseMode::Relaxed),
+            Some(Documentation::MarkupContent(ref markup)) => {
+                parse(&markup.value, ParseMode::Relaxed)
+            }
+            None => None,
+        })
+}
+
+enum ParseMode {
+    Strict,
+    Relaxed,
+}
+
+fn parse(str: &str, mode: ParseMode) -> Option<Hsla> {
+    let (hex, rgb) = match mode {
+        ParseMode::Strict => (&STRICT_HEX_REGEX, &STRICT_RGB_OR_HSL_REGEX),
+        ParseMode::Relaxed => (&RELAXED_HEX_REGEX, &RELAXED_RGB_OR_HSL_REGEX),
+    };
+
+    if let Some(captures) = hex.captures(str) {
+        let rmatch = captures.get(0)?;
+
+        // Color must be anchored to start or end of string.
+        if rmatch.start() > 0 && rmatch.end() != str.len() {
+            return None;
+        }
+
+        let hex = captures.get(1)?.as_str();
+
+        return from_hex(hex);
+    }
+
+    if let Some(captures) = rgb.captures(str) {
+        let rmatch = captures.get(0)?;
+
+        // Color must be anchored to start or end of string.
+        if rmatch.start() > 0 && rmatch.end() != str.len() {
+            return None;
+        }
+
+        let typ = captures.get(1)?.as_str();
+        let r_or_h = captures.get(2)?.as_str();
+        let g_or_s = captures.get(3)?.as_str();
+        let b_or_l = captures.get(4)?.as_str();
+        let a = captures.get(5).map(|a| a.as_str());
+
+        return match (typ, a) {
+            ("rgb", None) | ("rgba", Some(_)) => from_rgb(r_or_h, g_or_s, b_or_l, a),
+            ("hsl", None) | ("hsla", Some(_)) => from_hsl(r_or_h, g_or_s, b_or_l, a),
+            _ => None,
+        };
+    }
+
+    return None;
+}
+
+fn parse_component(value: &str, max: f32) -> Option<f32> {
+    if let Some(field) = value.strip_suffix("%") {
+        field.parse::<f32>().map(|value| value / 100.).ok()
+    } else {
+        value.parse::<f32>().map(|value| value / max).ok()
+    }
+}
+
+fn from_hex(hex: &str) -> Option<Hsla> {
+    Rgba::try_from(hex).map(Hsla::from).ok()
+}
+
+fn from_rgb(r: &str, g: &str, b: &str, a: Option<&str>) -> Option<Hsla> {
+    let r = parse_component(r, 255.)?;
+    let g = parse_component(g, 255.)?;
+    let b = parse_component(b, 255.)?;
+    let a = a.and_then(|a| parse_component(a, 1.0)).unwrap_or(1.0);
+
+    Some(Rgba { r, g, b, a }.into())
+}
+
+fn from_hsl(h: &str, s: &str, l: &str, a: Option<&str>) -> Option<Hsla> {
+    let h = parse_component(h, 360.)?;
+    let s = parse_component(s, 100.)?;
+    let l = parse_component(l, 100.)?;
+    let a = a.and_then(|a| parse_component(a, 1.0)).unwrap_or(1.0);
+
+    Some(Hsla { h, s, l, a })
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use gpui::rgba;
+    use lsp::{CompletionItem, CompletionItemKind};
+
+    pub static COLOR_TABLE: LazyLock<Vec<(&'static str, Option<u32>)>> = LazyLock::new(|| {
+        vec![
+            // -- Invalid --
+            // Invalid hex
+            ("f0f", None),
+            ("#fof", None),
+            // Extra field
+            ("rgb(255, 0, 0, 0.0)", None),
+            ("hsl(120, 0, 0, 0.0)", None),
+            // Missing field
+            ("rgba(255, 0, 0)", None),
+            ("hsla(120, 0, 0)", None),
+            // No decimal after zero
+            ("rgba(255, 0, 0, 0)", None),
+            ("hsla(120, 0, 0, 0)", None),
+            // Decimal after one
+            ("rgba(255, 0, 0, 1.0)", None),
+            ("hsla(120, 0, 0, 1.0)", None),
+            // HEX (sRGB)
+            ("#f0f", Some(0xFF00FFFF)),
+            ("#ff0000", Some(0xFF0000FF)),
+            // RGB / RGBA (sRGB)
+            ("rgb(255, 0, 0)", Some(0xFF0000FF)),
+            ("rgba(255, 0, 0, 0.4)", Some(0xFF000066)),
+            ("rgba(255, 0, 0, 1)", Some(0xFF0000FF)),
+            ("rgb(20%, 0%, 0%)", Some(0x330000FF)),
+            ("rgba(20%, 0%, 0%, 1)", Some(0x330000FF)),
+            ("rgb(0%, 20%, 0%)", Some(0x003300FF)),
+            ("rgba(0%, 20%, 0%, 1)", Some(0x003300FF)),
+            ("rgb(0%, 0%, 20%)", Some(0x000033FF)),
+            ("rgba(0%, 0%, 20%, 1)", Some(0x000033FF)),
+            // HSL / HSLA (sRGB)
+            ("hsl(0, 100%, 50%)", Some(0xFF0000FF)),
+            ("hsl(120, 100%, 50%)", Some(0x00FF00FF)),
+            ("hsla(0, 100%, 50%, 0.0)", Some(0xFF000000)),
+            ("hsla(0, 100%, 50%, 0.4)", Some(0xFF000066)),
+            ("hsla(0, 100%, 50%, 1)", Some(0xFF0000FF)),
+            ("hsla(120, 100%, 50%, 0.0)", Some(0x00FF0000)),
+            ("hsla(120, 100%, 50%, 0.4)", Some(0x00FF0066)),
+            ("hsla(120, 100%, 50%, 1)", Some(0x00FF00FF)),
+        ]
+    });
+
+    #[test]
+    fn can_extract_from_label() {
+        for (color_str, color_val) in COLOR_TABLE.iter() {
+            let color = extract_color(&CompletionItem {
+                kind: Some(CompletionItemKind::COLOR),
+                label: color_str.to_string(),
+                detail: None,
+                documentation: None,
+                ..Default::default()
+            });
+
+            assert_eq!(color, color_val.map(|v| Hsla::from(rgba(v))));
+        }
+    }
+
+    #[test]
+    fn only_whole_label_matches_are_allowed() {
+        for (color_str, _) in COLOR_TABLE.iter() {
+            let color = extract_color(&CompletionItem {
+                kind: Some(CompletionItemKind::COLOR),
+                label: format!("{} foo", color_str).to_string(),
+                detail: None,
+                documentation: None,
+                ..Default::default()
+            });
+
+            assert_eq!(color, None);
+        }
+    }
+
+    #[test]
+    fn can_extract_from_detail() {
+        for (color_str, color_val) in COLOR_TABLE.iter() {
+            let color = extract_color(&CompletionItem {
+                kind: Some(CompletionItemKind::COLOR),
+                label: "".to_string(),
+                detail: Some(color_str.to_string()),
+                documentation: None,
+                ..Default::default()
+            });
+
+            assert_eq!(color, color_val.map(|v| Hsla::from(rgba(v))));
+        }
+    }
+
+    #[test]
+    fn only_whole_detail_matches_are_allowed() {
+        for (color_str, _) in COLOR_TABLE.iter() {
+            let color = extract_color(&CompletionItem {
+                kind: Some(CompletionItemKind::COLOR),
+                label: "".to_string(),
+                detail: Some(format!("{} foo", color_str).to_string()),
+                documentation: None,
+                ..Default::default()
+            });
+
+            assert_eq!(color, None);
+        }
+    }
+
+    #[test]
+    fn can_extract_from_documentation_start() {
+        for (color_str, color_val) in COLOR_TABLE.iter() {
+            let color = extract_color(&CompletionItem {
+                kind: Some(CompletionItemKind::COLOR),
+                label: "".to_string(),
+                detail: None,
+                documentation: Some(Documentation::String(
+                    format!("{} foo", color_str).to_string(),
+                )),
+                ..Default::default()
+            });
+
+            assert_eq!(color, color_val.map(|v| Hsla::from(rgba(v))));
+        }
+    }
+
+    #[test]
+    fn can_extract_from_documentation_end() {
+        for (color_str, color_val) in COLOR_TABLE.iter() {
+            let color = extract_color(&CompletionItem {
+                kind: Some(CompletionItemKind::COLOR),
+                label: "".to_string(),
+                detail: None,
+                documentation: Some(Documentation::String(
+                    format!("foo {}", color_str).to_string(),
+                )),
+                ..Default::default()
+            });
+
+            assert_eq!(color, color_val.map(|v| Hsla::from(rgba(v))));
+        }
+    }
+
+    #[test]
+    fn cannot_extract_from_documentation_middle() {
+        for (color_str, _) in COLOR_TABLE.iter() {
+            let color = extract_color(&CompletionItem {
+                kind: Some(CompletionItemKind::COLOR),
+                label: "".to_string(),
+                detail: None,
+                documentation: Some(Documentation::String(
+                    format!("foo {} foo", color_str).to_string(),
+                )),
+                ..Default::default()
+            });
+
+            assert_eq!(color, None);
+        }
+    }
+}

crates/project/src/project.rs

@@ -1,4 +1,5 @@
 pub mod buffer_store;
+mod color_extractor;
 pub mod connection_manager;
 pub mod debounced_delay;
 pub mod lsp_command;
@@ -36,7 +37,7 @@ use futures::{
 
 use git::{blame::Blame, repository::GitRepository};
 use gpui::{
-    AnyModel, AppContext, AsyncAppContext, BorrowAppContext, Context, EventEmitter, Model,
+    AnyModel, AppContext, AsyncAppContext, BorrowAppContext, Context, EventEmitter, Hsla, Model,
     ModelContext, SharedString, Task, WeakModel, WindowContext,
 };
 use itertools::Itertools;
@@ -47,7 +48,9 @@ use language::{
     Documentation, File as _, Language, LanguageRegistry, LanguageServerName, PointUtf16, ToOffset,
     ToPointUtf16, Transaction, Unclipped,
 };
-use lsp::{CompletionContext, DocumentHighlightKind, LanguageServer, LanguageServerId};
+use lsp::{
+    CompletionContext, CompletionItemKind, DocumentHighlightKind, LanguageServer, LanguageServerId,
+};
 use lsp_command::*;
 use node_runtime::NodeRuntime;
 use parking_lot::{Mutex, RwLock};
@@ -4445,6 +4448,16 @@ impl Completion {
     pub fn is_snippet(&self) -> bool {
         self.lsp_completion.insert_text_format == Some(lsp::InsertTextFormat::SNIPPET)
     }
+
+    /// Returns the corresponding color for this completion.
+    ///
+    /// Will return `None` if this completion's kind is not [`CompletionItemKind::COLOR`].
+    pub fn color(&self) -> Option<Hsla> {
+        match self.lsp_completion.kind {
+            Some(CompletionItemKind::COLOR) => color_extractor::extract_color(&self.lsp_completion),
+            _ => None,
+        }
+    }
 }
 
 #[derive(Debug)]

typos.toml

@@ -58,6 +58,8 @@ extend-ignore-re = [
     # ProtoLS crate with tree-sitter Protobuf grammar.
     "protols",
     # x11rb SelectionNotifyEvent struct field
-    "requestor"
+    "requestor",
+    # Not an actual typo but an intentionally invalid color, in `color_extractor`
+    "#fof"
 ]
 check-filename = true