@elementor/editor-canvas 3.35.0-380 → 3.35.0-381

package/dist/index.js

@@ -281,8 +281,8 @@ var subscribeToStylesRepository = () => {
   });
 };
 var renameClass = (oldClassName, newClassName) => {
-  Object.values((0, import_editor_documents.getV1DocumentsManager)().documents).forEach((document) => {
-    const container = document.container;
+  Object.values((0, import_editor_documents.getV1DocumentsManager)().documents).forEach((document2) => {
+    const container = document2.container;
     container.view?.el?.querySelectorAll(`.elementor .${oldClassName}`).forEach((element) => {
       element.classList.replace(oldClassName, newClassName);
     });
@@ -613,14 +613,14 @@ function useDocumentsCssLinks() {
     }));
   });
 }
-function getDocumentsIdsInCanvas(document) {
-  return [...document.body.querySelectorAll(`[${DOCUMENT_WRAPPER_ATTR}]`) ?? []].map(
+function getDocumentsIdsInCanvas(document2) {
+  return [...document2.body.querySelectorAll(`[${DOCUMENT_WRAPPER_ATTR}]`) ?? []].map(
     (el) => el.getAttribute(DOCUMENT_WRAPPER_ATTR) || ""
   );
 }
-function getDocumentsCssLinks(document) {
+function getDocumentsCssLinks(document2) {
   return [
-    ...document.head.querySelectorAll(
+    ...document2.head.querySelectorAll(
       `link[rel="stylesheet"][id^=${CSS_LINK_ID_PREFIX}][id$=${CSS_LINK_ID_SUFFIX}]`
     ) ?? []
   ];
@@ -1687,14 +1687,6 @@ var ReplacementBase = class {
   static getTypes() {
     return null;
   }
-  render() {
-  }
-  onDestroy() {
-  }
-  _beforeRender() {
-  }
-  _afterRender() {
-  }
   shouldRenderReplacement() {
     return true;
   }
@@ -1733,7 +1725,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return !!this.inlineEditorRoot;
   }
   shouldRenderReplacement() {
-    return (0, import_editor_v1_adapters8.isExperimentActive)(EXPERIMENT_KEY) && this.isEditingModeActive() && !this.isValueDynamic();
+    return (0, import_editor_v1_adapters8.isExperimentActive)(EXPERIMENT_KEY) && !this.isValueDynamic();
   }
   handleRenderInlineEditor = (event) => {
     event.stopPropagation();
@@ -1741,10 +1733,12 @@ var InlineEditingReplacement = class extends ReplacementBase {
       this.renderInlineEditor();
     }
   };
-  handleUnmountInlineEditor = (event) => {
-    event.stopPropagation();
-    this.unmountInlineEditor();
-  };
+  renderOnChange() {
+    if (this.isEditingModeActive()) {
+      return;
+    }
+    this.refreshView();
+  }
   onDestroy() {
     this.resetInlineEditorRoot();
   }
@@ -1784,54 +1778,77 @@ var InlineEditingReplacement = class extends ReplacementBase {
     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 ?? "";
+    return import_editor_props3.htmlPropTypeUtil.extract(this.getSetting(settingKey) ?? null) ?? import_editor_props3.stringPropTypeUtil.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;
-    (0, import_editor_v1_adapters8.__privateRunCommandSync)("document/elements/settings", {
-      container: (0, import_editor_elements3.getContainer)(this.id),
-      settings: {
-        [settingKey]: valueToSave
-      }
-    });
+    (0, import_editor_v1_adapters8.__privateRunCommandSync)(
+      "document/elements/set-settings",
+      {
+        container: (0, import_editor_elements3.getContainer)(this.id),
+        settings: {
+          [settingKey]: valueToSave
+        }
+      },
+      { internal: true }
+    );
   }
   getExpectedTag() {
+    const tagPropType = this.getTagPropType();
+    const tagSettingKey = "tag";
+    return import_editor_props3.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props3.stringPropTypeUtil.extract(tagPropType?.default ?? null) ?? null;
+  }
+  getTagPropType() {
     const propsSchema = (0, import_editor_elements3.getElementType)(this.type)?.propsSchema;
     if (!propsSchema?.tag) {
       return null;
     }
-    const tagSettingKey = "tag";
-    return import_editor_props3.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props3.stringPropTypeUtil.extract(propsSchema.tag.default ?? null) ?? null;
+    const tagPropType = propsSchema.tag ?? null;
+    if (tagPropType.kind === "union") {
+      return tagPropType.prop_types.string ?? null;
+    }
+    return tagPropType;
   }
   renderInlineEditor() {
     const InlineEditorApp = this.InlineEditorApp;
-    const classes = (this.element.children?.[0]?.classList.toString() ?? "") + " strip-styles";
+    const wrapperClasses = "elementor";
+    const elementClasses = this.element.children?.[0]?.classList.toString() ?? "";
     this.element.innerHTML = "";
     if (this.inlineEditorRoot) {
       this.resetInlineEditorRoot();
     }
     this.inlineEditorRoot = (0, import_client.createRoot)(this.element);
-    this.inlineEditorRoot.render(/* @__PURE__ */ React5.createElement(InlineEditorApp, { classes }));
+    this.inlineEditorRoot.render(
+      /* @__PURE__ */ React5.createElement(InlineEditorApp, { wrapperClasses, elementClasses })
+    );
   }
-  InlineEditorApp = ({ classes }) => {
+  InlineEditorApp = ({ wrapperClasses, elementClasses }) => {
     const propValue = this.getContentValue();
     const expectedTag = this.getExpectedTag();
     const wrapperRef = (0, import_react11.useRef)(null);
     const [isWrapperRendered, setIsWrapperRendered] = (0, import_react11.useState)(false);
     (0, import_react11.useEffect)(() => {
+      const panel = document?.querySelector("main.MuiBox-root");
       setIsWrapperRendered(!!wrapperRef.current);
+      panel?.addEventListener("click", asyncUnmountInlineEditor);
+      return () => panel?.removeEventListener("click", asyncUnmountInlineEditor);
     }, []);
+    const asyncUnmountInlineEditor = (0, import_react11.useCallback)(
+      () => queueMicrotask(this.unmountInlineEditor.bind(this)),
+      []
+    );
     return /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(import_ui4.Box, { ref: wrapperRef }, isWrapperRendered && /* @__PURE__ */ React5.createElement(OutlineOverlay, { element: wrapperRef.current, id: this.id, isSelected: true }), /* @__PURE__ */ React5.createElement(
       import_editor_controls2.InlineEditor,
       {
         attributes: {
-          class: classes,
+          class: wrapperClasses,
           style: "outline: none;"
         },
+        elementClasses,
         value: propValue,
         setValue: this.setContentValue.bind(this),
-        onBlur: this.handleUnmountInlineEditor.bind(this),
+        onBlur: this.unmountInlineEditor.bind(this),
         autofocus: true,
         showToolbar: true,
         getInitialPopoverPosition,
@@ -1878,6 +1895,11 @@ var createViewWithReplacements = (options) => {
     refreshView() {
       this.render();
     }
+    renderOnChange() {
+      if (!this.#triggerMethod("renderOnChange")) {
+        TemplatedView.prototype.renderOnChange.apply(this);
+      }
+    }
     render() {
       const config = this.#config;
       const widgetType = config.type;
@@ -1885,29 +1907,33 @@ var createViewWithReplacements = (options) => {
       if (ReplacementClass && !this.#replacement) {
         this.#replacement = new ReplacementClass(config);
       }
-      if (!this.#replacement?.shouldRenderReplacement()) {
-        return TemplatedView.prototype.render.apply(this);
+      if (!this.#triggerMethod("render")) {
+        TemplatedView.prototype.render.apply(this);
       }
-      this.#replacement.render();
     }
     onDestroy() {
-      if (this.#replacement) {
-        this.#replacement.onDestroy();
+      if (this.#triggerMethod("onDestroy")) {
         this.#replacement = null;
       }
       TemplatedView.prototype.onDestroy.apply(this);
     }
     _afterRender() {
-      if (this.#replacement) {
-        this.#replacement._afterRender();
+      if (!this.#triggerMethod("_afterRender")) {
+        TemplatedView.prototype._afterRender.apply(this);
       }
-      TemplatedView.prototype._afterRender.apply(this);
     }
     _beforeRender() {
-      if (this.#replacement) {
-        this.#replacement._beforeRender();
+      if (!this.#triggerMethod("_beforeRender")) {
+        TemplatedView.prototype._beforeRender.apply(this);
+      }
+    }
+    #triggerMethod(methodKey) {
+      const method = this.#replacement?.shouldRenderReplacement() && this.#replacement[methodKey]?.bind(this.#replacement);
+      if (!method || typeof method !== "function") {
+        return false;
       }
-      TemplatedView.prototype._beforeRender.apply(this);
+      method();
+      return true;
     }
   };
 };
@@ -1998,18 +2024,18 @@ var initDocumentStructureResource = (reg) => {
 };
 function getDocumentStructure() {
   const extendedWindow = window;
-  const document = extendedWindow.elementor?.documents?.getCurrent?.();
-  if (!document) {
+  const document2 = extendedWindow.elementor?.documents?.getCurrent?.();
+  if (!document2) {
     return { error: "No active document found" };
   }
-  const containers = document.container?.children || [];
+  const containers = document2.container?.children || [];
   const elements = containers.map(
     (container) => extractElementData(container)
   );
   return {
-    documentId: document.id,
-    documentType: document.config.type,
-    title: document.config.settings?.post_title || "Untitled",
+    documentId: document2.id,
+    documentType: document2.config.type,
+    title: document2.config.settings?.post_title || "Untitled",
     elements: elements.filter((el) => el !== null)
   };
 }

package/dist/index.mjs

@@ -230,8 +230,8 @@ var subscribeToStylesRepository = () => {
   });
 };
 var renameClass = (oldClassName, newClassName) => {
-  Object.values(getV1DocumentsManager().documents).forEach((document) => {
-    const container = document.container;
+  Object.values(getV1DocumentsManager().documents).forEach((document2) => {
+    const container = document2.container;
     container.view?.el?.querySelectorAll(`.elementor .${oldClassName}`).forEach((element) => {
       element.classList.replace(oldClassName, newClassName);
     });
@@ -567,14 +567,14 @@ function useDocumentsCssLinks() {
     }));
   });
 }
-function getDocumentsIdsInCanvas(document) {
-  return [...document.body.querySelectorAll(`[${DOCUMENT_WRAPPER_ATTR}]`) ?? []].map(
+function getDocumentsIdsInCanvas(document2) {
+  return [...document2.body.querySelectorAll(`[${DOCUMENT_WRAPPER_ATTR}]`) ?? []].map(
     (el) => el.getAttribute(DOCUMENT_WRAPPER_ATTR) || ""
   );
 }
-function getDocumentsCssLinks(document) {
+function getDocumentsCssLinks(document2) {
   return [
-    ...document.head.querySelectorAll(
+    ...document2.head.querySelectorAll(
       `link[rel="stylesheet"][id^=${CSS_LINK_ID_PREFIX}][id$=${CSS_LINK_ID_SUFFIX}]`
     ) ?? []
   ];
@@ -1619,7 +1619,7 @@ function createTemplatedElementView({
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 import * as React5 from "react";
-import { useEffect as useEffect7, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback, useEffect as useEffect7, useRef as useRef2, useState as useState4 } from "react";
 import { createRoot } from "react-dom/client";
 import { InlineEditor } from "@elementor/editor-controls";
 import { getContainer, getElementType } from "@elementor/editor-elements";
@@ -1649,14 +1649,6 @@ var ReplacementBase = class {
   static getTypes() {
     return null;
   }
-  render() {
-  }
-  onDestroy() {
-  }
-  _beforeRender() {
-  }
-  _afterRender() {
-  }
   shouldRenderReplacement() {
     return true;
   }
@@ -1695,7 +1687,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return !!this.inlineEditorRoot;
   }
   shouldRenderReplacement() {
-    return isExperimentActive(EXPERIMENT_KEY) && this.isEditingModeActive() && !this.isValueDynamic();
+    return isExperimentActive(EXPERIMENT_KEY) && !this.isValueDynamic();
   }
   handleRenderInlineEditor = (event) => {
     event.stopPropagation();
@@ -1703,10 +1695,12 @@ var InlineEditingReplacement = class extends ReplacementBase {
       this.renderInlineEditor();
     }
   };
-  handleUnmountInlineEditor = (event) => {
-    event.stopPropagation();
-    this.unmountInlineEditor();
-  };
+  renderOnChange() {
+    if (this.isEditingModeActive()) {
+      return;
+    }
+    this.refreshView();
+  }
   onDestroy() {
     this.resetInlineEditorRoot();
   }
@@ -1746,54 +1740,77 @@ var InlineEditingReplacement = class extends ReplacementBase {
     const prop = this.getHtmlPropType();
     const defaultValue = prop?.default?.value ?? "";
     const settingKey = this.getInlineEditablePropertyName();
-    return htmlPropTypeUtil.extract(this.getSetting(settingKey) ?? null) ?? htmlPropTypeUtil.extract(prop?.default ?? null) ?? defaultValue ?? "";
+    return htmlPropTypeUtil.extract(this.getSetting(settingKey) ?? null) ?? stringPropTypeUtil.extract(this.getSetting(settingKey) ?? null) ?? htmlPropTypeUtil.extract(prop?.default ?? null) ?? defaultValue ?? "";
   }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
     const valueToSave = value ? htmlPropTypeUtil.create(value) : null;
-    runCommandSync("document/elements/settings", {
-      container: getContainer(this.id),
-      settings: {
-        [settingKey]: valueToSave
-      }
-    });
+    runCommandSync(
+      "document/elements/set-settings",
+      {
+        container: getContainer(this.id),
+        settings: {
+          [settingKey]: valueToSave
+        }
+      },
+      { internal: true }
+    );
   }
   getExpectedTag() {
+    const tagPropType = this.getTagPropType();
+    const tagSettingKey = "tag";
+    return stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? stringPropTypeUtil.extract(tagPropType?.default ?? null) ?? null;
+  }
+  getTagPropType() {
     const propsSchema = getElementType(this.type)?.propsSchema;
     if (!propsSchema?.tag) {
       return null;
     }
-    const tagSettingKey = "tag";
-    return stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? stringPropTypeUtil.extract(propsSchema.tag.default ?? null) ?? null;
+    const tagPropType = propsSchema.tag ?? null;
+    if (tagPropType.kind === "union") {
+      return tagPropType.prop_types.string ?? null;
+    }
+    return tagPropType;
   }
   renderInlineEditor() {
     const InlineEditorApp = this.InlineEditorApp;
-    const classes = (this.element.children?.[0]?.classList.toString() ?? "") + " strip-styles";
+    const wrapperClasses = "elementor";
+    const elementClasses = this.element.children?.[0]?.classList.toString() ?? "";
     this.element.innerHTML = "";
     if (this.inlineEditorRoot) {
       this.resetInlineEditorRoot();
     }
     this.inlineEditorRoot = createRoot(this.element);
-    this.inlineEditorRoot.render(/* @__PURE__ */ React5.createElement(InlineEditorApp, { classes }));
+    this.inlineEditorRoot.render(
+      /* @__PURE__ */ React5.createElement(InlineEditorApp, { wrapperClasses, elementClasses })
+    );
   }
-  InlineEditorApp = ({ classes }) => {
+  InlineEditorApp = ({ wrapperClasses, elementClasses }) => {
     const propValue = this.getContentValue();
     const expectedTag = this.getExpectedTag();
     const wrapperRef = useRef2(null);
     const [isWrapperRendered, setIsWrapperRendered] = useState4(false);
     useEffect7(() => {
+      const panel = document?.querySelector("main.MuiBox-root");
       setIsWrapperRendered(!!wrapperRef.current);
+      panel?.addEventListener("click", asyncUnmountInlineEditor);
+      return () => panel?.removeEventListener("click", asyncUnmountInlineEditor);
     }, []);
+    const asyncUnmountInlineEditor = useCallback(
+      () => queueMicrotask(this.unmountInlineEditor.bind(this)),
+      []
+    );
     return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(Box2, { ref: wrapperRef }, isWrapperRendered && /* @__PURE__ */ React5.createElement(OutlineOverlay, { element: wrapperRef.current, id: this.id, isSelected: true }), /* @__PURE__ */ React5.createElement(
       InlineEditor,
       {
         attributes: {
-          class: classes,
+          class: wrapperClasses,
           style: "outline: none;"
         },
+        elementClasses,
         value: propValue,
         setValue: this.setContentValue.bind(this),
-        onBlur: this.handleUnmountInlineEditor.bind(this),
+        onBlur: this.unmountInlineEditor.bind(this),
         autofocus: true,
         showToolbar: true,
         getInitialPopoverPosition,
@@ -1840,6 +1857,11 @@ var createViewWithReplacements = (options) => {
     refreshView() {
       this.render();
     }
+    renderOnChange() {
+      if (!this.#triggerMethod("renderOnChange")) {
+        TemplatedView.prototype.renderOnChange.apply(this);
+      }
+    }
     render() {
       const config = this.#config;
       const widgetType = config.type;
@@ -1847,29 +1869,33 @@ var createViewWithReplacements = (options) => {
       if (ReplacementClass && !this.#replacement) {
         this.#replacement = new ReplacementClass(config);
       }
-      if (!this.#replacement?.shouldRenderReplacement()) {
-        return TemplatedView.prototype.render.apply(this);
+      if (!this.#triggerMethod("render")) {
+        TemplatedView.prototype.render.apply(this);
       }
-      this.#replacement.render();
     }
     onDestroy() {
-      if (this.#replacement) {
-        this.#replacement.onDestroy();
+      if (this.#triggerMethod("onDestroy")) {
         this.#replacement = null;
       }
       TemplatedView.prototype.onDestroy.apply(this);
     }
     _afterRender() {
-      if (this.#replacement) {
-        this.#replacement._afterRender();
+      if (!this.#triggerMethod("_afterRender")) {
+        TemplatedView.prototype._afterRender.apply(this);
       }
-      TemplatedView.prototype._afterRender.apply(this);
     }
     _beforeRender() {
-      if (this.#replacement) {
-        this.#replacement._beforeRender();
+      if (!this.#triggerMethod("_beforeRender")) {
+        TemplatedView.prototype._beforeRender.apply(this);
+      }
+    }
+    #triggerMethod(methodKey) {
+      const method = this.#replacement?.shouldRenderReplacement() && this.#replacement[methodKey]?.bind(this.#replacement);
+      if (!method || typeof method !== "function") {
+        return false;
       }
-      TemplatedView.prototype._beforeRender.apply(this);
+      method();
+      return true;
     }
   };
 };
@@ -1960,18 +1986,18 @@ var initDocumentStructureResource = (reg) => {
 };
 function getDocumentStructure() {
   const extendedWindow = window;
-  const document = extendedWindow.elementor?.documents?.getCurrent?.();
-  if (!document) {
+  const document2 = extendedWindow.elementor?.documents?.getCurrent?.();
+  if (!document2) {
     return { error: "No active document found" };
   }
-  const containers = document.container?.children || [];
+  const containers = document2.container?.children || [];
   const elements = containers.map(
     (container) => extractElementData(container)
   );
   return {
-    documentId: document.id,
-    documentType: document.config.type,
-    title: document.config.settings?.post_title || "Untitled",
+    documentId: document2.id,
+    documentType: document2.config.type,
+    title: document2.config.settings?.post_title || "Untitled",
     elements: elements.filter((el) => el !== null)
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.35.0-380",
+  "version": "3.35.0-381",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,24 +37,24 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-380",
-    "@elementor/editor-controls": "3.35.0-380",
-    "@elementor/editor-documents": "3.35.0-380",
-    "@elementor/editor-elements": "3.35.0-380",
-    "@elementor/editor-interactions": "3.35.0-380",
-    "@elementor/editor-mcp": "3.35.0-380",
-    "@elementor/editor-notifications": "3.35.0-380",
-    "@elementor/editor-props": "3.35.0-380",
-    "@elementor/editor-responsive": "3.35.0-380",
-    "@elementor/editor-styles": "3.35.0-380",
-    "@elementor/editor-styles-repository": "3.35.0-380",
-    "@elementor/editor-ui": "3.35.0-380",
-    "@elementor/editor-v1-adapters": "3.35.0-380",
-    "@elementor/schema": "3.35.0-380",
-    "@elementor/twing": "3.35.0-380",
+    "@elementor/editor": "3.35.0-381",
+    "@elementor/editor-controls": "3.35.0-381",
+    "@elementor/editor-documents": "3.35.0-381",
+    "@elementor/editor-elements": "3.35.0-381",
+    "@elementor/editor-interactions": "3.35.0-381",
+    "@elementor/editor-mcp": "3.35.0-381",
+    "@elementor/editor-notifications": "3.35.0-381",
+    "@elementor/editor-props": "3.35.0-381",
+    "@elementor/editor-responsive": "3.35.0-381",
+    "@elementor/editor-styles": "3.35.0-381",
+    "@elementor/editor-styles-repository": "3.35.0-381",
+    "@elementor/editor-ui": "3.35.0-381",
+    "@elementor/editor-v1-adapters": "3.35.0-381",
+    "@elementor/schema": "3.35.0-381",
+    "@elementor/twing": "3.35.0-381",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-380",
-    "@elementor/wp-media": "3.35.0-380",
+    "@elementor/utils": "3.35.0-381",
+    "@elementor/wp-media": "3.35.0-381",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/legacy/replacements/base.ts

@@ -1,6 +1,15 @@
 import { type ReplacementSettings } from '../types';
 
-export default class ReplacementBase {
+export interface ReplacementBaseInterface {
+	renderOnChange?: () => void;
+	onDestroy?: () => void;
+	_beforeRender?: () => void;
+	_afterRender?: () => void;
+	shouldRenderReplacement: () => boolean;
+	render?: () => void;
+}
+
+export default class ReplacementBase implements ReplacementBaseInterface {
 	protected getSetting: ReplacementSettings[ 'getSetting' ];
 	protected setSetting: ReplacementSettings[ 'setSetting' ];
 	protected element: ReplacementSettings[ 'element' ];
@@ -21,14 +30,6 @@ export default class ReplacementBase {
 		return null;
 	}
 
-	render(): void {}
-
-	onDestroy(): void {}
-
-	_beforeRender(): void {}
-
-	_afterRender(): void {}
-
 	shouldRenderReplacement(): boolean {
 		return true;
 	}

package/src/legacy/replacements/inline-editing/inline-editing-elements.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { InlineEditor } from '@elementor/editor-controls';
 import { getContainer, getElementType } from '@elementor/editor-elements';
 import {
 	htmlPropTypeUtil,
+	type PropType,
 	stringPropTypeUtil,
 	type StringPropValue,
 	type TransformablePropValue,
@@ -18,6 +19,12 @@ import { getInitialPopoverPosition, INLINE_EDITING_PROPERTY_PER_TYPE } from './i
 
 const EXPERIMENT_KEY = 'v4-inline-text-editing';
 
+type TagPropType = PropType< 'tag' > & {
+	settings?: {
+		enum?: string[];
+	};
+};
+
 export default class InlineEditingReplacement extends ReplacementBase {
 	private inlineEditorRoot: Root | null = null;
 	private handlerAttached = false;
@@ -35,7 +42,7 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	}
 
 	shouldRenderReplacement() {
-		return isExperimentActive( EXPERIMENT_KEY ) && this.isEditingModeActive() && ! this.isValueDynamic();
+		return isExperimentActive( EXPERIMENT_KEY ) && ! this.isValueDynamic();
 	}
 
 	handleRenderInlineEditor = ( event: Event ) => {
@@ -46,10 +53,13 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		}
 	};
 
-	handleUnmountInlineEditor = ( event: Event ) => {
-		event.stopPropagation();
-		this.unmountInlineEditor();
-	};
+	renderOnChange() {
+		if ( this.isEditingModeActive() ) {
+			return;
+		}
+
+		this.refreshView();
+	}
 
 	onDestroy() {
 		this.resetInlineEditorRoot();
@@ -103,6 +113,7 @@ export default class InlineEditingReplacement extends ReplacementBase {
 
 		return (
 			htmlPropTypeUtil.extract( this.getSetting( settingKey ) ?? null ) ??
+			stringPropTypeUtil.extract( this.getSetting( settingKey ) ?? null ) ??
 			htmlPropTypeUtil.extract( prop?.default ?? null ) ??
 			defaultValue ??
 			''
@@ -113,33 +124,49 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		const settingKey = this.getInlineEditablePropertyName();
 		const valueToSave = value ? htmlPropTypeUtil.create( value ) : null;
 
-		runCommandSync( 'document/elements/settings', {
-			container: getContainer( this.id ),
-			settings: {
-				[ settingKey ]: valueToSave,
+		runCommandSync(
+			'document/elements/set-settings',
+			{
+				container: getContainer( this.id ),
+				settings: {
+					[ settingKey ]: valueToSave,
+				},
 			},
-		} );
+			{ internal: true }
+		);
 	}
 
 	getExpectedTag() {
+		const tagPropType = this.getTagPropType();
+		const tagSettingKey = 'tag';
+
+		return (
+			stringPropTypeUtil.extract( this.getSetting( tagSettingKey ) ?? null ) ??
+			stringPropTypeUtil.extract( tagPropType?.default ?? null ) ??
+			null
+		);
+	}
+
+	getTagPropType() {
 		const propsSchema = getElementType( this.type )?.propsSchema;
 
 		if ( ! propsSchema?.tag ) {
 			return null;
 		}
 
-		const tagSettingKey = 'tag';
+		const tagPropType = ( propsSchema.tag as TagPropType ) ?? null;
 
-		return (
-			stringPropTypeUtil.extract( this.getSetting( tagSettingKey ) ?? null ) ??
-			stringPropTypeUtil.extract( propsSchema.tag.default ?? null ) ??
-			null
-		);
+		if ( tagPropType.kind === 'union' ) {
+			return ( tagPropType.prop_types.string as TagPropType ) ?? null;
+		}
+
+		return tagPropType;
 	}
 
 	renderInlineEditor() {
 		const InlineEditorApp = this.InlineEditorApp;
-		const classes = ( this.element.children?.[ 0 ]?.classList.toString() ?? '' ) + ' strip-styles';
+		const wrapperClasses = 'elementor';
+		const elementClasses = this.element.children?.[ 0 ]?.classList.toString() ?? '';
 
 		this.element.innerHTML = '';
 
@@ -148,19 +175,32 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		}
 
 		this.inlineEditorRoot = createRoot( this.element );
-		this.inlineEditorRoot.render( <InlineEditorApp classes={ classes } /> );
+		this.inlineEditorRoot.render(
+			<InlineEditorApp wrapperClasses={ wrapperClasses } elementClasses={ elementClasses } />
+		);
 	}
 
-	InlineEditorApp = ( { classes }: { classes: string } ) => {
+	InlineEditorApp = ( { wrapperClasses, elementClasses }: { wrapperClasses: string; elementClasses: string } ) => {
 		const propValue = this.getContentValue();
 		const expectedTag = this.getExpectedTag();
 		const wrapperRef = useRef< HTMLDivElement | null >( null );
 		const [ isWrapperRendered, setIsWrapperRendered ] = useState( false );
 
 		useEffect( () => {
+			const panel = document?.querySelector( 'main.MuiBox-root' );
+
 			setIsWrapperRendered( !! wrapperRef.current );
+			panel?.addEventListener( 'click', asyncUnmountInlineEditor );
+
+			return () => panel?.removeEventListener( 'click', asyncUnmountInlineEditor );
+			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [] );
 
+		const asyncUnmountInlineEditor = useCallback(
+			() => queueMicrotask( this.unmountInlineEditor.bind( this ) ),
+			[]
+		);
+
 		return (
 			<ThemeProvider>
 				<Box ref={ wrapperRef }>
@@ -169,12 +209,13 @@ export default class InlineEditingReplacement extends ReplacementBase {
 					) }
 					<InlineEditor
 						attributes={ {
-							class: classes,
+							class: wrapperClasses,
 							style: 'outline: none;',
 						} }
+						elementClasses={ elementClasses }
 						value={ propValue }
 						setValue={ this.setContentValue.bind( this ) }
-						onBlur={ this.handleUnmountInlineEditor.bind( this ) }
+						onBlur={ this.unmountInlineEditor.bind( this ) }
 						autofocus
 						showToolbar
 						getInitialPopoverPosition={ getInitialPopoverPosition }

package/src/legacy/replacements/manager.ts

@@ -2,6 +2,7 @@ import type { CreateTemplatedElementTypeOptions } from '../create-templated-elem
 import { createTemplatedElementView } from '../create-templated-element-type';
 import type { ElementType, ElementView, LegacyWindow, ReplacementSettings } from '../types';
 import type ReplacementBase from './base';
+import { type ReplacementBaseInterface } from './base';
 import InlineEditingReplacement from './inline-editing/inline-editing-elements';
 
 type ReplacementConstructor = new ( settings: ReplacementSettings ) => ReplacementBase;
@@ -32,7 +33,7 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 	const TemplatedView = createTemplatedElementView( options );
 
 	return class extends TemplatedView {
-		#replacement: ReplacementBase | null = null;
+		#replacement: ReplacementBaseInterface | null = null;
 		#config: ReplacementSettings;
 
 		constructor( ...args: unknown[] ) {
@@ -53,6 +54,12 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 			this.render();
 		}
 
+		renderOnChange(): void {
+			if ( ! this.#triggerMethod( 'renderOnChange' ) ) {
+				TemplatedView.prototype.renderOnChange.apply( this );
+			}
+		}
+
 		render() {
 			const config = this.#config;
 			const widgetType = config.type;
@@ -62,16 +69,13 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 				this.#replacement = new ReplacementClass( config );
 			}
 
-			if ( ! this.#replacement?.shouldRenderReplacement() ) {
-				return TemplatedView.prototype.render.apply( this );
+			if ( ! this.#triggerMethod( 'render' ) ) {
+				TemplatedView.prototype.render.apply( this );
 			}
-
-			this.#replacement.render();
 		}
 
 		onDestroy() {
-			if ( this.#replacement ) {
-				this.#replacement.onDestroy();
+			if ( this.#triggerMethod( 'onDestroy' ) ) {
 				this.#replacement = null;
 			}
 
@@ -79,19 +83,29 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 		}
 
 		_afterRender() {
-			if ( this.#replacement ) {
-				this.#replacement._afterRender();
+			if ( ! this.#triggerMethod( '_afterRender' ) ) {
+				TemplatedView.prototype._afterRender.apply( this );
 			}
-
-			TemplatedView.prototype._afterRender.apply( this );
 		}
 
 		_beforeRender(): void {
-			if ( this.#replacement ) {
-				this.#replacement._beforeRender();
+			if ( ! this.#triggerMethod( '_beforeRender' ) ) {
+				TemplatedView.prototype._beforeRender.apply( this );
 			}
+		}
+
+		#triggerMethod( methodKey: keyof ReplacementBaseInterface ) {
+			const method =
+				this.#replacement?.shouldRenderReplacement() &&
+				this.#replacement[ methodKey ]?.bind( this.#replacement );
+
+			if ( ! method || typeof method !== 'function' ) {
+				return false;
+			}
+
+			method();
 
-			TemplatedView.prototype._beforeRender.apply( this );
+			return true;
 		}
 	};
 };