@elementor/editor-canvas 4.0.0-573 → 4.0.0-591

package/dist/index.js

@@ -1243,6 +1243,11 @@ var htmlV2Transformer = createTransformer((value) => {
   return value?.content ?? "";
 });
 
+// src/transformers/settings/html-v3-transformer.ts
+var htmlV3Transformer = createTransformer((value) => {
+  return value?.content ?? "";
+});
+
 // src/transformers/settings/link-transformer.ts
 var linkTransformer = createTransformer(({ destination, isTargetBlank, tag }) => {
   return {
@@ -1297,7 +1302,7 @@ var plainTransformer = createTransformer((value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -2206,67 +2211,130 @@ var ReplacementBase = class {
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 var React5 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_ui4 = require("@elementor/ui");
-var import_react12 = require("@floating-ui/react");
+var import_react13 = require("@floating-ui/react");
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
+var import_react11 = require("react");
+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 TOOLBAR_ANCHOR_ID_PREFIX = "inline-editing-toolbar-anchor";
+var TOOLBAR_ANCHOR_STATIC_STYLES = {
+  backgroundColor: "transparent",
+  border: "none",
+  outline: "none",
+  boxShadow: "none",
+  padding: "0",
+  margin: "0",
+  borderRadius: "0",
+  overflow: "hidden",
+  opacity: "0",
+  pointerEvents: "none",
+  position: "absolute",
+  display: "block"
+};
 var INLINE_EDITING_PROPERTY_PER_TYPE = {
   "e-button": "text",
   "e-form-label": "text",
   "e-heading": "title",
   "e-paragraph": "paragraph"
 };
-var calcSelectionCenterOffsets = (view) => {
-  const frameWindow = view.root?.defaultView;
+var getInlineEditorElement = (elementWrapper, expectedTag) => {
+  return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
+};
+var useOnClickOutsideIframe = (handleUnmount) => {
+  const asyncUnmountInlineEditor = (0, import_react11.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)
+    );
+  }, []);
+};
+var useRenderToolbar = (ownerDocument, id) => {
+  const [anchor, setAnchor] = (0, import_react11.useState)(null);
+  const onSelectionEnd = (view) => {
+    const hasSelection = !view.state.selection.empty;
+    removeToolbarAnchor(ownerDocument, id);
+    if (hasSelection) {
+      setAnchor(createAnchorBasedOnSelection(ownerDocument, id));
+    } else {
+      setAnchor(null);
+    }
+  };
+  return { onSelectionEnd, anchor };
+};
+var createAnchorBasedOnSelection = (ownerDocument, id) => {
+  const frameWindow = ownerDocument.defaultView;
   const selection = frameWindow?.getSelection();
-  const editorContainer = view.dom;
-  if (!selection || !editorContainer) {
+  if (!selection) {
     return null;
   }
   const range = selection.getRangeAt(0);
   const selectionRect = range.getBoundingClientRect();
-  const editorContainerRect = editorContainer.getBoundingClientRect();
-  if (!selectionRect || !editorContainerRect) {
-    return null;
+  const bodyRect = ownerDocument.body.getBoundingClientRect();
+  const toolbarAnchor = ownerDocument.createElement("span");
+  styleToolbarAnchor(toolbarAnchor, selectionRect, bodyRect);
+  toolbarAnchor.setAttribute("id", getToolbarAnchorId(id));
+  ownerDocument.body.appendChild(toolbarAnchor);
+  return toolbarAnchor;
+};
+var removeToolbarAnchor = (ownerDocument, id) => {
+  const toolbarAnchor = getToolbarAnchor(ownerDocument, id);
+  if (toolbarAnchor) {
+    ownerDocument.body.removeChild(toolbarAnchor);
   }
-  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 getToolbarAnchorId = (id) => `${TOOLBAR_ANCHOR_ID_PREFIX}-${id}`;
+var getToolbarAnchor = (ownerDocument, id) => ownerDocument.getElementById(getToolbarAnchorId(id));
+var styleToolbarAnchor = (anchor, selectionRect, bodyRect) => {
+  const { width, height } = selectionRect;
+  Object.assign(anchor.style, {
+    ...TOOLBAR_ANCHOR_STATIC_STYLES,
+    top: `${selectionRect.top - bodyRect.top}px`,
+    left: `${selectionRect.left - bodyRect.left}px`,
+    width: `${width}px`,
+    height: `${height}px`
+  });
 };
-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;
+var horizontalShifterMiddleware = {
+  name: "horizontalShifter",
+  fn(state) {
+    const {
+      x: left,
+      y: top,
+      elements: { reference: anchor, floating }
+    } = state;
+    const newState = {
+      ...state,
+      x: left,
+      y: top
+    };
+    const isLeftOverflown = left < 0;
+    if (isLeftOverflown) {
+      newState.x = 0;
+      return newState;
+    }
+    const anchorRect = anchor.getBoundingClientRect();
+    const right = left + floating.offsetWidth;
+    const documentWidth = anchor.ownerDocument.body.offsetWidth;
+    const isRightOverflown = right > documentWidth && anchorRect.right < right;
+    if (isRightOverflown) {
+      const diff = right - documentWidth;
+      newState.x = left - diff;
+      return newState;
+    }
+    return newState;
   }
-  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,
@@ -2275,23 +2343,23 @@ var CanvasInlineEditor = ({
   rootElement,
   id,
   setValue,
-  onBlur
+  ...props
 }) => {
-  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);
+  const [editor, setEditor] = (0, import_react12.useState)(null);
+  const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
+  const onBlur = () => {
+    removeToolbarAnchor(rootElement.ownerDocument, id);
+    props.onBlur();
   };
   useOnClickOutsideIframe(onBlur);
   return /* @__PURE__ */ React5.createElement(import_ui4.ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement("style", null, `
 			.ProseMirror > * {
 				height: 100%;
 			}
-		.${EDITOR_WRAPPER_SELECTOR} .ProseMirror > button[contenteditable="true"] {
-			height: auto;
-			cursor: text;
-		}
+			.${EDITOR_WRAPPER_SELECTOR} .ProseMirror > button[contenteditable="true"] {
+				height: auto;
+				cursor: text;
+			}
 			`), /* @__PURE__ */ React5.createElement(
     import_editor_controls2.InlineEditor,
     {
@@ -2307,19 +2375,9 @@ var CanvasInlineEditor = ({
       onBlur,
       autofocus: true,
       expectedTag,
-      wrapperClassName: EDITOR_WRAPPER_SELECTOR,
       onSelectionEnd
     }
-  ), selectionOffsets && editor && /* @__PURE__ */ React5.createElement(
-    InlineEditingToolbarWrapper,
-    {
-      expectedTag,
-      editor,
-      rootElement,
-      id,
-      selectionOffsets
-    }
-  ));
+  ), toolbarAnchor && editor && /* @__PURE__ */ React5.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
 };
 var InlineEditingOverlay = ({
   expectedTag,
@@ -2327,84 +2385,25 @@ var InlineEditingOverlay = ({
   id
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
-  const [overlayRefElement, setOverlayElement] = (0, import_react11.useState)(inlineEditedElement);
-  (0, import_react11.useEffect)(() => {
+  const [overlayRefElement, setOverlayElement] = (0, import_react12.useState)(inlineEditedElement);
+  (0, import_react12.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
+var InlineEditingToolbar = ({ anchor, editor, id }) => {
+  const { refs, floatingStyles } = (0, import_react13.useFloating)({
+    placement: "top",
+    strategy: "fixed",
+    transform: false,
+    whileElementsMounted: import_react13.autoUpdate,
+    middleware: [horizontalShifterMiddleware, (0, import_react13.flip)()]
   });
-  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)
-    );
-  }, []);
+  (0, import_react12.useLayoutEffect)(() => {
+    refs.setReference(anchor);
+    return () => refs.setReference(null);
+  }, [anchor, refs]);
+  return /* @__PURE__ */ React5.createElement(import_react13.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(import_ui4.Box, { ref: refs.setFloating, role: "presentation", style: { ...floatingStyles, pointerEvents: "none" } }, /* @__PURE__ */ React5.createElement(import_editor_controls2.InlineEditorToolbar, { editor, elementId: id })));
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
@@ -2412,7 +2411,7 @@ var import_editor_props3 = require("@elementor/editor-props");
 var hasKey = (propType) => {
   return "key" in propType;
 };
-var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props3.htmlV2PropTypeUtil.key, import_editor_props3.stringPropTypeUtil.key]);
+var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props3.htmlV3PropTypeUtil.key, import_editor_props3.stringPropTypeUtil.key]);
 var isCoreTextPropTypeKey = (key) => {
   return TEXT_PROP_TYPE_KEYS.has(key);
 };
@@ -2432,7 +2431,7 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   if (rawValue === null || rawValue === void 0) {
     return isAllowedBySchema(propTypeFromSchema);
   }
-  return import_editor_props3.htmlV2PropTypeUtil.isValid(rawValue) || import_editor_props3.stringPropTypeUtil.isValid(rawValue);
+  return import_editor_props3.htmlV3PropTypeUtil.isValid(rawValue) || import_editor_props3.stringPropTypeUtil.isValid(rawValue);
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
@@ -2517,14 +2516,15 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
-    return import_editor_props4.htmlV2PropTypeUtil.extract(propValue)?.content ?? "";
+    const extracted = import_editor_props4.htmlV3PropTypeUtil.extract(propValue);
+    return import_editor_props4.stringPropTypeUtil.extract(extracted?.content ?? null) ?? "";
   }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
     const html = value || "";
     const parsed = (0, import_editor_props4.parseHtmlChildren)(html);
-    const valueToSave = import_editor_props4.htmlV2PropTypeUtil.create({
-      content: parsed.content || null,
+    const valueToSave = import_editor_props4.htmlV3PropTypeUtil.create({
+      content: parsed.content ? import_editor_props4.stringPropTypeUtil.create(parsed.content) : null,
       children: parsed.children
     });
     (0, import_editor_v1_adapters11.undoable)(
@@ -2555,7 +2555,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
       return null;
     }
     if (propType.kind === "union") {
-      const textKeys = [import_editor_props4.htmlV2PropTypeUtil.key, import_editor_props4.stringPropTypeUtil.key];
+      const textKeys = [import_editor_props4.htmlV3PropTypeUtil.key, import_editor_props4.stringPropTypeUtil.key];
       for (const key of textKeys) {
         if (propType.prop_types[key]) {
           return key;
@@ -2796,7 +2796,10 @@ var tabModelExtensions = {
       ...paragraphElement,
       settings: {
         ...paragraphElement.settings,
-        paragraph: import_editor_props5.htmlV2PropTypeUtil.create({ content: `Tab ${position}`, children: [] })
+        paragraph: import_editor_props5.htmlV3PropTypeUtil.create({
+          content: import_editor_props5.stringPropTypeUtil.create(`Tab ${position}`),
+          children: []
+        })
       }
     };
     return [updatedParagraph, ...elements.slice(1)];
@@ -3449,6 +3452,13 @@ var inputSchema = {
     `A record mapping element IDs to their styles configuration objects. Use the actual styles schema from [${STYLE_SCHEMA_URI}].`
   ).default({})
 };
+var outputSchema = {
+  errors: import_schema.z.string().describe("Error message if the composition building failed").optional(),
+  xmlStructure: import_schema.z.string().describe(
+    "The built XML structure as a string. Must use this XML after completion of building the composition, it contains real IDs."
+  ).optional(),
+  llm_instructions: import_schema.z.string().describe("Instructions what to do next, Important to follow these instructions!").optional()
+};
 
 // src/mcp/tools/build-composition/tool.ts
 var initBuildCompositionsTool = (reg) => {
@@ -3464,7 +3474,7 @@ var initBuildCompositionsTool = (reg) => {
       { description: "Global Variables", uri: "elementor://global-variables" },
       { description: "Styles best practices", uri: BEST_PRACTICES_URI }
     ],
-    // outputSchema: '',
+    outputSchema,
     modelPreferences: {
       hints: [{ name: "claude-sonnet-4-5" }]
     },
@@ -3546,10 +3556,10 @@ ${errorMessages.join(
 Now that you have these errors, fix them and try again. Errors regarding configuration objects, please check against the PropType schemas`;
         throw new Error(errorText);
       }
-      if (errors.length) {
-        throw new Error(errors.map((e) => typeof e === "string" ? e : e.message).join("\n"));
-      }
-      return `The composition was built successfully with element IDs embedded in the XML.
+      return {
+        xmlStructure: generatedXML,
+        errors: errors?.length ? errors.map((e) => typeof e === "string" ? e : e.message).join("\n\n") : void 0,
+        llm_instructions: `The composition was built successfully with element IDs embedded in the XML.
 
 **CRITICAL NEXT STEPS** (Follow in order):
 1. **Apply Global Classes**: Use "apply-global-class" tool to apply the global classes you created BEFORE building this composition
@@ -3559,10 +3569,8 @@ Now that you have these errors, fix them and try again. Errors regarding configu
 2. **Fine-tune if needed**: Use "configure-element" tool only for element-specific adjustments that don't warrant global classes
 
 Remember: Global classes ensure design consistency and reusability. Don't skip applying them!
-
-Updated XML structure:
-${generatedXML}
-`;
+`
+      };
     }
   });
 };
@@ -3681,7 +3689,7 @@ var inputSchema2 = {
   elementType: import_schema3.z.string().describe("The type of the element to retreive the schema"),
   elementId: import_schema3.z.string().describe("The unique id of the element to configure")
 };
-var outputSchema = {
+var outputSchema2 = {
   success: import_schema3.z.boolean().describe(
     "Whether the configuration change was successful, only if propertyName and propertyValue are provided"
   )
@@ -3694,7 +3702,7 @@ var initConfigureElementTool = (reg) => {
     name: "configure-element",
     description: configureElementToolPrompt,
     schema: inputSchema2,
-    outputSchema,
+    outputSchema: outputSchema2,
     requiredResources: [
       { description: "Widgets schema", uri: WIDGET_SCHEMA_URI },
       { description: "Styles schema", uri: STYLE_SCHEMA_URI }
@@ -3792,7 +3800,7 @@ var import_schema5 = require("@elementor/schema");
 var schema = {
   elementId: import_schema5.z.string()
 };
-var outputSchema2 = {
+var outputSchema3 = {
   properties: import_schema5.z.record(import_schema5.z.string(), import_schema5.z.any()).describe("A record mapping PropTypes to their corresponding PropValues"),
   style: import_schema5.z.record(import_schema5.z.string(), import_schema5.z.any()).describe("A record mapping StyleSchema properties to their corresponding PropValues"),
   childElements: import_schema5.z.array(
@@ -3819,7 +3827,7 @@ var initGetElementConfigTool = (reg) => {
     name: "get-element-configuration-values",
     description: "Retrieve the element's configuration PropValues for a specific element by unique ID.",
     schema,
-    outputSchema: outputSchema2,
+    outputSchema: outputSchema3,
     modelPreferences: {
       intelligencePriority: 0.6,
       speedPriority: 0.9