@elementor/editor-canvas 3.35.0-493 → 3.35.0

package/dist/index.js

@@ -1498,8 +1498,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;
     }
@@ -1509,8 +1509,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);
@@ -1556,12 +1556,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
           }
         })
       );
@@ -1716,14 +1720,11 @@ function createTemplatedElementView({
 }
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
-var React5 = __toESM(require("react"));
-var import_react11 = require("react");
+var React6 = __toESM(require("react"));
 var import_client = require("react-dom/client");
-var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_elements3 = require("@elementor/editor-elements");
 var import_editor_props4 = 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
@@ -1764,6 +1765,207 @@ var ReplacementBase = class {
   }
 };
 
+// src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
+var React5 = __toESM(require("react"));
+var import_react11 = require("react");
+var import_editor_controls2 = require("@elementor/editor-controls");
+var import_ui4 = require("@elementor/ui");
+var import_react12 = require("@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] = (0, import_react11.useState)(null);
+  const [editor, setEditor] = (0, import_react11.useState)(null);
+  const onSelectionEnd = (view) => {
+    const hasSelection = !view.state.selection.empty;
+    setSelectionOffsets(hasSelection ? calcSelectionCenterOffsets(view) : null);
+  };
+  useOnClickOutsideIframe(onBlur);
+  return /* @__PURE__ */ React5.createElement(import_ui4.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(
+    import_editor_controls2.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] = (0, import_react11.useState)(inlineEditedElement);
+  (0, import_react11.useEffect)(() => {
+    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] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
+    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 } = (0, import_react12.useInteractions)();
+  const style = getComputedStyle(floating.styles, selectionOffsets);
+  useBindReactPropsToElement(element, getReferenceProps);
+  return /* @__PURE__ */ React5.createElement(import_react12.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
+    import_ui4.Box,
+    {
+      ref: floating.setRef,
+      style: {
+        ...floating.styles,
+        pointerEvents: "none"
+      },
+      role: "presentation",
+      ...getFloatingProps({ style })
+    },
+    floating.styles.transform && /* @__PURE__ */ React5.createElement(
+      import_ui4.Box,
+      {
+        sx: {
+          position: "relative",
+          transform: "translateY(-100%)",
+          height: "max-content"
+        }
+      },
+      /* @__PURE__ */ React5.createElement(
+        import_editor_controls2.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]);
+  (0, import_react11.useEffect)(() => {
+    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
 var import_editor_props3 = require("@elementor/editor-props");
 var hasKey = (propType) => {
@@ -1793,33 +1995,8 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   return import_editor_props3.htmlPropTypeUtil.isValid(rawValue) || import_editor_props3.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;
@@ -1833,7 +2010,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return !!this.inlineEditorRoot;
   }
   shouldRenderReplacement() {
-    return (0, import_editor_v1_adapters8.isExperimentActive)(EXPERIMENT_KEY) && this.isInlineEditingEligible();
+    return this.isInlineEditingEligible() && (0, import_editor_v1_adapters8.getCurrentEditMode)() === "edit";
   }
   handleRenderInlineEditor = () => {
     if (this.isEditingModeActive() || !this.isInlineEditingEligible()) {
@@ -1900,11 +2077,11 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
-    return import_editor_props4.htmlPropTypeUtil.extract(propValue) ?? import_editor_props4.stringPropTypeUtil.extract(propValue) ?? "";
+    return import_editor_props4.htmlPropTypeUtil.extract(propValue) ?? "";
   }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
-    const valueToSave = value ? import_editor_props4.htmlPropTypeUtil.create(value) : null;
+    const valueToSave = import_editor_props4.htmlPropTypeUtil.create(value || "");
     (0, import_editor_v1_adapters8.undoable)(
       {
         do: () => {
@@ -1979,65 +2156,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 = (0, import_client.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 = (0, import_react11.useRef)(null);
-    const [isWrapperRendered, setIsWrapperRendered] = (0, import_react11.useState)(false);
-    (0, import_react11.useEffect)(() => {
-      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(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(
-      import_ui4.Box,
-      {
-        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(
-        import_editor_controls2.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
@@ -2122,13 +2260,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;
     }
@@ -2146,7 +2284,7 @@ function registerElementType(type, elementTypeGenerator) {
 function initLegacyViews() {
   (0, import_editor_v1_adapters9.__privateListenTo)((0, import_editor_v1_adapters9.v1ReadyEvent)(), () => {
     const config = (0, import_editor_elements4.getWidgetsCache)() ?? {};
-    const legacyWindow2 = window;
+    const legacyWindow = window;
     const renderer = createDomRenderer();
     Object.entries(config).forEach(([type, element]) => {
       if (!element.atomic) {
@@ -2160,7 +2298,7 @@ function initLegacyViews() {
       } else {
         ElementType = createElementType(type);
       }
-      legacyWindow2.elementor.elementsManager.registerElementType(new ElementType());
+      legacyWindow.elementor.elementsManager.registerElementType(new ElementType());
     });
   });
 }