Can this be combined with lspkind?

[Limeoats]

Is it possible to combine this with LspKind's config? It looks like cmp's format takes a function, which I have using lspkind.cmp_format.

For example:

        format = lspkind.cmp_format({
            width_text = false,
            maxwidth = 50,
            ellipsis_char = "...",
            before = function(_, vim_item)
                return vim_item
            end
        })
        --format = require("tailwindcss-colorizer-cmp").formatter

[Yolo390]

Hey !

It should be great to get this functionality to combine tailwindcss-colorizer-cmp with lspkind.

Thanks !

[Edit]: I am not sure but you can look into this: https://github.com/onsails/lspkind-nvim/pull/30

I will try to find out how to integrate both together on the next weeks.

[roobert]

Thank you for opening this issue!

I don't have the ability to test this but I think you can probably just do: before = require("tailwindcss-colorizer-cmp").formatter? Please let me know if this works or not as I'm interested to know too.

[Yolo390]

require("tailwindcss-colorizer-cmp").formatter

Thanks for the fast reply !

It's seens working 👍🏼

This is my config for formatting table inside cmp.setup().

local tail_col_cmp_ok, tailwindcss_colorizer_cmp = pcall(require, "tailwindcss-colorizer-cmp")                                                                                                  
if not tail_col_cmp_ok then                                                                                                                                                                     
        return                                                                                                                                                                                  
end 

...

        formatting = {
                fields = {
                        cmp.ItemField.Menu,
                        cmp.ItemField.Abbr,
                        cmp.ItemField.Kind,
                },
                format = lspkind.cmp_format({
                        mode = "symbol_text",
                        menu = {
                                buffer = "[BUF]",
                                nvim_lsp = "[LSP]",
                                nvim_lua = "[LUA]",
                                path = "[PATH]",
                                luasnip = "[SNIP]",
                        },
                        before = tailwindcss_colorizer_cmp.formatter,
                }),
        },

Here is the result

But I think we can go further to integrate it better with lspkind. I need to investigate.

[Limeoats]

@roobert It works well, thank you! I'm interested to know what happens if we need yet another formatter to be included in the future since it seems only one function can be added to the before property, meaning only a total of two formatters can work together like this.

Thanks again for your help!

[Yolo390]

@roobert It works well, thank you! I'm interested to know what happens if we need yet another formatter to be included in the future since it seems only one function can be added to the before property, meaning only a total of two formatters can work together like this.

Thanks again for your help!

Same question on my side 😄 We need to find a workaround to integrate it better with lspkind.

[roobert]

I am also interested in whether supplying multiple functions to format the completions is possible. I'll do some more experimentation and see if it's possible. Otherwise, perhaps opening an issue against hrsh7th/nvim-cmp would be the best way forward.

Let's leave this issue open for the next week and see if we can solve it. 👍

[smileart]

I just did this:

  formatting = {
    format = require('lspkind').cmp_format({
      mode = 'symbol_text',
      maxwidth = 50,
      ellipsis_char = '...',
      before = function (entry, vim_item)
        vim_item = require('tailwindcss-colorizer-cmp').formatter(entry, vim_item)
        return vim_item
      end
    })
  }

Looks pretty much like @Flo-Slv's result. Did I do it right?

[joshwashywash]

This doesn't seem to work if you set the mode property to 'symbol'.

-- ...
formatting = {
  format = require('lspkind').cmp_format({
    before = require('tailwindcss-colorizer-cmp').formatter,
    mode = 'symbol',
  }),
}
-- ...

'symbol_text', 'text', and 'text_symbol' modes work but 'symbol' does not.

If you set the mode to 'symbol' like above, you just get a blank square.

edit

This may be an issue with lspkind but posting here in case anyone has a solution or advice.