@elementor/editor-global-classes 3.33.0-171 → 3.33.0-173

package/dist/index.mjs

@@ -6,7 +6,7 @@ import {
   registerStyleProviderToColors
 } from "@elementor/editor-editing-panel";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
-import { stylesRepository } from "@elementor/editor-styles-repository";
+import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
 import { __registerSlice as registerSlice } from "@elementor/store";
 
 // src/components/class-manager/class-manager-button.tsx
@@ -2094,6 +2094,173 @@ function PopulateStore() {
   return null;
 }
 
+// src/mcp-integration/index.ts
+import { getMCPByDomain } from "@elementor/editor-mcp";
+
+// src/mcp-integration/mcp-apply-unapply-global-classes.ts
+import { doApplyClasses, doGetAppliedClasses, doUnapplyClass } from "@elementor/editor-editing-panel";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { z } from "@elementor/schema";
+function initMcpApplyUnapplyGlobalClasses(server) {
+  server.addTool({
+    name: "list-all-global-classes",
+    description: `List all classes applied to a specific element
+
+## When to use this tool:
+- When a user requests to see which classes or global classes exists.
+- When you need the list of global classes to allow the user to select from.
+
+## Prerequisites:
+- Ensure you have the correct element ID for which you want to list the applied classes.
+`,
+    outputSchema: {
+      appliedClasses: z.array(
+        z.object({
+          id: z.string().describe("The ID of the class"),
+          label: z.string().describe("The label of the class")
+        })
+      )
+    },
+    handler: async () => {
+      const globalClassesProvider = stylesRepository.getProviderByKey("global-classes");
+      if (!globalClassesProvider) {
+        throw new Error("Global classes provider not found");
+      }
+      const result = [];
+      globalClassesProvider.actions.all().forEach((style) => {
+        const { id: id2, label } = style;
+        result.push({ id: id2, label });
+      });
+      return { appliedClasses: result };
+    }
+  });
+  server.addTool({
+    schema: {
+      classId: z.string().describe("The ID of the class to apply"),
+      elementId: z.string().describe("The ID of the element to which the class will be applied")
+    },
+    name: "apply-global-class",
+    description: `Apply a global class to the current element
+
+## When to use this tool:
+- When a user requests to apply a global class or a class to an element in the Elementor editor.
+- When you need to add a specific class to an element's applied classes.
+
+## Prerequisites:
+- Ensure you have the most up-to-date list of classes applied to the element to avoid duplicates. You can use the "list-applied-classes" tool to fetch the current classes.
+- Make sure you have the correct class ID that you want to apply.`,
+    handler: async (params) => {
+      const { classId, elementId } = params;
+      const appliedClasses = doGetAppliedClasses(elementId);
+      doApplyClasses(elementId, [...appliedClasses, classId]);
+      return `Class ${classId} applied to element ${elementId} successfully.`;
+    }
+  });
+  server.addTool({
+    name: "unapply-global-class",
+    schema: {
+      classId: z.string().describe("The ID of the class to unapply"),
+      elementId: z.string().describe("The ID of the element from which the class will be unapplied")
+    },
+    description: `Unapply a (global) class from the current element
+
+## When to use this tool:
+- When a user requests to unapply a global class or a class from an element in the Elementor editor.
+- When you need to remove a specific class from an element's applied classes.
+
+## Prerequisites:
+- Ensure you have the most up-to-date list of classes applied to the element to avoid errors. You can use the "list-global-classes" tool to fetch the all classes applied to all elements.
+- Make sure you have the correct class ID that you want to unapply.
+
+<note>
+If the user want to unapply a class by it's name and not ID, please use the "list-global-classes" tool to get the class ID from the name first.
+</note>
+`,
+    handler: async (params) => {
+      const { classId, elementId } = params;
+      const ok = doUnapplyClass(elementId, classId);
+      if (!ok) {
+        throw new Error(`Class ${classId} is not applied to element ${elementId}, cannot unapply it.`);
+      }
+      return `Class ${classId} unapplied from element ${elementId} successfully.`;
+    }
+  });
+}
+
+// src/mcp-integration/mcp-get-global-class-usages.ts
+import { z as z2 } from "@elementor/schema";
+function initMcpApplyGetGlobalClassUsages(reg) {
+  const { addTool } = reg;
+  const globalClassesUsageSchema = {
+    usages: z2.array(
+      z2.object({
+        classId: z2.string().describe(
+          'The ID of the class, not visible to the user. To retreive the name of the class, use the "list-global-classes" tool'
+        ),
+        usages: z2.array(
+          z2.object({
+            pageId: z2.string().describe("The ID of the page where the class is used"),
+            title: z2.string().describe("The title of the page where the class is used"),
+            total: z2.number().describe("The number of times the class is used on this page"),
+            elements: z2.array(z2.string()).describe("List of element IDs using this class on the page")
+          })
+        )
+      })
+    )
+  };
+  addTool({
+    name: "get-global-class-usages",
+    description: `Retreive the usage details of global classes within the Elementor editor, accross all pages.
+
+## Prequisites:
+- Use "list-global-classes" tool to be able to match class IDs to class names/labels.
+
+## When to use this tool:
+- When a user requests to see where a specific global class is being used accross the site.
+- When you need to manage or clean up unused global classes.
+- Before deleting a global class, to ensure it is not in use in any other pages.
+`,
+    outputSchema: globalClassesUsageSchema,
+    handler: async () => {
+      const data = await fetchCssClassUsage();
+      const result = {
+        usages: []
+      };
+      Object.entries(data).forEach(
+        ([classId, usageDetails]) => {
+          const newEntry = {
+            classId,
+            usages: []
+          };
+          if (typeof usageDetails !== "number") {
+            const { content } = usageDetails;
+            content.forEach((detail) => {
+              newEntry.usages.push({
+                pageId: String(detail.pageId),
+                title: detail.title,
+                total: detail.total,
+                elements: detail.elements
+              });
+            });
+            result.usages.push(newEntry);
+          }
+        }
+      );
+      return result;
+    }
+  });
+}
+
+// src/mcp-integration/index.ts
+var initMcpIntegration = () => {
+  const reg = getMCPByDomain("element_classes");
+  reg.setMCPDescription(
+    "Tools for managing and applying Global CSS classes to elements within the Elementor editor."
+  );
+  initMcpApplyUnapplyGlobalClasses(reg);
+  initMcpApplyGetGlobalClassUsages(reg);
+};
+
 // src/sync-with-document.tsx
 import { useEffect as useEffect4 } from "react";
 import { __privateListenTo as listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
@@ -2148,7 +2315,7 @@ function SyncWithDocumentSave() {
 function init() {
   registerSlice(slice);
   registerPanel(panel);
-  stylesRepository.register(globalClassesStylesProvider);
+  stylesRepository2.register(globalClassesStylesProvider);
   injectIntoLogic({
     id: "global-classes-populate-store",
     component: PopulateStore
@@ -2169,6 +2336,7 @@ function init() {
     name: "global",
     getThemeColor: (theme) => theme.palette.global.dark
   });
+  initMcpIntegration();
 }
 export {
   init