diff --git a/src/components/PermissionsMap.tsx b/src/components/PermissionsMap.tsx index c08300a..77d007c 100644 --- a/src/components/PermissionsMap.tsx +++ b/src/components/PermissionsMap.tsx @@ -57,6 +57,7 @@ export const permissionsMap: PermissionsMap = { getVariants: { permissions: ['canAccessCanvas'] }, getSelectedVariant: { permissions: ['canAccessCanvas'] }, enterComponent: { permissions: ['canModifyComponents'] }, + setSelectedVariant: { permissions: ['canModifyComponents'] }, openCanvas: { permissions: ['canModifyComponents'] }, selectComponent: { permissions: ['canModifyComponents'] }, exitComponent: { permissions: ['canAccessCanvas'] }, diff --git a/src/designer-extension-typings/components.d.ts b/src/designer-extension-typings/components.d.ts index 1d047df..94ab52a 100644 --- a/src/designer-extension-typings/components.d.ts +++ b/src/designer-extension-typings/components.d.ts @@ -1,3 +1,12 @@ +interface SetSelectedVariantByName { + name: string; +} +interface SetSelectedVariantById { + id: string; +} + +type SetSelectedVariantOptions = SetSelectedVariantByName | SetSelectedVariantById; + interface Component { readonly [brand]: 'Component'; @@ -70,6 +79,24 @@ interface Component { * ``` */ getSelectedVariant(): Promise; + /** + * Selects the specified variant of a selected component when the component canvas is open. + * @returns A promise that resolves when the specified variant is selected. + * @example + * ```typescript + * interface SetSelectedVariantByName { + * name: string; + * } + * interface SetSelectedVariantById { + * id: string; + * } + * + * type SetSelectedVariantOptions = SetSelectedVariantByName | SetSelectedVariantById; + * + * setSelectedVariant(options: SetSelectedVariantOptions | string): Promise; + * ``` + */ + setSelectedVariant(options: SetSelectedVariantOptions | string): Promise; getRootElement(): Promise; } diff --git a/src/examples/components.ts b/src/examples/components.ts index 1576f22..c3c2a0a 100644 --- a/src/examples/components.ts +++ b/src/examples/components.ts @@ -109,6 +109,13 @@ export const Components = { */ }, + setSelectedVariant: async () => { + const heroComponent = await webflow.getComponentByName('Hero'); + if (heroComponent) { + await heroComponent.setSelectedVariant({ id: 'base' }); + } + }, + createComponent: async () => { // Get selected element const rootElement = await webflow.getSelectedElement()