@digiforce-nc/plugin-field-code

Plugin cung cấp kiểu field code editor — tích hợp CodeMirror để nhập và hiển thị mã nguồn trực tiếp trong bản ghi, hỗ trợ syntax highlighting cho Java, JavaScript, Python, SQL và nhiều ngôn ngữ khác.

Plugin này làm gì?

Hãy hình dung: bạn cần lưu đoạn SQL query, đoạn script Python, hoặc JSON config trong bản ghi. Textarea thường không đủ — thiếu syntax highlighting, thiếu line numbers, dễ sai cú pháp. Plugin này thay thế bằng CodeMirror editor đầy đủ tính năng, lazy-loaded để không ảnh hưởng hiệu năng trang.

Hai chế độ hoạt động

#	Chế độ	Chi tiết
1	Edit mode	CodeMirror editor với syntax highlighting, line numbers, auto-indent, JS linting
2	Display mode	Read-only code block với highlighting — không load toàn bộ editor

Kiến trúc

Tổng quan

Plugin này là client-only — server không có logic xử lý. Giá trị code được lưu dạng text thuần trong database. Toàn bộ tính năng nằm ở client: editor, highlighting, linting.

Luồng hoạt động

Ngôn ngữ hỗ trợ

Ngôn ngữ	Extension CodeMirror
JavaScript	`@codemirror/lang-javascript` + jshint linting
TypeScript	`@codemirror/lang-javascript` (ts mode)
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`

Settings cấu hình

Setting	Kiểu	Mô tả
`height`	`string`	Chiều cao editor (ví dụ: `200px`, `50vh`)
`indent`	`number`	Số space cho mỗi level indent (mặc định 2)

Components

Component	Chức năng
`CodeEditor`	Component chính — lazy-loaded CodeMirror wrapper
`CodeFieldWidget`	Widget cho chế độ edit (đăng ký x-component)
`DisplayCodeFieldWidget`	Widget cho chế độ display (read-only highlight)

Ví dụ sử dụng

Cấu hình field code editor

typescript

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,
    },
  },
};

Hiển thị code read-only

typescript

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

Thành phần client

Thành phần	Mô tả
`CodeEditor`	CodeMirror wrapper, lazy-loaded
`CodeFieldWidget`	Widget edit mode
`DisplayCodeFieldWidget`	Widget read-only

Dependencies

Package	Vai trò
`@digiforce-nc/client`	Client framework — đăng ký component
`@digiforce-nc/server`	Server framework (peer) — plugin class rỗng
`@codemirror/*`	Core editor, ngôn ngữ, theme
`@uiw/react-codemirror`	React binding cho CodeMirror
`jshint`	JavaScript linting engine