@sd-angular/core 19.0.0-beta.36 → 19.0.0-beta.38

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, ViewUpcastWriter, Matcher, ViewDocument, ViewDomConverter, ClipboardPipeline, FontFamily, Heading, List, Table, TableToolbar, TableProperties, TableCellProperties, TableColumnResize, PageBreak, Undo, Subscript, Superscript, Image, ImageUpload, ImageToolbar, ImageCaption, ImageResize, ImageStyle, ImageBlock, Indent, IndentBlock } from 'ckeditor5';
+import { Plugin, ButtonView, ClassicEditor, Essentials, Paragraph, Bold, Italic, Underline, FontSize, FontColor, FontBackgroundColor, Alignment, Widget, toWidget, ViewUpcastWriter, Matcher, ViewDocument, ViewDomConverter, ClipboardPipeline, ContextualBalloon, FontFamily, Heading, List, Table, TableToolbar, TableProperties, TableCellProperties, TableColumnResize, 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';
@@ -363,99 +363,6 @@ function createHeadingHandler(editor, modelName, headingDefaults) {
     };
 }
 
-class CommentPlugin extends Plugin {
-    init() {
-        const editor = this.editor;
-        // 1. MODEL MARKER -> VIEW CSS
-        editor.conversion.for('downcast').markerToHighlight({
-            model: 'comment',
-            view: data => {
-                return {
-                    classes: 'ck-comment-marker',
-                    attributes: {
-                        'data-comment-id': data.markerName,
-                    },
-                };
-            },
-        });
-        // 2. ĐĂNG KÝ UI COMPONENT: 'addCommentBtn'
-        editor.ui.componentFactory.add('addCommentBtn', locale => {
-            const view = new ButtonView(locale);
-            // Lấy config từ Angular
-            const config = editor.config;
-            const getOption = config.get('getOption');
-            const option = getOption?.();
-            // Ẩn button nếu không có onAddComment
-            if (!option?.onAddComment) {
-                view.set({
-                    label: '',
-                    isVisible: false,
-                });
-                return view;
-            }
-            view.set({
-                label: 'Thêm bình luận',
-                icon: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6l-4-4H4a2 2 0 01-2-2V4a2 2 0 012-2h14a2 2 0 012 2v9zM5 7h10v2H5V7zm0 4h10v2H5v-2z"/></svg>',
-                tooltip: true,
-                isEnabled: false,
-            });
-            // Logic Enable/Disable: Dựa theo Selection
-            const selection = editor.model.document.selection;
-            // Lắng nghe sự kiện change selection để bật/tắt nút
-            this.listenTo(selection, 'change', () => {
-                // Enable khi có bôi đen text (không phải collapsed)
-                view.isEnabled = !selection.isCollapsed;
-            });
-            // Logic Execute: Khi bấm nút
-            this.listenTo(view, 'execute', () => {
-                const range = selection.getFirstRange();
-                if (!range || !option?.onAddComment)
-                    return;
-                // Helper lấy text thuần từ range
-                let selectedText = '';
-                for (const item of range.getItems()) {
-                    if (item.is('$text') || item.is('$textProxy')) {
-                        selectedText += item.data;
-                    }
-                }
-                // 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, selectedText });
-            });
-            return view;
-        });
-        // 3. Xử lý sự kiện Copy (Clipboard Output)
-        this.listenTo(editor.editing.view.document, 'clipboardOutput', (_, data) => {
-            const isCopyOrCut = data.method === 'copy' || data.method === 'cut';
-            // Nếu không phải hành động copy hoặc cut thì thoát hàm
-            if (!isCopyOrCut) {
-                return;
-            }
-            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);
-                }
-            });
-        });
-    }
-}
-
 class VariablePlugin extends Plugin {
     // Khai báo dependencies nếu cần (VD: Widget)
     static get requires() {
@@ -3216,6 +3123,703 @@ class BlockSpace extends Plugin {
     }
 }
 
+var _a;
+class CkCommentPlugin extends Plugin {
+    static get pluginName() {
+        return 'CkComment';
+    }
+    static get requires() {
+        return [ContextualBalloon];
+    }
+    #comments = new Map();
+    #selectedId = null;
+    #pendingId = null; // ID cho pending highlight
+    #isCreatingPending = false; // Flag để prevent clearing pending khi đang tạo
+    #balloon;
+    #config = {};
+    // Hằng số ID cho pending marker
+    static PENDING_MARKER_ID = '__pending_comment__';
+    // Số node tìm kiếm mặc định khi path không chính xác
+    static DEFAULT_SEARCH_RANGE = 5;
+    // Màu sắc mặc định cho markers
+    static DEFAULT_COLORS = {
+        marker: 'rgba(59, 130, 246, 0.2)',
+        markerSelected: 'rgba(59, 130, 246, 0.5)',
+        markerPending: 'rgba(245, 158, 11, 0.4)',
+        markerModified: 'rgba(255, 193, 7, 0.4)',
+        markerBroken: 'rgba(220, 53, 69, 0.3)',
+    };
+    /**
+     * Debug log - chỉ log khi debug config là true
+     */
+    #log(...args) {
+        if (this.#config.debug) {
+            console.log('[CkCommentPlugin]', ...args);
+        }
+    }
+    /**
+     * Debug warn - chỉ warn khi debug config là true
+     */
+    #warn(...args) {
+        if (this.#config.debug) {
+            console.warn('[CkCommentPlugin]', ...args);
+        }
+    }
+    /**
+     * Lấy màu sắc đã merge với default
+     */
+    #getColors() {
+        return { ..._a.DEFAULT_COLORS, ...this.#config.colors };
+    }
+    init() {
+        const editor = this.editor;
+        this.#balloon = editor.plugins.get(ContextualBalloon);
+        this.#log('init() called');
+        // Thiết lập marker to highlight conversion
+        this.#setupMarkerConversion();
+        // Thiết lập click handler cho markers
+        this.#setupMarkerClickHandler();
+        // Thiết lập toolbar button
+        this.#setupToolbarButton();
+        // Thiết lập ContextualBalloon cho text selection (tùy chọn)
+        this.#setupContextualBalloon();
+        // Theo dõi thay đổi nội dung để cập nhật trạng thái comment
+        this.#setupChangeTracking();
+    }
+    // ========================================================================
+    // TOOLBAR BUTTON
+    // ========================================================================
+    #setupToolbarButton() {
+        const editor = this.editor;
+        editor.ui.componentFactory.add('ckCommentBtn', locale => {
+            const view = new ButtonView(locale);
+            view.set({
+                label: 'Bình luận',
+                icon: '<svg width="16px" height="16px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6l-4-4H4a2 2 0 01-2-2V4a2 2 0 012-2h14a2 2 0 012 2v9zM5 7h10v2H5V7zm0 4h10v2H5v-2z"/></svg>',
+                tooltip: true,
+                isEnabled: false,
+            });
+            // Enable khi có selection và không phải chỉ khoảng trắng
+            const selection = editor.model.document.selection;
+            this.listenTo(selection, 'change', () => {
+                const isCollapsed = selection.isCollapsed;
+                const range = selection.getFirstRange();
+                // Kiểm tra xem selection có content không phải khoảng trắng không
+                let hasValidContent = false;
+                if (range && !isCollapsed) {
+                    const text = this.#getTextFromRange(range);
+                    hasValidContent = text.trim().length > 0;
+                }
+                view.isEnabled = hasValidContent;
+            });
+            // Xử lý khi click button
+            this.listenTo(view, 'execute', () => {
+                this.#log('Toolbar button clicked');
+                const selectionData = this.#getSelectionData();
+                if (selectionData) {
+                    // Set flag để prevent clearing pending khi selection change
+                    this.#isCreatingPending = true;
+                    this.#log('Calling onPendingComment callback');
+                    this.#config.onPendingComment?.({
+                        id: '',
+                        startPath: selectionData.startPath,
+                        endPath: selectionData.endPath,
+                        originalText: selectionData.text,
+                        currentText: selectionData.text,
+                        status: 'normal',
+                    });
+                    // Reset flag sau một khoảng ngắn để cho phép clear nếu selection thực sự thay đổi
+                    setTimeout(() => {
+                        this.#isCreatingPending = false;
+                    }, 100);
+                }
+            });
+            return view;
+        });
+    }
+    // ========================================================================
+    // MARKER CONVERSION
+    // ========================================================================
+    #setupMarkerConversion() {
+        const self = this;
+        this.editor.conversion.for('editingDowncast').markerToHighlight({
+            model: 'comment',
+            view: (data) => {
+                const markerName = data.markerName;
+                const commentId = markerName.replace('comment:', '');
+                const classes = ['ck-comment-marker'];
+                const colors = self.#getColors();
+                // Kiểm tra xem có phải pending marker không
+                if (commentId === _a.PENDING_MARKER_ID) {
+                    classes.push('ck-comment-pending');
+                    return {
+                        classes: classes,
+                        attributes: {
+                            'data-comment-id': commentId,
+                            style: `--comment-pending-bg: ${colors.markerPending}`,
+                        },
+                    };
+                }
+                const comment = self.#comments.get(commentId);
+                // Build CSS variables based on status
+                const cssVars = [`--comment-bg: ${colors.marker}`];
+                if (comment) {
+                    classes.push(`ck-comment-${comment.status}`);
+                    if (commentId === self.#selectedId) {
+                        classes.push('ck-comment-selected');
+                        cssVars.push(`--comment-selected-bg: ${colors.markerSelected}`);
+                    }
+                    // Add status-specific colors
+                    if (comment.status === 'modified') {
+                        cssVars.push(`--comment-modified-bg: ${colors.markerModified}`);
+                    }
+                    else if (comment.status === 'broken') {
+                        cssVars.push(`--comment-broken-bg: ${colors.markerBroken}`);
+                    }
+                }
+                return {
+                    classes: classes,
+                    attributes: {
+                        'data-comment-id': commentId,
+                        style: cssVars.join('; '),
+                    },
+                };
+            },
+        });
+    }
+    // ========================================================================
+    // CLICK HANDLER
+    // ========================================================================
+    #setupMarkerClickHandler() {
+        const viewDocument = this.editor.editing.view.document;
+        // Lắng nghe cả click và mousedown để đảm bảo bắt được event
+        viewDocument.on('mousedown', (evt, data) => {
+            this.#log('Mousedown event triggered, data:', data);
+            this.#handleMarkerClick(evt, data);
+        });
+        viewDocument.on('click', (evt, data) => {
+            this.#log('Click event triggered, data:', data);
+            this.#handleMarkerClick(evt, data);
+        });
+    }
+    #handleMarkerClick(evt, data) {
+        const viewElement = data.target;
+        let element = viewElement;
+        this.#log('Target element:', element, 'hasClass:', typeof element?.hasClass);
+        // Duyệt lên cây để tìm comment marker
+        while (element) {
+            const hasMarkerClass = element.hasClass?.('ck-comment-marker');
+            this.#log('Checking element, hasMarkerClass:', hasMarkerClass);
+            if (hasMarkerClass) {
+                const commentId = element.getAttribute('data-comment-id');
+                this.#log('Found marker with commentId:', commentId);
+                this.selectComment(commentId, false);
+                evt.stop();
+                return;
+            }
+            element = element.parent;
+        }
+        // Click ngoài markers - xóa selection
+        if (this.#selectedId) {
+            this.#log('Click outside markers, clearing selection');
+            this.#selectedId = null;
+            this.#refreshView();
+        }
+    }
+    // ========================================================================
+    // CONTEXTUAL BALLOON
+    // ========================================================================
+    #setupContextualBalloon() {
+        const editor = this.editor;
+        const selection = editor.model.document.selection;
+        this.#log('#setupContextualBalloon initialized');
+        // Lắng nghe selection changes
+        this.listenTo(selection, 'change:range', () => {
+            this.#log('Selection change:range, isCollapsed:', selection.isCollapsed);
+            // Xóa pending nếu selection thay đổi sang text khác
+            // NHƯNG không xóa nếu đang trong quá trình tạo pending
+            if (this.#pendingId && !this.#isCreatingPending) {
+                this.#log('Selection changed, clearing pending');
+                this.clearPendingSelection();
+            }
+            else if (this.#isCreatingPending) {
+                this.#log('Skipping clear pending - isCreatingPending flag is set');
+            }
+            if (!selection.isCollapsed) {
+                const range = selection.getFirstRange();
+                if (range) {
+                    // Chỉ hiện balloon khi selection có content không phải khoảng trắng
+                    const text = this.#getTextFromRange(range);
+                    if (text.trim().length > 0) {
+                        this.#showBalloon(range);
+                    }
+                    else {
+                        this.#hideBalloon();
+                    }
+                }
+            }
+            else {
+                this.#hideBalloon();
+            }
+        });
+        // Ẩn balloon khi focus thay đổi
+        this.listenTo(editor.ui, 'update', () => {
+            if (selection.isCollapsed) {
+                this.#hideBalloon();
+            }
+        });
+    }
+    #showBalloon(range) {
+        this.#log('#showBalloon called, range:', range);
+        const editor = this.editor;
+        // Ẩn balloon hiện tại trước
+        this.#hideBalloon();
+        // Tạo balloon button
+        const buttonView = new ButtonView(editor.locale);
+        buttonView.set({
+            label: 'Bình luận',
+            icon: '<svg width="16px" height="16px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6l-4-4H4a2 2 0 01-2-2V4a2 2 0 012-2h14a2 2 0 012 2v9zM5 7h10v2H5V7zm0 4h10v2H5v-2z"/></svg>',
+            tooltip: true,
+            withText: true,
+        });
+        // Xử lý khi click button
+        this.listenTo(buttonView, 'execute', () => {
+            this.#log('Balloon button clicked');
+            const selection = this.#getSelectionData();
+            this.#log('Selection data:', selection);
+            if (selection) {
+                // Set flag để prevent clearing pending khi selection change
+                this.#isCreatingPending = true;
+                this.#log('Calling onPendingComment callback');
+                this.#config.onPendingComment?.({
+                    id: '',
+                    startPath: selection.startPath,
+                    endPath: selection.endPath,
+                    originalText: selection.text,
+                    currentText: selection.text,
+                    status: 'normal',
+                });
+                // Reset flag sau một khoảng ngắn
+                setTimeout(() => {
+                    this.#isCreatingPending = false;
+                }, 100);
+            }
+            this.#hideBalloon();
+        });
+        // Thêm vào balloon
+        try {
+            this.#balloon.add({
+                view: buttonView,
+                position: {
+                    target: () => {
+                        const viewRange = editor.editing.mapper.toViewRange(range);
+                        return editor.editing.view.domConverter.viewRangeToDom(viewRange);
+                    },
+                },
+            });
+            this.#balloonView = buttonView;
+            this.#log('Balloon added successfully');
+        }
+        catch (e) {
+            this.#warn('Error adding balloon:', e);
+        }
+    }
+    #balloonView = null;
+    #hideBalloon() {
+        if (this.#balloonView) {
+            this.#balloon.remove(this.#balloonView);
+            this.#balloonView = null;
+        }
+    }
+    // ========================================================================
+    // CHANGE TRACKING
+    // ========================================================================
+    #setupChangeTracking() {
+        const editor = this.editor;
+        // Lắng nghe thay đổi dữ liệu
+        editor.model.document.on('change:data', () => {
+            this.#updateCommentStatuses();
+        });
+        // Lắng nghe thay đổi marker
+        editor.model.document.on('change:markers', () => {
+            this.#updateCommentStatuses();
+        });
+    }
+    #updateCommentStatuses() {
+        let hasChanges = false;
+        this.#comments.forEach((comment, id) => {
+            const marker = this.editor.model.markers.get(`comment:${id}`);
+            if (marker) {
+                const range = marker.getRange();
+                const currentText = this.#getTextFromRange(range);
+                // Tự động cập nhật paths (CKEditor duy trì chúng)
+                const newStartPath = Array.from(range.start.path);
+                const newEndPath = Array.from(range.end.path);
+                const pathChanged = JSON.stringify(comment.startPath) !== JSON.stringify(newStartPath) ||
+                    JSON.stringify(comment.endPath) !== JSON.stringify(newEndPath);
+                const textChanged = currentText !== comment.currentText;
+                if (pathChanged || textChanged) {
+                    hasChanges = true;
+                    comment.startPath = newStartPath;
+                    comment.endPath = newEndPath;
+                    comment.currentText = currentText;
+                    // Cập nhật trạng thái
+                    if (currentText === comment.originalText) {
+                        comment.status = 'normal';
+                    }
+                    else if (currentText.length === 0) {
+                        comment.status = 'broken';
+                    }
+                    else {
+                        comment.status = 'modified';
+                    }
+                }
+            }
+            else {
+                // Không tìm thấy marker - bị hỏng
+                if (comment.status !== 'broken') {
+                    hasChanges = true;
+                    comment.status = 'broken';
+                }
+            }
+        });
+        if (hasChanges) {
+            this.#refreshView();
+            this.#fireOnChange();
+        }
+    }
+    // ========================================================================
+    // PUBLIC API
+    // ========================================================================
+    /**
+     * Thiết lập config với callbacks
+     */
+    setConfig(config) {
+        this.#config = config;
+    }
+    /**
+     * Thêm comment và tạo marker
+     */
+    addComment(comment) {
+        if (this.#comments.has(comment.id)) {
+            this.#warn(`Comment with id ${comment.id} already exists`);
+            return false;
+        }
+        // Tạo marker
+        const success = this.#createMarker(comment);
+        // Lưu comment (với trạng thái broken nếu marker thất bại)
+        const storedComment = success ? { ...comment } : { ...comment, status: 'broken' };
+        this.#comments.set(comment.id, storedComment);
+        this.#refreshView();
+        this.#fireOnChange();
+        // Chỉ fire onAddComment callback KHI thêm thành công (không phải broken)
+        if (success) {
+            this.#config.onAddComment?.(storedComment);
+        }
+        return true;
+    }
+    /**
+     * Xóa comment theo id
+     */
+    removeComment(id) {
+        const comment = this.#comments.get(id);
+        if (!comment) {
+            return false;
+        }
+        // Xóa marker
+        this.editor.model.change(writer => {
+            writer.removeMarker(`comment:${id}`);
+        });
+        // Xóa khỏi map
+        this.#comments.delete(id);
+        // Xóa selection nếu bị xóa
+        if (this.#selectedId === id) {
+            this.#selectedId = null;
+        }
+        this.#refreshView();
+        this.#fireOnChange();
+        return true;
+    }
+    /**
+     * Chọn comment theo id - chỉ thêm class highlight, không bôi đen text
+     */
+    selectComment(id, scrollIntoView = true) {
+        this.#log('selectComment called with id:', id, 'hasComment:', this.#comments.has(id));
+        if (!this.#comments.has(id)) {
+            this.#warn('Comment not found:', id);
+            return;
+        }
+        this.#selectedId = id;
+        this.#refreshView();
+        if (scrollIntoView) {
+            this.#scrollToComment(id);
+        }
+        this.#log('Firing onSelectComment callback for id:', id);
+        this.#config.onSelectComment?.(id);
+    }
+    /**
+     * Thiết lập tất cả comments (khôi phục từ dữ liệu)
+     */
+    setComments(comments) {
+        this.#log('setComments called with', comments.length, 'comments');
+        // Xóa comments hiện tại
+        this.#log('Clearing existing comments, count:', this.#comments.size);
+        this.#comments.forEach((_, id) => {
+            const markerName = `comment:${id}`;
+            if (this.editor.model.markers.has(markerName)) {
+                this.#log('Removing marker:', markerName);
+                this.editor.model.change(writer => {
+                    writer.removeMarker(markerName);
+                });
+            }
+            else {
+                this.#warn('Marker not found, skipping:', markerName);
+            }
+        });
+        this.#comments.clear();
+        this.#selectedId = null;
+        // Thêm comments mới - status sẽ được tính toán động từ editor
+        comments.forEach(comment => {
+            const success = this.#createMarker(comment);
+            // Lưu comment với status mặc định, sẽ được cập nhật bởi #updateCommentStatuses
+            const storedComment = {
+                ...comment,
+                status: success ? 'normal' : 'broken',
+                currentText: success ? comment.originalText : '',
+            };
+            this.#comments.set(comment.id, storedComment);
+        });
+        this.#refreshView();
+        this.#fireOnChange();
+    }
+    /**
+     * Lấy tất cả comments
+     */
+    get comments() {
+        return Array.from(this.#comments.values());
+    }
+    /**
+     * Thiết lập pending highlight cho selection (khi user đang nhập nội dung comment)
+     */
+    setPendingSelection(startPath, endPath) {
+        // Xóa pending marker hiện tại MÀ KHÔNG fire callback
+        this.#clearPendingMarker();
+        const model = this.editor.model;
+        try {
+            model.change(writer => {
+                const root = model.document.getRoot();
+                if (!root) {
+                    throw new Error('Document root not found');
+                }
+                const startPos = writer.createPositionFromPath(root, startPath);
+                const endPos = writer.createPositionFromPath(root, endPath);
+                const range = writer.createRange(startPos, endPos);
+                writer.addMarker(`comment:${_a.PENDING_MARKER_ID}`, {
+                    range,
+                    usingOperation: false,
+                    affectsData: false,
+                });
+            });
+            this.#pendingId = _a.PENDING_MARKER_ID;
+            this.#refreshView();
+            return true;
+        }
+        catch (e) {
+            this.#warn('Failed to set pending selection:', e);
+            return false;
+        }
+    }
+    /**
+     * Xóa pending marker mà không fire callback (dùng nội bộ)
+     */
+    #clearPendingMarker() {
+        if (!this.#pendingId)
+            return;
+        this.editor.model.change(writer => {
+            writer.removeMarker(`comment:${_a.PENDING_MARKER_ID}`);
+        });
+        this.#pendingId = null;
+        this.#refreshView();
+    }
+    /**
+     * Xóa pending highlight và fire onCancelPending callback
+     */
+    clearPendingSelection() {
+        if (!this.#pendingId)
+            return;
+        this.#clearPendingMarker();
+        // Fire callback để thông báo UI
+        this.#config.onCancelPending?.();
+    }
+    /**
+     * Lấy dữ liệu selection hiện tại để tạo comment
+     * Trim khoảng trắng để tránh sai vị trí khi lưu
+     */
+    #getSelectionData() {
+        const selection = this.editor.model.document.selection;
+        const range = selection.getFirstRange();
+        if (!range || range.isCollapsed) {
+            return null;
+        }
+        const text = this.#getTextFromRange(range);
+        const trimmedText = text.trim();
+        if (!trimmedText) {
+            return null;
+        }
+        // Tính toán số ký tự cần trim ở đầu và cuối
+        const leadingWhitespace = text.length - text.trimStart().length;
+        const trailingWhitespace = text.length - text.trimEnd().length;
+        // Điều chỉnh range để loại bỏ khoảng trắng
+        let adjustedRange = range;
+        if (leadingWhitespace > 0 || trailingWhitespace > 0) {
+            adjustedRange = this.#adjustRangeForTrim(range, leadingWhitespace, trailingWhitespace);
+        }
+        return {
+            range: adjustedRange,
+            startPath: Array.from(adjustedRange.start.path),
+            endPath: Array.from(adjustedRange.end.path),
+            text: trimmedText,
+        };
+    }
+    /**
+     * Điều chỉnh range để loại bỏ khoảng trắng đầu/cuối
+     */
+    #adjustRangeForTrim(range, leadingTrim, trailingTrim) {
+        const model = this.editor.model;
+        return model.change(writer => {
+            let startPos = range.start;
+            let endPos = range.end;
+            // Dịch start position forward để bỏ khoảng trắng đầu
+            if (leadingTrim > 0) {
+                for (let i = 0; i < leadingTrim && startPos; i++) {
+                    const nextPos = startPos.getShiftedBy(1);
+                    if (nextPos) {
+                        startPos = nextPos;
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            // Dịch end position backward để bỏ khoảng trắng cuối
+            if (trailingTrim > 0) {
+                for (let i = 0; i < trailingTrim && endPos; i++) {
+                    const prevPos = endPos.getShiftedBy(-1);
+                    if (prevPos && prevPos.isAfter(startPos)) {
+                        endPos = prevPos;
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            return writer.createRange(startPos, endPos);
+        });
+    }
+    // ========================================================================
+    // INTERNAL HELPERS
+    // ========================================================================
+    #createMarker(comment) {
+        const model = this.editor.model;
+        try {
+            model.change(writer => {
+                const root = model.document.getRoot();
+                if (!root) {
+                    throw new Error('Document root not found');
+                }
+                const startPos = writer.createPositionFromPath(root, comment.startPath);
+                const endPos = writer.createPositionFromPath(root, comment.endPath);
+                const range = writer.createRange(startPos, endPos);
+                // Validate: kiểm tra text tại range có khớp với originalText không
+                const rangeText = this.#getTextFromRange(range);
+                this.#log('Range text:', rangeText, 'range:', range);
+                if (rangeText !== comment.originalText) {
+                    this.#warn(`Marker text mismatch for comment ${comment.id}:`, `\n  Expected: "${comment.originalText}"`, `\n  Got: "${rangeText}"`, `\n  Trying to find text near original path...`);
+                    // Thử tìm text gần path gốc
+                    const searchRange = this.#config.searchRange ?? _a.DEFAULT_SEARCH_RANGE;
+                    const foundRange = this.#findTextNearPath(comment.originalText, comment.startPath, comment.endPath, searchRange);
+                    if (foundRange) {
+                        this.#log('Found text at new position, updating paths');
+                        // Cập nhật paths cho comment
+                        comment.startPath = Array.from(foundRange.start.path);
+                        comment.endPath = Array.from(foundRange.end.path);
+                        writer.addMarker(`comment:${comment.id}`, {
+                            range: foundRange,
+                            usingOperation: true,
+                            affectsData: false,
+                        });
+                        return;
+                    }
+                    throw new Error(`Failed to find text "${comment.originalText}" near original path`);
+                }
+                writer.addMarker(`comment:${comment.id}`, {
+                    range,
+                    usingOperation: true, // CKEditor tự động cập nhật vị trí
+                    affectsData: false,
+                });
+            });
+            return true;
+        }
+        catch (e) {
+            this.#warn(`Failed to create marker for comment ${comment.id}:`, e);
+            return false;
+        }
+    }
+    /**
+     * Tìm text trong document trong phạm vi ±searchRange nodes từ path gốc
+     */
+    #findTextNearPath(searchText, startPath, endPath, searchRange) {
+        if (!searchText)
+            return null;
+        const model = this.editor.model;
+        const root = model.document.getRoot();
+        if (!root)
+            return null;
+        // TODO: Implement text search logic here
+        // 1. Lấy vị trí start và end từ các path gốc
+        // 2. Tìm kiếm trong phạm vi ±searchRange nodes từ các vị trí đó
+        // 3. Trả về range nếu tìm thấy text, null nếu không tìm thấy
+        return null;
+    }
+    #getTextFromRange(range) {
+        let text = '';
+        for (const item of range.getItems()) {
+            if (item.is('$textProxy') || item.is('$text')) {
+                text += item.data;
+            }
+        }
+        return text;
+    }
+    #scrollToComment(id) {
+        const marker = this.editor.model.markers.get(`comment:${id}`);
+        if (!marker)
+            return;
+        const editor = this.editor;
+        // Scroll đến marker range (không set selection - không bôi đen)
+        const viewRange = editor.editing.mapper.toViewRange(marker.getRange());
+        const domRange = editor.editing.view.domConverter.viewRangeToDom(viewRange);
+        // Scroll element into view
+        const domElement = domRange.startContainer.parentElement;
+        if (domElement) {
+            domElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }
+    #refreshView() {
+        // Force view refresh để cập nhật marker classes
+        // Reconvert tất cả comment markers để cập nhật classes của chúng
+        const markers = this.editor.model.markers;
+        for (const marker of markers) {
+            if (marker.name.startsWith('comment:')) {
+                this.editor.editing.reconvertMarker(marker.name);
+            }
+        }
+    }
+    #fireOnChange() {
+        this.#config.onChange?.(this.comments);
+    }
+}
+_a = CkCommentPlugin;
+
 /**
  * Document Builder Utilities
  * Các hàm tiện ích cho document builder
@@ -3322,7 +3926,6 @@ class SdDocumentBuilder {
             IndentBlock,
             // Custom Plugin
             HeadingPlugin,
-            CommentPlugin,
             VariablePlugin,
             TableCustom,
             PageOrientation,
@@ -3331,6 +3934,7 @@ class SdDocumentBuilder {
             HighlightRangePlugin,
             PasteHandler,
             BlockSpace,
+            CkCommentPlugin,
         ],
         toolbar: {
             items: [
@@ -3359,8 +3963,6 @@ class SdDocumentBuilder {
                 '|',
                 'undo',
                 'redo',
-                '|',
-                'addCommentBtn',
             ],
             shouldNotGroupWhenFull: true,
         },
@@ -3495,6 +4097,21 @@ class SdDocumentBuilder {
             console.warn('Error setting up indent keybindings:', error);
         }
         this.#updateState();
+        // Setup CkCommentPlugin callbacks
+        this.#setupCkCommentPlugin();
+    }
+    #setupCkCommentPlugin() {
+        if (!this.#editor)
+            return;
+        try {
+            const ckCommentPlugin = this.#editor.plugins.get('CkComment');
+            if (ckCommentPlugin && this.option.comment) {
+                ckCommentPlugin.setConfig(this.option.comment);
+            }
+        }
+        catch (error) {
+            console.warn('CkCommentPlugin not available:', error);
+        }
     }
     setContent = (html) => {
         this.#editor?.setData?.(html);
@@ -3698,163 +4315,20 @@ class SdDocumentBuilder {
         },
     };
     // ========================================================================
-    // 2. QUẢN LÝ COMMENT
+    // 2. QUẢN LÝ COMMENT (Marker-based)
     // ========================================================================
-    comment = {
-        /**
-         * Lấy tất cả comments trong document
-         * @returns Danh sách tất cả comments
-         */
-        all: () => {
-            if (!this.#editor)
-                return [];
-            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 Array.from(commentsMap.values());
-        },
-        /**
-         * Thêm comment vào vùng text đang được chọn
-         * @param comment - Dữ liệu comment
-         * @param data - Dữ liệu extra data
-         * @returns SdDocumentBuilderComment hoặc null nếu không có text được chọn
-         */
-        add: (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;
-            if (!range)
-                return null;
-            // 3. Lấy text từ range
-            const selectedText = this.#getTextFromRange(range);
-            if (!selectedText.trim()) {
-                console.warn('Selected text is empty');
-                return null;
-            }
-            // 4. Tạo ID unique cho marker
-            const markerId = markerIdExternal ? `comment:${markerIdExternal}` : `comment:${Date.now()}`;
-            // 5. Tạo marker trong model
-            model.change(writer => {
-                writer.addMarker(markerId, {
-                    range,
-                    usingOperation: true, // Quan trọng: Cho phép undo/redo
-                    affectsData: true, // Lưu marker vào data khi getData()
-                });
-            });
-            return {
-                markerId,
-                selectedText,
-                comment,
-                createdAt: new Date(),
-                data,
-            };
-        },
-        /**
-         * Cập nhật nội dung comment
-         * @param markerId - ID của marker
-         * @param commentData - Dữ liệu mới
-         * @returns Comment đã cập nhật hoặc null
-         */
-        update: (markerId, comment, data) => {
-            if (!this.#editor)
-                return null;
-            const marker = this.#editor.model.markers.get(markerId);
-            if (!marker) {
-                console.warn(`Marker ${markerId} not found`);
-                return null;
-            }
-            // Lấy text hiện tại từ marker (có thể đã thay đổi)
-            const currentText = this.#getTextFromRange(marker.getRange());
-            return {
-                markerId: markerId,
-                selectedText: currentText,
-                comment,
-                data,
-            };
-        },
-        /**
-         * Lấy chi tiết comment theo markerId
-         * @param markerId - ID của marker
-         * @returns Comment hoặc null
-         */
-        detail: (markerId) => {
-            if (!this.#editor)
-                return null;
-            const marker = this.#editor.model.markers.get(markerId);
-            if (!marker)
-                return null;
-            const currentText = this.#getTextFromRange(marker.getRange());
-            return {
-                markerId: markerId,
-                selectedText: currentText,
-            };
-        },
-        /**
-         * Xóa comment theo markerId
-         * @param markerId - ID của marker cần xóa
-         * @returns true nếu xóa thành công, false nếu không tìm thấy
-         */
-        remove: (markerId) => {
-            if (!this.#editor)
-                return false;
-            const model = this.#editor.model;
-            const marker = model.markers.get(markerId);
-            if (!marker) {
-                console.warn(`Marker ${markerId} not found`);
-                return false;
-            }
-            model.change(writer => {
-                writer.removeMarker(markerId);
-            });
-            return true;
-        },
-        /**
-         * Scroll đến vị trí comment
-         * @param markerId - ID của marker cần scroll tới
-         */
-        scroll: (markerId) => {
-            if (!this.#editor)
-                return;
-            const editor = this.#editor;
-            const marker = editor.model.markers.get(markerId);
-            if (marker) {
-                // 1. Set Selection vào Marker đó trước
-                editor.model.change(writer => {
-                    writer.setSelection(marker.getRange());
-                });
-                // 2. Sau đó gọi scrollToTheSelection
-                editor.editing.view.scrollToTheSelection({
-                    alignToTop: true,
-                });
-                editor.editing.view.focus();
-            }
-            else {
-                console.warn(`Marker with id ${markerId} not found.`);
-            }
-        },
-    };
+    getCommentPluginAPI() {
+        if (!this.#editor)
+            return null;
+        try {
+            const plugin = this.#editor.plugins.get('CkComment');
+            return plugin;
+        }
+        catch (error) {
+            console.warn('CkCommentPlugin not available:', error);
+            return null;
+        }
+    }
     // ========================================================================
     // 3. QUẢN LÝ VARIABLE
     // ========================================================================
@@ -4058,11 +4532,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}: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.15}: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;font-size:inherit;line-height:inherit;margin-bottom:4px}: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:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\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"] }] });
+    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.15}: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;font-size:inherit;line-height:inherit;margin-bottom:4px}: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:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\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", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\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}: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.15}: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;font-size:inherit;line-height:inherit;margin-bottom:4px}: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:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\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"] }]
+            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.15}: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;font-size:inherit;line-height:inherit;margin-bottom:4px}: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:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\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", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\n"] }]
         }], propDecorators: { option: [{
                 type: Input,
                 args: [{ required: true }]