@elementor/editor-canvas 3.35.0-493 → 3.35.0

package/dist/index.mjs

@@ -1469,8 +1469,8 @@ function escapeURL(value) {
 
 // src/legacy/create-element-type.ts
 function createElementType(type) {
-  const legacyWindow2 = window;
-  return class extends legacyWindow2.elementor.modules.elements.types.Widget {
+  const legacyWindow = window;
+  return class extends legacyWindow.elementor.modules.elements.types.Widget {
     getType() {
       return type;
     }
@@ -1480,8 +1480,8 @@ function createElementType(type) {
   };
 }
 function createElementViewClassDeclaration() {
-  const legacyWindow2 = window;
-  return class extends legacyWindow2.elementor.modules.elements.views.Widget {
+  const legacyWindow = window;
+  return class extends legacyWindow.elementor.modules.elements.views.Widget {
     // Dispatch `render` event so the overlay layer will be updated
     onRender(...args) {
       super.onRender(...args);
@@ -1527,12 +1527,16 @@ function createElementViewClassDeclaration() {
       );
     }
     #dispatchPreviewEvent(eventType) {
-      legacyWindow2.elementor?.$preview?.[0]?.contentWindow.dispatchEvent(
+      const element = this.getDomElement().get(0);
+      if (!element) {
+        return;
+      }
+      legacyWindow.elementor?.$preview?.[0]?.contentWindow.dispatchEvent(
         new CustomEvent(eventType, {
           detail: {
             id: this.model.get("id"),
             type: this.model.get("widgetType"),
-            element: this.getDomElement().get(0)
+            element
           }
         })
       );
@@ -1687,14 +1691,11 @@ function createTemplatedElementView({
 }
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
-import * as React5 from "react";
-import { useEffect as useEffect7, useRef as useRef2, useState as useState4 } from "react";
+import * as React6 from "react";
 import { createRoot } from "react-dom/client";
-import { InlineEditor } from "@elementor/editor-controls";
 import { getContainer, getElementLabel, getElementType } from "@elementor/editor-elements";
 import { htmlPropTypeUtil as htmlPropTypeUtil2, stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
-import { __privateRunCommandSync as runCommandSync, isExperimentActive, undoable } from "@elementor/editor-v1-adapters";
-import { Box as Box2, ThemeProvider } from "@elementor/ui";
+import { __privateRunCommandSync as runCommandSync, getCurrentEditMode, undoable } from "@elementor/editor-v1-adapters";
 import { __ } from "@wordpress/i18n";
 
 // src/legacy/replacements/base.ts
@@ -1735,6 +1736,207 @@ var ReplacementBase = class {
   }
 };
 
+// src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
+import * as React5 from "react";
+import { useEffect as useEffect7, useState as useState4 } from "react";
+import { InlineEditor, InlineEditorToolbar } from "@elementor/editor-controls";
+import { Box as Box2, ThemeProvider } from "@elementor/ui";
+import { FloatingPortal as FloatingPortal2, useInteractions as useInteractions2 } from "@floating-ui/react";
+
+// src/legacy/replacements/inline-editing/inline-editing-utils.ts
+var INLINE_EDITING_PROPERTY_PER_TYPE = {
+  "e-form-label": "text",
+  "e-heading": "title",
+  "e-paragraph": "paragraph"
+};
+var calcSelectionCenterOffsets = (view) => {
+  const frameWindow = view.root?.defaultView;
+  const selection = frameWindow?.getSelection();
+  const editorContainer = view.dom;
+  if (!selection || !editorContainer) {
+    return null;
+  }
+  const range = selection.getRangeAt(0);
+  const selectionRect = range.getBoundingClientRect();
+  const editorContainerRect = editorContainer.getBoundingClientRect();
+  if (!selectionRect || !editorContainerRect) {
+    return null;
+  }
+  const verticalOffset = selectionRect.top - editorContainerRect.top;
+  const selectionCenter = selectionRect?.left + selectionRect?.width / 2;
+  const horizontalOffset = selectionCenter - editorContainerRect.left;
+  return { left: horizontalOffset, top: verticalOffset };
+};
+var getComputedStyle = (styles, offsets) => {
+  const transform = extractTransformValue(styles);
+  return transform ? {
+    ...styles,
+    marginLeft: `${offsets.left}px`,
+    marginTop: `${offsets.top}px`,
+    pointerEvents: "none"
+  } : {
+    display: "none"
+  };
+};
+var extractTransformValue = (styles) => {
+  const translateRegex = /translate\([^)]*\)\s?/g;
+  const numericValuesRegex = /(-?\d+\.?\d*)/g;
+  const translateValue = styles?.transform?.match(translateRegex)?.[0];
+  const values = translateValue?.match(numericValuesRegex);
+  if (!translateValue || !values) {
+    return null;
+  }
+  const [numericX, numericY] = values.map(Number);
+  if (!numericX || !numericY) {
+    return null;
+  }
+  return styles.transform;
+};
+
+// src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
+var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
+var NAVIGATOR_SELECTOR = "#elementor-navigator";
+var EDITING_PANEL = "#elementor-panel";
+var EDITOR_ELEMENTS_OUT_OF_IFRAME = [TOP_BAR_SELECTOR, NAVIGATOR_SELECTOR, EDITING_PANEL];
+var EDITOR_WRAPPER_SELECTOR = "inline-editor-wrapper";
+var CanvasInlineEditor = ({
+  elementClasses,
+  initialValue,
+  expectedTag,
+  rootElement,
+  id,
+  setValue,
+  onBlur
+}) => {
+  const [selectionOffsets, setSelectionOffsets] = useState4(null);
+  const [editor, setEditor] = useState4(null);
+  const onSelectionEnd = (view) => {
+    const hasSelection = !view.state.selection.empty;
+    setSelectionOffsets(hasSelection ? calcSelectionCenterOffsets(view) : null);
+  };
+  useOnClickOutsideIframe(onBlur);
+  return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement("style", null, `
+			.${EDITOR_WRAPPER_SELECTOR}, .${EDITOR_WRAPPER_SELECTOR} > * {
+				height: 100%;
+			}
+			.ProseMirror > * {
+				height: 100%;
+			}
+			`), /* @__PURE__ */ React5.createElement(
+    InlineEditor,
+    {
+      onEditorCreate: setEditor,
+      editorProps: {
+        attributes: {
+          style: "outline: none;overflow-wrap: normal;height:100%"
+        }
+      },
+      elementClasses,
+      value: initialValue,
+      setValue,
+      onBlur,
+      autofocus: true,
+      expectedTag,
+      wrapperClassName: EDITOR_WRAPPER_SELECTOR,
+      onSelectionEnd
+    }
+  ), selectionOffsets && editor && /* @__PURE__ */ React5.createElement(
+    InlineEditingToolbarWrapper,
+    {
+      expectedTag,
+      editor,
+      rootElement,
+      id,
+      selectionOffsets
+    }
+  ));
+};
+var InlineEditingOverlay = ({
+  expectedTag,
+  rootElement,
+  id
+}) => {
+  const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
+  const [overlayRefElement, setOverlayElement] = useState4(inlineEditedElement);
+  useEffect7(() => {
+    setOverlayElement(getInlineEditorElement(rootElement, expectedTag));
+  }, [expectedTag, rootElement]);
+  return overlayRefElement ? /* @__PURE__ */ React5.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
+};
+var InlineEditingToolbarWrapper = ({
+  expectedTag,
+  editor,
+  rootElement,
+  id,
+  selectionOffsets
+}) => {
+  const [element, setElement] = useState4(null);
+  useEffect7(() => {
+    setElement(getInlineEditorElement(rootElement, expectedTag));
+  }, [expectedTag, rootElement]);
+  return element ? /* @__PURE__ */ React5.createElement(InlineEditingToolbar, { element, editor, id, selectionOffsets }) : null;
+};
+var InlineEditingToolbar = ({
+  element,
+  editor,
+  id,
+  selectionOffsets
+}) => {
+  const { floating } = useFloatingOnElement({
+    element,
+    isSelected: true
+  });
+  const { getFloatingProps, getReferenceProps } = useInteractions2();
+  const style = getComputedStyle(floating.styles, selectionOffsets);
+  useBindReactPropsToElement(element, getReferenceProps);
+  return /* @__PURE__ */ React5.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
+    Box2,
+    {
+      ref: floating.setRef,
+      style: {
+        ...floating.styles,
+        pointerEvents: "none"
+      },
+      role: "presentation",
+      ...getFloatingProps({ style })
+    },
+    floating.styles.transform && /* @__PURE__ */ React5.createElement(
+      Box2,
+      {
+        sx: {
+          position: "relative",
+          transform: "translateY(-100%)",
+          height: "max-content"
+        }
+      },
+      /* @__PURE__ */ React5.createElement(
+        InlineEditorToolbar,
+        {
+          editor,
+          elementId: id,
+          sx: {
+            transform: "translateX(-50%)"
+          }
+        }
+      )
+    )
+  ));
+};
+var getInlineEditorElement = (elementWrapper, expectedTag) => {
+  return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
+};
+var useOnClickOutsideIframe = (handleUnmount) => {
+  const asyncUnmountInlineEditor = React5.useCallback(() => queueMicrotask(handleUnmount), [handleUnmount]);
+  useEffect7(() => {
+    EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
+      (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
+    );
+    return () => EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
+      (selector) => document?.querySelector(selector)?.removeEventListener("mousedown", asyncUnmountInlineEditor)
+    );
+  }, []);
+};
+
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
 import { htmlPropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
 var hasKey = (propType) => {
@@ -1764,33 +1966,8 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   return htmlPropTypeUtil.isValid(rawValue) || stringPropTypeUtil.isValid(rawValue);
 };
 
-// src/legacy/replacements/inline-editing/inline-editing-utils.ts
-var INLINE_EDITING_PROPERTY_PER_TYPE = {
-  "e-form-label": "text",
-  "e-heading": "title",
-  "e-paragraph": "paragraph"
-};
-var legacyWindow = window;
-var getInitialPopoverPosition = () => {
-  const positionFallback = { left: 0, top: 0 };
-  const iFrameElement = legacyWindow?.elementor?.$preview?.get(0);
-  const iFramePosition = iFrameElement?.getBoundingClientRect() ?? positionFallback;
-  const previewElement = legacyWindow?.elementor?.$previewWrapper?.get(0);
-  const previewPosition = previewElement ? { left: previewElement.scrollLeft, top: previewElement.scrollTop } : positionFallback;
-  return {
-    left: iFramePosition.left + previewPosition.left,
-    top: iFramePosition.top + previewPosition.top
-  };
-};
-
 // 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;
@@ -1804,7 +1981,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return !!this.inlineEditorRoot;
   }
   shouldRenderReplacement() {
-    return isExperimentActive(EXPERIMENT_KEY) && this.isInlineEditingEligible();
+    return this.isInlineEditingEligible() && getCurrentEditMode() === "edit";
   }
   handleRenderInlineEditor = () => {
     if (this.isEditingModeActive() || !this.isInlineEditingEligible()) {
@@ -1871,11 +2048,11 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
-    return htmlPropTypeUtil2.extract(propValue) ?? stringPropTypeUtil2.extract(propValue) ?? "";
+    return htmlPropTypeUtil2.extract(propValue) ?? "";
   }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
-    const valueToSave = value ? htmlPropTypeUtil2.create(value) : null;
+    const valueToSave = htmlPropTypeUtil2.create(value || "");
     undoable(
       {
         do: () => {
@@ -1950,65 +2127,26 @@ var InlineEditingReplacement = class extends ReplacementBase {
     if (this.isEditingModeActive()) {
       this.resetInlineEditorRoot();
     }
-    const InlineEditorApp = this.InlineEditorApp;
-    const wrapperClasses = "elementor";
     const elementClasses = this.element.children?.[0]?.classList.toString() ?? "";
+    const propValue = this.getExtractedContentValue();
+    const expectedTag = this.getExpectedTag();
     this.element.innerHTML = "";
     this.inlineEditorRoot = createRoot(this.element);
     this.inlineEditorRoot.render(
-      /* @__PURE__ */ React5.createElement(InlineEditorApp, { wrapperClasses, elementClasses })
-    );
-  }
-  InlineEditorApp = ({ wrapperClasses, elementClasses }) => {
-    const propValue = this.getExtractedContentValue();
-    const expectedTag = this.getExpectedTag();
-    const wrapperRef = useRef2(null);
-    const [isWrapperRendered, setIsWrapperRendered] = useState4(false);
-    useEffect7(() => {
-      setIsWrapperRendered(!!wrapperRef.current);
-      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 = React5.useCallback(
-      () => queueMicrotask(this.unmountInlineEditor.bind(this)),
-      []
-    );
-    return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(
-      Box2,
-      {
-        ref: wrapperRef,
-        sx: {
-          "& .elementor-inline-editor-reset": {
-            margin: 0,
-            padding: 0
-          }
-        }
-      },
-      isWrapperRendered && /* @__PURE__ */ React5.createElement(OutlineOverlay, { element: wrapperRef.current, id: this.id, isSelected: true }),
-      /* @__PURE__ */ React5.createElement(
-        InlineEditor,
+      /* @__PURE__ */ React6.createElement(
+        CanvasInlineEditor,
         {
-          attributes: {
-            class: wrapperClasses,
-            style: "outline: none;"
-          },
           elementClasses,
-          value: propValue,
-          setValue: this.setContentValue.bind(this),
-          onBlur: this.unmountInlineEditor.bind(this),
-          autofocus: true,
-          showToolbar: true,
-          getInitialPopoverPosition,
+          initialValue: propValue,
           expectedTag,
-          elementId: this.id
+          rootElement: this.element,
+          id: this.id,
+          setValue: this.setContentValue.bind(this),
+          onBlur: this.unmountInlineEditor.bind(this)
         }
       )
-    ));
-  };
+    );
+  }
 };
 
 // src/legacy/replacements/manager.ts
@@ -2093,13 +2231,13 @@ var createTemplatedElementTypeWithReplacements = ({
   renderer,
   element
 }) => {
-  const legacyWindow2 = window;
+  const legacyWindow = window;
   const view = createViewWithReplacements({
     type,
     renderer,
     element
   });
-  return class extends legacyWindow2.elementor.modules.elements.types.Widget {
+  return class extends legacyWindow.elementor.modules.elements.types.Widget {
     getType() {
       return type;
     }
@@ -2117,7 +2255,7 @@ function registerElementType(type, elementTypeGenerator) {
 function initLegacyViews() {
   __privateListenTo(v1ReadyEvent2(), () => {
     const config = getWidgetsCache2() ?? {};
-    const legacyWindow2 = window;
+    const legacyWindow = window;
     const renderer = createDomRenderer();
     Object.entries(config).forEach(([type, element]) => {
       if (!element.atomic) {
@@ -2131,7 +2269,7 @@ function initLegacyViews() {
       } else {
         ElementType = createElementType(type);
       }
-      legacyWindow2.elementor.elementsManager.registerElementType(new ElementType());
+      legacyWindow.elementor.elementsManager.registerElementType(new ElementType());
     });
   });
 }
@@ -2213,7 +2351,7 @@ function extractElementData(element) {
 
 // src/mcp/tools/build-composition/tool.ts
 import {
-  createElement as createElement7,
+  createElement as createElement8,
   deleteElement,
   getContainer as getContainer3,
   getWidgetsCache as getWidgetsCache6
@@ -2221,7 +2359,7 @@ import {
 
 // src/composition-builder/composition-builder.ts
 import {
-  createElement as createElement6,
+  createElement as createElement7,
   generateElementId,
   getContainer as getContainer2,
   getWidgetsCache as getWidgetsCache5
@@ -2439,7 +2577,7 @@ var CompositionBuilder = class _CompositionBuilder {
   rootContainers = [];
   containerElements = [];
   api = {
-    createElement: createElement6,
+    createElement: createElement7,
     getWidgetsCache: getWidgetsCache5,
     generateElementId,
     getContainer: getContainer2,
@@ -2828,7 +2966,7 @@ var initBuildCompositionsTool = (reg) => {
       const documentContainer = getContainer3("document");
       try {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
-          createElement: createElement7,
+          createElement: createElement8,
           getWidgetsCache: getWidgetsCache6
         });
         compositionBuilder.setElementConfig(elementConfig);

package/package.json

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

package/src/legacy/create-element-type.ts

@@ -80,12 +80,18 @@ export function createElementViewClassDeclaration(): typeof ElementView {
 		}
 
 		#dispatchPreviewEvent( eventType: string ) {
+			const element = this.getDomElement().get( 0 );
+
+			if ( ! element ) {
+				return;
+			}
+
 			legacyWindow.elementor?.$preview?.[ 0 ]?.contentWindow.dispatchEvent(
 				new CustomEvent( eventType, {
 					detail: {
 						id: this.model.get( 'id' ),
 						type: this.model.get( 'widgetType' ),
-						element: this.getDomElement().get( 0 ),
+						element,
 					},
 				} )
 			);