@sd-angular/core 19.0.0-beta.42 → 19.0.0-beta.44

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

@@ -6,6 +6,7 @@ export declare class CkCommentPlugin extends Plugin {
     static get requires(): (typeof ContextualBalloon)[];
     static readonly PENDING_MARKER_ID = "__pending_comment__";
     static readonly DEFAULT_SEARCH_RANGE = 5;
+    static readonly DEFAULT_MAX_TEXT_LENGTH = 1000;
     static readonly DEFAULT_COLORS: CkCommentColors;
     init(): void;
     /**

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

@@ -35,9 +35,15 @@ export interface CkCommentConfig {
     onRemoveComment?: (id: string | number) => void;
     onChange?: (comments: CkComment[]) => void;
     onCancelPending?: () => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+        data?: any;
+    }) => void;
     searchRange?: number;
     debug?: boolean;
     colors?: CkCommentColors;
+    maxTextLength?: number;
 }
 /**
  * Data returned when user selects text for comment

package/components/mini-editor/src/mini-editor.model.d.ts

@@ -24,6 +24,8 @@ export interface SdMiniEditorOption {
     placeholder?: string;
     /** Chiều cao editor (mặc định: auto) */
     height?: string;
+    /** Chiều cao tối đa của editor (ví dụ: '300px') */
+    maxHeight?: string;
     /** Bật/tắt mention plugin */
     enableMention?: boolean;
     /** Cấu hình mention */

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

@@ -3135,19 +3135,21 @@ class CkCommentPlugin extends Plugin {
     #selectedId = null;
     #pendingId = null; // ID cho pending highlight
     #isCreatingPending = false; // Flag để prevent clearing pending khi đang tạo
+    #isProcessingClick = false; // Flag để prevent duplicate click events
     #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;
+    // Độ dài text tối đa để tạo marker
+    static DEFAULT_MAX_TEXT_LENGTH = 1000;
     // 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
@@ -3208,7 +3210,13 @@ class CkCommentPlugin extends Plugin {
                 let hasValidContent = false;
                 if (range && !isCollapsed) {
                     const text = this.#getTextFromRange(range);
-                    hasValidContent = text.trim().length > 0;
+                    const trimmedText = text.trim();
+                    const maxTextLength = this.#config.maxTextLength ?? _a.DEFAULT_MAX_TEXT_LENGTH;
+                    // Kiểm tra: có content, không phải chỉ khoảng trắng, và không vượt quá max length
+                    hasValidContent = trimmedText.length > 0 && trimmedText.length <= maxTextLength;
+                    if (trimmedText.length > maxTextLength) {
+                        this.#log(`Độ dài text vượt quá giới hạn: ${trimmedText.length} > ${maxTextLength}`);
+                    }
                 }
                 view.isEnabled = hasValidContent;
             });
@@ -3261,22 +3269,32 @@ class CkCommentPlugin extends Plugin {
                     };
                 }
                 const comment = self.#comments.get(commentId);
-                // Build CSS variables based on status
-                const cssVars = [`--comment-bg: ${colors.marker}`];
+                // Build CSS variables based on status - ALWAYS set the correct variable for the status
+                let cssVars = [];
                 if (comment) {
+                    // Add status class
                     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
+                    // Set CSS variable based on status
                     if (comment.status === 'modified') {
-                        cssVars.push(`--comment-modified-bg: ${colors.markerModified}`);
+                        cssVars = [`--comment-modified-bg: ${colors.markerModified}`];
                     }
                     else if (comment.status === 'broken') {
-                        cssVars.push(`--comment-broken-bg: ${colors.markerBroken}`);
+                        cssVars = [`--comment-broken-bg: ${colors.markerBroken}`];
+                    }
+                    else {
+                        // normal status
+                        cssVars = [`--comment-bg: ${colors.marker}`];
+                    }
+                    // Add selected state if needed
+                    if (commentId === self.#selectedId) {
+                        classes.push('ck-comment-selected');
+                        cssVars.push(`--comment-selected-bg: ${colors.markerSelected}`);
                     }
                 }
