@sd-angular/core 19.0.0-beta.2 → 19.0.0-beta.4

package/fesm2022/sd-angular-core-components-document-builder.mjs

@@ -4,9 +4,8 @@ import { CommonModule } from '@angular/common';
 import * as i1 from '@ckeditor/ckeditor5-angular';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
 import { Plugin, ButtonView, ClassicEditor, Essentials, Paragraph, Bold, Italic, Underline, FontSize, FontColor, FontBackgroundColor, Alignment, Widget, toWidget, GeneralHtmlSupport, FontFamily, Heading, List, Table, TableToolbar, TableProperties, TableCellProperties, TableColumnResize, PasteFromOffice, PageBreak, Undo, Subscript, Superscript, Image, ImageUpload, ImageToolbar, ImageCaption, ImageResize, ImageStyle } from 'ckeditor5';
-import { SdResolveMaybeAsync } from '@sd-angular/core/utilities';
-import { SdUtilities } from '@sd-angular/core/utilities/extensions';
 import { Subscription, Subject, throttleTime } from 'rxjs';
+import { SdResolveMaybeAsync, hslToHex, rgbToHex, SdUtilities } from '@sd-angular/core/utilities';
 
 class PageNumberPlugin extends Plugin {
     init() {
@@ -208,10 +207,15 @@ class CommentPlugin extends Plugin {
         const editor = this.editor;
         // --- 1. CONVERSION: MODEL MARKER -> VIEW CSS ---
         // Biến Marker thành Highlight màu vàng
-        editor.conversion.for('editingDowncast').markerToHighlight({
-            model: 'comment', // Khớp với prefix của markerId (ví dụ: comment:12345)
-            view: {
-                classes: 'ck-comment-marker', // Class CSS sẽ được gắn vào thẻ <span> bao quanh text
+        editor.conversion.for('downcast').markerToHighlight({
+            model: 'comment',
+            view: data => {
+                return {
+                    classes: 'ck-comment-marker',
+                    attributes: {
+                        'data-comment-id': data.markerName,
+                    },
+                };
             },
         });
         // --- 3. ĐĂNG KÝ UI COMPONENT: 'addCommentBtn' ---
@@ -263,6 +267,29 @@ class CommentPlugin extends Plugin {
             });
             return view;
         });
+        // 8. Xử lý sự kiện Copy (Clipboard Output)
+        this.listenTo(editor.editing.view.document, 'clipboardOutput', (evt, data) => {
+            const content = data.content;
+            editor.editing.view.change(writer => {
+                // Tạo range bao quanh toàn bộ nội dung clipboard
+                const range = writer.createRangeIn(content);
+                // Mảng chứa các item cần xử lý
+                const itemsToClean = [];
+                // 1. Duyệt qua để tìm các thẻ có class ck-comment-marker
+                for (const item of range.getItems()) {
+                    if (item.is('element') && item.hasClass('ck-comment-marker')) {
+                        itemsToClean.push(item);
+                    }
+                }
+                // 2. Thực hiện xóa Class và Attribute
+                for (const item of itemsToClean) {
+                    // Xóa class 'ck-comment-marker'
+                    writer.removeClass('ck-comment-marker', item);
+                    // Xóa thuộc tính 'data-comment-id'
+                    writer.removeAttribute('data-comment-id', item);
+                }
+            });
+        });
     }
 }
 
@@ -279,6 +306,9 @@ class VariablePlugin extends Plugin {
         // 1. Định nghĩa Schema (Model)
         schema.register('variable', {
             inheritAllFrom: '$inlineObject',
+            allowWhere: '$text',
+            isInline: true,
+            isObject: true,
             allowAttributes: ['id', 'value', 'display', 'data'],
         });
         // 2. Conversion: Model -> View (Hiển thị ra HTML)
@@ -310,12 +340,6 @@ class VariablePlugin extends Plugin {
                 classes: 'variable-widget',
             },
             model: (viewElement, { writer: modelWriter }) => {
-                // Lấy text bên trong làm label, bỏ dấu {{ }}
-                // const textNode = viewElement.getChild(0);
-                // let label = '';
-                // if (textNode && textNode.is('$text')) {
-                //   label = textNode.data.replace(/{{|}}/g, '');
-                // }
                 const dataJson = viewElement.getAttribute('data-json');
                 let parsedData = null;
                 try {
@@ -399,30 +423,122 @@ class VariablePlugin extends Plugin {
                 });
             }
         });
