@mdaemon/html-editor 1.0.1

package/dist/index.d.ts

@@ -0,0 +1,489 @@
+import { Editor } from '@tiptap/core';
+import { Extension } from '@tiptap/core';
+
+declare type BlurCallback = () => void;
+
+declare type ChangeCallback = (content: string) => void;
+
+export declare const CHAR_MAP: Array<{
+    category: string;
+    chars: Array<{
+        char: string;
+        name: string;
+    }>;
+}>;
+
+export declare class CharacterMap {
+    private options;
+    private overlay;
+    private dialog;
+    constructor(options: CharMapOptions);
+    open(): void;
+    close(): void;
+    private createDialog;
+    private renderChars;
+    destroy(): void;
+}
+
+/**
+ * Character map character
+ */
+export declare interface CharMapChar {
+    char: string;
+    name: string;
+    category?: string;
+}
+
+/**
+ * CharacterMap
+ * Special character picker dialog
+ */
+declare interface CharMapOptions {
+    onSelect: (char: string) => void;
+    trans: (key: string) => string;
+}
+
+/**
+ * Color picker color
+ */
+export declare interface ColorOption {
+    value: string;
+    label?: string;
+}
+
+declare type DirtyCallback = (dirty: boolean) => void;
+
+/**
+ * Dropbox choose options
+ */
+export declare interface DropboxChooseOptions {
+    success: (files: DropboxFile[]) => void;
+    cancel?: () => void;
+    linkType?: 'preview' | 'direct';
+    multiselect?: boolean;
+    extensions?: string[];
+}
+
+/**
+ * Dropbox file
+ */
+export declare interface DropboxFile {
+    name: string;
+    link: string;
+    bytes: number;
+    icon: string;
+    thumbnailLink?: string;
+    isDir: boolean;
+}
+
+/**
+ * Main editor configuration
+ * Compatible with TinyMCE configuration options
+ */
+export declare interface EditorConfig {
+    basicEditor?: boolean;
+    includeTemplates?: boolean;
+    templates?: Template[];
+    dropbox?: boolean;
+    images_upload_url?: string;
+    images_upload_credentials?: boolean;
+    images_upload_base_path?: string;
+    font_family_formats?: string;
+    font_size_formats?: string;
+    fontName?: string;
+    fontSize?: string;
+    directionality?: 'ltr' | 'rtl';
+    language?: string;
+    height?: string | number;
+    auto_focus?: string;
+    setFocus?: string;
+    skin?: 'oxide' | 'oxide-dark';
+    content_css?: 'default' | 'dark';
+    content_style?: string;
+    toolbar?: string;
+    toolbar_mode?: 'sliding' | 'floating' | 'wrap';
+    toolbar_sticky?: boolean;
+    menubar?: boolean;
+    contextmenu?: boolean | string;
+    quickbars_selection_toolbar?: string;
+    quickbars_image_toolbar?: boolean;
+    quickbars_insert_toolbar?: boolean;
+    browser_spellcheck?: boolean;
+    elementpath?: boolean;
+    entity_encoding?: 'raw' | 'named' | 'numeric';
+    valid_children?: string;
+    convert_unsafe_embeds?: boolean;
+    format_empty_lines?: boolean;
+    plugins?: string;
+    setup?: (editor: MDHTMLEditor) => void;
+}
+
+export declare interface EditorEventMap {
+    init: InitCallback;
+    dirty: DirtyCallback;
+    change: ChangeCallback;
+    focus: FocusCallback;
+    blur: BlurCallback;
+}
+
+export declare interface EditorEvents {
+    init?: InitCallback;
+    dirty?: DirtyCallback;
+    change?: ChangeCallback;
+    focus?: FocusCallback;
+    blur?: BlurCallback;
+}
+
+export declare const EMOJI_CATEGORIES: Array<{
+    category: string;
+    icon: string;
+    emojis: string[];
+}>;
+
+export declare class EmojiPicker {
+    private options;
+    private overlay;
+    private dialog;
+    private searchInput;
+    constructor(options: EmojiPickerOptions);
+    open(): void;
+    close(): void;
+    private createDialog;
+    private renderEmojis;
+    destroy(): void;
+}
+
+/**
+ * EmojiPicker
+ * Emoji selection dialog
+ */
+declare interface EmojiPickerOptions {
+    onSelect: (emoji: string) => void;
+    trans: (key: string) => string;
+}
+
+declare type FocusCallback = () => void;
+
+export declare const fontNames = "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva";
+
+/**
+ * Font option
+ */
+export declare interface FontOption {
+    label: string;
+    value: string;
+}
+
+export declare const FontSize: Extension<FontSizeOptions, any>;
+
+declare interface FontSizeOptions {
+    types: string[];
+}
+
+/**
+ * Get global file source resolver
+ */
+export declare function getGetFileSrc(): (path: string) => string;
+
+/**
+ * Get global translation function
+ */
+export declare function getTranslate(): TranslateFunction;
+
+/**
+ * Global configuration
+ */
+export declare interface GlobalConfig {
+    translate?: TranslateFunction;
+    getFileSrc?: (path: string) => string;
+}
+
+/**
+ * MDHTMLEditor - Main editor class
+ */
+export declare class HTMLEditor implements MDHTMLEditor {
+    readonly id: string;
+    readonly ui: {
+        registry: UIRegistry;
+    };
+    private tiptap;
+    private container;
+    private editorWrapper;
+    private toolbar;
+    private config;
+    private dirty;
+    private customButtons;
+    private eventListeners;
+    private changeTimeout;
+    constructor(container: HTMLElement, config?: EditorConfig);
+    private normalizeConfig;
+    private createEditor;
+    private buildExtensions;
+    private handleChange;
+    getContent(): string;
+    setContent(html: string): void;
+    insertContent(html: string): void;
+    execCommand(command: string, _ui?: boolean, value?: unknown): boolean;
+    isDirty(): boolean;
+    setDirty(state: boolean): void;
+    focus(): void;
+    hasFocus(): boolean;
+    on<K extends keyof EditorEventMap>(event: K, callback: EditorEventMap[K]): void;
+    off<K extends keyof EditorEventMap>(event: K, callback: EditorEventMap[K]): void;
+    fire<K extends keyof EditorEventMap>(event: K, ...args: Parameters<EditorEventMap[K]>): void;
+    destroy(): void;
+    getTipTap(): Editor | null;
+    /**
+     * Get the editor config
+     */
+    getConfig(): EditorConfig;
+    /**
+     * Check if the editor is in basic mode
+     */
+    isBasicEditor(): boolean;
+}
+
+/**
+ * Image upload handler
+ */
+export declare type ImageUploadHandler = (blobInfo: {
+    blob: () => Blob;
+    filename: () => string;
+}, progress: (percent: number) => void) => Promise<ImageUploadResult>;
+
+/**
+ * Image upload result
+ */
+export declare interface ImageUploadResult {
+    location: string;
+}
+
+/**
+ * Event callback types
+ */
+declare type InitCallback = (editor: MDHTMLEditor) => void;
+
+export declare const LineHeight: Extension<LineHeightOptions, any>;
+
+declare interface LineHeightOptions {
+    types: string[];
+    defaultLineHeight: string;
+}
+
+/**
+ * Main HTMLEditor class interface
+ */
+export declare interface MDHTMLEditor {
+    readonly id: string;
+    readonly ui: {
+        registry: UIRegistry;
+    };
+    getContent(): string;
+    setContent(html: string): void;
+    insertContent(html: string): void;
+    execCommand(command: string, ui?: boolean, value?: unknown): boolean;
+    isDirty(): boolean;
+    setDirty(state: boolean): void;
+    focus(): void;
+    hasFocus(): boolean;
+    on<K extends keyof EditorEventMap>(event: K, callback: EditorEventMap[K]): void;
+    off<K extends keyof EditorEventMap>(event: K, callback: EditorEventMap[K]): void;
+    fire<K extends keyof EditorEventMap>(event: K, ...args: Parameters<EditorEventMap[K]>): void;
+    destroy(): void;
+    getTipTap(): Editor | null;
+}
+
+export declare class SearchReplace {
+    private options;
+    private overlay;
+    private dialog;
+    private searchInput;
+    private replaceInput;
+    private currentResults;
+    private currentIndex;
+    private caseSensitive;
+    private wholeWord;
+    constructor(options: SearchReplaceOptions_2);
+    private get tiptap();
+    open(): void;
+    close(): void;
+    private createDialog;
+    private doSearch;
+    private updateCount;
+    private highlightCurrent;
+    private clearHighlights;
+    findNext(): void;
+    findPrevious(): void;
+    replaceCurrent(): void;
+    replaceAll(): void;
+    destroy(): void;
+}
+
+/**
+ * Search/Replace options
+ */
+export declare interface SearchReplaceOptions {
+    caseSensitive?: boolean;
+    wholeWord?: boolean;
+}
+
+declare interface SearchReplaceOptions_2 {
+    editor: HTMLEditor;
+    trans: (key: string) => string;
+}
+
+/**
+ * Set global file source resolver
+ */
+export declare function setGetFileSrc(fn: (path: string) => string): void;
+
+/**
+ * Set global translation function
+ */
+export declare function setTranslate(fn: TranslateFunction): void;
+
+/**
+ * Template object for email templates
+ */
+export declare interface Template {
+    id?: number | string;
+    title: string;
+    description?: string;
+    content: string;
+}
+
+export declare const TextDirection: Extension<TextDirectionOptions, any>;
+
+declare interface TextDirectionOptions {
+    types: string[];
+    defaultDirection: 'ltr' | 'rtl';
+}
+
+export declare class Toolbar {
+    private container;
+    private options;
+    private state;
+    private buttonElements;
+    private dropdowns;
+    private charMap;
+    private emojiPicker;
+    private searchReplace;
+    private updateInterval;
+    constructor(container: HTMLElement, options: ToolbarOptions);
+    private get tiptap();
+    private get trans();
+    private render;
+    private createButton;
+    private createActionButton;
+    private createCustomButton;
+    private createFontFamilyDropdown;
+    private createFontSizeDropdown;
+    private createLineHeightDropdown;
+    private createTemplateDropdown;
+    private createDropdown;
+    private createColorPicker;
+    private bindEvents;
+    private closeAllDropdowns;
+    private startStateUpdates;
+    private updateButtonStates;
+    private openImageDialog;
+    private openLinkDialog;
+    private openCharMap;
+    private openEmojiPicker;
+    private openSearchReplace;
+    private openSourceCode;
+    private openPreview;
+    private toggleFullscreen;
+    destroy(): void;
+}
+
+export declare interface ToolbarButtonAPI {
+    isEnabled: () => boolean;
+    setEnabled: (enabled: boolean) => void;
+    isActive: () => boolean;
+    setActive: (active: boolean) => void;
+}
+
+/**
+ * Custom toolbar button definition
+ */
+export declare interface ToolbarButtonSpec {
+    tooltip?: string;
+    icon?: string;
+    text?: string;
+    onSetup?: (api: ToolbarButtonAPI) => void | (() => void);
+    onAction?: (api: ToolbarButtonAPI) => void;
+    disabled?: boolean;
+}
+
+declare interface ToolbarOptions {
+    editor: HTMLEditor;
+    buttons: string;
+    mode: 'sliding' | 'floating' | 'wrap';
+    sticky: boolean;
+    customButtons: Map<string, ToolbarButtonSpec>;
+    config: EditorConfig;
+}
+
+/**
+ * Translation function type
+ */
+export declare type TranslateFunction = (key: string) => string;
+
+/**
+ * UI Registry for custom buttons (TinyMCE-compatible)
+ */
+export declare interface UIRegistry {
+    addButton: (name: string, spec: ToolbarButtonSpec) => void;
+    getButton: (name: string) => ToolbarButtonSpec | undefined;
+}
+
+export { }
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /**
+             * Set the font size
+             */
+            setFontSize: (size: string) => ReturnType;
+            /**
+             * Unset the font size
+             */
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        lineHeight: {
+            /**
+             * Set the line height
+             */
+            setLineHeight: (lineHeight: string) => ReturnType;
+            /**
+             * Unset the line height
+             */
+            unsetLineHeight: () => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        textDirection: {
+            /**
+             * Set the text direction
+             */
+            setTextDirection: (direction: 'ltr' | 'rtl' | 'auto') => ReturnType;
+            /**
+             * Unset the text direction
+             */
+            unsetTextDirection: () => ReturnType;
+        };
+    }
+}