I’m creating a custom language for Monaco Editor and having trouble with autocompletion. The provideCompletionItems function in my completion provider doesn’t seem to be called at all. I’ve registered the language and the provider, but nothing happens when I type. I suspect there might be an issue with my tokenizer.
Interestingly, syntax highlighting is working for keywords, types, constants, and operators, but not for built-in functions.
Here’s my language definition (CodeFrLanguage.js):
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
// Define keywords and tokens (keeping your existing definitions)
const keywords = [
'Algorithme', 'Debut', 'Fin',
'Variable', 'Variables', 'Constante',
'Si', 'Alors', 'SinonSi', 'Sinon', 'FinSi',
'TantQue', 'Faire', 'FinTantQue',
'Pour', 'De', 'A', 'FinPour',
'Lire', 'Ecrire',
'Et', 'Ou', 'Non', 'Oux',
'Mod', 'Tableau'
];
const typeKeywords = [
'Entier', 'Decimal', 'Chaine', 'Caractere', 'Logique'
];
const constants = [
'Vrai', 'Faux'
];
const builtins = [
'Racine', 'Abs', 'Log', 'Log10', 'Arrondi'
];
const operators = [
'=', '>', '<', '!', '~', '?', ':',
'==', '<=', '>=', '!=', '+', '-', '*', '/',
'^', 'Mod', 'Et', 'Ou', 'Non', 'Oux'
];
// Create completion items
const createCompletionItem = (label, kind, insertText, documentation = '') => ({
label,
kind,
insertText,
documentation: { value: documentation },
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
});
// Register language
export const registerCodeFrLanguage = () => {
// Register the language first
monaco.languages.register({ id: 'codefr' });
// Set the tokens provider
monaco.languages.setMonarchTokensProvider('codefr', {
ignoreCase: false,
defaultToken: '',
tokenPostfix: '.codefr',
keywords,
typeKeywords,
constants,
builtins,
operators,
symbols: /[=><!~?:&|+-*/^%]+/,
tokenizer: {
root: [
[/^(Algorithme)(s+)([a-zA-Z_]w*)/, ['keyword', 'white', 'identifier']],
[/^(Debut|Fin)/, 'keyword'],
[/[a-zA-Z_]w*/, {
cases: {
'@keywords': 'keyword',
'@typeKeywords': 'type',
'@constants': 'constant',
'@builtins': 'function',
'@default': 'identifier'
}
}],
{ include: '@whitespace' },
[/[{}()[]]/, '@brackets'],
[/[<>](?!@symbols)/, '@brackets'],
[/@symbols/, {
cases: {
'@operators': 'operator',
'@default': ''
}
}],
[/d*.d+([eE][-+]?d+)?/, 'number.float'],
[/d+/, 'number'],
[/"([^"\]|\.)*$/, 'string.invalid'],
[/"/, { token: 'string.quote', bracket: '@open', next: '@string' }],
],
string: [
[/[^\"]+/, 'string'],
[/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }]
],
whitespace: [
[/[ trn]+/, 'white'],
[//*/, 'comment', '@comment'],
[///.*$/, 'comment'],
],
comment: [
[/[^/*]+/, 'comment'],
[//*/, 'comment', '@push'],
["\*/", 'comment', '@pop'],
[/[/*]/, 'comment']
],
}
});
// Register completion item provider
monaco.languages.registerCompletionItemProvider('codefr', {
provideCompletionItems: (model, position) => {
const word = model.getWordUntilPosition(position);
const range = {
startLineNumber: position.lineNumber,
endLineNumber: position.lineNumber,
startColumn: word.startColumn,
endColumn: word.endColumn
};
const suggestions = [
// Keywords
...keywords.map(keyword =>
createCompletionItem(keyword, monaco.languages.CompletionItemKind.Keyword, keyword)
),
// Types
...typeKeywords.map(type =>
createCompletionItem(type, monaco.languages.CompletionItemKind.Class, type)
),
// Constants
...constants.map(constant =>
createCompletionItem(constant, monaco.languages.CompletionItemKind.Constant, constant)
),
// Built-in functions
...builtins.map(func =>
createCompletionItem(func, monaco.languages.CompletionItemKind.Function, func)
),
// Snippets
createCompletionItem(
'Algorithme',
monaco.languages.CompletionItemKind.Snippet,
'Algorithme ${1:nom}nVariablesnt${2}nDebutnt${3}nFin',
'Structure de base d'un algorithme'
),
createCompletionItem(
'Si',
monaco.languages.CompletionItemKind.Snippet,
'Si ${1:condition} Alorsnt${2}nFinSi',
'Structure conditionnelle Si'
),
createCompletionItem(
'Pour',
monaco.languages.CompletionItemKind.Snippet,
'Pour ${1:i} De ${2:debut} A ${3:fin} Fairent${4}nFinPour',
'Boucle Pour'
),
createCompletionItem(
'TantQue',
monaco.languages.CompletionItemKind.Snippet,
'TantQue ${1:condition} Fairent${2}nFinTantQue',
'Boucle TantQue'
)
];
return {
suggestions: suggestions.map(s => ({
...s,
range: range
}))
};
},
triggerCharacters: [' ', 'n', ':', '.', '(', '[', 'A']
});
// Register language configuration
monaco.languages.setLanguageConfiguration('codefr', {
comments: {
lineComment: '//',
blockComment: ['/*', '*/']
},
brackets: [
['{', '}'],
['[', ']'],
['(', ')']
],
autoClosingPairs: [
{ open: '{', close: '}' },
{ open: '[', close: ']' },
{ open: '(', close: ')' },
{ open: '"', close: '"', notIn: ['string'] },
{ open: "'", close: "'", notIn: ['string', 'comment'] }
],
surroundingPairs: [
{ open: '{', close: '}' },
{ open: '[', close: ']' },
{ open: '(', close: ')' },
{ open: '"', close: '"' },
{ open: "'", close: "'" }
],
});
};
And here’s how I’m creating the editor in my React component (MonacoEditor.js):
import React, { useRef, useEffect } from 'react';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import { useTheme } from '../../contexts/ThemeContext';
import { Box } from '@mui/material';
import { registerCodeFrLanguage } from './CodeFrLanguage';
const MonacoEditor = ({ value, onChange, readOnly = false }) => {
const editorRef = useRef(null);
const containerRef = useRef(null);
const { mode } = useTheme();
useEffect(() => {
// Register language
registerCodeFrLanguage();
if (containerRef.current && !editorRef.current) {
// Create editor instance
editorRef.current = monaco.editor.create(containerRef.current, {
value: value || 'Algorithme Nom_AlgorithmenVariablesntVariable1: Type1nDebutntInstruction1nFin',
language: 'codefr',
theme: mode === 'dark' ? 'vs-dark' : 'vs',
minimap: { enabled: true },
fontSize: 14,
automaticLayout: true,
lineNumbers: 'on',
readOnly: readOnly,
tabSize: 2,
wordWrap: 'on',
quickSuggestions: {
other: true,
comments: true,
strings: true
},
suggestOnTriggerCharacters: true,
acceptSuggestionOnEnter: 'on',
tabCompletion: 'on',
wordBasedSuggestions: true,
snippetSuggestions: 'top',
suggest: {
localityBonus: true,
snippetsPreventQuickSuggestions: false,
showIcons: true,
maxVisibleSuggestions: 12,
filterGraceful: true,
showInlineDetails: true,
preview: true
}
});
// Handle changes
editorRef.current.onDidChangeModelContent(() => {
if (onChange) {
onChange(editorRef.current.getValue());
}
});
return () => {
if (editorRef.current) {
editorRef.current.dispose();
editorRef.current = null;
}
};
}
}, []);
// Update value when prop changes
useEffect(() => {
if (editorRef.current && value !== undefined && value !== editorRef.current.getValue()) {
editorRef.current.setValue(value);
}
}, [value]);
// Update theme when mode changes
useEffect(() => {
if (editorRef.current) {
monaco.editor.setTheme(mode === 'dark' ? 'vs-dark' : 'vs');
}
}, [mode]);
return (
<Box
ref={containerRef}
sx={{
width: '100%',
height: '400px',
'& .monaco-editor': {
paddingTop: 1,
},
}}
/>
);
};
export default MonacoEditor;
I’ve tried setting triggerCharacters to all letters and even added console.log statements inside provideCompletionItems, but they’re never executed. I’ve also checked the console for errors and verified that the language is being registered.
Any help in diagnosing why the completion provider isn’t being triggered and why built-in functions aren’t highlighted would be greatly appreciated.
