DEVREL 2725 2726 current parent component (#28)

* DEVREL-2726: getParentComponent

* DEVREL-2725: getCurrentComponent

Author: tim-webflow

src/components/PermissionsMap.tsx

@@ -53,6 +53,7 @@ export const permissionsMap: PermissionsMap = {
     getAllComponents: { permissions: ['canAccessCanvas'] },
     getComponentByName: { permissions: ['canAccessCanvas'] },
     getComponentByNameAndGroup: { permissions: ['canAccessCanvas'] },
+    getCurrentComponent: { permissions: ['canAccessCanvas'] },
     searchComponents: { permissions: ['canAccessCanvas'] },
     getInstanceCount: { permissions: ['canAccessCanvas'] },
     getVariants: { permissions: ['canAccessCanvas'] },
@@ -97,6 +98,7 @@ export const permissionsMap: PermissionsMap = {
     getAllElements: { permissions: ['canAccessCanvas'] },
     getRootElement: { permissions: ['canAccessCanvas'] },
     remove: { permissions: ['canDesign'] },
+    getParentComponent: { permissions: ['canAccessCanvas'] },
   },
 
   // Image Elements

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

@@ -185,6 +185,21 @@ interface WebflowApi {
    * ```
    */
   getComponentByName(a: string, b?: string): Promise<Component>;
+  /**
+   * Retrieves the component that is currently being edited.
+   * @returns A Promise that resolves to the current component, or null if no component is currently being edited.
+   * @example
+   * ```ts
+   * const component = await webflow.getCurrentComponent();
+   * if (component) {
+   *   const name = await component.getName();
+   *   console.log(`Currently editing component: ${name}`);
+   * } else {
+   *   console.log('Not currently editing a component.');
+   * }
+   * ```
+   */
+  getCurrentComponent(): Promise<Component | null>;
   /**
    * 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.

src/designer-extension-typings/elements-generated.d.ts

@@ -22,6 +22,7 @@ interface WebflowElement {
   remove(this: {id: FullElementId}): Promise<null>;
   readonly before: InsertOrMoveElement;
   readonly after: InsertOrMoveElement;
+  getParentComponent(this: {id: FullElementId}): Promise<Component | null>;
 }
 
 interface CustomAttributes {

src/examples/components.ts

@@ -64,6 +64,23 @@ export const Components = {
     console.log(marketingHero.id);
   },
 
+  getCurrentComponent: async () => {
+    // Get the component currently being edited
+    const component = await webflow.getCurrentComponent();
+
+    if (component) {
+      const name = await component.getName();
+      console.log(`Currently editing component: ${name}`);
+
+      // Get all elements inside the active component
+      const root = await component.getRootElement();
+      const children = await root.getChildren();
+      console.log(`Root has ${children.length} child element(s)`);
+    } else {
+      console.log('Not currently editing a component.');
+    }
+  },
+
   searchComponents: async () => {
     const heroes = await webflow.searchComponents({ q: 'Hero' });
     console.log(heroes);

src/examples/elements.ts

@@ -79,6 +79,25 @@ export const Elements = {
       // Remove the selected element
       await el?.remove()
     },
+
+    getParentComponent: async () => {
+      // Get Selected Element
+      const element = await webflow.getSelectedElement()
+
+      if (element) {
+        // Get the component that directly contains the element
+        const parentComponent = await element.getParentComponent()
+
+        if (parentComponent) {
+          const name = await parentComponent.getName()
+          console.log(`Element is inside component: ${name}`)
+        } else {
+          console.log('Element is not inside a component.')
+        }
+      } else {
+        console.log('No element is currently selected.')
+      }
+    },
   },
 
   // Element Creation