@elementor/editor-canvas 3.35.0-359 → 3.35.0-360

package/dist/index.js

@@ -281,8 +281,8 @@ var subscribeToStylesRepository = () => {
   });
 };
 var renameClass = (oldClassName, newClassName) => {
-  Object.values((0, import_editor_documents.getV1DocumentsManager)().documents).forEach((document2) => {
-    const container = document2.container;
+  Object.values((0, import_editor_documents.getV1DocumentsManager)().documents).forEach((document) => {
+    const container = document.container;
     container.view?.el?.querySelectorAll(`.elementor .${oldClassName}`).forEach((element) => {
       element.classList.replace(oldClassName, newClassName);
     });
@@ -613,14 +613,14 @@ function useDocumentsCssLinks() {
     }));
   });
 }
-function getDocumentsIdsInCanvas(document2) {
-  return [...document2.body.querySelectorAll(`[${DOCUMENT_WRAPPER_ATTR}]`) ?? []].map(
+function getDocumentsIdsInCanvas(document) {
+  return [...document.body.querySelectorAll(`[${DOCUMENT_WRAPPER_ATTR}]`) ?? []].map(
     (el) => el.getAttribute(DOCUMENT_WRAPPER_ATTR) || ""
   );
 }
-function getDocumentsCssLinks(document2) {
+function getDocumentsCssLinks(document) {
   return [
-    ...document2.head.querySelectorAll(
+    ...document.head.querySelectorAll(
       `link[rel="stylesheet"][id^=${CSS_LINK_ID_PREFIX}][id$=${CSS_LINK_ID_SUFFIX}]`
     ) ?? []
   ];
@@ -1455,7 +1455,7 @@ function initStyleTransformers() {
 }
 
 // src/legacy/init-legacy-views.ts
-var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-dom-renderer.ts
@@ -1503,98 +1503,6 @@ function escapeURL(value) {
   }
 }
 
-// src/utils/inline-editing-utils.ts
-var import_editor_elements3 = require("@elementor/editor-elements");
-var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
-var WIDGET_PROPERTY_MAP = {
-  "e-heading": "title",
-  "e-paragraph": "paragraph"
-};
-var EXPERIMENT_KEY = "v4-inline-text-editing";
-var legacyWindow = window;
-var shouldRenderInlineEditingView = (elementType) => {
-  return elementType in WIDGET_PROPERTY_MAP && (0, import_editor_v1_adapters8.isExperimentActive)(EXPERIMENT_KEY);
-};
-var getWidgetType = (container) => {
-  return container?.model?.get("widgetType") ?? container?.model?.get("elType") ?? null;
-};
-var getHtmlPropertyName = (container) => {
-  const widgetType = getWidgetType(container);
-  if (!widgetType) {
-    return "";
-  }
-  const propsSchema = (0, import_editor_elements3.getElementType)(widgetType)?.propsSchema;
-  if (WIDGET_PROPERTY_MAP[widgetType]) {
-    return WIDGET_PROPERTY_MAP[widgetType];
-  }
-  if (!propsSchema) {
-    return "";
-  }
-  const entry = Object.entries(propsSchema).find(([, propType]) => {
-    switch (propType.kind) {
-      case "union":
-        return propType.prop_types.html;
-      case "object":
-        return propType.shape.html;
-      case "array":
-        return "key" in propType.item_prop_type && propType.item_prop_type.key === "html";
-    }
-    return propType.key === "html";
-  });
-  return entry?.[0] ?? "";
-};
-var getHtmlPropType = (container) => {
-  const widgetType = getWidgetType(container);
-  if (!widgetType) {
-    return null;
-  }
-  const propsSchema = (0, import_editor_elements3.getElementType)(widgetType)?.propsSchema;
-  const propertyName = getHtmlPropertyName(container) ?? null;
-  return propsSchema?.[propertyName] ?? null;
-};
-var getInlineEditablePropertyName = (container) => {
-  return getHtmlPropertyName(container) ?? "";
-};
-var getBlockedValue = (value, tag) => {
-  if (!value) {
-    return "";
-  }
-  if (!tag) {
-    return value;
-  }
-  const pseudoElement = document.createElement("div");
-  pseudoElement.innerHTML = value;
-  if (!pseudoElement?.children.length) {
-    return `<${tag}>${value}</${tag}>`;
-  }
-  const firstChild = pseudoElement.children[0];
-  const lastChild = Array.from(pseudoElement.children).slice(-1)[0];
-  if (firstChild === lastChild && pseudoElement.textContent === firstChild.textContent) {
-    return compareTag(firstChild, tag) ? value : `<${tag}>${firstChild.innerHTML}</${tag}>`;
-  }
-  if (!value.startsWith(`<${tag}`) || !value.endsWith(`</${tag}>`)) {
-    return `<${tag}>${value}</${tag}>`;
-  }
-  if (firstChild !== lastChild || !compareTag(firstChild, tag)) {
-    return `<${tag}>${value}</${tag}>`;
-  }
-  return value;
-};
-var compareTag = (el, tag) => {
-  return el.tagName.toUpperCase() === tag.toUpperCase();
-};
-var getInitialPopoverPosition = () => {
-  const positionFallback = { left: 0, top: 0 };
-  const iFrameElement = legacyWindow?.elementor?.$preview?.get(0);
-  const iFramePosition = iFrameElement?.getBoundingClientRect() ?? positionFallback;
-  const previewElement = legacyWindow?.elementor?.$previewWrapper?.get(0);
-  const previewPosition = previewElement ? { left: previewElement.scrollLeft, top: previewElement.scrollTop } : positionFallback;
-  return {
-    left: iFramePosition.left + previewPosition.left,
-    top: iFramePosition.top + previewPosition.top
-  };
-};
-
 // src/legacy/create-element-type.ts
 function createElementType(type) {
   const legacyWindow2 = window;
@@ -1671,34 +1579,7 @@ function createElementViewClassDeclaration() {
   };
 }
 
-// src/legacy/create-inline-editing-element-type.tsx
-var React5 = __toESM(require("react"));
-var import_client = require("react-dom/client");
-var import_editor_controls2 = require("@elementor/editor-controls");
-var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_props3 = require("@elementor/editor-props");
-var import_editor_ui = require("@elementor/editor-ui");
-
 // src/legacy/create-templated-element-type.ts
-function createTemplatedElementType({
-  type,
-  renderer,
-  element
-}) {
-  const legacyWindow2 = window;
-  return class extends legacyWindow2.elementor.modules.elements.types.Widget {
-    getType() {
-      return type;
-    }
-    getView() {
-      return createTemplatedElementView({
-        type,
-        renderer,
-        element
-      });
-    }
-  };
-}
 function canBeTemplated(element) {
   return !!(element.atomic_props_schema && element.twig_templates && element.twig_main_template && element.base_styles_dictionary);
 }
@@ -1730,9 +1611,9 @@ function createTemplatedElementView({
     render() {
       this.#abortController?.abort();
       this.#abortController = new AbortController();
-      const process = signalizedProcess(this.#abortController.signal).then(() => this.#beforeRender()).then(() => this._renderTemplate()).then(() => {
+      const process = signalizedProcess(this.#abortController.signal).then(() => this._beforeRender()).then(() => this._renderTemplate()).then(() => {
         this._renderChildren();
-        this.#afterRender();
+        this._afterRender();
       });
       return process.execute();
     }
@@ -1763,13 +1644,13 @@ function createTemplatedElementView({
     afterSettingsResolve(settings) {
       return settings;
     }
-    #beforeRender() {
+    _beforeRender() {
       this._ensureViewIsIntact();
       this._isRendering = true;
       this.resetChildViewContainer();
       this.triggerMethod("before:render", this);
     }
-    #afterRender() {
+    _afterRender() {
       this._isRendering = false;
       this.isRendered = true;
       this.triggerMethod("render", this);
@@ -1777,141 +1658,262 @@ function createTemplatedElementView({
   };
 }
 
-// src/legacy/create-inline-editing-element-type.tsx
-function createInlineEditingElementType({
-  type,
-  renderer,
-  element
-}) {
-  return class extends legacyWindow.elementor.modules.elements.types.Widget {
-    getType() {
-      return type;
-    }
-    getView() {
-      return createInlineEditingElementView({
-        type,
-        renderer,
-        element
-      });
-    }
+// src/legacy/replacements/inline-editing/inline-editing-elements.tsx
+var React5 = __toESM(require("react"));
+var import_client = require("react-dom/client");
+var import_editor_controls2 = require("@elementor/editor-controls");
+var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_props3 = require("@elementor/editor-props");
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_ui4 = require("@elementor/ui");
+
+// src/legacy/replacements/base.ts
+var ReplacementBase = class {
+  getSetting;
+  setSetting;
+  element;
+  type;
+  id;
+  refreshView;
+  constructor(settings) {
+    this.getSetting = settings.getSetting;
+    this.setSetting = settings.setSetting;
+    this.element = settings.element;
+    this.type = settings.type;
+    this.id = settings.id;
+    this.refreshView = settings.refreshView;
+  }
+  static getTypes() {
+    return null;
+  }
+  render() {
+  }
+  onDestroy() {
+  }
+  _beforeRender() {
+  }
+  _afterRender() {
+  }
+  shouldRenderReplacement() {
+    return true;
+  }
+};
+
+// src/legacy/replacements/inline-editing/inline-editing-utils.ts
+var INLINE_EDITING_PROPERTY_PER_TYPE = {
+  "e-heading": "title",
+  "e-paragraph": "paragraph"
+};
+var legacyWindow = window;
+var getInitialPopoverPosition = () => {
+  const positionFallback = { left: 0, top: 0 };
+  const iFrameElement = legacyWindow?.elementor?.$preview?.get(0);
+  const iFramePosition = iFrameElement?.getBoundingClientRect() ?? positionFallback;
+  const previewElement = legacyWindow?.elementor?.$previewWrapper?.get(0);
+  const previewPosition = previewElement ? { left: previewElement.scrollLeft, top: previewElement.scrollTop } : positionFallback;
+  return {
+    left: iFramePosition.left + previewPosition.left,
+    top: iFramePosition.top + previewPosition.top
   };
-}
-function createInlineEditingElementView({
-  type,
-  renderer,
-  element
-}) {
-  const TemplatedView = createTemplatedElementView({ type, renderer, element });
-  Object.entries(element.twig_templates).forEach(([key, template]) => {
-    renderer.register(key, template);
-  });
-  return class extends TemplatedView {
-    inlineEditorRoot = null;
-    handlerAttached = false;
-    render() {
-      if (this.inlineEditorRoot) {
-        this.resetInlineEditorRoot();
-      }
-      if (!this.isValueDynamic() && !this.handlerAttached) {
-        this.$el.on("dblclick", "*", this.handleRenderInlineEditor.bind(this));
-        this.handlerAttached = true;
-      }
-      TemplatedView.prototype.render.apply(this);
-    }
-    handleRenderInlineEditor(event) {
-      event.stopPropagation();
-      this.$el.off("dblclick", "*");
-      this.handlerAttached = false;
-      if (!this.isValueDynamic()) {
-        this.renderInlineEditor();
-      }
+};
+
+// src/legacy/replacements/inline-editing/inline-editing-elements.tsx
+var EXPERIMENT_KEY = "v4-inline-text-editing";
+var InlineEditingReplacement = class extends ReplacementBase {
+  inlineEditorRoot = null;
+  handlerAttached = false;
+  getReplacementKey() {
+    return "inline-editing";
+  }
+  static getTypes() {
+    return Object.keys(INLINE_EDITING_PROPERTY_PER_TYPE);
+  }
+  isEditingModeActive() {
+    return !!this.inlineEditorRoot;
+  }
+  shouldRenderReplacement() {
+    return (0, import_editor_v1_adapters8.isExperimentActive)(EXPERIMENT_KEY) && this.isEditingModeActive() && !this.isValueDynamic();
+  }
+  handleRenderInlineEditor = (event) => {
+    event.stopPropagation();
+    if (!this.isValueDynamic()) {
+      this.renderInlineEditor();
     }
-    handleUnmountInlineEditor(event) {
-      event.stopPropagation();
-      this.unmountInlineEditor();
+  };
+  handleUnmountInlineEditor = (event) => {
+    event.stopPropagation();
+    this.unmountInlineEditor();
+  };
+  onDestroy() {
+    this.resetInlineEditorRoot();
+  }
+  _beforeRender() {
+    this.resetInlineEditorRoot();
+  }
+  _afterRender() {
+    if (!this.isValueDynamic() && !this.handlerAttached) {
+      this.element.addEventListener("dblclick", this.handleRenderInlineEditor);
+      this.handlerAttached = true;
+    }
+  }
+  resetInlineEditorRoot() {
+    this.element.removeEventListener("dblclick", this.handleRenderInlineEditor);
+    this.handlerAttached = false;
+    this.inlineEditorRoot?.unmount?.();
+    this.inlineEditorRoot = null;
+  }
+  unmountInlineEditor() {
+    this.resetInlineEditorRoot();
+    this.refreshView();
+  }
+  isValueDynamic() {
+    const settingKey = this.getInlineEditablePropertyName();
+    const propValue = this.getSetting(settingKey);
+    return propValue?.$$type === "dynamic";
+  }
+  getInlineEditablePropertyName() {
+    return INLINE_EDITING_PROPERTY_PER_TYPE[this.type] ?? "";
+  }
+  getHtmlPropType() {
+    const propSchema = (0, import_editor_elements3.getElementType)(this.type)?.propsSchema;
+    const propertyName = this.getInlineEditablePropertyName();
+    return propSchema?.[propertyName] ?? null;
+  }
+  getContentValue() {
+    const prop = this.getHtmlPropType();
+    const defaultValue = prop?.default?.value ?? "";
+    const settingKey = this.getInlineEditablePropertyName();
+    return import_editor_props3.htmlPropTypeUtil.extract(this.getSetting(settingKey) ?? null) ?? import_editor_props3.htmlPropTypeUtil.extract(prop?.default ?? null) ?? defaultValue ?? "";
+  }
+  setContentValue(value) {
+    const settingKey = this.getInlineEditablePropertyName();
+    const valueToSave = value ? import_editor_props3.htmlPropTypeUtil.create(value) : null;
+    this.setSetting(settingKey, valueToSave);
+  }
+  getExpectedTag() {
+    const propsSchema = (0, import_editor_elements3.getElementType)(this.type)?.propsSchema;
+    if (!propsSchema?.tag) {
+      return null;
     }
-    onDestroy(...args) {
+    const tagSettingKey = "tag";
+    return import_editor_props3.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props3.stringPropTypeUtil.extract(propsSchema.tag.default ?? null) ?? null;
+  }
+  renderInlineEditor() {
+    const propValue = this.getContentValue();
+    const classes = (this.element.children?.[0]?.classList.toString() ?? "") + " strip-styles";
+    const expectedTag = this.getExpectedTag();
+    this.element.innerHTML = "";
+    if (this.inlineEditorRoot) {
       this.resetInlineEditorRoot();
-      TemplatedView.prototype.onDestroy.apply(this, args);
     }
-    resetInlineEditorRoot() {
-      this.$el.off("dblclick", "*");
-      this.handlerAttached = false;
-      this.inlineEditorRoot?.unmount?.();
-      this.inlineEditorRoot = null;
+    this.inlineEditorRoot = (0, import_client.createRoot)(this.element);
+    this.inlineEditorRoot.render(
+      /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(
+        import_editor_controls2.InlineEditor,
+        {
+          attributes: { class: classes },
+          value: propValue,
+          setValue: this.setContentValue.bind(this),
+          onBlur: this.handleUnmountInlineEditor.bind(this),
+          autofocus: true,
+          showToolbar: true,
+          getInitialPopoverPosition,
+          expectedTag
+        }
+      ))
+    );
+  }
+};
+
+// src/legacy/replacements/manager.ts
+var replacements = /* @__PURE__ */ new Map();
+var initViewReplacements = () => {
+  registerReplacement(InlineEditingReplacement);
+};
+var registerReplacement = (replacement) => {
+  const types = replacement.getTypes();
+  if (!types) {
+    return;
+  }
+  types.forEach((type) => {
+    replacements.set(type, replacement);
+  });
+};
+var getReplacement = (type) => {
+  return replacements.get(type) ?? null;
+};
+var createViewWithReplacements = (options) => {
+  const TemplatedView = createTemplatedElementView(options);
+  return class extends TemplatedView {
+    #replacement = null;
+    #config;
+    constructor(...args) {
+      super(...args);
+      const settings = this.model.get("settings");
+      this.#config = {
+        getSetting: settings.get.bind(settings),
+        setSetting: settings.set.bind(settings),
+        element: this.el,
+        type: this?.model?.get("widgetType") ?? this.container?.model?.get("elType") ?? null,
+        id: this?.model?.get("id") ?? null,
+        refreshView: this.render.bind(this)
+      };
     }
-    unmountInlineEditor() {
-      this.resetInlineEditorRoot();
+    refreshView() {
       this.render();
     }
-    isValueDynamic() {
-      const settingKey = getInlineEditablePropertyName(this.container);
-      const propValue = this.model.get("settings")?.get(settingKey);
-      return propValue?.$$type === "dynamic";
-    }
-    getContentValue() {
-      const prop = getHtmlPropType(this.container);
-      const defaultValue = prop?.default?.value ?? "";
-      const settingKey = getInlineEditablePropertyName(this.container);
-      return import_editor_props3.htmlPropTypeUtil.extract(this.model.get("settings")?.get(settingKey) ?? null) ?? import_editor_props3.htmlPropTypeUtil.extract(prop?.default ?? null) ?? defaultValue ?? "";
-    }
-    setContentValue(value) {
-      const settingKey = getInlineEditablePropertyName(this.container);
-      const valueToSave = value ? import_editor_props3.htmlPropTypeUtil.create(value) : null;
-      this.model.get("settings")?.set(settingKey, valueToSave);
-    }
-    getExpectedTag() {
-      const widgetType = getWidgetType(this.container);
-      if (!widgetType) {
-        return null;
+    render() {
+      const config = this.#config;
+      const widgetType = config.type;
+      const ReplacementClass = widgetType ? getReplacement(widgetType) : null;
+      if (ReplacementClass && !this.#replacement) {
+        this.#replacement = new ReplacementClass(config);
       }
-      const propsSchema = (0, import_editor_elements4.getElementType)(widgetType)?.propsSchema;
-      if (!propsSchema?.tag) {
-        return null;
+      if (!this.#replacement?.shouldRenderReplacement()) {
+        return TemplatedView.prototype.render.apply(this);
       }
-      return import_editor_props3.stringPropTypeUtil.extract(this.model.get("settings").get("tag") ?? null) ?? import_editor_props3.stringPropTypeUtil.extract(propsSchema.tag.default ?? null) ?? null;
-    }
-    ensureProperValue() {
-      const actualValue = this.getContentValue();
-      const tagSettings = this.getExpectedTag();
-      const wrappedValue = getBlockedValue(actualValue, tagSettings);
-      if (actualValue !== wrappedValue) {
-        this.setContentValue(wrappedValue);
+      this.#replacement.render();
+    }
+    onDestroy() {
+      if (this.#replacement) {
+        this.#replacement.onDestroy();
+        this.#replacement = null;
       }
+      TemplatedView.prototype.onDestroy.apply(this);
     }
-    renderInlineEditor() {
-      this.ensureProperValue();
-      const propValue = this.getContentValue();
-      const settingKey = getInlineEditablePropertyName(this.container);
-      const classes = (this.el?.children?.[0]?.classList.toString() ?? "") + " strip-styles";
-      const expectedTag = this.getExpectedTag();
-      const setValue = (value) => {
-        const valueToSave = value ? import_editor_props3.htmlPropTypeUtil.create(value) : null;
-        this.model.get("settings")?.set(settingKey, valueToSave);
-      };
-      this.$el.html("");
-      if (this.inlineEditorRoot) {
-        this.resetInlineEditorRoot();
+    _afterRender() {
+      if (this.#replacement) {
+        this.#replacement._afterRender();
       }
-      this.inlineEditorRoot = (0, import_client.createRoot)(this.el);
-      this.inlineEditorRoot.render(
-        /* @__PURE__ */ React5.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React5.createElement(
-          import_editor_controls2.InlineEditor,
-          {
-            attributes: { class: classes },
-            value: propValue,
-            setValue,
-            onBlur: this.handleUnmountInlineEditor.bind(this),
-            autofocus: true,
-            showToolbar: true,
-            getInitialPopoverPosition,
-            expectedTag
-          }
-        ))
-      );
+      TemplatedView.prototype._afterRender.apply(this);
+    }
+    _beforeRender() {
+      if (this.#replacement) {
+        this.#replacement._beforeRender();
+      }
+      TemplatedView.prototype._beforeRender.apply(this);
     }
   };
-}
+};
+var createTemplatedElementTypeWithReplacements = ({
+  type,
+  renderer,
+  element
+}) => {
+  const legacyWindow2 = window;
+  return class extends legacyWindow2.elementor.modules.elements.types.Widget {
+    getType() {
+      return type;
+    }
+    getView() {
+      return createViewWithReplacements({
+        type,
+        renderer,
+        element
+      });
+    }
+  };
+};
 
 // src/legacy/init-legacy-views.ts
 var elementsLegacyTypes = {};
@@ -1920,7 +1922,7 @@ function registerElementType(type, elementTypeGenerator) {
 }
 function initLegacyViews() {
   (0, import_editor_v1_adapters9.__privateListenTo)((0, import_editor_v1_adapters9.v1ReadyEvent)(), () => {
-    const config = (0, import_editor_elements5.getWidgetsCache)() ?? {};
+    const config = (0, import_editor_elements4.getWidgetsCache)() ?? {};
     const legacyWindow2 = window;
     const renderer = createDomRenderer();
     Object.entries(config).forEach(([type, element]) => {
@@ -1931,7 +1933,7 @@ function initLegacyViews() {
       if (!!elementsLegacyTypes[type] && canBeTemplated(element)) {
         ElementType = elementsLegacyTypes[type]({ type, renderer, element });
       } else if (canBeTemplated(element)) {
-        ElementType = shouldRenderInlineEditingView(type) ? createInlineEditingElementType({ type, renderer, element }) : createTemplatedElementType({ type, renderer, element });
+        ElementType = createTemplatedElementTypeWithReplacements({ type, renderer, element });
       } else {
         ElementType = createElementType(type);
       }
@@ -1980,18 +1982,18 @@ var initDocumentStructureResource = (reg) => {
 };
 function getDocumentStructure() {
   const extendedWindow = window;
-  const document2 = extendedWindow.elementor?.documents?.getCurrent?.();
-  if (!document2) {
+  const document = extendedWindow.elementor?.documents?.getCurrent?.();
+  if (!document) {
     return { error: "No active document found" };
   }
-  const containers = document2.container?.children || [];
+  const containers = document.container?.children || [];
   const elements = containers.map(
     (container) => extractElementData(container)
   );
   return {
-    documentId: document2.id,
-    documentType: document2.config.type,
-    title: document2.config.settings?.post_title || "Untitled",
+    documentId: document.id,
+    documentType: document.config.type,
+    title: document.config.settings?.post_title || "Untitled",
     elements: elements.filter((el) => el !== null)
   };
 }
@@ -2016,10 +2018,10 @@ function extractElementData(element) {
 }
 
 // src/mcp/tools/build-composition/tool.ts
-var import_editor_elements8 = require("@elementor/editor-elements");
+var import_editor_elements7 = require("@elementor/editor-elements");
 
 // src/mcp/utils/do-update-element-property.ts
-var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_props4 = require("@elementor/editor-props");
 var import_editor_styles5 = require("@elementor/editor-styles");
 function resolvePropValue(value, forceKey) {
@@ -2028,7 +2030,7 @@ function resolvePropValue(value, forceKey) {
 var doUpdateElementProperty = (params) => {
   const { elementId, propertyName, propertyValue, elementType } = params;
   if (propertyName === "_styles") {
-    const elementStyles = (0, import_editor_elements6.getElementStyles)(elementId) || {};
+    const elementStyles = (0, import_editor_elements5.getElementStyles)(elementId) || {};
     const propertyMapValue = propertyValue;
     const styleSchema = (0, import_editor_styles5.getStylesSchema)();
     const transformedStyleValues = Object.fromEntries(
@@ -2076,7 +2078,7 @@ var doUpdateElementProperty = (params) => {
     delete transformedStyleValues.custom_css;
     const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
     if (!localStyle) {
-      (0, import_editor_elements6.createElementStyle)({
+      (0, import_editor_elements5.createElementStyle)({
         elementId,
         ...typeof customCss !== "undefined" ? { custom_css: customCss } : {},
         classesProp: "classes",
@@ -2090,7 +2092,7 @@ var doUpdateElementProperty = (params) => {
         }
       });
     } else {
-      (0, import_editor_elements6.updateElementStyle)({
+      (0, import_editor_elements5.updateElementStyle)({
         elementId,
         styleId: localStyle.id,
         meta: {
@@ -2105,7 +2107,7 @@ var doUpdateElementProperty = (params) => {
     }
     return;
   }
-  const elementPropSchema = (0, import_editor_elements6.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
+  const elementPropSchema = (0, import_editor_elements5.getWidgetsCache)()?.[elementType]?.atomic_props_schema;
   if (!elementPropSchema) {
     throw new Error(`No prop schema found for element type: ${elementType}`);
   }
@@ -2119,7 +2121,7 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
-  (0, import_editor_elements6.updateElementSettings)({
+  (0, import_editor_elements5.updateElementSettings)({
     id: elementId,
     props: {
       [propertyName]: value
@@ -2129,7 +2131,7 @@ var doUpdateElementProperty = (params) => {
 };
 
 // src/mcp/utils/validate-input.ts
-var import_editor_elements7 = require("@elementor/editor-elements");
+var import_editor_elements6 = require("@elementor/editor-elements");
 var import_editor_props5 = require("@elementor/editor-props");
 var import_editor_styles6 = require("@elementor/editor-styles");
 var _widgetsSchema = null;
@@ -2137,7 +2139,7 @@ var validateInput = {
   get widgetsSchema() {
     if (!_widgetsSchema) {
       const schema2 = {};
-      const cache = (0, import_editor_elements7.getWidgetsCache)();
+      const cache = (0, import_editor_elements6.getWidgetsCache)();
       if (!cache) {
         return {};
       }
@@ -2593,8 +2595,8 @@ var initBuildCompositionsTool = (reg) => {
       const errors = [];
       const softErrors = [];
       const rootContainers = [];
-      const widgetsCache = (0, import_editor_elements8.getWidgetsCache)() || {};
-      const documentContainer = (0, import_editor_elements8.getContainer)("document");
+      const widgetsCache = (0, import_editor_elements7.getWidgetsCache)() || {};
+      const documentContainer = (0, import_editor_elements7.getContainer)("document");
       try {
         const parser = new DOMParser();
         xml = parser.parseFromString(xmlStructure, "application/xml");
@@ -2615,19 +2617,19 @@ var initBuildCompositionsTool = (reg) => {
           if (!targetContainerId) {
             targetContainerId = containerElement.id;
           }
-          const newElement = isContainer ? (0, import_editor_elements8.createElement)({
+          const newElement = isContainer ? (0, import_editor_elements7.createElement)({
             containerId: targetContainerId,
             model: {
               elType: elementTag,
-              id: (0, import_editor_elements8.generateElementId)()
+              id: (0, import_editor_elements7.generateElementId)()
             },
             options: { useHistory: false }
-          }) : (0, import_editor_elements8.createElement)({
+          }) : (0, import_editor_elements7.createElement)({
             containerId: targetContainerId,
             model: {
               elType: "widget",
               widgetType: elementTag,
-              id: (0, import_editor_elements8.generateElementId)()
+              id: (0, import_editor_elements7.generateElementId)()
             },
             options: { useHistory: false }
           });
@@ -2689,7 +2691,7 @@ var initBuildCompositionsTool = (reg) => {
       }
       if (errors.length) {
         rootContainers.forEach((rootContainer) => {
-          (0, import_editor_elements8.deleteElement)({
+          (0, import_editor_elements7.deleteElement)({
             elementId: rootContainer.id,
             options: { useHistory: false }
           });
@@ -2935,7 +2937,7 @@ Check the styles schema at the resource [${STYLE_SCHEMA_URI.replace(
 }
 
 // src/mcp/tools/get-element-config/tool.ts
-var import_editor_elements9 = require("@elementor/editor-elements");
+var import_editor_elements8 = require("@elementor/editor-elements");
 var import_editor_props6 = require("@elementor/editor-props");
 var import_schema5 = require("@elementor/schema");
 var schema = {
@@ -2970,12 +2972,12 @@ var initGetElementConfigTool = (reg) => {
     schema,
     outputSchema: outputSchema3,
     handler: async ({ elementId }) => {
-      const element = (0, import_editor_elements9.getContainer)(elementId);
+      const element = (0, import_editor_elements8.getContainer)(elementId);
       if (!element) {
         throw new Error(`Element with ID ${elementId} not found.`);
       }
       const elementRawSettings = element.settings;
-      const propSchema = (0, import_editor_elements9.getWidgetsCache)()?.[element.model.get("widgetType") || element.model.get("elType") || ""]?.atomic_props_schema;
+      const propSchema = (0, import_editor_elements8.getWidgetsCache)()?.[element.model.get("widgetType") || element.model.get("elType") || ""]?.atomic_props_schema;
       if (!elementRawSettings || !propSchema) {
         throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
       }
@@ -2984,7 +2986,7 @@ var initGetElementConfigTool = (reg) => {
       import_editor_props6.Schema.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
-      const elementStyles = (0, import_editor_elements9.getElementStyles)(elementId) || {};
+      const elementStyles = (0, import_editor_elements8.getElementStyles)(elementId) || {};
       const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
       if (localStyle) {
         const defaultVariant = localStyle.variants.find(
@@ -3156,7 +3158,7 @@ An Example scenario of creating fully styled composition:
 `;
 
 // src/prevent-link-in-link-commands.ts
-var import_editor_elements10 = require("@elementor/editor-elements");
+var import_editor_elements9 = require("@elementor/editor-elements");
 var import_editor_notifications = require("@elementor/editor-notifications");
 var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 var import_i18n = require("@wordpress/i18n");
@@ -3227,13 +3229,13 @@ function shouldBlock(sourceElements, targetElements) {
     return false;
   }
   const isSourceContainsAnAnchor = sourceElements.some((src) => {
-    return src?.id ? (0, import_editor_elements10.isElementAnchored)(src.id) || !!(0, import_editor_elements10.getAnchoredDescendantId)(src.id) : false;
+    return src?.id ? (0, import_editor_elements9.isElementAnchored)(src.id) || !!(0, import_editor_elements9.getAnchoredDescendantId)(src.id) : false;
   });
   if (!isSourceContainsAnAnchor) {
     return false;
   }
   const isTargetContainsAnAnchor = targetElements.some((target) => {
-    return target?.id ? (0, import_editor_elements10.isElementAnchored)(target.id) || !!(0, import_editor_elements10.getAnchoredAncestorId)(target.id) : false;
+    return target?.id ? (0, import_editor_elements9.isElementAnchored)(target.id) || !!(0, import_editor_elements9.getAnchoredAncestorId)(target.id) : false;
   });
   return isTargetContainsAnAnchor;
 }
@@ -3242,13 +3244,13 @@ function shouldBlock(sourceElements, targetElements) {
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var import_editor_elements12 = require("@elementor/editor-elements");
+var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
 // src/style-commands/utils.ts
-var import_editor_elements11 = require("@elementor/editor-elements");
+var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_props7 = require("@elementor/editor-props");
 var import_i18n2 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
@@ -3273,7 +3275,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = (0, import_editor_elements11.getWidgetsCache)();
+  const widgetsCache = (0, import_editor_elements10.getWidgetsCache)();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -3286,7 +3288,7 @@ function getClipboardElements(storageKey = "clipboard") {
   }
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? (0, import_i18n2.__)("Elements", "elementor") : (0, import_editor_elements11.getElementLabel)(containers[0].id);
+  return containers.length > 1 ? (0, import_i18n2.__)("Elements", "elementor") : (0, import_editor_elements10.getElementLabel)(containers[0].id);
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
@@ -3299,7 +3301,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
         if (!classesProp) {
           return null;
         }
-        const originalStyles = (0, import_editor_elements12.getElementStyles)(container.id);
+        const originalStyles = (0, import_editor_elements11.getElementStyles)(container.id);
         const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
         const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
         const revertData = {
@@ -3308,7 +3310,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
         };
         if (styleId) {
           newStyle.variants.forEach(({ meta, props, custom_css: customCss }) => {
-            (0, import_editor_elements12.updateElementStyle)({
+            (0, import_editor_elements11.updateElementStyle)({
               elementId,
               styleId,
               meta,
@@ -3319,7 +3321,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
         } else {
           const [firstVariant] = newStyle.variants;
           const additionalVariants = newStyle.variants.slice(1);
-          revertData.styleId = (0, import_editor_elements12.createElementStyle)({
+          revertData.styleId = (0, import_editor_elements11.createElementStyle)({
             elementId,
             classesProp,
             label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -3337,7 +3339,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
           return;
         }
         if (!revertData.originalStyle) {
-          (0, import_editor_elements12.deleteElementStyle)(container.id, revertData.styleId);
+          (0, import_editor_elements11.deleteElementStyle)(container.id, revertData.styleId);
           return;
         }
         const classesProp = getClassesProp(container);
@@ -3346,7 +3348,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
         }
         const [firstVariant] = revertData.originalStyle.variants;
         const additionalVariants = revertData.originalStyle.variants.slice(1);
-        (0, import_editor_elements12.createElementStyle)({
+        (0, import_editor_elements11.createElementStyle)({
           elementId: container.id,
           classesProp,
           label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
@@ -3398,7 +3400,7 @@ function pasteStyles(args, pasteCallback) {
 var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
-var import_editor_elements13 = require("@elementor/editor-elements");
+var import_editor_elements12 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
@@ -3407,9 +3409,9 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters14.undoable)(
     do: ({ containers }) => {
       return containers.map((container) => {
         const elementId = container.model.get("id");
-        const containerStyles = (0, import_editor_elements13.getElementStyles)(elementId);
+        const containerStyles = (0, import_editor_elements12.getElementStyles)(elementId);
         Object.keys(containerStyles ?? {}).forEach(
-          (styleId) => (0, import_editor_elements13.deleteElementStyle)(elementId, styleId)
+          (styleId) => (0, import_editor_elements12.deleteElementStyle)(elementId, styleId)
         );
         return containerStyles;
       });
@@ -3425,7 +3427,7 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters14.undoable)(
         Object.entries(containerStyles ?? {}).forEach(([styleId, style]) => {
           const [firstVariant] = style.variants;
           const additionalVariants = style.variants.slice(1);
-          (0, import_editor_elements13.createElementStyle)({
+          (0, import_editor_elements12.createElementStyle)({
             elementId,
             classesProp,
             styleId,
@@ -3475,6 +3477,7 @@ function init() {
   initStyleTransformers();
   initStyleCommands();
   initLinkInLinkPrevention();
+  initViewReplacements();
   initLegacyViews();
   initSettingsTransformers();
   (0, import_editor_interactions2.init)();