Cài đặt và sử dụng — Monaco Editor Component

Tổng quan

Plugin Monaco Editor Component tích hợp Monaco Editor — engine đứng sau Visual Studio Code — vào giao diện Digiforce. Plugin cung cấp component CodeBlock có thể sử dụng ở bất kỳ đâu cần chỉnh sửa code, JSON, SQL, hoặc template.

Bước 1: Kích hoạt Plugin

Truy cập Settings → Plugin Manager, tìm plugin-monaco-editor-component và bật plugin. Khởi động lại server.

Lưu ý

Plugin này chủ yếu hoạt động ở phía client — server plugin chỉ là shell trống. Tất cả logic nằm trong component React.

Bước 2: Sử dụng

Sau khi kích hoạt, component CodeBlock được tự động đăng ký vào hệ thống component của Digiforce thông qua app.addComponents({ CodeBlock }). Các plugin khác có thể sử dụng component này.

Component `CodeBlock`

Prop	Kiểu	Mặc định	Mô tả
`value`	`string`	`''`	Nội dung code hiển thị
`width`	`string`	`'100%'`	Chiều rộng editor
`height`	`string`	`'400'`	Chiều cao editor (px)
`language`	`string`	`'typescript'`	Ngôn ngữ syntax highlighting
`theme`	`string`	`'chrome'`	Theme editor
`options`	`object`	`{}`	Tuỳ chọn Monaco Editor bổ sung
`disabled`	`boolean`	`false`	Chế độ chỉ đọc (maps to `readOnly`)
`onMount`	`function`	—	Callback khi editor ready: `(editor, monaco) => void`
`onChange`	`function`	—	Callback khi nội dung thay đổi

Ví dụ sử dụng trong plugin khác

tsx

import { useApp } from '@digiforce-nc/client';

function MyConfigEditor() {
  const app = useApp();
  const CodeBlock = app.getComponent('CodeBlock');

  return (
    <CodeBlock
      language="json"
      theme="digiforce"
      height="300"
      value='{"key": "value"}'
      onChange={(newValue) => console.log(newValue)}
    />
  );
}

Theme có sẵn

Plugin đăng ký hai theme tuỳ chỉnh ngoài các theme mặc định của Monaco:

Theme	Mô tả	Nền
`chrome`	Chrome DevTools style — sáng, phù hợp đọc code	Sáng
`digiforce`	Theme tối tuỳ chỉnh cho Digiforce (dựa trên Monokai)	Tối (`#222222`)
`vs`	Theme sáng mặc định Monaco	Sáng
`vs-dark`	Theme tối mặc định Monaco	Tối
`hc-black`	High Contrast (tối)	Tối

Theme Digiforce

Theme digiforce dựa trên color scheme Monokai với nền tối #222222:

Token	Màu	Ví dụ
Comment	`#75715e`	`// ghi chú`
String	`#e6db74`	`"chuỗi"`
Keyword	`#f92672`	`const`, `return`
Function	`#a6e22e`	`myFunction()`
Number	`#ae81ff`	`42`, `3.14`
Type	`#66d9ef`	`string`, `number`

Cấu hình TypeScript

Plugin tự động cấu hình TypeScript compiler options cho Monaco:

Option	Giá trị	Mô tả
`target`	`Latest`	Phiên bản ECMAScript mới nhất
`moduleResolution`	`NodeJs`	Resolve module theo Node.js style
`module`	`CommonJS`	Module system
`jsx`	`React`	Hỗ trợ JSX/TSX
`allowJs`	`true`	Cho phép JavaScript trong TypeScript
`esModuleInterop`	`true`	Tương thích ES module

Diagnostic options:

Semantic validation: Bật (phát hiện lỗi type)
Syntax validation: Tắt (cho phép code chưa hoàn chỉnh)

Ngôn ngữ hỗ trợ

Monaco Editor hỗ trợ syntax highlighting cho nhiều ngôn ngữ:

Ngôn ngữ	Language ID
JSON	`json`
JavaScript	`javascript`
TypeScript	`typescript`
SQL	`sql`
HTML	`html`
CSS / SCSS	`css`, `scss`
Markdown	`markdown`
YAML	`yaml`
XML	`xml`
Shell	`shell`

Lazy Loading

Component Editor từ @monaco-editor/react được lazy load bằng React.lazy():

tsx

const Editor = lazy(() => import('@monaco-editor/react'));

Điều này giúp Monaco Editor (~2MB bundle) chỉ được tải khi component thực sự hiển thị, không ảnh hưởng đến tốc độ load trang ban đầu.

Trong lúc chờ load, component hiển thị fallback <div>Loading...</div>.

Lưu ý khi sử dụng

Bundle size: Monaco Editor có kích thước ~2MB — nhờ lazy load, chỉ tải khi cần
Web Worker: Monaco cần Web Worker cho một số tính năng ngôn ngữ (TypeScript, JSON validation) — đảm bảo Vite/Webpack cấu hình đúng worker
Hiệu năng: Với file lớn (> 10,000 dòng), editor có thể chậm — cân nhắc giới hạn kích thước nội dung
Mobile: Monaco Editor không tối ưu cho thiết bị di động — trên mobile nên fallback về textarea
Chỉ client: Plugin không có server-side logic, server plugin chỉ là shell trống