@sd-angular/core 19.0.0-beta.6 → 19.0.0-beta.60

package/assets/scss/ckeditor5.scss

@@ -17,15 +17,73 @@
 // Import the editor styles.
 // @import '@ckeditor/ckeditor5-editor-classic/dist/index.css';
 @import '@ckeditor/ckeditor5-essentials/dist/index.css';
+@import '@ckeditor/ckeditor5-page-break/dist/index.css';
 @import '@ckeditor/ckeditor5-autoformat/dist/index.css';
 @import '@ckeditor/ckeditor5-basic-styles/dist/index.css';
 // @import '@ckeditor/ckeditor5-block-quote/dist/index.css';
 @import '@ckeditor/ckeditor5-heading/dist/index.css';
-@import '@ckeditor/ckeditor5-image/dist/index.css';
+// @import '@ckeditor/ckeditor5-image/dist/index.css';
+@import '@ckeditor/ckeditor5-image/dist/index-editor.css';
 @import '@ckeditor/ckeditor5-indent/dist/index.css';
 @import '@ckeditor/ckeditor5-link/dist/index.css';
 @import '@ckeditor/ckeditor5-list/dist/index.css';
 // @import '@ckeditor/ckeditor5-media-embed/dist/index.css';
 @import '@ckeditor/ckeditor5-paste-from-office/dist/index.css';
-@import '@ckeditor/ckeditor5-table/dist/index.css';
+
+// hung.pham16: không sử dụng default styles của ckeditor vì server không hỗ trợ
+// @import '@ckeditor/ckeditor5-table/dist/index.css';
+@import '@ckeditor/ckeditor5-table/dist/index-editor.css';
+
 // @import '@ckeditor/ckeditor5-mention/dist/index.css';
+
+// Custom toolbar
+.ck-editor {
+  /* --- 1. GIẢM KÍCH THƯỚC ICON VÀ CHỮ --- */
+  /* Giảm cỡ chữ trong dropdown (mặc định khoảng 13px) */
+  --ck-font-size-base: 11px !important;
+
+  /* Giảm kích thước Icon (mặc định 20px) */
+  --ck-icon-size: 16px !important;
+
+  /* --- 2. TỐI ƯU KHOẢNG CÁCH (Padding/Margin) --- */
+
+  /* Giảm khoảng cách giữa các nút */
+  --ck-spacing-small: 2px !important;
+  --ck-spacing-standard: 6px !important;
+  --ck-spacing-large: 8px !important;
+
+  /*  */
+  --ck-color-table-focused-cell-background: transparent !important;
+  --ck-table-content-default-border-color: transparent !important;
+
+  //
+  --ck-insert-table-dropdown-padding: 10px;
+  --ck-insert-table-dropdown-box-height: 16px;
+  --ck-insert-table-dropdown-box-width: 16px;
+  --ck-insert-table-dropdown-box-margin: 1px;
+
+  --ck-focus-ring: 1px solid var(--ck-color-base-border);
+}
+
+/* Giảm độ cao của thanh toolbar (cho gọn) */
+.ck-toolbar {
+  min-height: 32px !important; /* Mặc định thường là 40px */
+  padding: 2px !important;
+
+  /* Làm màu nền toolbar nhạt hơn cho hiện đại */
+  background: #f8f9fa !important;
+  border-bottom: 1px solid #e0e0e0 !important;
+}
+
+.ck-toolbar__items {
+  /* Chỉnh nút bấm trong toolbar nhỏ lại */
+  > .ck-button {
+    padding: 2px 4px !important; /* Giảm padding trái phải của nút */
+    min-height: 24px !important;
+  }
+
+  /* Chỉnh lại dropdown (Heading, Font Size) cho khớp */
+  > .ck-dropdown {
+    min-height: 24px !important;
+  }
+}

package/assets/scss/core/bootstrap.scss

