@sd-angular/core 19.0.0-beta.12 → 19.0.0-beta.14

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

@@ -3,7 +3,7 @@ import { EventEmitter, Output, Input, Component } from '@angular/core';
 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 { 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, ImageBlock, Indent, IndentBlock } from 'ckeditor5';
 import { Subscription, Subject, throttleTime } from 'rxjs';
 import { SdResolveMaybeAsync, hslToHex, rgbToHex, SdUtilities } from '@sd-angular/core/utilities';
 import { v4 } from 'uuid';
@@ -200,7 +200,7 @@ class CommentPlugin extends Plugin {
                 // BẮN EVENT RA NGOÀI - KHÔNG TỰ ADD MARKER
                 // Angular component sẽ xử lý logic (mở modal, validation, etc.)
                 // và gọi lại hàm addComment() nếu cần
-                option.onAddComment(range);
+                option.onAddComment({ range, selectedText });
             });
             return view;
         });
@@ -253,8 +253,8 @@ class VariablePlugin extends Plugin {
             isObject: true,
             allowAttributes: ['id', 'uuid', 'value', 'display'],
         });
-        // 1. Model -> HTML trên giao diện
-        conversion.for('editingDowncast').elementToElement({
+        // 2. Model -> HTML
+        conversion.for('downcast').elementToElement({
             model: 'variable',
             view: (modelItem, { writer: viewWriter }) => {
                 const id = modelItem.getAttribute('id');
@@ -273,31 +273,22 @@ class VariablePlugin extends Plugin {
                 return toWidget(widgetElement, viewWriter);
             },
         });
-        // 2. Model -> HTML gửi lên BE
-        conversion.for('dataDowncast').elementToElement({
-            model: 'variable',
-            view: (modelItem, { writer: viewWriter }) => {
-                const id = modelItem.getAttribute('id');
-                const uuid = modelItem.getAttribute('uuid');
-                const display = modelItem.getAttribute('display');
-                const value = modelItem.getAttribute('value');
-                const widgetElement = viewWriter.createContainerElement('span', {
-                    class: 'variable-widget',
-                    'data-id': id,
-                    'data-uuid': uuid,
-                    'data-value': value,
-                    'data-display': display,
-                });
-                const innerText = viewWriter.createText(`{{${display}}}`);
-                viewWriter.insert(viewWriter.createPositionAt(widgetElement, 0), innerText);
-                return widgetElement;
-            },
-        });
-        // 3. HTML -> model của CDK
+        // 3. HTML -> Model
         conversion.for('upcast').elementToElement({
+            // NOTE: Khi bổ sung thêm attribute vào element variable, dev nên bổ sung thêm "[atribute]: true" vào view
+            // Để:
+            // - Nếu lọc chính xác sẽ không sinh ra thẻ span thừa bọc ngoài
+            // - Nếu chưa bổ sung thì sẽ sinh ra thẻ <span> bọc ngoài kèm [atribute] chưa lọc
             view: {
                 name: 'span',
-                classes: 'variable-widget',
+                classes: 'variable-widget ck-widget',
+                attributes: {
+                    'data-id': true,
+                    'data-uuid': true,
+                    'data-value': true,
+                    'data-display': true,
+                    contenteditable: true,
+                },
             },
             model: (viewElement, { writer: modelWriter }) => {
                 return modelWriter.createElement('variable', {
@@ -510,6 +501,52 @@ class VariablePlugin extends Plugin {
 class TableFitPlugin extends Plugin {
     init() {
         const editor = this.editor;
+        const applyTableDefaults = (writer, tableElement) => {
+            if (!tableElement)
+                return;
+            // Always force table width to 100% on paste/insert
+            writer.setAttribute('tableWidth', '100%', tableElement);
+        };
+        const applyCellBorders = (writer, tableElement) => {
+            if (!tableElement)
+                return;
+            for (const row of tableElement.getChildren()) {
+                for (const cell of row.getChildren()) {
+                    const hasBorderColor = cell.getAttribute('tableCellBorderColor');
+                    const hasBorderStyle = cell.getAttribute('tableCellBorderStyle');
+                    const hasBorderWidth = cell.getAttribute('tableCellBorderWidth');
+                    const hasPadding = cell.getAttribute('tableCellPadding');
+                    if (!hasBorderColor) {
+                        writer.setAttribute('tableCellBorderColor', '#000000', cell);
+                    }
+                    if (!hasBorderStyle) {
+                        writer.setAttribute('tableCellBorderStyle', 'solid', cell);
+                    }
+                    if (!hasBorderWidth) {
+                        writer.setAttribute('tableCellBorderWidth', '1pt', cell);
+                    }
+                    if (!hasPadding) {
+                        writer.setAttribute('tableCellPadding', '0.4em', cell);
+                    }
+                }
+            }
+        };
+        const listenAndApplyOnExecute = (commandName) => {
+            const cmd = editor.commands.get(commandName);
+            if (!cmd)
+                return;
+            this.listenTo(cmd, 'execute', () => {
+                editor.model.change(writer => {
+                    const selection = editor.model.document.selection;
+                    const position = selection.getFirstPosition();
+                    if (!position)
+                        return;
+                    const tableElement = position.findAncestor('table');
+                    applyTableDefaults(writer, tableElement);
+                    applyCellBorders(writer, tableElement);
+                });
+            });
+        };
         // Can thiệp vào quá trình convert từ View (HTML Paste) sang Model
         editor.conversion.for('upcast').add(dispatcher => {
             dispatcher.on('element:table', (evt, data, conversionApi) => {
@@ -523,7 +560,8 @@ class TableFitPlugin extends Plugin {
                 for (const item of modelRange.getItems()) {
                     if (item.is('element', 'table')) {
                         editor.model.change(writer => {
-                            writer.setAttribute('tableWidth', '100%', item);
+                            applyTableDefaults(writer, item);
+                            applyCellBorders(writer, item);
                         });
                     }
                 }
@@ -533,6 +571,52 @@ class TableFitPlugin extends Plugin {
             }, { priority: 'low' });
             // Chạy sau cùng để ghi đè các logic mặc định
         });
+        const findInnerTable = (viewElement) => {
+            if (!viewElement)
+                return null;
+            if (viewElement.name === 'table')
+                return viewElement;
+            for (const child of viewElement.getChildren()) {
+                if (child.name === 'table')
+                    return child;
+                const found = findInnerTable(child);
+                if (found)
+                    return found;
+            }
+            return null;
+        };
+        editor.conversion.for('downcast').add(dispatcher => {
+            // Handle when tableWidth attribute changes
+            dispatcher.on('attribute:tableWidth:table', (evt, data, conversionApi) => {
+                const viewWriter = conversionApi.writer;
+                const viewElement = conversionApi.mapper.toViewElement(data.item);
+                if (!viewElement)
+                    return;
+                const innerTable = findInnerTable(viewElement);
+                if (!innerTable)
+                    return;
+                viewWriter.setStyle('border-collapse', 'collapse', innerTable);
+                viewWriter.setStyle('margin', '0', innerTable);
+                viewWriter.setStyle('width', '100%', innerTable);
+                // Set width on the wrapper container (ck-widget) as well
+                viewWriter.setStyle('width', '100%', viewElement);
+            });
+            // Handle when table is first inserted
+            dispatcher.on('insert:table', (evt, data, conversionApi) => {
+                const viewWriter = conversionApi.writer;
+                const viewElement = conversionApi.mapper.toViewElement(data.item);
+                if (!viewElement)
+                    return;
+                const innerTable = findInnerTable(viewElement);
+                if (!innerTable)
+                    return;
+                viewWriter.setStyle('border-collapse', 'collapse', innerTable);
+                viewWriter.setStyle('margin', '0', innerTable);
+                viewWriter.setStyle('width', '100%', innerTable);
+                // Set width on the wrapper container (ck-widget) as well
+                viewWriter.setStyle('width', '100%', viewElement);
+            });
+        });
         // Lắng nghe lệnh insertTable để can thiệp ngay sau khi bảng được tạo
         const insertTableCommand = editor.commands.get('insertTable');
         if (insertTableCommand) {
@@ -549,11 +633,20 @@ class TableFitPlugin extends Plugin {
                     const tableElement = position.findAncestor('table');
                     if (tableElement) {
                         // Ép width 100% cho bảng mới vẽ
-                        writer.setAttribute('tableWidth', '100%', tableElement);
+                        applyTableDefaults(writer, tableElement);
+                        // Apply border style 1pt solid black
+                        writer.setAttribute('tableBorderColor', '#000000', tableElement);
+                        writer.setAttribute('tableBorderStyle', 'solid', tableElement);
+                        writer.setAttribute('tableBorderWidth', '1pt', tableElement);
+                        applyCellBorders(writer, tableElement);
                     }
                 });
             });
         }
+        listenAndApplyOnExecute('insertTableRowAbove');
+        listenAndApplyOnExecute('insertTableRowBelow');
+        listenAndApplyOnExecute('insertTableColumnLeft');
+        listenAndApplyOnExecute('insertTableColumnRight');
     }
 }
 
@@ -601,6 +694,243 @@ class Base64UploadAdapter {
     }
 }
 
+class ImageCustomPlugin extends Plugin {
+    static get pluginName() {
+        return 'ImageCustomPlugin';
+    }
+    init() {
+        const editor = this.editor;
+        // Thiết lập style mặc định là alignCenter khi chèn ảnh
+        editor.commands.get('imageUpload')?.on('execute', (evt, args) => {
+            // Đặt style mặc định sau khi ảnh được chèn
+            setTimeout(() => {
+                const selection = editor.model.document.selection;
+                const imageElement = selection.getSelectedElement();
+                if (imageElement && (imageElement.name === 'imageBlock' || imageElement.name === 'imageInline')) {
+                    const currentStyle = imageElement.getAttribute('imageStyle');
+                    // Chỉ đặt mặc định nếu chưa có style nào
+                    if (!currentStyle) {
+                        editor.model.change(writer => {
+                            writer.setAttribute('imageStyle', 'alignCenter', imageElement);
+                        });
+                    }
+                }
+            }, 0);
+        });
+        // Downcast: Model -> View (HTML output)
+        // CKEditor 5 có 2 loại ảnh: imageBlock và imageInline
+        editor.conversion.for('downcast').add(dispatcher => {
+            // Xử lý ảnh block (được wrap trong figure)
+            dispatcher.on('insert:imageBlock', (evt, data, conversionApi) => {
+                this.handleImageInsert(evt, data, conversionApi);
+            }, { priority: 'low' });
+            // Xử lý ảnh inline
+            dispatcher.on('insert:imageInline', (evt, data, conversionApi) => {
+                this.handleImageInsert(evt, data, conversionApi);
+            }, { priority: 'low' });
+            // Xử lý thay đổi attribute cho cả 2 loại ảnh
+            ['imageBlock', 'imageInline'].forEach(imageType => {
+                // Xử lý thay đổi src
+                dispatcher.on(`attribute:src:${imageType}`, (evt, data, conversionApi) => {
+                    this.handleImageAttributeChange(evt, data, conversionApi);
+                }, { priority: 'low' });
+                // Xử lý thay đổi width
+                dispatcher.on(`attribute:width:${imageType}`, (evt, data, conversionApi) => {
+                    this.handleImageAttributeChange(evt, data, conversionApi);
+                }, { priority: 'low' });
+                // Xử lý thay đổi height
+                dispatcher.on(`attribute:height:${imageType}`, (evt, data, conversionApi) => {
+                    this.handleImageAttributeChange(evt, data, conversionApi);
+                }, { priority: 'low' });
+                // Xử lý thay đổi imageStyle (căn chỉnh) - thêm float inline style
+                dispatcher.on(`attribute:imageStyle:${imageType}`, (evt, data, conversionApi) => {
+                    this.handleImageStyleChange(evt, data, conversionApi);
+                }, { priority: 'low' });
+            });
+        });
+        // Xử lý upcast (HTML paste) - xóa aspect-ratio từ HTML đầu vào
+        editor.conversion.for('upcast').add(dispatcher => {
+            dispatcher.on('element:img', (evt, data, conversionApi) => {
+                const viewItem = data.viewItem;
+                if (!viewItem)
+                    return;
+                // Kiểm tra viewItem có các method cần thiết
+                if (typeof viewItem.getStyle !== 'function')
+                    return;
+                // Xóa aspect-ratio từ inline styles nếu có
+                const hasAspectRatio = viewItem.getStyle('aspect-ratio');
+                if (hasAspectRatio && typeof viewItem.removeStyle === 'function') {
+                    viewItem.removeStyle('aspect-ratio');
+                }
+                // Đặt custom styles nếu _styles map tồn tại
+                if (viewItem._styles && typeof viewItem._styles.set === 'function') {
+                    viewItem._styles.set('margin', '0');
+                    viewItem._styles.set('border', '0');
+                    viewItem._styles.set('max-width', '100%');
+                    viewItem._styles.set('height', 'auto');
+                }
+            }, { priority: 'high' });
+        });
+    }
+    /**
+     * Xử lý sự kiện chèn ảnh
+     */
+    handleImageInsert(evt, data, conversionApi) {
+        const viewWriter = conversionApi.writer;
+        const viewElement = conversionApi.mapper.toViewElement(data.item);
+        if (!viewElement)
+            return;
+        // viewElement có thể là figure (cho block) hoặc img itself (cho inline)
+        // Tìm element img thực tế
+        const imgElement = this.findImgElement(viewElement);
+        if (!imgElement)
+            return;
+        this.applyCustomStyles(viewWriter, imgElement);
+    }
+    /**
+     * Xử lý sự kiện thay đổi attribute ảnh
+     */
+    handleImageAttributeChange(evt, data, conversionApi) {
+        const viewWriter = conversionApi.writer;
+        const viewElement = conversionApi.mapper.toViewElement(data.item);
+        if (!viewElement)
+            return;
+        const imgElement = this.findImgElement(viewElement);
+        if (!imgElement)
+            return;
+        this.applyCustomStyles(viewWriter, imgElement);
+    }
+    /**
+     * Xử lý sự kiện thay đổi style ảnh - thêm float inline style cho căn chỉnh
+     */
+    handleImageStyleChange(evt, data, conversionApi) {
+        const viewWriter = conversionApi.writer;
+        const viewElement = conversionApi.mapper.toViewElement(data.item);
+        if (!viewElement)
+            return;
+        // Tìm container ck-widget (element figure)
+        const widgetElement = this.findWidgetElement(viewElement);
+        if (!widgetElement)
+            return;
+        // Lấy giá trị imageStyle (căn chỉnh)
+        const imageStyle = data.item.getAttribute('imageStyle');
+        // Xóa các style hiện có trước
+        viewWriter.removeStyle('float', widgetElement);
+        viewWriter.removeStyle('margin', widgetElement);
+        viewWriter.removeStyle('text-align', widgetElement);
+        // Áp dụng style dựa trên căn chỉnh ảnh
+        // Các options đã cấu hình: ['inline', 'alignLeft', 'alignRight', 'alignCenter']
+        switch (imageStyle) {
+            case 'inline':
+                // Ảnh inline - không style đặc biệt, chỉ flow inline
+                break;
+            case 'alignLeft':
+                // Float trái
+                viewWriter.setStyle('float', 'left', widgetElement);
+                viewWriter.setStyle('margin', '0 16px 16px 0', widgetElement);
+                break;
+            case 'alignRight':
+                // Float phải
+                viewWriter.setStyle('float', 'right', widgetElement);
+                viewWriter.setStyle('margin', '0 0 16px 16px', widgetElement);
+                break;
+            case 'alignCenter':
+            case 'block':
+                // Căn giữa
+                viewWriter.setStyle('text-align', 'center', widgetElement);
+                viewWriter.setStyle('margin', '16px auto', widgetElement);
+                break;
+            default:
+                // Mặc định - căn giữa
+                viewWriter.setStyle('text-align', 'center', widgetElement);
+                viewWriter.setStyle('margin', '16px auto', widgetElement);
+                break;
+        }
+        // Áp dụng custom styles cơ bản cho element img
+        const imgElement = this.findImgElement(viewElement);
+        if (imgElement) {
+            this.applyCustomStyles(viewWriter, imgElement);
+        }
+    }
+    /**
+     * Áp dụng custom styles cho element ảnh
+     */
+    applyCustomStyles(viewWriter, imgElement) {
+        // Xóa aspect-ratio nếu tồn tại
+        if (imgElement.getStyle('aspect-ratio')) {
+            viewWriter.removeStyle('aspect-ratio', imgElement);
+        }
+        // Áp dụng custom styles
+        viewWriter.setStyle('margin', '0', imgElement);
+        viewWriter.setStyle('border', '0', imgElement);
+        viewWriter.setStyle('max-width', '100%', imgElement);
+        viewWriter.setStyle('height', 'auto', imgElement);
+    }
+    /**
+     * Tìm container ck-widget (element figure)
+     * CKEditor wrap ảnh block trong <figure class="ck-widget"><img></figure>
+     */
+    findWidgetElement(viewElement) {
+        if (!viewElement)
+            return null;
+        // Nếu đây là element figure itself
+        if (viewElement.name === 'figure') {
+            return viewElement;
+        }
+        // Cho ảnh inline, trả về element itself (span wrapper)
+        if (viewElement.name === 'span') {
+            return viewElement;
+        }
+        // Tìm ngược lên tree để tìm figure/ck-widget
+        let current = viewElement;
+        while (current) {
+            if (current.name === 'figure' || current.name === 'span') {
+                return current;
+            }
+            // Di chuyển lên parent
+            if (current.parent) {
+                current = current.parent;
+            }
+            else {
+                break;
+            }
+        }
+        // Nếu không tìm thấy widget, trả về element gốc
+        return viewElement;
+    }
+    /**
+     * Tìm element img thực tế bên trong widget structure
+     * CKEditor wrap ảnh block trong <figure class="ck-widget"><img></figure>
+     */
+    findImgElement(viewElement) {
+        if (!viewElement)
+            return null;
+        // Nếu đây là element img itself
+        if (viewElement.name === 'img') {
+            return viewElement;
+        }
+        // Cho structure widget của CKEditor, tìm đệ quy
+        // Ảnh block: figure > span > img
+        // Ảnh thường được wrap trong một container
+        const queue = [viewElement];
+        while (queue.length > 0) {
+            const current = queue.shift();
+            if (!current)
+                continue;
+            if (current.name === 'img') {
+                return current;
+            }
+            // Thêm children vào queue
+            if (current.getChildren) {
+                for (const child of current.getChildren()) {
+                    queue.push(child);
+                }
+            }
+        }
+        return null;
+    }
+}
+
 // Icon khổ dọc (Mặc định cũ)
 const ICON_PORTRAIT = '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6V4h8v12z"/></svg>';
 // Icon khổ ngang (Mới)
@@ -864,6 +1194,18 @@ function normalize(content) {
     return normalized;
 }
 
+class HighlightRangePlugin extends Plugin {
+    init() {
+        const editor = this.editor;
+        editor.conversion.for('editingDowncast').markerToHighlight({
+            model: 'highlightRange',
+            view: {
+                classes: 'highlight-range',
+            },
+        });
+    }
+}
+
 class SdDocumentBuilder {
     option;
     disabled = false;
@@ -918,13 +1260,18 @@ class SdDocumentBuilder {
             ImageCaption,
             ImageResize,
             ImageStyle,
+            ImageBlock,
             // Custom Plugin
             HeadingPlugin,
             CommentPlugin,
             VariablePlugin,
             TableFitPlugin,
-            ImageUploadPlugin,
+            Indent,
+            IndentBlock,
             PageOrientationPlugin,
+            ImageUploadPlugin,
+            ImageCustomPlugin,
+            HighlightRangePlugin,
         ],
         toolbar: {
             items: [
@@ -959,7 +1306,18 @@ class SdDocumentBuilder {
             shouldNotGroupWhenFull: true,
         },
         image: {
-            toolbar: ['toggleImageCaption', '|', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'],
+            styles: {
+                options: ['inline', 'alignLeft', 'alignRight', 'alignCenter'],
+            },
+            toolbar: [
+                'imageStyle:inline',
+                'imageStyle:alignCenter',
+                {
+                    name: 'imageStyle:alignDropdown',
+                    items: ['imageStyle:alignLeft', 'imageStyle:alignRight'],
+                    defaultItem: 'imageStyle:alignLeft',
+                },
+            ],
         },
         fontSize: {
             options: this.#fontSizeOptions,
@@ -985,13 +1343,29 @@ class SdDocumentBuilder {
             contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', '|', 'tableProperties', 'tableCellProperties'],
             tableProperties: {
                 borderColors: this.#sharedColors,
+                backgroundColors: this.#sharedColors,
                 colorPicker: this.#colorPickerConfig,
+                defaultProperties: {
+                    borderStyle: 'solid',
+                    borderWidth: '1px',
+                    borderColor: '#ccc',
+                },
             },
             tableCellProperties: {
                 borderColors: this.#sharedColors,
+                backgroundColors: this.#sharedColors,
                 colorPicker: this.#colorPickerConfig,
+                defaultProperties: {
+                    borderStyle: 'solid',
+                    borderWidth: '1px',
+                    borderColor: '#ccc',
+                },
             },
         },
+        indentBlock: {
+            offset: 48, // Đơn vị px cho mỗi mức indent (tương đương 0.5 inch)
+            unit: 'px',
+        },
         // Quan trọng: Cho phép paste style từ Word nhưng bỏ qua margin/padding
         htmlSupport: {
             allow: [
@@ -1043,6 +1417,27 @@ class SdDocumentBuilder {
             const content = editor.getData();
             this.#contentChangeSubject.next(content);
         });
+        try {
+            // Manual keybinding cho Tab nếu cần
+            editor.keystrokes.set('Tab', (evt, cancel) => {
+                const command = editor.commands.get('indentBlock');
+                if (command && command.isEnabled) {
+                    editor.execute('indentBlock');
+                    cancel();
+                }
+            });
+            // Manual keybinding cho Shift+Tab
+            editor.keystrokes.set('Shift+Tab', (evt, cancel) => {
+                const command = editor.commands.get('outdentBlock');
+                if (command && command.isEnabled) {
+                    editor.execute('outdentBlock');
+                    cancel();
+                }
+            });
+        }
+        catch (error) {
+            console.warn('Error setting up indent keybindings:', error);
+        }
         this.#updateState();
     }
     setContent = (html) => {
@@ -1257,21 +1652,28 @@ class SdDocumentBuilder {
         all: () => {
             if (!this.#editor)
                 return [];
-            const markers = this.#editor.model.markers;
-            const comments = [];
-            // Duyệt qua tất cả markers trong Model
-            for (const marker of markers) {
-                // Chỉ lấy marker do plugin comment tạo ra (prefix 'comment:')
-                if (marker.name.startsWith('comment:')) {
-                    // Lấy text nằm trong vùng marker đó
-                    const currentText = this.#getTextFromRange(marker.getRange());
-                    comments.push({
-                        markerId: marker.name,
-                        selectedText: currentText,
-                    });
+            const editableElement = this.#editor.ui.view.editable.element;
+            if (!editableElement)
+                return [];
+            const commentMarkers = editableElement.querySelectorAll('.ck-comment-marker[data-comment-id^="comment:"]') || [];
+            const commentsMap = new Map();
+            commentMarkers.forEach(el => {
+                const markerId = el.getAttribute('data-comment-id');
+                if (markerId) {
+                    const existing = commentsMap.get(markerId);
+                    const text = el.textContent || '';
+                    if (existing) {
+                        existing.selectedText += text;
+                    }
+                    else {
+                        commentsMap.set(markerId, {
+                            markerId,
+                            selectedText: text,
+                        });
+                    }
                 }
-            }
-            return comments;
+            });
+            return Array.from(commentsMap.values());
         },
         /**
          * Thêm comment vào vùng text đang được chọn
@@ -1279,7 +1681,11 @@ class SdDocumentBuilder {
          * @param data - Dữ liệu extra data
          * @returns SdDocumentBuilderComment hoặc null nếu không có text được chọn
          */
-        add: (range, comment, data) => {
+        add: (range, comment, args) => {
+            // markerIdExternal khi truyền từ bên ngoài vào sẽ có thể là Date.now() hoặc uuidv4().
+            // Miễn là đảm bảo markerIdExternal là unique.
+            // Phục vụ cho case gọi API comment thành công thì mới sinh ra markerId.
+            const { markerIdExternal, data } = args ?? {};
             if (!this.#editor)
                 return null;
             const model = this.#editor.model;
@@ -1292,7 +1698,7 @@ class SdDocumentBuilder {
                 return null;
             }
             // 4. Tạo ID unique cho marker
-            const markerId = `comment:${Date.now()}`;
+            const markerId = markerIdExternal ? `comment:${markerIdExternal}` : `comment:${Date.now()}`;
             // 5. Tạo marker trong model
             model.change(writer => {
                 writer.addMarker(markerId, {
@@ -1570,12 +1976,37 @@ class SdDocumentBuilder {
         const blob = new Blob(['\ufeff', fullHtml], { type: 'application/msword' });
         SdUtilities.downloadBlob(blob, fileName);
     }
+    hightSelectRange = (range) => {
+        if (!range)
+            return;
+        const editor = this.#editor;
+        editor.model.change(writer => {
+            // Xóa marker cũ (nếu có)
+            if (editor.model.markers.has('highlightRange')) {
+                writer.removeMarker('highlightRange');
+            }
+            // Tạo marker mới
+            writer.addMarker('highlightRange', {
+                usingOperation: false, // Không lưu vào lịch sử Undo/Redo
+                affectsData: false, // Không ảnh hưởng đến data lấy ra (getData)
+                range: range,
+            });
+        });
+    };
+    removeHighlightSeclectRange = () => {
+        const editor = this.#editor;
+        editor.model.change(writer => {
+            if (editor.model.markers.has('highlightRange')) {
+                writer.removeMarker('highlightRange');
+            }
+        });
+    };
     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\";::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", "@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", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", ":host ::ng-deep .ck-comment-marker{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}: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\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}: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;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 4px;vertical-align:middle;font-size:0;cursor:default}: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-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", ":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"], 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}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}: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.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content p{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", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", ":host ::ng-deep .ck-comment-marker{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}: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\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}: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;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 4px;vertical-align:middle;font-size:0;cursor:default}: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-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", "", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\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\";::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", "@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", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", ":host ::ng-deep .ck-comment-marker{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}: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\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}: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;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 4px;vertical-align:middle;font-size:0;cursor:default}: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-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", ":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"] }]
+            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}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}: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.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content p{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", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", ":host ::ng-deep .ck-comment-marker{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}: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\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}: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;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 4px;vertical-align:middle;font-size:0;cursor:default}: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-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", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\n"] }]
         }], propDecorators: { option: [{
                 type: Input,
                 args: [{ required: true }]