primeng/editor/index.d.ts

PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB

import * as i0 from '@angular/core';
import { TemplateRef, AfterContentInit, OnDestroy, EventEmitter, QueryList } from '@angular/core';
import * as i1 from 'primeng/api';
import { PrimeTemplate } from 'primeng/api';
import { BaseEditableHolder } from 'primeng/baseeditableholder';
import { Nullable } from 'primeng/ts-helpers';
import * as _primeuix_styled from '@primeuix/styled';
import { BaseStyle } from 'primeng/base';

/**
 * Quill Delta object interface for text changes.
 * @group Interfaces
 */
interface QuillDelta {
    ops?: any[];
    retain?: number;
    delete?: number;
    insert?: string | object;
    attributes?: {
        [key: string]: any;
    };
}
/**
 * Quill Range object interface for selection changes.
 * @group Interfaces
 */
interface QuillRange {
    index: number;
    length: number;
}
/**
 * Custom text change event.
 * @see {@link Editor.onTextChange}
 * @group Events
 */
interface EditorTextChangeEvent {
    /**
     * Current value as html.
     */
    htmlValue: string | null;
    /**
     * Current value as text.
     */
    textValue: string;
    /**
     * Representation of the change as Quill Delta.
     */
    delta: QuillDelta;
    /**
     * Source of change. Will be 'user', 'api', or 'silent'.
     */
    source: 'user' | 'api' | 'silent';
}
/**
 * Custom selection change event.
 * @see {@link Editor.onSelectionChange}
 * @group Events
 */
interface EditorSelectionChangeEvent {
    /**
     * Representation of the selection boundaries.
     */
    range: QuillRange | null;
    /**
     * Representation of the previous selection boundaries.
     */
    oldRange: QuillRange | null;
    /**
     * Source of change. Will be 'user', 'api', or 'silent'.
     */
    source: 'user' | 'api' | 'silent';
}
/**
 * Custom editor change event.
 * @see {@link Editor.onEditorChange}
 * @group Events
 */
interface EditorChangeEvent {
    /**
     * Type of change ('text-change' or 'selection-change').
     */
    eventName: 'text-change' | 'selection-change';
    /**
     * Arguments passed to the change event.
     */
    args: any[];
}
/**
 * Custom focus event.
 * @see {@link Editor.onFocus}
 * @group Events
 */
interface EditorFocusEvent {
    /**
     * Source of the focus event.
     */
    source: 'user' | 'api' | 'silent';
}
/**
 * Custom blur event.
 * @see {@link Editor.onBlur}
 * @group Events
 */
interface EditorBlurEvent {
    /**
     * Source of the blur event.
     */
    source: 'user' | 'api' | 'silent';
}
/**
 * Custom load event.
 * @see {@link Editor.onInit}
 * @group Events
 */
interface EditorInitEvent {
    /**
     * Text editor instance.
     */
    editor: any;
}
/**
 * Defines valid templates in Editor.
 * @group Templates
 */
interface EditorTemplates {
    /**
     * Custom header template.
     */
    header(): TemplateRef<any>;
}

/**
 *
 * Editor groups a collection of contents in tabs.
 *
 * [Live Demo](https://www.primeng.org/editor/)
 *
 * @module editorstyle
 *
 */
declare enum EditorClasses {
    /**
     * Class name of the root element
     */
    root = "p-editor",
    /**
     * Class name of the toolbar element
     */
    toolbar = "p-editor-toolbar",
    /**
     * Class name of the content element
     */
    content = "p-editor-content"
}
declare class EditorStyle extends BaseStyle {
    name: string;
    theme: _primeuix_styled.StyleType;
    classes: {
        root: ({ instance }: {
            instance: any;
        }) => (string | {
            'p-invalid': any;
        })[];
        toolbar: string;
        content: string;
    };
    static ɵfac: i0.ɵɵFactoryDeclaration<EditorStyle, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<EditorStyle>;
}
interface EditorStyle extends BaseStyle {
}

declare const EDITOR_VALUE_ACCESSOR: any;
/**
 * Editor groups a collection of contents in tabs.
 * @group Components
 */
