monaco web editor, language functionality don't working - antlr4

Question

I try to recreate an existing monaco+react+typescript project to my own goals. And it's not working, unfortunately. Language functionalities don't work. When I tried to throw alerts from the setupLanguage function it's working on getWorkerUrl function only. But don't work for the monaco.languages.onLanguage event processor.
May I ask you to show me the point where I'm wrong?
Regards, vladimir
P.s. Code are available on https://github.com/vladimirkozhaev/monaco-web-editor-new-edition
This is my setup.ts
import * as monaco from "monaco-editor-core";
import { languageExtensionPoint, languageID } from "./config";
import { richLanguageConfiguration, monarchLanguage } from "./TodoLang";
import { TodoLangWorker } from "./todoLangWorker";
import { WorkerManager } from "./WorkerManager";
import DiagnosticsAdapter from "./DiagnosticsAdapter";
import TodoLangFormattingProvider from "./TodoLangFormattingProvider";
export function setupLanguage() {
(window as any).MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
if (label === languageID)
return "./todoLangWorker.js";
return './editor.worker.js';
}
}
monaco.languages.register(languageExtensionPoint);
monaco.languages.onLanguage(languageID, () => {
monaco.languages.setMonarchTokensProvider(languageID, monarchLanguage);
monaco.languages.setLanguageConfiguration(languageID, richLanguageConfiguration);
const client = new WorkerManager();
const worker: WorkerAccessor = (...uris: monaco.Uri[]): Promise<TodoLangWorker> => {
return client.getLanguageServiceWorker(...uris);
};
//Call the errors provider
new DiagnosticsAdapter(worker);
monaco.languages.registerDocumentFormattingEditProvider(languageID, new TodoLangFormattingProvider(worker));
});
}
export type WorkerAccessor = (...uris: monaco.Uri[]) => Promise<TodoLangWorker>;
This is my package.json
{
"name": "todolangeditor",
"version": "1.0.0",
"description": "TodoLang editor",
"license": "UNLICENSED",
"scripts": {
"test": "jest -c jest.config.unit.js",
"start": "webpack-dev-server",
"antlr4ts": "antlr4ts ./ExpressionsParserGrammar.g4 -visitor -o ./src/ANTLR"
},
"dependencies": {
"antlr4ts": "0.5.0-alpha.4",
"monaco-editor-core": "0.18.1",
"react": "16.8.6",
"react-dom": "16.8.6"
},
"devDependencies": {
"#types/react": "16.8.12",
"source-map-loader": "^1.0.0",
"#types/react-dom": "16.8.3",
"antlr4ts-cli": "0.5.0-alpha.4",
"css-loader": "3.3.0",
"html-webpack-plugin": "3.2.0",
"style-loader": "1.0.1",
"ts-loader": "5.3.3",
"typescript": "^4.8",
"webpack": "4.29.6",
"webpack-cli": "3.3.0",
"webpack-dev-server": "3.2.1",
"ts-jest": "^29.0.3",
"#types/jest":"29.0.3"
}
}
This is my webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { SourceMapDevToolPlugin } = require("webpack");
module.exports = {
mode: 'development',
entry: {
app: './src/index.tsx',
"editor.worker": 'monaco-editor-core/esm/vs/editor/editor.worker.js',
"todoLangWorker": './src/todo-lang/todolang.worker.ts'
},
output: {
globalObject: 'self',
filename: (chunkData) => {
switch (chunkData.chunk.name) {
case 'editor.worker':
return 'editor.worker.js';
case 'todoLangWorker':
return "todoLangWorker.js"
default:
return 'bundle.[hash].js';
}
},
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.css']
},
module: {
rules: [
{
test: /\.tsx?/,
loader: 'ts-loader'
},
{
test: /\.css/,
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
enforce: 'pre',
use: ['source-map-loader']
}
]
},
plugins: [
// new SourceMapDevToolPlugin({
// filename: "[file].map"
// }),
new htmlWebpackPlugin({
template: './src/index.html'
})
]
}
This is my index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {setupLanguage} from "./todo-lang/setup";
import { Editor } from './components/Editor/Editor';
import { languageID } from './todo-lang/config';
import { parseAndGetSyntaxErrors, parseAndGetASTRoot } from './language-service/Parser';
setupLanguage();
const App = () => <Editor language={languageID}></Editor>;
ReactDOM.render(<App/>, document.getElementById('container'));