@libs-ui/components-inputs-quill2x 0.2.357-7 → 0.2.357-9

package/README.md

@@ -101,8 +101,8 @@ import { LibsUiComponentsInputsQuill2xComponent } from '@libs-ui/components-inpu
   templateUrl: './my.component.html',
 })
 export class MyComponent {
-  protected formData = signal<Record<string, string>>({
-    content: '<p>Xin chào! Đây là nội dung ban đầu.</p>',
+  protected basicData = signal<Record<string, string>>({
+    content: '<p>Xin chào! Đây là trình soạn thảo <strong>Quill2x</strong>.</p>',
   });
 
   protected handlerChange(html: string): void {
@@ -115,9 +115,9 @@ export class MyComponent {
 ```html
 <!-- my.component.html -->
 <libs_ui-components-inputs-quill2x
-  [(item)]="formData"
+  [(item)]="basicData"
   [fieldBind]="'content'"
-  [placeholder]="'Nhập nội dung...'"
+  [placeholder]="'Nhập nội dung ngắn...'"
   (outChange)="handlerChange($event)">
 </libs_ui-components-inputs-quill2x>
 ```
@@ -136,11 +136,12 @@ import { LibsUiComponentsInputsQuill2xComponent, IQuill2xCustomConfig } from '@l
   templateUrl: './my.component.html',
 })
 export class MyComponent {
-  protected articleData = signal<Record<string, string>>({
-    body: '<h1>Tiêu đề bài viết</h1><p>Nội dung bài viết tại đây.</p>',
+  protected fullData = signal<Record<string, string>>({
+    content: '<h1>Tiêu đề lớn</h1><p>Nội dung với đầy đủ các công cụ hỗ trợ.</p><ul><li>Danh mục 1</li><li>Danh mục 2</li></ul>',
   });
 
-  protected fullConfig: IQuill2xCustomConfig = {
+  // toolbar.type = 'all' hiển thị đầy đủ các nhóm công cụ; resize='vertical' cho phép kéo rộng editor
+  protected fullConfig = {
     toolbar: signal({
       type: signal<'all'>('all'),
     }),
@@ -158,8 +159,8 @@ export class MyComponent {
 ```html
 <!-- my.component.html -->
 <libs_ui-components-inputs-quill2x
-  [(item)]="articleData"
-  [fieldBind]="'body'"
+  [(item)]="fullData"
+  [fieldBind]="'content'"
   [quillCustomConfig]="fullConfig"
   [resize]="'vertical'"
   [minHeightEditorContentDefault]="150"
@@ -185,13 +186,13 @@ import { IMentionConfig } from '@libs-ui/components-inputs-mention';
   templateUrl: './my.component.html',
 })
 export class MyComponent {
-  protected commentData = signal<Record<string, string>>({ comment: '' });
+  protected mentionData = signal<Record<string, string>>({ content: '<p>Thử gõ @ để mention...</p>' });
 
   protected mentionConfig: IMentionConfig = {
     items: [
-      { id: '1', name: 'Anh Tuấn', username: 'tuan@company.com' },
-      { id: '2', name: 'Bảo Ngọc', username: 'ngoc@company.com' },
-      { id: '3', name: 'Công Thành', username: 'thanh@company.com' },
+      { id: '1', name: 'Anh Tuấn', username: 'tuan@example.com' },
+      { id: '2', name: 'Bảo Ngọc', username: 'ngoc@example.com' },
+      { id: '3', name: 'Công Thành', username: 'thanh@example.com' },
     ],
     triggerChar: '@',
     labelKey: 'name',
@@ -209,10 +210,9 @@ export class MyComponent {
 ```html
 <!-- my.component.html -->
 <libs_ui-components-inputs-quill2x
-  [(item)]="commentData"
-  [fieldBind]="'comment'"
-  [dataConfigMention]="mentionConfig"
-  [placeholder]="'Nhập bình luận, gõ @ để mention...'">
+  [(item)]="mentionData"
+  [fieldBind]="'content'"
+  [dataConfigMention]="mentionConfig">
 </libs_ui-components-inputs-quill2x>
 ```
 
@@ -278,12 +278,13 @@ import { LibsUiComponentsInputsQuill2xComponent, IQuill2xCustomConfig } from '@l
 export class MyComponent implements AfterViewInit {
   @ViewChild('triggerBtn') triggerBtn?: ElementRef<HTMLButtonElement>;
 
-  protected floatingData = signal<Record<string, string>>({ content: '' });
-  protected floatingConfig = signal<IQuill2xCustomConfig | undefined>(undefined);
+  protected positionFixedData = signal<Record<string, string>>({ content: '<p>Nội dung với toolbar floating...</p>' });
+  protected positionFixedConfig = signal<IQuill2xCustomConfig | undefined>(undefined);
 
+  // #triggerBtn dùng ViewChild — element phải tồn tại trước khi khởi tạo positionFixed
   ngAfterViewInit(): void {
     if (!this.triggerBtn) return;
-    this.floatingConfig.set({
+    this.positionFixedConfig.set({
       toolbar: signal({
         type: signal<'default'>('default'),
         positionFixed: signal({
@@ -304,15 +305,17 @@ export class MyComponent implements AfterViewInit {
 
 ```html
 <!-- my.component.html -->
-<button #triggerBtn class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
-  Mở toolbar
-</button>
-<libs_ui-components-inputs-quill2x
-  [(item)]="floatingData"
-  [fieldBind]="'content'"
-  [quillCustomConfig]="floatingConfig()"
-  [minHeightEditorContentDefault]="150">
-</libs_ui-components-inputs-quill2x>
+<div>
+  <button #triggerBtn class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+    Click để mở Quill Editor
+  </button>
+  <libs_ui-components-inputs-quill2x
+    [(item)]="positionFixedData"
+    [fieldBind]="'content'"
+    [quillCustomConfig]="positionFixedConfig()"
+    [displayToolbar]="true">
+  </libs_ui-components-inputs-quill2x>
+</div>
 ```
 
 ### 6. Lập trình điều khiển editor qua FunctionsControl
@@ -399,7 +402,7 @@ export class MyComponent {
 
 | Output | Type | Mô tả | Handler TS | Binding HTML |
 |---|---|---|---|---|
-| `(outChange)` | `string` | Emit nội dung HTML (đã qua XSS filter) mỗi khi nội dung thay đổi. | `handlerChange(html: string): void { event.stopPropagation?.(); this.savedHtml = html; }` | `(outChange)="handlerChange($event)"` |
+| `(outChange)` | `string` | Emit nội dung HTML (đã qua XSS filter) mỗi khi nội dung thay đổi. | `handlerChange(html: string): void { this.savedHtml = html; }` | `(outChange)="handlerChange($event)"` |
 | `(outFocus)` | `void` | Emit khi editor nhận focus. | `handlerFocus(): void { this.isEditing.set(true); }` | `(outFocus)="handlerFocus()"` |
 | `(outBlur)` | `void` | Emit khi editor mất focus. | `handlerBlur(): void { this.isEditing.set(false); }` | `(outBlur)="handlerBlur()"` |
 | `(outFunctionsControl)` | `IQuill2xFunctionControlEvent` | Emit ngay khi editor khởi tạo xong, trả về object chứa các hàm điều khiển editor. | `handlerFunctionsControl(ctrl: IQuill2xFunctionControlEvent): void { this.editorCtrl = ctrl; }` | `(outFunctionsControl)="handlerFunctionsControl($event)"` |
@@ -589,11 +592,3 @@ const delta = getDeltaOfQuill2xFromHTML(html);
 ⚠️ **Tính toán toolbar**: Toolbar tự tính toán độ rộng sau khi render. Nếu component cha có animation hoặc thay đổi kích thước, gọi `editorCtrl?.reCalculatorToolbar()` sau khi animation kết thúc để toolbar hiển thị đúng.
 
 ⚠️ **convertStandardList khi lưu**: HTML được lưu vào `item[fieldBind]` đã qua `convertStandardList()` để chuẩn hóa định dạng danh sách. Khi hiển thị lại nội dung, dùng component `@libs-ui/components-inputs-quill2x-preview` hoặc apply CSS Quill Snow theme.
-
-## Demo
-
-```bash
-npx nx serve core-ui
-```
-
-Truy cập: http://localhost:4500/inputs/quill2x