declare class Editor extends BaseEditableHolder implements AfterContentInit, OnDestroy {
    /**
     * Inline style of the container.
     * @group Props
     */
    style: {
        [klass: string]: any;
    } | null | undefined;
    /**
     * Style class of the container.
     * @deprecated since v20.0.0, use `class` instead.
     * @group Props
     */
    styleClass: string | undefined;
    /**
     * Placeholder text to show when editor is empty.
     * @group Props
     */
    placeholder: string | undefined;
    /**
     * Whitelist of formats to display, see [here](https://quilljs.com/docs/formats/) for available options.
     * @group Props
     */
    formats: string[] | undefined;
    /**
     * Modules configuration of Editor, see [here](https://quilljs.com/docs/modules/) for available options.
     * @group Props
     */
    modules: object | undefined;
    /**
     * DOM Element or a CSS selector for a DOM Element, within which the editor’s p elements (i.e. tooltips, etc.) should be confined. Currently, it only considers left and right boundaries.
     * @group Props
     */
    bounds: HTMLElement | string | undefined;
    /**
     * DOM Element or a CSS selector for a DOM Element, specifying which container has the scrollbars (i.e. overflow-y: auto), if is has been changed from the default ql-editor with custom CSS. Necessary to fix scroll jumping bugs when Quill is set to auto grow its height, and another ancestor container is responsible from the scrolling..
     * @group Props
     */
    scrollingContainer: HTMLElement | string | undefined;
    /**
     * Shortcut for debug. Note debug is a static method and will affect other instances of Quill editors on the page. Only warning and error messages are enabled by default.
     * @group Props
     */
    debug: string | undefined;
    /**
     * Whether to instantiate the editor to read-only mode.
     * @group Props
     */
    get readonly(): boolean;
    set readonly(val: boolean);
    /**
     * Callback to invoke when the quill modules are loaded.
     * @param {EditorInitEvent} event - custom event.
     * @group Emits
     */
    onInit: EventEmitter<EditorInitEvent>;
    /**
     * Callback to invoke when text of editor changes.
     * @param {EditorTextChangeEvent} event - custom event.
     * @group Emits
     */
    onTextChange: EventEmitter<EditorTextChangeEvent>;
    /**
     * Callback to invoke when selection of the text changes.
     * @param {EditorSelectionChangeEvent} event - custom event.
     * @group Emits
     */
    onSelectionChange: EventEmitter<EditorSelectionChangeEvent>;
    /**
     * Callback to invoke when editor content changes (combines both text and selection changes).
     * @param {EditorChangeEvent} event - custom event.
     * @group Emits
     */
    onEditorChange: EventEmitter<EditorChangeEvent>;
    /**
     * Callback to invoke when editor receives focus.
     * @param {EditorFocusEvent} event - custom event.
     * @group Emits
     */
    onFocus: EventEmitter<EditorFocusEvent>;
    /**
     * Callback to invoke when editor loses focus.
     * @param {EditorBlurEvent} event - custom event.
     * @group Emits
     */
    onBlur: EventEmitter<EditorBlurEvent>;
    toolbar: any;
    value: Nullable<string>;
    delayedCommand: Function | null;
    _readonly: boolean;
    quill: any;
    dynamicQuill: any;
    /**
     * Custom item template.
     * @group Templates
     */
    headerTemplate: Nullable<TemplateRef<any>>;
    templates: QueryList<PrimeTemplate>;
    _headerTemplate: TemplateRef<any> | undefined;
    private get isAttachedQuillEditorToDOM();
    private quillElements;
    private focusListener;
    private blurListener;
    _componentStyle: EditorStyle;
    constructor();
    ngAfterContentInit(): void;
    /**
     * @override
     *
     * @see {@link BaseEditableHolder.writeControlValue}
     * Writes the value to the control.
     */
    writeControlValue(value: any): void;
    getQuill(): any;
    private initQuillEditor;
    private createQuillEditor;
    ngOnDestroy(): void;
    private initQuillElements;
    static ɵfac: i0.ɵɵFactoryDeclaration<Editor, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<Editor, "p-editor", never, { "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "formats": { "alias": "formats"; "required": false; }; "modules": { "alias": "modules"; "required": false; }; "bounds": { "alias": "bounds"; "required": false; }; "scrollingContainer": { "alias": "scrollingContainer"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "onInit": "onInit"; "onTextChange": "onTextChange"; "onSelectionChange": "onSelectionChange"; "onEditorChange": "onEditorChange"; "onFocus": "onFocus"; "onBlur": "onBlur"; }, ["toolbar", "headerTemplate", "templates"], ["p-header"], true, never>;
}
declare class EditorModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<EditorModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<EditorModule, never, [typeof Editor, typeof i1.SharedModule], [typeof Editor, typeof i1.SharedModule]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<EditorModule>;
}

export { EDITOR_VALUE_ACCESSOR, Editor, EditorClasses, EditorModule, EditorStyle };
export type { EditorBlurEvent, EditorChangeEvent, EditorFocusEvent, EditorInitEvent, EditorSelectionChangeEvent, EditorTemplates, EditorTextChangeEvent, QuillDelta, QuillRange };