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

package/dist/index.js

@@ -243,8 +243,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);
     });
@@ -252,92 +252,9 @@ var renameClass = (oldClassName, newClassName) => {
 };
 
 // src/components/elements-overlays.tsx
-var React3 = __toESM(require("react"));
-var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-
-// src/utils/inline-editing-utils.ts
-var import_editor_elements2 = require("@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 = (0, import_editor_elements2.getElementType)(widgetType)?.propsSchema;
-  if (!propsSchema) {
-    return "";
-  }
-  const entry = Object.entries(propsSchema).find(([, propType]) => propType.key === "html");
-  return entry?.[0] ?? "";
-};
-var hasInlineEditableProperty = (containerId) => {
-  const container = (0, import_editor_elements2.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/inline-editor-overlay.tsx
 var React2 = __toESM(require("react"));
-var import_editor_controls = require("@elementor/editor-controls");
-var import_editor_elements3 = require("@elementor/editor-elements");
-var import_editor_props2 = require("@elementor/editor-props");
-var import_ui2 = require("@elementor/ui");
-var import_utils2 = require("@elementor/utils");
-var import_react6 = require("@floating-ui/react");
-
-// src/hooks/use-floating-on-element.ts
-var import_react2 = require("react");
-var import_react3 = require("@floating-ui/react");
-function useFloatingOnElement({ element, isSelected }) {
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
-  const sizeModifier = 2;
-  const { refs, floatingStyles, context } = (0, import_react3.useFloating)({
-    // Must be controlled for interactions (like hover) to work.
-    open: isOpen || isSelected,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: import_react3.autoUpdate,
-    middleware: [
-      // Match the floating element's size to the reference element.
-      (0, import_react3.size)(() => {
-        return {
-          apply({ elements, rects }) {
-            Object.assign(elements.floating.style, {
-              width: `${rects.reference.width + sizeModifier}px`,
-              height: `${rects.reference.height + sizeModifier}px`
-            });
-          }
-        };
-      }),
-      // Center the floating element on the reference element.
-      (0, import_react3.offset)(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
-    ]
-  });
-  (0, import_react2.useEffect)(() => {
-    refs.setReference(element);
-  }, [element, refs]);
-  return {
-    isVisible: isOpen || isSelected,
-    context,
-    floating: {
-      setRef: refs.setFloating,
-      ref: refs.floating,
-      styles: floatingStyles
-    }
-  };
-}
+var import_editor_elements2 = require("@elementor/editor-elements");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 
 // src/components/outline-overlay.tsx
 var React = __toESM(require("react"));
@@ -345,9 +262,9 @@ var import_ui = require("@elementor/ui");
 var import_react5 = require("@floating-ui/react");
 
 // src/hooks/use-bind-react-props-to-element.ts
-var import_react4 = require("react");
+var import_react2 = require("react");
 function useBindReactPropsToElement(element, getProps) {
-  (0, import_react4.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const el = element;
     const { events, attrs } = groupProps(getProps());
     events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
@@ -378,6 +295,47 @@ function groupProps(props) {
   );
 }
 
+// src/hooks/use-floating-on-element.ts
+var import_react3 = require("react");
+var import_react4 = require("@floating-ui/react");
+function useFloatingOnElement({ element, isSelected }) {
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const sizeModifier = 2;
+  const { refs, floatingStyles, context } = (0, import_react4.useFloating)({
+    // Must be controlled for interactions (like hover) to work.
+    open: isOpen || isSelected,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: import_react4.autoUpdate,
+    middleware: [
+      // Match the floating element's size to the reference element.
+      (0, import_react4.size)(() => {
+        return {
+          apply({ elements, rects }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width + sizeModifier}px`,
+              height: `${rects.reference.height + sizeModifier}px`
+            });
+          }
+        };
+      }),
+      // Center the floating element on the reference element.
+      (0, import_react4.offset)(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
+    ]
+  });
+  (0, import_react3.useEffect)(() => {
+    refs.setReference(element);
+  }, [element, refs]);
+  return {
+    isVisible: isOpen || isSelected,
+    context,
+    floating: {
+      setRef: refs.setFloating,
+      ref: refs.floating,
+      styles: floatingStyles
+    }
+  };
+}
+
 // src/hooks/use-has-overlapping.ts
 var possibleOverlappingSelectors = [".e-off-canvas"];
 var useHasOverlapping = () => {
@@ -424,75 +382,16 @@ 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 = (0, import_editor_elements3.getContainer)(id);
-    return getInlineEditablePropertyName(container);
-  }, [id]);
-  const contentProp = (0, import_editor_elements3.useElementSetting)(id, propertyName);
-  const value = React2.useMemo(() => import_editor_props2.htmlPropTypeUtil.extract(contentProp) || "", [contentProp]);
-  const debouncedUpdateRef = React2.useRef(null);
-  const lastValueRef = React2.useRef("");
-  React2.useEffect(() => {
-    debouncedUpdateRef.current = (0, import_utils2.debounce)((newValue) => {
-      const textContent = newValue.replace(/<[^>]*>/g, "").trim();
-      const valueToSave = textContent === "" ? "&nbsp;" : newValue;
-      (0, import_editor_elements3.updateElementSettings)({
-        id,
-        props: {
-          [propertyName]: import_editor_props2.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(import_react6.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React2.createElement(
-    import_ui2.Box,
-    {
-      ref: floating.setRef,
-      style: {
-        ...floating.styles,
-        zIndex: OVERLAY_Z_INDEX,
-        pointerEvents: "auto"
-      }
-    },
-    /* @__PURE__ */ React2.createElement(import_editor_controls.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) && (0, import_editor_v1_adapters2.isExperimentActive)("v4-inline-text-editing")
   }
 ];
 function ElementsOverlays() {
-  const selected = (0, import_editor_elements4.useSelectedElement)();
+  const selected = (0, import_editor_elements2.useSelectedElement)();
   const elements = useElementsDom();
   const currentEditMode = (0, import_editor_v1_adapters2.useEditMode)();
   const isEditMode = currentEditMode === "edit";
@@ -504,7 +403,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 })
     );
   });
 }
@@ -512,26 +411,26 @@ function useElementsDom() {
   return (0, import_editor_v1_adapters2.__privateUseListenTo)(
     [(0, import_editor_v1_adapters2.windowEvent)("elementor/editor/element-rendered"), (0, import_editor_v1_adapters2.windowEvent)("elementor/editor/element-destroyed")],
     () => {
-      return (0, import_editor_elements4.getElements)().filter((el) => ELEMENTS_DATA_ATTR in (el.view?.el?.dataset ?? {})).map((element) => [element.id, element.view?.getDomElement?.()?.get?.(0)]).filter((item) => !!item[1]);
+      return (0, import_editor_elements2.getElements)().filter((el) => ELEMENTS_DATA_ATTR in (el.view?.el?.dataset ?? {})).map((element) => [element.id, element.view?.getDomElement?.()?.get?.(0)]).filter((item) => !!item[1]);
     }
   );
 }
 
 // src/components/interactions-renderer.tsx
-var React4 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var import_ui3 = require("@elementor/ui");
+var import_ui2 = require("@elementor/ui");
 
 // src/hooks/use-interactions-items.ts
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_editor_interactions = require("@elementor/editor-interactions");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 
 // src/hooks/use-on-mount.ts
-var import_react7 = require("react");
+var import_react6 = require("react");
 function useOnMount(cb) {
-  const mounted = (0, import_react7.useRef)(false);
-  (0, import_react7.useEffect)(() => {
+  const mounted = (0, import_react6.useRef)(false);
+  (0, import_react6.useEffect)(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -541,8 +440,8 @@ function useOnMount(cb) {
 
 // src/hooks/use-interactions-items.ts
 function useInteractionsItems() {
-  const [interactionItems, setInteractionItems] = (0, import_react8.useState)({});
-  const providerAndSubscribers = (0, import_react8.useMemo)(() => {
+  const [interactionItems, setInteractionItems] = (0, import_react7.useState)({});
+  const providerAndSubscribers = (0, import_react7.useMemo)(() => {
     try {
       const providers = import_editor_interactions.interactionsRepository.getProviders();
       const mapped = providers.map((provider) => {
@@ -559,7 +458,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -590,7 +489,7 @@ function useInteractionsItems() {
       });
     });
   });
-  return (0, import_react8.useMemo)(() => {
+  return (0, import_react7.useMemo)(() => {
     const result = Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items);
     return result;
   }, [interactionItems]);
@@ -626,7 +525,7 @@ function InteractionsRenderer() {
     return null;
   }
   const interactionsData = JSON.stringify(Array.isArray(interactionItems) ? interactionItems : []);
-  return /* @__PURE__ */ React4.createElement(import_ui3.Portal, { container }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React3.createElement(import_ui2.Portal, { container }, /* @__PURE__ */ React3.createElement(
     "script",
     {
       type: "application/json",
@@ -642,9 +541,9 @@ function usePortalContainer() {
 }
 
 // src/components/style-renderer.tsx
-var React5 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
-var import_ui4 = require("@elementor/ui");
+var import_ui3 = require("@elementor/ui");
 
 // src/hooks/use-documents-css-links.ts
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
@@ -676,14 +575,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}]`
     ) ?? []
   ];
@@ -694,7 +593,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_editor_styles4 = require("@elementor/editor-styles");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
@@ -732,11 +631,11 @@ function signalizedProcess(signal, steps = []) {
 }
 
 // src/hooks/use-style-prop-resolver.ts
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_editor_styles2 = require("@elementor/editor-styles");
 
 // src/renderers/create-props-resolver.ts
-var import_editor_props3 = require("@elementor/editor-props");
+var import_editor_props2 = require("@elementor/editor-props");
 
 // src/renderers/multi-props.ts
 var isMultiProps = (propValue) => {
@@ -774,7 +673,7 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
     if (value === null || value === void 0) {
       return null;
     }
-    if (!(0, import_editor_props3.isTransformable)(value)) {
+    if (!(0, import_editor_props2.isTransformable)(value)) {
       return value;
     }
     if (depth > TRANSFORM_DEPTH_LIMIT) {
@@ -783,8 +682,8 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
     if (value.disabled === true) {
       return null;
     }
-    value = (0, import_editor_props3.migratePropValue)(value, type);
-    if (!(0, import_editor_props3.isTransformable)(value)) {
+    value = (0, import_editor_props2.migratePropValue)(value, type);
+    if (!(0, import_editor_props2.isTransformable)(value)) {
       return value;
     }
     let transformablePropType = type;
@@ -860,7 +759,7 @@ var enqueueFont = (fontFamily, context = "preview") => {
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return (0, import_react9.useMemo)(() => {
+  return (0, import_react8.useMemo)(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: (0, import_editor_styles2.getStylesSchema)(),
@@ -875,20 +774,20 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 
 // src/renderers/create-styles-renderer.ts
 var import_editor_styles3 = require("@elementor/editor-styles");
-var import_utils4 = require("@elementor/utils");
+var import_utils3 = require("@elementor/utils");
 
 // src/renderers/errors.ts
-var import_utils3 = require("@elementor/utils");
-var UnknownStyleTypeError = (0, import_utils3.createError)({
+var import_utils2 = require("@elementor/utils");
+var UnknownStyleTypeError = (0, import_utils2.createError)({
   code: "unknown_style_type",
   message: "Unknown style type"
 });
-var UnknownStyleStateError = (0, import_utils3.createError)({
+var UnknownStyleStateError = (0, import_utils2.createError)({
   code: "unknown_style_state",
   message: "Unknown style state"
 });
@@ -965,7 +864,7 @@ async function propsToCss({ props, resolve, signal }) {
   }, []).join("");
 }
 function customCssToString(customCss) {
-  const decoded = (0, import_utils4.decodeString)(customCss?.raw || "");
+  const decoded = (0, import_utils3.decodeString)(customCss?.raw || "");
   if (!decoded.trim()) {
     return "";
   }
@@ -976,7 +875,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = (0, import_editor_responsive.useBreakpointsMap)();
-  return (0, import_react10.useMemo)(() => {
+  return (0, import_react9.useMemo)(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -989,8 +888,8 @@ function useStyleRenderer(resolve) {
 function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
-  const [styleItems, setStyleItems] = (0, import_react11.useState)({});
-  const providerAndSubscribers = (0, import_react11.useMemo)(() => {
+  const [styleItems, setStyleItems] = (0, import_react10.useState)({});
+  const providerAndSubscribers = (0, import_react10.useMemo)(() => {
     return import_editor_styles_repository2.stylesRepository.getProviders().map((provider) => {
       return {
         provider,
@@ -1002,7 +901,7 @@ function useStyleItems() {
       };
     });
   }, [renderStyles]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -1017,7 +916,7 @@ function useStyleItems() {
     });
   });
   const breakpointsOrder = (0, import_editor_responsive2.getBreakpoints)().map((breakpoint) => breakpoint.id);
-  return (0, import_react11.useMemo)(
+  return (0, import_react10.useMemo)(
     () => Object.values(styleItems).sort(sortByProviderPriority2).flatMap(({ items }) => items).sort(sortByStateType).sort(sortByBreakpoint(breakpointsOrder)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [styleItems, breakpointsOrder.join("-")]
@@ -1090,7 +989,7 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement(import_ui4.Portal, { 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(import_ui3.Portal, { 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 (0, import_editor_v1_adapters7.__privateUseListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
@@ -1461,10 +1360,10 @@ var transformSkewTransformer = createTransformer((value) => {
 });
 
 // src/transformers/styles/transition-transformer.ts
-var import_editor_controls2 = require("@elementor/editor-controls");
+var import_editor_controls = require("@elementor/editor-controls");
 var getAllowedProperties = () => {
   const allowedProperties = /* @__PURE__ */ new Set();
-  import_editor_controls2.transitionProperties.forEach((category) => {
+  import_editor_controls.transitionProperties.forEach((category) => {
     category.properties.forEach((property) => {
       allowedProperties.add(property.value);
     });
@@ -1527,7 +1426,7 @@ function initStyleTransformers() {
 
 // src/legacy/init-legacy-views.ts
 var import_editor_elements5 = require("@elementor/editor-elements");
-var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-dom-renderer.ts
 var import_twing = require("@elementor/twing");
@@ -1574,10 +1473,102 @@ function escapeURL(value) {
   }
 }
 
+// src/utils/inline-editing-utils.ts
+var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var WIDGET_PROPERTY_MAP = {
+  "e-heading": "title",
+  "e-paragraph": "paragraph"
+};
+var EXPERIMENT_KEY = "v4-inline-text-editing";
+var legacyWindow = window;
+var shouldRenderInlineEditingView = (elementType) => {
+  return elementType in WIDGET_PROPERTY_MAP && (0, import_editor_v1_adapters8.isExperimentActive)(EXPERIMENT_KEY);
+};
+var getWidgetType = (container) => {
+  return container?.model?.get("widgetType") ?? container?.model?.get("elType") ?? null;
+};
+var getHtmlPropertyName = (container) => {
+  const widgetType = getWidgetType(container);
+  if (!widgetType) {
+    return "";
+  }
+  const propsSchema = (0, import_editor_elements3.getElementType)(widgetType)?.propsSchema;
+  if (WIDGET_PROPERTY_MAP[widgetType]) {
+    return WIDGET_PROPERTY_MAP[widgetType];
+  }
+  if (!propsSchema) {
+    return "";
+  }
+  const entry = Object.entries(propsSchema).find(([, propType]) => {
+    switch (propType.kind) {
+      case "union":
+        return propType.prop_types.html;
+      case "object":
+        return propType.shape.html;
+      case "array":
+        return "key" in propType.item_prop_type && propType.item_prop_type.key === "html";
+    }
+    return propType.key === "html";
+  });
+  return entry?.[0] ?? "";
+};
+var getHtmlPropType = (container) => {
+  const widgetType = getWidgetType(container);
+  if (!widgetType) {
+    return null;
+  }
+  const propsSchema = (0, import_editor_elements3.getElementType)(widgetType)?.propsSchema;
+  const propertyName = getHtmlPropertyName(container) ?? null;
+  return propsSchema?.[propertyName] ?? null;
+};
+var getInlineEditablePropertyName = (container) => {
+  return getHtmlPropertyName(container) ?? "";
+};
+var getBlockedValue = (value, tag) => {
+  if (!value) {
+    return "";
+  }
+  if (!tag) {
+    return value;
+  }
+  const pseudoElement = document.createElement("div");
+  pseudoElement.innerHTML = value;
+  if (!pseudoElement?.children.length) {
+    return `<${tag}>${value}</${tag}>`;
+  }
+  const firstChild = pseudoElement.children[0];
+  const lastChild = Array.from(pseudoElement.children).slice(-1)[0];
+  if (firstChild === lastChild && pseudoElement.textContent === firstChild.textContent) {
+    return compareTag(firstChild, tag) ? value : `<${tag}>${firstChild.innerHTML}</${tag}>`;
+  }
+  if (!value.startsWith(`<${tag}`) || !value.endsWith(`</${tag}>`)) {
+    return `<${tag}>${value}</${tag}>`;
+  }
+  if (firstChild !== lastChild || !compareTag(firstChild, tag)) {
+    return `<${tag}>${value}</${tag}>`;
+  }
+  return value;
+};
+var compareTag = (el, tag) => {
+  return el.tagName.toUpperCase() === tag.toUpperCase();
+};
+var getInitialPopoverPosition = () => {
+  const positionFallback = { left: 0, top: 0 };
+  const iFrameElement = legacyWindow?.elementor?.$preview?.get(0);
+  const iFramePosition = iFrameElement?.getBoundingClientRect() ?? positionFallback;
+  const previewElement = legacyWindow?.elementor?.$previewWrapper?.get(0);
+  const previewPosition = previewElement ? { left: previewElement.scrollLeft, top: previewElement.scrollTop } : positionFallback;
+  return {
+    left: iFramePosition.left + previewPosition.left,
+    top: iFramePosition.top + previewPosition.top
+  };
+};
+
 // src/legacy/create-element-type.ts
 function createElementType(type) {
-  const 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;
     }
@@ -1587,8 +1578,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);
@@ -1634,7 +1625,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"),
@@ -1650,14 +1641,22 @@ function createElementViewClassDeclaration() {
   };
 }
 
+// src/legacy/create-inline-editing-element-type.tsx
+var React5 = __toESM(require("react"));
+var import_client = require("react-dom/client");
+var import_editor_controls2 = require("@elementor/editor-controls");
+var import_editor_elements4 = require("@elementor/editor-elements");
+var import_editor_props3 = require("@elementor/editor-props");
+var import_editor_ui = require("@elementor/editor-ui");
+
 // src/legacy/create-templated-element-type.ts
 function createTemplatedElementType({
   type,
   renderer,
   element
 }) {
-  const 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;
     }
@@ -1748,15 +1747,151 @@ 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 import_editor_props3.htmlPropTypeUtil.extract(this.model.get("settings")?.get(settingKey) ?? null) ?? import_editor_props3.htmlPropTypeUtil.extract(prop?.default ?? null) ?? defaultValue ?? "";
+    }
+    setContentValue(value) {
+      const settingKey = getInlineEditablePropertyName(this.container);
+      const valueToSave = value ? import_editor_props3.htmlPropTypeUtil.create(value) : null;
+      this.model.get("settings")?.set(settingKey, valueToSave);
+    }
+    getExpectedTag() {
+      const widgetType = getWidgetType(this.container);
+      if (!widgetType) {
+        return null;
+      }
+      const propsSchema = (0, import_editor_elements4.getElementType)(widgetType)?.propsSchema;
+      if (!propsSchema?.tag) {
+        return null;
+      }
+      return import_editor_props3.stringPropTypeUtil.extract(this.model.get("settings").get("tag") ?? null) ?? import_editor_props3.stringPropTypeUtil.extract(propsSchema.tag.default ?? null) ?? null;
+    }
+    ensureProperValue() {
+      const actualValue = this.getContentValue();
+      const tagSettings = this.getExpectedTag();
+      const wrappedValue = getBlockedValue(actualValue, tagSettings);
+      if (actualValue !== wrappedValue) {
+        this.setContentValue(wrappedValue);
+      }
+    }
+    renderInlineEditor() {
+      this.ensureProperValue();
+      const propValue = this.getContentValue();
+      const settingKey = getInlineEditablePropertyName(this.container);
+      const classes = (this.el?.children?.[0]?.classList.toString() ?? "") + " strip-styles";
+      const expectedTag = this.getExpectedTag();
+      const setValue = (value) => {
+        const valueToSave = value ? import_editor_props3.htmlPropTypeUtil.create(value) : null;
+        this.model.get("settings")?.set(settingKey, valueToSave);
+      };
+      this.$el.html("");
+      if (this.inlineEditorRoot) {
+        this.resetInlineEditorRoot();
+      }
+      this.inlineEditorRoot = (0, import_client.createRoot)(this.el);
+      this.inlineEditorRoot.render(
+        /* @__PURE__ */ React5.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React5.createElement(
+          import_editor_controls2.InlineEditor,
+          {
+            attributes: { class: classes },
+            value: propValue,
+            setValue,
+            onBlur: this.handleUnmountInlineEditor.bind(this),
+            autofocus: true,
+            showToolbar: true,
+            getInitialPopoverPosition,
+            expectedTag
+          }
+        ))
+      );
+    }
+  };
+}
+
 // src/legacy/init-legacy-views.ts
 var elementsLegacyTypes = {};
 function registerElementType(type, elementTypeGenerator) {
   elementsLegacyTypes[type] = elementTypeGenerator;
 }
 function initLegacyViews() {
-  (0, import_editor_v1_adapters8.__privateListenTo)((0, import_editor_v1_adapters8.v1ReadyEvent)(), () => {
+  (0, import_editor_v1_adapters9.__privateListenTo)((0, import_editor_v1_adapters9.v1ReadyEvent)(), () => {
     const config = (0, import_editor_elements5.getWidgetsCache)() ?? {};
-    const legacyWindow = window;
+    const legacyWindow2 = window;
     const renderer = createDomRenderer();
     Object.entries(config).forEach(([type, element]) => {
       if (!element.atomic) {
@@ -1766,11 +1901,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());
     });
   });
 }
@@ -2828,14 +2963,14 @@ An Example scenario of creating fully styled composition:
 // src/prevent-link-in-link-commands.ts
 var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 var import_i18n = require("@wordpress/i18n");
 function initLinkInLinkPrevention() {
-  (0, import_editor_v1_adapters9.blockCommand)({
+  (0, import_editor_v1_adapters10.blockCommand)({
     command: "document/elements/paste",
     condition: blockLinkInLinkPaste
   });
-  (0, import_editor_v1_adapters9.blockCommand)({
+  (0, import_editor_v1_adapters10.blockCommand)({
     command: "document/elements/move",
     condition: blockLinkInLinkMove
   });
@@ -2909,12 +3044,12 @@ function shouldBlock(sourceElements, targetElements) {
 }
 
 // src/style-commands/paste-style.ts
-var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/paste-element-style.ts
 var import_editor_elements12 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
 // src/style-commands/utils.ts
@@ -2960,7 +3095,7 @@ function getTitleForContainers(containers) {
 }
 
 // src/style-commands/undoable-actions/paste-element-style.ts
-var undoablePasteElementStyle = () => (0, import_editor_v1_adapters10.undoable)(
+var undoablePasteElementStyle = () => (0, import_editor_v1_adapters11.undoable)(
   {
     do: ({ containers, newStyle }) => {
       return containers.map((container) => {
@@ -3036,12 +3171,12 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters10.undoable)(
 // src/style-commands/paste-style.ts
 function initPasteStyleCommand() {
   const pasteElementStyleCommand = undoablePasteElementStyle();
-  (0, import_editor_v1_adapters11.blockCommand)({
+  (0, import_editor_v1_adapters12.blockCommand)({
     command: "document/elements/paste-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters11.__privateListenTo)(
-    (0, import_editor_v1_adapters11.commandStartEvent)("document/elements/paste-style"),
+  (0, import_editor_v1_adapters12.__privateListenTo)(
+    (0, import_editor_v1_adapters12.commandStartEvent)("document/elements/paste-style"),
     (e) => pasteStyles(e.args, pasteElementStyleCommand)
   );
 }
@@ -3065,14 +3200,14 @@ function pasteStyles(args, pasteCallback) {
 }
 
 // src/style-commands/reset-style.ts
-var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
 var import_editor_elements13 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
-var undoableResetElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
+var undoableResetElementStyle = () => (0, import_editor_v1_adapters13.undoable)(
   {
     do: ({ containers }) => {
       return containers.map((container) => {
@@ -3116,12 +3251,12 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters12.undoable)(
 // src/style-commands/reset-style.ts
 function initResetStyleCommand() {
   const resetElementStyles = undoableResetElementStyle();
-  (0, import_editor_v1_adapters13.blockCommand)({
+  (0, import_editor_v1_adapters14.blockCommand)({
     command: "document/elements/reset-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters13.__privateListenTo)(
-    (0, import_editor_v1_adapters13.commandStartEvent)("document/elements/reset-style"),
+  (0, import_editor_v1_adapters14.__privateListenTo)(
+    (0, import_editor_v1_adapters14.commandStartEvent)("document/elements/reset-style"),
     (e) => resetStyles(e.args, resetElementStyles)
   );
 }