@elementor/editor-canvas 4.3.0-beta2 → 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,128 +2132,36 @@ function processSvgContent(svgText) {
 }
 
 // src/transformers/shared/icon-transformer.ts
-var FONT_AWESOME_JSON = {
-  width: 0,
-  height: 1,
-  aliases: 2,
-  unicode: 3,
-  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);
   if (!svgText) {
-    return { html: null, url: null };
+    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) {
-  const fileName = library.replace(/^fa-/, "");
-  const config = getFontAwesome7EditorConfig();
-  if (!config?.jsonFiles.includes(fileName)) {
-    return null;
-  }
-  return fileName;
-}
-function getFontAwesome7EditorConfig() {
-  const config = window.elementorCommon?.config?.fontAwesome?.v7;
-  if (!config || !Array.isArray(config.jsonFiles) || typeof config.jsonBaseUrl !== "string" || config.jsonBaseUrl === "") {
-    return null;
-  }
-  return {
-    jsonFiles: config.jsonFiles,
-    jsonBaseUrl: config.jsonBaseUrl
-  };
-}
-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 config = getFontAwesome7EditorConfig();
-  if (!config?.jsonFiles.includes(jsonFileName)) {
-    return null;
-  }
-  try {
-    const response = await fetch(`${config.jsonBaseUrl}${jsonFileName}.json`, {
-      signal
-    });
-    if (!response.ok) {
-      return null;
-    }
-    const data = await response.json();
-    const icons = data.icons;
-    if (!icons || typeof icons !== "object") {
-      return null;
-    }
-    return indexFontAwesomeIcons(icons);
-  } catch {
-    return null;
-  }
-}
-function indexFontAwesomeIcons(icons) {
-  const index = {};
-  for (const [name, iconData] of Object.entries(icons)) {
-    if (!isValidIconTuple(iconData)) {
-      continue;
-    }
-    index[name] = iconData;
-    for (const alias of iconData[FONT_AWESOME_JSON.aliases]) {
-      if (typeof alias === "string" && alias !== "" && !index[alias]) {
-        index[alias] = iconData;
-      }
-    }
-  }
-  return index;
-}
-function isValidIconTuple(iconData) {
-  return Array.isArray(iconData) && iconData.length >= 5 && typeof iconData[FONT_AWESOME_JSON.width] === "number" && typeof iconData[FONT_AWESOME_JSON.height] === "number" && Array.isArray(iconData[FONT_AWESOME_JSON.aliases]);
-}
 function buildFontAwesomeSvg(iconData) {
-  const width = iconData[FONT_AWESOME_JSON.width];
-  const height = iconData[FONT_AWESOME_JSON.height];
-  const paths = normalizePaths(iconData[FONT_AWESOME_JSON.path]);
-  if (paths.length === 0) {
+  if (iconData.paths.length === 0) {
     return null;
   }
-  const pathMarkup = paths.map((path) => `<path d="${escapeSvgPath(path)}"></path>`).join("");
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">${pathMarkup}</svg>`;
-}
-function normalizePaths(pathData) {
-  if (typeof pathData === "string" && pathData !== "") {
-    return [pathData];
-  }
-  if (!Array.isArray(pathData)) {
-    return [];
-  }
-  return pathData.filter((path) => typeof path === "string" && path !== "");
+  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 escapeSvgPath(path) {
   return path.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -2267,9 +2178,9 @@ function processIconSvgContent(svgText) {
     return null;
   }
   svgElement.setAttribute("aria-hidden", "true");
-  svgElement.style.setProperty("width", "100%");
-  svgElement.style.setProperty("height", "100%");
-  svgElement.style.setProperty("overflow", "visible");
+  svgElement.style.setProperty("width", ICON_SVG_SIZE);
+  svgElement.style.setProperty("height", ICON_SVG_SIZE);
+  svgElement.style.setProperty("overflow", ICON_SVG_OVERFLOW);
   return svgElement.outerHTML;
 }
 
@@ -2665,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);
     });
@@ -3111,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;
 }
