Support user provided auto-complete

[dbetter]

• Use by providing a user defined function with respect to text editor model and text positioning

Didn't want to spoil the current example but the following can be added as another example/extension of current one:
Provided SQL is the language of choice:

function createDependencyProposalsFrom(range: IRange) {
    // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
    return [
      {
        label: '"TableA"',
        kind: languages.CompletionItemKind.Function,
        documentation: "TableA contains...",
        insertText: 'TableA',
        range: range
      },
      {
        label: '"TableA"',
        kind: languages.CompletionItemKind.Function,
        documentation: "TableA contains...",
        insertText: 'TableA',
        range: range
      }
    ];
  }


function createDependencyProposalsSelect(range: IRange) {
  // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
  return [
    {
      label: '"column1"',
      kind: languages.CompletionItemKind.Function,
      documentation: "A very important database column containing....",
      insertText: 'column1',
      range: range
    },
    {
      label: '"column2"',
      kind: languages.CompletionItemKind.Function,
      documentation: "A very important database column containing....",
      insertText: 'column2',
      range: range
    }
  ];
}

function provideCompletionItems(model: editor.ITextModel | null | undefined, position: monaco.Position | null | undefined) {
  // find out if we are completing a property in the 'dependencies' object.
  if (!position) {
    return []
  }

  let wordAtPosition = model?.getWordUntilPosition(position);
  if (wordAtPosition?.word === '') {
    wordAtPosition = model?.getWordUntilPosition(position.delta(0, -1));
  }

  const matchFrom = wordAtPosition?.word.toLowerCase() === 'from';
  const matchSelect = wordAtPosition?.word.toLowerCase() === 'select';
  if (!matchFrom && !matchSelect) {
    return [];
  }

  const word = model?.getWordUntilPosition(position);
  const range = {
    startLineNumber: position.lineNumber,
    endLineNumber: position.lineNumber,
    startColumn: word?.startColumn,
    endColumn: word?.endColumn
  };

  const suggestions = matchFrom ? createDependencyProposalsFrom(range) : createDependencyProposalsSelect(range)
  return suggestions;
}

And usage would be:

<MonacoEditor
    ref={editorRef}
    height="500px"
    language={mode}
    autoComplete={(model, position) => provideCompletionItems(model, position)}
    value={code}
    editorDidMount={(editor) => editorDidMount(editor)}
    onChange={onChange}
    options={options}
/>

[dbetter]

@jaywcjlove - Would love it if you could go over this one. Please let me know if there are any questions.

[jaywcjlove]

@dbetter

This is a good idea. I have been trying to deal with it. My handling method package is too big.

https://github.com/jaywcjlove/nginx-editor

Is there a way to make it easier.

[jaywcjlove]

@dbetter Upgrade + @uiw/[email protected]

[grigandal625]

Default suggestions desapear after registering custom provider. Is there any options to get default provider and use it in custom or any other way to get default text or language suggestions?