@@ -81,6 +81,23 @@
   .fs-#{$i} {
     font-size: #{$i}px !important;
   }
+
+  // Gap
+  .gap-#{$i} {
+    gap: #{$i}px !important;
+  }
+
+  .gap-y-#{$i} {
+    row-gap: #{$i}px !important;
+  }
+
+  .gap-x-#{$i} {
+    column-gap: #{$i}px !important;
+  }
+}
+
+.flex-1 {
+  flex: 1;
 }
 
 .w-full {

package/assets/scss/core/form.scss

@@ -89,8 +89,11 @@
     }
   }
 
-  // Size normal
+  // Size normal`
   &.sd-md {
+    --mat-form-field-container-height: 40px;
+    --mat-form-field-container-vertical-padding: 3px;
+
     &.mat-form-field-appearance-outline {
       .mat-mdc-form-field-infix {
         padding: 0 0 8px 0 !important;

package/assets/scss/core/grid.scss

@@ -0,0 +1,40 @@
+/* ==========================================================================
+   CSS GRID UTILITIES
+   ========================================================================== */
+
+/* 1. Kích hoạt Grid cơ bản */
+.sd-grid-container {
+  display: grid;
+  column-gap: 8px;
+  row-gap: 0px;
+
+  /* 2. Định nghĩa tổng số cột của Grid Cha (từ 1 đến 12 cột) */
+  @for $i from 1 through 12 {
+    &.grid-cols-#{$i} {
+      /* Dùng minmax(0, 1fr) thay vì 1fr để chống vỡ layout khi nội dung text quá dài */
+      grid-template-columns: repeat($i, minmax(0, 1fr));
+    }
+  }
+
+  /* 3. Tiện ích chiếm CỘT (Column Spanning) cho phần tử con */
+  @for $i from 1 through 12 {
+    .col-span-#{$i} {
+      grid-column: span #{$i} / span #{$i};
+    }
+  }
+  /* Chiếm toàn bộ số cột hiện có (Full width) */
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
+
+  /* 4. Tiện ích chiếm HÀNG (Row Spanning) cho phần tử con */
+  @for $i from 1 through 12 {
+    .row-span-#{$i} {
+      grid-row: span #{$i} / span #{$i};
+    }
+  }
+  /* Chiếm toàn bộ hàng (Full height) */
+  .row-span-full {
+    grid-row: 1 / -1;
+  }
+}

package/assets/scss/sd-core.scss

@@ -7,6 +7,7 @@
 @use './core/typography.scss';
 @use './core/print.scss';
 @use './core/elevation.scss';
+@use './core/grid.scss';
 @use './themes/default.scss';
 @use './themes/material-theme.scss';
 

package/components/avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './src/avatar.component';

