Completion Suggestions are only available at start of a line.

[derau2]

monaco-editor version: 2.0.4
Browser: Chrome
OS: Windows 10

Steps or JS usage snippet reproducing the issue:
I register a custom language. I am able to select and complete suggestions by typing CTRL-SPACE. This only seems to work at start of line.

Sequence of events.
Type CTRL-SPACE -> list of suggestions is provided.
Type followed by a space character and then enter CTRL-SPACE --> "No suggestions is displayed

Hopefully the provided GIF will help to illustrate what I'm seeing

[rcjsuen]

@derau2 We can't help you without seeing your code. Is your code in a public repository somewhere?

[derau2]

@rcjsuen Thank you. I'm working on a scaled down project to reproduce this issue and hope to have it pushed to github by days end. I'll tag you in a comment when it's ready. Thanks for your help.

Don

[derau2]

@rcjsuen here is the project to created this issue. https://github.com/derau2/public

If you press CTRL-S at start of line intellisense works. If you type something prior to CTRL-S., such as "test "
and then press CTRL-S you should receive "No suggestions" as in animated gif above

[rcjsuen]

@derau2 I can't npm install your project.

11577 verbose stack Error: 404 Not Found - GET https://registry.npmjs.org/@am%2fag-grid - Not found
11577 verbose stack     at res.buffer.catch.then.body (/usr/lib/node_modules/npm/node_modules/npm-registry-fetch/check-response.js:104:15)
11577 verbose stack     at process._tickCallback (internal/process/next_tick.js:68:7)
11578 verbose statusCode 404
11579 verbose pkgid @am/ag-grid@2.4.0
11580 verbose cwd /home/remy/code/github/public
11581 verbose Linux 4.18.0-25-generic
11582 verbose argv "/usr/bin/node" "/usr/bin/npm" "install"
11583 verbose node v10.16.0
11584 verbose npm  v6.9.0
11585 error code E404
11586 error 404 Not Found - GET https://registry.npmjs.org/@am%2fag-grid - Not found
11587 error 404
11588 error 404 '@am/ag-grid@2.4.0' is not in the npm registry.
11589 error 404 You should bug the author to publish it (or use the name yourself!)
11590 error 404 It was specified as a dependency of 'public'
11591 error 404 Note that you can also install from a
11592 error 404 tarball, folder, http url, or git url.
11593 verbose exit [ 1, true ]

[derau2]

@rcjsuen
My apologies. I had an unnecessary dependency on an internal component. It's been removed and pushed to repo. I've also scanned packaging to ensure no others exist.

Hopefully it will build for you now.

Thanks,
Don

[rcjsuen]

@derau2 Where does this registerLanguage(*) function come from? I don't see it in Monaco's API.

https://github.com/derau2/public/blob/fcbbcb766cf9ee491a791cb524360ef2dddf51b8/src/app/tokenized-path/tokenized-path.component.ts#L201

[derau2]

@rcjsuen
I'm using the covalent code-editor
Here is a link

https://github.com/Teradata/covalent-code-editor/blob/543baf6b457cb09a56281c23297408492041a031/src/platform/code-editor/code-editor.component.ts#L251

[rcjsuen]

@derau2 I could not find anything obviously wrong with your code. It must be related to how @covalent/code-editor does things internally. I used the code below in the Monaco Editor Playground and it worked just fine.

function createProposals() {
    return [
          {
            label: 'foobar1',
            kind: monaco.languages.CompletionItemKind.Snippet,
            insertText: '{{account-id}}',
            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
          }, 
          {
            label: 'foobar2',
            kind: monaco.languages.CompletionItemKind.Keyword,
            insertText: '{{account-id}}',
            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
          }, 
          {
            label: 'foobar3',
            kind: monaco.languages.CompletionItemKind.Text,
            insertText: '{{account-id}}',
            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
          }
    ];
}

monaco.languages.register({
    'id': 'BosTokensLanguage'
})

monaco.languages.registerCompletionItemProvider('BosTokensLanguage', {
    provideCompletionItems: function(model, position) {
        var suggestions = createProposals();
        return {
            suggestions: suggestions
        };
    }
});

monaco.editor.create(document.getElementById("container"), {
    value: "",
    language: "BosTokensLanguage"
});

[derau2]

@rcjsuen Thanks, I developed it initially in the playground. Thanks for investigating.

[DMXL]

@derau2 Hey there, I was having the same issue on v0.17.0. until I changed

// completion-provider.js to be imported
function createProposals (monaco) {
  return [{
    label: 'html',
    kind: monaco.languages.CompletionItemKind.Function,
    insertText: '<html>$1</html>',
    detail: '<html></html>',
    insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
  }]
}

export const completionItemProvider = (monaco) => {
  const suggestions = createProposals(monaco)

  return {
    provideCompletionItems (model, position) {
      return {
        suggestions
      }
    }
  }
}

into this

