Câu hỏi thường gặp (FAQ) — Monaco Editor Component

Sử dụng

Có thể dùng Monaco cho trường text bình thường không?

Có thể, nhưng không khuyến nghị. Monaco Editor được thiết kế cho code và dữ liệu có cấu trúc (JSON, SQL, JavaScript, v.v.). Cho văn bản thông thường, textarea hoặc rich text editor phù hợp hơn vì:

• Monaco có bundle size lớn (~2MB)
• Các tính năng như syntax highlighting, autocomplete không hữu ích cho văn bản thường
• Trải nghiệm nhập liệu trên mobile kém

Monaco Editor hỗ trợ những theme nào?

Plugin đăng ký 2 theme tuỳ chỉnh:

Theme	Mô tả
digiforce	Theme tối kiểu Monokai, nền #222222
chrome (chrome-devtools)	Theme sáng kiểu Chrome DevTools

Ngoài ra, Monaco có sẵn 3 theme: vs (sáng), vs-dark (tối), hc-black (high contrast).

Có thể thêm custom theme không?

Có. Gọi monaco.editor.defineTheme() trong callback onMount của component:

<CodeBlock
  onMount={(editor, monaco) => {
    monaco.editor.defineTheme('my-theme', {
      base: 'vs-dark',
      inherit: true,
      rules: [/* token rules */],
      colors: { 'editor.background': '#1a1a2e' },
    });
    monaco.editor.setTheme('my-theme');
  }}
/>

Có autocomplete cho JSON schema không?

Monaco Editor có built-in JSON validation và autocomplete. Bạn có thể cấu hình JSON schema qua:

monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
  validate: true,
  schemas: [{
    uri: 'http://myschema/config.json',
    fileMatch: ['*'],
    schema: {
      type: 'object',
      properties: {
        name: { type: 'string' },
        version: { type: 'number' },
      },
    },
  }],
});

Hiệu năng

Editor bị chậm — làm sao khắc phục?

Một số biện pháp:

Vấn đề	Giải pháp
File lớn	Giới hạn nội dung < 10,000 dòng
Minimap	Tắt minimap: truyền minimap: { enabled: false } vào options
Word wrap	Tắt word wrap cho file dài: truyền wordWrap: 'off' vào options
Nhiều editor	Giảm số editor hiển thị cùng lúc trên trang
Máy yếu	Tắt syntax highlighting phức tạp

Trang load chậm sau khi bật plugin?

Monaco Editor (~2MB) được lazy load — chỉ tải khi component CodeBlock thực sự render. Nếu vẫn thấy chậm:

• Kiểm tra network tab: Monaco chunk chỉ nên tải khi mở trang có editor
• Đảm bảo CDN hoặc server phục vụ static files hiệu quả
• Cân nhắc cấu hình cache header cho Monaco assets

Lỗi thường gặp

Editor không hiển thị — chỉ thấy "Loading..."?

Editor đang lazy load. Nếu bị kẹt ở trạng thái "Loading...":

1. Kiểm tra network: Xem file @monaco-editor/react chunk có tải thành công không
2. Kiểm tra console: Xem có lỗi JavaScript nào không
3. Web Worker: Monaco cần Web Worker — kiểm tra Vite/Webpack cấu hình worker đúng
4. Plugin đã bật: Xác nhận plugin-monaco-editor-component đang enabled trong Plugin Manager

Lỗi "Cannot find module 'monaco-editor'"

Dependency monaco-editor chưa được cài đặt. Chạy:

yarn install

Kiểm tra package.json có bao gồm:

• monaco-editor: ^0.45.0
• @monaco-editor/react: ^4.6.0

TypeScript IntelliSense không hoạt động?

Plugin cấu hình TypeScript compiler options trong initMonaco(). Kiểm tra:

• Hàm initMonaco() được gọi trong beforeLoad và onMount
• monaco.languages.typescript tồn tại (một số build có thể loại bỏ TypeScript worker)
• Web Worker cho TypeScript đã được cấu hình trong bundler

Editor hiển thị trắng trên mobile?

Monaco Editor không tối ưu cho mobile. Các vấn đề thường gặp:

• Touch keyboard che khuất editor
• Pinch zoom xung đột với editor zoom
• Cử chỉ touch không được xử lý đúng

Khuyến nghị: Trên thiết bị mobile, sử dụng textarea hoặc input thường thay vì Monaco. Kiểm tra react-device-detect để chuyển đổi component.