feat: upgrade monaco editor to version 0.52.2

app/package.json

@@ -17,7 +17,7 @@
     "vite-plugin-mock-dev-server": "^1.4.0",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vscode-oniguruma": "^2.0.1",
-    "vscode-textmate": "6.x",
+    "vscode-textmate": "9.2.0",
     "@dtinsight/molecule": "workspace:*"
   }
 }

app/plugin.ts

@@ -18,6 +18,14 @@ export function esbuildPluginMonacoEditorNls(): EsbuildPlugin {
                 };
             });
 
+            // Handle nls.messages.js
+            build.onLoad({ filter: /esm[\\\/]vs[\\\/]nls\.messages\.js/ }, async () => {
+                return {
+                    contents: getNLSMessagesCode(),
+                    loader: 'js',
+                };
+            });
+
             build.onLoad({ filter: /monaco-editor[\\\/]esm[\\\/]vs.+\.js/ }, async (args) => {
                 return {
                     contents: transformLocalizeFuncCode(args.path),
@@ -47,49 +55,126 @@ function transformLocalizeFuncCode(filepath: string) {
 
 function getLocalizeCode() {
     return `
-// replace monaco-editor/esm/vs/nls.js _format
+// replace monaco-editor/esm/vs/nls.js
+import { getNLSLanguage, getNLSMessages } from './nls.messages.js';
+
+const isPseudo = getNLSLanguage() === 'pseudo' || (typeof document !== 'undefined' && document.location && document.location.hash.indexOf('pseudo=true') >= 0);
+
 function _format(message, args) {
+    // Make sure message is a string
+    if (typeof message !== 'string') {
+        message = String(message || '');
+    }
+
     let result;
     if (args.length === 0) {
         result = message;
     } else {
-        result = String(message).replace(/\{(\d+)\}/g, function (match, rest) {
+        result = message.replace(/\{(\d+)\}/g, function (match, rest) {
             const index = rest[0];
-            return typeof args[index] !== "undefined" ? args[index] : match;
+            const arg = args[index];
+            let result = match;
+            if (typeof arg === 'string') {
+                result = arg;
+            }
+            else if (typeof arg === 'number' || typeof arg === 'boolean' || arg === void 0 || arg === null) {
+                result = String(arg);
+            }
+            return result;
         });
     }
+    if (isPseudo) {
+        // FF3B and FF3D is the Unicode zenkaku representation for [ and ]
+        result = '\\uFF3B' + result.replace(/[aouei]/g, '$&$&') + '\\uFF3D';
+    }
     return result;
 }
 
-// replace monaco-editor/esm/vs/nls.js localize
-function localize(path, data, defaultMessage) {
+/**
+ * @skipMangle
+ */
+export function localize(path, data, defaultMessage) {
     const key = typeof data === "object" ? data.key : data;
     const lang = document?.documentElement.getAttribute("lang") || "en";
     const _data = window.__locale__?.[lang] || {};
     let message = (_data[path] || {})[key];
     if (!message) {
         message = defaultMessage;
     }
+
+    // Make sure message is a string
+    if (typeof message !== 'string') {
+        return defaultMessage || key || '';
+    }
+
     const args = [];
     for (let _i = 3; _i < arguments.length; _i++) {
         args[_i - 3] = arguments[_i];
     }
     return _format(message, args);
 }
-module.exports["localize"] = localize;
 
-function loadMessageBundle(_file) {
-    return localize;
+/**
+ * Only used when built: Looks up the message in the global NLS table.
+ * This table is being made available as a global through bootstrapping
+ * depending on the target context.
+ */
+function lookupMessage(index, fallback) {
+    const message = getNLSMessages()?.[index];
+    if (typeof message !== 'string') {
+        if (typeof fallback === 'string') {
+            return fallback;
+        }
+        throw new Error(\`!!! NLS MISSING: \${index} !!!\`);
+    }
+    return message;
+}
+
+/**
+ * @skipMangle
+ */
+export function localize2(path, data, originalMessage) {
+    const key = typeof data === "object" ? data.key : data;
+    const lang = document?.documentElement.getAttribute("lang") || "en";
+    const _data = window.__locale__?.[lang] || {};
+    let message = (_data[path] || {})[key];
+    if (!message) {
+        message = originalMessage;
+    }
+
+    // Make sure message is a string
+    if (typeof message !== 'string') {
+        message = originalMessage || key || '';
+    }
+    if (typeof originalMessage !== 'string') {
+        originalMessage = key || '';
+    }
+
+    const args = [];
+    for (let _i = 3; _i < arguments.length; _i++) {
+        args[_i - 3] = arguments[_i];
+    }
+    const value = _format(message, args);
+    return {
+        value,
+        original: originalMessage === message ? value : _format(originalMessage, args)
+    };
+}
+
+// Re-export from nls.messages.js for compatibility
+export { getNLSLanguage, getNLSMessages } from './nls.messages.js';
+`;
 }
-module.exports["loadMessageBundle"] = loadMessageBundle;
 
-function config(_opt) {
-    return loadMessageBundle;
+function getNLSMessagesCode() {
+    return `
+// replace monaco-editor/esm/vs/nls.messages.js
+export function getNLSMessages() {
+    return globalThis._VSCODE_NLS_MESSAGES;
 }
-module.exports["config"] = config;
 
-function getConfiguredDefaultLocale() {
-    return undefined;
+export function getNLSLanguage() {
+    return document?.documentElement.getAttribute("lang") || "en";
 }
-module.exports["getConfiguredDefaultLocale"] = getConfiguredDefaultLocale;`;
+`;
 }

app/src/components/testPane.tsx

@@ -201,8 +201,8 @@ export default function TestPane({ context: molecule }: { context: IMoleculeCont
             name,
             icon: 'file',
             value: `// editor-${key}
-        // export interface Type<T> { new (...args: any[]): T; }
-        // export type GenericClassDecorator<T> = (target: T) => void;`,
+export interface User { name: string; }
+export type Variable = string | number;`,
             language: 'typescript',
             breadcrumb: [
                 { id: 'app', name: 'app' },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dtinsight/molecule",
-    "version": "2.0.0-alpha.8",
+    "version": "2.0.0-alpha.10",
     "description": "A Web IDE UI Framework built with React.js, inspired by VSCode.",
     "module": "./esm/index.js",
     "typings": "./esm/index.d.ts",
@@ -32,7 +32,7 @@
         "react": ">=16.13.1",
         "react-dom": ">=16.13.1",
         "vscode-oniguruma": "^2.0.1",
-        "vscode-textmate": "6.x"
+        "vscode-textmate": "9.2.0"
     },
     "peerDependenciesMeta": {
         "vscode-oniguruma": {
@@ -67,16 +67,16 @@
         "tsc-alias": "^1.8.7",
         "typescript": "4.7.4",
         "vscode-oniguruma": "^2.0.1",
-        "vscode-textmate": "6.x",
+        "vscode-textmate": "9.2.0",
         "yargs": "^17.7.2"
     },
     "dependencies": {
         "@dtinsight/dt-utils": "^1.1.2",
         "@vscode/codicons": "^0.0.33",
         "immer": "^10.0.3",
         "lodash-es": "^4.17.21",
-        "monaco-editor": "^0.31.0",
-        "monaco-editor-nls": "2.0.0",
+        "monaco-editor": "0.52.2",
+        "monaco-editor-nls": "3.1.0",
         "normalize.css": "^8.0.1",
         "rc-dropdown": "^4.1.0",
         "rc-menu": "^9.11.1",

src/client/classNames/common.css

@@ -37,6 +37,11 @@ body .monaco-list:focus {
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial,
-        sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji';
+}
+
+/* Display the quickInputWidget of monaco editor uniformly at the top of the page */
+.monaco-editor .overflow-guard .overlayWidgets > div[widgetid='editor.contrib.quickInputWidget'] {
+    position: fixed !important;
 }

src/client/components/diffEditor/index.tsx

@@ -52,7 +52,7 @@ export default function MonacoDiffEditor({
 
     useEffect(() => {
         if (!parent.current) return;
-        const container = instance?.getDomNode();
+        const container = instance?.getContainerDomNode();
         if (container) {
             // performance
             if (parent.current.firstChild === container) return;

src/const/options.ts

@@ -7,7 +7,7 @@ export default {
     detectIndentation: true,
     trimAutoWhitespace: true,
     largeFileOptimizations: true,
-    wordBasedSuggestions: true,
+    wordBasedSuggestions: 'currentDocument',
     'semanticHighlighting.enabled': 'configuredByTheme',
     stablePeek: false,
     maxTokenizationLineLength: 20000,

src/monaco/index.ts

@@ -3,7 +3,6 @@
  */
 
 import 'monaco-editor/esm/vs/editor/editor.all';
-import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp';
 import 'monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard';
 import 'monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens';
 import 'monaco-editor/esm/vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess';

src/monaco/override/index.ts

@@ -91,14 +91,24 @@ export function registerCommandsQuickAccessProvider(services: IMoleculeContext &
             );
         }
 
-        protected async getCommandPicks(_: IDisposable, token: CancellationToken): Promise<Array<ICommandQuickPick>> {
-            if (token.isCancellationRequested) {
+        protected async getCommandPicks(_: IDisposable, token?: CancellationToken): Promise<Array<ICommandQuickPick>> {
+            const cancellationToken = token || { isCancellationRequested: false };
+
+            if (cancellationToken.isCancellationRequested) {
                 return [];
             }
 
             return [...this.getCodeEditorCommandPicks(), ...this.getGlobalCommandPicks()];
         }
 
+        protected hasAdditionalCommandPicks(): boolean {
+            return true;
+        }
+
+        protected async getAdditionalCommandPicks(): Promise<Array<ICommandQuickPick>> {
+            return this.getGlobalCommandPicks();
+        }
+
         private getGlobalCommandPicks(): ICommandQuickPick[] {
             const globalCommandPicks: ICommandQuickPick[] = [];
             MenuRegistry.getCommands().forEach((value, key) => {