Cài đặt và sử dụng

Kích hoạt plugin

Plugin @digiforce-nc/plugin-field-code thường được bật sẵn. Nếu chưa, vào Settings → Plugin Manager và bật — không cần cấu hình server.

Thêm field Code Editor

1. Mở Collection Manager → chọn collection.
2. Thêm field mới → chọn interface Code.
3. Đặt tên field (ví dụ: sqlQuery, scriptContent).
4. Cấu hình thuộc tính trong settings.

const codeField = {
  name: 'sqlQuery',
  type: 'text',
  interface: 'code',
  uiSchema: {
    type: 'string',
    title: 'SQL Query',
    'x-component': 'CodeEditor',
    'x-component-props': {
      language: 'sql',
      height: '300px',
      indent: 4,
    },
  },
};

Chọn ngôn ngữ lập trình

Trong settings của field, chọn ngôn ngữ để bật syntax highlighting phù hợp:

Ngôn ngữ	Extension	Ghi chú
JavaScript	@codemirror/lang-javascript	Có linting qua jshint
TypeScript	@codemirror/lang-javascript (ts)	Syntax highlighting
Java	@codemirror/lang-java
Python	@codemirror/lang-python
SQL	@codemirror/lang-sql
JSON	@codemirror/lang-json
HTML	@codemirror/lang-html
CSS	@codemirror/lang-css
Markdown	@codemirror/lang-markdown

Cấu hình height và indent

Setting	Kiểu	Mô tả	Mặc định
height	string	Chiều cao editor	200px
indent	number	Số space cho mỗi level thụt lề	2

Ví dụ chiều cao linh hoạt: 50vh (50% viewport), 400px (cố định).

Chế độ hiển thị

Plugin có hai chế độ:

• Edit mode: CodeMirror editor đầy đủ — syntax highlighting, line numbers, auto-indent, linting (JavaScript).
• Display mode (read-pretty): Code block read-only với highlighting, không load toàn bộ editor để tiết kiệm tài nguyên.

const displaySchema = {
  type: 'string',
  'x-component': 'CodeEditor',
  'x-component-props': {
    language: 'javascript',
    readOnly: true,
  },
  'x-read-pretty': true,
};

CodeMirror và lazy loading

Plugin sử dụng @uiw/react-codemirror làm React binding. CodeEditor component được lazy-loaded — chỉ tải bundle CodeMirror khi người dùng mở field, không ảnh hưởng hiệu năng tải trang ban đầu.

Lưu ý

• Giá trị code được lưu dạng text thuần trong database — không có encoding hay transform.
• Plugin hoàn toàn client-only, không tạo migration hay xử lý server.
• JavaScript linting chạy real-time trong trình duyệt qua jshint; các ngôn ngữ khác chỉ có syntax highlighting.