Giao diện
@digiforce-nc/plugin-monaco-editor-component
Plugin Monaco Editor component — tích hợp code editor của VS Code (Monaco Editor) vào giao diện Digiforce cho việc chỉnh sửa code, JSON, SQL và template.
Plugin này làm gì?
Khi cần chỉnh sửa nội dung có cấu trúc (JSON config, SQL query, JavaScript code, HTML template...), textarea thường không đủ. Plugin nhúng Monaco Editor — engine đằng sau VS Code — với syntax highlighting, autocomplete, error detection và nhiều tính năng IDE.
Cơ chế hoạt động
Tính năng chính
| # | Tính năng | Mô tả |
|---|---|---|
| 1 | Syntax highlighting | Highlight cho 50+ ngôn ngữ |
| 2 | Autocomplete | IntelliSense suggestions |
| 3 | Error detection | Phát hiện lỗi cú pháp real-time |
| 4 | Multiple themes | VS Dark, Light, High Contrast |
| 5 | Minimap | Bản đồ code thu nhỏ |
| 6 | Find & Replace | Tìm kiếm và thay thế (Ctrl+F) |
| 7 | Diff editor | So sánh 2 phiên bản code |
Cấu hình component
| Prop | Mặc định | Mô tả |
|---|---|---|
language | 'json' | Ngôn ngữ (json, sql, javascript, html...) |
theme | 'vs-dark' | Theme editor |
height | '300px' | Chiều cao editor |
readOnly | false | Chế độ chỉ đọc |
minimap | true | Hiển thị minimap |
wordWrap | 'on' | Xuống dòng tự động |
Thành phần client
| Thành phần | Mô tả |
|---|---|
MonacoEditor | Component chính — wrapper Monaco Editor |
MonacoDiffEditor | Component so sánh 2 phiên bản |
MonacoField | Field type sử dụng Monaco cho collection |
LanguageSelector | Dropdown chọn ngôn ngữ |
Dependencies
| Package | Vai trò |
|---|---|
@digiforce-nc/client | Client UI framework |
monaco-editor | Monaco Editor core |
@monaco-editor/react | React wrapper cho Monaco |
Lưu ý triển khai
- Monaco Editor bundle khá lớn (~2MB) — lazy load khi cần
- Web Worker cần được cấu hình đúng cho ngôn ngữ support
- Plugin chỉ có phần client, không có server-side logic