@elementor/editor-canvas 3.35.0-350 → 3.35.0-352

package/dist/index.mjs

@@ -197,8 +197,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);
     });
@@ -206,60 +206,56 @@ var renameClass = (oldClassName, newClassName) => {
 };
 
 // src/components/elements-overlays.tsx
-import * as React3 from "react";
+import * as React2 from "react";
 import { getElements, useSelectedElement } from "@elementor/editor-elements";
 import {
   __privateUseIsRouteActive as useIsRouteActive,
   __privateUseListenTo as useListenTo,
-  isExperimentActive,
   useEditMode,
   windowEvent
 } from "@elementor/editor-v1-adapters";
 
-// src/utils/inline-editing-utils.ts
-import { getContainer, getElementType } from "@elementor/editor-elements";
-var WIDGET_PROPERTY_MAP = {
-  "e-heading": "title",
-  "e-paragraph": "paragraph"
-};
-var getHtmlPropertyName = (container) => {
-  const widgetType = container?.model?.get("widgetType") ?? container?.model?.get("elType");
-  if (!widgetType) {
-    return "";
-  }
-  if (WIDGET_PROPERTY_MAP[widgetType]) {
-    return WIDGET_PROPERTY_MAP[widgetType];
-  }
-  const propsSchema = getElementType(widgetType)?.propsSchema;
-  if (!propsSchema) {
-    return "";
-  }
-  const entry = Object.entries(propsSchema).find(([, propType]) => propType.key === "html");
-  return entry?.[0] ?? "";
-};
-var hasInlineEditableProperty = (containerId) => {
-  const container = getContainer(containerId);
-  const widgetType = container?.model?.get("widgetType") ?? container?.model?.get("elType");
-  if (!widgetType) {
-    return false;
-  }
-  return widgetType in WIDGET_PROPERTY_MAP;
-};
-var getInlineEditablePropertyName = (container) => {
-  return getHtmlPropertyName(container);
-};
+// src/components/outline-overlay.tsx
+import * as React from "react";
+import { Box, styled } from "@elementor/ui";
+import { FloatingPortal, useHover, useInteractions } from "@floating-ui/react";
 
-// src/components/inline-editor-overlay.tsx
-import * as React2 from "react";
-import { InlineEditor } from "@elementor/editor-controls";
-import { getContainer as getContainer2, updateElementSettings, useElementSetting } from "@elementor/editor-elements";
-import { htmlPropTypeUtil } from "@elementor/editor-props";
-import { Box as Box2 } from "@elementor/ui";
-import { debounce } from "@elementor/utils";
-import { FloatingPortal as FloatingPortal2 } from "@floating-ui/react";
+// src/hooks/use-bind-react-props-to-element.ts
+import { useEffect as useEffect2 } from "react";
+function useBindReactPropsToElement(element, getProps) {
+  useEffect2(() => {
+    const el = element;
+    const { events, attrs } = groupProps(getProps());
+    events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
+    attrs.forEach(([attrName, attrValue]) => el.setAttribute(attrName, attrValue));
+    return () => {
+      events.forEach(([eventName, listener]) => el.removeEventListener(eventName, listener));
+      attrs.forEach(([attrName]) => el.removeAttribute(attrName));
+    };
+  }, [getProps, element]);
+}
+function groupProps(props) {
+  const eventRegex = /^on(?=[A-Z])/;
+  return Object.entries(props).reduce(
+    (acc, [propName, propValue]) => {
+      if (!eventRegex.test(propName)) {
+        acc.attrs.push([propName, propValue]);
+        return acc;
+      }
+      const eventName = propName.replace(eventRegex, "").toLowerCase();
+      const listener = propValue;
+      acc.events.push([eventName, listener]);
+      return acc;
+    },
+    {
+      events: [],
+      attrs: []
+    }
+  );
+}
 
 // src/hooks/use-floating-on-element.ts
-import { useEffect as useEffect2, useState } from "react";
+import { useEffect as useEffect3, useState } from "react";
 import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
 function useFloatingOnElement({ element, isSelected }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -285,7 +281,7 @@ function useFloatingOnElement({ element, isSelected }) {
       offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
     ]
   });
