Kusto keywords are not getting highlighted when updated to latest @kusto/monaco-kusto 12.0.14 version and monaco editor 0.49.0 version

Reproducible in vscode.dev or in VS Code Desktop?

• reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Link

We are currently using a React application without Webpack. The Monaco editor files are being manually copied to the public folder of the React application, and the Kusto min files are being placed in the monaco-editor/min/vs/language/kusto folder. We are loading Monaco using the loader from the @monaco-editor/react package. However, Kusto keywords are not being highlighted in different colors, which was functioning correctly in the previous version.

Folder structure is as follows

import { loader } from "@monaco-editor/react";

/**
 * A promise to be returned by the init function.
 */
let promiseResolve: (value: unknown) => void;
const monacoKustoInitPromise = new Promise((resolve) => {
    promiseResolve = resolve;
});

/**
 * when monaco is loaded, it also loads a UMD module loader. the following script tag will load monaco kusto using that loader.
 */
const loadMonacoKusto = () => {
    const script = document.createElement('script');
    script.innerHTML = `require(['vs/language/kusto/monaco.contribution'], function() {
    document.dispatchEvent(new Event('kusto_init'));
  });
`;
    return document.body.appendChild(script);
};

/**
 * Configuring monaco's UMD loader to load all the rest of monaco (and monaco-kusto) from the following location (that's why we're copying everything to public folder).
 */
loader.config({
    paths: {
        vs: `${process.env.PUBLIC_URL}/monaco-editor/min/vs`,
    },
});

/**
 * remove evnent listener and resolve init promise once script is loaded.
 */
//eslint-disable-next-line @typescript-eslint/no-explicit-any
declare const window: any;
const onMonacoKustoLoaded = () => {
    document.removeEventListener('kusto_init', onMonacoKustoLoaded);
    promiseResolve(window.monaco);
};

/**
 * import monaco and monaco-kusto.
 * @returns a promise that will be resolved once all dependencies are loaded.
 */
export const init = () => {

    loader.init().then((monacoInstance: any) => {
        document.addEventListener('kusto_init', onMonacoKustoLoaded);
        loadMonacoKusto();
    });
    return monacoKustoInitPromise;
};

And loading monaco editor as follows

import { useEffect, useRef } from 'react';
import './App.css';
import { init } from './monaco-kusto';

declare const window: any;
const dummySchema = {
    Plugins: [
        {
            Name: "pivot",
        },
    ],
    Databases: {
        Samples: {
            Name: "Samples",
            Tables: {
                StormEvents: {
                    Name: "StormEvents",
                    OrderedColumns: [
                        { Name: "StartTime", Type: "System.DateTime", CslType: "datetime" }
                    ]
                }
            },
            Functions: {
                    MyFunction1: {
                        Name: "MyFunction1",
                        InputParameters: [],
                        Body: "{ StormEvents | limit 100 }  ",
                        Folder: "Demo",
                        DocString: "Simple demo function",
                        FunctionKind: "Unknown",
                        OutputColumns: [],
                    },
                    MyFunction2: {
                        Name: "MyFunction2",
                        InputParameters: [
                            {
                                Name: "myLimit",
                                Type: "System.Int64",
                                CslType: "long",
                                DocString: "Demo for a parameter",
                                CslDefaultValue: "6"
                            },
                        ],
                        Body: "{ StormEvents | limit myLimit }  ",
                        Folder: "Demo",
                        DocString: "Demo function with parameter",
                        FunctionKind: "Unknown",
                        OutputColumns: [],
                 }
            }
        }
    }
};
const dummyKustoUrl = "https://dummy.kusto.windows.net";
const dummyKustoDb = "Samples";
function App() {
    const editorRef = useRef<any>(null);
    const setScehma = () => {
        window.monaco.languages.kusto.getKustoWorker().then((workerAccessor: any) => {
            const model = editorRef.current?.getModel();
            console.log("model", model.uri);
            //eslint-disable-next-line @typescript-eslint/no-explicit-any
            workerAccessor(model?.uri).then((worker: any) => {
                console.log("worker", worker);
                try {
                    console.log("Setting dummy schema for Kusto worker...");
                    // Set the schema with the dummy values
                    worker.setSchemaFromShowSchema(dummySchema, dummyKustoUrl, dummyKustoDb);
                    console.log("Schema set successfully");
                } catch (err) {
                    console.error("Error setting schema:", err);
                }
            });
        });
    }
    useEffect(() => {
        if (editorRef.current) return; // Prevent multiple instances
        console.log("init");
        init().then((monaco:any) => {
            const wrapper = document.getElementById('monaco-container');
            const properties = {
                value:`EopSonarSummary
                | where CompletedOn >= ago(1d) and Verdict in ("Bad") and  FileExt in (".url",'.pdf','.html')       
                | project-reorder  SubmissionId, FileMd5, FileExt, FileType
                | take 100`,
                language: 'kusto',
                minimap: { enabled: false },
                theme: "light",
                automaticLayout: true
            };
            editorRef.current = monaco.editor.create(wrapper, properties);
            setScehma();
        });
        return () => {
            if (editorRef.current) {
                editorRef.current.getModel().dispose();
                editorRef.current = null;
            }
        }
    }, [])

  return (
      <div className="App">
          <div id="monaco-container" style={{ height: '270px', textAlign: 'left',width:'100%' }}></div>
    </div>
  );
}

export default App;

The editor currently lacks color highlighting, although IntelliSense is functioning correctly. It does not highlight Kusto keywords (where, ago, project-reorder) and the table name (Storm Events) in different colors. This issue was not present in the previous version.

Monaco Editor Playground Code

Reproduction Steps

No response

Actual (Problematic) Behavior

No response

Expected Behavior

No response

Additional Context

No response

Start by reproducing the reported React setup with @kusto/monaco-kusto 12.0.14 and Monaco Editor 0.49.0, using the copied monaco-editor/min/vs files and loader code shown here. Compare the current behavior with the previous version and inspect the Kusto language contribution and highlighting path. Done means Kusto keywords and table names receive distinct colors while IntelliSense continues to work.