Cấu hình

CodeMirror 6 Editor

Plugin sử dụng CodeMirror 6 làm code editor với các extension:

Extension	Chức năng
@codemirror/lang-javascript	Syntax highlighting và autocomplete cho JavaScript
@codemirror/view	View layer với line numbers, active line highlight
@codemirror/state	State management cho editor
@codemirror/lint	Framework hiển thị lỗi inline

Editor có thể resize theo nhu cầu — kéo cạnh dưới để thay đổi chiều cao.

Acorn Linter

Plugin dùng acorn parser để kiểm tra lỗi cú pháp JavaScript realtime:

• Parse code mỗi khi nội dung thay đổi.
• Lỗi syntax hiển thị trực tiếp trong editor (underline đỏ + tooltip).
• acorn-walk được dùng để duyệt AST khi cần.

Linter chỉ kiểm tra cú pháp — không kiểm tra logic runtime hay type checking.

RequireJS và requireAsync

Hàm requireAsync(moduleName) cho phép import thư viện bên ngoài từ CDN:

const echarts = await requireAsync('echarts');
const moment = await requireAsync('moment');
const lodash = await requireAsync('lodash');

Cơ chế hoạt động:

1. Gọi requireAsync('echarts') → kiểm tra cache.
2. Nếu chưa có, tải module từ CDN qua RequireJS.
3. Cache module cho lần gọi tiếp theo (không tải lại).

Lưu ý

Module tải qua CDN phụ thuộc vào kết nối internet. Nếu CDN không truy cập được, requireAsync sẽ throw error.

Block context (ctx) chi tiết

ctx.element

DOM element thực tế của block. Bạn toàn quyền thao tác:

ctx.element.innerHTML = '<h1>Hello</h1>';
ctx.element.style.backgroundColor = '#f0f0f0';

ctx.api

Instance của APIClient — gọi API server:

const res = await ctx.api.request({
  url: 'collectionName:list',
  params: { filter: { status: 'active' } },
});

ctx.i18n

Hệ thống đa ngôn ngữ — lấy chuỗi dịch:

const label = ctx.i18n.t('field.status');

ctx.currentUser / ctx.currentRecord

Thông tin user đang đăng nhập và bản ghi hiện tại (nếu block nằm trong context có record).

Auto-execute

Code tự động thực thi trong hai trường hợp:

1. Block mount: Khi trang chứa block được mở.
2. Save: Khi developer lưu code mới trong editor.

Nếu code throw error, plugin bắt lỗi và hiển thị thông báo thay vì crash toàn bộ trang.

Settings panel

Trong Schema Settings (jsBlockSettings), admin có thể:

• Xem/chỉnh JSON schema của block
• Cấu hình editor options (chiều cao, theme)
• Xóa block