@kolkov/angular-editor 3.0.4 → 3.1.0

package/{index.d.ts → types/kolkov-angular-editor.d.ts}

@@ -1,16 +1,38 @@
-import { HttpEvent, HttpClient, HttpResponse } from '@angular/common/http';
+import { HttpEvent, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import * as i0 from '@angular/core';
-import { OnInit, EventEmitter, ElementRef, Renderer2, AfterViewInit, OnDestroy, TemplateRef, ChangeDetectorRef } from '@angular/core';
+import { OnInit, EventEmitter, ElementRef, AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
 import * as i7 from '@angular/forms';
 import { ControlValueAccessor } from '@angular/forms';
-import { DomSanitizer } from '@angular/platform-browser';
 import * as i6 from '@angular/common';
 
+/**
+ * Custom class configuration for applying styles to selected content.
+ *
+ * @example
+ * // Basic usage (inline span)
+ * { name: 'Red Text', class: 'text-red' }
+ *
+ * // Block-level class (applies to each paragraph)
+ * { name: 'Highlight', class: 'highlight', mode: 'block' }
+ *
+ * // Auto mode (smart detection)
+ * { name: 'Quote', class: 'quote', mode: 'auto', tag: 'div' }
+ */
 interface CustomClass {
+    /** Display name shown in dropdown */
     name: string;
+    /** CSS class to apply */
     class: string;
+    /** HTML tag to use for wrapping (default: 'span') */
     tag?: string;
+    /**
+     * Application mode:
+     * - 'inline': Always wrap selection in a single element (legacy behavior)
+     * - 'block': Apply class to each block element in selection
+     * - 'auto': Smart detection - inline for single block, block for multiple (default)
+     */
+    mode?: 'inline' | 'block' | 'auto';
 }
 interface Font {
     name: string;
@@ -41,19 +63,19 @@ interface AngularEditorConfig {
     outline?: boolean;
     toolbarHiddenButtons?: string[][];
     rawPaste?: boolean;
+    textDirection?: 'ltr' | 'rtl' | 'auto';
 }
 
 interface UploadResponse {
     imageUrl: string;
 }
 declare class AngularEditorService {
-    private http;
-    private doc;
     savedSelection: Range | null;
     selectedText: string;
     uploadUrl: string;
     uploadWithCredentials: boolean;
-    constructor(http: HttpClient, doc: any);
+    private http;
+    private doc;
     /**
      * Executed command from editor header buttons exclude toggleEditorMode
      * @param command string from triggerCommand
@@ -100,7 +122,7 @@ declare class AngularEditorService {
     /**
      * setTimeout used for execute 'saveSelection' method in next event loop iteration
      */
-    executeInNextQueueIteration(callbackFn: (...args: any[]) => any, timeout?: number): void;
+    executeInNextQueueIteration(callbackFn: (...args: unknown[]) => unknown, timeout?: number): void;
     /** check any selection is made or not */
     private checkSelection;
     /**
@@ -114,12 +136,48 @@ declare class AngularEditorService {
      */
     insertImage(imageUrl: string): void;
     setDefaultParagraphSeparator(separator: string): void;
+    /**
+     * Apply custom class to selection with enterprise-level HTML structure preservation.
+     * Supports three modes:
+     * - 'inline': Wrap selection in a single element (legacy behavior)
+     * - 'block': Apply class to each block element in selection
+     * - 'auto': Smart detection based on selection span (default)
+     *
+     * @param customClass The custom class configuration
+     */
     createCustomClass(customClass: CustomClass): void;
+    /**
+     * Apply class inline by wrapping selection in a single element.
+     * Uses extractContents + insertNode pattern for safety.
+     */
+    private applyClassInline;
+    /**
+     * Fallback method for inline class application (legacy behavior).
+     */
+    private applyClassInlineFallback;
+    /**
+     * Apply class to each block element in selection.
+     * Preserves HTML structure by adding class to existing elements.
+     */
+    private applyClassToBlocks;
+    /**
+     * Get all block-level elements within a range.
+     * Returns elements that are fully or partially selected.
+     */
+    private getBlockElementsInRange;
+    /**
+     * Check if a node is fully contained within a range.
+     */
+    private isNodeFullyInRange;
+    /**
+     * Check if element has an ancestor in the given set.
+     */
+    private hasAncestorInSet;
     insertVideo(videoUrl: string): void;
     private insertYouTubeVideoTag;
     private insertVimeoVideoTag;
     nextNode(node: any): any;
-    getRangeSelectedNodes(range: any, includePartiallySelectedContainers: any): any[];
+    getRangeSelectedNodes(range: any, includePartiallySelectedContainers: boolean): any[];
     getSelectedNodes(): any[];
     replaceWithOwnChildren(el: any): void;
     removeSelectedElements(tagNames: any): void;
@@ -132,8 +190,6 @@ interface SelectOption {
     value: string;
 }
 declare class AeSelectComponent implements OnInit, ControlValueAccessor {
-    private elRef;
-    private r;
     options: SelectOption[];
     isHidden: boolean;
     selectedOption: SelectOption;
@@ -145,7 +201,8 @@ declare class AeSelectComponent implements OnInit, ControlValueAccessor {
     hidden: string;
     changeEvent: EventEmitter<any>;
     labelButton: ElementRef;
-    constructor(elRef: ElementRef, r: Renderer2);
+    private elRef;
+    private r;
     ngOnInit(): void;
     hide(): void;
     optionSelect(option: SelectOption, event: MouseEvent): void;
@@ -172,26 +229,19 @@ declare class AeSelectComponent implements OnInit, ControlValueAccessor {
 }
 
 declare class AeToolbarComponent {
-    private r;
-    private editorService;
-    private er;
-    private doc;
     htmlMode: boolean;
     linkSelected: boolean;
     block: string;
     fontName: string;
     fontSize: string;
-    foreColour: any;
-    backColor: any;
+    foreColour: string;
+    backColor: string;
     headings: SelectOption[];
     fontSizes: SelectOption[];
     customClassId: string;
     _customClasses: CustomClass[];
     customClassList: SelectOption[];
-    tagMap: {
-        BLOCKQUOTE: string;
-        A: string;
-    };
+    tagMap: Record<string, string>;
     select: string[];
     buttons: string[];
     id: string;
@@ -206,7 +256,10 @@ declare class AeToolbarComponent {
     execute: EventEmitter<string>;
     myInputFile: ElementRef;
     get isLinkButtonDisabled(): boolean;
-    constructor(r: Renderer2, editorService: AngularEditorService, er: ElementRef, doc: any);
+    private r;
+    private editorService;
+    private er;
+    private doc;
     /**
      * Trigger command from editor header buttons
      * @param command string from toolbar buttons
@@ -263,11 +316,6 @@ declare class AeToolbarComponent {
 }
 
 declare class AngularEditorComponent implements OnInit, ControlValueAccessor, AfterViewInit, OnDestroy {
-    private r;
-    private editorService;
-    private doc;
-    private sanitizer;
-    private cdRef;
     private autoFocus;
     private onChange;
     private onTouched;
@@ -283,12 +331,12 @@ declare class AngularEditorComponent implements OnInit, ControlValueAccessor, Af
     config: AngularEditorConfig;
     placeholder: string;
     tabIndex: number | null;
-    html: any;
+    html: EventEmitter<any>;
     textArea: ElementRef;
     editorWrapper: ElementRef;
     editorToolbar: AeToolbarComponent;
     customButtonsTemplateRef?: TemplateRef<any>;
-    executeCommandFn: any;
+    executeCommandFn: (command: string, value?: string) => void;
     viewMode: EventEmitter<boolean>;
     /** emits `blur` event when focused out from the textarea */
     blurEvent: EventEmitter<FocusEvent>;
@@ -296,10 +344,15 @@ declare class AngularEditorComponent implements OnInit, ControlValueAccessor, Af
     focusEvent: EventEmitter<FocusEvent>;
     tabindex: number;
     onFocus(): void;
-    constructor(r: Renderer2, editorService: AngularEditorService, doc: any, sanitizer: DomSanitizer, cdRef: ChangeDetectorRef, defaultTabIndex: string, autoFocus: any);
+    private r;
+    private editorService;
+    private doc;
+    private sanitizer;
+    private cdRef;
+    constructor(defaultTabIndex: string, autoFocus: any);
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    onPaste(event: ClipboardEvent): string;
+    onPaste(event: ClipboardEvent): string | undefined;
     /**
      * Executed command from editor header buttons
      * @param command string from triggerCommand
@@ -385,13 +438,12 @@ declare class AngularEditorComponent implements OnInit, ControlValueAccessor, Af
     getCustomTags(): string;
     ngOnDestroy(): void;
     filterStyles(html: string): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AngularEditorComponent, [null, null, null, null, null, { attribute: "tabindex"; }, { attribute: "autofocus"; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AngularEditorComponent, [{ attribute: "tabindex"; }, { attribute: "autofocus"; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AngularEditorComponent, "angular-editor", never, { "id": { "alias": "id"; "required": false; }; "config": { "alias": "config"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "html": "html"; "viewMode": "viewMode"; "blurEvent": "blur"; "focusEvent": "focus"; }, ["customButtonsTemplateRef"], never, false, never>;
 }
 
 declare class AeButtonComponent {
     iconName: string;
-    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<AeButtonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AeButtonComponent, "ae-button, button[aeButton]", never, { "iconName": { "alias": "iconName"; "required": false; }; }, {}, never, ["*"], false, never>;
 }