-        // this.listenTo(editingView.document, 'drop', (evt, data) => {
-        //     const config = editor.config as Config<SdEditorConfig>;
-        //     const getOption = config.get('getOption') as SdEditorConfig['getOption'];
-        //     const option = getOption?.();
-        //     // Dữ liệu kéo thả
-        //     const dataTransfer = (data as any).dataTransfer;
-        //     const jsonData = dataTransfer.getData('ck-variable');
-        //     if (!jsonData) return;
-        //     evt.stop();
-        //     const variable: SdDocumentBuilderVariable = JSON.parse(jsonData);
-        //     // Gọi callback ra ngoài Angular (nếu có)
-        //     if (option && option.onDropVariable) {
-        //         const allow = option.onDropVariable(variable, 0);
-        //         if (allow === false) return; // Angular chặn drop
-        //     }
-        //     // Insert vào Model
-        //     editor.model.change(writer => {
-        //         const variableElem = writer.createElement('variable', {
-        //             id: variable.id,
-        //             label: variable.label
-        //         });
-        //         editor.model.insertContent(variableElem);
-        //     });
-        // });
+        // 5. Lắng nghe sự kiện bàn phím
+        let isNavigating = false;
+        this.editor.editing.view.document.on('keydown', (evt, data) => {
+            // Mã phím mũi tên: 37 (Left), 38 (Up), 39 (Right), 40 (Down)
+            const isArrowKey = data.keyCode >= 37 && data.keyCode <= 40;
+            if (isArrowKey) {
+                isNavigating = true;
+            }
+            else {
+                isNavigating = false;
+            }
+        }, { priority: 'high' });
+        // 6. Lắng nghe sự kiện Click chuột
+        this.editor.editing.view.document.on('mousedown', () => {
+            isNavigating = true;
+        });
+        this.listenTo(editor.model.document.selection, 'change:range', () => {
+            // Nếu không phải là hành động click hoặc mũi tên thì thoát hàm.
+            if (!isNavigating) {
+                return;
+            }
+            const model = editor.model;
+            const selection = model.document.selection;
+            if (!selection.isCollapsed)
+                return;
+            const position = selection.getFirstPosition();
+            const nodeBefore = position?.nodeBefore;
+            if (!position)
+                return;
+            // Kiểm tra: Node đứng trước con trỏ là variable
+            if (nodeBefore && nodeBefore.is('element', 'variable')) {
+                // Lấy node ngay sau variable để kiểm tra
+                const nextNode = nodeBefore.nextSibling;
+                // Logic: Nếu phía sau KHÔNG CÓ GÌ hoặc KHÔNG PHẢI LÀ TEXT
+                if (!nextNode || !nextNode.is('$text')) {
+                    model.change(writer => {
+                        // Chèn thêm con trỏ variable
+                        writer.insertText('\u00A0', nodeBefore, 'after');
+                        // Lấy vị trí ngay sau variable (lúc này đang là đầu của text node mới)
+                        const posAfterVariable = writer.createPositionAfter(nodeBefore);
+                        // Dịch chuyển vị trí đó sang phải 1 đơn vị (bỏ qua ký tự vừa thêm)
+                        const targetPos = posAfterVariable.getShiftedBy(1);
+                        // 3. Đặt con trỏ vào vị trí đã tính toán
+                        writer.setSelection(targetPos);
+                    });
+                }
+            }
+        });
+        // 7. Handle xóa variable
+        this.editor.editing.view.document.on('keydown', (evt, data) => {
+            // Mã phím 8 là Backspace, 46 là Delete
+            const btnBackspace = data.keyCode === 8;
+            const btnDelete = data.keyCode === 46;
+            if (btnBackspace || btnDelete) {
+                const selection = editor.model.document.selection;
+                const model = editor.model;
+                // CASE 1: Nếu con trỏ đang nhấp nháy (Collapsed)
+                if (selection.isCollapsed) {
+                    const position = selection.getFirstPosition();
+                    // Với Backspace ta kiểm tra nodeBefore, với Delete ta kiểm tra nodeAfter
+                    const targetNode = data.keyCode === 8 ? position?.nodeBefore : position?.nodeAfter;
+                    if (targetNode && targetNode.is('element', 'variable')) {
+                        data.preventDefault();
+                        evt.stop();
+                        model.change(writer => {
+                            // Chọn bao quanh Variable đó
+                            writer.setSelection(targetNode, 'on');
+                        });
+                        return;
+                    }
+                }
+                // CASE 2: Nếu đang có một vùng chọn (đã được highlight từ lần bấm trước)
+                else {
+                    const selectedElement = selection.getSelectedElement();
+                    // Nếu phần tử đang được chọn chính là variable
+                    if (selectedElement && selectedElement.is('element', 'variable')) {
+                        // Cho phép hành động mặc định diễn ra (CKEditor sẽ tự xóa phần tử đang được chọn)
+                        // Hoặc chủ động xóa để chắc chắn:
+                        data.preventDefault();
+                        evt.stop();
+                        model.change(writer => {
+                            writer.remove(selectedElement);
+                        });
+                    }
+                }
+            }
+        }, { priority: 'highest' });
+        // 8. Xử lý sự kiện Copy (Clipboard Output)
+        // Khi copy, thay thế  variable bằng text
+        this.listenTo(editor.editing.view.document, 'clipboardOutput', (evt, data) => {
+            const content = data.content;
+            editor.editing.view.change(writer => {
+                // Tạo range bao quanh toàn bộ nội dung clipboard
+                const range = writer.createRangeIn(content);
+                const itemsToReplace = [];
+                // Duyệt qua tất cả các phần tử trong clipboard để tìm variable
+                for (const item of range.getItems()) {
+                    // Kiểm tra đúng là thẻ span và có class variable-widget
+                    if (item.is('element', 'span') && item.hasClass('variable-widget')) {
+                        itemsToReplace.push(item);
+                    }
+                }
+                // Thay thế  variable bằng text
+                for (const item of itemsToReplace) {
+                    const displayText = item.getAttribute('data-display');
+                    if (displayText) {
+                        // Tạo một node text thuần túy
+                        const textNode = writer.createText(`{{${displayText}}}`);
+                        // Chèn text node vào ngay trước widget cũ
+                        writer.insert(writer.createPositionBefore(item), textNode);
+                        // Xóa widget cũ đi
+                        writer.remove(item);
+                    }
+                }
+            });
+        });
     }
     #isSdDocumentBuilderVariableResult = (obj) => {
         return (obj !== null &&
@@ -537,8 +653,203 @@ class Base64UploadAdapter {
     }
 }
 
