@elementor/editor-global-classes 3.33.0-172 → 3.33.0-174

package/dist/index.js

@@ -36,9 +36,9 @@ module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository6 = require("@elementor/editor-styles-repository");
 var import_store24 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
@@ -2038,6 +2038,173 @@ function PopulateStore() {
   return null;
 }
 
+// src/mcp-integration/index.ts
+var import_editor_mcp = require("@elementor/editor-mcp");
+
+// src/mcp-integration/mcp-apply-unapply-global-classes.ts
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
+var import_schema = require("@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: import_schema.z.array(
+        import_schema.z.object({
+          id: import_schema.z.string().describe("The ID of the class"),
+          label: import_schema.z.string().describe("The label of the class")
+        })
+      )
+    },
+    handler: async () => {
+      const globalClassesProvider = import_editor_styles_repository5.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: import_schema.z.string().describe("The ID of the class to apply"),
+      elementId: import_schema.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 = (0, import_editor_editing_panel.doGetAppliedClasses)(elementId);
+      (0, import_editor_editing_panel.doApplyClasses)(elementId, [...appliedClasses, classId]);
+      return `Class ${classId} applied to element ${elementId} successfully.`;
+    }
+  });
+  server.addTool({
+    name: "unapply-global-class",
+    schema: {
+      classId: import_schema.z.string().describe("The ID of the class to unapply"),
+      elementId: import_schema.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 = (0, import_editor_editing_panel.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
+var import_schema2 = require("@elementor/schema");
+function initMcpApplyGetGlobalClassUsages(reg) {
+  const { addTool } = reg;
+  const globalClassesUsageSchema = {
+    usages: import_schema2.z.array(
+      import_schema2.z.object({
+        classId: import_schema2.z.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: import_schema2.z.array(
+          import_schema2.z.object({
+            pageId: import_schema2.z.string().describe("The ID of the page where the class is used"),
+            title: import_schema2.z.string().describe("The title of the page where the class is used"),
+            total: import_schema2.z.number().describe("The number of times the class is used on this page"),
+            elements: import_schema2.z.array(import_schema2.z.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 = (0, import_editor_mcp.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
 var import_react10 = require("react");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
@@ -2092,7 +2259,7 @@ function SyncWithDocumentSave() {
 function init() {
   (0, import_store24.__registerSlice)(slice);
   (0, import_editor_panels2.__registerPanel)(panel);
-  import_editor_styles_repository5.stylesRepository.register(globalClassesStylesProvider);
+  import_editor_styles_repository6.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
     id: "global-classes-populate-store",
     component: PopulateStore
@@ -2101,18 +2268,19 @@ function init() {
     id: "global-classes-sync-with-document",
     component: SyncWithDocumentSave
   });
-  (0, import_editor_editing_panel.injectIntoCssClassConvert)({
+  (0, import_editor_editing_panel2.injectIntoCssClassConvert)({
     id: "global-classes-convert-from-local-class",
     component: ConvertLocalClassToGlobalClass
   });
-  (0, import_editor_editing_panel.injectIntoClassSelectorActions)({
+  (0, import_editor_editing_panel2.injectIntoClassSelectorActions)({
     id: "global-classes-manager-button",
     component: ClassManagerButton
   });
-  (0, import_editor_editing_panel.registerStyleProviderToColors)(GLOBAL_CLASSES_PROVIDER_KEY, {
+  (0, import_editor_editing_panel2.registerStyleProviderToColors)(GLOBAL_CLASSES_PROVIDER_KEY, {
     name: "global",
     getThemeColor: (theme) => theme.palette.global.dark
   });
+  initMcpIntegration();
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {