@elementor/editor-canvas 3.35.0-403 → 3.35.0-405

package/dist/index.js

@@ -951,7 +951,7 @@ function sortByStateType({ state: stateA }, { state: stateB }) {
 function createProviderSubscriber2({ provider, renderStyles, setStyleItems }) {
   return abortPreviousRuns(
     (abortController) => signalizedProcess(abortController.signal).then((_, signal) => {
-      const styles = provider.actions.all().map((__5, index, items) => {
+      const styles = provider.actions.all().map((__6, index, items) => {
         const lastPosition = items.length - 1;
         const style = items[lastPosition - index];
         return {
@@ -1648,8 +1648,14 @@ 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");
+var import_i18n = require("@wordpress/i18n");
 
 // src/legacy/replacements/base.ts
+var TRIGGER_TIMING = {
+  before: "before",
+  after: "after",
+  never: "never"
+};
 var ReplacementBase = class {
   getSetting;
   setSetting;
@@ -1671,6 +1677,15 @@ var ReplacementBase = class {
   shouldRenderReplacement() {
     return true;
   }
+  originalMethodsToTrigger() {
+    return {
+      _beforeRender: TRIGGER_TIMING.before,
+      _afterRender: TRIGGER_TIMING.after,
+      renderOnChange: TRIGGER_TIMING.never,
+      onDestroy: TRIGGER_TIMING.never,
+      render: TRIGGER_TIMING.never
+    };
+  }
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
@@ -1693,6 +1708,12 @@ var getInitialPopoverPosition = () => {
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var EXPERIMENT_KEY = "v4-inline-text-editing";
+var HISTORY_DEBOUNCE_WAIT = 800;
+var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
+var NAVIGATOR_SELECTOR = "#elementor-navigator";
+var V4_EDITING_PANEL = "main.MuiBox-root";
+var V3_EDITING_PANEL = "#elementor-panel-content-wrapper";
+var BLUR_TRIGGERING_SELECTORS = [TOP_BAR_SELECTOR, NAVIGATOR_SELECTOR, V4_EDITING_PANEL, V3_EDITING_PANEL];
 var InlineEditingReplacement = class extends ReplacementBase {
   inlineEditorRoot = null;
   handlerAttached = false;
@@ -1708,11 +1729,11 @@ var InlineEditingReplacement = class extends ReplacementBase {
   shouldRenderReplacement() {
     return (0, import_editor_v1_adapters8.isExperimentActive)(EXPERIMENT_KEY) && !this.isValueDynamic();
   }
-  handleRenderInlineEditor = (event) => {
-    event.stopPropagation();
-    if (!this.isValueDynamic()) {
-      this.renderInlineEditor();
+  handleRenderInlineEditor = () => {
+    if (this.isEditingModeActive() || this.isValueDynamic()) {
+      return;
     }
+    this.renderInlineEditor();
   };
   renderOnChange() {
     if (this.isEditingModeActive()) {
@@ -1728,12 +1749,23 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   _afterRender() {
     if (!this.isValueDynamic() && !this.handlerAttached) {
-      this.element.addEventListener("dblclick", this.handleRenderInlineEditor, { once: true });
+      this.element.addEventListener("click", this.handleRenderInlineEditor);
       this.handlerAttached = true;
     }
   }
+  originalMethodsToTrigger() {
+    const before = this.isEditingModeActive() ? TRIGGER_TIMING.never : TRIGGER_TIMING.before;
+    const after = this.isEditingModeActive() ? TRIGGER_TIMING.never : TRIGGER_TIMING.after;
+    return {
+      _beforeRender: before,
+      _afterRender: after,
+      renderOnChange: after,
+      onDestroy: TRIGGER_TIMING.after,
+      render: before
+    };
+  }
   resetInlineEditorRoot() {
-    this.element.removeEventListener("dblclick", this.handleRenderInlineEditor);
+    this.element.removeEventListener("click", this.handleRenderInlineEditor);
     this.handlerAttached = false;
     this.inlineEditorRoot?.unmount?.();
     this.inlineEditorRoot = null;
@@ -1764,12 +1796,35 @@ var InlineEditingReplacement = class extends ReplacementBase {
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
     const valueToSave = value ? import_editor_props3.htmlPropTypeUtil.create(value) : null;
+    (0, import_editor_v1_adapters8.undoable)(
+      {
+        do: () => {
+          const prevValue = this.getContentValue();
+          this.runCommand(settingKey, valueToSave);
+          return prevValue;
+        },
+        undo: (prevValue) => {
+          this.runCommand(settingKey, prevValue ?? null);
+        }
+      },
+      {
+        title: (0, import_editor_elements3.getElementLabel)(this.id),
+        // translators: %s is the name of the property that was edited.
+        subtitle: (0, import_i18n.__)("%s edited", "elementor").replace(
+          "%s",
+          this.getHtmlPropType()?.key ?? "Inline editing"
+        ),
+        debounce: { wait: HISTORY_DEBOUNCE_WAIT }
+      }
+    )();
+  }
+  runCommand(key, value) {
     (0, import_editor_v1_adapters8.__privateRunCommandSync)(
       "document/elements/set-settings",
       {
         container: (0, import_editor_elements3.getContainer)(this.id),
         settings: {
-          [settingKey]: valueToSave
+          [key]: value
         }
       },
       { internal: true }
@@ -1793,13 +1848,13 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return tagPropType;
   }
   renderInlineEditor() {
+    if (this.isEditingModeActive()) {
+      this.resetInlineEditorRoot();
+    }
     const InlineEditorApp = this.InlineEditorApp;
     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, { wrapperClasses, elementClasses })
@@ -1811,12 +1866,15 @@ var InlineEditingReplacement = class extends ReplacementBase {
     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);
+      BLUR_TRIGGERING_SELECTORS.forEach(
+        (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
+      );
+      return () => BLUR_TRIGGERING_SELECTORS.forEach(
+        (selector) => document?.querySelector(selector)?.removeEventListener("mousedown", asyncUnmountInlineEditor)
+      );
     }, []);
-    const asyncUnmountInlineEditor = (0, import_react11.useCallback)(
+    const asyncUnmountInlineEditor = React5.useCallback(
       () => queueMicrotask(this.unmountInlineEditor.bind(this)),
       []
     );
@@ -1878,9 +1936,7 @@ var createViewWithReplacements = (options) => {
       this.render();
     }
     renderOnChange() {
-      if (!this.#triggerMethod("renderOnChange")) {
-        TemplatedView.prototype.renderOnChange.apply(this);
-      }
+      this.#triggerAltMethod("renderOnChange");
     }
     render() {
       const config = this.#config;
@@ -1889,33 +1945,32 @@ var createViewWithReplacements = (options) => {
       if (ReplacementClass && !this.#replacement) {
         this.#replacement = new ReplacementClass(config);
       }
-      if (!this.#triggerMethod("render")) {
-        TemplatedView.prototype.render.apply(this);
-      }
+      this.#triggerAltMethod("render");
     }
     onDestroy() {
-      if (this.#triggerMethod("onDestroy")) {
-        this.#replacement = null;
-      }
-      TemplatedView.prototype.onDestroy.apply(this);
+      this.#triggerAltMethod("onDestroy");
     }
     _afterRender() {
-      if (!this.#triggerMethod("_afterRender")) {
-        TemplatedView.prototype._afterRender.apply(this);
-      }
+      this.#triggerAltMethod("_afterRender");
     }
     _beforeRender() {
-      if (!this.#triggerMethod("_beforeRender")) {
-        TemplatedView.prototype._beforeRender.apply(this);
+      this.#triggerAltMethod("_beforeRender");
+    }
+    #triggerAltMethod(methodKey) {
+      const baseMethod = TemplatedView.prototype[methodKey].bind(this);
+      const shouldReplace = this.#replacement?.shouldRenderReplacement();
+      const altMethod = shouldReplace && this.#replacement?.[methodKey]?.bind(this.#replacement);
+      if (!altMethod || !shouldReplace) {
+        return baseMethod();
       }
-    }
-    #triggerMethod(methodKey) {
-      const method = this.#replacement?.shouldRenderReplacement() && this.#replacement[methodKey]?.bind(this.#replacement);
-      if (!method || typeof method !== "function") {
-        return false;
+      const renderTiming = this.#replacement?.originalMethodsToTrigger()[methodKey] ?? "never";
+      if (renderTiming === "before") {
+        baseMethod();
+      }
+      altMethod();
+      if (renderTiming === "after") {
+        baseMethod();
       }
-      method();
-      return true;
     }
   };
 };
@@ -3216,7 +3271,7 @@ An Example scenario of creating fully styled composition:
 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");
+var import_i18n2 = require("@wordpress/i18n");
 function initLinkInLinkPrevention() {
   (0, import_editor_v1_adapters11.blockCommand)({
     command: "document/elements/paste",
@@ -3250,7 +3305,7 @@ function blockLinkInLinkPaste(args) {
   const sourceElements = data.clipboard.elements;
   const notification = {
     type: "default",
-    message: (0, import_i18n.__)(
+    message: (0, import_i18n2.__)(
       "To paste a link to this element, first remove the link from it's parent container.",
       "elementor"
     ),
@@ -3269,7 +3324,7 @@ function blockLinkInLinkMove(args) {
   const targetElement = target;
   const notification = {
     type: "default",
-    message: (0, import_i18n.__)("To drag a link to this element, first remove the link from it's parent container.", "elementor"),
+    message: (0, import_i18n2.__)("To drag a link to this element, first remove the link from it's parent container.", "elementor"),
     id: "move-in-link-blocked",
     additionalActionProps: [learnMoreActionProps]
   };
@@ -3302,12 +3357,12 @@ var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 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");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/style-commands/utils.ts
 var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_props7 = require("@elementor/editor-props");
-var import_i18n2 = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
   const { containers = [args.container] } = args;
   return containers.some(isAtomicWidget);
@@ -3343,7 +3398,7 @@ function getClipboardElements(storageKey = "clipboard") {
   }
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? (0, import_i18n2.__)("Elements", "elementor") : (0, import_editor_elements10.getElementLabel)(containers[0].id);
+  return containers.length > 1 ? (0, import_i18n3.__)("Elements", "elementor") : (0, import_editor_elements10.getElementLabel)(containers[0].id);
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
@@ -3416,7 +3471,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
   },
   {
     title: ({ containers }) => getTitleForContainers(containers),
-    subtitle: (0, import_i18n3.__)("Style Pasted", "elementor")
+    subtitle: (0, import_i18n4.__)("Style Pasted", "elementor")
   }
 );
 
@@ -3458,7 +3513,7 @@ var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
 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");
+var import_i18n5 = require("@wordpress/i18n");
 var undoableResetElementStyle = () => (0, import_editor_v1_adapters14.undoable)(
   {
     do: ({ containers }) => {
@@ -3496,7 +3551,7 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters14.undoable)(
   },
   {
     title: ({ containers }) => getTitleForContainers(containers),
-    subtitle: (0, import_i18n4.__)("Style Reset", "elementor")
+    subtitle: (0, import_i18n5.__)("Style Reset", "elementor")
   }
 );
 

package/dist/index.mjs

@@ -909,7 +909,7 @@ function sortByStateType({ state: stateA }, { state: stateB }) {
 function createProviderSubscriber2({ provider, renderStyles, setStyleItems }) {
   return abortPreviousRuns(
     (abortController) => signalizedProcess(abortController.signal).then((_, signal) => {
-      const styles = provider.actions.all().map((__5, index, items) => {
+      const styles = provider.actions.all().map((__6, index, items) => {
         const lastPosition = items.length - 1;
         const style = items[lastPosition - index];
         return {
@@ -1599,18 +1599,24 @@ function createTemplatedElementView({
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 import * as React5 from "react";
-import { useCallback, useEffect as useEffect7, useRef as useRef2, useState as useState4 } from "react";
+import { 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";
+import { getContainer, getElementLabel, getElementType } from "@elementor/editor-elements";
 import {
   htmlPropTypeUtil,
   stringPropTypeUtil
 } from "@elementor/editor-props";
-import { __privateRunCommandSync as runCommandSync, isExperimentActive } from "@elementor/editor-v1-adapters";
+import { __privateRunCommandSync as runCommandSync, isExperimentActive, undoable } from "@elementor/editor-v1-adapters";
 import { Box as Box2, ThemeProvider } from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
 
 // src/legacy/replacements/base.ts
+var TRIGGER_TIMING = {
+  before: "before",
+  after: "after",
+  never: "never"
+};
 var ReplacementBase = class {
   getSetting;
   setSetting;
@@ -1632,6 +1638,15 @@ var ReplacementBase = class {
   shouldRenderReplacement() {
     return true;
   }
+  originalMethodsToTrigger() {
+    return {
+      _beforeRender: TRIGGER_TIMING.before,
+      _afterRender: TRIGGER_TIMING.after,
+      renderOnChange: TRIGGER_TIMING.never,
+      onDestroy: TRIGGER_TIMING.never,
+      render: TRIGGER_TIMING.never
+    };
+  }
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
@@ -1654,6 +1669,12 @@ var getInitialPopoverPosition = () => {
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var EXPERIMENT_KEY = "v4-inline-text-editing";
+var HISTORY_DEBOUNCE_WAIT = 800;
+var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
+var NAVIGATOR_SELECTOR = "#elementor-navigator";
+var V4_EDITING_PANEL = "main.MuiBox-root";
+var V3_EDITING_PANEL = "#elementor-panel-content-wrapper";
+var BLUR_TRIGGERING_SELECTORS = [TOP_BAR_SELECTOR, NAVIGATOR_SELECTOR, V4_EDITING_PANEL, V3_EDITING_PANEL];
 var InlineEditingReplacement = class extends ReplacementBase {
   inlineEditorRoot = null;
   handlerAttached = false;
@@ -1669,11 +1690,11 @@ var InlineEditingReplacement = class extends ReplacementBase {
   shouldRenderReplacement() {
     return isExperimentActive(EXPERIMENT_KEY) && !this.isValueDynamic();
   }
-  handleRenderInlineEditor = (event) => {
-    event.stopPropagation();
-    if (!this.isValueDynamic()) {
-      this.renderInlineEditor();
+  handleRenderInlineEditor = () => {
+    if (this.isEditingModeActive() || this.isValueDynamic()) {
+      return;
     }
+    this.renderInlineEditor();
   };
   renderOnChange() {
     if (this.isEditingModeActive()) {
@@ -1689,12 +1710,23 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   _afterRender() {
     if (!this.isValueDynamic() && !this.handlerAttached) {
-      this.element.addEventListener("dblclick", this.handleRenderInlineEditor, { once: true });
+      this.element.addEventListener("click", this.handleRenderInlineEditor);
       this.handlerAttached = true;
     }
   }
+  originalMethodsToTrigger() {
+    const before = this.isEditingModeActive() ? TRIGGER_TIMING.never : TRIGGER_TIMING.before;
+    const after = this.isEditingModeActive() ? TRIGGER_TIMING.never : TRIGGER_TIMING.after;
+    return {
+      _beforeRender: before,
+      _afterRender: after,
+      renderOnChange: after,
+      onDestroy: TRIGGER_TIMING.after,
+      render: before
+    };
+  }
   resetInlineEditorRoot() {
-    this.element.removeEventListener("dblclick", this.handleRenderInlineEditor);
+    this.element.removeEventListener("click", this.handleRenderInlineEditor);
     this.handlerAttached = false;
     this.inlineEditorRoot?.unmount?.();
     this.inlineEditorRoot = null;
@@ -1725,12 +1757,35 @@ var InlineEditingReplacement = class extends ReplacementBase {
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
     const valueToSave = value ? htmlPropTypeUtil.create(value) : null;
+    undoable(
+      {
+        do: () => {
+          const prevValue = this.getContentValue();
+          this.runCommand(settingKey, valueToSave);
+          return prevValue;
+        },
+        undo: (prevValue) => {
+          this.runCommand(settingKey, prevValue ?? null);
+        }
+      },
+      {
+        title: getElementLabel(this.id),
+        // translators: %s is the name of the property that was edited.
+        subtitle: __("%s edited", "elementor").replace(
+          "%s",
+          this.getHtmlPropType()?.key ?? "Inline editing"
+        ),
+        debounce: { wait: HISTORY_DEBOUNCE_WAIT }
+      }
+    )();
+  }
+  runCommand(key, value) {
     runCommandSync(
       "document/elements/set-settings",
       {
         container: getContainer(this.id),
         settings: {
-          [settingKey]: valueToSave
+          [key]: value
         }
       },
       { internal: true }
@@ -1754,13 +1809,13 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return tagPropType;
   }
   renderInlineEditor() {
+    if (this.isEditingModeActive()) {
+      this.resetInlineEditorRoot();
+    }
     const InlineEditorApp = this.InlineEditorApp;
     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, { wrapperClasses, elementClasses })
@@ -1772,12 +1827,15 @@ var InlineEditingReplacement = class extends ReplacementBase {
     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);
+      BLUR_TRIGGERING_SELECTORS.forEach(
+        (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
+      );
+      return () => BLUR_TRIGGERING_SELECTORS.forEach(
+        (selector) => document?.querySelector(selector)?.removeEventListener("mousedown", asyncUnmountInlineEditor)
+      );
     }, []);
-    const asyncUnmountInlineEditor = useCallback(
+    const asyncUnmountInlineEditor = React5.useCallback(
       () => queueMicrotask(this.unmountInlineEditor.bind(this)),
       []
     );
@@ -1839,9 +1897,7 @@ var createViewWithReplacements = (options) => {
       this.render();
     }
     renderOnChange() {
-      if (!this.#triggerMethod("renderOnChange")) {
-        TemplatedView.prototype.renderOnChange.apply(this);
-      }
+      this.#triggerAltMethod("renderOnChange");
     }
     render() {
       const config = this.#config;
@@ -1850,33 +1906,32 @@ var createViewWithReplacements = (options) => {
       if (ReplacementClass && !this.#replacement) {
         this.#replacement = new ReplacementClass(config);
       }
-      if (!this.#triggerMethod("render")) {
-        TemplatedView.prototype.render.apply(this);
-      }
+      this.#triggerAltMethod("render");
     }
     onDestroy() {
-      if (this.#triggerMethod("onDestroy")) {
-        this.#replacement = null;
-      }
-      TemplatedView.prototype.onDestroy.apply(this);
+      this.#triggerAltMethod("onDestroy");
     }
     _afterRender() {
-      if (!this.#triggerMethod("_afterRender")) {
-        TemplatedView.prototype._afterRender.apply(this);
-      }
+      this.#triggerAltMethod("_afterRender");
     }
     _beforeRender() {
-      if (!this.#triggerMethod("_beforeRender")) {
-        TemplatedView.prototype._beforeRender.apply(this);
+      this.#triggerAltMethod("_beforeRender");
+    }
+    #triggerAltMethod(methodKey) {
+      const baseMethod = TemplatedView.prototype[methodKey].bind(this);
+      const shouldReplace = this.#replacement?.shouldRenderReplacement();
+      const altMethod = shouldReplace && this.#replacement?.[methodKey]?.bind(this.#replacement);
+      if (!altMethod || !shouldReplace) {
+        return baseMethod();
       }
-    }
-    #triggerMethod(methodKey) {
-      const method = this.#replacement?.shouldRenderReplacement() && this.#replacement[methodKey]?.bind(this.#replacement);
-      if (!method || typeof method !== "function") {
-        return false;
+      const renderTiming = this.#replacement?.originalMethodsToTrigger()[methodKey] ?? "never";
+      if (renderTiming === "before") {
+        baseMethod();
+      }
+      altMethod();
+      if (renderTiming === "after") {
+        baseMethod();
       }
-      method();
-      return true;
     }
   };
 };
@@ -3193,7 +3248,7 @@ import {
 } from "@elementor/editor-elements";
 import { notify } from "@elementor/editor-notifications";
 import { blockCommand } from "@elementor/editor-v1-adapters";
-import { __ } from "@wordpress/i18n";
+import { __ as __2 } from "@wordpress/i18n";
 function initLinkInLinkPrevention() {
   blockCommand({
     command: "document/elements/paste",
@@ -3227,7 +3282,7 @@ function blockLinkInLinkPaste(args) {
   const sourceElements = data.clipboard.elements;
   const notification = {
     type: "default",
-    message: __(
+    message: __2(
       "To paste a link to this element, first remove the link from it's parent container.",
       "elementor"
     ),
@@ -3246,7 +3301,7 @@ function blockLinkInLinkMove(args) {
   const targetElement = target;
   const notification = {
     type: "default",
-    message: __("To drag a link to this element, first remove the link from it's parent container.", "elementor"),
+    message: __2("To drag a link to this element, first remove the link from it's parent container.", "elementor"),
     id: "move-in-link-blocked",
     additionalActionProps: [learnMoreActionProps]
   };
@@ -3287,13 +3342,13 @@ import {
   updateElementStyle as updateElementStyle2
 } from "@elementor/editor-elements";
 import { ELEMENTS_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
-import { undoable } from "@elementor/editor-v1-adapters";
-import { __ as __3 } from "@wordpress/i18n";
+import { undoable as undoable2 } from "@elementor/editor-v1-adapters";
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/style-commands/utils.ts
-import { getElementLabel, getWidgetsCache as getWidgetsCache7 } from "@elementor/editor-elements";
+import { getElementLabel as getElementLabel2, getWidgetsCache as getWidgetsCache7 } from "@elementor/editor-elements";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
-import { __ as __2 } from "@wordpress/i18n";
+import { __ as __3 } from "@wordpress/i18n";
 function hasAtomicWidgets(args) {
   const { containers = [args.container] } = args;
   return containers.some(isAtomicWidget);
@@ -3329,11 +3384,11 @@ function getClipboardElements(storageKey = "clipboard") {
   }
 }
 function getTitleForContainers(containers) {
-  return containers.length > 1 ? __2("Elements", "elementor") : getElementLabel(containers[0].id);
+  return containers.length > 1 ? __3("Elements", "elementor") : getElementLabel2(containers[0].id);
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var undoablePasteElementStyle = () => undoable(
+var undoablePasteElementStyle = () => undoable2(
   {
     do: ({ containers, newStyle }) => {
       return containers.map((container) => {
@@ -3402,7 +3457,7 @@ var undoablePasteElementStyle = () => undoable(
   },
   {
     title: ({ containers }) => getTitleForContainers(containers),
-    subtitle: __3("Style Pasted", "elementor")
+    subtitle: __4("Style Pasted", "elementor")
   }
 );
 
@@ -3447,9 +3502,9 @@ import {
 // src/style-commands/undoable-actions/reset-element-style.ts
 import { createElementStyle as createElementStyle3, deleteElementStyle as deleteElementStyle2, getElementStyles as getElementStyles4 } from "@elementor/editor-elements";
 import { ELEMENTS_STYLES_RESERVED_LABEL as ELEMENTS_STYLES_RESERVED_LABEL2 } from "@elementor/editor-styles-repository";
-import { undoable as undoable2 } from "@elementor/editor-v1-adapters";
-import { __ as __4 } from "@wordpress/i18n";
-var undoableResetElementStyle = () => undoable2(
+import { undoable as undoable3 } from "@elementor/editor-v1-adapters";
+import { __ as __5 } from "@wordpress/i18n";
+var undoableResetElementStyle = () => undoable3(
   {
     do: ({ containers }) => {
       return containers.map((container) => {
@@ -3486,7 +3541,7 @@ var undoableResetElementStyle = () => undoable2(
   },
   {
     title: ({ containers }) => getTitleForContainers(containers),
-    subtitle: __4("Style Reset", "elementor")
+    subtitle: __5("Style Reset", "elementor")
   }
 );
 

package/package.json

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

package/src/legacy/replacements/base.ts

@@ -1,5 +1,14 @@
 import { type ReplacementSettings } from '../types';
 
+export type TriggerMethod = 'render' | 'renderOnChange' | 'onDestroy' | '_beforeRender' | '_afterRender';
+export type TriggerTiming = 'before' | 'after' | 'never';
+
+export const TRIGGER_TIMING: Record< string, TriggerTiming > = {
+	before: 'before',
+	after: 'after',
+	never: 'never',
+};
+
 export interface ReplacementBaseInterface {
 	renderOnChange?: () => void;
 	onDestroy?: () => void;
@@ -7,9 +16,10 @@ export interface ReplacementBaseInterface {
 	_afterRender?: () => void;
 	shouldRenderReplacement: () => boolean;
 	render?: () => void;
+	originalMethodsToTrigger: () => Partial< Record< TriggerMethod, TriggerTiming > >;
 }
 
-export default class ReplacementBase implements ReplacementBaseInterface {
+export class ReplacementBase implements ReplacementBaseInterface {
 	protected getSetting: ReplacementSettings[ 'getSetting' ];
 	protected setSetting: ReplacementSettings[ 'setSetting' ];
 	protected element: ReplacementSettings[ 'element' ];
@@ -33,4 +43,14 @@ export default class ReplacementBase implements ReplacementBaseInterface {
 	shouldRenderReplacement(): boolean {
 		return true;
 	}
+
+	originalMethodsToTrigger() {
+		return {
+			_beforeRender: TRIGGER_TIMING.before,
+			_afterRender: TRIGGER_TIMING.after,
+			renderOnChange: TRIGGER_TIMING.never,
+			onDestroy: TRIGGER_TIMING.never,
+			render: TRIGGER_TIMING.never,
+		};
+	}
 }

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

@@ -1,20 +1,22 @@
 import * as React from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { 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 { getContainer, getElementLabel, getElementType } from '@elementor/editor-elements';
 import {
 	htmlPropTypeUtil,
+	type HtmlPropValue,
 	type PropType,
 	stringPropTypeUtil,
 	type StringPropValue,
 	type TransformablePropValue,
 } from '@elementor/editor-props';
-import { __privateRunCommandSync as runCommandSync, isExperimentActive } from '@elementor/editor-v1-adapters';
+import { __privateRunCommandSync as runCommandSync, isExperimentActive, undoable } from '@elementor/editor-v1-adapters';
 import { Box, ThemeProvider } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 import { OutlineOverlay } from '../../../components/outline-overlay';
-import ReplacementBase from '../base';
+import { ReplacementBase, TRIGGER_TIMING } from '../base';
 import { getInitialPopoverPosition, INLINE_EDITING_PROPERTY_PER_TYPE } from './inline-editing-utils';
 
 const EXPERIMENT_KEY = 'v4-inline-text-editing';
@@ -25,6 +27,15 @@ type TagPropType = PropType< 'tag' > & {
 	};
 };
 
+const HISTORY_DEBOUNCE_WAIT = 800;
+
+const TOP_BAR_SELECTOR = '#elementor-editor-wrapper-v2';
+const NAVIGATOR_SELECTOR = '#elementor-navigator';
+const V4_EDITING_PANEL = 'main.MuiBox-root';
+const V3_EDITING_PANEL = '#elementor-panel-content-wrapper';
+
+const BLUR_TRIGGERING_SELECTORS = [ TOP_BAR_SELECTOR, NAVIGATOR_SELECTOR, V4_EDITING_PANEL, V3_EDITING_PANEL ];
+
 export default class InlineEditingReplacement extends ReplacementBase {
 	private inlineEditorRoot: Root | null = null;
 	private handlerAttached = false;
@@ -45,12 +56,12 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		return isExperimentActive( EXPERIMENT_KEY ) && ! this.isValueDynamic();
 	}
 
-	handleRenderInlineEditor = ( event: Event ) => {
-		event.stopPropagation();
-
-		if ( ! this.isValueDynamic() ) {
-			this.renderInlineEditor();
+	handleRenderInlineEditor = () => {
+		if ( this.isEditingModeActive() || this.isValueDynamic() ) {
+			return;
 		}
+
+		this.renderInlineEditor();
 	};
 
 	renderOnChange() {
@@ -65,19 +76,32 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		this.resetInlineEditorRoot();
 	}
 
-	_beforeRender(): void {
+	_beforeRender() {
 		this.resetInlineEditorRoot();
 	}
 
 	_afterRender() {
 		if ( ! this.isValueDynamic() && ! this.handlerAttached ) {
-			this.element.addEventListener( 'dblclick', this.handleRenderInlineEditor, { once: true } );
+			this.element.addEventListener( 'click', this.handleRenderInlineEditor );
 			this.handlerAttached = true;
 		}
 	}
 
+	originalMethodsToTrigger() {
+		const before = this.isEditingModeActive() ? TRIGGER_TIMING.never : TRIGGER_TIMING.before;
+		const after = this.isEditingModeActive() ? TRIGGER_TIMING.never : TRIGGER_TIMING.after;
+
+		return {
+			_beforeRender: before,
+			_afterRender: after,
+			renderOnChange: after,
+			onDestroy: TRIGGER_TIMING.after,
+			render: before,
+		};
+	}
+
 	resetInlineEditorRoot() {
-		this.element.removeEventListener( 'dblclick', this.handleRenderInlineEditor );
+		this.element.removeEventListener( 'click', this.handleRenderInlineEditor );
 		this.handlerAttached = false;
 		this.inlineEditorRoot?.unmount?.();
 		this.inlineEditorRoot = null;
@@ -124,12 +148,38 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		const settingKey = this.getInlineEditablePropertyName();
 		const valueToSave = value ? htmlPropTypeUtil.create( value ) : null;
 
+		undoable(
+			{
+				do: () => {
+					const prevValue = this.getContentValue();
+
+					this.runCommand( settingKey, valueToSave );
+
+					return prevValue;
+				},
+				undo: ( prevValue ) => {
+					this.runCommand( settingKey, prevValue ?? null );
+				},
+			},
+			{
+				title: getElementLabel( this.id ),
+				// translators: %s is the name of the property that was edited.
+				subtitle: __( '%s edited', 'elementor' ).replace(
+					'%s',
+					this.getHtmlPropType()?.key ?? 'Inline editing'
+				),
+				debounce: { wait: HISTORY_DEBOUNCE_WAIT },
+			}
+		)();
+	}
+
+	runCommand( key: string, value: HtmlPropValue | null ) {
 		runCommandSync(
 			'document/elements/set-settings',
 			{
 				container: getContainer( this.id ),
 				settings: {
-					[ settingKey ]: valueToSave,
+					[ key ]: value,
 				},
 			},
 			{ internal: true }
@@ -165,16 +215,16 @@ export default class InlineEditingReplacement extends ReplacementBase {
 	}
 
 	renderInlineEditor() {
+		if ( this.isEditingModeActive() ) {
+			this.resetInlineEditorRoot();
+		}
+
 		const InlineEditorApp = this.InlineEditorApp;
 		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(
 			<InlineEditorApp wrapperClasses={ wrapperClasses } elementClasses={ elementClasses } />
@@ -188,16 +238,23 @@ export default class InlineEditingReplacement extends ReplacementBase {
 		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 );
+			BLUR_TRIGGERING_SELECTORS.forEach(
+				( selector ) =>
+					document?.querySelector( selector )?.addEventListener( 'mousedown', asyncUnmountInlineEditor )
+			);
+
+			return () =>
+				BLUR_TRIGGERING_SELECTORS.forEach(
+					( selector ) =>
+						document
+							?.querySelector( selector )
+							?.removeEventListener( 'mousedown', asyncUnmountInlineEditor )
+				);
 			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [] );
 
-		const asyncUnmountInlineEditor = useCallback(
+		const asyncUnmountInlineEditor = React.useCallback(
 			() => queueMicrotask( this.unmountInlineEditor.bind( this ) ),
 			[]
 		);

package/src/legacy/replacements/manager.ts

@@ -1,8 +1,7 @@
 import type { CreateTemplatedElementTypeOptions } from '../create-templated-element-type';
 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 { type ReplacementBase, type ReplacementBaseInterface, type TriggerMethod } from './base';
 import InlineEditingReplacement from './inline-editing/inline-editing-elements';
 
 type ReplacementConstructor = new ( settings: ReplacementSettings ) => ReplacementBase;
@@ -55,9 +54,7 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 		}
 
 		renderOnChange(): void {
-			if ( ! this.#triggerMethod( 'renderOnChange' ) ) {
-				TemplatedView.prototype.renderOnChange.apply( this );
-			}
+			this.#triggerAltMethod( 'renderOnChange' );
 		}
 
 		render() {
@@ -69,43 +66,41 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 				this.#replacement = new ReplacementClass( config );
 			}
 
-			if ( ! this.#triggerMethod( 'render' ) ) {
-				TemplatedView.prototype.render.apply( this );
-			}
+			this.#triggerAltMethod( 'render' );
 		}
 
 		onDestroy() {
-			if ( this.#triggerMethod( 'onDestroy' ) ) {
-				this.#replacement = null;
-			}
-
-			TemplatedView.prototype.onDestroy.apply( this );
+			this.#triggerAltMethod( 'onDestroy' );
 		}
 
 		_afterRender() {
-			if ( ! this.#triggerMethod( '_afterRender' ) ) {
-				TemplatedView.prototype._afterRender.apply( this );
-			}
+			this.#triggerAltMethod( '_afterRender' );
 		}
 
 		_beforeRender(): void {
-			if ( ! this.#triggerMethod( '_beforeRender' ) ) {
-				TemplatedView.prototype._beforeRender.apply( this );
-			}
+			this.#triggerAltMethod( '_beforeRender' );
 		}
 
-		#triggerMethod( methodKey: keyof ReplacementBaseInterface ) {
-			const method =
-				this.#replacement?.shouldRenderReplacement() &&
-				this.#replacement[ methodKey ]?.bind( this.#replacement );
+		#triggerAltMethod( methodKey: keyof ReplacementBaseInterface ) {
+			const baseMethod = TemplatedView.prototype[ methodKey as TriggerMethod ].bind( this );
+			const shouldReplace = this.#replacement?.shouldRenderReplacement();
+			const altMethod = shouldReplace && this.#replacement?.[ methodKey ]?.bind( this.#replacement );
 
-			if ( ! method || typeof method !== 'function' ) {
-				return false;
+			if ( ! altMethod || ! shouldReplace ) {
+				return baseMethod();
 			}
 
-			method();
+			const renderTiming = this.#replacement?.originalMethodsToTrigger()[ methodKey as TriggerMethod ] ?? 'never';
+
+			if ( renderTiming === 'before' ) {
+				baseMethod();
+			}
 
-			return true;
+			altMethod();
+
+			if ( renderTiming === 'after' ) {
+				baseMethod();
+			}
 		}
 	};
 };