diff --git a/src/components/PermissionsMap.tsx b/src/components/PermissionsMap.tsx index c08300a..40d80dd 100644 --- a/src/components/PermissionsMap.tsx +++ b/src/components/PermissionsMap.tsx @@ -53,6 +53,7 @@ export const permissionsMap: PermissionsMap = { getAllComponents: { permissions: ['canAccessCanvas'] }, getComponentByName: { permissions: ['canAccessCanvas'] }, getComponentByNameAndGroup: { permissions: ['canAccessCanvas'] }, + searchComponents: { permissions: ['canAccessCanvas'] }, getInstanceCount: { permissions: ['canAccessCanvas'] }, getVariants: { permissions: ['canAccessCanvas'] }, getSelectedVariant: { permissions: ['canAccessCanvas'] }, diff --git a/src/designer-extension-typings/api.d.ts b/src/designer-extension-typings/api.d.ts index bb50cb9..260e6e9 100644 --- a/src/designer-extension-typings/api.d.ts +++ b/src/designer-extension-typings/api.d.ts @@ -185,6 +185,16 @@ interface WebflowApi { * ``` */ getComponentByName(a: string, b?: string): Promise; + /** + * Searches for Components by name + * @returns A Promise that resolves to an array or objects with information about matching Components, not the `Component` objects themselves. + * @example + * ```ts + * const heroes = await webflow.searchComponents({ q: 'Hero' }); + * console.log(heroes); + * ``` + */ + searchComponents(options: SearchComponentsOptions?): Promise> /** * Gets the number of instances of a component. * @returns A Promise that resolves to the number of instances of the component across the entire site. diff --git a/src/designer-extension-typings/components.d.ts b/src/designer-extension-typings/components.d.ts index 1d047df..422596c 100644 --- a/src/designer-extension-typings/components.d.ts +++ b/src/designer-extension-typings/components.d.ts @@ -80,3 +80,21 @@ interface Variant { name: string; isSelected: boolean; } + +interface SearchComponentsOptions { + /** Fuzzy search query matching Component panel search behavior */ + q?: string; +} +interface ComponentLibrary { + name: string; + id: string; +} +interface ComponentSearchResult { + id: string; + name: string; + group: string; + description: string; + instances: number; + canEdit: boolean; + library: ComponentLibrary | null; +} diff --git a/src/examples/components.ts b/src/examples/components.ts index 1576f22..66a44bb 100644 --- a/src/examples/components.ts +++ b/src/examples/components.ts @@ -64,6 +64,11 @@ export const Components = { console.log(marketingHero.id); }, + searchComponents: async () => { + const heroes = await webflow.searchComponents({ q: 'Hero' }); + console.log(heroes); + }, + getInstanceCount: async () => { // Audit component usage across the site const components = await webflow.getAllComponents();