package/components/avatar/src/avatar.component.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+export declare class SdAvatar {
+    #private;
+    /**
+     * The source string to be used for the avatar.
+     * - If it matches a URL pattern, an image is displayed.
+     * - If it is a string representing a name, initials and a colored background are generated.
+     * - If undefined, it falls back to a neutral ? initial.
+     */
+    readonly src: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly size: import("@angular/core").InputSignal<number>;
+    constructor();
+    readonly isUrl: import("@angular/core").Signal<boolean>;
+    readonly bgColor: import("@angular/core").Signal<string>;
+    readonly initials: import("@angular/core").Signal<string>;
+    handleError(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAvatar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAvatar, "sd-avatar", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/components/badge/src/badge.component.d.ts

@@ -1,27 +1,85 @@
 import { EventEmitter } from '@angular/core';
 import { SdColor, SdSize } from '@sd-angular/core/utilities/models';
+import { MaterialIconFontSet } from '@sd-angular/core/utilities/models';
 import * as i0 from "@angular/core";
+export type SdBadgeType = 'tag' | 'round' | 'icon';
 export declare class SdBadge {
     defaultIcon: string;
-    type: 'tag' | 'round' | 'icon';
-    set _type(type: 'tag' | 'round' | 'icon' | undefined | null);
-    color: SdColor;
-    set _color(color: SdColor | undefined | null);
-    set primary(value: boolean | '');
-    set secondary(value: boolean | '');
-    set success(value: boolean | '' | undefined | null);
-    set info(value: boolean | '' | undefined | null);
-    set warning(value: boolean | '' | undefined | null);
-    set error(value: boolean | '' | undefined | null);
-    fontSet: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp';
-    set _fontSet(fontSet: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' | undefined | null);
-    title: string | number | undefined | null;
-    description: string | undefined | null;
-    tooltip: string | undefined | null;
-    icon: string | undefined | null;
-    size: SdSize;
-    sdClick: EventEmitter<any>;
+    type: import("@angular/core").InputSignalWithTransform<SdBadgeType, SdBadgeType | null | undefined>;
+    color: import("@angular/core").InputSignalWithTransform<SdColor, SdColor | null | undefined>;
+    primary: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    secondary: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    success: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    info: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    warning: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    error: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    fontSet: import("@angular/core").InputSignalWithTransform<MaterialIconFontSet, MaterialIconFontSet | null | undefined>;
+    title: import("@angular/core").InputSignal<string | number | null | undefined>;
+    description: import("@angular/core").InputSignal<string | null | undefined>;
+    tooltip: import("@angular/core").InputSignal<string | null | undefined>;
+    icon: import("@angular/core").InputSignal<string | null | undefined>;
+    size: import("@angular/core").InputSignalWithTransform<SdSize, SdSize | null | undefined>;
+    click: EventEmitter<Event>;
     onClick: (event: Event) => void;
+    effectiveColor: import("@angular/core").Signal<SdColor>;
+    baseColorClasses: import("@angular/core").Signal<{
+        'c-primary': boolean;
+        'c-secondary': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+    }>;
+    iconColorClasses: import("@angular/core").Signal<{
+        'c-primary': boolean;
+        'c-black400': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+    }>;
+    iconSizeAndFontClasses: import("@angular/core").Signal<{
+        'c-xs': boolean;
+        'c-sm': boolean;
+        'c-md': boolean;
+        'c-lg': boolean;
+        'material-icons': boolean;
+        'material-icons-outlined': boolean;
+        'material-icons-round': boolean;
+        'material-icons-sharp': boolean;
+    }>;
+    tagIconCombinedClasses: import("@angular/core").Signal<{
+        'c-primary': boolean;
+        'c-secondary': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+        'c-xs': boolean;
+        'c-sm': boolean;
+        'c-md': boolean;
+        'c-lg': boolean;
+        'material-icons': boolean;
+        'material-icons-outlined': boolean;
+        'material-icons-round': boolean;
+        'material-icons-sharp': boolean;
+    }>;
+    iconCombinedClasses: import("@angular/core").Signal<{
+        'c-primary': boolean;
+        'c-black400': boolean;
+        'c-info': boolean;
+        'c-success': boolean;
+        'c-warning': boolean;
+        'c-error': boolean;
+        'c-xs': boolean;
+        'c-sm': boolean;
+        'c-md': boolean;
+        'c-lg': boolean;
+        'material-icons': boolean;
+        'material-icons-outlined': boolean;
+        'material-icons-round': boolean;
+        'material-icons-sharp': boolean;
+    }>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdBadge, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdBadge, "sd-badge", never, { "_type": { "alias": "type"; "required": false; }; "_color": { "alias": "color"; "required": false; }; "primary": { "alias": "primary"; "required": false; }; "secondary": { "alias": "secondary"; "required": false; }; "success": { "alias": "success"; "required": false; }; "info": { "alias": "info"; "required": false; }; "warning": { "alias": "warning"; "required": false; }; "error": { "alias": "error"; "required": false; }; "_fontSet": { "alias": "fontSet"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "sdClick": "sdClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdBadge, "sd-badge", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "secondary": { "alias": "secondary"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "info": { "alias": "info"; "required": false; "isSignal": true; }; "warning": { "alias": "warning"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "fontSet": { "alias": "fontSet"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "click": "click"; }, never, never, true, never>;
 }

package/components/button/src/button.component.d.ts

@@ -1,39 +1,41 @@
-import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { OnDestroy, OnInit } from '@angular/core';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
-import { SdColor } from '@sd-angular/core/utilities/models';
+import { MaterialIconFontSet, SdColor } from '@sd-angular/core/utilities/models';
 import * as i0 from "@angular/core";
+export type SdButtonType = 'fill' | 'light' | 'outline' | 'link';
+export type SdButtonSize = 'sm' | 'md' | 'lg';
+export type SdButtonHtmlType = 'button' | 'submit' | 'reset';
 export declare class SdButton extends SdBaseSecureComponent implements OnInit, OnDestroy {
     #private;
-    autoId?: string;
-    set _autoId(val: string | undefined | null);
-    type: 'fill' | 'light' | 'outline' | 'link';
-    set _type(type: 'fill' | 'light' | 'outline' | 'link' | undefined | null);
-    color: SdColor;
-    set _color(color: SdColor | undefined | null);
-    title: string | undefined | null;
-    width: string | undefined | null;
-    size: 'sm' | 'md' | 'lg' | undefined | null;
-    tooltip: string | undefined | null;
-    prefixIcon: string | undefined | null;
-    suffixIcon: string | undefined | null;
-    fontSet: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp' | 'material-symbols-outlined';
-    set _fontSet(fontSet: SdButton['fontSet'] | undefined | null);
-    disabled: boolean;
-    get disabledAttr(): "true" | null;
-    set _disabled(value: '' | boolean | undefined | null);
-    loading: boolean;
-    click: EventEmitter<Event>;
-    constructor();
-    ngOnInit(): void;
-    onInternalClick(event: Event): void;
-    ngOnDestroy(): void;
-    get buttonClasses(): {
+    private el;
+    autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    type: import("@angular/core").InputSignalWithTransform<SdButtonType, SdButtonType | null | undefined>;
+    color: import("@angular/core").InputSignalWithTransform<SdColor, SdColor | null | undefined>;
+    size: import("@angular/core").InputSignalWithTransform<SdButtonSize, SdButtonSize | null | undefined>;
+    fontSet: import("@angular/core").InputSignalWithTransform<MaterialIconFontSet, MaterialIconFontSet | null | undefined>;
+    title: import("@angular/core").InputSignal<string | null | undefined>;
+    width: import("@angular/core").InputSignal<string | null | undefined>;
+    tooltip: import("@angular/core").InputSignal<string | null | undefined>;
+    prefixIcon: import("@angular/core").InputSignal<string | null | undefined>;
+    suffixIcon: import("@angular/core").InputSignal<string | null | undefined>;
+    disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    block: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    htmlType: import("@angular/core").InputSignalWithTransform<SdButtonHtmlType, SdButtonHtmlType | null | undefined>;
+    autoId: import("@angular/core").Signal<string | undefined>;
+    buttonClasses: import("@angular/core").Signal<{
         'c-square': boolean | "" | null | undefined;
         'c-sm': boolean;
         'c-md': boolean;
         'c-lg': boolean;
         'c-disabled': boolean;
-    };
+        'c-block': boolean;
+    }>;
+    click: import("@angular/core").OutputEmitterRef<Event>;
+    constructor();
+    ngOnInit(): void;
+    onInternalClick(event: Event): void;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdButton, "sd-button", never, { "_autoId": { "alias": "autoId"; "required": false; }; "_type": { "alias": "type"; "required": false; }; "_color": { "alias": "color"; "required": false; }; "title": { "alias": "title"; "required": false; }; "width": { "alias": "width"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; }; "_fontSet": { "alias": "fontSet"; "required": false; }; "_disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "click": "click"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdButton, "sd-button", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fontSet": { "alias": "fontSet"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "htmlType": { "alias": "htmlType"; "required": false; "isSignal": true; }; }, { "click": "click"; }, never, never, true, never>;
 }

package/components/code-editor/index.d.ts

@@ -0,0 +1 @@
+export * from './src/code-editor.component';

package/components/code-editor/src/code-editor.component.d.ts

@@ -0,0 +1,25 @@
+import { SafeHtml } from '@angular/platform-browser';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-markup';
+import * as i0 from "@angular/core";
+export type CodeLanguage = 'html' | 'typescript' | 'json' | 'css' | 'scss';
+export declare class SdCodeEditor {
+    #private;
+    valueModel: import("@angular/core").ModelSignal<any>;
+    language: import("@angular/core").InputSignal<CodeLanguage>;
+    maxHeight: import("@angular/core").InputSignal<string>;
+    viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    copied: import("@angular/core").WritableSignal<boolean>;
+    textValue: import("@angular/core").WritableSignal<string>;
+    prismLang: import("@angular/core").Signal<CodeLanguage | "markup">;
+    private _lastEmittedValue;
+    constructor();
+    highlightedCode: import("@angular/core").Signal<SafeHtml>;
+    onTextChange(newText: string): void;
+    copyToClipboard(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdCodeEditor, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdCodeEditor, "sd-code-editor", never, { "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; }, never, never, true, never>;
+}

package/components/document-builder/index.d.ts

@@ -1,3 +1,4 @@
 export * from './src/components';
 export * from './src/document-builder.model';
 export * from './src/document-builder.component';
+export * from './src/plugins/ck-comment/ck-comment.plugin.model';

package/components/document-builder/src/document-builder.component.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from '@angular/core';
 import { ClassicEditor, ModelRange } from 'ckeditor5';
-import { SdDocumentBuilderComment, SdDocumentBuilderHeading, SdDocumentBuilderOption, SdDocumentBuilderVariable, SdEditorConfig } from './document-builder.model';
+import { VariablePlugin, CkCommentPlugin } from './plugins';
+import { SdDocumentBuilderHeading, SdDocumentBuilderOption, SdEditorConfig } from './document-builder.model';
 import * as i0 from "@angular/core";
 export declare class SdDocumentBuilder {
     #private;
@@ -19,51 +20,19 @@ export declare class SdDocumentBuilder {
     getOrientation: () => "PORTRAIT" | "LANDSCAPE";
     scrollToTop(): void;
     heading: {
-        all: () => SdDocumentBuilderHeading[];
-        scroll: (id: string) => void;
-    };
-    comment: {
-        /**
-         * Lấy tất cả comments trong document
-         * @returns Danh sách tất cả comments
-         */
-        all: () => SdDocumentBuilderComment[];
-        /**
-         * Thêm comment vào vùng text đang được chọn
-         * @param comment - Dữ liệu comment
-         * @param data - Dữ liệu extra data
-         * @returns SdDocumentBuilderComment hoặc null nếu không có text được chọn
-         */
-        add: <T = any>(range: ModelRange, comment: string, data?: T) => SdDocumentBuilderComment<T> | null;
         /**
-         * Cập nhật nội dung comment
-         * @param markerId - ID của marker
-         * @param commentData - Dữ liệu mới
-         * @returns Comment đã cập nhật hoặc null
+         * Lấy tất cả headings trong document
+         * @returns Danh sách tất cả headings
          */
-        update: <T = any>(markerId: string, comment: string, data?: T) => SdDocumentBuilderComment<T> | null;
-        /**
-         * Lấy chi tiết comment theo markerId
-         * @param markerId - ID của marker
-         * @returns Comment hoặc null
-         */
-        detail: (markerId: string) => SdDocumentBuilderComment | null;
-        /**
-         * Xóa comment theo markerId
-         * @param markerId - ID của marker cần xóa
-         * @returns true nếu xóa thành công, false nếu không tìm thấy
-         */
-        remove: (markerId: string) => boolean;
+        all: () => SdDocumentBuilderHeading[];
         /**
-         * Scroll đến vị trí comment
-         * @param markerId - ID của marker cần scroll tới
+         * Scroll tới vị trí của heading
+         * @param id - ID của heading cần scroll tới
          */
-        scroll: (markerId: string) => void;
-    };
-    variable: {
-        all: () => SdDocumentBuilderVariable[];
-        scroll: (uuid: string) => void;
+        scroll: (id: string) => void;
     };
+    getCommentPluginAPI(): CkCommentPlugin | null;
+    getVariablePluginAPI(): VariablePlugin | null;
     /**
      * Xuất file Word có Header/Footer
      * @param fileName Tên file
@@ -77,6 +46,8 @@ export declare class SdDocumentBuilder {
         header?: string;
         footer?: string;
     }): void;
+    hightSelectRange: (range: ModelRange) => void;
+    removeHighlightSeclectRange: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdDocumentBuilder, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SdDocumentBuilder, "sd-document-builder", never, { "option": { "alias": "option"; "required": true; }; "_disabled": { "alias": "disabled"; "required": false; }; }, { "contentChange": "contentChange"; }, never, never, true, never>;
 }

package/components/document-builder/src/document-builder.model.d.ts

@@ -1,13 +1,16 @@
-import { EditorConfig, EventInfo, ModelDocumentSelection, ModelRange } from 'ckeditor5';
+import { EditorConfig, EventInfo, ModelDocumentSelection, ViewDataTransfer } from 'ckeditor5';
+import { CkCommentConfig } from './plugins/ck-comment/ck-comment.plugin.model';
 export type SdEditorConfig = EditorConfig & {
     getOption?: () => SdDocumentBuilderOption;
 };
 export interface SdDocumentBuilderOption {
-    onDropVariable?: (variable: SdDocumentBuilderVariable, dropIndex: number) => boolean | Promise<boolean | SdDocumentBuilderVariable>;
-    onAddComment?: (range: ModelRange) => void;
-    onSelectComment?: (markerId: string) => void;
+    onDropVariable?: (variable: SdDocumentBuilderVariable) => boolean | Promise<boolean | SdDocumentBuilderVariable>;
+    onAfterDropVariable?: (variable: SdDocumentBuilderVariable) => void;
+    onPasteVariable?: (display: string) => SdDocumentBuilderVariable | null | Promise<SdDocumentBuilderVariable | null>;
+    comment?: CkCommentConfig;
     onSelection?: (selection: ModelDocumentSelection, $event: EventInfo<string, unknown>) => void;
     onOrientation?: (orientation: 'PORTRAIT' | 'LANDSCAPE') => void;
+    onPaste?: (data: SdPasteEventData) => void | Promise<void>;
     orientation?: 'PORTRAIT' | 'LANDSCAPE';
 }
 export interface SdDocumentBuilderVariable<T = any> {
@@ -15,13 +18,7 @@ export interface SdDocumentBuilderVariable<T = any> {
     uuid?: string;
     value: string;
     display: string;
-    data?: T;
-}
-export interface SdDocumentBuilderComment<T = any> {
-    markerId: string;
-    selectedText: string;
-    comment?: string;
-    createdAt?: Date;
+    bindingValue?: string;
     data?: T;
 }
 export interface SdDocumentBuilderHeading {
@@ -30,3 +27,9 @@ export interface SdDocumentBuilderHeading {
     level: number;
     type: string;
 }
+export interface SdPasteEventData {
+    html?: string;
+    text: string;
+    source: 'word' | 'excel' | 'google-docs' | 'web' | 'unknown';
+    dataTransfer: ViewDataTransfer;
+}

package/components/document-builder/src/plugins/block-space/block-space.plugin.d.ts

@@ -0,0 +1,9 @@
+import { Plugin } from 'ckeditor5';
+/**
+ * Plugin để thêm margin-bottom: 4px cho các block elements
+ * (paragraph, heading, list, table) thông qua downcast conversion
+ */
+export declare class BlockSpace extends Plugin {
+    static get pluginName(): string;
+    init(): void;
+}

package/components/document-builder/src/plugins/ck-comment/ck-comment.plugin.d.ts

@@ -0,0 +1,44 @@
+import { Plugin, ContextualBalloon } from 'ckeditor5';
+import { CkComment, CkCommentConfig, CkCommentColors } from './ck-comment.plugin.model';
+export declare class CkCommentPlugin extends Plugin {
+    #private;
+    static get pluginName(): string;
+    static get requires(): (typeof ContextualBalloon)[];
+    static readonly PENDING_MARKER_ID = "__pending_comment__";
+    static readonly DEFAULT_SEARCH_RANGE = 5;
+    static readonly DEFAULT_MAX_TEXT_LENGTH = 1000;
+    static readonly DEFAULT_COLORS: CkCommentColors;
+    init(): void;
+    /**
+     * Thiết lập config với callbacks
+     */
+    setConfig(config: CkCommentConfig): void;
+    /**
+     * Thêm comment và tạo marker
+     */
+    addComment(comment: CkComment): boolean;
+    /**
+     * Xóa comment theo id
+     */
+    removeComment(id: string | number): boolean;
+    /**
+     * Chọn comment theo id - chỉ thêm class highlight, không bôi đen text
+     */
+    selectComment(id: string | number, scrollIntoView?: boolean): void;
+    /**
+     * Thiết lập tất cả comments (khôi phục từ dữ liệu)
+     */
+    setComments(comments: CkComment[]): void;
+    /**
+     * Lấy tất cả comments
+     */
+    get comments(): CkComment[];
+    /**
+     * Thiết lập pending highlight cho selection (khi user đang nhập nội dung comment)
+     */
+    setPendingSelection(startPath: number[], endPath: number[]): boolean;
+    /**
+     * Xóa pending highlight và fire onCancelPending callback
+     */
+    clearPendingSelection(): void;
+}

package/components/document-builder/src/plugins/ck-comment/ck-comment.plugin.model.d.ts

@@ -0,0 +1,57 @@
+import { ModelRange } from 'ckeditor5';
+/**
+ * Comment status based on text changes
+ */
+export type CkCommentStatus = 'normal' | 'modified' | 'broken';
+/**
+ * Color configuration for comment markers
+ */
+export interface CkCommentColors {
+    marker?: string;
+    markerSelected?: string;
+    markerPending?: string;
+    markerModified?: string;
+    markerBroken?: string;
+}
+/**
+ * Comment data structure for CkCommentPlugin
+ */
+export interface CkComment<T = any> {
+    id: string | number;
+    startPath: number[];
+    endPath: number[];
+    originalText: string;
+    currentText: string;
+    status: CkCommentStatus;
+    data?: T;
+}
+/**
+ * Config for CkCommentPlugin
+ */
+export interface CkCommentConfig {
+    onPendingComment?: (comment: CkComment) => void;
+    onAddComment?: (comment: CkComment) => void;
+    onSelectComment?: (id: string | number) => void;
+    onRemoveComment?: (id: string | number) => void;
+    onChange?: (comments: CkComment[]) => void;
+    onCancelPending?: () => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+        data?: any;
+    }) => void;
+    searchRange?: number;
+    debug?: boolean;
+    colors?: CkCommentColors;
+    maxTextLength?: number;
+    allowCreating?: boolean;
+}
+/**
+ * Data returned when user selects text for comment
+ */
+export interface CkCommentSelection {
+    range: ModelRange;
+    startPath: number[];
+    endPath: number[];
+    text: string;
+}