@@ -3170,6 +3082,7 @@ function createNestedTemplatedElementView({
   return AtomicElementBaseView.extend({
     _abortController: null,
     _lastResolvedSettingsHash: null,
+    _lastRenderedStyles: STYLES_REFERENCE_UNTRACKED,
     _domUpdateWasSkipped: false,
     template: false,
     attributes() {
@@ -3206,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() {
@@ -3505,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");
 
@@ -3676,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,
@@ -3728,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,128 +2087,36 @@ function processSvgContent(svgText) {
 }
 
 // src/transformers/shared/icon-transformer.ts
-var FONT_AWESOME_JSON = {
-  width: 0,
-  height: 1,
-  aliases: 2,
-  unicode: 3,
-  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);
   if (!svgText) {
-    return { html: null, url: null };
+    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) {
-  const fileName = library.replace(/^fa-/, "");
-  const config = getFontAwesome7EditorConfig();
-  if (!config?.jsonFiles.includes(fileName)) {
-    return null;
-  }
-  return fileName;
-}
-function getFontAwesome7EditorConfig() {
-  const config = window.elementorCommon?.config?.fontAwesome?.v7;
-  if (!config || !Array.isArray(config.jsonFiles) || typeof config.jsonBaseUrl !== "string" || config.jsonBaseUrl === "") {
-    return null;
-  }
-  return {
-    jsonFiles: config.jsonFiles,
-    jsonBaseUrl: config.jsonBaseUrl
-  };
-}
-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 config = getFontAwesome7EditorConfig();
-  if (!config?.jsonFiles.includes(jsonFileName)) {
-    return null;
-  }
-  try {
-    const response = await fetch(`${config.jsonBaseUrl}${jsonFileName}.json`, {
-      signal
-    });
-    if (!response.ok) {
-      return null;
-    }
-    const data = await response.json();
-    const icons = data.icons;
-    if (!icons || typeof icons !== "object") {
-      return null;
-    }
-    return indexFontAwesomeIcons(icons);
-  } catch {
-    return null;
-  }
-}
-function indexFontAwesomeIcons(icons) {
-  const index = {};
-  for (const [name, iconData] of Object.entries(icons)) {
-    if (!isValidIconTuple(iconData)) {
-      continue;
-    }
-    index[name] = iconData;
-    for (const alias of iconData[FONT_AWESOME_JSON.aliases]) {
-      if (typeof alias === "string" && alias !== "" && !index[alias]) {
-        index[alias] = iconData;
-      }
-    }
-  }
-  return index;
-}
-function isValidIconTuple(iconData) {
-  return Array.isArray(iconData) && iconData.length >= 5 && typeof iconData[FONT_AWESOME_JSON.width] === "number" && typeof iconData[FONT_AWESOME_JSON.height] === "number" && Array.isArray(iconData[FONT_AWESOME_JSON.aliases]);
-}
 function buildFontAwesomeSvg(iconData) {
-  const width = iconData[FONT_AWESOME_JSON.width];
-  const height = iconData[FONT_AWESOME_JSON.height];
-  const paths = normalizePaths(iconData[FONT_AWESOME_JSON.path]);
-  if (paths.length === 0) {
+  if (iconData.paths.length === 0) {
     return null;
   }
-  const pathMarkup = paths.map((path) => `<path d="${escapeSvgPath(path)}"></path>`).join("");
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">${pathMarkup}</svg>`;
-}
-function normalizePaths(pathData) {
-  if (typeof pathData === "string" && pathData !== "") {
-    return [pathData];
-  }
-  if (!Array.isArray(pathData)) {
-    return [];
-  }
-  return pathData.filter((path) => typeof path === "string" && path !== "");
+  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 escapeSvgPath(path) {
   return path.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -2219,9 +2133,9 @@ function processIconSvgContent(svgText) {
     return null;
   }
   svgElement.setAttribute("aria-hidden", "true");
-  svgElement.style.setProperty("width", "100%");
-  svgElement.style.setProperty("height", "100%");
-  svgElement.style.setProperty("overflow", "visible");
+  svgElement.style.setProperty("width", ICON_SVG_SIZE);
+  svgElement.style.setProperty("height", ICON_SVG_SIZE);
+  svgElement.style.setProperty("overflow", ICON_SVG_OVERFLOW);
   return svgElement.outerHTML;
 }
 
@@ -3068,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;
 }
@@ -3127,6 +3042,7 @@ function createNestedTemplatedElementView({
   return AtomicElementBaseView.extend({
     _abortController: null,
     _lastResolvedSettingsHash: null,
+    _lastRenderedStyles: STYLES_REFERENCE_UNTRACKED,
     _domUpdateWasSkipped: false,
     template: false,
     attributes() {
@@ -3163,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-beta2",
+  "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-beta2",
-    "@elementor/editor-controls": "4.3.0-beta2",
-    "@elementor/editor-documents": "4.3.0-beta2",
-    "@elementor/editor-elements": "4.3.0-beta2",
-    "@elementor/editor-interactions": "4.3.0-beta2",
-    "@elementor/editor-mcp": "4.3.0-beta2",
-    "@elementor/editor-notifications": "4.3.0-beta2",
-    "@elementor/editor-props": "4.3.0-beta2",
-    "@elementor/editor-responsive": "4.3.0-beta2",
-    "@elementor/editor-styles": "4.3.0-beta2",
-    "@elementor/editor-styles-repository": "4.3.0-beta2",
-    "@elementor/editor-ui": "4.3.0-beta2",
-    "@elementor/editor-v1-adapters": "4.3.0-beta2",
-    "@elementor/events": "4.3.0-beta2",
-    "@elementor/http-client": "4.3.0-beta2",
-    "@elementor/schema": "4.3.0-beta2",
-    "@elementor/twing": "4.3.0-beta2",
+    "@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-beta2",
-    "@elementor/wp-media": "4.3.0-beta2",
+    "@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/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,10 +1,10 @@
+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';
-import { resetFontAwesomeIconsCache } from '../icon-transformer';
 
 const STAR_PATH = 'M0 0h100v100H0z';
 const STAR_WIDTH = 576;
@@ -44,7 +44,7 @@ describe( 'iconTransformer', () => {
 
 	beforeEach( () => {
 		jest.clearAllMocks();
-		resetFontAwesomeIconsCache();
+		resetFontAwesome7IconsCache();
 		initSettingsTransformers();
 		window.elementorCommon = {
 			config: {

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

@@ -1,55 +1,46 @@
+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 | string[] ];
-
-type FontAwesome7EditorConfig = {
-	jsonFiles: string[];
-	jsonBaseUrl: string;
-};
-
-const FONT_AWESOME_JSON = {
-	width: 0,
-	height: 1,
-	aliases: 2,
-	unicode: 3,
-	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 );
 
 	if ( ! svgText ) {
-		return { html: null, url: null };
+		return EMPTY_ICON_RESULT;
 	}
 
 	const html = processIconSvgContent( svgText );
@@ -57,146 +48,14 @@ export const iconTransformer = createTransformer( async ( value: IconValue, { si
 	return { html, url: null };
 } );
 
-function getFontAwesomeIconName( iconValue: string ): string | null {
-	const match = iconValue.match( /^fa\S*\s+fa-(.+)$/ );
-
-	return match?.[ 1 ] ?? null;
-}
-
-function getFontAwesomeJsonFileName( library: string ): string | null {
-	const fileName = library.replace( /^fa-/, '' );
-	const config = getFontAwesome7EditorConfig();
-
-	if ( ! config?.jsonFiles.includes( fileName ) ) {
-		return null;
-	}
-
-	return fileName;
-}
-
-function getFontAwesome7EditorConfig(): FontAwesome7EditorConfig | null {
-	const config = window.elementorCommon?.config?.fontAwesome?.v7;
-
-	if (
-		! config ||
-		! Array.isArray( config.jsonFiles ) ||
-		typeof config.jsonBaseUrl !== 'string' ||
-		config.jsonBaseUrl === ''
-	) {
-		return null;
-	}
-
-	return {
-		jsonFiles: config.jsonFiles,
-		jsonBaseUrl: config.jsonBaseUrl,
-	};
-}
-
-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;
-}
-
-async function loadFontAwesomeIcons(
-	jsonFileName: string,
-	signal?: AbortSignal
-): Promise< Record< string, FontAwesomeIconJson > | null > {
-	const config = getFontAwesome7EditorConfig();
-
-	if ( ! config?.jsonFiles.includes( jsonFileName ) ) {
-		return null;
-	}
-
-	try {
-		const response = await fetch( `${ config.jsonBaseUrl }${ jsonFileName }.json`, {
-			signal,
-		} );
-
-		if ( ! response.ok ) {
-			return null;
-		}
-
-		const data = ( await response.json() ) as { icons?: Record< string, FontAwesomeIconJson > };
-		const icons = data.icons;
-
-		if ( ! icons || typeof icons !== 'object' ) {
-			return null;
-		}
-
-		return indexFontAwesomeIcons( icons );
-	} catch {
-		return null;
-	}
-}
-
-function indexFontAwesomeIcons( icons: Record< string, FontAwesomeIconJson > ): Record< string, FontAwesomeIconJson > {
-	const index: Record< string, FontAwesomeIconJson > = {};
-
-	for ( const [ name, iconData ] of Object.entries( icons ) ) {
-		if ( ! isValidIconTuple( iconData ) ) {
-			continue;
-		}
-
-		index[ name ] = iconData;
-
-		for ( const alias of iconData[ FONT_AWESOME_JSON.aliases ] ) {
-			if ( typeof alias === 'string' && alias !== '' && ! index[ alias ] ) {
-				index[ alias ] = iconData;
-			}
-		}
-	}
-
-	return index;
-}
-
-function isValidIconTuple( iconData: unknown ): iconData is FontAwesomeIconJson {
-	return (
-		Array.isArray( iconData ) &&
-		iconData.length >= 5 &&
-		typeof iconData[ FONT_AWESOME_JSON.width ] === 'number' &&
-		typeof iconData[ FONT_AWESOME_JSON.height ] === 'number' &&
-		Array.isArray( iconData[ FONT_AWESOME_JSON.aliases ] )
-	);
-}
-
-function buildFontAwesomeSvg( iconData: FontAwesomeIconJson ): string | null {
-	const width = iconData[ FONT_AWESOME_JSON.width ];
-	const height = iconData[ FONT_AWESOME_JSON.height ];
-	const paths = normalizePaths( iconData[ FONT_AWESOME_JSON.path ] );
-
-	if ( paths.length === 0 ) {
+function buildFontAwesomeSvg( iconData: FontAwesome7IconDefinition ): string | null {
+	if ( iconData.paths.length === 0 ) {
 		return null;
 	}
 
-	const pathMarkup = paths.map( ( path ) => `<path d="${ escapeSvgPath( path ) }"></path>` ).join( '' );
+	const pathMarkup = iconData.paths.map( ( path ) => `<path d="${ escapeSvgPath( path ) }"></path>` ).join( '' );
 
-	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ width } ${ height }">${ pathMarkup }</svg>`;
-}
-
-function normalizePaths( pathData: string | string[] ): string[] {
-	if ( typeof pathData === 'string' && pathData !== '' ) {
-		return [ pathData ];
-	}
-
-	if ( ! Array.isArray( pathData ) ) {
-		return [];
-	}
-
-	return pathData.filter( ( path ): path is string => typeof path === 'string' && path !== '' );
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ iconData.width } ${ iconData.height }">${ pathMarkup }</svg>`;
 }
 
 function escapeSvgPath( path: string ): string {
@@ -219,13 +78,9 @@ function processIconSvgContent( svgText: string ): string | null {
 	}
 
 	svgElement.setAttribute( 'aria-hidden', 'true' );
-	svgElement.style.setProperty( 'width', '100%' );
-	svgElement.style.setProperty( 'height', '100%' );
-	svgElement.style.setProperty( 'overflow', 'visible' );
+	svgElement.style.setProperty( 'width', ICON_SVG_SIZE );
+	svgElement.style.setProperty( 'height', ICON_SVG_SIZE );
+	svgElement.style.setProperty( 'overflow', ICON_SVG_OVERFLOW );
 
 	return svgElement.outerHTML;
 }
-
-export function resetFontAwesomeIconsCache() {
-	fontAwesomeJsonCache.clear();
-}