@elementor/editor-canvas 4.3.3 → 4.3.5

package/dist/index.mjs

@@ -2062,6 +2062,8 @@ var timeRangeTransformer = createTransformer((value) => {
 // src/transformers/shared/icon-transformer.ts
 import {
   getFontAwesome7IconName,
+  isDeletedCustomIconLibrary,
+  resolveCustomIconSvg,
   resolveFontAwesome7Icon
 } from "@elementor/editor-controls";
 
@@ -2086,32 +2088,101 @@ function processSvgContent(svgText) {
   return svgElement.outerHTML;
 }
 
+// src/transformers/shared/svg-src-transformer.ts
+import { getMediaAttachment } from "@elementor/wp-media";
+async function fetchSvgContent(url, signal) {
+  try {
+    const response = await fetch(url, { signal });
+    if (!response.ok) {
+      return null;
+    }
+    const contentType = response.headers.get("content-type") ?? "";
+    const isSvg = contentType.includes("svg") || contentType.includes("xml") || url.endsWith(".svg");
+    if (!isSvg) {
+      return null;
+    }
+    return await response.text();
+  } catch {
+    return null;
+  }
+}
+function resolveSvgSrcId(id) {
+  if (typeof id !== "number" || id <= 0) {
+    return null;
+  }
+  return id;
+}
+var svgSrcTransformer = createTransformer(async (value, { signal }) => {
+  const id = resolveSvgSrcId(value.id);
+  const urlFromValue = typeof value.url === "string" ? value.url : null;
+  let url = urlFromValue;
+  if (id && !urlFromValue) {
+    const attachment = await getMediaAttachment({ id });
+    url = attachment?.url ?? null;
+  }
+  const resolvedUrl = typeof url === "string" ? url : null;
+  if (!resolvedUrl) {
+    return { html: null, url: null };
+  }
+  const svgText = await fetchSvgContent(resolvedUrl, signal);
+  const html = svgText ? processSvgContent(svgText) : null;
+  return { html, url: resolvedUrl };
+});
+
 // src/transformers/shared/icon-transformer.ts
 var EMPTY_ICON_RESULT = { html: null, url: null };
 var ICON_SVG_SIZE = "100%";
 var ICON_SVG_OVERFLOW = "visible";
+var DEFAULT_SVG_RELATIVE_PATH = "images/default-svg.svg";
 var iconTransformer = createTransformer(async (value, { signal }) => {
   const iconValue = typeof value.value === "string" ? value.value : null;
   const library = typeof value.library === "string" ? value.library : null;
   if (!iconValue || !library) {
     return EMPTY_ICON_RESULT;
   }
+  const fontAwesomeHtml = await resolveFontAwesomeSvg(library, iconValue, signal);
+  if (fontAwesomeHtml) {
+    return { html: fontAwesomeHtml, url: null };
+  }
+  if (isDeletedCustomIconLibrary(library, iconValue)) {
+    return resolveDefaultSvg(signal);
+  }
+  const customHtml = await resolveCustomSvg(library, iconValue, signal);
+  if (customHtml) {
+    return { html: customHtml, url: null };
+  }
+  return EMPTY_ICON_RESULT;
+});
+async function resolveDefaultSvg(signal) {
+  const assetsUrl = window.elementorCommon?.config?.urls?.assets;
+  if (typeof assetsUrl !== "string" || assetsUrl === "") {
+    return EMPTY_ICON_RESULT;
+  }
+  return svgSrcTransformer(
+    {
+      id: null,
+      url: `${assetsUrl}${DEFAULT_SVG_RELATIVE_PATH}`
+    },
+    { key: "svg", signal }
+  );
+}
+async function resolveCustomSvg(library, iconValue, signal) {
+  const markup = await resolveCustomIconSvg(library, iconValue, signal);
+  return markup ? processIconSvgContent(markup) : null;
+}
+async function resolveFontAwesomeSvg(library, iconValue, signal) {
   const iconName = getFontAwesome7IconName(iconValue);
   if (!iconName) {
-    return EMPTY_ICON_RESULT;
+    return null;
   }
   const iconData = await resolveFontAwesome7Icon(library, iconName, signal);
   if (!iconData) {
-    return EMPTY_ICON_RESULT;
-  }
-  const svgText = buildFontAwesomeSvg(iconData);
-  if (!svgText) {
-    return EMPTY_ICON_RESULT;
+    return null;
   }
-  const html = processIconSvgContent(svgText);
-  return { html, url: null };
-});
-function buildFontAwesomeSvg(iconData) {
+  const svgText = buildPathSvg(iconData);
+  return svgText ? processIconSvgContent(svgText) : null;
+}
+function buildPathSvg(iconData) {
   if (iconData.paths.length === 0) {
     return null;
   }
@@ -2147,13 +2218,13 @@ var imageSrcTransformer = createTransformer((value) => ({
 }));
 
 // src/transformers/shared/image-transformer.ts
-import { getMediaAttachment } from "@elementor/wp-media";
+import { getMediaAttachment as getMediaAttachment2 } from "@elementor/wp-media";
 var imageTransformer = createTransformer(async (value) => {
   const { src, size: size2 } = value;
   if (!src?.id) {
     return src?.url ? { src: src.url, alt: src.alt ?? "" } : null;
   }
-  const attachment = await getMediaAttachment({ id: src.id });
+  const attachment = await getMediaAttachment2({ id: src.id });
   const sizedAttachment = attachment?.sizes?.[size2 ?? ""];
   if (sizedAttachment) {
     return {
@@ -2179,47 +2250,6 @@ var plainTransformer = createTransformer((value) => {
   return value;
 });
 
-// src/transformers/shared/svg-src-transformer.ts
-import { getMediaAttachment as getMediaAttachment2 } from "@elementor/wp-media";
-async function fetchSvgContent(url, signal) {
-  try {
-    const response = await fetch(url, { signal });
-    if (!response.ok) {
-      return null;
-    }
-    const contentType = response.headers.get("content-type") ?? "";
-    const isSvg = contentType.includes("svg") || contentType.includes("xml") || url.endsWith(".svg");
-    if (!isSvg) {
-      return null;
-    }
-    return await response.text();
-  } catch {
-    return null;
-  }
-}
-function resolveSvgSrcId(id) {
-  if (typeof id !== "number" || id <= 0) {
-    return null;
-  }
-  return id;
-}
-var svgSrcTransformer = createTransformer(async (value, { signal }) => {
-  const id = resolveSvgSrcId(value.id);
-  const urlFromValue = typeof value.url === "string" ? value.url : null;
-  let url = urlFromValue;
-  if (id && !urlFromValue) {
-    const attachment = await getMediaAttachment2({ id });
-    url = attachment?.url ?? null;
-  }
-  const resolvedUrl = typeof url === "string" ? url : null;
-  if (!resolvedUrl) {
-    return { html: null, url: null };
-  }
-  const svgText = await fetchSvgContent(resolvedUrl, signal);
-  const html = svgText ? processSvgContent(svgText) : null;
-  return { html, url: resolvedUrl };
-});
-
 // src/transformers/shared/video-src-transformer.ts
 import { getMediaAttachment as getMediaAttachment3 } from "@elementor/wp-media";
 var videoSrcTransformer = createTransformer(async (value) => {
@@ -2499,11 +2529,11 @@ function getVal2(val) {
 var transformOriginTransformer = createTransformer((value) => {
   const x = getVal2(value.x);
   const y = getVal2(value.y);
-  const z3 = getVal2(value.z);
-  if (x === DEFAULT_XY && y === DEFAULT_XY && z3 === DEFAULT_Z) {
+  const z4 = getVal2(value.z);
+  if (x === DEFAULT_XY && y === DEFAULT_XY && z4 === DEFAULT_Z) {
     return null;
   }
-  return `${x} ${y} ${z3}`;
+  return `${x} ${y} ${z4}`;
 });
 
 // src/transformers/styles/transform-rotate-transformer.ts
@@ -2761,20 +2791,24 @@ function isRecord(value) {
 // src/legacy/create-pending-element.ts
 import {
   addModelToParent,
+  cloneElementTree,
   findModelInDocument,
   generateElementId,
   getContainer
 } from "@elementor/editor-elements";
 function createPendingElement(wrapperView, data, options = {}) {
   const parentContainer = wrapperView.getContainer();
-  const model = { ...data };
-  if (!model.id) {
+  const model = options.clone ? cloneElementTree(data) : { ...data };
+  if (!options.clone && !model.id) {
     model.id = generateElementId();
   }
   if (!model.elements) {
     model.elements = [];
   }
-  const added = addModelToParent(parentContainer.id, model, options);
+  const added = addModelToParent(parentContainer.id, model, {
+    ...options,
+    clone: false
+  });
   if (!added) {
     return void 0;
   }
@@ -2935,6 +2969,7 @@ function createTemplatedElementView({
         this._domUpdateWasSkipped = false;
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
+          ...element.template_context ?? {},
           id: this.model.get("id"),
           interaction_id: this.getInteractionId(),
           type,
@@ -3013,10 +3048,12 @@ function buildEditorAttributes(model) {
   const id = model.get("id");
   const originId = model.get("originId");
   const cid = model.cid ?? "";
+  const isDecorative = model.get("editor_settings")?.decorative === true;
   const attrs = {
     "data-model-cid": cid,
     "data-interaction-id": originId ?? id,
-    "x-ignore": "true"
+    "x-ignore": "true",
+    ...isDecorative ? { "data-e-decorative": "true" } : {}
   };
   return Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
 }
@@ -4119,6 +4156,11 @@ function initTabsModelExtensions() {
 // src/mcp/canvas-mcp.ts
 import { Schema as Schema3 } from "@elementor/editor-props";
 
+// src/mcp/icon-library-experiment.ts
+import { isExperimentActive } from "@elementor/editor-v1-adapters";
+var ICON_LIBRARY_EXPERIMENT = "e_svg_library";
+var isIconLibraryActive = () => isExperimentActive(ICON_LIBRARY_EXPERIMENT);
+
 // src/mcp/resources/available-widgets-resource.ts
 import { httpService as httpService3 } from "@elementor/http-client";
 var MCP_PROXY_URL2 = "elementor/v1/mcp-proxy";
@@ -4932,8 +4974,46 @@ Expected Schema: ${jsonSchema}`
 
 // src/mcp/tools/configure-element/prompt.ts
 import { toolPrompts } from "@elementor/editor-mcp";
+var ICONS_SECTION = `# Icons (the \`svg\` property on e-svg)
+The \`svg\` property accepts two variants. Prefer a library icon for iconography (carts, arrows, social marks, check marks) \u2014 it needs no upload and inherits \`color\` via \`currentColor\`. Use an uploaded file only for custom artwork such as a brand logo.
+
+Resolve the icon with the \`find-icons\` tool FIRST, then copy its \`value\` and \`library\` verbatim. Never assemble those strings yourself: Font Awesome renamed many icons between major versions (\`shopping-cart\` became \`cart-shopping\`), so a plausible guess renders nothing. \`find-icons\` matches on names, aliases, human search terms, and categories, so describe the intent \u2014 "add to cart" finds \`cart-shopping\`. It takes a batch of \`queries\`, so resolve every icon you need in one call.
+
+Library icon (note the nested PropValues \u2014 \`value\` and \`library\` are each a \`string\` PropValue):
+{ "$$type": "icon", "value": { "value": { "$$type": "string", "value": "fa-solid fa-cart-shopping" }, "library": { "$$type": "string", "value": "fa-solid" } } }
+
+Uploaded SVG file:
+{ "$$type": "svg-src", "value": { "id": { "$$type": "image-attachment-id", "value": 123 } } }
+
+Size and colour an e-svg through \`style\` (\`width\`, \`height\`, \`color\`), never through \`propertiesToChange\`.
+`;
+var ICON_EXAMPLE = `
+Setting a Font Awesome icon on an e-svg, after resolving it with \`find-icons\`:
+
+\`\`\`json
+{
+  propertiesToChange: {
+    svg: {
+      $$type: 'icon',
+      value: {
+        value: { $$type: 'string', value: 'fa-solid fa-cart-shopping' },
+        library: { $$type: 'string', value: 'fa-solid' }
+      }
+    }
+  },
+  style: {
+    'width': '1.25rem',
+    'height': '1.25rem',
+    'color': '#1a1a1a'
+  },
+  elementId: 'element-id',
+  elementType: 'e-svg'
+};
+\`\`\`
+`;
 var CONFIGURE_ELEMENT_GUIDE_URI = "elementor://canvas/tools/configure-element-guide";
 var generatePrompt = () => {
+  const iconLibraryActive = isIconLibraryActive();
   const configureElementToolPrompt = toolPrompts("configure-element");
   configureElementToolPrompt.description(`
 Configure an existing element on the page.
@@ -4991,7 +5071,8 @@ Put the dynamic object EXACTLY at the node whose schema offers the "dynamic" var
 }
 Image example: { "$$type": "image", "value": { "src": { "$$type": "dynamic", "value": { "name": "<image tag>", "settings": { ... } } } } }
 Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only when the tag has no settings.
-`);
+
+${iconLibraryActive ? ICONS_SECTION : ""}`);
   configureElementToolPrompt.parameter("elementId", "The ID of the element to configure. MANDATORY.");
   configureElementToolPrompt.parameter(
     "elementType",
@@ -5028,6 +5109,9 @@ Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only
 };
 \`\`\`
 `);
+  if (iconLibraryActive) {
+    configureElementToolPrompt.example(ICON_EXAMPLE);
+  }
   configureElementToolPrompt.instruction(
     "The $$type property is MANDATORY for every value in propertiesToChange; it is not used in the style parameter (raw CSS only)."
   );
@@ -5201,8 +5285,7 @@ Provide styling as raw CSS via the "style" parameter (a flat map of CSS property
 }`;
 }
 
-// src/mcp/tools/get-page-structure/tool.ts
-import { getCurrentDocument } from "@elementor/editor-documents";
+// src/mcp/tools/find-icons/tool.ts
 import { httpService as httpService6 } from "@elementor/http-client";
 import { z as z2 } from "@elementor/schema";
 
@@ -5221,24 +5304,137 @@ function getMcpErrorMessage(error, toolName) {
   return `${toolName} failed with an unknown error.`;
 }
 
-// src/mcp/tools/get-page-structure/tool.ts
+// src/mcp/tools/find-icons/prompt.ts
+import { toolPrompts as toolPrompts2 } from "@elementor/editor-mcp";
+var findIconsToolPrompt = toolPrompts2("find-icons");
+findIconsToolPrompt.description(
+  "Finds icons for the `svg` property of an `e-svg` element, across Font Awesome and any icon packs uploaded to this site. Returns the exact `value` and `library` pair to write - never assemble those strings yourself, and never guess an icon name. Call this before placing or configuring an `e-svg`. Nothing has to be uploaded to the Media Library for an icon to work."
+);
+findIconsToolPrompt.instruction(
+  'Call it when the user names an icon ("use the cart-shopping icon") and take the first exact `name` match, and also when the user describes a page and you decide icons belong in it ("create a product page") - in that case pass one query per icon you intend to place, in a single call.'
+);
+findIconsToolPrompt.instruction(
+  'Write queries the way a person would describe the icon ("shopping cart", "credit card", "phone"). Icons are matched on their name, aliases, Font Awesome search terms and category, so plain language works better than guessed icon names.'
+);
+findIconsToolPrompt.instruction(
+  'Results are ordered best first; `matched_on: "name"` is a stronger signal than `matched_on: "term"`. Check each result\'s `license` and only use `free` icons; skip any `pro` entry. Prefer `fa-solid` for UI iconography and keep one style across a page; brand marks only exist in `fa-brands`. An empty `matches` array means no match was found: broaden the phrase instead of inventing a value.'
+);
+findIconsToolPrompt.instruction(
+  'Pass the chosen pair to `configure-element` as the `svg` property: { "$$type": "icon", "value": { "value": { "$$type": "string", "value": "fa-solid fa-cart-shopping" }, "library": { "$$type": "string", "value": "fa-solid" } } }. An `e-svg` has no colour or size of its own, so set `width`, `height` and `color` in the same `configure-element` call.'
+);
+findIconsToolPrompt.example(`Icon named by the user:
+{ "queries": ["cart-shopping"] }`);
+findIconsToolPrompt.example(`Every icon a product page needs, in one call:
+{ "queries": ["add to cart", "free shipping", "secure payment", "instagram"] }`);
+findIconsToolPrompt.example(`Browse a category, one style only:
+{ "category": "shopping", "library": "fa-solid", "perPage": 25 }`);
+
+// src/mcp/tools/find-icons/tool.ts
 var MCP_PROXY_URL5 = "elementor/v1/mcp-proxy";
+var MAX_QUERIES = 10;
+var MAX_PER_PAGE = 25;
+var initFindIconsTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
+    name: "find-icons",
+    description: findIconsToolPrompt.prompt(),
+    schema: {
+      queries: z2.array(z2.string()).max(MAX_QUERIES).optional().describe(
+        'One plain-language phrase per icon you need, for example ["add to cart", "free shipping"]. Batch every icon a page needs into a single call.'
+      ),
+      library: z2.string().optional().describe(
+        'Restrict results to one library key reported in "libraries", for example "fa-solid". Omit to search every library installed on the site.'
+      ),
+      category: z2.string().optional().describe(
+        'Restrict results to one Font Awesome category reported in "categories", for example "shopping". May be used without a query to browse that category.'
+      ),
+      page: z2.number().int().min(1).optional(),
+      perPage: z2.number().int().min(1).max(MAX_PER_PAGE).optional()
+    },
+    outputSchema: {
+      results: z2.array(
+        z2.object({
+          query: z2.string(),
+          matches: z2.array(
+            z2.object({
+              value: z2.string(),
+              library: z2.string(),
+              name: z2.string(),
+              label: z2.string(),
+              matched_on: z2.enum(["name", "alias", "term", "category", "library"]),
+              license: z2.enum(["free", "pro"])
+            })
+          ),
+          total: z2.number(),
+          page: z2.number(),
+          per_page: z2.number(),
+          truncated: z2.boolean()
+        })
+      ).describe(
+        'One entry per query, each with ranked "matches". Every match carries the "value" and "library" pair to write on the e-svg icon prop, plus "matched_on" and "license".'
+      ),
+      libraries: z2.array(z2.string()).optional().describe(
+        "Icon library keys installed on this site. Only sent when nothing matched or when browsing."
+      ),
+      customLibraries: z2.record(z2.string(), z2.string()).optional().describe(
+        "Custom (uploaded) icon libraries keyed by library. Only sent when nothing matched or when browsing."
+      ),
+      categories: z2.array(z2.string()).optional().describe(
+        'Icon categories for the "category" filter. Only sent when nothing matched or when browsing.'
+      ),
+      truncatedCustomLibraries: z2.array(z2.string()).optional().describe("Custom libraries with more than 250 icons; only their first 250 icons are searchable."),
+      fontAwesomeVersion: z2.string().nullable().describe("Font Awesome version the site renders icons from."),
+      llmInstructions: z2.string().optional().describe("Present only when nothing matched, explaining what to do next.")
+    },
+    handler: async ({ queries, library, category, page, perPage }) => {
+      try {
+        const { data } = await httpService6().post(MCP_PROXY_URL5, {
+          tool: "find-icons",
+          input: {
+            ...queries ? { queries } : {},
+            ...library ? { library } : {},
+            ...category ? { category } : {},
+            ...page ? { page } : {},
+            ...perPage ? { per_page: perPage } : {}
+          }
+        });
+        return {
+          results: data.data.results,
+          ...data.data.libraries ? { libraries: data.data.libraries } : {},
+          ...data.data.custom_libraries ? { customLibraries: data.data.custom_libraries } : {},
+          ...data.data.categories ? { categories: data.data.categories } : {},
+          ...data.data.truncated_custom_libraries ? { truncatedCustomLibraries: data.data.truncated_custom_libraries } : {},
+          fontAwesomeVersion: data.data.font_awesome_version,
+          ...data.data.llm_instructions ? { llmInstructions: data.data.llm_instructions } : {}
+        };
+      } catch (error) {
+        throw new Error(getMcpErrorMessage(error, "find-icons"));
+      }
+    }
+  });
+};
+
+// src/mcp/tools/get-page-structure/tool.ts
+import { getCurrentDocument } from "@elementor/editor-documents";
+import { httpService as httpService7 } from "@elementor/http-client";
+import { z as z3 } from "@elementor/schema";
+var MCP_PROXY_URL6 = "elementor/v1/mcp-proxy";
 var initGetPageStructureTool = (reg) => {
   const { addTool } = reg;
   addTool({
     name: "get-page-structure",
     description: "Returns a lean Elementor element tree skeleton (id, elType, widgetType, title, nested elements) for a post or page. If no postId is provided, uses the currently open document. Optionally scope to a subtree with elementId. Set includeContent=true (requires elementId) to also return each node's settings and styles.",
     schema: {
-      postId: z2.number().optional().describe(
+      postId: z3.number().optional().describe(
         "WordPress post ID of the Elementor document. If omitted, uses the currently open document."
       ),
-      elementId: z2.string().optional().describe("If provided, returns only the subtree rooted at that element id."),
-      includeContent: z2.boolean().optional().describe(
+      elementId: z3.string().optional().describe("If provided, returns only the subtree rooted at that element id."),
+      includeContent: z3.boolean().optional().describe(
         "If true, includes each node's settings and styles (same shape build-composition accepts as input). Requires elementId."
       )
     },
     outputSchema: {
-      elements: z2.array(z2.any()).describe(
+      elements: z3.array(z3.any()).describe(
         "Skeleton of Elementor elements (id, elType, widgetType, title, nested elements). When includeContent is true, each node also includes settings and styles."
       )
     },
@@ -5248,7 +5444,7 @@ var initGetPageStructureTool = (reg) => {
         throw new Error("No post ID provided and no active document found.");
       }
       try {
-        const { data } = await httpService6().post(MCP_PROXY_URL5, {
+        const { data } = await httpService7().post(MCP_PROXY_URL6, {
           tool: "get-page-structure",
           input: {
             post_id: resolvedPostId,
@@ -5278,6 +5474,9 @@ var initCanvasMcp = (reg) => {
   initGeneralContextResource(reg);
   initBestPracticesResource(reg);
   initConfigureElementTool(reg);
+  if (isIconLibraryActive()) {
+    initFindIconsTool(reg);
+  }
   initGetPageStructureTool(reg);
   initBreakpointsResource(reg);
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.3.3",
+  "version": "4.3.5",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,26 +37,26 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.3",
-    "@elementor/editor-controls": "4.3.3",
-    "@elementor/editor-documents": "4.3.3",
-    "@elementor/editor-elements": "4.3.3",
-    "@elementor/editor-interactions": "4.3.3",
-    "@elementor/editor-mcp": "4.3.3",
-    "@elementor/editor-notifications": "4.3.3",
-    "@elementor/editor-props": "4.3.3",
-    "@elementor/editor-responsive": "4.3.3",
-    "@elementor/editor-styles": "4.3.3",
-    "@elementor/editor-styles-repository": "4.3.3",
-    "@elementor/editor-ui": "4.3.3",
-    "@elementor/editor-v1-adapters": "4.3.3",
-    "@elementor/events": "4.3.3",
-    "@elementor/http-client": "4.3.3",
-    "@elementor/schema": "4.3.3",
-    "@elementor/twing": "4.3.3",
-    "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.3",
-    "@elementor/wp-media": "4.3.3",
+    "@elementor/editor": "4.3.5",
+    "@elementor/editor-controls": "4.3.5",
+    "@elementor/editor-documents": "4.3.5",
+    "@elementor/editor-elements": "4.3.5",
+    "@elementor/editor-interactions": "4.3.5",
+    "@elementor/editor-mcp": "4.3.5",
+    "@elementor/editor-notifications": "4.3.5",
+    "@elementor/editor-props": "4.3.5",
+    "@elementor/editor-responsive": "4.3.5",
+    "@elementor/editor-styles": "4.3.5",
+    "@elementor/editor-styles-repository": "4.3.5",
+    "@elementor/editor-ui": "4.3.5",
+    "@elementor/editor-v1-adapters": "4.3.5",
+    "@elementor/events": "4.3.5",
+    "@elementor/http-client": "4.3.5",
+    "@elementor/schema": "4.3.5",
+    "@elementor/twing": "4.3.5",
+    "@elementor/ui": "1.41.1",
+    "@elementor/utils": "4.3.5",
+    "@elementor/wp-media": "4.3.5",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0",
     "dompurify": "^3.2.6"

package/src/legacy/__tests__/build-editor-attributes.test.ts

@@ -0,0 +1,41 @@
+import { buildEditorAttributes } from '../create-nested-templated-element-type';
+import { type ElementView } from '../types';
+
+const createModel = ( editorSettings?: Record< string, unknown > ) =>
+	( {
+		cid: 'c1',
+		get: ( key: string ) =>
+			( {
+				id: 'abc123',
+				editor_settings: editorSettings,
+			} )[ key ],
+	} ) as unknown as ElementView[ 'model' ];
+
+describe( 'buildEditorAttributes', () => {
+	it( 'should mark decorative elements', () => {
+		// Arrange
+		const model = createModel( { decorative: true } );
+
+		// Act
+		const attributes = buildEditorAttributes( model );
+
+		// Assert
+		expect( attributes ).toContain( 'data-e-decorative="true"' );
+	} );
+
+	it.each( [
+		[ 'no editor settings', undefined ],
+		[ 'decorative disabled', { decorative: false } ],
+		[ 'other editor settings only', { title: 'Hero' } ],
+	] )( 'should not mark the element when it has %s', ( _, editorSettings ) => {
+		// Arrange
+		const model = createModel( editorSettings );
+
+		// Act
+		const attributes = buildEditorAttributes( model );
+
+		// Assert
+		expect( attributes ).not.toContain( 'data-e-decorative' );
+		expect( attributes ).toContain( 'data-interaction-id="abc123"' );
+	} );
+} );