Does "registerCompletionItemProvider" not work for the "json" language?
newfish-cmyk opened this issue · comments
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!
what issue are you facing? can you share a code snippet?
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.
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😂.