ngx-wysiwyg-editor/lib/wysiwyg-editor.component.d.ts

A powerful and customizable WYSIWYG HTML editor for Angular applications

import { ElementRef, EventEmitter, OnInit, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import * as i0 from "@angular/core";
export interface EmailBlock {
    id: string;
    type: 'header' | 'text' | 'image' | 'button' | 'divider' | 'columns' | 'social' | 'spacer' | 'video' | 'html';
    content?: any;
    settings?: any;
}
export interface EmailContent {
    html: string;
    blocks: EmailBlock[];
    settings?: any;
}
export interface ToolbarConfig {
    showBlocksButton?: boolean;
    showSettingsButton?: boolean;
    showSaveButton?: boolean;
    showLoadButton?: boolean;
    showExportButton?: boolean;
    showDeviceSelector?: boolean;
    showViewModeToggle?: boolean;
    showClearAllButton?: boolean;
}
export interface EditorConfig {
    theme?: 'light' | 'dark';
    showBlockPanel?: boolean;
    showPropertiesPanel?: boolean;
    emailWidth?: string;
    backgroundColor?: string;
    fontFamily?: string;
    height?: string;
    minHeight?: string;
    maxHeight?: string;
    toolbar?: ToolbarConfig;
}
export declare class WysiwygEditorComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
    private sanitizer;
    private cdr;
    emailCanvas: ElementRef<HTMLDivElement>;
    config: EditorConfig;
    disabled: boolean;
    set blocks(value: EmailBlock[]);
    set emailSettings(value: any);
    set initialContent(value: EmailContent);
    contentChange: EventEmitter<EmailContent>;
    blockSelected: EventEmitter<EmailBlock>;
    blocksChange: EventEmitter<EmailBlock[]>;
    emailBlocks: EmailBlock[];
    selectedBlock: EmailBlock | null;
    selectedBlockIndex: number;
    content: string;
    showBlockPanel: boolean;
    showPropertiesPanel: boolean;
    activeTab: 'blocks' | 'settings';
    activePropertiesTab: 'content' | 'style' | 'advanced';
    isDragging: boolean;
    devicePreview: 'mobile' | 'tablet' | 'desktop';
    viewMode: 'edit' | 'preview';
    isMobile: boolean;
    showExportDropdown: boolean;
    private resizeListener;
    private _emailSettings;
    get emailSettings(): any;
    availableBlocks: {
        type: string;
        icon: string;
        label: string;
        description: string;
    }[];
    blockTemplates: {
        [key: string]: any;
    };
    currentBlockProperties: any;
    onChange: (value: string) => void;
    onTouched: () => void;
    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
    ngOnInit(): void;
    ngOnDestroy(): void;
    ngAfterViewInit(): void;
    private checkMobileView;
    get toolbarConfig(): ToolbarConfig;
    private initializeConfig;
    private loadDefaultTemplate;
    private generateId;
    onDragStarted(): void;
    onDragEnded(): void;
    drop(event: CdkDragDrop<EmailBlock[]>): void;
    addBlock(blockType: string): void;
    duplicateBlock(block: EmailBlock, index: number): void;
    deleteBlock(index: number): void;
    moveBlockUp(index: number): void;
    moveBlockDown(index: number): void;
    selectBlock(block: EmailBlock | null, index: number): void;
    updateEmailSetting(property: string, value: any): void;
    renderEmail(): void;
    private generateEmailHtml;
    private formatUrlForEmail;
    private createBulletproofButton;
    renderBlock(block: EmailBlock): string;
    toggleBlockPanel(): void;
    togglePropertiesPanel(): void;
    showSettingsTab(): void;
    closeMobilePanel(): void;
    closePropertiesPanel(): void;
    setDevicePreview(device: 'mobile' | 'tablet' | 'desktop'): void;
    setViewMode(mode: 'edit' | 'preview'): void;
    updatePreviewSize(): void;
    getDeviceWidth(): string;
    toggleExportDropdown(): void;
    exportToClipboard(): void;
    exportToFile(): void;
    exportHtml(): void;
    private showNotification;
    clearAll(): void;
    getBlocks(): EmailBlock[];
    setBlocks(blocks: EmailBlock[]): void;
    addBlockAtIndex(block: EmailBlock, index: number): void;
    removeBlockAtIndex(index: number): void;
    updateBlockAtIndex(index: number, block: EmailBlock): void;
    saveTemplate(): void;
    loadTemplate(): void;
    writeValue(value: string): void;
    private parseHtmlToBlocks;
    private parseBlockFromHtml;
    registerOnChange(fn: (value: string) => void): void;
    registerOnTouched(fn: () => void): void;
    setDisabledState(isDisabled: boolean): void;
    private emitChange;
    getEmailContent(): EmailContent;
    getSafeHtml(html: string): SafeHtml;
    getAdvancedStyles(content: any): string;
    getAdvancedAttributes(content: any): string;
    getWrapperClasses(content: any): string;
    shouldRenderBlock(content: any): boolean;
    getBlockIcon(type: string): string;
    getBlockLabel(type: string): string;
    updateColumnsCount(newCount: number): void;
    updateColumnContent(columnIndex: number, content: string): void;
    updateSocialPlatform(platformIndex: number, property: string, value: any): void;
    updateBlockProperty(property: string, value: any): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<WysiwygEditorComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<WysiwygEditorComponent, "wysiwyg-editor", never, { "config": "config"; "disabled": "disabled"; "blocks": "blocks"; "emailSettings": "emailSettings"; "initialContent": "initialContent"; }, { "contentChange": "contentChange"; "blockSelected": "blockSelected"; "blocksChange": "blocksChange"; }, never, never, true>;
}