Skip to content

Feat/custom data panels #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rycoll merged 4 commits into from
Sep 17, 2025
Merged

Feat/custom data panels #10

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d63cad1
Add a nicer user-facing custom panel API
Tate-CC Sep 10, 2025
90eb88e
Remove position from array add options
Tate-CC Sep 12, 2025
5a2c1a2
Remove keepMarkdownAsHTML, add getPreviewUrl
Tate-CC Sep 17, 2025
2042e55
Add rewriteUrl option
Tate-CC Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 17 additions & 63 deletions src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,13 @@ import type {
UrlInput,
} from '@cloudcannon/configuration-types';

export interface CloseCustomDataPanelOptions {
parentId: string;
id: string;
}

export interface OpenCustomDataPanelOptions extends CloseCustomDataPanelOptions {
data: Record<string, any> | any[] | undefined;
position?: DOMRect;
export interface CreateCustomDataPanelOptions {
id?: string;
title: string;
inputConfig: Cascade & SnippetConfig;
allowFullDataCascade?: boolean;
onChange: (data?: Record<string, unknown> | unknown[]) => void;
data?: Record<string, unknown> | unknown[];
config?: Cascade;
position?: DOMRect;
}

type EventListenerParameters = Parameters<EventTarget['addEventListener']>;
Expand Down Expand Up @@ -89,20 +85,6 @@ export interface CloudCannonJavaScriptV0API {
*/
edit(slug: string, style: string | null, e: MouseEvent): void;

/**
* Opens a custom data panel for editing
* @param options - Configuration options for the panel
* @returns Promise that resolves when the panel is opened
*/
openCustomDataPanel(options: OpenCustomDataPanelOptions): Promise<void>;

/**
* Closes a custom data panel
* @param options - Configuration options for the panel to close
* @returns Promise that resolves when the panel is closed
*/
closeCustomDataPanel(options: CloseCustomDataPanelOptions): Promise<void>;

/**
* Uploads a file to the editor
* @param file - The file to upload
Expand Down Expand Up @@ -166,7 +148,7 @@ export interface CloudCannonJavaScriptV0API {
* @param options - Optional configuration for the value retrieval
* @returns Promise that resolves with the current value
*/
value(options?: { keepMarkdownAsHTML?: boolean }): Promise<string>;
value(options?: { rewriteURLs?: boolean }): Promise<string>;

/**
* Claims a lock on a file
Expand Down Expand Up @@ -231,11 +213,6 @@ export interface ArrayOptions {
export interface AddArrayItemOptions extends ArrayOptions {
/** The position to insert at (null for end) */
index: number | null;
/**
* The position to insert at (before or after)
* @default 'before'
*/
position?: 'before' | 'after';
/** The value to insert */
value: any;
/** The mouse event that triggered the addition */
Expand Down Expand Up @@ -264,17 +241,6 @@ export interface GetInputConfigOptions {
slug: string;
}

/**
* Options for getting the current value in the v2 API
*/
export interface ValueOptions {
/**
* CloudCannon works with HTML by default. Markdown is converted to HTML and back again while editing.
* If true, any markdown inputs will be returned as an HTML string instead of Markdown.
*/
keepMarkdownAsHTML?: boolean;
}

export interface FileNotFoundError extends Error {
message: 'File not found';
}
Expand All @@ -291,12 +257,10 @@ export interface CloudCannonJavaScriptV1APIFileContent {
* @throws {FileNotFoundError} If the file is not found
* @example
* ```javascript
* const value = await CloudCannon.content({
* keepMarkdownAsHTML: true,
* });
* const value = await CloudCannon.content();
* ```
*/
get(options?: ValueOptions): Promise<string>;
get(): Promise<string>;

/**
* Sets the body content of a file
Expand Down Expand Up @@ -326,12 +290,12 @@ export interface CloudCannonJavaScriptV1APIFileData {
* @returns Promise that resolves with the data of the file
* @example
* ```javascript
* const value = await CloudCannon.data({
* keepMarkdownAsHTML: true,
* });
* const value = await CloudCannon.data();
* ```
*/
get(options?: ValueOptions & { slug?: string }): Promise<Record<string, any> | any[] | undefined>;
get(options?: { slug?: string; rewriteUrls?: boolean }): Promise<
Record<string, any> | any[] | undefined
>;

/**
* Sets data for a specific field
Expand Down Expand Up @@ -591,20 +555,6 @@ export interface CloudCannonJavaScriptV1API {
*/
setLoading(loadingData: string | undefined): Promise<any>;

/**
* Opens a custom data panel for editing
* @param options - Configuration options for the panel
* @returns Promise that resolves when the panel is opened
*/
openCustomDataPanel(options: OpenCustomDataPanelOptions): Promise<void>;

/**
* Closes a custom data panel
* @param options - Configuration options for the panel to close
* @returns Promise that resolves when the panel is closed
*/
closeCustomDataPanel(options: CloseCustomDataPanelOptions): Promise<void>;

/**
* Uploads a file to the editor
* @param file - The file to upload
Expand Down Expand Up @@ -649,6 +599,10 @@ export interface CloudCannonJavaScriptV1API {
inputConfig?: RichTextInput;
}
): Promise<CloudCannonJavaScriptV1APITextEditableRegion>;

createCustomDataPanel(options: CreateCustomDataPanelOptions): Promise<void>;

getPreviewUrl(originalUrl: string, inputConfig?: Input): Promise<string>;
}

export type CloudCannonJavaScriptAPIVersions = 'v0' | 'v1';
Expand Down