@libs-ui/components-preview-text-data 0.2.355-14 → 0.2.355-15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +150 -2
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,3 +1,151 @@
|
|
|
1
|
-
# preview-text-data
|
|
1
|
+
# @libs-ui/components-preview-text-data
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> 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ẽ.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`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).
|
|
8
|
+
|
|
9
|
+
### Tính năng
|
|
10
|
+
|
|
11
|
+
- ✅ **Highlight cú pháp**: Hỗ trợ JavaScript, TypeScript, HTML, CSS, JSON, SQL, XML, YAML, Python, và văn bản thuần túy.
|
|
12
|
+
- ✅ **Linter tích hợp**: Kiểm tra lỗi cú pháp thời gian thực cho JS, JSON và SQL.
|
|
13
|
+
- ✅ **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 đủ.
|
|
14
|
+
- ✅ **Line Wrapping**: Tùy chọn tự động xuống dòng để tránh thanh cuộn ngang.
|
|
15
|
+
- ✅ **Dynamic Selection**: Cho phép thay đổi ngôn ngữ ngay trong giao diện nếu được cấu hình.
|
|
16
|
+
- ✅ **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.
|
|
17
|
+
- ✅ **OnPush Change Detection**
|
|
18
|
+
- ✅ **Angular Signals**
|
|
19
|
+
|
|
20
|
+
## Khi nào sử dụng
|
|
21
|
+
|
|
22
|
+
- Hiển thị các đoạn mã mẫu trong tài liệu.
|
|
23
|
+
- Chỉnh sửa cấu hình (JSON/YAML).
|
|
24
|
+
- Viết câu lệnh truy vấn (SQL) trong các công cụ quản trị.
|
|
25
|
+
- Kiểm tra dữ liệu thô (Raw data) từ API.
|
|
26
|
+
|
|
27
|
+
## Cài đặt
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
# npm
|
|
31
|
+
npm install @libs-ui/components-preview-text-data
|
|
32
|
+
|
|
33
|
+
# yarn
|
|
34
|
+
yarn add @libs-ui/components-preview-text-data
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Import
|
|
38
|
+
|
|
39
|
+
```typescript
|
|
40
|
+
import { LibsUiComponentsPreviewTextDataComponent } from '@libs-ui/components-preview-text-data';
|
|
41
|
+
|
|
42
|
+
@Component({
|
|
43
|
+
standalone: true,
|
|
44
|
+
imports: [LibsUiComponentsPreviewTextDataComponent],
|
|
45
|
+
// ...
|
|
46
|
+
})
|
|
47
|
+
export class YourComponent {}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Ví dụ
|
|
51
|
+
|
|
52
|
+
### Chế độ xem (Read-only)
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<libs_ui-components-preview_text_data
|
|
56
|
+
[content]="myJsonCode"
|
|
57
|
+
langSelected="json"></libs_ui-components-preview_text_data>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Chế độ chỉnh sửa với Linter
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<libs_ui-components-preview_text_data
|
|
64
|
+
[(langSelected)]="currentLang"
|
|
65
|
+
[content]="initialContent"
|
|
66
|
+
[editable]="true"
|
|
67
|
+
[langsAccept]="['javascript', 'json', 'sql']"
|
|
68
|
+
(outChange)="onContentChange($event)"></libs_ui-components-preview_text_data>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## API
|
|
72
|
+
|
|
73
|
+
### libs_ui-components-preview_text_data
|
|
74
|
+
|
|
75
|
+
#### Inputs
|
|
76
|
+
|
|
77
|
+
| Property | Type | Default | Description |
|
|
78
|
+
| ---------------------- | -------------------------------------- | ------------ | ------------------------------------------------ |
|
|
79
|
+
| `[background]` | `string` | `'#f8f9fa'` | Màu nền của editor. |
|
|
80
|
+
| `[content]` | `string` | `''` | Nội dung code hiển thị/chỉnh sửa. |
|
|
81
|
+
| `[editable]` | `boolean` | `false` | Cho phép người dùng chỉnh sửa nội dung. |
|
|
82
|
+
| `[hiddenAction]` | `boolean` | `false` | Ẩn thanh công cụ (Copy, Wrap, Lang selector). |
|
|
83
|
+
| `[langsAccept]` | `PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT[]` | `undefined` | Danh sách ngôn ngữ cho phép chọn trong dropdown. |
|
|
84
|
+
| `[langsChangeLabel]` | `ILanguageOptions` | `undefined` | Tùy chỉnh label hiển thị của các ngôn ngữ. |
|
|
85
|
+
| `[langSelected]` | `PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT` | **Bắt buộc** | Ngôn ngữ hiện tại (hỗ trợ Two-way binding). |
|
|
86
|
+
| `[lintIgnorePatterns]` | `string[]` | `[...]` | Các mẫu thông báo lỗi linter JS sẽ bỏ qua. |
|
|
87
|
+
|
|
88
|
+
#### Outputs
|
|
89
|
+
|
|
90
|
+
| Property | Type | Description |
|
|
91
|
+
| ---------------- | ------------------------ | ------------------------------------------------------------- |
|
|
92
|
+
| `(outChange)` | `IPreviewTextDataChange` | Phát ra khi nội dung, trạng thái wrap hoặc ngôn ngữ thay đổi. |
|
|
93
|
+
| `(syntaxErrors)` | `Diagnostic[]` | Danh sách lỗi cú pháp được phát hiện bởi linter. |
|
|
94
|
+
|
|
95
|
+
## Types & Interfaces
|
|
96
|
+
|
|
97
|
+
```typescript
|
|
98
|
+
export type PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT = 'javascript' | 'json' | 'sql' | 'html' | 'css' | 'xml' | 'yaml' | 'python' | 'text';
|
|
99
|
+
|
|
100
|
+
export interface IPreviewTextDataChange {
|
|
101
|
+
content: string;
|
|
102
|
+
isWrap: boolean;
|
|
103
|
+
language: PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT;
|
|
104
|
+
contextChange: 'content' | 'isWrap' | 'language';
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export interface ILanguageOptions {
|
|
108
|
+
[key: string]: string;
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## Styling
|
|
113
|
+
|
|
114
|
+
### CSS Classes
|
|
115
|
+
|
|
116
|
+
| Class | Description |
|
|
117
|
+
| -------------- | -------------------------------- |
|
|
118
|
+
| `.cm-editor` | Class gốc của editor CodeMirror. |
|
|
119
|
+
| `.cm-scroller` | Vùng cuộn của editor. |
|
|
120
|
+
| `.cm-content` | Vùng chứa nội dung chữ. |
|
|
121
|
+
|
|
122
|
+
## Công nghệ
|
|
123
|
+
|
|
124
|
+
| Technology | Version | Purpose |
|
|
125
|
+
| --------------- | ------- | ------------------ |
|
|
126
|
+
| Angular | 18+ | Framework |
|
|
127
|
+
| CodeMirror | 6.x | Core Editor Engine |
|
|
128
|
+
| Angular Signals | - | State management |
|
|
129
|
+
| TailwindCSS | 3.x | Styling |
|
|
130
|
+
|
|
131
|
+
## Demo
|
|
132
|
+
|
|
133
|
+
```bash
|
|
134
|
+
npx nx serve core-ui
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
Truy cập: `http://localhost:4200/preview-text-data`
|
|
138
|
+
|
|
139
|
+
## Unit Tests
|
|
140
|
+
|
|
141
|
+
```bash
|
|
142
|
+
# Chạy tests
|
|
143
|
+
npx nx test components-preview-text-data
|
|
144
|
+
|
|
145
|
+
# Coverage
|
|
146
|
+
npx nx test components-preview-text-data --coverage
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## License
|
|
150
|
+
|
|
151
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-preview-text-data",
|
|
3
|
-
"version": "0.2.355-
|
|
3
|
+
"version": "0.2.355-15",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-buttons-button": "0.2.355-
|
|
7
|
-
"@libs-ui/components-dropdown": "0.2.355-
|
|
8
|
-
"@libs-ui/services-notification": "0.2.355-
|
|
9
|
-
"@libs-ui/utils": "0.2.355-
|
|
6
|
+
"@libs-ui/components-buttons-button": "0.2.355-15",
|
|
7
|
+
"@libs-ui/components-dropdown": "0.2.355-15",
|
|
8
|
+
"@libs-ui/services-notification": "0.2.355-15",
|
|
9
|
+
"@libs-ui/utils": "0.2.355-15"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|
|
12
12
|
"module": "fesm2022/libs-ui-components-preview-text-data.mjs",
|