dragble-angular-editor 1.0.1

package/dist/index.js

@@ -0,0 +1,649 @@
+import * as i0 from '@angular/core';
+import { Output, Input, Component, EventEmitter, NgModule } from '@angular/core';
+export * from 'dragble-types';
+
+/**
+ * Dragble Editor Angular Component
+ *
+ * An Angular wrapper for the Dragble Editor SDK.
+ */
+const SDK_CDN_URL = "https://sdk.dragble.com/latest/dragble-sdk.min.js";
+// Map of URL -> Promise for caching SDK loads per URL
+const sdkLoadPromises = new Map();
+/**
+ * Get the SDK URL to use.
+ * @param customUrl - Optional custom SDK URL
+ * @returns The SDK URL to load
+ */
+function getSDKUrl(customUrl, sdkVersion) {
+    if (customUrl && sdkVersion !== undefined) {
+        console.warn("[DragbleEditor] sdkVersion is ignored when sdkUrl is provided.");
+    }
+    return customUrl ?? `https://sdk.dragble.com/${sdkVersion ?? "latest"}/dragble-sdk.min.js`;
+}
+/**
+ * Create an SDK module from the global dragble object.
+ */
+function createSDKModuleFromGlobal() {
+    return {
+        dragble: window.dragble,
+        createEditor: (config) => {
+            const instance = new window.dragble.constructor();
+            instance.init(config);
+            return instance;
+        },
+        DragbleSDK: window.dragble.constructor,
+    };
+}
+/**
+ * Load the SDK from a URL.
+ * Supports custom SDK URLs for enterprise self-hosted or specific versions.
+ * @param customUrl - Optional custom SDK URL
+ */
+function loadSDK(customUrl) {
+    const sdkUrl = getSDKUrl(customUrl);
+    // Check cache for this specific URL
+    const cachedPromise = sdkLoadPromises.get(sdkUrl);
+    if (cachedPromise)
+        return cachedPromise;
+    // Check if already loaded globally (only for default URL to avoid conflicts)
+    if (sdkUrl === SDK_CDN_URL && typeof window !== "undefined" && window.dragble) {
+        return Promise.resolve(createSDKModuleFromGlobal());
+    }
+    return loadSDKScript(sdkUrl);
+}
+/**
+ * Load the SDK script from a specific URL.
+ * Each unique URL is cached separately to support multiple SDK sources.
+ * @param sdkUrl - The SDK URL to load
+ */
+function loadSDKScript(sdkUrl) {
+    // Check cache for this specific URL
+    const cachedPromise = sdkLoadPromises.get(sdkUrl);
+    if (cachedPromise)
+        return cachedPromise;
+    const loadPromise = new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = sdkUrl;
+        script.async = true;
+        script.onload = () => {
+            if (window.dragble) {
+                // Resolve with SDK module interface
+                resolve(createSDKModuleFromGlobal());
+            }
+            else {
+                sdkLoadPromises.delete(sdkUrl);
+                reject(new Error("Failed to load Dragble SDK - createEditor not found"));
+            }
+        };
+        script.onerror = () => {
+            sdkLoadPromises.delete(sdkUrl);
+            reject(new Error(`Failed to load Dragble SDK from ${sdkUrl}`));
+        };
+        document.head.appendChild(script);
+    });
+    // Cache the promise for this URL
+    sdkLoadPromises.set(sdkUrl, loadPromise);
+    return loadPromise;
+}
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * DragbleEditorComponent
+ *
+ * @example
+ * ```html
+ * <dragble-editor
+ *   editorKey="your-editor-key"
+ *   editorMode="email"
+ *   (ready)="onReady($event)"
+ *   (change)="onChange($event)"
+ * ></dragble-editor>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * import { Component, ViewChild } from '@angular/core';
+ * import { DragbleEditorComponent } from '@dragble/angular-editor';
+ *
+ * @Component({
+ *   selector: 'app-editor',
+ *   template: `
+ *     <dragble-editor
+ *       #editor
+ *       editorKey="your-editor-key"
+ *       (ready)="onReady($event)"
+ *     ></dragble-editor>
+ *     <button (click)="handleSave()">Save</button>
+ *   `
+ * })
+ * export class EditorComponent {
+ *   @ViewChild('editor') editor!: DragbleEditorComponent;
+ *
+ *   onReady(sdk: DragbleSDK) {
+ *     console.log('Editor ready!', sdk);
+ *   }
+ *
+ *   handleSave() {
+ *     this.editor.saveDesign((design) => {
+ *       console.log('Design:', design);
+ *     });
+ *   }
+ * }
+ * ```
+ */
+class DragbleEditorComponent {
+    constructor() {
+        /** Editor mode (email, web, popup) */
+        this.editorMode = "email";
+        /** Height of the editor */
+        this.height = "600px";
+        /** Minimum height for the editor */
+        this.minHeight = "600px";
+        // ========================================================================
+        // Outputs
+        // ========================================================================
+        /** Emitted when the editor is ready */
+        this.ready = new EventEmitter();
+        /** Emitted when a design is loaded */
+        this.load = new EventEmitter();
+        /** Emitted when the design changes */
+        this.change = new EventEmitter();
+        /** Emitted when an error occurs */
+        this.error = new EventEmitter();
+        /** Emitted when a comment event occurs (create, edit, delete, resolve, reopen) */
+        this.commentAction = new EventEmitter();
+        // ========================================================================
+        // Internal State
+        // ========================================================================
+        this.containerId = `dragble-editor-${Math.random().toString(36).substr(2, 9)}`;
+        this.sdk = null;
+        this._isReady = false;
+    }
+    get isReady() {
+        return this._isReady;
+    }
+    get computedHeight() {
+        return typeof this.height === "number" ? `${this.height}px` : this.height;
+    }
+    get computedMinHeight() {
+        return typeof this.minHeight === "number"
+            ? `${this.minHeight}px`
+            : this.minHeight;
+    }
+    // ========================================================================
+    // Lifecycle
+    // ========================================================================
+    ngOnInit() {
+        // Initialization happens in ngAfterViewInit
+    }
+    ngAfterViewInit() {
+        this.initializeEditor();
+    }
+    ngOnChanges(changes) {
+        if (!this.sdk || !this._isReady)
+            return;
+        // Watch for design changes
+        if (changes["design"] && !changes["design"].firstChange) {
+            const newDesign = changes["design"].currentValue;
+            if (newDesign) {
+                this.sdk.loadDesign(newDesign);
+            }
+        }
+        // Watch for merge tags changes
+        if (changes["mergeTags"] && !changes["mergeTags"].firstChange) {
+            const newTags = changes["mergeTags"].currentValue;
+            if (newTags) {
+                this.sdk.setMergeTags(newTags);
+            }
+        }
+        // Watch for modules changes
+        if (changes["modules"] && !changes["modules"].firstChange) {
+            const newModules = changes["modules"].currentValue;
+            if (newModules) {
+                this.sdk.setModules(newModules);
+            }
+        }
+        // Watch for display conditions changes
+        if (changes["displayConditions"] &&
+            !changes["displayConditions"].firstChange) {
+            const newConditions = changes["displayConditions"].currentValue;
+            if (newConditions) {
+                this.sdk.setDisplayConditions(newConditions);
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.sdk) {
+            this.sdk.destroy();
+            this.sdk = null;
+        }
+    }
+    // ========================================================================
+    // Initialization
+    // ========================================================================
+    async initializeEditor() {
+        try {
+            const resolvedSdkUrl = getSDKUrl(this.sdkUrl, this.sdkVersion);
+            const { createEditor } = await loadSDK(resolvedSdkUrl);
+            const config = this.buildConfig();
+            const sdk = createEditor(config);
+            this.sdk = sdk;
+            // Set up event listeners
+            sdk.addEventListener("editor:ready", () => {
+                this._isReady = true;
+                this.ready.emit(sdk);
+            });
+            sdk.addEventListener("design:loaded", (data) => {
+                this.load.emit(data);
+            });
+            sdk.addEventListener("design:updated", (data) => {
+                this.change.emit(data);
+            });
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            console.error("Initialization error:", error.message);
+            this.error.emit(error);
+        }
+    }
+    buildConfig() {
+        const editorConfig = this.contentType === "module"
+            ? {
+                ...this.editor,
+                contentType: this.contentType,
+                minRows: 1,
+                maxRows: 1,
+            }
+            : this.editor;
+        // Build collaboration feature config
+        let featuresConfig = this.features;
+        if (this.collaboration !== undefined) {
+            const collaborationConfig = typeof this.collaboration === "object"
+                ? {
+                    ...this.collaboration,
+                    onComment: (action) => {
+                        this.commentAction.emit(action);
+                    },
+                }
+                : this.collaboration;
+            featuresConfig = {
+                ...featuresConfig,
+                collaboration: collaborationConfig,
+            };
+        }
+        // Build callbacks (merge Angular outputs with user-provided callbacks)
+        const callbacks = {
+            ...this.callbacks,
+        };
+        // Build nested options object
+        const editorOptions = {
+            ...(this.user !== undefined && { user: this.user }),
+            ...(this.locale !== undefined && { locale: this.locale }),
+            ...(this.translations !== undefined && {
+                translations: this.translations,
+            }),
+            ...(this.textDirection !== undefined && {
+                textDirection: this.textDirection,
+            }),
+            ...(this.language !== undefined && { language: this.language }),
+            height: this.height,
+            minHeight: this.minHeight,
+            ...(this.mergeTags !== undefined && { mergeTags: this.mergeTags }),
+            ...(this.specialLinks !== undefined && {
+                specialLinks: this.specialLinks,
+            }),
+            ...(this.modules !== undefined && { modules: this.modules }),
+            ...(this.displayConditions !== undefined && {
+                displayConditions: this.displayConditions,
+            }),
+            ...(this.appearance !== undefined && { appearance: this.appearance }),
+            ...(this.tools !== undefined && { tools: this.tools }),
+            ...(this.customTools !== undefined && { customTools: this.customTools }),
+            ...(this.fonts !== undefined && { fonts: this.fonts }),
+            ...(this.bodyValues !== undefined && { bodyValues: this.bodyValues }),
+            ...(this.header !== undefined && { header: this.header }),
+            ...(this.footer !== undefined && { footer: this.footer }),
+            ...(editorConfig !== undefined && { editor: editorConfig }),
+            ...(this.customCSS !== undefined && { customCSS: this.customCSS }),
+            ...(this.customJS !== undefined && { customJS: this.customJS }),
+            ...(featuresConfig !== undefined && { features: featuresConfig }),
+            ...(this.ai !== undefined && { ai: this.ai }),
+            ...this.options,
+        };
+        return {
+            containerId: this.containerId,
+            editorKey: this.editorKey,
+            ...(this.editorMode !== undefined && { editorMode: this.editorMode }),
+            ...(this.designMode !== undefined && { designMode: this.designMode }),
+            ...(this.design !== undefined && { design: this.design }),
+            ...(this.popup !== undefined && { popup: this.popup }),
+            ...(this.editorVersion !== undefined && {
+                editorVersion: this.editorVersion,
+            }),
+            ...(this.editorUrl !== undefined && { editorUrl: this.editorUrl }),
+            callbacks,
+            options: editorOptions,
+        };
+    }
+    // ========================================================================
+    // Public Methods - Full SDK pass-through
+    // ========================================================================
+    /** Get the underlying SDK instance */
+    getEditor() {
+        return this.sdk;
+    }
+    // Design methods
+    loadDesign(design, options) {
+        this.sdk?.loadDesign(design, options);
+    }
+    loadBlank() {
+        this.sdk?.loadBlank();
+    }
+    saveDesign(callback) {
+        this.sdk?.saveDesign(callback);
+    }
+    getDesign() {
+        return this.sdk?.getDesign();
+    }
+    // Export methods (async-only)
+    exportHtml(options) {
+        return this.sdk?.exportHtml(options);
+    }
+    exportPlainText() {
+        return this.sdk?.exportPlainText();
+    }
+    exportJson() {
+        return this.sdk?.exportJson();
+    }
+    exportImage(options) {
+        return this.sdk?.exportImage(options);
+    }
+    exportPdf(options) {
+        return this.sdk?.exportPdf(options);
+    }
+    exportZip(options) {
+        return this.sdk?.exportZip(options);
+    }
+    getPopupValues() {
+        return this.sdk?.getPopupValues();
+    }
+    // Merge tags
+    setMergeTags(config) {
+        this.sdk?.setMergeTags(config);
+    }
+    getMergeTags() {
+        return this.sdk?.getMergeTags();
+    }
+    // Special links
+    setSpecialLinks(config) {
+        this.sdk?.setSpecialLinks(config);
+    }
+    getSpecialLinks() {
+        return this.sdk?.getSpecialLinks();
+    }
+    // Modules
+    setModulesLoading(loading) {
+        this.sdk?.setModulesLoading(loading);
+    }
+    setModules(modules) {
+        this.sdk?.setModules(modules);
+    }
+    getModules() {
+        return this.sdk?.getModules();
+    }
+    // Fonts
+    setFonts(config) {
+        this.sdk?.setFonts(config);
+    }
+    getFonts() {
+        return this.sdk?.getFonts();
+    }
+    // Body values
+    setBodyValues(values) {
+        this.sdk?.setBodyValues(values);
+    }
+    getBodyValues() {
+        return this.sdk?.getBodyValues();
+    }
+    // Configuration
+    setOptions(options) {
+        this.sdk?.setOptions(options);
+    }
+    setToolsConfig(config) {
+        this.sdk?.setToolsConfig(config);
+    }
+    setEditorMode(mode) {
+        this.sdk?.setEditorMode(mode);
+    }
+    setEditorConfig(config) {
+        this.sdk?.setEditorConfig(config);
+    }
+    getEditorConfig() {
+        return this.sdk?.getEditorConfig();
+    }
+    setLocale(locale) {
+        this.sdk?.setLocale(locale);
+    }
+    setTextDirection(direction) {
+        this.sdk?.setTextDirection(direction);
+    }
+    setAppearance(config) {
+        this.sdk?.setAppearance(config);
+    }
+    setCustomCSS(css) {
+        this.sdk?.setCustomCSS(css);
+    }
+    setCustomJS(js) {
+        this.sdk?.setCustomJS(js);
+    }
+    // Multi-language
+    setLanguage(language) {
+        this.sdk?.setLanguage(language);
+    }
+    getLanguage() {
+        return this.sdk?.getLanguage();
+    }
+    // Undo/Redo
+    undo() {
+        this.sdk?.undo();
+    }
+    redo() {
+        this.sdk?.redo();
+    }
+    save() {
+        this.sdk?.save();
+    }
+    // Preview
+    showPreview(device) {
+        this.sdk?.showPreview(device);
+    }
+    hidePreview() {
+        this.sdk?.hidePreview();
+    }
+    // Tools
+    registerTool(config) {
+        return this.sdk?.registerTool(config);
+    }
+    unregisterTool(toolId) {
+        return this.sdk?.unregisterTool(toolId);
+    }
+    getTools() {
+        return this.sdk?.getTools();
+    }
+    // Display conditions
+    setDisplayConditions(config) {
+        this.sdk?.setDisplayConditions(config);
+    }
+    audit(optionsOrCallback, callback) {
+        if (typeof optionsOrCallback === "function") {
+            return this.sdk?.audit(optionsOrCallback);
+        }
+        if (callback) {
+            return this.sdk?.audit(optionsOrCallback, callback);
+        }
+        return this.sdk?.audit(optionsOrCallback);
+    }
+    // Collaboration
+    showComment(commentId) {
+        this.sdk?.showComment(commentId);
+    }
+    openCommentPanel(rowId) {
+        this.sdk?.openCommentPanel(rowId);
+    }
+    // Events
+    addEventListener(event, callback) {
+        return this.sdk?.addEventListener(event, callback);
+    }
+    removeEventListener(event, callback) {
+        this.sdk?.removeEventListener(event, callback);
+    }
+    // Advanced
+    registerColumns(cells) {
+        this.sdk?.registerColumns(cells);
+    }
+    setBrandingColors(config) {
+        this.sdk?.setBrandingColors(config);
+    }
+    // Custom widgets
+    createWidget(config) {
+        return this.sdk?.createWidget(config);
+    }
+    removeWidget(widgetName) {
+        return this.sdk?.removeWidget(widgetName);
+    }
+    // Undo/Redo state
+    canUndo() {
+        return this.sdk?.canUndo();
+    }
+    canRedo() {
+        return this.sdk?.canRedo();
+    }
+    // Tabs
+    updateTabs(tabs) {
+        this.sdk?.updateTabs(tabs);
+    }
+}
+DragbleEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragbleEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DragbleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DragbleEditorComponent, isStandalone: true, selector: "dragble-editor", inputs: { editorKey: "editorKey", design: "design", editorMode: "editorMode", popup: "popup", contentType: "contentType", ai: "ai", locale: "locale", translations: "translations", textDirection: "textDirection", language: "language", appearance: "appearance", tools: "tools", customTools: "customTools", features: "features", mergeTags: "mergeTags", specialLinks: "specialLinks", modules: "modules", displayConditions: "displayConditions", editor: "editor", fonts: "fonts", bodyValues: "bodyValues", header: "header", footer: "footer", customCSS: "customCSS", customJS: "customJS", height: "height", minHeight: "minHeight", options: "options", callbacks: "callbacks", sdkUrl: "sdkUrl", sdkVersion: "sdkVersion", editorVersion: "editorVersion", editorUrl: "editorUrl", collaboration: "collaboration", user: "user", designMode: "designMode" }, outputs: { ready: "ready", load: "load", change: "change", error: "error", commentAction: "commentAction" }, usesOnChanges: true, ngImport: i0, template: `<div
+    #container
+    [id]="containerId"
+    [style.width]="'100%'"
+    [style.height]="computedHeight"
+    [style.minHeight]="computedMinHeight"
+  ></div>`, isInline: true, styles: ["\n      :host {\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n    "] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragbleEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "dragble-editor", template: `<div
+    #container
+    [id]="containerId"
+    [style.width]="'100%'"
+    [style.height]="computedHeight"
+    [style.minHeight]="computedMinHeight"
+  ></div>`, standalone: true, styles: ["\n      :host {\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n    "] }]
+        }], propDecorators: { editorKey: [{
+                type: Input
+            }], design: [{
+                type: Input
+            }], editorMode: [{
+                type: Input
+            }], popup: [{
+                type: Input
+            }], contentType: [{
+                type: Input
+            }], ai: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], translations: [{
+                type: Input
+            }], textDirection: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], tools: [{
+                type: Input
+            }], customTools: [{
+                type: Input
+            }], features: [{
+                type: Input
+            }], mergeTags: [{
+                type: Input
+            }], specialLinks: [{
+                type: Input
+            }], modules: [{
+                type: Input
+            }], displayConditions: [{
+                type: Input
+            }], editor: [{
+                type: Input
+            }], fonts: [{
+                type: Input
+            }], bodyValues: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], customCSS: [{
+                type: Input
+            }], customJS: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], callbacks: [{
+                type: Input
+            }], sdkUrl: [{
+                type: Input
+            }], sdkVersion: [{
+                type: Input
+            }], editorVersion: [{
+                type: Input
+            }], editorUrl: [{
+                type: Input
+            }], collaboration: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }], designMode: [{
+                type: Input
+            }], ready: [{
+                type: Output
+            }], load: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], error: [{
+                type: Output
+            }], commentAction: [{
+                type: Output
+            }] } });
+
+/**
+ * Dragble Editor Angular Module
+ *
+ * This module is provided for backwards compatibility with non-standalone Angular apps.
+ * For Angular 14+ apps using standalone components, you can import DragbleEditorComponent directly.
+ */
+class DragbleEditorModule {
+}
+DragbleEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragbleEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DragbleEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DragbleEditorModule, imports: [DragbleEditorComponent], exports: [DragbleEditorComponent] });
+DragbleEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragbleEditorModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DragbleEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [DragbleEditorComponent],
+                    exports: [DragbleEditorComponent],
+                }]
+        }] });
+
+export { DragbleEditorComponent, DragbleEditorModule };
+//# sourceMappingURL=index.js.map