Skip to main content

Plugin References

pb-editor-page-element#

export type PbEditorPageElementPlugin = Plugin & {
type: "pb-editor-page-element";
elementType: string;
toolbar?: {
// Element title in the toolbar.
title?: string | PbEditorPageElementTitle;
// Element group this element belongs to.
group?: string;
// A function to render an element preview in the toolbar.
preview?: ({ theme: PbTheme }) => ReactNode;
};
// Help link
help?: string;
// Whitelist elements that can accept this element (for drag&drop interaction)
target?: string[];
// Array of element settings plugin names.
settings?: Array<string | Array<string | any>>;
// A function to create an element data structure.
create: (
options: { [key: string]: any },
parent?: PbEditorElement
) => Omit<PbEditorElement, "id">;
// A function to render an element in the editor.
render: (params: { theme?: PbTheme; element: PbEditorElement; isActive: boolean }) => ReactNode;
// A function to check if an element can be deleted.
canDelete?: (params: { element: PbEditorElement }) => boolean;
// Executed when another element is dropped on the drop zones of current element.
onReceived?: (params: {
state?: EventActionHandlerCallableState;
meta: EventActionHandlerMeta;
source: PbEditorElement | DragObjectWithTypeWithTarget;
target: PbEditorElement;
position: number | null;
}) => EventActionHandlerActionCallableResponse;
// Executed when an immediate child element is deleted
onChildDeleted?: (params: {
element: PbEditorElement;
child: PbEditorElement;
}) => PbEditorElement | undefined;
// Executed after element was created
onCreate?: string;
// Render element preview (used when creating element screenshots; not all elements have a simple DOM representation
// so this callback is used to customize the look of the element in a PNG image)
renderElementPreview?: (params: {
element: PbEditorElement;
width: number;
height: number;
}) => ReactElement;
};

pb-render-page-element#

export type PbRenderElementPlugin = Plugin & {
type: "pb-render-page-element";
// Name of the pb-element plugin this render plugin is handling.
elementType: string;
// A function to render an element in the actual page.
render: (params: { theme: PbTheme; element: PbElement }) => React.ReactNode;
};

pb-editor-page-element-advanced-settings#

export type PbEditorPageElementAdvancedSettingsPlugin = Plugin & {
type: "pb-editor-page-element-advanced-settings";
elementType: string;
// A function to render the element settings in the editor sidebar.
render(params?: { Bind: BindComponent; data: any; submit: () => void }): ReactElement;
onSave?: (data: FormData) => FormData;
};

pb-editor-page-element-style-settings#

export type PbEditorPageElementStyleSettingsPlugin = Plugin & {
type: "pb-editor-page-element-style-settings";
render(params: { options?: any }): ReactElement;
elements?: boolean | string[];
};

pb-theme#

export type PbTheme = {
colors: { [key: string]: string };
elements: { [key: string]: any };
typography: {
[key: string]: {
label: string;
component: string | React.ComponentType<any>;
className: string;
};
};
};

pb-page-layout#

export type PbPageLayoutPlugin = Plugin & {
layout: PbPageLayout;
};
Last updated on by Ashutosh