Does "registerCompletionItemProvider" not work for the "json" language?

[heheer]

When attempting to add custom autocompletion using registerCompletionItemProvider within beforeMount, I encountered an issue.

I want to add custom completion like this

          beforeMount={(monaco) => {
            monaco.languages.registerCompletionItemProvider({ language: "json" }, {
              provideCompletionItems: function (
                model: monaco.editor.ITextModel,
                position: monaco.Position,
                ) {
                  var word = model.getWordUntilPosition(position);
                  var range = {
                    startLineNumber: position.lineNumber,
                    endLineNumber: position.lineNumber,
                    startColumn: word.startColumn,
                    endColumn: word.endColumn,
                  };
                  console.log('provideCompletionItems', word, range)
                  return {
                    suggestions: createDependencyProposals(monaco, range),
                  };
                }
              })
            }
          }

However, this didn't work as expected in @monaco-editor/react, although it did work in monaco-editor.

Thank you very much for any assistance!

[Suren Atoyan]

what issue are you facing? can you share a code snippet?

[heheer]

import React from 'react';
import Editor, { loader } from '@monaco-editor/react';
import { Box, BoxProps } from '@chakra-ui/react';

loader.config({
  paths: { vs: "/js/monaco-editor.0.43.0" },
});

type Props = Omit<BoxProps, 'onChange' | 'height'> & {
  height?: number;
  defaultValue?: string;
  value?: string;
  onChange?: (e: string) => void;
};

const options = {
  lineNumbers: 'off',
  guides: {
    indentation: false
  },
  automaticLayout: true,
  minimap: {
    enabled: false
  },
  scrollbar: {
    verticalScrollbarSize: 4,
    horizontalScrollbarSize: 8,
    alwaysConsumeMouseWheel: false
  },
  lineNumbersMinChars: 0,
  fontSize: 12,
  scrollBeyondLastLine: false,
  folding: false,
  overviewRulerBorder: false,
  tabSize: 2
};

const JSONEditor = ({ defaultValue, value, onChange, ...props }: Props) => {

  return (
    <Box position={'relative'}>
      <Box
        borderWidth={'1px'}
        borderRadius={'md'}
        borderColor={'myGray.200'}
        py={2}
        {...props}
      >
        <Editor
          defaultLanguage="json"
          options={options as any}
          theme={'JSONEditorTheme'}
          beforeMount={(monaco) => {
            monaco?.editor.defineTheme('JSONEditorTheme', {
              base: 'vs',
              inherit: true,
              rules: [],
              colors: {
                'editor.background': '#ffffff00',
                'editorLineNumber.foreground': '#aaa',
                'editorOverviewRuler.border': '#ffffff00',
                'editor.lineHighlightBackground': '#F7F8FA',
                'scrollbarSlider.background': '#E8EAEC',
                'editorIndentGuide.activeBackground': '#ddd',
                'editorIndentGuide.background': '#eee'
              }
            });

            // ==== try to add custom completion item provider here ====
            monaco.languages.registerCompletionItemProvider("json", {
              provideCompletionItems: function (model, position) {
                var word = model.getWordUntilPosition(position);
                var range = {
                  startLineNumber: position.lineNumber,
                  endLineNumber: position.lineNumber,
                  startColumn: word.startColumn,
                  endColumn: word.endColumn,
                };
                return {
                  suggestions: [
                    {
                      label: '"lodash"',
                      kind: monaco.languages.CompletionItemKind.Function,
                      documentation: "The Lodash library exported as Node.js modules.",
                      insertText: '"lodash": "*"',
                      range: range,
                    }],
                };
              },
            });
            // =========================================================

          }}
          defaultValue={defaultValue}
          value={value}
          onChange={(e) => onChange?.(e || '')}
        />
      </Box>
    </Box>
  );
};

export default React.memo(JSONEditor);

In the above code, I tried to customize code completion, but nothing happened when I typed 'l'. In contrast, when I used the official monaco-editor, I was able to implement the feature of extending custom completion for json.

[heheer]

It seems to be my personal issue 😵. I used a loader like this:

// loader.config({
//   paths: { vs: '/js/monaco-editor.0.43.0' }
// });

to load the monaco-editor resources, which not support custom completion for JSON. When I commented it out, everything worked fine😂.