export const completionItemProvider = (monaco) => {
  return {
    provideCompletionItems (model, position) {
      return {
        suggestions: [{
          label: 'html',
          kind: monaco.languages.CompletionItemKind.Function,
          insertText: '<html>$1</html>',
          detail: '<html></html>',
          insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
        }]
      }
    }
  }
}

// main.js
import { completionItemProvider } from './completion-provider'
import { id } from './config'

monaco.languages.registerCompletionItemProvider(id, completionItemProvider(monaco, id))

and the suggestion was able to be triggered elsewhere.

@rcjsuen Any idea why it works this way?

[rcjsuen]

@DMXL Not sure. It could be the difference between being dynamic or not I suppose.

[DMXL]

@DMXL Not sure. It could be the difference between being dynamic or not I suppose.

Yeah. I think provideCompletionItems() should return a new set of suggestions (with reference to a new object) every time it's called.

[alexdima]

@jrieken Can you please confirm? If that is the case, could we please document in JSDoc that we always expect fresh objects to come from provideCompletionItems().

[aldrinmartoq]

Thanks @DMXL!!

Didn't know why didn't work until I changed my code to recreate objects.

[David-Moreira]

Hey guys,
May I ask how did you solve this? Without hardcoding the values?
I tried something like this without any success:

        var newSuggestionsArray = [];
        for (var i = 0; i < newSuggestions.length; i++) {
            suggestion = newSuggestions[i];
            newSuggestionsArray.push({
                label: suggestion.label,
                kind: suggestion.kinda,
                insertText: suggestion.insertText,
                documentation: suggestion.documentation
            });
        }

        monaco.languages.registerCompletionItemProvider(languageId, {
            provideCompletionItems: (model, position) => {
                return {
                    suggestions: newSuggestionsArray }
            }
        });

[David-Moreira]

Well, Never mind...
After trying a few more stuff like destructuring... and json parsing... the latter, worked...

        monaco.languages.registerCompletionItemProvider(languageId, {
            provideCompletionItems: (model, position) => {
                return {
                    suggestions: JSON.parse(JSON.stringify(completionItemProvider.suggestions))
                }
            }

[shubhamgoswamiofficial]

@derau2 Hey there, I was having the same issue on v0.17.0. until I changed

// completion-provider.js to be imported
function createProposals (monaco) {
  return [{
    label: 'html',
    kind: monaco.languages.CompletionItemKind.Function,
    insertText: '<html>$1</html>',
    detail: '<html></html>',
    insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
  }]
}

export const completionItemProvider = (monaco) => {
  const suggestions = createProposals(monaco)

  return {
    provideCompletionItems (model, position) {
      return {
        suggestions
      }
    }
  }
}

into this

export const completionItemProvider = (monaco) => {
  return {
    provideCompletionItems (model, position) {
      return {
        suggestions: [{
          label: 'html',
          kind: monaco.languages.CompletionItemKind.Function,
          insertText: '<html>$1</html>',
          detail: '<html></html>',
          insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
        }]
      }
    }
  }
}

// main.js
import { completionItemProvider } from './completion-provider'
import { id } from './config'

monaco.languages.registerCompletionItemProvider(id, completionItemProvider(monaco, id))

and the suggestion was able to be triggered elsewhere.

@rcjsuen Any idea why it works this way?

Bro, you saved my days or i should say my life.
I have literally, went through whole doc of Monaco and all github/stack issues but couldn't find this solution.
And i implemented according your file destructing and boom it worked.
Thanks a lot.

Whoever reads this, it maybe helpful.
Don't assign any variable, directly map the array in suggestions field and it will work.

Example:
This will work :--->

export const completionItemProvider = (monaco, measures,AGGREFATE_FUNCTIONS) => {
    return {
      provideCompletionItems (model, position) {
        return {
          suggestions: [...AGGREFATE_FUNCTIONS.map(fun => {
            return {
                label: fun.name,
                insertText: fun.syntax,
                detail: fun.description,
                documentation: fun.description,
                kind: monaco.languages.CompletionItemKind.Function,
                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
            }
        }),
        ...measures.map(msr => {
            return {
                label: msr.name,
                insertText: msr.name,
                detail: msr.dataSetType,
                documentation: msr.dataSetType,
                kind: 18
            }
        })
    
    ]
        }
      }
    }
  }

This will not work :------> (after first line)

export const completionItemProvider = (monaco, measures,AGGREFATE_FUNCTIONS) => {
let suggestions = AGGREFATE_FUNCTIONS.map(fun => {
            return {
                label: fun.name,
                insertText: fun.syntax,
                detail: fun.description,
                documentation: fun.description,
                kind: monaco.languages.CompletionItemKind.Function,
                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
            }
        })
    return {
      provideCompletionItems (model, position) {
        return {
          suggestions: suggestions
        }
      }
    }
  }

And i don't know why. That's the beauty of Javascript.

[hediet]

If the issue still persists, please open a new issue.