@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

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

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

Import

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

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

Ví dụ

Chế độ xem (Read-only)

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

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

<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

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

npx nx serve core-ui

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

Unit Tests

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

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

License

MIT