DEVREL-2685: Get component by name

src/components/PermissionsMap.tsx

@@ -51,6 +51,8 @@ export const permissionsMap: PermissionsMap = {
     registerComponent: { permissions: ['canCreateComponents'] },
     unregisterComponent: { permissions: ['canCreateComponents'] },
     getAllComponents: { permissions: ['canAccessCanvas'] },
+    getComponentByName: { permissions: ['canAccessCanvas'] },
+    getComponentByNameAndGroup: { permissions: ['canAccessCanvas'] },
     enterComponent: { permissions: ['canModifyComponents'] },
     exitComponent: { permissions: ['canAccessCanvas'] },
   },

src/designer-extension-typings/api.d.ts

@@ -168,6 +168,22 @@ interface WebflowApi {
    * ```
    */
   getAllComponents(): Promise<Array<Component>>;
+  /**
+   * Retrieve a component based on its name and optionally its group.
+   * Component instance.
+   * @returns A Promise resolving to the component
+   * @example
+   * ```ts
+   * // Fetch a component by name only
+   * const heroSection = await webflow.getComponentByName('Hero');
+   * console.log(heroSection.id);
+   *
+   * // Fetch a component scoped to a group
+   * const marketingHero = await webflow.getComponentByName('Marketing', 'Hero');
+   * console.log(marketingHero.id);
+   * ```
+   */
+  getComponentByName(a: string, b?: string): Promise<Component>;
   /**
    * Focus the designer on a Component. When a component is in focus, all Globals pertain specifically to that
    * Component, not the entire Site.

src/examples/components.ts

@@ -52,6 +52,18 @@ export const Components = {
     }
   },
 
+  getComponentByName: async () => {
+    // Fetch a component by name only
+    const heroSection = await webflow.getComponentByName('Hero');
+    console.log(heroSection.id);
+  },
+
+  getComponentByNameAndGroup: async () => {
+    // Fetch a component scoped to a group
+    const marketingHero = await webflow.getComponentByName('Marketing', 'Hero');
+    console.log(marketingHero.id);
+  },
+
   createComponent: async () => {
     // Get selected element
     const rootElement = await webflow.getSelectedElement()