+                else {
+                    // No comment found - use default
+                    cssVars = [`--comment-bg: ${colors.marker}`];
+                }
                 return {
                     classes: classes,
                     attributes: {
@@ -3292,7 +3310,7 @@ class CkCommentPlugin extends Plugin {
     // ========================================================================
     #setupMarkerClickHandler() {
         const viewDocument = this.editor.editing.view.document;
-        // Lắng nghe cả click và mousedown để đảm bảo bắt được event
+        // Lắng nghe cả click và mousedown trên CKEditor view
         viewDocument.on('mousedown', (evt, data) => {
             this.#log('Mousedown event triggered, data:', data);
             this.#handleMarkerClick(evt, data);
@@ -3301,8 +3319,58 @@ class CkCommentPlugin extends Plugin {
             this.#log('Click event triggered, data:', data);
             this.#handleMarkerClick(evt, data);
         });
+        // Thêm DOM event listener như fallback để đảm bảo bắt được click
+        // Sử dụng editor's editable DOM element
+        const editableElement = this.editor.ui.getEditableElement();
+        if (editableElement) {
+            editableElement.addEventListener('click', (domEvent) => {
+                this.#log('DOM click event triggered');
+                this.#handleDomMarkerClick(domEvent, editableElement);
+            });
+        }
+    }
+    /**
+     * Handle DOM click event (fallback)
+     */
+    #handleDomMarkerClick(domEvent, rootElement) {
+        // Prevent duplicate if already processing
+        if (this.#isProcessingClick) {
+            this.#log('DOM click skipped - already processing');
+            return;
+        }
+        let targetElement = domEvent.target;
+        // Traverse up to find marker element
+        while (targetElement && targetElement !== rootElement) {
+            if (targetElement.classList?.contains('ck-comment-marker')) {
+                const commentId = targetElement.getAttribute('data-comment-id');
+                this.#log('DOM click found marker with commentId:', commentId);
+                if (commentId) {
+                    this.#isProcessingClick = true;
+                    this.selectComment(commentId, false);
+                    domEvent.stopPropagation();
+                    domEvent.preventDefault();
+                    // Reset flag after a short delay
+                    setTimeout(() => {
+                        this.#isProcessingClick = false;
+                    }, 50);
+                }
+                return;
+            }
+            targetElement = targetElement.parentElement;
+        }
+        // Click outside markers - clear selection
+        if (this.#selectedId) {
+            this.#log('DOM click outside markers, clearing selection');
+            this.#selectedId = null;
+            this.#refreshView();
+        }
     }
     #handleMarkerClick(evt, data) {
+        // Prevent duplicate if already processing
+        if (this.#isProcessingClick) {
+            this.#log('View click skipped - already processing');
+            return;
+        }
         const viewElement = data.target;
         let element = viewElement;
         this.#log('Target element:', element, 'hasClass:', typeof element?.hasClass);
@@ -3313,8 +3381,13 @@ class CkCommentPlugin extends Plugin {
             if (hasMarkerClass) {
                 const commentId = element.getAttribute('data-comment-id');
                 this.#log('Found marker with commentId:', commentId);
+                this.#isProcessingClick = true;
                 this.selectComment(commentId, false);
                 evt.stop();
+                // Reset flag after a short delay
+                setTimeout(() => {
+                    this.#isProcessingClick = false;
+                }, 50);
                 return;
             }
             element = element.parent;
@@ -3348,9 +3421,11 @@ class CkCommentPlugin extends Plugin {
             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
+                    // Chỉ hiện balloon khi selection có content không phải khoảng trắng và không vượt quá max length
                     const text = this.#getTextFromRange(range);
-                    if (text.trim().length > 0) {
+                    const trimmedText = text.trim();
+                    const maxTextLength = this.#config.maxTextLength ?? _a.DEFAULT_MAX_TEXT_LENGTH;
+                    if (trimmedText.length > 0 && trimmedText.length <= maxTextLength) {
                         this.#showBalloon(range);
                     }
                     else {
@@ -3459,6 +3534,7 @@ class CkCommentPlugin extends Plugin {
                     JSON.stringify(comment.endPath) !== JSON.stringify(newEndPath);
                 const textChanged = currentText !== comment.currentText;
                 if (pathChanged || textChanged) {
+                    const oldStatus = comment.status;
                     hasChanges = true;
                     comment.startPath = newStartPath;
                     comment.endPath = newEndPath;
@@ -3473,13 +3549,16 @@ class CkCommentPlugin extends Plugin {
                     else {
                         comment.status = 'modified';
                     }
+                    this.#log(`Comment ${id} status changed: ${oldStatus} -> ${comment.status}`, `\n  originalText: "${comment.originalText}"`, `\n  currentText: "${currentText}"`, `\n  textChanged: ${textChanged}`);
                 }
             }
             else {
                 // Không tìm thấy marker - bị hỏng
                 if (comment.status !== 'broken') {
+                    const oldStatus = comment.status;
                     hasChanges = true;
                     comment.status = 'broken';
+                    this.#log(`Comment ${id} marker not found, status changed: ${oldStatus} -> broken`);
                 }
             }
         });
@@ -3666,6 +3745,18 @@ class CkCommentPlugin extends Plugin {
         if (!trimmedText) {
             return null;
         }
+        // Kiểm tra độ dài text tối đa
+        const maxTextLength = this.#config.maxTextLength ?? _a.DEFAULT_MAX_TEXT_LENGTH;
+        if (trimmedText.length > maxTextLength) {
+            this.#warn(`Text too long: ${trimmedText.length} > ${maxTextLength}`);
+            // Fire error callback
+            this.#config.onError?.({
+                code: 'TEXT_TOO_LONG',
+                message: `Văn bản quá dài (${trimmedText.length} ký tự). Tối đa ${maxTextLength} ký tự.`,
+                data: { textLength: trimmedText.length, maxLength: maxTextLength },
+            });
+            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;
@@ -3792,16 +3883,49 @@ class CkCommentPlugin extends Plugin {
     }
     #scrollToComment(id) {
         const marker = this.editor.model.markers.get(`comment:${id}`);
-        if (!marker)
+        if (!marker) {
+            this.#warn('Marker not found for scroll:', id);
             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' });
+        const STICKY_OFFSET = 100; // Offset cho sticky toolbar
+        try {
+            // Get the model range from marker
+            const modelRange = marker.getRange();
+            // Convert model range to view range
+            const viewRange = editor.editing.mapper.toViewRange(modelRange);
+            // Convert view range to DOM range
+            const domRange = editor.editing.view.domConverter.viewRangeToDom(viewRange);
+            this.#log('DOM range start:', domRange.startContainer, domRange.startOffset);
+            // Get the start position of the range
+            let targetElement = domRange.startContainer;
+            // If it's a text node, get its parent
+            if (targetElement.nodeType === Node.TEXT_NODE) {
+                targetElement = targetElement.parentElement;
+            }
+            this.#log('Target element:', targetElement);
+            // Find .builder-container
+            let scrollContainer = targetElement;
+            while (scrollContainer && !scrollContainer.classList?.contains('builder-container')) {
+                scrollContainer = scrollContainer.parentElement;
+            }
+            this.#log('Found scroll container:', scrollContainer);
+            if (!scrollContainer) {
+                this.#warn('No builder-container found');
+                return;
+            }
+            // Get the target element's position relative to the container
+            const containerRect = scrollContainer.getBoundingClientRect();
+            const targetRect = targetElement.getBoundingClientRect();
+            const relativeTop = targetRect.top - containerRect.top + scrollContainer.scrollTop - STICKY_OFFSET;
+            this.#log('Container top:', containerRect.top);
+            this.#log('Target top:', targetRect.top);
+            this.#log('Current scroll:', scrollContainer.scrollTop);
+            this.#log('Relative top to scroll:', relativeTop);
+            scrollContainer.scrollTo({ top: relativeTop, behavior: 'smooth' });
+        }
+        catch (e) {
+            this.#warn('Error scrolling to comment:', e);
         }
     }
     #refreshView() {