@elementor/editor-canvas 4.3.0-beta1 → 4.3.0-beta3

package/dist/index.d.mts

@@ -196,6 +196,7 @@ type ElementModel = {
     elType: string;
     settings: BackboneModel<Props>;
     editor_settings: Record<string, unknown>;
+    styles?: V1ElementModelProps['styles'];
     widgetType: string;
     editSettings?: BackboneModel<{
         inactive?: boolean;

package/dist/index.d.ts

@@ -196,6 +196,7 @@ type ElementModel = {
     elType: string;
     settings: BackboneModel<Props>;
     editor_settings: Record<string, unknown>;
+    styles?: V1ElementModelProps['styles'];
     widgetType: string;
     editSettings?: BackboneModel<{
         inactive?: boolean;

package/dist/index.js

@@ -2107,6 +2107,9 @@ var timeRangeTransformer = createTransformer((value) => {
   };
 });
 
+// src/transformers/shared/icon-transformer.ts
+var import_editor_controls = require("@elementor/editor-controls");
+
 // src/transformers/shared/process-svg-content.ts
 var import_dompurify2 = __toESM(require("dompurify"));
 var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
@@ -2129,78 +2132,56 @@ function processSvgContent(svgText) {
 }
 
 // src/transformers/shared/icon-transformer.ts
-var FONT_AWESOME_JSON = {
-  width: 0,
-  height: 1,
-  path: 4
-};
-var fontAwesomeJsonCache = /* @__PURE__ */ new Map();
+var EMPTY_ICON_RESULT = { html: null, url: null };
+var ICON_SVG_SIZE = "100%";
+var ICON_SVG_OVERFLOW = "visible";
 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 { html: null, url: null };
+    return EMPTY_ICON_RESULT;
   }
-  const iconName = getFontAwesomeIconName(iconValue);
-  const jsonFileName = getFontAwesomeJsonFileName(library);
-  if (!iconName || !jsonFileName) {
-    return { html: null, url: null };
+  const iconName = (0, import_editor_controls.getFontAwesome7IconName)(iconValue);
+  if (!iconName) {
+    return EMPTY_ICON_RESULT;
   }
-  const icons = await fetchFontAwesomeIcons(jsonFileName, signal);
-  const iconData = icons?.[iconName];
+  const iconData = await (0, import_editor_controls.resolveFontAwesome7Icon)(library, iconName, signal);
   if (!iconData) {
-    return { html: null, url: null };
+    return EMPTY_ICON_RESULT;
   }
   const svgText = buildFontAwesomeSvg(iconData);
-  const html = processSvgContent(svgText);
+  if (!svgText) {
+    return EMPTY_ICON_RESULT;
+  }
+  const html = processIconSvgContent(svgText);
   return { html, url: null };
 });
-function getFontAwesomeIconName(iconValue) {
-  const match = iconValue.match(/^fa\S*\s+fa-(.+)$/);
-  return match?.[1] ?? null;
-}
-function getFontAwesomeJsonFileName(library) {
-  if (!library.startsWith("fa-")) {
+function buildFontAwesomeSvg(iconData) {
+  if (iconData.paths.length === 0) {
     return null;
   }
-  return library.replace(/^fa-/, "");
+  const pathMarkup = iconData.paths.map((path) => `<path d="${escapeSvgPath(path)}"></path>`).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${iconData.width} ${iconData.height}">${pathMarkup}</svg>`;
 }
-function getAssetsBaseUrl() {
-  const assetsUrl = window.elementorCommon?.config?.urls?.assets;
-  return typeof assetsUrl === "string" && assetsUrl !== "" ? assetsUrl : null;
+function escapeSvgPath(path) {
+  return path.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-async function fetchFontAwesomeIcons(jsonFileName, signal) {
-  const cached = fontAwesomeJsonCache.get(jsonFileName);
-  if (cached) {
-    return cached;
-  }
-  const icons = await loadFontAwesomeIcons(jsonFileName, signal);
-  if (icons) {
-    fontAwesomeJsonCache.set(jsonFileName, icons);
-  }
-  return icons;
-}
-async function loadFontAwesomeIcons(jsonFileName, signal) {
-  const assetsUrl = getAssetsBaseUrl();
-  if (!assetsUrl) {
+function processIconSvgContent(svgText) {
+  const html = processSvgContent(svgText);
+  if (!html) {
     return null;
   }
-  try {
-    const response = await fetch(`${assetsUrl}lib/font-awesome/json/${jsonFileName}.json`, { signal });
-    if (!response.ok) {
-      return null;
-    }
-    const data = await response.json();
-    return data.icons ?? null;
-  } catch {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "image/svg+xml");
+  const svgElement = doc.querySelector("svg");
+  if (!svgElement) {
     return null;
   }
-}
-function buildFontAwesomeSvg(iconData) {
-  const width = iconData[FONT_AWESOME_JSON.width];
-  const height = iconData[FONT_AWESOME_JSON.height];
-  const path = iconData[FONT_AWESOME_JSON.path];
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"><path d="${path}"></path></svg>`;
+  svgElement.setAttribute("aria-hidden", "true");
+  svgElement.style.setProperty("width", ICON_SVG_SIZE);
+  svgElement.style.setProperty("height", ICON_SVG_SIZE);
+  svgElement.style.setProperty("overflow", ICON_SVG_OVERFLOW);
+  return svgElement.outerHTML;
 }
 
 // src/transformers/shared/image-src-transformer.ts
@@ -2446,6 +2427,10 @@ var mapToFilterFunctionString = (value) => {
 };
 
 // src/transformers/styles/flex-transformer.ts
+var DEFAULT_FLEX_GROW = 0;
+var DEFAULT_FLEX_SHRINK = 1;
+var DEFAULT_FLEX_BASIS = "auto";
+var formatBasis = (basis) => typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis;
 var flexTransformer = createTransformer((value) => {
   const grow = value.flexGrow;
   const shrink = value.flexShrink;
@@ -2456,28 +2441,10 @@ var flexTransformer = createTransformer((value) => {
   if (!hasGrow && !hasShrink && !hasBasis) {
     return null;
   }
-  if (hasGrow && hasShrink && hasBasis) {
-    return `${grow} ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (hasGrow && hasShrink && !hasBasis) {
-    return `${grow} ${shrink}`;
-  }
-  if (hasGrow && !hasShrink && hasBasis) {
-    return `${grow} 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (!hasGrow && hasShrink && hasBasis) {
-    return `0 ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (hasGrow && !hasShrink && !hasBasis) {
-    return `${grow}`;
-  }
-  if (!hasGrow && hasShrink && !hasBasis) {
-    return `0 ${shrink}`;
-  }
-  if (!hasGrow && !hasShrink && hasBasis) {
-    return `0 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  return null;
+  const growOut = hasGrow ? grow : DEFAULT_FLEX_GROW;
+  const shrinkOut = hasShrink ? shrink : DEFAULT_FLEX_SHRINK;
+  const basisOut = hasBasis ? formatBasis(basis) : DEFAULT_FLEX_BASIS;
+  return `${growOut} ${shrinkOut} ${basisOut}`;
 });
 
 // src/transformers/styles/font-family-transformer.ts
@@ -2609,10 +2576,10 @@ var transformSkewTransformer = createTransformer((value) => {
 });
 
 // src/transformers/styles/transition-transformer.ts
-var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_controls2 = require("@elementor/editor-controls");
 var getAllowedProperties = () => {
   const allowedProperties = /* @__PURE__ */ new Set();
-  import_editor_controls.transitionProperties.forEach((category) => {
+  import_editor_controls2.transitionProperties.forEach((category) => {
     category.properties.forEach((property) => {
       allowedProperties.add(property.value);
     });
@@ -3055,6 +3022,7 @@ function createTemplatedElementView({
 }
 
 // src/legacy/create-nested-templated-element-type.ts
+var STYLES_REFERENCE_UNTRACKED = /* @__PURE__ */ Symbol("styles-reference-untracked");
 function canBeNestedTemplated(element) {
   return canBeTemplated(element) && "support_nesting" in element && !!element.support_nesting;
 }
@@ -3114,6 +3082,7 @@ function createNestedTemplatedElementView({
   return AtomicElementBaseView.extend({
     _abortController: null,
     _lastResolvedSettingsHash: null,
+    _lastRenderedStyles: STYLES_REFERENCE_UNTRACKED,
     _domUpdateWasSkipped: false,
     template: false,
     attributes() {
@@ -3150,6 +3119,23 @@ function createNestedTemplatedElementView({
         this._initAlpine();
       });
       this.model.trigger("render:complete");
+      this._notifyStylesChanged();
+    },
+    // `document/elements/create` fires before the nested template has fully painted, so the
+    // styles provider rebuilds CSS too early and misses the new local class IDs. Dispatching
+    // ELEMENT_STYLE_CHANGE_EVENT here — after the template and all children are in the DOM —
+    // gives the provider a second chance to regenerate CSS against the live class names.
+    //
+    // The reference-equality guard prevents a parent re-render from emitting one event per
+    // unchanged descendant. Use a sentinel for the initial state — otherwise elements with no
+    // local styles (undefined === undefined) would never notify, and descendants like e-heading
+    // that rely on this post-paint refresh would lose their CSS after detach.
+    _notifyStylesChanged() {
+      const styles = this.model.get("styles");
+      if (this._lastRenderedStyles !== STYLES_REFERENCE_UNTRACKED && styles === this._lastRenderedStyles) {
+        return;
+      }
+      this._lastRenderedStyles = styles;
       window.dispatchEvent(new CustomEvent(import_editor_elements6.ELEMENT_STYLE_CHANGE_EVENT));
     },
     async _renderTemplate() {
@@ -3449,7 +3435,7 @@ var ReplacementBase = class {
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 var React10 = __toESM(require("react"));
 var import_react18 = require("react");
-var import_editor_controls2 = require("@elementor/editor-controls");
+var import_editor_controls3 = require("@elementor/editor-controls");
 var import_ui5 = require("@elementor/ui");
 var import_react19 = require("@floating-ui/react");
 
@@ -3620,7 +3606,7 @@ var CanvasInlineEditor = ({
     return null;
   }
   return /* @__PURE__ */ React10.createElement(import_ui5.ThemeProvider, null, /* @__PURE__ */ React10.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React10.createElement(
-    import_editor_controls2.InlineEditor,
+    import_editor_controls3.InlineEditor,
     {
       onEditorCreate: setEditor,
       mountElement: contentElement,
@@ -3672,7 +3658,7 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ React10.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })
+    /* @__PURE__ */ React10.createElement(import_editor_controls3.InlineEditorToolbar, { editor, elementId: id })
   ));
 };
 

package/dist/index.mjs

@@ -2059,6 +2059,12 @@ var timeRangeTransformer = createTransformer((value) => {
   };
 });
 
+// src/transformers/shared/icon-transformer.ts
+import {
+  getFontAwesome7IconName,
+  resolveFontAwesome7Icon
+} from "@elementor/editor-controls";
+
 // src/transformers/shared/process-svg-content.ts
 import DOMPurify2 from "dompurify";
 var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
@@ -2081,78 +2087,56 @@ function processSvgContent(svgText) {
 }
 
 // src/transformers/shared/icon-transformer.ts
-var FONT_AWESOME_JSON = {
-  width: 0,
-  height: 1,
-  path: 4
-};
-var fontAwesomeJsonCache = /* @__PURE__ */ new Map();
+var EMPTY_ICON_RESULT = { html: null, url: null };
+var ICON_SVG_SIZE = "100%";
+var ICON_SVG_OVERFLOW = "visible";
 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 { html: null, url: null };
+    return EMPTY_ICON_RESULT;
   }
-  const iconName = getFontAwesomeIconName(iconValue);
-  const jsonFileName = getFontAwesomeJsonFileName(library);
-  if (!iconName || !jsonFileName) {
-    return { html: null, url: null };
+  const iconName = getFontAwesome7IconName(iconValue);
+  if (!iconName) {
+    return EMPTY_ICON_RESULT;
   }
-  const icons = await fetchFontAwesomeIcons(jsonFileName, signal);
-  const iconData = icons?.[iconName];
+  const iconData = await resolveFontAwesome7Icon(library, iconName, signal);
   if (!iconData) {
-    return { html: null, url: null };
+    return EMPTY_ICON_RESULT;
   }
   const svgText = buildFontAwesomeSvg(iconData);
-  const html = processSvgContent(svgText);
+  if (!svgText) {
+    return EMPTY_ICON_RESULT;
+  }
+  const html = processIconSvgContent(svgText);
   return { html, url: null };
 });
-function getFontAwesomeIconName(iconValue) {
-  const match = iconValue.match(/^fa\S*\s+fa-(.+)$/);
-  return match?.[1] ?? null;
-}
-function getFontAwesomeJsonFileName(library) {
-  if (!library.startsWith("fa-")) {
+function buildFontAwesomeSvg(iconData) {
+  if (iconData.paths.length === 0) {
     return null;
   }
-  return library.replace(/^fa-/, "");
+  const pathMarkup = iconData.paths.map((path) => `<path d="${escapeSvgPath(path)}"></path>`).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${iconData.width} ${iconData.height}">${pathMarkup}</svg>`;
 }
-function getAssetsBaseUrl() {
-  const assetsUrl = window.elementorCommon?.config?.urls?.assets;
-  return typeof assetsUrl === "string" && assetsUrl !== "" ? assetsUrl : null;
+function escapeSvgPath(path) {
+  return path.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-async function fetchFontAwesomeIcons(jsonFileName, signal) {
-  const cached = fontAwesomeJsonCache.get(jsonFileName);
-  if (cached) {
-    return cached;
-  }
-  const icons = await loadFontAwesomeIcons(jsonFileName, signal);
-  if (icons) {
-    fontAwesomeJsonCache.set(jsonFileName, icons);
-  }
-  return icons;
-}
-async function loadFontAwesomeIcons(jsonFileName, signal) {
-  const assetsUrl = getAssetsBaseUrl();
-  if (!assetsUrl) {
+function processIconSvgContent(svgText) {
+  const html = processSvgContent(svgText);
+  if (!html) {
     return null;
   }
-  try {
-    const response = await fetch(`${assetsUrl}lib/font-awesome/json/${jsonFileName}.json`, { signal });
-    if (!response.ok) {
-      return null;
-    }
-    const data = await response.json();
-    return data.icons ?? null;
-  } catch {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "image/svg+xml");
+  const svgElement = doc.querySelector("svg");
+  if (!svgElement) {
     return null;
   }
-}
-function buildFontAwesomeSvg(iconData) {
-  const width = iconData[FONT_AWESOME_JSON.width];
-  const height = iconData[FONT_AWESOME_JSON.height];
-  const path = iconData[FONT_AWESOME_JSON.path];
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"><path d="${path}"></path></svg>`;
+  svgElement.setAttribute("aria-hidden", "true");
+  svgElement.style.setProperty("width", ICON_SVG_SIZE);
+  svgElement.style.setProperty("height", ICON_SVG_SIZE);
+  svgElement.style.setProperty("overflow", ICON_SVG_OVERFLOW);
+  return svgElement.outerHTML;
 }
 
 // src/transformers/shared/image-src-transformer.ts
@@ -2398,6 +2382,10 @@ var mapToFilterFunctionString = (value) => {
 };
 
 // src/transformers/styles/flex-transformer.ts
+var DEFAULT_FLEX_GROW = 0;
+var DEFAULT_FLEX_SHRINK = 1;
+var DEFAULT_FLEX_BASIS = "auto";
+var formatBasis = (basis) => typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis;
 var flexTransformer = createTransformer((value) => {
   const grow = value.flexGrow;
   const shrink = value.flexShrink;
@@ -2408,28 +2396,10 @@ var flexTransformer = createTransformer((value) => {
   if (!hasGrow && !hasShrink && !hasBasis) {
     return null;
   }
-  if (hasGrow && hasShrink && hasBasis) {
-    return `${grow} ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (hasGrow && hasShrink && !hasBasis) {
-    return `${grow} ${shrink}`;
-  }
-  if (hasGrow && !hasShrink && hasBasis) {
-    return `${grow} 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (!hasGrow && hasShrink && hasBasis) {
-    return `0 ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  if (hasGrow && !hasShrink && !hasBasis) {
-    return `${grow}`;
-  }
-  if (!hasGrow && hasShrink && !hasBasis) {
-    return `0 ${shrink}`;
-  }
-  if (!hasGrow && !hasShrink && hasBasis) {
-    return `0 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
-  }
-  return null;
+  const growOut = hasGrow ? grow : DEFAULT_FLEX_GROW;
+  const shrinkOut = hasShrink ? shrink : DEFAULT_FLEX_SHRINK;
+  const basisOut = hasBasis ? formatBasis(basis) : DEFAULT_FLEX_BASIS;
+  return `${growOut} ${shrinkOut} ${basisOut}`;
 });
 
 // src/transformers/styles/font-family-transformer.ts
@@ -3012,6 +2982,7 @@ function createTemplatedElementView({
 }
 
 // src/legacy/create-nested-templated-element-type.ts
+var STYLES_REFERENCE_UNTRACKED = /* @__PURE__ */ Symbol("styles-reference-untracked");
 function canBeNestedTemplated(element) {
   return canBeTemplated(element) && "support_nesting" in element && !!element.support_nesting;
 }
@@ -3071,6 +3042,7 @@ function createNestedTemplatedElementView({
   return AtomicElementBaseView.extend({
     _abortController: null,
     _lastResolvedSettingsHash: null,
+    _lastRenderedStyles: STYLES_REFERENCE_UNTRACKED,
     _domUpdateWasSkipped: false,
     template: false,
     attributes() {
@@ -3107,6 +3079,23 @@ function createNestedTemplatedElementView({
         this._initAlpine();
       });
       this.model.trigger("render:complete");
+      this._notifyStylesChanged();
+    },
+    // `document/elements/create` fires before the nested template has fully painted, so the
+    // styles provider rebuilds CSS too early and misses the new local class IDs. Dispatching
+    // ELEMENT_STYLE_CHANGE_EVENT here — after the template and all children are in the DOM —
+    // gives the provider a second chance to regenerate CSS against the live class names.
+    //
+    // The reference-equality guard prevents a parent re-render from emitting one event per
+    // unchanged descendant. Use a sentinel for the initial state — otherwise elements with no
+    // local styles (undefined === undefined) would never notify, and descendants like e-heading
+    // that rely on this post-paint refresh would lose their CSS after detach.
+    _notifyStylesChanged() {
+      const styles = this.model.get("styles");
+      if (this._lastRenderedStyles !== STYLES_REFERENCE_UNTRACKED && styles === this._lastRenderedStyles) {
+        return;
+      }
+      this._lastRenderedStyles = styles;
       window.dispatchEvent(new CustomEvent(ELEMENT_STYLE_CHANGE_EVENT2));
     },
     async _renderTemplate() {

package/package.json

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

package/src/__tests__/flex-transformer.test.ts

@@ -68,7 +68,7 @@ describe( 'flexTransformer', () => {
 	} );
 
 	describe( 'when only two values are provided', () => {
-		it( 'should return "grow shrink" when grow and shrink are set', () => {
+		it( 'should return "grow shrink auto" when grow and shrink are set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 1,
@@ -80,7 +80,7 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '1 2' );
+			expect( result ).toBe( '1 2 auto' );
 		} );
 
 		it( 'should return "grow 1 basis" when grow and basis are set', () => {
@@ -115,7 +115,7 @@ describe( 'flexTransformer', () => {
 	} );
 
 	describe( 'when only one value is provided', () => {
-		it( 'should return "grow" when only grow is set', () => {
+		it( 'should return "grow 1 auto" when only grow is set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 1,
@@ -127,10 +127,10 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '1' );
+			expect( result ).toBe( '1 1 auto' );
 		} );
 
-		it( 'should return "0 shrink" when only shrink is set', () => {
+		it( 'should return "0 shrink auto" when only shrink is set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: null,
@@ -142,7 +142,7 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '0 2' );
+			expect( result ).toBe( '0 2 auto' );
 		} );
 
 		it( 'should return "0 1 basis" when only basis is set', () => {
@@ -238,8 +238,8 @@ describe( 'flexTransformer', () => {
 		} );
 	} );
 
-	describe( 'CSS shorthand behavior', () => {
-		it( 'should follow CSS flex shorthand rules for single value', () => {
+	describe( 'CSS initial values for omitted longhands', () => {
+		it( 'should default shrink and basis when only grow is set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 2,
@@ -251,10 +251,10 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '2' );
+			expect( result ).toBe( '2 1 auto' );
 		} );
 
-		it( 'should follow CSS flex shorthand rules for two values', () => {
+		it( 'should default basis when grow and shrink are set', () => {
 			// Arrange.
 			const value: Flex = {
 				flexGrow: 1,
@@ -266,7 +266,7 @@ describe( 'flexTransformer', () => {
 			const result = flexTransformer( value, { key: 'flex' } );
 
 			// Assert.
-			expect( result ).toBe( '1 2' );
+			expect( result ).toBe( '1 2 auto' );
 		} );
 	} );
 } );

package/src/__tests__/prop-types.ts

@@ -36,6 +36,17 @@ export function linkPropType() {
 	} );
 }
 
+export function iconPropType() {
+	return createMockPropType( {
+		kind: 'object',
+		key: 'icon',
+		shape: {
+			value: stringPropType(),
+			library: stringPropType(),
+		},
+	} );
+}
+
 export function imagePropType() {
 	return createMockPropType( {
 		kind: 'object',

package/src/legacy/create-nested-templated-element-type.ts

@@ -12,7 +12,13 @@ import {
 	setupTwigRenderer,
 	waitForChildrenToComplete,
 } from './twig-rendering-utils';
-import { type ElementType, type ElementView, type LegacyWindow, type NestedTemplatedElementViewClass } from './types';
+import {
+	type ElementModel,
+	type ElementType,
+	type ElementView,
+	type LegacyWindow,
+	type NestedTemplatedElementViewClass,
+} from './types';
 
 export type NestedTemplatedElementConfig = TemplatedElementConfig & {
 	allowed_child_types?: string[];
@@ -21,6 +27,8 @@ export type NestedTemplatedElementConfig = TemplatedElementConfig & {
 
 export type ModelExtensions = Record< string, unknown >;
 
+const STYLES_REFERENCE_UNTRACKED = Symbol( 'styles-reference-untracked' );
+
 export type CreateNestedTemplatedElementTypeOptions = {
 	type: string;
 	renderer: DomRenderer;
@@ -108,6 +116,7 @@ export function createNestedTemplatedElementView( {
 	return AtomicElementBaseView.extend( {
 		_abortController: null as AbortController | null,
 		_lastResolvedSettingsHash: null as string | null,
+		_lastRenderedStyles: STYLES_REFERENCE_UNTRACKED as typeof STYLES_REFERENCE_UNTRACKED | ElementModel[ 'styles' ],
 		_domUpdateWasSkipped: false,
 
 		template: false,
@@ -164,6 +173,27 @@ export function createNestedTemplatedElementView( {
 			} );
 
 			this.model.trigger( 'render:complete' );
+			this._notifyStylesChanged();
+		},
+
+		// `document/elements/create` fires before the nested template has fully painted, so the
+		// styles provider rebuilds CSS too early and misses the new local class IDs. Dispatching
+		// ELEMENT_STYLE_CHANGE_EVENT here — after the template and all children are in the DOM —
+		// gives the provider a second chance to regenerate CSS against the live class names.
+		//
+		// The reference-equality guard prevents a parent re-render from emitting one event per
+		// unchanged descendant. Use a sentinel for the initial state — otherwise elements with no
+		// local styles (undefined === undefined) would never notify, and descendants like e-heading
+		// that rely on this post-paint refresh would lose their CSS after detach.
+		_notifyStylesChanged() {
+			const styles = this.model.get( 'styles' );
+
+			if ( this._lastRenderedStyles !== STYLES_REFERENCE_UNTRACKED && styles === this._lastRenderedStyles ) {
+				return;
+			}
+
+			this._lastRenderedStyles = styles;
+
 			window.dispatchEvent( new CustomEvent( ELEMENT_STYLE_CHANGE_EVENT ) );
 		},
 

package/src/legacy/types.ts

@@ -229,6 +229,7 @@ export type ElementModel = {
 	elType: string;
 	settings: BackboneModel< Props >;
 	editor_settings: Record< string, unknown >;
+	styles?: V1ElementModelProps[ 'styles' ];
 	widgetType: string;
 	editSettings?: BackboneModel< { inactive?: boolean } >;
 	elements?: BackboneCollection< ElementModel >;

package/src/transformers/shared/__tests__/icon-transformer.test.ts

@@ -1,7 +1,13 @@
-import { iconTransformer, resetFontAwesomeIconsCache } from '../icon-transformer';
+import { resetFontAwesome7IconsCache } from '@elementor/editor-controls';
+import { iconPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+
+import { iconPropType } from '../../../__tests__/prop-types';
+import { initSettingsTransformers } from '../../../init-settings-transformers';
+import { createPropsResolver } from '../../../renderers/create-props-resolver';
+import { settingsTransformersRegistry } from '../../../settings-transformers-registry';
 
 const STAR_PATH = 'M0 0h100v100H0z';
-const STAR_WIDTH = 512;
+const STAR_WIDTH = 576;
 const STAR_HEIGHT = 512;
 
 const mockFetch = ( body: unknown, ok = true ) => {
@@ -11,17 +17,46 @@ const mockFetch = ( body: unknown, ok = true ) => {
 	} );
 };
 
+function createSavedIcon( iconClass: string, library: string ) {
+	return iconPropTypeUtil.create( {
+		value: stringPropTypeUtil.create( iconClass ),
+		library: stringPropTypeUtil.create( library ),
+	} );
+}
+
+async function resolveSavedIcon( iconClass: string, library: string ) {
+	const resolve = createPropsResolver( {
+		transformers: settingsTransformersRegistry,
+		schema: { svg: iconPropType() },
+	} );
+
+	const result = await resolve( {
+		props: {
+			svg: createSavedIcon( iconClass, library ),
+		},
+	} );
+
+	return result.svg;
+}
+
 describe( 'iconTransformer', () => {
 	const originalElementorCommon = window.elementorCommon;
 
 	beforeEach( () => {
 		jest.clearAllMocks();
-		resetFontAwesomeIconsCache();
+		resetFontAwesome7IconsCache();
+		initSettingsTransformers();
 		window.elementorCommon = {
 			config: {
 				urls: {
 					assets: 'https://example.com/assets/',
 				},
+				fontAwesome: {
+					v7: {
+						jsonFiles: [ 'solid', 'regular', 'brands' ],
+						jsonBaseUrl: 'https://example.com/assets/lib/font-awesome-7/json/',
+					},
+				},
 			},
 		};
 	} );
@@ -40,10 +75,10 @@ describe( 'iconTransformer', () => {
 		} );
 
 		// Act.
-		const result = await iconTransformer( { value: 'fas fa-star', library: 'fa-solid' }, { key: 'svg' } );
+		const result = await resolveSavedIcon( 'fas fa-star', 'fa-solid' );
 
 		// Assert.
-		expect( global.fetch ).toHaveBeenCalledWith( 'https://example.com/assets/lib/font-awesome/json/solid.json', {
+		expect( global.fetch ).toHaveBeenCalledWith( 'https://example.com/assets/lib/font-awesome-7/json/solid.json', {
 			signal: undefined,
 		} );
 		expect( result ).toEqual( {
@@ -51,6 +86,45 @@ describe( 'iconTransformer', () => {
 			url: null,
 		} );
 		expect( ( result as { html: string } ).html ).toContain( 'fill="currentColor"' );
+		expect( ( result as { html: string } ).html ).toContain( `viewBox="0 0 ${ STAR_WIDTH } ${ STAR_HEIGHT }"` );
+		expect( ( result as { html: string } ).html ).toContain( 'aria-hidden="true"' );
+		expect( ( result as { html: string } ).html ).toContain( 'overflow: visible' );
+	} );
+
+	it( 'resolves icons by alias name', async () => {
+		// Arrange.
+		mockFetch( {
+			icons: {
+				headphones: [ 448, 512, [ 'headphones-simple' ], 'f025', 'M0 0' ],
+			},
+		} );
+
+		// Act.
+		const result = await resolveSavedIcon( 'fas fa-headphones-simple', 'fa-solid' );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: expect.stringContaining( 'M0 0' ),
+			url: null,
+		} );
+	} );
+
+	it( 'renders multiple paths when the icon definition contains an array', async () => {
+		// Arrange.
+		mockFetch( {
+			icons: {
+				slash: [ 640, 640, [], 'f715', [ 'M0 0', 'M10 10' ] ],
+			},
+		} );
+
+		// Act.
+		const result = await resolveSavedIcon( 'fas fa-slash', 'fa-solid' );
+
+		// Assert.
+		const html = ( result as { html: string } ).html;
+		expect( html.match( /<path/g ) ).toHaveLength( 2 );
+		expect( html ).toContain( 'M0 0' );
+		expect( html ).toContain( 'M10 10' );
 	} );
 
 	it( 'returns null html when the icon cannot be resolved', async () => {
@@ -58,17 +132,68 @@ describe( 'iconTransformer', () => {
 		mockFetch( { icons: {} } );
 
 		// Act.
-		const result = await iconTransformer( { value: 'fas fa-missing', library: 'fa-solid' }, { key: 'svg' } );
+		const result = await resolveSavedIcon( 'fas fa-missing', 'fa-solid' );
 
 		// Assert.
 		expect( result ).toEqual( { html: null, url: null } );
 	} );
 
-	it( 'returns null html when value or library is missing', async () => {
+	it( 'fetches json from the localized font awesome 7 base url', async () => {
+		// Arrange.
+		const jsonBaseUrl = 'https://cdn.example.com/fa7/json/';
+		window.elementorCommon = {
+			config: {
+				fontAwesome: {
+					v7: {
+						jsonFiles: [ 'solid', 'regular', 'brands' ],
+						jsonBaseUrl,
+					},
+				},
+			},
+		};
+		mockFetch( {
+			icons: {
+				star: [ STAR_WIDTH, STAR_HEIGHT, [], 'f005', STAR_PATH ],
+			},
+		} );
+
 		// Act.
-		const result = await iconTransformer( { value: 'fas fa-star' }, { key: 'svg' } );
+		await resolveSavedIcon( 'fas fa-star', 'fa-solid' );
 
 		// Assert.
+		expect( global.fetch ).toHaveBeenCalledWith( `${ jsonBaseUrl }solid.json`, {
+			signal: undefined,
+		} );
+	} );
+
+	it( 'does not fetch json when library is not an allowed fa7 file', async () => {
+		// Arrange.
+		mockFetch( { icons: {} } );
+
+		// Act.
+		const result = await resolveSavedIcon( 'fas fa-star', 'fa-../../wp-config' );
+
+		// Assert.
+		expect( global.fetch ).not.toHaveBeenCalled();
 		expect( result ).toEqual( { html: null, url: null } );
 	} );
+
+	it( 'returns null html when value or library is missing', async () => {
+		// Act.
+		const resolve = createPropsResolver( {
+			transformers: settingsTransformersRegistry,
+			schema: { svg: iconPropType() },
+		} );
+		const result = await resolve( {
+			props: {
+				svg: iconPropTypeUtil.create( {
+					value: stringPropTypeUtil.create( 'fas fa-star' ),
+					library: stringPropTypeUtil.create( '' ),
+				} ),
+			},
+		} );
+
+		// Assert.
+		expect( result.svg ).toEqual( { html: null, url: null } );
+	} );
 } );

package/src/transformers/shared/icon-transformer.ts

@@ -1,122 +1,86 @@
+import {
+	type FontAwesome7IconDefinition,
+	getFontAwesome7IconName,
+	resolveFontAwesome7Icon,
+} from '@elementor/editor-controls';
+
 import { createTransformer } from '../create-transformer';
 import type { TransformerOptions } from '../types';
 import { processSvgContent } from './process-svg-content';
 
+const EMPTY_ICON_RESULT = { html: null, url: null };
+const ICON_SVG_SIZE = '100%';
+const ICON_SVG_OVERFLOW = 'visible';
+
 type IconValue = {
 	value?: unknown;
 	library?: unknown;
 };
 
-type FontAwesomeIconJson = [ number, number, unknown, unknown, string ];
-
-const FONT_AWESOME_JSON = {
-	width: 0,
-	height: 1,
-	path: 4,
-} as const;
-
-const fontAwesomeJsonCache = new Map< string, Record< string, FontAwesomeIconJson > >();
-
 export const iconTransformer = createTransformer( async ( value: IconValue, { signal }: TransformerOptions ) => {
 	const iconValue = typeof value.value === 'string' ? value.value : null;
 	const library = typeof value.library === 'string' ? value.library : null;
 
 	if ( ! iconValue || ! library ) {
-		return { html: null, url: null };
+		return EMPTY_ICON_RESULT;
 	}
 
-	const iconName = getFontAwesomeIconName( iconValue );
-	const jsonFileName = getFontAwesomeJsonFileName( library );
+	const iconName = getFontAwesome7IconName( iconValue );
 
-	if ( ! iconName || ! jsonFileName ) {
-		return { html: null, url: null };
+	if ( ! iconName ) {
+		return EMPTY_ICON_RESULT;
 	}
 
-	const icons = await fetchFontAwesomeIcons( jsonFileName, signal );
-	const iconData = icons?.[ iconName ];
+	const iconData = await resolveFontAwesome7Icon( library, iconName, signal );
 
 	if ( ! iconData ) {
-		return { html: null, url: null };
+		return EMPTY_ICON_RESULT;
 	}
 
 	const svgText = buildFontAwesomeSvg( iconData );
-	const html = processSvgContent( svgText );
 
-	return { html, url: null };
-} );
+	if ( ! svgText ) {
+		return EMPTY_ICON_RESULT;
+	}
 
-function getFontAwesomeIconName( iconValue: string ): string | null {
-	const match = iconValue.match( /^fa\S*\s+fa-(.+)$/ );
+	const html = processIconSvgContent( svgText );
 
-	return match?.[ 1 ] ?? null;
-}
+	return { html, url: null };
+} );
 
-function getFontAwesomeJsonFileName( library: string ): string | null {
-	if ( ! library.startsWith( 'fa-' ) ) {
+function buildFontAwesomeSvg( iconData: FontAwesome7IconDefinition ): string | null {
+	if ( iconData.paths.length === 0 ) {
 		return null;
 	}
 
-	return library.replace( /^fa-/, '' );
-}
-
-function getAssetsBaseUrl(): string | null {
-	const assetsUrl = window.elementorCommon?.config?.urls?.assets;
+	const pathMarkup = iconData.paths.map( ( path ) => `<path d="${ escapeSvgPath( path ) }"></path>` ).join( '' );
 
-	return typeof assetsUrl === 'string' && assetsUrl !== '' ? assetsUrl : null;
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ iconData.width } ${ iconData.height }">${ pathMarkup }</svg>`;
 }
 
-async function fetchFontAwesomeIcons(
-	jsonFileName: string,
-	signal?: AbortSignal
-): Promise< Record< string, FontAwesomeIconJson > | null > {
-	const cached = fontAwesomeJsonCache.get( jsonFileName );
-
-	if ( cached ) {
-		return cached;
-	}
-
-	const icons = await loadFontAwesomeIcons( jsonFileName, signal );
-
-	if ( icons ) {
-		fontAwesomeJsonCache.set( jsonFileName, icons );
-	}
-
-	return icons;
+function escapeSvgPath( path: string ): string {
+	return path.replace( /&/g, '&amp;' ).replace( /"/g, '&quot;' ).replace( /</g, '&lt;' ).replace( />/g, '&gt;' );
 }
 
-async function loadFontAwesomeIcons(
-	jsonFileName: string,
-	signal?: AbortSignal
-): Promise< Record< string, FontAwesomeIconJson > | null > {
-	const assetsUrl = getAssetsBaseUrl();
+function processIconSvgContent( svgText: string ): string | null {
+	const html = processSvgContent( svgText );
 
-	if ( ! assetsUrl ) {
+	if ( ! html ) {
 		return null;
 	}
 
-	try {
-		const response = await fetch( `${ assetsUrl }lib/font-awesome/json/${ jsonFileName }.json`, { signal } );
-
-		if ( ! response.ok ) {
-			return null;
-		}
-
-		const data = ( await response.json() ) as { icons?: Record< string, FontAwesomeIconJson > };
+	const parser = new DOMParser();
+	const doc = parser.parseFromString( html, 'image/svg+xml' );
+	const svgElement = doc.querySelector( 'svg' );
 
-		return data.icons ?? null;
-	} catch {
+	if ( ! svgElement ) {
 		return null;
 	}
-}
-
-function buildFontAwesomeSvg( iconData: FontAwesomeIconJson ): string {
-	const width = iconData[ FONT_AWESOME_JSON.width ];
-	const height = iconData[ FONT_AWESOME_JSON.height ];
-	const path = iconData[ FONT_AWESOME_JSON.path ];
 
-	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ width } ${ height }"><path d="${ path }"></path></svg>`;
-}
+	svgElement.setAttribute( 'aria-hidden', 'true' );
+	svgElement.style.setProperty( 'width', ICON_SVG_SIZE );
+	svgElement.style.setProperty( 'height', ICON_SVG_SIZE );
+	svgElement.style.setProperty( 'overflow', ICON_SVG_OVERFLOW );
 
-export function resetFontAwesomeIconsCache() {
-	fontAwesomeJsonCache.clear();
+	return svgElement.outerHTML;
 }

package/src/transformers/styles/flex-transformer.ts

@@ -6,6 +6,13 @@ type Flex = {
 	flexBasis?: { size: number; unit: string } | string | null;
 };
 
+const DEFAULT_FLEX_GROW = 0;
+const DEFAULT_FLEX_SHRINK = 1;
+const DEFAULT_FLEX_BASIS = 'auto';
+
+const formatBasis = ( basis: NonNullable< Flex[ 'flexBasis' ] > ) =>
+	typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis;
+
 export const flexTransformer = createTransformer( ( value: Flex ) => {
 	const grow = value.flexGrow;
 	const shrink = value.flexShrink;
@@ -19,37 +26,9 @@ export const flexTransformer = createTransformer( ( value: Flex ) => {
 		return null;
 	}
 
-	if ( hasGrow && hasShrink && hasBasis ) {
-		return `${ grow } ${ shrink } ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
-
-	if ( hasGrow && hasShrink && ! hasBasis ) {
-		return `${ grow } ${ shrink }`;
-	}
-	if ( hasGrow && ! hasShrink && hasBasis ) {
-		return `${ grow } 1 ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
-	if ( ! hasGrow && hasShrink && hasBasis ) {
-		return `0 ${ shrink } ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
-
-	if ( hasGrow && ! hasShrink && ! hasBasis ) {
-		return `${ grow }`;
-	}
-	if ( ! hasGrow && hasShrink && ! hasBasis ) {
-		return `0 ${ shrink }`;
-	}
-	if ( ! hasGrow && ! hasShrink && hasBasis ) {
-		return `0 1 ${
-			typeof basis === 'object' && basis.size !== undefined ? `${ basis.size }${ basis.unit || '' }` : basis
-		}`;
-	}
+	const growOut = hasGrow ? grow : DEFAULT_FLEX_GROW;
+	const shrinkOut = hasShrink ? shrink : DEFAULT_FLEX_SHRINK;
+	const basisOut = hasBasis ? formatBasis( basis ) : DEFAULT_FLEX_BASIS;
 
-	return null;
+	return `${ growOut } ${ shrinkOut } ${ basisOut }`;
 } );