-  useEffect2(() => {
+  useEffect3(() => {
     refs.setReference(element);
   }, [element, refs]);
   return {
@@ -299,45 +295,6 @@ function useFloatingOnElement({ element, isSelected }) {
   };
 }
 
-// src/components/outline-overlay.tsx
-import * as React from "react";
-import { Box, styled } from "@elementor/ui";
-import { FloatingPortal, useHover, useInteractions } from "@floating-ui/react";
-
-// src/hooks/use-bind-react-props-to-element.ts
-import { useEffect as useEffect3 } from "react";
-function useBindReactPropsToElement(element, getProps) {
-  useEffect3(() => {
-    const el = element;
-    const { events, attrs } = groupProps(getProps());
-    events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
-    attrs.forEach(([attrName, attrValue]) => el.setAttribute(attrName, attrValue));
-    return () => {
-      events.forEach(([eventName, listener]) => el.removeEventListener(eventName, listener));
-      attrs.forEach(([attrName]) => el.removeAttribute(attrName));
-    };
-  }, [getProps, element]);
-}
-function groupProps(props) {
-  const eventRegex = /^on(?=[A-Z])/;
-  return Object.entries(props).reduce(
-    (acc, [propName, propValue]) => {
-      if (!eventRegex.test(propName)) {
-        acc.attrs.push([propName, propValue]);
-        return acc;
-      }
-      const eventName = propName.replace(eventRegex, "").toLowerCase();
-      const listener = propValue;
-      acc.events.push([eventName, listener]);
-      return acc;
-    },
-    {
-      events: [],
-      attrs: []
-    }
-  );
-}
-
 // src/hooks/use-has-overlapping.ts
 var possibleOverlappingSelectors = [".e-off-canvas"];
 var useHasOverlapping = () => {
@@ -384,71 +341,12 @@ var OutlineOverlay = ({ element, isSelected, id }) => {
   ));
 };
 
-// src/components/inline-editor-overlay.tsx
-var OVERLAY_Z_INDEX = 1e3;
-var DEBOUNCE_DELAY = 100;
-var InlineEditorOverlay = ({ element, isSelected, id }) => {
-  const { floating, isVisible } = useFloatingOnElement({ element, isSelected });
-  const propertyName = React2.useMemo(() => {
-    const container = getContainer2(id);
-    return getInlineEditablePropertyName(container);
-  }, [id]);
-  const contentProp = useElementSetting(id, propertyName);
-  const value = React2.useMemo(() => htmlPropTypeUtil.extract(contentProp) || "", [contentProp]);
-  const debouncedUpdateRef = React2.useRef(null);
-  const lastValueRef = React2.useRef("");
-  React2.useEffect(() => {
-    debouncedUpdateRef.current = debounce((newValue) => {
-      const textContent = newValue.replace(/<[^>]*>/g, "").trim();
-      const valueToSave = textContent === "" ? "&nbsp;" : newValue;
-      updateElementSettings({
-        id,
-        props: {
-          [propertyName]: htmlPropTypeUtil.create(valueToSave)
-        },
-        withHistory: true
-      });
-    }, DEBOUNCE_DELAY);
-    return () => {
-      debouncedUpdateRef.current?.cancel?.();
-    };
-  }, [id, propertyName]);
-  const handleValueChange = React2.useCallback((newValue) => {
-    lastValueRef.current = newValue;
-    debouncedUpdateRef.current?.(newValue);
-  }, []);
-  React2.useEffect(() => {
-    if (!isVisible && debouncedUpdateRef.current?.pending?.()) {
-      debouncedUpdateRef.current.flush(lastValueRef.current);
-    }
-  }, [isVisible]);
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ React2.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React2.createElement(
-    Box2,
-    {
-      ref: floating.setRef,
-      style: {
-        ...floating.styles,
-        zIndex: OVERLAY_Z_INDEX,
-        pointerEvents: "auto"
-      }
-    },
-    /* @__PURE__ */ React2.createElement(InlineEditor, { value, setValue: handleValueChange, showToolbar: isSelected })
-  ));
-};
-
 // src/components/elements-overlays.tsx
 var ELEMENTS_DATA_ATTR = "atomic";
 var overlayRegistry = [
   {
     component: OutlineOverlay,
     shouldRender: () => true
-  },
-  {
-    component: InlineEditorOverlay,
-    shouldRender: ({ id, isSelected }) => isSelected && hasInlineEditableProperty(id) && isExperimentActive("v4-inline-text-editing")
   }
 ];
 function ElementsOverlays() {
@@ -464,7 +362,7 @@ function ElementsOverlays() {
   return elements.map(([id, element]) => {
     const isSelected = selected.element?.id === id;
     return overlayRegistry.map(
-      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element, isSelected }) && /* @__PURE__ */ React3.createElement(Overlay, { key: `${id}-${index}`, id, element, isSelected })
+      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element, isSelected }) && /* @__PURE__ */ React2.createElement(Overlay, { key: `${id}-${index}`, id, element, isSelected })
     );
   });
 }
