Editor HTTP API Configuration

📘

Note

This document describes the Promise-based version of the API.

This document describes the AppApiConfigI interface which defines the HTTP API methods required by the Claspo Editor. Developers integrating the editor into their applications should implement these methods to enable proper functionality.

Interface Overview

The AppApiConfigI interface provides methods for various operations including:

• Widget management (appearances, revisions, lists)
• Contact field operations
• File operations
• Image handling (upload, library access)
• Prize pool management
• Translations

API Method Specifications

Widget Operations

getWidgetAppearances

Retrieves all appearances for a specific widget variant.

createWidgetRevision

Creates a new revision of a widget.

getWidgetsList

Retrieves a list of widgets based on provided parameters.

File Operations

getFilesFromCommonDir

Retrieves files from a common directory based on type.

removeFile

Deletes a file by URL for a specific widget.

Image Operations

getImageLibrary

Retrieves images from the image library based on parameters.

getUserImages

Retrieves user-uploaded images based on parameters.

uploadImage

Uploads an image file for a specific widget.

uploadImageByUrl

Uploads an image by URL for a specific widget.

copyImageByUrl

Copies an image from URL for a specific widget.

Prize Pool Operations

createWidgetPrizePool

Creates a new prize pool for a widget.

updateWidgetPrizeOptions

Updates prize options for a specific prize pool.

Translation Operations

translate

Translates text based on provided parameters.

Contact Operations

getContactMappingOptions

Retrieves available contact mapping options.

getContactMappingOptions: () => Promise<ContactMappingOptionI[]>;

Example:
See Contact Fields Mapping

getContactFieldGroups (Optional)

Retrieves contact field groups.

createContactFieldsGroup (Optional)

Creates a new contact fields group.

createContactField (Optional)

Creates a new contact field.

Example

Here's a simplified example of how to implement and provide the API configuration to the editor:

import { AppApiConfigI, AppConfigI } from '@claspo-editor';
import { ContactMappingService } from './services/contact-mapping.service';

// Create the contact mapping service
const contactMappingService = new ContactMappingService();

// Define API configuration as a constant
const apiConfig: AppApiConfigI = {
  // Widget operations
  getWidgetAppearances: (widgetId: number, variantId: number): Promise<EsFormAppearanceI[]> => {
    return fetch(`https://api.example.com/widgets/${widgetId}/variants/${variantId}/appearances`)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error ${response.status}`);
        }
        return response.json();
      });
  },
  
  // Contact operations - using the service
  getContactMappingOptions: contactMappingService.getContactMappingOptions, 
  
  // Additional methods would follow the same pattern
};

// Full editor configuration
const editorConfig: AppConfigI = {
  // ... other required config
  api: apiConfig,
  useContactFields: true
};

Notes

1. All API methods should return native JavaScript Promise objects.
2. Error handling should be properly implemented on the service side.
3. See separate documentation for specific feature implementations:
   • Contact Fields Mapping