+/**
+ * Cấu hình màu cho Document Builder
+ * Bảng màu tập trung và cấu hình cho việc lựa chọn màu nhất quán
+ */
+/**
+ * Trả về bảng màu chung được sử dụng trong tất cả tính năng của document builder
+ * @returns Mảng các tùy chọn màu được định sẵn với giá trị hex và label
+ */
+function getPresetColors() {
+    return [
+        { color: '#000000', label: 'Black' },
+        { color: '#4D4D4D', label: 'Dim grey' },
+        { color: '#999999', label: 'Grey' },
+        { color: '#E6E6E6', label: 'Light grey' },
+        { color: '#FFFFFF', label: 'White' },
+        { color: '#E64D4D', label: 'Red' },
+        { color: '#E6994D', label: 'Orange' },
+        { color: '#E6E64D', label: 'Yellow' },
+        { color: '#99E64D', label: 'Light green' },
+        { color: '#4DE64D', label: 'Green' },
+        { color: '#4DE699', label: 'Aquamarine' },
+        { color: '#4DE6E6', label: 'Turquoise' },
+        { color: '#4D99E6', label: 'Light blue' },
+        { color: '#4D4DE6', label: 'Blue' },
+        { color: '#994DE6', label: 'Purple' },
+    ];
+}
+/**
+ * Trả về cấu hình bộ chọn màu với định dạng hex
+ * @returns Đối tượng cấu hình bộ chọn màu
+ */
+function getColorPickerConfig() {
+    return {
+        format: 'hex',
+    };
+}
+/**
+ * Trả về cấu hình kích thước font cho document builder
+ * @returns Mảng các tùy chọn kích thước font được định sẵn
+ */
+function getFontSizeOptions() {
+    return [
+        {
+            title: '9',
+            model: '9pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '9pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '10',
+            model: '10pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '10pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '11',
+            model: '11pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '11pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '12',
+            model: '12pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '12pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '13',
+            model: '13pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '13pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '14',
+            model: '14pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '14pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '16',
+            model: '16pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '16pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '18',
+            model: '18pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '18pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '20',
+            model: '20pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '20pt' },
+                priority: 7,
+            },
+        },
+        {
+            title: '24',
+            model: '24pt',
+            view: {
+                name: 'span',
+                styles: { 'font-size': '24pt' },
+                priority: 7,
+            },
+        },
+    ];
+}
+function getHeadingOptions() {
+    return [
+        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
+    ];
+}
+
+/**
+ * Document Builder Utilities
+ * Các hàm tiện ích cho document builder
+ */
+/**
+ * Chuẩn hóa nội dung bằng cách chuyển đổi tất cả màu HSL và RGB sang hex
+ * @param content - Nội dung HTML cần chuẩn hóa
+ * @returns Nội dung đã được chuẩn hóa với màu hex
+ */
+function normalize(content) {
+    let normalized = content;
+    // Chuyển đổi HSL sang hex
+    const hslRegex = /hsl\(\s*(\d+)\s*,\s*(\d+)%?\s*,\s*(\d+)%?\s*\)/gi;
+    normalized = normalized.replace(hslRegex, (match, h, s, l) => {
+        try {
+            const hue = parseInt(h, 10);
+            const saturation = parseInt(s, 10);
+            const lightness = parseInt(l, 10);
+            // Kiểm tra giá trị hợp lệ
+            if (hue >= 0 && hue <= 360 && saturation >= 0 && saturation <= 100 && lightness >= 0 && lightness <= 100) {
+                return hslToHex(hue, saturation, lightness);
+            }
+        }
+        catch (error) {
+            console.warn('Failed to convert HSL to hex:', error, match);
+        }
+        return match; // Giữ nguyên nếu không thể chuyển đổi
+    });
+    // Chuyển đổi RGB sang hex
+    const rgbRegex = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/gi;
+    normalized = normalized.replace(rgbRegex, (match, r, g, b) => {
+        try {
+            const red = parseInt(r, 10);
+            const green = parseInt(g, 10);
+            const blue = parseInt(b, 10);
+            if (red >= 0 && red <= 255 && green >= 0 && green <= 255 && blue >= 0 && blue <= 255) {
+                return rgbToHex(red, green, blue);
+            }
+        }
+        catch (error) {
+            console.warn('Failed to convert RGB to hex:', error, match);
+        }
+        return match;
+    });
+    return normalized;
+}
+
 class SdDocumentBuilder {
     #id = '1212';
+    // Shared color palette and configuration
+    #sharedColors = getPresetColors();
+    #colorPickerConfig = getColorPickerConfig();
+    #fontSizeOptions = getFontSizeOptions();
+    #headingOptions = getHeadingOptions();
     option;
     disabled = false;
     set _disabled(val) {
@@ -547,6 +858,7 @@ class SdDocumentBuilder {
     }
     Editor = ClassicEditor;
     #editor;
+    #idTimeOutScrollHeading = null;
     // Config
     config = {
         getOption: () => this.option,
@@ -625,109 +937,24 @@ class SdDocumentBuilder {
             toolbar: ['toggleImageCaption', '|', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'],
         },
         fontSize: {
-            options: [
-                // Định nghĩa từng size một cách tường minh
-                {
-                    title: '9',
-                    model: '9pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '9pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '10',
-                    model: '10pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '10pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '11',
-                    model: '11pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '11pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '12',
-                    model: '12pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '12pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '13',
-                    model: '13pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '13pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '14',
-                    model: '14pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '14pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '16',
-                    model: '16pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '16pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '18',
-                    model: '18pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '18pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '20',
-                    model: '20pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '20pt' },
-                        priority: 7,
-                    },
-                },
-                {
-                    title: '24',
-                    model: '24pt',
-                    view: {
-                        name: 'span',
-                        styles: { 'font-size': '24pt' },
-                        priority: 7,
-                    },
-                },
-            ],
+            options: this.#fontSizeOptions,
             supportAllValues: false, // Khuyên dùng false để ép user chọn đúng size chuẩn
         },
+        heading: {
+            options: this.#headingOptions,
+        },
         // 4. Cấu hình bảng màu (Tùy chọn)
         fontColor: {
-            columns: 5,
+            // columns: 5,
             documentColors: 10,
+            colorPicker: this.#colorPickerConfig,
+            colors: this.#sharedColors,
         },
         fontBackgroundColor: {
-            columns: 5,
+            // columns: 5,
             documentColors: 10,
+            colorPicker: this.#colorPickerConfig,
+            colors: this.#sharedColors,
         },
         table: {
             contentToolbar: [
@@ -738,6 +965,14 @@ class SdDocumentBuilder {
                 'tableProperties', // <--- Nút chỉnh thuộc tính bảng (Viền, Màu, Width)
                 'tableCellProperties',
             ],
+            tableProperties: {
+                borderColors: this.#sharedColors,
+                colorPicker: this.#colorPickerConfig,
+            },
+            tableCellProperties: {
+                borderColors: this.#sharedColors,
+                colorPicker: this.#colorPickerConfig,
+            },
         },
         // Quan trọng: Cho phép paste style từ Word nhưng bỏ qua margin/padding
         htmlSupport: {
@@ -757,12 +992,11 @@ class SdDocumentBuilder {
     contentChange = new EventEmitter(); // Emit HTML content
     #subscription = new Subscription();
     #contentChangeSubject = new Subject();
-    #editorChangeRxjs = new Subject();
     ngOnInit() {
         // https://onemount.atlassian.net/browse/SM-1862
         // Debounce trong rxjs không hỗ trợ leading -->
         this.#subscription.add(this.#contentChangeSubject.pipe(throttleTime(500, undefined, { leading: true, trailing: true })).subscribe(content => {
-            this.contentChange.emit(content);
+            this.contentChange.emit(normalize(content));
         }));
     }
     ngOnDestroy() {
@@ -770,6 +1004,12 @@ class SdDocumentBuilder {
     }
     onReady(editor) {
         this.#editor = editor;
+        editor.conversion.for('editingDowncast').markerToHighlight({
+            model: 'highlightMarker',
+            view: {
+                classes: 'ck-heading-highlight',
+            },
+        });
         // Setup orientation plugin callback
         try {
             const orientationPlugin = editor.plugins.get('PageOrientationPlugin');
@@ -803,10 +1043,30 @@ class SdDocumentBuilder {
         if (this.disabled) {
             // Bật chế độ chỉ đọc với ID khóa
             this.#editor.enableReadOnlyMode(this.#id);
+            // Disable page orientation button
+            try {
+                const orientationPlugin = this.#editor.plugins.get('PageOrientationPlugin');
+                if (orientationPlugin && orientationPlugin.buttonView) {
+                    orientationPlugin.buttonView.isEnabled = false;
+                }
+            }
+            catch (error) {
+                console.warn('Failed to disable orientation button:', error);
+            }
         }
         else {
             // Tắt chế độ chỉ đọc với ID khóa tương ứng
             this.#editor.disableReadOnlyMode(this.#id);
+            // Enable page orientation button
+            try {
+                const orientationPlugin = this.#editor.plugins.get('PageOrientationPlugin');
+                if (orientationPlugin && orientationPlugin.buttonView) {
+                    orientationPlugin.buttonView.isEnabled = true;
+                }
+            }
+            catch (error) {
+                console.warn('Failed to enable orientation button:', error);
+            }
         }
     }
     scrollToComment = (markerId) => {
@@ -981,31 +1241,43 @@ class SdDocumentBuilder {
         scrollToHeading: (id) => {
             if (!this.#editor)
                 return;
-            // 1. Lấy Model Element từ kho lưu trữ
             const modelElement = this.#headingElementsMap.get(id);
             if (modelElement) {
-                const editor = this.#editor;
-                const view = editor.editing.view;
-                // 2. Chuyển đổi Model Element -> View Element
-                // mapper.toViewElement sẽ trả về thẻ HTML ảo (View Element) tương ứng (ví dụ thẻ <h2>)
-                const viewElement = editor.editing.mapper.toViewElement(modelElement);
+                this.#editor.model.change(writer => {
+                    // Xóa marker cũ
+                    if (this.#idTimeOutScrollHeading) {
+                        clearTimeout(this.#idTimeOutScrollHeading);
+                    }
+                    const currentMarker = this.#editor.model.markers.get('highlightMarker');
+                    if (currentMarker) {
+                        writer.removeMarker(currentMarker);
+                    }
+                    // Tạo Range bao trùm highlight
+                    const range = writer.createRangeOn(modelElement);
+                    // Thêm Marker mới
+                    writer.addMarker('highlightMarker', {
+                        range: range,
+                        usingOperation: false,
+                    });
+                });
+                // Scroll tới vị trí đó
+                const viewElement = this.#editor.editing.mapper.toViewElement(modelElement);
                 if (viewElement) {
-                    // 3. Từ View Element ảo -> Lấy ra DOM thật (HTMLElement)
-                    const domElement = view.domConverter.mapViewToDom(viewElement);
+                    const domElement = this.#editor.editing.view.domConverter.viewToDom(viewElement);
                     if (domElement) {
-                        // 4. Dùng hàm native của trình duyệt để cuộn
-                        domElement.scrollIntoView({
-                            behavior: 'smooth',
-                            block: 'start',
-                            inline: 'nearest',
-                        });
-                        // 5. (Tùy chọn) Focus và đặt con trỏ vào đó
-                        view.focus();
-                        editor.model.change(writer => {
-                            writer.setSelection(modelElement, 'on');
-                        });
+                        domElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                     }
                 }
+                // Tự động tắt marker sau 10 giây
+                this.#idTimeOutScrollHeading = setTimeout(() => {
+                    if (this.#editor) {
+                        this.#editor.model.change(writer => {
+                            const marker = this.#editor.model.markers.get('highlightMarker');
+                            if (marker)
+                                writer.removeMarker(marker);
+                        });
+                    }
+                }, 10000);
             }
             else {
                 console.warn(`Heading with id ${id} not found.`);
@@ -1363,11 +1635,11 @@ class SdDocumentBuilder {
         // });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDocumentBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdDocumentBuilder, isStandalone: true, selector: "sd-document-builder", inputs: { option: "option", _disabled: ["disabled", "_disabled"] }, outputs: { contentChange: "contentChange" }, ngImport: i0, template: "<div class=\"builder-container\">\n  <ckeditor\n    style=\"width: 100%\"\n    [editor]=\"Editor\" \n    [config]=\"config\" \n    (ready)=\"onReady($event)\"\n    [disabled]=\"disabled\">\n  </ckeditor>\n</div>", styles: ["@charset \"UTF-8\";.builder-container{background-color:#f3f4f6;height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:20px}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%}:host ::ng-deep .ck-editor .ck-editor__top,:host ::ng-deep .ck-editor .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400}:host ::ng-deep .ck-content.ck-focused{outline:none!important;border-color:#d1d5db!important}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content p{margin-left:0!important;margin-right:0!important;margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-comment-marker{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;cursor:pointer;transition:background-color .2s}:host ::ng-deep .ck-comment-marker:hover{background-color:#ffeb3bcc}:host ::ng-deep .ck-comment-marker.active-highlight{background-color:#ffeb3b;outline:2px dashed #f57f17}\n", "@charset \"UTF-8\";:host ::ng-deep .variable-widget{background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9;border-radius:4px;padding:2px 6px;font-weight:600;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:10px;cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 2px;vertical-align:middle;font-size:0}:host ::ng-deep .variable-widget:before{content:attr(data-display);font-size:10px}:host ::ng-deep .variable-widget:hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget.ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .ck.ck-clipboard-drop-target-line{display:none!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-editor__editable .ck-widget.table{float:none!important;display:block!important;max-width:100%!important;width:100%!important;margin:0!important;clear:both}:host ::ng-deep .ck-editor__editable table{table-layout:auto!important;width:100%!important;border-collapse:collapse;margin:0!important}:host ::ng-deep .ck-editor__editable table td,:host ::ng-deep .ck-editor__editable table th{word-wrap:break-word;white-space:normal!important;padding:.4em!important}:host ::ng-deep .ck-editor__editable table td img,:host ::ng-deep .ck-editor__editable table th img{max-width:100%;height:auto}\n", "@charset \"UTF-8\";::ng-deep .ck-editor{--ck-font-size-base: 11px !important;--ck-icon-size: 16px !important;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.5;--ck-spacing-small: 2px !important;--ck-spacing-standard: 4px !important;--ck-spacing-large: 8px !important}::ng-deep .ck-editor .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}::ng-deep .ck-editor .ck-editor__top .ck-sticky-panel__content{border:none!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}::ng-deep .ck-editor .ck-toolbar{min-height:32px!important;padding:2px!important}::ng-deep .ck-editor .ck-button{padding:2px 4px!important;min-height:24px!important}::ng-deep .ck-editor .ck-dropdown__button{min-height:24px!important}::ng-deep .ck.ck-toolbar{background:#f8f9fa!important;border-bottom:1px solid #e0e0e0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdDocumentBuilder, isStandalone: true, selector: "sd-document-builder", inputs: { option: "option", _disabled: ["disabled", "_disabled"] }, outputs: { contentChange: "contentChange" }, ngImport: i0, template: "<div class=\"builder-container\">\n  <ckeditor\n    style=\"width: 100%\"\n    [editor]=\"Editor\" \n    [config]=\"config\" \n    (ready)=\"onReady($event)\"\n    [disabled]=\"disabled\">\n  </ckeditor>\n</div>", styles: ["@charset \"UTF-8\";.builder-container{background-color:#f3f4f6;height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:20px}:host{display:inline-block}:host ::ng-deep .ck-heading-highlight{background-color:#fef08a;animation:fadeOut 2s 8s forwards}@keyframes fadeOut{0%{background-color:#fef08a}to{background-color:transparent}}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%}:host ::ng-deep .ck-editor .ck-editor__top,:host ::ng-deep .ck-editor .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400}:host ::ng-deep .ck-content.ck-focused{outline:none!important;border-color:#d1d5db!important}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content p{margin-left:0!important;margin-right:0!important;margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-comment-marker{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;cursor:pointer;transition:background-color .2s}:host ::ng-deep .ck-comment-marker:hover{background-color:#ffeb3bcc}:host ::ng-deep .ck-comment-marker.active-highlight{background-color:#ffeb3b;outline:2px dashed #f57f17}\n", "@charset \"UTF-8\";:host ::ng-deep .variable-widget{background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-weight:600;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:10px;cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 4px;vertical-align:middle;font-size:0}:host ::ng-deep .variable-widget:before{content:attr(data-display);font-size:10px}:host ::ng-deep .variable-widget:hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget.ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .ck.ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-editor__editable .ck-widget.table{float:none!important;display:block!important;max-width:100%!important;width:100%!important;margin:0!important;clear:both}:host ::ng-deep .ck-editor__editable table{table-layout:auto!important;width:100%!important;border-collapse:collapse;margin:0!important}:host ::ng-deep .ck-editor__editable table td,:host ::ng-deep .ck-editor__editable table th{word-wrap:break-word;white-space:normal!important;padding:.4em!important}:host ::ng-deep .ck-editor__editable table td img,:host ::ng-deep .ck-editor__editable table th img{max-width:100%;height:auto}\n", "@charset \"UTF-8\";::ng-deep .ck-editor{--ck-font-size-base: 11px !important;--ck-icon-size: 16px !important;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.5;--ck-spacing-small: 2px !important;--ck-spacing-standard: 4px !important;--ck-spacing-large: 8px !important}::ng-deep .ck-editor .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}::ng-deep .ck-editor .ck-editor__top .ck-sticky-panel__content{border:none!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}::ng-deep .ck-editor .ck-toolbar{min-height:32px!important;padding:2px!important}::ng-deep .ck-editor .ck-button{padding:2px 4px!important;min-height:24px!important}::ng-deep .ck-editor .ck-dropdown__button{min-height:24px!important}::ng-deep .ck.ck-toolbar{background:#f8f9fa!important;border-bottom:1px solid #e0e0e0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDocumentBuilder, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-document-builder', standalone: true, imports: [CommonModule, CKEditorModule], template: "<div class=\"builder-container\">\n  <ckeditor\n    style=\"width: 100%\"\n    [editor]=\"Editor\" \n    [config]=\"config\" \n    (ready)=\"onReady($event)\"\n    [disabled]=\"disabled\">\n  </ckeditor>\n</div>", styles: ["@charset \"UTF-8\";.builder-container{background-color:#f3f4f6;height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:20px}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%}:host ::ng-deep .ck-editor .ck-editor__top,:host ::ng-deep .ck-editor .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400}:host ::ng-deep .ck-content.ck-focused{outline:none!important;border-color:#d1d5db!important}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content p{margin-left:0!important;margin-right:0!important;margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-comment-marker{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;cursor:pointer;transition:background-color .2s}:host ::ng-deep .ck-comment-marker:hover{background-color:#ffeb3bcc}:host ::ng-deep .ck-comment-marker.active-highlight{background-color:#ffeb3b;outline:2px dashed #f57f17}\n", "@charset \"UTF-8\";:host ::ng-deep .variable-widget{background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9;border-radius:4px;padding:2px 6px;font-weight:600;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:10px;cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 2px;vertical-align:middle;font-size:0}:host ::ng-deep .variable-widget:before{content:attr(data-display);font-size:10px}:host ::ng-deep .variable-widget:hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget.ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .ck.ck-clipboard-drop-target-line{display:none!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-editor__editable .ck-widget.table{float:none!important;display:block!important;max-width:100%!important;width:100%!important;margin:0!important;clear:both}:host ::ng-deep .ck-editor__editable table{table-layout:auto!important;width:100%!important;border-collapse:collapse;margin:0!important}:host ::ng-deep .ck-editor__editable table td,:host ::ng-deep .ck-editor__editable table th{word-wrap:break-word;white-space:normal!important;padding:.4em!important}:host ::ng-deep .ck-editor__editable table td img,:host ::ng-deep .ck-editor__editable table th img{max-width:100%;height:auto}\n", "@charset \"UTF-8\";::ng-deep .ck-editor{--ck-font-size-base: 11px !important;--ck-icon-size: 16px !important;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.5;--ck-spacing-small: 2px !important;--ck-spacing-standard: 4px !important;--ck-spacing-large: 8px !important}::ng-deep .ck-editor .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}::ng-deep .ck-editor .ck-editor__top .ck-sticky-panel__content{border:none!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}::ng-deep .ck-editor .ck-toolbar{min-height:32px!important;padding:2px!important}::ng-deep .ck-editor .ck-button{padding:2px 4px!important;min-height:24px!important}::ng-deep .ck-editor .ck-dropdown__button{min-height:24px!important}::ng-deep .ck.ck-toolbar{background:#f8f9fa!important;border-bottom:1px solid #e0e0e0!important}\n"] }]
+            args: [{ selector: 'sd-document-builder', standalone: true, imports: [CommonModule, CKEditorModule], template: "<div class=\"builder-container\">\n  <ckeditor\n    style=\"width: 100%\"\n    [editor]=\"Editor\" \n    [config]=\"config\" \n    (ready)=\"onReady($event)\"\n    [disabled]=\"disabled\">\n  </ckeditor>\n</div>", styles: ["@charset \"UTF-8\";.builder-container{background-color:#f3f4f6;height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:20px}:host{display:inline-block}:host ::ng-deep .ck-heading-highlight{background-color:#fef08a;animation:fadeOut 2s 8s forwards}@keyframes fadeOut{0%{background-color:#fef08a}to{background-color:transparent}}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%}:host ::ng-deep .ck-editor .ck-editor__top,:host ::ng-deep .ck-editor .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400}:host ::ng-deep .ck-content.ck-focused{outline:none!important;border-color:#d1d5db!important}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content p{margin-left:0!important;margin-right:0!important;margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-comment-marker{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;cursor:pointer;transition:background-color .2s}:host ::ng-deep .ck-comment-marker:hover{background-color:#ffeb3bcc}:host ::ng-deep .ck-comment-marker.active-highlight{background-color:#ffeb3b;outline:2px dashed #f57f17}\n", "@charset \"UTF-8\";:host ::ng-deep .variable-widget{background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-weight:600;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:10px;cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 4px;vertical-align:middle;font-size:0}:host ::ng-deep .variable-widget:before{content:attr(data-display);font-size:10px}:host ::ng-deep .variable-widget:hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget.ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .ck.ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", "@charset \"UTF-8\";:host ::ng-deep .ck-editor__editable .ck-widget.table{float:none!important;display:block!important;max-width:100%!important;width:100%!important;margin:0!important;clear:both}:host ::ng-deep .ck-editor__editable table{table-layout:auto!important;width:100%!important;border-collapse:collapse;margin:0!important}:host ::ng-deep .ck-editor__editable table td,:host ::ng-deep .ck-editor__editable table th{word-wrap:break-word;white-space:normal!important;padding:.4em!important}:host ::ng-deep .ck-editor__editable table td img,:host ::ng-deep .ck-editor__editable table th img{max-width:100%;height:auto}\n", "@charset \"UTF-8\";::ng-deep .ck-editor{--ck-font-size-base: 11px !important;--ck-icon-size: 16px !important;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.5;--ck-spacing-small: 2px !important;--ck-spacing-standard: 4px !important;--ck-spacing-large: 8px !important}::ng-deep .ck-editor .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}::ng-deep .ck-editor .ck-editor__top .ck-sticky-panel__content{border:none!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}::ng-deep .ck-editor .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}::ng-deep .ck-editor .ck-toolbar{min-height:32px!important;padding:2px!important}::ng-deep .ck-editor .ck-button{padding:2px 4px!important;min-height:24px!important}::ng-deep .ck-editor .ck-dropdown__button{min-height:24px!important}::ng-deep .ck.ck-toolbar{background:#f8f9fa!important;border-bottom:1px solid #e0e0e0!important}\n"] }]
         }], propDecorators: { option: [{
                 type: Input,
                 args: [{ required: true }]