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/react-monacoeditor@3.2.0