npm package: @libs-ui/components-preview-text-data
Description: > Component hiển thị và chỉnh sửa mã nguồn (code editor) dựa trên CodeMirror 6, hỗ trợ nhiều ngôn ngữ và tính năng linter mạnh mẽ.
Latest version: 0.2.356-23

# @libs-ui/components-preview-text-data

> Component hiển thị và chỉnh sửa mã nguồn (code editor) dựa trên CodeMirror 6, hỗ trợ nhiều ngôn ngữ và tính năng linter mạnh mẽ.

## Giới thiệu

`LibsUiComponentsPreviewTextDataComponent` cung cấp một trình soạn thảo mã nguồn nhẹ nhưng đầy đủ tính năng. Nó hỗ trợ highlight cú pháp cho nhiều ngôn ngữ, kiểm tra lỗi (linter) cho JavaScript, JSON, SQL và cung cấp giao diện thân thiện với các tùy chọn copy, tự động xuống dòng (line wrap).

### Tính năng

- ✅ **Highlight cú pháp**: Hỗ trợ JavaScript, TypeScript, HTML, CSS, JSON, SQL, XML, YAML, Python, và văn bản thuần túy.
- ✅ **Linter tích hợp**: Kiểm tra lỗi cú pháp thời gian thực cho JS, JSON và SQL.
- ✅ **Chỉnh sửa (Editable)**: Có thể cấu hình để trở thành một trình soạn thảo mã nguồn đầy đủ.
- ✅ **Line Wrapping**: Tùy chọn tự động xuống dòng để tránh thanh cuộn ngang.
- ✅ **Dynamic Selection**: Cho phép thay đổi ngôn ngữ ngay trong giao diện nếu được cấu hình.
- ✅ **Hiệu năng cao**: Sử dụng CodeMirror 6 với kiến trúc modular, load ngôn ngữ khi cần thiết.
- ✅ **OnPush Change Detection**
- ✅ **Angular Signals**

## Khi nào sử dụng

- Hiển thị các đoạn mã mẫu trong tài liệu.
- Chỉnh sửa cấu hình (JSON/YAML).
- Viết câu lệnh truy vấn (SQL) trong các công cụ quản trị.
- Kiểm tra dữ liệu thô (Raw data) từ API.

## Cài đặt

```bash
# npm
npm install @libs-ui/components-preview-text-data

# yarn
yarn add @libs-ui/components-preview-text-data
```

## Import

```typescript
import { LibsUiComponentsPreviewTextDataComponent } from '@libs-ui/components-preview-text-data';

@Component({
  standalone: true,
  imports: [LibsUiComponentsPreviewTextDataComponent],
  // ...
})
export class YourComponent {}
```

## Ví dụ

### Chế độ xem (Read-only)

```html
<libs_ui-components-preview_text_data
  [content]="myJsonCode"
  langSelected="json"></libs_ui-components-preview_text_data>
```

### Chế độ chỉnh sửa với Linter

```html
<libs_ui-components-preview_text_data
  [(langSelected)]="currentLang"
  [content]="initialContent"
  [editable]="true"
  [langsAccept]="['javascript', 'json', 'sql']"
  (outChange)="onContentChange($event)"></libs_ui-components-preview_text_data>
```

## API

### libs_ui-components-preview_text_data

#### Inputs

| Property               | Type                                   | Default      | Description                                      |
| ---------------------- | -------------------------------------- | ------------ | ------------------------------------------------ |
| `[background]`         | `string`                               | `'#f8f9fa'`  | Màu nền của editor.                              |
| `[content]`            | `string`                               | `''`         | Nội dung code hiển thị/chỉnh sửa.                |
| `[editable]`           | `boolean`                              | `false`      | Cho phép người dùng chỉnh sửa nội dung.          |
| `[hiddenAction]`       | `boolean`                              | `false`      | Ẩn thanh công cụ (Copy, Wrap, Lang selector).    |
| `[langsAccept]`        | `PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT[]` | `undefined`  | Danh sách ngôn ngữ cho phép chọn trong dropdown. |
| `[langsChangeLabel]`   | `ILanguageOptions`                     | `undefined`  | Tùy chỉnh label hiển thị của các ngôn ngữ.       |
| `[langSelected]`       | `PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT`   | **Bắt buộc** | Ngôn ngữ hiện tại (hỗ trợ Two-way binding).      |
| `[lintIgnorePatterns]` | `string[]`                             | `[...]`      | Các mẫu thông báo lỗi linter JS sẽ bỏ qua.       |

#### Outputs

| Property         | Type                     | Description                                                   |
| ---------------- | ------------------------ | ------------------------------------------------------------- |
| `(outChange)`    | `IPreviewTextDataChange` | Phát ra khi nội dung, trạng thái wrap hoặc ngôn ngữ thay đổi. |
| `(syntaxErrors)` | `Diagnostic[]`           | Danh sách lỗi cú pháp được phát hiện bởi linter.              |

## Types & Interfaces

```typescript
export type PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT = 'javascript' | 'json' | 'sql' | 'html' | 'css' | 'xml' | 'yaml' | 'python' | 'text';

export interface IPreviewTextDataChange {
  content: string;
  isWrap: boolean;
  language: PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT;
  contextChange: 'content' | 'isWrap' | 'language';
}

export interface ILanguageOptions {
  [key: string]: string;
}
```

## Styling

### CSS Classes

| Class          | Description                      |
| -------------- | -------------------------------- |
| `.cm-editor`   | Class gốc của editor CodeMirror. |
| `.cm-scroller` | Vùng cuộn của editor.            |
| `.cm-content`  | Vùng chứa nội dung chữ.          |

## Công nghệ

| Technology      | Version | Purpose            |
| --------------- | ------- | ------------------ |
| Angular         | 18+     | Framework          |
| CodeMirror      | 6.x     | Core Editor Engine |
| Angular Signals | -       | State management   |
| TailwindCSS     | 3.x     | Styling            |

## Demo

```bash
npx nx serve core-ui
```

Truy cập: `http://localhost:4200/preview-text-data`

## Unit Tests

```bash
# Chạy tests
npx nx test components-preview-text-data

# Coverage
npx nx test components-preview-text-data --coverage
```

## License

MIT