dragble-vue-editor 1.0.1

package/dist/index.d.ts

@@ -0,0 +1,776 @@
+import * as dragble_types from 'dragble-types';
+import { DragbleSDK, DesignJson, ModuleData, EditorMode, PopupConfig, AIConfig, TextDirection, AppearanceConfig, ToolsConfig, FeaturesConfig, MergeTag, MergeTagGroup, SpecialLink, SpecialLinkGroup, Module, DisplayConditionsConfig, Language, FontsConfig, DragbleToolConfig, EditorBehaviorConfig, EditorOptions, DragbleCallbacks, CollaborationFeaturesConfig, UserInfo, DragbleConfig, ExportHtmlOptions, ExportImageOptions, ExportImageData, ExportPdfOptions, ExportPdfData, ExportZipOptions, ExportZipData, MergeTagsConfig, SpecialLinksConfig, ViewMode, AuditCallback, AuditOptions, EditorEventName } from 'dragble-types';
+export * from 'dragble-types';
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+declare global {
+    interface Window {
+        dragble?: DragbleSDK;
+        createEditor?: () => DragbleSDK;
+    }
+}
+type EditorContentTypeValue = "module";
+/**
+ * DragbleEditor Vue 3 Component
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <DragbleEditor
+ *     ref="editorRef"
+ *     editor-key="your-editor-key"
+ *     editor-mode="email"
+ *     @ready="onReady"
+ *     @change="onChange"
+ *   />
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { DragbleEditor } from '@dragble/vue-editor';
+ *
+ * const editorRef = ref<InstanceType<typeof DragbleEditor>>();
+ *
+ * const onReady = (editor) => console.log('Ready!', editor);
+ * const onChange = (data) => console.log('Changed:', data);
+ *
+ * const handleSave = () => {
+ *   editorRef.value?.saveDesign((design) => {
+ *     console.log('Design:', design);
+ *   });
+ * };
+ * </script>
+ * ```
+ */
+declare const DragbleEditor: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Editor key for authentication (required) */
+    editorKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Initial design to load */
+    design: {
+        type: PropType<DesignJson | ModuleData | null>;
+        default: undefined;
+    };
+    /** Editor mode (email, web, popup) */
+    editorMode: {
+        type: PropType<EditorMode>;
+        default: string;
+    };
+    /** Popup builder configuration (only used when editorMode is 'popup') */
+    popup: {
+        type: PropType<PopupConfig>;
+        default: undefined;
+    };
+    /** Content type: 'module' for single-row module editor */
+    contentType: {
+        type: PropType<"module">;
+        default: undefined;
+    };
+    /** AI features configuration */
+    ai: {
+        type: PropType<AIConfig>;
+        default: undefined;
+    };
+    /** UI language/locale */
+    locale: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * Custom translation overrides keyed by locale code.
+     * Each locale maps translation keys to translated strings,
+     * allowing partial or full override of the editor's built-in UI strings.
+     *
+     * @example
+     * ```ts
+     * translations: {
+     *   'en-US': { 'toolbar.save': 'Save Draft' },
+     *   'fr-FR': { 'toolbar.save': 'Enregistrer le brouillon' },
+     * }
+     * ```
+     */
+    translations: {
+        type: PropType<Record<string, Record<string, string>>>;
+        default: undefined;
+    };
+    /** Text direction (ltr, rtl) */
+    textDirection: {
+        type: PropType<TextDirection>;
+        default: undefined;
+    };
+    /** Visual customization */
+    appearance: {
+        type: PropType<AppearanceConfig>;
+        default: undefined;
+    };
+    /** Enable/disable tools */
+    tools: {
+        type: PropType<ToolsConfig>;
+        default: undefined;
+    };
+    /** Feature toggles */
+    features: {
+        type: PropType<FeaturesConfig>;
+        default: undefined;
+    };
+    /** Merge tags for personalization */
+    mergeTags: {
+        type: PropType<(MergeTag | MergeTagGroup)[]>;
+        default: undefined;
+    };
+    /** Special link categories */
+    specialLinks: {
+        type: PropType<(SpecialLink | SpecialLinkGroup)[]>;
+        default: undefined;
+    };
+    /** Custom modules */
+    modules: {
+        type: PropType<Module[]>;
+        default: undefined;
+    };
+    /** Display conditions configuration */
+    displayConditions: {
+        type: PropType<DisplayConditionsConfig>;
+        default: undefined;
+    };
+    /** Template language for multi-language support */
+    language: {
+        type: PropType<Language>;
+        default: undefined;
+    };
+    /** Fonts configuration */
+    fonts: {
+        type: PropType<FontsConfig>;
+        default: undefined;
+    };
+    /** Custom tools to register (Dragble-style) */
+    customTools: {
+        type: PropType<DragbleToolConfig[]>;
+        default: undefined;
+    };
+    /** Default body/canvas values applied on init */
+    bodyValues: {
+        type: PropType<Record<string, unknown>>;
+        default: undefined;
+    };
+    /** Header row JSON to inject as a locked, non-editable row at the top */
+    header: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    /** Footer row JSON to inject as a locked, non-editable row at the bottom */
+    footer: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    /** Editor behavior configuration */
+    editor: {
+        type: PropType<EditorBehaviorConfig>;
+        default: undefined;
+    };
+    /** Custom CSS URLs or inline styles */
+    customCSS: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    /** Custom JS URLs or inline scripts */
+    customJS: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    /** Height of the editor */
+    height: {
+        type: PropType<string | number>;
+        default: string;
+    };
+    /** Minimum height for the editor */
+    minHeight: {
+        type: PropType<string | number>;
+        default: string;
+    };
+    /** Additional editor options (appearance, tools, features, AI, etc.) */
+    options: {
+        type: PropType<EditorOptions>;
+        default: undefined;
+    };
+    /**
+     * SDK callbacks (onModuleSave, onContentDialog, onPreview, onHeaderRowClick, etc.)
+     * Note: onReady/onLoad/onChange/onError are handled via Vue emits, not this prop.
+     */
+    callbacks: {
+        type: PropType<Omit<DragbleCallbacks, "onReady" | "onLoad" | "onChange" | "onError">>;
+        default: undefined;
+    };
+    /**
+     * Custom SDK URL for loading the Dragble SDK script.
+     * Use this for enterprise self-hosted SDK or specific versions.
+     * @default "https://sdk.dragble.com/latest/dragble-sdk.min.js"
+     */
+    sdkUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * SDK version to load from the Dragble CDN.
+     * @default "latest"
+     */
+    sdkVersion: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Editor version forwarded to the SDK init config. */
+    editorVersion: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Editor URL forwarded to the SDK init config. */
+    editorUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * Team collaboration features (commenting, reviewer role, etc.)
+     * Can be a simple boolean or detailed configuration object.
+     * Only works with editorMode 'email' or 'web'.
+     * @default false
+     */
+    collaboration: {
+        type: PropType<boolean | CollaborationFeaturesConfig>;
+        default: undefined;
+    };
+    /** User information for session identity and collaboration */
+    user: {
+        type: PropType<UserInfo>;
+        default: undefined;
+    };
+    /**
+     * Design mode for template permissions.
+     * - 'edit': Admin mode - shows "Row Actions" for setting row permissions
+     * - 'live': End-user mode - enforces row permissions
+     * @default 'live'
+     */
+    designMode: {
+        type: PropType<"edit" | "live">;
+        default: undefined;
+    };
+}>, {
+    containerId: string;
+    isReady: vue.Ref<boolean, boolean>;
+}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("ready" | "load" | "change" | "error" | "comment")[], "ready" | "load" | "change" | "error" | "comment", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Editor key for authentication (required) */
+    editorKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Initial design to load */
+    design: {
+        type: PropType<DesignJson | ModuleData | null>;
+        default: undefined;
+    };
+    /** Editor mode (email, web, popup) */
+    editorMode: {
+        type: PropType<EditorMode>;
+        default: string;
+    };
+    /** Popup builder configuration (only used when editorMode is 'popup') */
+    popup: {
+        type: PropType<PopupConfig>;
+        default: undefined;
+    };
+    /** Content type: 'module' for single-row module editor */
+    contentType: {
+        type: PropType<"module">;
+        default: undefined;
+    };
+    /** AI features configuration */
+    ai: {
+        type: PropType<AIConfig>;
+        default: undefined;
+    };
+    /** UI language/locale */
+    locale: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * Custom translation overrides keyed by locale code.
+     * Each locale maps translation keys to translated strings,
+     * allowing partial or full override of the editor's built-in UI strings.
+     *
+     * @example
+     * ```ts
+     * translations: {
+     *   'en-US': { 'toolbar.save': 'Save Draft' },
+     *   'fr-FR': { 'toolbar.save': 'Enregistrer le brouillon' },
+     * }
+     * ```
+     */
+    translations: {
+        type: PropType<Record<string, Record<string, string>>>;
+        default: undefined;
+    };
+    /** Text direction (ltr, rtl) */
+    textDirection: {
+        type: PropType<TextDirection>;
+        default: undefined;
+    };
+    /** Visual customization */
+    appearance: {
+        type: PropType<AppearanceConfig>;
+        default: undefined;
+    };
+    /** Enable/disable tools */
+    tools: {
+        type: PropType<ToolsConfig>;
+        default: undefined;
+    };
+    /** Feature toggles */
+    features: {
+        type: PropType<FeaturesConfig>;
+        default: undefined;
+    };
+    /** Merge tags for personalization */
+    mergeTags: {
+        type: PropType<(MergeTag | MergeTagGroup)[]>;
+        default: undefined;
+    };
+    /** Special link categories */
+    specialLinks: {
+        type: PropType<(SpecialLink | SpecialLinkGroup)[]>;
+        default: undefined;
+    };
+    /** Custom modules */
+    modules: {
+        type: PropType<Module[]>;
+        default: undefined;
+    };
+    /** Display conditions configuration */
+    displayConditions: {
+        type: PropType<DisplayConditionsConfig>;
+        default: undefined;
+    };
+    /** Template language for multi-language support */
+    language: {
+        type: PropType<Language>;
+        default: undefined;
+    };
+    /** Fonts configuration */
+    fonts: {
+        type: PropType<FontsConfig>;
+        default: undefined;
+    };
+    /** Custom tools to register (Dragble-style) */
+    customTools: {
+        type: PropType<DragbleToolConfig[]>;
+        default: undefined;
+    };
+    /** Default body/canvas values applied on init */
+    bodyValues: {
+        type: PropType<Record<string, unknown>>;
+        default: undefined;
+    };
+    /** Header row JSON to inject as a locked, non-editable row at the top */
+    header: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    /** Footer row JSON to inject as a locked, non-editable row at the bottom */
+    footer: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    /** Editor behavior configuration */
+    editor: {
+        type: PropType<EditorBehaviorConfig>;
+        default: undefined;
+    };
+    /** Custom CSS URLs or inline styles */
+    customCSS: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    /** Custom JS URLs or inline scripts */
+    customJS: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    /** Height of the editor */
+    height: {
+        type: PropType<string | number>;
+        default: string;
+    };
+    /** Minimum height for the editor */
+    minHeight: {
+        type: PropType<string | number>;
+        default: string;
+    };
+    /** Additional editor options (appearance, tools, features, AI, etc.) */
+    options: {
+        type: PropType<EditorOptions>;
+        default: undefined;
+    };
+    /**
+     * SDK callbacks (onModuleSave, onContentDialog, onPreview, onHeaderRowClick, etc.)
+     * Note: onReady/onLoad/onChange/onError are handled via Vue emits, not this prop.
+     */
+    callbacks: {
+        type: PropType<Omit<DragbleCallbacks, "onReady" | "onLoad" | "onChange" | "onError">>;
+        default: undefined;
+    };
+    /**
+     * Custom SDK URL for loading the Dragble SDK script.
+     * Use this for enterprise self-hosted SDK or specific versions.
+     * @default "https://sdk.dragble.com/latest/dragble-sdk.min.js"
+     */
+    sdkUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * SDK version to load from the Dragble CDN.
+     * @default "latest"
+     */
+    sdkVersion: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Editor version forwarded to the SDK init config. */
+    editorVersion: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Editor URL forwarded to the SDK init config. */
+    editorUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /**
+     * Team collaboration features (commenting, reviewer role, etc.)
+     * Can be a simple boolean or detailed configuration object.
+     * Only works with editorMode 'email' or 'web'.
+     * @default false
+     */
+    collaboration: {
+        type: PropType<boolean | CollaborationFeaturesConfig>;
+        default: undefined;
+    };
+    /** User information for session identity and collaboration */
+    user: {
+        type: PropType<UserInfo>;
+        default: undefined;
+    };
+    /**
+     * Design mode for template permissions.
+     * - 'edit': Admin mode - shows "Row Actions" for setting row permissions
+     * - 'live': End-user mode - enforces row permissions
+     * @default 'live'
+     */
+    designMode: {
+        type: PropType<"edit" | "live">;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+    onLoad?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+    onComment?: ((...args: any[]) => any) | undefined;
+}>, {
+    popup: PopupConfig;
+    design: DesignJson | ModuleData | null;
+    editorMode: EditorMode;
+    contentType: "module";
+    ai: AIConfig;
+    locale: string;
+    translations: Record<string, Record<string, string>>;
+    textDirection: TextDirection;
+    appearance: AppearanceConfig;
+    tools: ToolsConfig;
+    features: FeaturesConfig;
+    mergeTags: (MergeTag | MergeTagGroup)[];
+    specialLinks: (SpecialLink | SpecialLinkGroup)[];
+    modules: Module[];
+    displayConditions: DisplayConditionsConfig;
+    language: Language;
+    fonts: FontsConfig;
+    customTools: dragble_types.PexelizeToolConfig[];
+    bodyValues: Record<string, unknown>;
+    header: undefined;
+    footer: undefined;
+    editor: EditorBehaviorConfig;
+    customCSS: string[];
+    customJS: string[];
+    height: string | number;
+    minHeight: string | number;
+    options: EditorOptions;
+    callbacks: Omit<dragble_types.PexelizeCallbacks, "onReady" | "onLoad" | "onChange" | "onError">;
+    sdkUrl: string;
+    sdkVersion: string;
+    editorVersion: string;
+    editorUrl: string;
+    collaboration: boolean | CollaborationFeaturesConfig;
+    user: UserInfo;
+    designMode: "edit" | "live";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * Composable to use the Dragble SDK directly
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+  * import { useDragbleEditor } from 'dragble-vue-editor';
+ *
+ * const { editor, isReady, containerId } = useDragbleEditor({
+ *   editorKey: 'your-editor-key',
+ *   editorMode: 'email',
+ * });
+ *
+ * const handleExport = async () => {
+ *   if (isReady.value && editor.value) {
+ *     const html = await editor.value.exportHtml();
+ *     console.log(html);
+ *   }
+ * };
+ * </script>
+ *
+ * <template>
+ *   <div :id="containerId" style="height: 600px" />
+ *   <button @click="handleExport" :disabled="!isReady">Export</button>
+ * </template>
+ * ```
+ */
+declare function useDragbleEditor(config: Omit<DragbleConfig, "containerId">, sdkUrl?: string, sdkVersion?: string): {
+    editor: vue.Ref<{
+        init: (config: dragble_types.PexelizeConfig) => void;
+        destroy: () => void;
+        isReady: () => boolean;
+        loadDesign: (design: DesignJson, options?: {
+            preserveHistory?: boolean;
+        }) => void;
+        loadDesignAsync: (design: DesignJson, options?: {
+            preserveHistory?: boolean;
+        }) => Promise<void>;
+        loadBlank: (options?: dragble_types.BlankDesignOptions) => void;
+        saveDesign: (callback: (design: DesignJson) => void) => void;
+        getDesign: () => Promise<{
+            html: string;
+            json: DesignJson;
+        }>;
+        exportHtml: (options?: ExportHtmlOptions) => Promise<string>;
+        exportJson: () => Promise<DesignJson>;
+        exportPlainText: () => Promise<string>;
+        exportImage: (options?: ExportImageOptions) => Promise<ExportImageData>;
+        exportPdf: (options?: ExportPdfOptions) => Promise<ExportPdfData>;
+        exportZip: (options?: ExportZipOptions) => Promise<ExportZipData>;
+        getPopupValues: () => Promise<dragble_types.PopupValues | null>;
+        setMergeTags: (config: MergeTagsConfig) => void;
+        getMergeTags: () => Promise<(MergeTag | MergeTagGroup)[]>;
+        setSpecialLinks: (config: SpecialLinksConfig) => void;
+        getSpecialLinks: () => Promise<(SpecialLink | SpecialLinkGroup)[]>;
+        setFonts: (config: FontsConfig) => void;
+        getFonts: () => Promise<FontsConfig>;
+        setBodyValues: (values: Record<string, unknown>) => void;
+        getBodyValues: () => Promise<Record<string, unknown>>;
+        setOptions: (options: Partial<EditorOptions>) => void;
+        setAppearance: (config: AppearanceConfig) => void;
+        setToolsConfig: (toolsConfig: ToolsConfig) => void;
+        setEditorMode: (mode: EditorMode) => void;
+        setEditorConfig: (config: EditorBehaviorConfig) => void;
+        getEditorConfig: () => Promise<EditorBehaviorConfig>;
+        setLocale: (locale: dragble_types.LocaleCode, translations?: Record<string, string>) => void;
+        setTextDirection: (direction: TextDirection) => void;
+        getTextDirection: () => Promise<TextDirection>;
+        setCustomCSS: (css: string[]) => void;
+        setCustomJS: (js: string[]) => void;
+        setLanguage: (language: Language) => void;
+        getLanguage: () => Promise<Language | null>;
+        setBrandingColors: (config: {
+            colors?: string[] | Array<{
+                id: string;
+                label?: string;
+                colors: string[];
+                default?: boolean;
+            }>;
+            defaultColors?: boolean;
+        }) => void;
+        setModules: (modules: Module[]) => void;
+        setModulesLoading: (loading: boolean) => void;
+        getModules: () => Promise<Module[]>;
+        updateTabs: (tabs: Record<string, {
+            visible?: boolean;
+        }>) => void;
+        setDisplayConditions: (config: DisplayConditionsConfig) => void;
+        undo: () => void;
+        redo: () => void;
+        canUndo: () => Promise<boolean>;
+        canRedo: () => Promise<boolean>;
+        showPreview: (device?: ViewMode) => void;
+        hidePreview: () => void;
+        save: () => void;
+        registerTool: (config: dragble_types.PexelizeToolConfig | unknown) => Promise<void>;
+        unregisterTool: (toolId: string) => Promise<void>;
+        getTools: () => Promise<Array<{
+            id: string;
+            label: string;
+            baseToolType: string;
+        }>>;
+        createWidget: (config: dragble_types.PexelizeWidgetConfig | unknown) => Promise<void>;
+        removeWidget: (widgetName: string) => Promise<void>;
+        registerColumns: (cells: number[]) => void;
+        showComment: (commentId: string) => void;
+        openCommentPanel: (rowId: string) => void;
+        audit: {
+            (callback: AuditCallback): void;
+            (options: AuditOptions, callback: AuditCallback): void;
+            (options?: AuditOptions): Promise<dragble_types.AuditResult>;
+        };
+        uploadImage: (file: File, options?: {
+            folderId?: string;
+            altText?: string;
+            onProgress?: (progress: {
+                percent: number;
+                loaded: number;
+                total: number;
+                state: string;
+                error?: string;
+            }) => void;
+        }) => Promise<{
+            success: boolean;
+            url?: string;
+            error?: string;
+        }>;
+        listAssets: (options?: Record<string, unknown>) => Promise<{
+            assets: Array<Record<string, unknown>>;
+            total: number;
+        }>;
+        deleteAsset: (assetId: string) => Promise<{
+            success: boolean;
+            error?: string;
+        }>;
+        listAssetFolders: (parentId?: string) => Promise<Array<Record<string, unknown>>>;
+        createAssetFolder: (name: string, parentId?: string) => Promise<Record<string, unknown>>;
+        getStorageInfo: () => Promise<Record<string, unknown>>;
+        addEventListener: <T = unknown>(event: EditorEventName, callback: (data: T) => void) => () => void;
+        removeEventListener: <T = unknown>(event: EditorEventName, callback: (data: T) => void) => void;
+    } | null, DragbleSDK | {
+        init: (config: dragble_types.PexelizeConfig) => void;
+        destroy: () => void;
+        isReady: () => boolean;
+        loadDesign: (design: DesignJson, options?: {
+            preserveHistory?: boolean;
+        }) => void;
+        loadDesignAsync: (design: DesignJson, options?: {
+            preserveHistory?: boolean;
+        }) => Promise<void>;
+        loadBlank: (options?: dragble_types.BlankDesignOptions) => void;
+        saveDesign: (callback: (design: DesignJson) => void) => void;
+        getDesign: () => Promise<{
+            html: string;
+            json: DesignJson;
+        }>;
+        exportHtml: (options?: ExportHtmlOptions) => Promise<string>;
+        exportJson: () => Promise<DesignJson>;
+        exportPlainText: () => Promise<string>;
+        exportImage: (options?: ExportImageOptions) => Promise<ExportImageData>;
+        exportPdf: (options?: ExportPdfOptions) => Promise<ExportPdfData>;
+        exportZip: (options?: ExportZipOptions) => Promise<ExportZipData>;
+        getPopupValues: () => Promise<dragble_types.PopupValues | null>;
+        setMergeTags: (config: MergeTagsConfig) => void;
+        getMergeTags: () => Promise<(MergeTag | MergeTagGroup)[]>;
+        setSpecialLinks: (config: SpecialLinksConfig) => void;
+        getSpecialLinks: () => Promise<(SpecialLink | SpecialLinkGroup)[]>;
+        setFonts: (config: FontsConfig) => void;
+        getFonts: () => Promise<FontsConfig>;
+        setBodyValues: (values: Record<string, unknown>) => void;
+        getBodyValues: () => Promise<Record<string, unknown>>;
+        setOptions: (options: Partial<EditorOptions>) => void;
+        setAppearance: (config: AppearanceConfig) => void;
+        setToolsConfig: (toolsConfig: ToolsConfig) => void;
+        setEditorMode: (mode: EditorMode) => void;
+        setEditorConfig: (config: EditorBehaviorConfig) => void;
+        getEditorConfig: () => Promise<EditorBehaviorConfig>;
+        setLocale: (locale: dragble_types.LocaleCode, translations?: Record<string, string>) => void;
+        setTextDirection: (direction: TextDirection) => void;
+        getTextDirection: () => Promise<TextDirection>;
+        setCustomCSS: (css: string[]) => void;
+        setCustomJS: (js: string[]) => void;
+        setLanguage: (language: Language) => void;
+        getLanguage: () => Promise<Language | null>;
+        setBrandingColors: (config: {
+            colors?: string[] | Array<{
+                id: string;
+                label?: string;
+                colors: string[];
+                default?: boolean;
+            }>;
+            defaultColors?: boolean;
+        }) => void;
+        setModules: (modules: Module[]) => void;
+        setModulesLoading: (loading: boolean) => void;
+        getModules: () => Promise<Module[]>;
+        updateTabs: (tabs: Record<string, {
+            visible?: boolean;
+        }>) => void;
+        setDisplayConditions: (config: DisplayConditionsConfig) => void;
+        undo: () => void;
+        redo: () => void;
+        canUndo: () => Promise<boolean>;
+        canRedo: () => Promise<boolean>;
+        showPreview: (device?: ViewMode) => void;
+        hidePreview: () => void;
+        save: () => void;
+        registerTool: (config: dragble_types.PexelizeToolConfig | unknown) => Promise<void>;
+        unregisterTool: (toolId: string) => Promise<void>;
+        getTools: () => Promise<Array<{
+            id: string;
+            label: string;
+            baseToolType: string;
+        }>>;
+        createWidget: (config: dragble_types.PexelizeWidgetConfig | unknown) => Promise<void>;
+        removeWidget: (widgetName: string) => Promise<void>;
+        registerColumns: (cells: number[]) => void;
+        showComment: (commentId: string) => void;
+        openCommentPanel: (rowId: string) => void;
+        audit: {
+            (callback: AuditCallback): void;
+            (options: AuditOptions, callback: AuditCallback): void;
+            (options?: AuditOptions): Promise<dragble_types.AuditResult>;
+        };
+        uploadImage: (file: File, options?: {
+            folderId?: string;
+            altText?: string;
+            onProgress?: (progress: {
+                percent: number;
+                loaded: number;
+                total: number;
+                state: string;
+                error?: string;
+            }) => void;
+        }) => Promise<{
+            success: boolean;
+            url?: string;
+            error?: string;
+        }>;
+        listAssets: (options?: Record<string, unknown>) => Promise<{
+            assets: Array<Record<string, unknown>>;
+            total: number;
+        }>;
+        deleteAsset: (assetId: string) => Promise<{
+            success: boolean;
+            error?: string;
+        }>;
+        listAssetFolders: (parentId?: string) => Promise<Array<Record<string, unknown>>>;
+        createAssetFolder: (name: string, parentId?: string) => Promise<Record<string, unknown>>;
+        getStorageInfo: () => Promise<Record<string, unknown>>;
+        addEventListener: <T = unknown>(event: EditorEventName, callback: (data: T) => void) => () => void;
+        removeEventListener: <T = unknown>(event: EditorEventName, callback: (data: T) => void) => void;
+    } | null>;
+    isReady: vue.Ref<boolean, boolean>;
+    containerId: string;
+};
+
+export { DragbleEditor, DragbleEditor as default, useDragbleEditor };
+export type { EditorContentTypeValue };