ngx-quill/types/ngx-quill.d.ts

Angular components for the easy use of the QuillJS richt text editor.

import { QuillFormat, QuillModules, QuillBeforeRender, CustomOption, CustomModule, QuillConfig } from 'ngx-quill/config';
export * from 'ngx-quill/config';
import * as _angular_core from '@angular/core';
import { EventEmitter, ModuleWithProviders } from '@angular/core';
import * as parchment from 'parchment';
import QuillType from 'quill';
import DeltaType from 'quill-delta';
import { ControlValueAccessor, Validator } from '@angular/forms';
import * as _angular_platform_browser from '@angular/platform-browser';
import * as ngx_quill from 'ngx-quill';
import { Observable } from 'rxjs';

interface Range {
    index: number;
    length: number;
}
interface ContentChange {
    content: DeltaType;
    delta: DeltaType;
    editor: QuillType;
    html: string | null;
    oldDelta: DeltaType;
    source: string;
    text: string;
}
interface SelectionChange {
    editor: QuillType;
    oldRange: Range | null;
    range: Range | null;
    source: string;
}
interface Blur {
    editor: QuillType;
    source: string;
}
interface Focus {
    editor: QuillType;
    source: string;
}
type EditorChangeContent = ContentChange & {
    event: 'text-change';
};
type EditorChangeSelection = SelectionChange & {
    event: 'selection-change';
};
declare abstract class QuillEditorBase implements ControlValueAccessor, Validator {
    readonly format: _angular_core.InputSignal<QuillFormat | undefined>;
    readonly theme: _angular_core.InputSignal<string | undefined>;
    readonly modules: _angular_core.InputSignal<QuillModules | undefined>;
    readonly debug: _angular_core.InputSignal<false | "error" | "warn" | "log">;
    readonly readOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
    readonly placeholder: _angular_core.InputSignal<string | undefined>;
    readonly maxLength: _angular_core.InputSignal<number | undefined>;
    readonly minLength: _angular_core.InputSignal<number | undefined>;
    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
    readonly formats: _angular_core.InputSignal<string[] | null | undefined>;
    readonly customToolbarPosition: _angular_core.InputSignal<"top" | "bottom">;
    readonly sanitize: _angular_core.InputSignal<boolean | undefined>;
    readonly beforeRender: _angular_core.InputSignal<QuillBeforeRender | undefined>;
    readonly styles: _angular_core.InputSignal<any>;
    readonly registry: _angular_core.InputSignal<parchment.Registry | undefined>;
    readonly bounds: _angular_core.InputSignal<string | HTMLElement | undefined>;
    readonly customOptions: _angular_core.InputSignal<CustomOption[]>;
    readonly customModules: _angular_core.InputSignal<CustomModule[]>;
    readonly trackChanges: _angular_core.InputSignal<"user" | "all" | undefined>;
    readonly classes: _angular_core.InputSignal<string | undefined>;
    readonly trimOnValidation: _angular_core.InputSignalWithTransform<boolean, unknown>;
    readonly linkPlaceholder: _angular_core.InputSignal<string | undefined>;
    readonly compareValues: _angular_core.InputSignalWithTransform<boolean, unknown>;
    readonly filterNull: _angular_core.InputSignalWithTransform<boolean, unknown>;
    readonly debounceTime: _angular_core.InputSignal<number | undefined>;
    readonly onlyFormatEventData: _angular_core.InputSignal<boolean | "none">;
    readonly defaultEmptyValue: _angular_core.InputSignal<any>;
    onEditorCreated: EventEmitter<QuillType>;
    onEditorChanged: EventEmitter<EditorChangeContent | EditorChangeSelection>;
    onContentChanged: EventEmitter<ContentChange>;
    onSelectionChanged: EventEmitter<SelectionChange>;
    onFocus: EventEmitter<Focus>;
    onBlur: EventEmitter<Blur>;
    onNativeFocus: EventEmitter<Focus>;
    onNativeBlur: EventEmitter<Blur>;
    quillEditor: QuillType;
    editorElem: HTMLElement;
    content: any;
    disabled: boolean;
    readonly toolbarPosition: _angular_core.WritableSignal<string>;
    onModelChange: ((modelValue?: any) => void) | undefined;
    onModelTouched: (() => void) | undefined;
    onValidatorChanged: (() => void) | undefined;
    private eventsSubscription;
    private quillSubscription;
    private elementRef;
    private domSanitizer;
    private platformId;
    private renderer;
    private service;
    private destroyRef;
    private previousStyles;
    private previousClasses;
    init: boolean;
    constructor();
    static normalizeClassNames(classes: string): string[];
    valueGetter: _angular_core.InputSignal<(quillEditor: QuillType, forceFormat?: QuillFormat) => string | any>;
    valueSetter: _angular_core.InputSignal<(quillEditor: QuillType, value: any) => any>;
    selectionChangeHandler: (range: Range | null, oldRange: Range | null, source: string) => void;
    textChangeHandler: (delta: DeltaType, oldDelta: DeltaType, source: string) => void;
    editorChangeHandler: (event: "text-change" | "selection-change", current: any | Range | null, old: any | Range | null, source: string) => void;
    addClasses(classList: string): void;
    removeClasses(classList: string): void;
    writeValue(currentValue: any): void;
    setDisabledState(isDisabled?: boolean): void;
    registerOnChange(fn: (modelValue: any) => void): void;
    registerOnTouched(fn: () => void): void;
    registerOnValidatorChange(fn: () => void): void;
    validate(): {
        minLengthError?: {
            given: number;
            minLength: number;
        };
        maxLengthError?: {
            given: number;
            maxLength: number;
        };
        requiredError?: {
            empty: boolean;
        };
    } | null;
    private addQuillEventListeners;
    private dispose;
    private isEmptyValue;
    private getter;
    private eventCallbackFormats;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillEditorBase, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<QuillEditorBase, never, never, { "format": { "alias": "format"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "modules": { "alias": "modules"; "required": false; "isSignal": true; }; "debug": { "alias": "debug"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "formats": { "alias": "formats"; "required": false; "isSignal": true; }; "customToolbarPosition": { "alias": "customToolbarPosition"; "required": false; "isSignal": true; }; "sanitize": { "alias": "sanitize"; "required": false; "isSignal": true; }; "beforeRender": { "alias": "beforeRender"; "required": false; "isSignal": true; }; "styles": { "alias": "styles"; "required": false; "isSignal": true; }; "registry": { "alias": "registry"; "required": false; "isSignal": true; }; "bounds": { "alias": "bounds"; "required": false; "isSignal": true; }; "customOptions": { "alias": "customOptions"; "required": false; "isSignal": true; }; "customModules": { "alias": "customModules"; "required": false; "isSignal": true; }; "trackChanges": { "alias": "trackChanges"; "required": false; "isSignal": true; }; "classes": { "alias": "classes"; "required": false; "isSignal": true; }; "trimOnValidation": { "alias": "trimOnValidation"; "required": false; "isSignal": true; }; "linkPlaceholder": { "alias": "linkPlaceholder"; "required": false; "isSignal": true; }; "compareValues": { "alias": "compareValues"; "required": false; "isSignal": true; }; "filterNull": { "alias": "filterNull"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "onlyFormatEventData": { "alias": "onlyFormatEventData"; "required": false; "isSignal": true; }; "defaultEmptyValue": { "alias": "defaultEmptyValue"; "required": false; "isSignal": true; }; "valueGetter": { "alias": "valueGetter"; "required": false; "isSignal": true; }; "valueSetter": { "alias": "valueSetter"; "required": false; "isSignal": true; }; }, { "onEditorCreated": "onEditorCreated"; "onEditorChanged": "onEditorChanged"; "onContentChanged": "onContentChanged"; "onSelectionChanged": "onSelectionChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onNativeFocus": "onNativeFocus"; "onNativeBlur": "onNativeBlur"; }, never, never, true, never>;
}
declare class QuillEditorComponent extends QuillEditorBase {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillEditorComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuillEditorComponent, "quill-editor", never, {}, {}, never, ["[above-quill-editor-toolbar]", "[quill-editor-toolbar]", "[below-quill-editor-toolbar]"], true, never>;
}

declare class QuillViewComponent {
    readonly format: _angular_core.InputSignal<"object" | "json" | "html" | "text" | undefined>;
    readonly theme: _angular_core.InputSignal<string | undefined>;
    readonly modules: _angular_core.InputSignal<QuillModules | undefined>;
    readonly debug: _angular_core.InputSignal<false | "error" | "warn" | "log">;
    readonly formats: _angular_core.InputSignal<string[] | null | undefined>;
    readonly sanitize: _angular_core.InputSignal<boolean | undefined>;
    readonly beforeRender: _angular_core.InputSignal<QuillBeforeRender | undefined>;
    readonly strict: _angular_core.InputSignal<boolean>;
    readonly content: _angular_core.InputSignal<any>;
    readonly customModules: _angular_core.InputSignal<CustomModule[]>;
    readonly customOptions: _angular_core.InputSignal<CustomOption[]>;
    onEditorCreated: EventEmitter<any>;
    quillEditor: QuillType;
    editorElem: HTMLElement;
    init: boolean;
    private readonly elementRef;
    private readonly renderer;
    private readonly service;
    private readonly sanitizer;
    private readonly platformId;
    private readonly destroyRef;
    constructor();
    valueSetter: (quillEditor: QuillType, value: any) => any;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillViewComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuillViewComponent, "quill-view", never, { "format": { "alias": "format"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "modules": { "alias": "modules"; "required": false; "isSignal": true; }; "debug": { "alias": "debug"; "required": false; "isSignal": true; }; "formats": { "alias": "formats"; "required": false; "isSignal": true; }; "sanitize": { "alias": "sanitize"; "required": false; "isSignal": true; }; "beforeRender": { "alias": "beforeRender"; "required": false; "isSignal": true; }; "strict": { "alias": "strict"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "customModules": { "alias": "customModules"; "required": false; "isSignal": true; }; "customOptions": { "alias": "customOptions"; "required": false; "isSignal": true; }; }, { "onEditorCreated": "onEditorCreated"; }, never, never, true, never>;
}

declare class QuillViewHTMLComponent {
    readonly content: _angular_core.InputSignal<string>;
    readonly theme: _angular_core.InputSignal<string | undefined>;
    readonly sanitize: _angular_core.InputSignal<boolean | undefined>;
    readonly innerHTML: _angular_core.Signal<_angular_platform_browser.SafeHtml>;
    readonly themeClass: _angular_core.Signal<string>;
    private sanitizer;
    private service;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillViewHTMLComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuillViewHTMLComponent, "quill-view-html", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "sanitize": { "alias": "sanitize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare class QuillModule {
    static forRoot(config?: QuillConfig): ModuleWithProviders<QuillModule>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<QuillModule, never, [typeof QuillEditorComponent, typeof QuillViewComponent, typeof QuillViewHTMLComponent], [typeof QuillEditorComponent, typeof QuillViewComponent, typeof QuillViewHTMLComponent]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<QuillModule>;
}

declare class QuillService {
    readonly config: QuillConfig;
    private Quill;
    private quill$;
    private registeredModules;
    getQuill(): Observable<any>;
    /** @internal */
    beforeRender(Quill: any, customModules: CustomModule[] | undefined, beforeRender?: ngx_quill.QuillBeforeRender | undefined): Observable<any>;
    /** @internal */
    private registerCustomModules;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillService, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<QuillService>;
}

export { QuillEditorBase, QuillEditorComponent, QuillModule, QuillService, QuillViewComponent, QuillViewHTMLComponent };
export type { Blur, ContentChange, EditorChangeContent, EditorChangeSelection, Focus, Range, SelectionChange };