feat: add rsbuild-plugin-monaco-editor-nls example

Author: zackshen

pnpm-lock.yaml

@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```

rsbuild/react-monaco-editor-nls/README.md

@@ -0,0 +1,21 @@
+{
+  "name": "rsbuild-react-monaco-editor-nls",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "npx rsbuild dev",
+    "build": "npx rsbuild build"
+  },
+  "dependencies": {
+    "monaco-editor": "0.51.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rsbuild-plugin-monaco-editor-nls": "^0.1.1"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^1.0.2",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.6.2"
+  }
+}

rsbuild/react-monaco-editor-nls/package.json

@@ -0,0 +1,7 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { Languages, pluginMonacoEditorNls } from 'rsbuild-plugin-monaco-editor-nls';
+
+export default defineConfig({
+  plugins: [pluginReact(), pluginMonacoEditorNls({ locale: Languages.zh_hans })],
+});

rsbuild/react-monaco-editor-nls/rsbuild.config.ts

@@ -0,0 +1,54 @@
+import * as monaco from 'monaco-editor';
+import React, { useEffect, useRef } from 'react';
+
+const MONACO_EDITOR_OPTIONS = {
+  automaticLayout: true,
+  scrollBeyondLastLine: false,
+  fixedOverflowWidgets: true,
+  theme: 'vs-dark',
+  language: 'javascript',
+} as monaco.editor.IEditorConstructionOptions;
+
+self.MonacoEnvironment = {
+  getWorker(_: string, label: string) {
+    if (label === 'json') {
+      return new Worker(new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url));
+    }
+    if (label === 'css' || label === 'scss' || label === 'less') {
+      return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url));
+    }
+    if (label === 'html' || label === 'handlebars' || label === 'razor') {
+      return new Worker(new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url));
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      return new Worker(
+        new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url),
+      );
+    }
+    return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url));
+  },
+};
+
+function Editor() {
+  const editor_ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (editor_ref.current) {
+      const editor = monaco.editor.create(editor_ref.current, {
+        value: `const text = "Hello World";`,
+        ...MONACO_EDITOR_OPTIONS,
+      });
+
+      editor.onDidChangeModelContent(() => {
+        const value = editor.getValue();
+        console.log(value);
+      });
+    }
+  }, []);
+
+  return (
+    <div id="monaco_editor" style={{ flex: 1, margin: 30, height: '600px' }} ref={editor_ref} />
+  );
+}
+
+export default React.memo(Editor);

rsbuild/react-monaco-editor-nls/src/Editor.tsx

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}

rsbuild/react-monaco-editor-nls/src/index.css

@@ -0,0 +1,8 @@
+import { createRoot } from 'react-dom/client';
+import Editor from './Editor';
+import './index.css';
+
+const rootEl = document.querySelector('#root');
+if (rootEl) {
+  createRoot(rootEl).render(<Editor />);
+}

rsbuild/react-monaco-editor-nls/src/index.tsx

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "strict": true,
+    "target": "ES6",
+    "lib": ["dom", "es5", "es2015.collection", "es2015.promise"],
+    "types": [],
+    "jsx": "preserve",
+    "esModuleInterop": true
+  },
+  "include": ["src"]
+}