@@ -478,20 +376,20 @@ function useElementsDom() {
 }
 
 // src/components/interactions-renderer.tsx
-import * as React4 from "react";
+import * as React3 from "react";
 import { __privateUseListenTo as useListenTo2, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
 // src/hooks/use-interactions-items.ts
-import { useEffect as useEffect6, useMemo as useMemo2, useState as useState2 } from "react";
+import { useEffect as useEffect5, useMemo, useState as useState2 } from "react";
 import { interactionsRepository } from "@elementor/editor-interactions";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 
 // src/hooks/use-on-mount.ts
-import { useEffect as useEffect5, useRef as useRef2 } from "react";
+import { useEffect as useEffect4, useRef } from "react";
 function useOnMount(cb) {
-  const mounted = useRef2(false);
-  useEffect5(() => {
+  const mounted = useRef(false);
+  useEffect4(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -502,7 +400,7 @@ function useOnMount(cb) {
 // src/hooks/use-interactions-items.ts
 function useInteractionsItems() {
   const [interactionItems, setInteractionItems] = useState2({});
-  const providerAndSubscribers = useMemo2(() => {
+  const providerAndSubscribers = useMemo(() => {
     try {
       const providers = interactionsRepository.getProviders();
       const mapped = providers.map((provider) => {
@@ -519,7 +417,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  useEffect6(() => {
+  useEffect5(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -550,7 +448,7 @@ function useInteractionsItems() {
       });
     });
   });
-  return useMemo2(() => {
+  return useMemo(() => {
     const result = Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items);
     return result;
   }, [interactionItems]);
@@ -586,7 +484,7 @@ function InteractionsRenderer() {
     return null;
   }
   const interactionsData = JSON.stringify(Array.isArray(interactionItems) ? interactionItems : []);
-  return /* @__PURE__ */ React4.createElement(Portal, { container }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React3.createElement(Portal, { container }, /* @__PURE__ */ React3.createElement(
     "script",
     {
       type: "application/json",
@@ -602,7 +500,7 @@ function usePortalContainer() {
 }
 
 // src/components/style-renderer.tsx
-import * as React5 from "react";
+import * as React4 from "react";
 import { __privateUseListenTo as useListenTo4, commandEndEvent as commandEndEvent3 } from "@elementor/editor-v1-adapters";
 import { Portal as Portal2 } from "@elementor/ui";
 
@@ -636,14 +534,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}]`
     ) ?? []
   ];
@@ -654,7 +552,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-import { useEffect as useEffect7, useMemo as useMemo5, useState as useState3 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo4, useState as useState3 } from "react";
 import { getBreakpoints } from "@elementor/editor-responsive";
 import { isClassState as isClassState2 } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
@@ -692,7 +590,7 @@ function signalizedProcess(signal, steps = []) {
 }
 
 // src/hooks/use-style-prop-resolver.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo2 } from "react";
 import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
 
 // src/renderers/create-props-resolver.ts
@@ -823,7 +721,7 @@ var enqueueFont = (fontFamily, context = "preview") => {
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return useMemo3(() => {
+  return useMemo2(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: getStylesSchema2(),
@@ -838,7 +736,7 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { useBreakpointsMap } from "@elementor/editor-responsive";
 
 // src/renderers/create-styles-renderer.ts
@@ -942,7 +840,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = useBreakpointsMap();
-  return useMemo4(() => {
+  return useMemo3(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -956,7 +854,7 @@ function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
   const [styleItems, setStyleItems] = useState3({});
-  const providerAndSubscribers = useMemo5(() => {
+  const providerAndSubscribers = useMemo4(() => {
     return stylesRepository2.getProviders().map((provider) => {
       return {
         provider,
@@ -968,7 +866,7 @@ function useStyleItems() {
       };
     });
   }, [renderStyles]);
-  useEffect7(() => {
+  useEffect6(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -983,7 +881,7 @@ function useStyleItems() {
     });
   });
   const breakpointsOrder = getBreakpoints().map((breakpoint) => breakpoint.id);
-  return useMemo5(
+  return useMemo4(
     () => Object.values(styleItems).sort(sortByProviderPriority2).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [styleItems, breakpointsOrder.join("-")]
@@ -1056,7 +954,7 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement(Portal2, { container }, styleItems.map((item, i) => /* @__PURE__ */ React5.createElement("style", { key: `${item.id}-${i}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React5.createElement("link", { ...attrs, key: attrs.id })));
+  return /* @__PURE__ */ React4.createElement(Portal2, { container }, styleItems.map((item, i) => /* @__PURE__ */ React4.createElement("style", { key: `${item.id}-${i}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React4.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer2() {
   return useListenTo4(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
@@ -1540,10 +1438,102 @@ function escapeURL(value) {
   }
 }
 
+// src/utils/inline-editing-utils.ts
+import { getContainer, getElementType } from "@elementor/editor-elements";
+import { isExperimentActive } from "@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 && 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 = 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 = 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 legacyWindow = window;
-  return class extends legacyWindow.elementor.modules.elements.types.Widget {
+  const legacyWindow2 = window;
+  return class extends legacyWindow2.elementor.modules.elements.types.Widget {
     getType() {
       return type;
     }
@@ -1553,8 +1543,8 @@ function createElementType(type) {
   };
 }
 function createElementViewClassDeclaration() {
-  const legacyWindow = window;
-  return class extends legacyWindow.elementor.modules.elements.views.Widget {
+  const legacyWindow2 = window;
+  return class extends legacyWindow2.elementor.modules.elements.views.Widget {
     // Dispatch `render` event so the overlay layer will be updated
     onRender(...args) {
       super.onRender(...args);
@@ -1600,7 +1590,7 @@ function createElementViewClassDeclaration() {
       );
     }
     #dispatchPreviewEvent(eventType) {
-      legacyWindow.elementor?.$preview?.[0]?.contentWindow.dispatchEvent(
+      legacyWindow2.elementor?.$preview?.[0]?.contentWindow.dispatchEvent(
         new CustomEvent(eventType, {
           detail: {
             id: this.model.get("id"),
@@ -1616,14 +1606,25 @@ function createElementViewClassDeclaration() {
   };
 }
 
+// src/legacy/create-inline-editing-element-type.tsx
+import * as React5 from "react";
+import { createRoot } from "react-dom/client";
+import { InlineEditor } from "@elementor/editor-controls";
+import { getElementType as getElementType2 } from "@elementor/editor-elements";
+import {
+  htmlPropTypeUtil,
+  stringPropTypeUtil
+} from "@elementor/editor-props";
+import { ThemeProvider } from "@elementor/editor-ui";
+
 // src/legacy/create-templated-element-type.ts
 function createTemplatedElementType({
   type,
   renderer,
   element
 }) {
-  const legacyWindow = window;
-  return class extends legacyWindow.elementor.modules.elements.types.Widget {
+  const legacyWindow2 = window;
+  return class extends legacyWindow2.elementor.modules.elements.types.Widget {
     getType() {
       return type;
     }
@@ -1714,6 +1715,142 @@ 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
+      });
+    }
+  };
+}
+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();
+      }
+    }
+    handleUnmountInlineEditor(event) {
+      event.stopPropagation();
+      this.unmountInlineEditor();
+    }
+    onDestroy(...args) {
+      this.resetInlineEditorRoot();
+      TemplatedView.prototype.onDestroy.apply(this, args);
+    }
+    resetInlineEditorRoot() {
+      this.$el.off("dblclick", "*");
+      this.handlerAttached = false;
+      this.inlineEditorRoot?.unmount?.();
+      this.inlineEditorRoot = null;
+    }
+    unmountInlineEditor() {
+      this.resetInlineEditorRoot();
+      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 htmlPropTypeUtil.extract(this.model.get("settings")?.get(settingKey) ?? null) ?? htmlPropTypeUtil.extract(prop?.default ?? null) ?? defaultValue ?? "";
+    }
+    setContentValue(value) {
+      const settingKey = getInlineEditablePropertyName(this.container);
+      const valueToSave = value ? htmlPropTypeUtil.create(value) : null;
+      this.model.get("settings")?.set(settingKey, valueToSave);
+    }
+    getExpectedTag() {
+      const widgetType = getWidgetType(this.container);
+      if (!widgetType) {
+        return null;
+      }
+      const propsSchema = getElementType2(widgetType)?.propsSchema;
+      if (!propsSchema?.tag) {
+        return null;
+      }
+      return stringPropTypeUtil.extract(this.model.get("settings").get("tag") ?? null) ?? 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);
+      }
+    }
+    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 ? htmlPropTypeUtil.create(value) : null;
+        this.model.get("settings")?.set(settingKey, valueToSave);
+      };
+      this.$el.html("");
+      if (this.inlineEditorRoot) {
+        this.resetInlineEditorRoot();
+      }
+      this.inlineEditorRoot = createRoot(this.el);
+      this.inlineEditorRoot.render(
+        /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(
+          InlineEditor,
+          {
+            attributes: { class: classes },
+            value: propValue,
+            setValue,
+            onBlur: this.handleUnmountInlineEditor.bind(this),
+            autofocus: true,
+            showToolbar: true,
+            getInitialPopoverPosition,
+            expectedTag
+          }
+        ))
+      );
+    }
+  };
+}
+
 // src/legacy/init-legacy-views.ts
 var elementsLegacyTypes = {};
 function registerElementType(type, elementTypeGenerator) {
@@ -1722,7 +1859,7 @@ function registerElementType(type, elementTypeGenerator) {
 function initLegacyViews() {
   __privateListenTo(v1ReadyEvent2(), () => {
     const config = getWidgetsCache2() ?? {};
-    const legacyWindow = window;
+    const legacyWindow2 = window;
     const renderer = createDomRenderer();
     Object.entries(config).forEach(([type, element]) => {
       if (!element.atomic) {
@@ -1732,11 +1869,11 @@ function initLegacyViews() {
       if (!!elementsLegacyTypes[type] && canBeTemplated(element)) {
         ElementType = elementsLegacyTypes[type]({ type, renderer, element });
       } else if (canBeTemplated(element)) {
-        ElementType = createTemplatedElementType({ type, renderer, element });
+        ElementType = shouldRenderInlineEditingView(type) ? createInlineEditingElementType({ type, renderer, element }) : createTemplatedElementType({ type, renderer, element });
       } else {
         ElementType = createElementType(type);
       }
-      legacyWindow.elementor.elementsManager.registerElementType(new ElementType());
+      legacyWindow2.elementor.elementsManager.registerElementType(new ElementType());
     });
   });
 }
@@ -1746,7 +1883,7 @@ import {
   createElement as createElement6,
   deleteElement,
   generateElementId,
-  getContainer as getContainer3,
+  getContainer as getContainer2,
   getWidgetsCache as getWidgetsCache5
 } from "@elementor/editor-elements";
 
@@ -1755,7 +1892,7 @@ import {
   createElementStyle,
   getElementStyles,
   getWidgetsCache as getWidgetsCache3,
-  updateElementSettings as updateElementSettings2,
+  updateElementSettings,
   updateElementStyle
 } from "@elementor/editor-elements";
 import { getPropSchemaFromCache, Schema as Schema2 } from "@elementor/editor-props";
@@ -1857,7 +1994,7 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
-  updateElementSettings2({
+  updateElementSettings({
     id: elementId,
     props: {
       [propertyName]: value
@@ -2316,7 +2453,7 @@ var initBuildCompositionsTool = (reg) => {
       const softErrors = [];
       const rootContainers = [];
       const widgetsCache = getWidgetsCache5() || {};
-      const documentContainer = getContainer3("document");
+      const documentContainer = getContainer2("document");
       try {
         const parser = new DOMParser();
         xml = parser.parseFromString(xmlStructure, "application/xml");
@@ -2645,7 +2782,7 @@ Check the styles schema at the resource [${STYLE_SCHEMA_URI.replace(
 }
 
 // src/mcp/tools/get-element-config/tool.ts
-import { getContainer as getContainer4, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
+import { getContainer as getContainer3, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
 import { Schema as Schema4 } from "@elementor/editor-props";
 import { z as z3 } from "@elementor/schema";
 var schema = {
@@ -2663,7 +2800,7 @@ var initGetElementConfigTool = (reg) => {
     schema,
     outputSchema: outputSchema3,
     handler: async ({ elementId }) => {
-      const element = getContainer4(elementId);
+      const element = getContainer3(elementId);
       if (!element) {
         throw new Error(`Element with ID ${elementId} not found.`);
       }