@elementor/editor-canvas 4.1.0-838 → 4.1.0-beta2

package/dist/index.d.mts

@@ -319,8 +319,8 @@ type ImportedGlobalStylesPayload = {
         data: StyleVariables;
     };
     global_classes?: {
-        items: StyleDefinitionsMap;
-        order: StyleDefinitionID[];
+        added_items: StyleDefinitionsMap;
+        added_items_order: StyleDefinitionID[];
     };
 };
 

package/dist/index.d.ts

@@ -319,8 +319,8 @@ type ImportedGlobalStylesPayload = {
         data: StyleVariables;
     };
     global_classes?: {
-        items: StyleDefinitionsMap;
-        order: StyleDefinitionID[];
+        added_items: StyleDefinitionsMap;
+        added_items_order: StyleDefinitionID[];
     };
 };
 

package/dist/index.js

@@ -121,6 +121,9 @@ function isWidgetAvailableForLLM(config) {
   if (config.meta?.llm_support === false) {
     return false;
   }
+  if (config.title === "Component") {
+    return false;
+  }
   if (config.atomic_props_schema) {
     return true;
   }
@@ -342,7 +345,7 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
 
 // src/init.tsx
 var import_editor = require("@elementor/editor");
-var import_editor_mcp3 = require("@elementor/editor-mcp");
+var import_editor_mcp4 = require("@elementor/editor-mcp");
 
 // src/components/classes-rename.tsx
 var import_react = require("react");
@@ -3882,6 +3885,7 @@ var import_editor_elements13 = require("@elementor/editor-elements");
 var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_props6 = require("@elementor/editor-props");
 var import_editor_styles5 = require("@elementor/editor-styles");
+var import_editor_v1_adapters19 = require("@elementor/editor-v1-adapters");
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
   return import_editor_props6.Schema.adjustLlmPropValueSchema(value, {
@@ -3983,6 +3987,15 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
+  const { valid, jsonSchema } = import_editor_props6.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
+  if (!valid) {
+    throw new Error(
+      `Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
+        propertyValue
+      )}
+Expected Schema: ${jsonSchema}`
+    );
+  }
   (0, import_editor_elements11.updateElementSettings)({
     id: elementId,
     props: {
@@ -3990,6 +4003,7 @@ var doUpdateElementProperty = (params) => {
     },
     withHistory: false
   });
+  (0, import_editor_v1_adapters19.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
 };
 
 // src/mcp/utils/validate-input.ts
@@ -4085,6 +4099,7 @@ var CompositionBuilder = class _CompositionBuilder {
   rootContainers = [];
   api = {
     createElement: import_editor_elements13.createElement,
+    deleteElement: import_editor_elements13.deleteElement,
     getWidgetsCache: import_editor_elements13.getWidgetsCache,
     generateElementId: import_editor_elements13.generateElementId,
     getContainer: import_editor_elements13.getContainer,
@@ -4135,7 +4150,8 @@ var CompositionBuilder = class _CompositionBuilder {
       elements: children,
       editor_settings: {
         title: node.getAttribute("configuration-id") ?? void 0
-      }
+      },
+      elType: "widget"
     };
     if (isWidget) {
       return { ...base, elType: "widget", widgetType: elementTag };
@@ -4167,12 +4183,6 @@ var CompositionBuilder = class _CompositionBuilder {
     }
     return errors;
   }
-  findSchemaForNode(node) {
-    const widgetsCache = this.api.getWidgetsCache() || {};
-    const widgetType = node.tagName;
-    const widgetData = widgetsCache[widgetType]?.atomic_props_schema;
-    return widgetData || null;
-  }
   matchNodeByConfigId(configId) {
     const node = this.xml.querySelector(`[configuration-id="${configId}"]`);
     if (!node) {
@@ -4294,13 +4304,24 @@ ${childTypeErrors.join("\n")}`);
     const children = Array.from(this.xml.children);
     for (const childNode of children) {
       const modelTree = this.buildModelTree(childNode, widgetsCache);
-      const newElement = this.api.createElement({
-        container: rootContainer,
-        model: modelTree,
-        options: { useHistory: false }
-      });
-      this.rootContainers.push(newElement);
-      await this.awaitViewRender(newElement);
+      try {
+        const newElement = this.api.createElement({
+          container: rootContainer,
+          model: modelTree,
+          options: { useHistory: false }
+        });
+        this.rootContainers.push(newElement);
+        await this.awaitViewRender(newElement);
+      } catch (e) {
+        const attemptToRestoreInvalidContainer = this.api.getContainer(modelTree.id);
+        if (attemptToRestoreInvalidContainer) {
+          this.api.deleteElement({
+            container: attemptToRestoreInvalidContainer,
+            options: { useHistory: false }
+          });
+        }
+        throw e;
+      }
     }
     const { configErrors, styleErrors, invalidStyles } = await this.applyProperties();
     return {
@@ -4324,6 +4345,7 @@ function getCompositionTargetContainer(documentContainer, documentType) {
 
 // src/mcp/tools/build-composition/prompt.ts
 var import_editor_mcp2 = require("@elementor/editor-mcp");
+var BUILD_COMPOSITIONS_GUIDE_URI = "elementor://canvas/tools/build-compositions-guide";
 var generatePrompt = () => {
   const buildCompositionsToolPrompt = (0, import_editor_mcp2.toolPrompts)("build-compositions");
   buildCompositionsToolPrompt.description(`
@@ -4505,12 +4527,25 @@ var outputSchema = {
 
 // src/mcp/tools/build-composition/tool.ts
 var initBuildCompositionsTool = (reg) => {
-  const { addTool } = reg;
+  const { addTool, resource } = reg;
+  resource(
+    "build-compositions-guide",
+    BUILD_COMPOSITIONS_GUIDE_URI,
+    {
+      title: "Build Compositions Guide",
+      description: "Detailed guide for using the build-compositions tool",
+      mimeType: "text/plain"
+    },
+    async (uri) => ({
+      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt() }]
+    })
+  );
   addTool({
     name: "build-compositions",
-    description: generatePrompt(),
+    description: "Build V4 element compositions on the Elementor canvas. Read the guide resource before use.",
     schema: inputSchema,
     requiredResources: [
+      { description: "Build compositions guide", uri: BUILD_COMPOSITIONS_GUIDE_URI },
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
       { description: "Styles schema", uri: STYLE_SCHEMA_URI },
       { description: "Global Classes", uri: "elementor://global-classes" },
@@ -4534,29 +4569,38 @@ var initBuildCompositionsTool = (reg) => {
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: import_editor_elements14.createElement,
+          deleteElement: import_editor_elements14.deleteElement,
           getWidgetsCache: import_editor_elements14.getWidgetsCache
         });
         compositionBuilder.setElementConfig(elementConfig);
         compositionBuilder.setStylesConfig(stylesConfig);
         compositionBuilder.setCustomCSS(customCSS);
-        const { invalidStyles, rootContainers: generatedRootContainers } = await compositionBuilder.build(targetContainer);
+        const {
+          invalidStyles,
+          configErrors,
+          rootContainers: generatedRootContainers
+        } = await compositionBuilder.build(targetContainer);
         rootContainers.push(...generatedRootContainers);
         generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
-        Object.entries(invalidStyles).forEach(([elementId, rawCssRules]) => {
-          const customCss = {
-            value: rawCssRules.join(";\n")
-          };
-          doUpdateElementProperty({
-            elementId,
-            propertyName: "_styles",
-            propertyValue: {
-              _styles: {
-                custom_css: customCss
-              }
-            },
-            elementType: "widget"
+        if (configErrors.length) {
+          errors.push(...configErrors.map((msg) => new Error(msg)));
+        } else {
+          Object.entries(invalidStyles).forEach(([elementId, rawCssRules]) => {
+            const customCss = {
+              value: rawCssRules.join(";\n")
+            };
+            doUpdateElementProperty({
+              elementId,
+              propertyName: "_styles",
+              propertyValue: {
+                _styles: {
+                  custom_css: customCss
+                }
+              },
+              elementType: "widget"
+            });
           });
-        });
+        }
       } catch (error) {
         errors.push(error);
       }
@@ -4638,7 +4682,12 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
 var import_editor_elements15 = require("@elementor/editor-elements");
 
 // src/mcp/tools/configure-element/prompt.ts
-var configureElementToolPrompt = `Configure an existing element on the page.
+var import_editor_mcp3 = require("@elementor/editor-mcp");
+var CONFIGURE_ELEMENT_GUIDE_URI = "elementor://canvas/tools/configure-element-guide";
+var generatePrompt2 = () => {
+  const configureElementToolPrompt = (0, import_editor_mcp3.toolPrompts)("configure-element");
+  configureElementToolPrompt.description(`
+Configure an existing element on the page.
 
 # **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
 1. [${WIDGET_SCHEMA_URI}]
@@ -4653,12 +4702,6 @@ Before using this tool, check the definitions of the elements PropTypes at the r
 All widgets share a common _style property for styling, which uses the common styles schema.
 Retrieve and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
 
-# Parameters
-- propertiesToChange: An object containing the properties to change, with their new values. MANDATORY. When updating a style only, provide an empty object.
-- stylePropertiesToChange: An object containing the style properties to change, with their new values. OPTIONAL
-- elementId: The ID of the element to configure. MANDATORY
-- elementType: The type of the element to configure (i.e. e-heading, e-button). MANDATORY
-
 # When to use this tool
 When a user requires to change anything in an element, such as updating text, colors, sizes, or other configurable properties.
 This tool handles elements of type "widget".
@@ -4687,7 +4730,7 @@ You can use multiple property changes at once by providing multiple entries in t
 Some properties are nested, use the root property name, then objects with nested values inside, as the complete schema suggests.
 
 Make sure you have the "widget-schema-by-type" resource available to retrieve the PropType schema for the element type you are configuring.
-Make sure you have to "styles-schema" resources available to retrieve the common styles schema.
+Make sure you have the "styles-schema" resources available to retrieve the common styles schema.
 
 # How to configure elements
 We use a dedicated PropType Schema for configuring elements, including styles. When you configure an element, you must use the EXACT PropType Value as defined in the schema.
@@ -4695,8 +4738,21 @@ For styleProperties, use the style schema provided, as it also uses the PropType
 For all non-primitive types, provide the key property as defined in the schema as $$type in the generated object, as it is MANDATORY for parsing.
 
 Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property from the original configuration for every property you are changing.
-
-# Example
+`);
+  configureElementToolPrompt.parameter("elementId", "The ID of the element to configure. MANDATORY.");
+  configureElementToolPrompt.parameter(
+    "elementType",
+    "The type of the element to configure (i.e. e-heading, e-button). MANDATORY."
+  );
+  configureElementToolPrompt.parameter(
+    "propertiesToChange",
+    "An object containing the properties to change, with their new values. MANDATORY. When updating a style only, provide an empty object."
+  );
+  configureElementToolPrompt.parameter(
+    "stylePropertiesToChange",
+    "An object containing the style properties to change, with their new values. OPTIONAL."
+  );
+  configureElementToolPrompt.example(`
 \`\`\`json
 {
   propertiesToChange: {
@@ -4712,7 +4768,7 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   },
   stylePropertiesToChange: {
     'line-height': {
-      $$type: 'size', // MANDATORY do not forget to include the correct $$type for every property
+      $$type: 'size',
       value: {
         size: {
           $$type: 'number',
@@ -4729,11 +4785,20 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
   elementType: 'element-type'
 };
 \`\`\`
+`);
+  configureElementToolPrompt.instruction(
+    "The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects."
+  );
+  configureElementToolPrompt.instruction(`
+V4 only: If MCP fails, give manual steps using V4 UI.
 
-<IMPORTANT>
-The $$type property is MANDATORY for every value, it is required to parse the value and apply application-level effects.
-</IMPORTANT>
-`;
+V4 Editor structure:
+Panel tabs: General (\u2192 Settings section: ID, Tag, Link), Style, Interactions.
+NO Advanced tab. Never mention Advanced tab.
+`);
+  return configureElementToolPrompt.prompt();
+};
+var CONFIGURE_ELEMENT_GUIDE_TEXT = generatePrompt2();
 
 // src/mcp/tools/configure-element/schema.ts
 var import_schema3 = require("@elementor/schema");
@@ -4759,15 +4824,28 @@ var outputSchema2 = {
 
 // src/mcp/tools/configure-element/tool.ts
 var initConfigureElementTool = (reg) => {
-  const { addTool } = reg;
+  const { addTool, resource } = reg;
+  resource(
+    "configure-element-guide",
+    CONFIGURE_ELEMENT_GUIDE_URI,
+    {
+      title: "Configure Element Guide",
+      description: "Detailed guide for using the configure-element tool",
+      mimeType: "text/plain"
+    },
+    async (uri) => ({
+      contents: [{ uri: uri.href, mimeType: "text/plain", text: generatePrompt2() }]
+    })
+  );
   addTool({
     name: "configure-element",
-    description: configureElementToolPrompt,
+    description: "Configure an existing V4 element's properties and styles. Read the guide resource before use.",
     schema: inputSchema2,
     outputSchema: outputSchema2,
     requiredResources: [
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
-      { description: "Styles schema", uri: STYLE_SCHEMA_URI }
+      { description: "Styles schema", uri: STYLE_SCHEMA_URI },
+      { description: "Configure element guide", uri: CONFIGURE_ELEMENT_GUIDE_URI }
     ],
     modelPreferences: {
       hints: [{ name: "claude-sonnet-4-5" }],
@@ -4965,15 +5043,6 @@ var initGetElementConfigTool = (reg) => {
 
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
-  const { setMCPDescription } = reg;
-  setMCPDescription(
-    `Everything related to V4 ( Atomic ) canvas.
-# Canvas workflow for new compositions
-- Configure elements settings and styles
-- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
-- Get and retrieve element configuration values
-`
-  );
   initWidgetsSchemaResource(reg);
   initAvailableWidgetsResource(reg);
   initDocumentStructureResource(reg);
@@ -5101,14 +5170,14 @@ Note: The "size" property controls image resolution/loading, not visual size. Se
 // src/prevent-link-in-link-commands.ts
 var import_editor_elements17 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters19 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters20 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
 function initLinkInLinkPrevention() {
-  (0, import_editor_v1_adapters19.blockCommand)({
+  (0, import_editor_v1_adapters20.blockCommand)({
     command: "document/elements/paste",
     condition: blockLinkInLinkPaste
   });
-  (0, import_editor_v1_adapters19.blockCommand)({
+  (0, import_editor_v1_adapters20.blockCommand)({
     command: "document/elements/move",
     condition: blockLinkInLinkMove
   });
@@ -5184,7 +5253,7 @@ function shouldBlock(sourceElements, targetElements) {
 // src/style-commands/paste-style.ts
 var import_editor_elements20 = require("@elementor/editor-elements");
 var import_editor_props10 = require("@elementor/editor-props");
-var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters22 = require("@elementor/editor-v1-adapters");
 
 // src/utils/command-utils.ts
 var import_editor_elements18 = require("@elementor/editor-elements");
@@ -5231,9 +5300,9 @@ function getTitleForContainers(containers) {
 // src/style-commands/undoable-actions/paste-element-style.ts
 var import_editor_elements19 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters20 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
 var import_i18n6 = require("@wordpress/i18n");
-var undoablePasteElementStyle = () => (0, import_editor_v1_adapters20.undoable)(
+var undoablePasteElementStyle = () => (0, import_editor_v1_adapters21.undoable)(
   {
     do: ({ containers, newStyle }) => {
       return containers.map((container) => {
@@ -5309,12 +5378,12 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters20.undoable)(
 // src/style-commands/paste-style.ts
 function initPasteStyleCommand() {
   const pasteElementStyleCommand = undoablePasteElementStyle();
-  (0, import_editor_v1_adapters21.blockCommand)({
+  (0, import_editor_v1_adapters22.blockCommand)({
     command: "document/elements/paste-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters21.__privateListenTo)(
-    (0, import_editor_v1_adapters21.commandStartEvent)("document/elements/paste-style"),
+  (0, import_editor_v1_adapters22.__privateListenTo)(
+    (0, import_editor_v1_adapters22.commandStartEvent)("document/elements/paste-style"),
     (e) => pasteStyles(e.args, pasteElementStyleCommand)
   );
 }
@@ -5365,14 +5434,14 @@ function pasteClasses(containers, classes) {
 }
 
 // src/style-commands/reset-style.ts
-var import_editor_v1_adapters23 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters24 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
 var import_editor_elements21 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters22 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters23 = require("@elementor/editor-v1-adapters");
 var import_i18n7 = require("@wordpress/i18n");
-var undoableResetElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
+var undoableResetElementStyle = () => (0, import_editor_v1_adapters23.undoable)(
   {
     do: ({ containers }) => {
       return containers.map((container) => {
@@ -5416,12 +5485,12 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters22.undoable)(
 // src/style-commands/reset-style.ts
 function initResetStyleCommand() {
   const resetElementStyles = undoableResetElementStyle();
-  (0, import_editor_v1_adapters23.blockCommand)({
+  (0, import_editor_v1_adapters24.blockCommand)({
     command: "document/elements/reset-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters23.__privateListenTo)(
-    (0, import_editor_v1_adapters23.commandStartEvent)("document/elements/reset-style"),
+  (0, import_editor_v1_adapters24.__privateListenTo)(
+    (0, import_editor_v1_adapters24.commandStartEvent)("document/elements/reset-style"),
     (e) => resetStyles(e.args, resetElementStyles)
   );
 }
@@ -5467,8 +5536,14 @@ function init() {
     component: ClassesRename
   });
   initCanvasMcp(
-    (0, import_editor_mcp3.getMCPByDomain)("canvas", {
-      instructions: mcpDescription
+    (0, import_editor_mcp4.getMCPByDomain)("canvas", {
+      instructions: `Everything related to V4 ( Atomic ) canvas.
+# Canvas workflow for new compositions
+- Configure elements settings and styles
+- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
+- Get and retrieve element configuration values
+`,
+      docs: mcpDescription
     })
   );
   initTabsModelExtensions();