@sd-angular/core 19.0.0-beta.3 → 19.0.0-beta.31

package/fesm2022/sd-angular-core-components-mini-editor.mjs

@@ -0,0 +1,326 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, Input, Output, Component } from '@angular/core';
+import * as i1 from '@ckeditor/ckeditor5-angular';
+import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
+import { ClassicEditor, Essentials, FontColor, Paragraph, Bold, Italic, Underline, Link, List, Undo, Widget, Markdown, Mention } from 'ckeditor5';
+import { Subscription, Subject } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * Component sd-mini-editor - Editor đơn giản cho comment input
+ * Sử dụng CKEditor với chế độ đơn giản (bold, italic, link)
+ * Hỗ trợ mention và output format (html/markdown)
+ *
+ * @example
+ * ```html
+ * <sd-mini-editor
+ *   [option]="editorOption"
+ *   [(ngModel)]="content"
+ *   (contentChange)="onContentChange($event)"
+ * >
+ * </sd-mini-editor>
+ * ```
+ */
+class SdMiniEditor {
+    /** Cấu hình option cho editor */
+    option;
+    /** NgModel binding - nội dung HTML/Markdown */
+    value = '';
+    valueChange = new EventEmitter();
+    /** Event emitter khi content thay đổi */
+    contentChange = new EventEmitter();
+    /** Event emitter khi blur */
+    blur = new EventEmitter();
+    /** Event emitter khi focus */
+    focus = new EventEmitter();
+    /** Disabled state */
+    disabled = false;
+    Editor = ClassicEditor;
+    #editor;
+    #subscription = new Subscription();
+    #contentChangeSubject = new Subject();
+    // Build editor config dynamically
+    get editorConfig() {
+        const enableMention = this.option?.enableMention ?? false;
+        const useMarkdown = this.option?.outputFormat === 'markdown';
+        const plugins = [Essentials, FontColor, Paragraph, Bold, Italic, Underline, Link, List, Undo, Widget];
+        // Add Markdown plugin if outputFormat is markdown
+        if (useMarkdown) {
+            plugins.push(Markdown);
+        }
+        // Add Mention plugin if enabled
+        if (enableMention) {
+            plugins.push(Mention);
+        }
+        // Build base config
+        const config = {
+            licenseKey: 'GPL',
+            getOption: () => this.option,
+            plugins,
+            toolbar: {
+                items: ['bold', 'italic', 'underline', '|', 'fontColor', '|', 'bulletedList', 'numberedList', '|', 'link'],
+                shouldNotGroupWhenFull: true,
+            },
+            placeholder: this.option?.placeholder,
+            link: {
+                addTargetToExternalLinks: true,
+                defaultProtocol: 'https://',
+            },
+            fontColor: {
+                columns: 5,
+                documentColors: 10,
+                colorPicker: { format: 'hex' },
+            },
+        };
+        // Add mention configuration if enabled
+        if (enableMention && this.option?.mentionConfig?.feeds) {
+            config.mention = {
+                feeds: this.option.mentionConfig.feeds,
+            };
+        }
+        return config;
+    }
+    constructor() {
+        // Setup debounce cho content change
+        this.#subscription.add(this.#contentChangeSubject.pipe(throttleTime(500, undefined, { leading: true, trailing: true })).subscribe(content => {
+            const output = this.#convertOutput(content);
+            this.value = output;
+            this.#onChange(output);
+            this.valueChange.emit(output);
+            this.contentChange.emit(output);
+            this.option?.onChange?.(output);
+        }));
+    }
+    ngOnDestroy() {
+        this.#subscription.unsubscribe();
+        this.#editor?.destroy?.();
+    }
+    /**
+     * Kiểm tra có nên enable mention plugin không
+     */
+    #shouldEnableMention() {
+        return this.option?.enableMention ?? false;
+    }
+    /**
+     * Xử lý khi editor ready
+     */
+    onReady(editor) {
+        this.#editor = editor;
+        // Set initial content
+        if (this.value) {
+            this.setContent(this.value);
+        }
+        // Lắng nghe sự kiện thay đổi nội dung
+        editor.model.document.on('change:data', () => {
+            const content = editor.getData();
+            this.#contentChangeSubject.next(content);
+        });
+        // Lắng nghe focus/blur events
+        editor.editing.view.document.on('focus', evt => {
+            const domEvent = evt.domEvent;
+            this.focus.emit(domEvent);
+            this.option?.onFocus?.(domEvent);
+        });
+        editor.editing.view.document.on('blur', evt => {
+            const domEvent = evt.domEvent;
+            this.blur.emit(domEvent);
+            this.option?.onBlur?.(domEvent);
+        });
+        // Lắng nghe sự kiện mention được chọn
+        if (this.#shouldEnableMention()) {
+            editor.commands.get('mention')?.on('execute', (_evt, data) => {
+                const mentionData = data[0];
+                this.option?.onMentionSelect?.(mentionData.mention);
+                // Trigger content change sau khi insert mention
+                const content = editor.getData();
+                this.#contentChangeSubject.next(content);
+            });
+            // Custom downcast converter để thay đổi cấu trúc mention HTML
+            editor.conversion.for('downcast').attributeToElement({
+                model: 'mention',
+                view: (mentionData, { writer }) => {
+                    const data = mentionData;
+                    const rawId = data?.id || '';
+                    const marker = rawId[0];
+                    const cleanId = rawId.slice(1);
+                    return writer.createAttributeElement('span', {
+                        class: 'ck-custom-mention',
+                        'data-id': cleanId,
+                        'data-marker': marker,
+                        contenteditable: 'false',
+                    });
+                },
+                converterPriority: 'highest',
+            });
+            // Xử lý keyboard để xóa mention 1 lần
+            editor.editing.view.document.on('keydown', (evt, data) => {
+                const keyEvent = data;
+                // Delete (46) hoặc Backspace (8)
+                if (keyEvent.keyCode === 46 || keyEvent.keyCode === 8) {
+                    const model = editor.model;
+                    const selection = model.document.selection;
+                    const position = selection.getFirstPosition();
+                    if (!position)
+                        return;
+                    // Tìm text node có mention attribute
+                    const node = position.textNode || position.nodeBefore || position.nodeAfter;
+                    if (node && node.is('$text')) {
+                        const mentionAttr = node.getAttribute('mention');
+                        if (mentionAttr) {
+                            // Xóa toàn bộ text node chứa mention
+                            model.change(writer => {
+                                writer.remove(node);
+                            });
+                            evt.stop();
+                        }
+                    }
+                }
+            });
+        }
+    }
+    /**
+     * Convert output theo format (html hoặc markdown)
+     * Khi sử dụng CKEditor Markdown plugin, getData() tự động trả về Markdown
+     */
+    #convertOutput(content) {
+        // CKEditor Markdown plugin tự động xử lý conversion
+        // Không cần manual conversion nữa
+        return content;
+    }
+    /**
+     * Set nội dung cho editor
+     */
+    setContent(content) {
+        this.#editor?.setData?.(content);
+    }
+    /**
+     * Get nội dung từ editor
+     */
+    getContent() {
+        if (this.#editor) {
+            const html = this.#editor.getData();
+            return this.#convertOutput(html);
+        }
+        return '';
+    }
+    /**
+     * Get nội dung HTML gốc (không convert)
+     */
+    getHtmlContent() {
+        return this.#editor?.getData?.() || '';
+    }
+    /**
+     * Focus vào editor
+     */
+    focusEditor() {
+        this.#editor?.editing?.view?.focus?.();
+    }
+    /**
+     * Insert mention vào vị trí con trỏ hiện tại
+     */
+    insertMention(item) {
+        if (!this.#editor)
+            return;
+        const firstFeed = this.option?.mentionConfig?.feeds?.[0];
+        const marker = item.marker || firstFeed?.marker || '@';
+        // Sử dụng CKEditor mention command
+        this.#editor.execute('mention', {
+            marker,
+            mention: {
+                id: item.id,
+                text: `${marker}${item.name}`,
+            },
+        });
+    }
+    /**
+     * Get danh sách mentions trong nội dung
+     */
+    getMentions() {
+        if (!this.#editor)
+            return [];
+        const mentions = [];
+        const root = this.#editor.model.document.getRoot();
+        if (!root)
+            return mentions;
+        const range = this.#editor.model.createRangeIn(root);
+        for (const item of range.getItems()) {
+            if (item.is('$text')) {
+                const mentionAttr = item.getAttribute('mention');
+                if (mentionAttr) {
+                    const text = item.data;
+                    const marker = text.charAt(0);
+                    const name = text.substring(1);
+                    const id = item.getAttribute('data-user-id');
+                    mentions.push({ id, name, marker });
+                }
+            }
+        }
+        return mentions;
+    }
+    /**
+     * ControlValueAccessor: Write value
+     */
+    writeValue(value) {
+        this.value = value || '';
+        if (this.#editor) {
+            this.setContent(this.value);
+        }
+    }
+    /**
+     * ControlValueAccessor: Register change callback
+     */
+    registerOnChange(fn) {
+        this.#onChange = fn;
+    }
+    /**
+     * ControlValueAccessor: Register touched callback
+     */
+    registerOnTouched(fn) {
+        this.#onTouched = fn;
+    }
+    /** ControlValueAccessor callbacks */
+    #onChange = () => { };
+    #onTouched = () => { };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdMiniEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdMiniEditor, isStandalone: true, selector: "sd-mini-editor", inputs: { option: "option", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", contentChange: "contentChange", blur: "blur", focus: "focus" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdMiniEditor),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"sd-mini-editor\" [style.height]=\"option.height || 'auto'\">\r\n  <ckeditor [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\r\n</div>\r\n", styles: [".sd-mini-editor{display:block;width:100%}::ng-deep .ck-mentions .ck-button.ck-on{background:var(--sd-primary)!important;color:#fff!important}::ng-deep .ck-mentions .ck-button.ck-on *{color:#fff!important}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}: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}:host ::ng-deep .ck-custom-mention{font-weight:600;padding:0 2px;display:inline-block;pointer-events:none;-webkit-user-select:none;user-select:none;color:#2962ff}:host ::ng-deep .ck-custom-mention:before{content:attr(data-marker)}\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: SdMiniEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-mini-editor', standalone: true, imports: [CommonModule, CKEditorModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SdMiniEditor),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"sd-mini-editor\" [style.height]=\"option.height || 'auto'\">\r\n  <ckeditor [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\r\n</div>\r\n", styles: [".sd-mini-editor{display:block;width:100%}::ng-deep .ck-mentions .ck-button.ck-on{background:var(--sd-primary)!important;color:#fff!important}::ng-deep .ck-mentions .ck-button.ck-on *{color:#fff!important}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}: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}:host ::ng-deep .ck-custom-mention{font-weight:600;padding:0 2px;display:inline-block;pointer-events:none;-webkit-user-select:none;user-select:none;color:#2962ff}:host ::ng-deep .ck-custom-mention:before{content:attr(data-marker)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { option: [{
+                type: Input,
+                args: [{ required: true }]
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], contentChange: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdMiniEditor };
+//# sourceMappingURL=sd-angular-core-components-mini-editor.mjs.map

package/fesm2022/sd-angular-core-components-mini-editor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-angular-core-components-mini-editor.mjs","sources":["../../../projects/sd-angular/components/mini-editor/src/mini-editor.component.ts","../../../projects/sd-angular/components/mini-editor/src/mini-editor.component.html","../../../projects/sd-angular/components/mini-editor/sd-angular-core-components-mini-editor.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';\r\nimport { CKEditorModule } from '@ckeditor/ckeditor5-angular';\r\nimport {\r\n  Bold,\r\n  ClassicEditor,\r\n  Essentials,\r\n  Italic,\r\n  Link,\r\n  List,\r\n  FontColor,\r\n  Markdown,\r\n  Mention,\r\n  Paragraph,\r\n  Underline,\r\n  Undo,\r\n  Widget,\r\n} from 'ckeditor5';\r\nimport { Subject, Subscription } from 'rxjs';\r\nimport { throttleTime } from 'rxjs/operators';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\nimport { SdMiniEditorOption, SdMiniEditorConfig, SdMiniEditorMentionItem } from './mini-editor.model';\r\n\r\n/**\r\n * Component sd-mini-editor - Editor đơn giản cho comment input\r\n * Sử dụng CKEditor với chế độ đơn giản (bold, italic, link)\r\n * Hỗ trợ mention và output format (html/markdown)\r\n *\r\n * @example\r\n * ```html\r\n * <sd-mini-editor\r\n *   [option]=\"editorOption\"\r\n *   [(ngModel)]=\"content\"\r\n *   (contentChange)=\"onContentChange($event)\"\r\n * >\r\n * </sd-mini-editor>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'sd-mini-editor',\r\n  standalone: true,\r\n  imports: [CommonModule, CKEditorModule],\r\n  templateUrl: './mini-editor.component.html',\r\n  styleUrls: ['./mini-editor.component.scss'],\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => SdMiniEditor),\r\n      multi: true,\r\n    },\r\n  ],\r\n})\r\nexport class SdMiniEditor implements ControlValueAccessor {\r\n  /** Cấu hình option cho editor */\r\n  @Input({ required: true }) option!: SdMiniEditorOption;\r\n\r\n  /** NgModel binding - nội dung HTML/Markdown */\r\n  @Input() value = '';\r\n  @Output() valueChange = new EventEmitter<string>();\r\n\r\n  /** Event emitter khi content thay đổi */\r\n  @Output() contentChange = new EventEmitter<string>();\r\n\r\n  /** Event emitter khi blur */\r\n  @Output() blur = new EventEmitter<FocusEvent>();\r\n\r\n  /** Event emitter khi focus */\r\n  @Output() focus = new EventEmitter<FocusEvent>();\r\n\r\n  /** Disabled state */\r\n  @Input() disabled = false;\r\n\r\n  Editor = ClassicEditor;\r\n  #editor!: ClassicEditor;\r\n  #subscription = new Subscription();\r\n  #contentChangeSubject = new Subject<string>();\r\n\r\n  // Build editor config dynamically\r\n  get editorConfig(): SdMiniEditorConfig {\r\n    const enableMention = this.option?.enableMention ?? false;\r\n    const useMarkdown = this.option?.outputFormat === 'markdown';\r\n    const plugins: any[] = [Essentials, FontColor, Paragraph, Bold, Italic, Underline, Link, List, Undo, Widget];\r\n\r\n    // Add Markdown plugin if outputFormat is markdown\r\n    if (useMarkdown) {\r\n      plugins.push(Markdown);\r\n    }\r\n\r\n    // Add Mention plugin if enabled\r\n    if (enableMention) {\r\n      plugins.push(Mention);\r\n    }\r\n\r\n    // Build base config\r\n    const config: SdMiniEditorConfig = {\r\n      licenseKey: 'GPL',\r\n      getOption: () => this.option,\r\n      plugins,\r\n      toolbar: {\r\n        items: ['bold', 'italic', 'underline', '|', 'fontColor', '|', 'bulletedList', 'numberedList', '|', 'link'],\r\n        shouldNotGroupWhenFull: true,\r\n      },\r\n      placeholder: this.option?.placeholder,\r\n      link: {\r\n        addTargetToExternalLinks: true,\r\n        defaultProtocol: 'https://',\r\n      },\r\n      fontColor: {\r\n        columns: 5,\r\n        documentColors: 10,\r\n        colorPicker: { format: 'hex' },\r\n      },\r\n    };\r\n\r\n    // Add mention configuration if enabled\r\n    if (enableMention && this.option?.mentionConfig?.feeds) {\r\n      config.mention = {\r\n        feeds: this.option.mentionConfig.feeds,\r\n      };\r\n    }\r\n\r\n    return config;\r\n  }\r\n\r\n  constructor() {\r\n    // Setup debounce cho content change\r\n    this.#subscription.add(\r\n      this.#contentChangeSubject.pipe(throttleTime(500, undefined, { leading: true, trailing: true })).subscribe(content => {\r\n        const output = this.#convertOutput(content);\r\n        this.value = output;\r\n        this.#onChange(output);\r\n        this.valueChange.emit(output);\r\n        this.contentChange.emit(output);\r\n        this.option?.onChange?.(output);\r\n      })\r\n    );\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription.unsubscribe();\r\n    this.#editor?.destroy?.();\r\n  }\r\n\r\n  /**\r\n   * Kiểm tra có nên enable mention plugin không\r\n   */\r\n  #shouldEnableMention(): boolean {\r\n    return this.option?.enableMention ?? false;\r\n  }\r\n\r\n  /**\r\n   * Xử lý khi editor ready\r\n   */\r\n  onReady(editor: ClassicEditor) {\r\n    this.#editor = editor;\r\n\r\n    // Set initial content\r\n    if (this.value) {\r\n      this.setContent(this.value);\r\n    }\r\n\r\n    // Lắng nghe sự kiện thay đổi nội dung\r\n    editor.model.document.on('change:data', () => {\r\n      const content = editor.getData();\r\n      this.#contentChangeSubject.next(content);\r\n    });\r\n\r\n    // Lắng nghe focus/blur events\r\n    editor.editing.view.document.on('focus', evt => {\r\n      const domEvent = (evt as any).domEvent as FocusEvent;\r\n      this.focus.emit(domEvent);\r\n      this.option?.onFocus?.(domEvent);\r\n    });\r\n\r\n    editor.editing.view.document.on('blur', evt => {\r\n      const domEvent = (evt as any).domEvent as FocusEvent;\r\n      this.blur.emit(domEvent);\r\n      this.option?.onBlur?.(domEvent);\r\n    });\r\n\r\n    // Lắng nghe sự kiện mention được chọn\r\n    if (this.#shouldEnableMention()) {\r\n      editor.commands.get('mention')?.on('execute', (_evt, data: any) => {\r\n        const mentionData = data[0];\r\n        this.option?.onMentionSelect?.(mentionData.mention);\r\n        // Trigger content change sau khi insert mention\r\n        const content = editor.getData();\r\n        this.#contentChangeSubject.next(content);\r\n      });\r\n\r\n      // Custom downcast converter để thay đổi cấu trúc mention HTML\r\n      editor.conversion.for('downcast').attributeToElement({\r\n        model: 'mention',\r\n        view: (mentionData, { writer }) => {\r\n          const data = mentionData as SdMiniEditorMentionItem;\r\n          const rawId = data?.id || '';\r\n          const marker = rawId[0];\r\n          const cleanId = rawId.slice(1);\r\n\r\n          return writer.createAttributeElement('span', {\r\n            class: 'ck-custom-mention',\r\n            'data-id': cleanId,\r\n            'data-marker': marker,\r\n            contenteditable: 'false',\r\n          });\r\n        },\r\n        converterPriority: 'highest',\r\n      });\r\n\r\n      // Xử lý keyboard để xóa mention 1 lần\r\n      editor.editing.view.document.on('keydown', (evt, data) => {\r\n        const keyEvent = data as { keyCode: number; domEvent: KeyboardEvent };\r\n        // Delete (46) hoặc Backspace (8)\r\n        if (keyEvent.keyCode === 46 || keyEvent.keyCode === 8) {\r\n          const model = editor.model;\r\n          const selection = model.document.selection;\r\n          const position = selection.getFirstPosition();\r\n          if (!position) return;\r\n\r\n          // Tìm text node có mention attribute\r\n          const node = position.textNode || position.nodeBefore || position.nodeAfter;\r\n          if (node && node.is('$text')) {\r\n            const mentionAttr = node.getAttribute('mention');\r\n            if (mentionAttr) {\r\n              // Xóa toàn bộ text node chứa mention\r\n              model.change(writer => {\r\n                writer.remove(node);\r\n              });\r\n              evt.stop();\r\n            }\r\n          }\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Convert output theo format (html hoặc markdown)\r\n   * Khi sử dụng CKEditor Markdown plugin, getData() tự động trả về Markdown\r\n   */\r\n  #convertOutput(content: string): string {\r\n    // CKEditor Markdown plugin tự động xử lý conversion\r\n    // Không cần manual conversion nữa\r\n    return content;\r\n  }\r\n\r\n  /**\r\n   * Set nội dung cho editor\r\n   */\r\n  setContent(content: string) {\r\n    this.#editor?.setData?.(content);\r\n  }\r\n\r\n  /**\r\n   * Get nội dung từ editor\r\n   */\r\n  getContent(): string {\r\n    if (this.#editor) {\r\n      const html = this.#editor.getData();\r\n      return this.#convertOutput(html);\r\n    }\r\n    return '';\r\n  }\r\n\r\n  /**\r\n   * Get nội dung HTML gốc (không convert)\r\n   */\r\n  getHtmlContent(): string {\r\n    return this.#editor?.getData?.() || '';\r\n  }\r\n\r\n  /**\r\n   * Focus vào editor\r\n   */\r\n  focusEditor() {\r\n    this.#editor?.editing?.view?.focus?.();\r\n  }\r\n\r\n  /**\r\n   * Insert mention vào vị trí con trỏ hiện tại\r\n   */\r\n  insertMention(item: { id: string; name: string; marker?: string }) {\r\n    if (!this.#editor) return;\r\n\r\n    const firstFeed = this.option?.mentionConfig?.feeds?.[0];\r\n    const marker = item.marker || (firstFeed as any)?.marker || '@';\r\n\r\n    // Sử dụng CKEditor mention command\r\n    this.#editor.execute('mention', {\r\n      marker,\r\n      mention: {\r\n        id: item.id,\r\n        text: `${marker}${item.name}`,\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Get danh sách mentions trong nội dung\r\n   */\r\n  getMentions(): Array<{ id: string; name: string; marker: string }> {\r\n    if (!this.#editor) return [];\r\n\r\n    const mentions: Array<{ id: string; name: string; marker: string }> = [];\r\n    const root = this.#editor.model.document.getRoot();\r\n    if (!root) return mentions;\r\n\r\n    const range = this.#editor.model.createRangeIn(root);\r\n\r\n    for (const item of range.getItems()) {\r\n      if (item.is('$text')) {\r\n        const mentionAttr = item.getAttribute('mention');\r\n        if (mentionAttr) {\r\n          const text = (item as any).data as string;\r\n          const marker = text.charAt(0);\r\n          const name = text.substring(1);\r\n          const id = item.getAttribute('data-user-id') as string;\r\n\r\n          mentions.push({ id, name, marker });\r\n        }\r\n      }\r\n    }\r\n\r\n    return mentions;\r\n  }\r\n\r\n  /**\r\n   * ControlValueAccessor: Write value\r\n   */\r\n  writeValue(value: string): void {\r\n    this.value = value || '';\r\n    if (this.#editor) {\r\n      this.setContent(this.value);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * ControlValueAccessor: Register change callback\r\n   */\r\n  registerOnChange(fn: (value: string) => void): void {\r\n    this.#onChange = fn;\r\n  }\r\n\r\n  /**\r\n   * ControlValueAccessor: Register touched callback\r\n   */\r\n  registerOnTouched(fn: () => void): void {\r\n    this.#onTouched = fn;\r\n  }\r\n\r\n  /** ControlValueAccessor callbacks */\r\n  #onChange: (value: string) => void = () => {};\r\n  #onTouched: () => void = () => {};\r\n}\r\n","<div class=\"sd-mini-editor\" [style.height]=\"option.height || 'auto'\">\r\n  <ckeditor [editor]=\"Editor\" [config]=\"editorConfig\" [disabled]=\"disabled\" (ready)=\"onReady($event)\"> </ckeditor>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}