feat: matched character highlighting

[Saghen]

The code has been slammed into the existing draw code, but I'll rework the drawing code in this PR too

Closes #174
Closes #154

[Saghen]

Alignment to the label can be done dynamically so it'll work with any draw function. Added support for label description as well (using vtsls in the screenshot)

[stefanboca]

Looks great! How did you right-align the label details? I'd like to be able to do the same with kind if possible, but I don't see options for that anywhere.

BTW, there's a vim.print at the top of render.new that probably shouldn't be there :)

[Saghen]

Shit 😂 fixed it on main. You can right align by using fill = true on the element that comes before it. But if you're looking to put the kind in, you might want to put that in a separate column instead, so that the text is left aligned instead of right aligned:
{ { 'label' }, { 'kind_icon', 'kind' } }

It's not obvious how this all works at the moment, so I might make some more changes to this API

[stefanboca]

I figured it out, thanks! I was aiming for something similar to what draw = "reversed" was previously.

Here's the relevant config for reference:

draw = {
  padding = {1, 0},
  columns = { { "label", "label_description", gap = 1 }, { "kind_icon", "kind" } },
  components = {
    kind_icon = { width = { fill = true } },
  },
},

[Saghen]

Thanks! Added it to the default config docs. I'll make it more prominent closer to 1.0, when I write the full docs

[idelice]

@Saghen

Since you've completely changed how the draw is being configured, I'm having trouble finding a proper solution to how I can "draw' exactly what I had before: #156 (comment)

How am I supposed to approach this new config if I wanted the same result?

[jlimas]

@Saghen how do you achieve displaying the file containing the proposed autocompletion?

I would like to be able to know where these options are coming from since sometimes they are the same option and the only difference is the path or the file?

Thanks!

[jlimas]

I made it work, while reviewing the ctx object I noticed the value I needed comes in a different property.

Which should have been picked here?

https://github.com/Saghen/blink.cmp/blob/main/lua/blink/cmp/windows/render/context.lua#L47

but in my case it's in another location item.detail not sure if it's a bug or intentional.

If its a bug I'll be happy to submit a PR with the fix.

Thanks for the lib it's really cool @Saghen

[Saghen]

You might want to double check that you're sending require('blink.cmp').get_lsp_capabilities() to your LSP. It's also possible that your LSP doesn't support labelDetails. That detail property is slightly different, it's meant for the top of the documentation window.

[jlimas]

You were right I was not passing the get_lsp_capabilities I'm using lspzero so I added this

		for _, server in pairs(servers) do
			lspconfig[server].setup({
				capabilities = require("blink.cmp").get_lsp_capabilities(),
			})
		end

The LSP I'm using is TS_LS for TypeScript but still, this is the ctx object I'm getting after the changes without the details or description filled, so maybe as you said, its not supported? for now I can just fallback to that item entry which works for my use case.

{
  deprecated = false,
  icon_gap = "",
  item = {
    client_id = 1,
    cursor_column = 32,
    data = {
      cacheId = 1787
    },
    detail = "../commerce/interfaces/icart",
    kind = 8,
    label = "ICart",
    score_offset = 0,
    sortText = "�16",
    source_id = "lsp",
    source_name = "LSP",
    textEdit = {
      insert = {
        ["end"] = {
          character = 32,
          line = 41
        },
        start = {
          character = 30,
          line = 41
        }
      },
      newText = "ICart",
      replace = {
        ["end"] = {
          character = 32,
          line = 41
        },
        start = {
          character = 30,
          line = 41
        }
      }
    }
  },
  kind = "Interface",
  kind_icon = "󱡠",
  label = "ICart",
  label_description = "",
  label_detail = "",
  label_matched_indices = { 0, 1 },
  self = {
    align_to_component = "label",
    columns = { { "kind_icon", "kind",
        gap = 1
      }, { "label", "label_description",
        gap = 1
      } },
    components = {
      kind = {
        ellipsis = false,
        highlight = <function 1>,
        text = <function 2>,
        width = {
          fill = true
        }
      },
      kind_icon = {
        ellipsis = false,
        highlight = <function 3>,
        text = <function 4>
      },
      label = {
        ellipsis = false,
        highlight = <function 5>,
        text = <function 6>,
        width = {
          fill = true,
          max = 60
        }
      },
      label_description = {
        ellipsis = true,
        highlight = "BlinkCmpLabelDescription",
        text = <function 7>,
        width = {
          max = 30
        }
      }
    },
    gap = 1,
    padding = 1
  }
}

[Saghen]

Yeah ts_ls doesn't support it but you might want to look into vtsls which does

[jlimas]

Ahh that's really nice, just installed and it works, thanks a lot!