lsp-client: Use label over item.insertText for displayed completion text

skovmand · September 9, 2025, 1:31pm

Hi!

Thanks once again for your great editor!

I’m receiving completions from an LSP-server that provides tab stops as part of the completion. For instance insertText = “function(${1})”

This works as tab stop, but the displayed completion is also “function(${1})” in the dropdown, including the ${1}. This doesn’t look nice.

My LSP server also sends a label in the completion item.

Would you be open for modifying this line to label: item.label || text, ?
To allow for custom labels for the completion item.

Here’s the interface in the LSP 3.17 spec.

Thank you!

github.com/codemirror/lsp-client

src/completion.ts

main


      
          if (!result) return null
          if (Array.isArray(result)) result = {items: result} as lsp.CompletionList
          let {from, to} = completionResultRange(context, result)
          let defaultCommitChars = result.itemDefaults?.commitCharacters
          
          return {
            from, to,
            options: result.items.map<Completion>(item => {
              let text = item.textEdit?.newText || item.textEditText || item.insertText || item.label
              let option: Completion = {
                label: text,
                type: item.kind && kindToType[item.kind],
              }
              if (item.commitCharacters && item.commitCharacters != defaultCommitChars)
                option.commitCharacters = item.commitCharacters
              if (item.detail) option.detail = item.detail
              if (item.insertTextFormat == 2 /* Snippet */) option.apply = (view, c, from, to) => snippet(text)(view, c, from, to)
              if (item.documentation) option.info = () => renderDocInfo(plugin, item.documentation!)
              return option
            }),
            commitCharacters: defaultCommitChars,

marijn · September 9, 2025, 3:10pm

Is your server setting CompletionItem.insertTextFormat to InserTextFormat.Snippet? If so, the client should already handle this. If it somehow doesn’t, let me know.

skovmand · September 9, 2025, 4:09pm

Thank you for the quick reply!

Yes, the LSP server is sending insertTextFormat = InsertTextFormat.Snippet (the value 2). I have verified that @codemirror/lsp-client treats the completions as snippets and sets the item.apply function correctly. The tab stops work as expected in the editor too.

The LSP server provides item.insertText and item.label for each completion item, but it looks like item.label is never used in the lsp-client.

When I do some console.logging, I can see that the returned option on L85 includes the label, type, apply, info and detail fields where label still includes the tab stops, e.g. “label”: “function(${1})”,

I’m basically looking for a way to display the completion options in the dropdown without including the tab stops. I did a quick-fix with the above one-line change and saw that it solved my issue, but I don’t know if it’s the right solution in the bigger picture. If I’m debugging in the wrong place, please let me know.

Thank you!

marijn · September 10, 2025, 6:14am

Oh, duh, I see what you mean now. This patch should help.

skovmand · September 10, 2025, 12:47pm

Thank you! I can confirm that it fixes the issue for me. Would it be possible to mark a new version within a week or two, so it will be available on npm?

marijn · September 10, 2025, 1:08pm

Yes. I’ve tagged @codemirror/lsp-client 6.1.2