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

package/dist/index.mjs

@@ -993,7 +993,13 @@ import { __ } from "@wordpress/i18n";
 // src/form-structure/utils.ts
 import { getAllDescendants } from "@elementor/editor-elements";
 var FORM_ELEMENT_TYPE = "e-form";
-var FORM_FIELD_ELEMENT_TYPES = /* @__PURE__ */ new Set(["e-form-input", "e-form-textarea", "e-form-label"]);
+var FORM_FIELD_ELEMENT_TYPES = /* @__PURE__ */ new Set([
+  "e-form-input",
+  "e-form-textarea",
+  "e-form-label",
+  "e-form-checkbox",
+  "e-form-submit-button"
+]);
 function getArgsElementType(args) {
   return args.model?.widgetType || args.model?.elType;
 }
@@ -1209,6 +1215,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 {
@@ -1263,7 +1274,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
@@ -2129,7 +2140,7 @@ import * as React6 from "react";
 import { createRoot } from "react-dom/client";
 import { getContainer, getElementLabel, getElementType as getElementType2 } from "@elementor/editor-elements";
 import {
-  htmlV2PropTypeUtil as htmlV2PropTypeUtil2,
+  htmlV3PropTypeUtil as htmlV3PropTypeUtil2,
   parseHtmlChildren,
   stringPropTypeUtil as stringPropTypeUtil2
 } from "@elementor/editor-props";
@@ -2176,67 +2187,130 @@ 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 { useEffect as useEffect8, useLayoutEffect, useState as useState5 } 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";
+import { autoUpdate as autoUpdate2, flip, FloatingPortal as FloatingPortal2, useFloating as useFloating2 } from "@floating-ui/react";
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
+import { useCallback, useEffect as useEffect7, useState as useState4 } from "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 = 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)
+    );
+  }, []);
+};
+var useRenderToolbar = (ownerDocument, id) => {
+  const [anchor, setAnchor] = useState4(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,
@@ -2245,23 +2319,23 @@ var CanvasInlineEditor = ({
   rootElement,
   id,
   setValue,
-  onBlur
+  ...props
 }) => {
-  const [selectionOffsets, setSelectionOffsets] = useState4(null);
-  const [editor, setEditor] = useState4(null);
-  const onSelectionEnd = (view) => {
-    const hasSelection = !view.state.selection.empty;
-    setSelectionOffsets(hasSelection ? calcSelectionCenterOffsets(view) : null);
+  const [editor, setEditor] = useState5(null);
+  const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
+  const onBlur = () => {
+    removeToolbarAnchor(rootElement.ownerDocument, id);
+    props.onBlur();
   };
   useOnClickOutsideIframe(onBlur);
   return /* @__PURE__ */ React5.createElement(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(
     InlineEditor,
     {
@@ -2277,19 +2351,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,
@@ -2297,92 +2361,33 @@ var InlineEditingOverlay = ({
   id
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
-  const [overlayRefElement, setOverlayElement] = useState4(inlineEditedElement);
-  useEffect7(() => {
+  const [overlayRefElement, setOverlayElement] = useState5(inlineEditedElement);
+  useEffect8(() => {
     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
+var InlineEditingToolbar = ({ anchor, editor, id }) => {
+  const { refs, floatingStyles } = useFloating2({
+    placement: "top",
+    strategy: "fixed",
+    transform: false,
+    whileElementsMounted: autoUpdate2,
+    middleware: [horizontalShifterMiddleware, flip()]
   });
-  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)
-    );
-  }, []);
+  useLayoutEffect(() => {
+    refs.setReference(anchor);
+    return () => refs.setReference(null);
+  }, [anchor, refs]);
+  return /* @__PURE__ */ React5.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(Box2, { ref: refs.setFloating, role: "presentation", style: { ...floatingStyles, pointerEvents: "none" } }, /* @__PURE__ */ React5.createElement(InlineEditorToolbar, { editor, elementId: id })));
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
-import { htmlV2PropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
+import { htmlV3PropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
 var hasKey = (propType) => {
   return "key" in propType;
 };
-var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([htmlV2PropTypeUtil.key, stringPropTypeUtil.key]);
+var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([htmlV3PropTypeUtil.key, stringPropTypeUtil.key]);
 var isCoreTextPropTypeKey = (key) => {
   return TEXT_PROP_TYPE_KEYS.has(key);
 };
@@ -2402,7 +2407,7 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   if (rawValue === null || rawValue === void 0) {
     return isAllowedBySchema(propTypeFromSchema);
   }
-  return htmlV2PropTypeUtil.isValid(rawValue) || stringPropTypeUtil.isValid(rawValue);
+  return htmlV3PropTypeUtil.isValid(rawValue) || stringPropTypeUtil.isValid(rawValue);
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
@@ -2487,14 +2492,15 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
-    return htmlV2PropTypeUtil2.extract(propValue)?.content ?? "";
+    const extracted = htmlV3PropTypeUtil2.extract(propValue);
+    return stringPropTypeUtil2.extract(extracted?.content ?? null) ?? "";
   }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
     const html = value || "";
     const parsed = parseHtmlChildren(html);
-    const valueToSave = htmlV2PropTypeUtil2.create({
-      content: parsed.content || null,
+    const valueToSave = htmlV3PropTypeUtil2.create({
+      content: parsed.content ? stringPropTypeUtil2.create(parsed.content) : null,
       children: parsed.children
     });
     undoable(
@@ -2525,7 +2531,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
       return null;
     }
     if (propType.kind === "union") {
-      const textKeys = [htmlV2PropTypeUtil2.key, stringPropTypeUtil2.key];
+      const textKeys = [htmlV3PropTypeUtil2.key, stringPropTypeUtil2.key];
       for (const key of textKeys) {
         if (propType.prop_types[key]) {
           return key;
@@ -2750,7 +2756,7 @@ function createNestedTemplatedType(type, renderer, element) {
 }
 
 // src/legacy/tabs-model-extensions.ts
-import { htmlV2PropTypeUtil as htmlV2PropTypeUtil3 } from "@elementor/editor-props";
+import { htmlV3PropTypeUtil as htmlV3PropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
 var tabModelExtensions = {
   modifyDefaultChildren(elements) {
     if (!Array.isArray(elements) || elements.length === 0) {
@@ -2766,7 +2772,10 @@ var tabModelExtensions = {
       ...paragraphElement,
       settings: {
         ...paragraphElement.settings,
-        paragraph: htmlV2PropTypeUtil3.create({ content: `Tab ${position}`, children: [] })
+        paragraph: htmlV3PropTypeUtil3.create({
+          content: stringPropTypeUtil3.create(`Tab ${position}`),
+          children: []
+        })
       }
     };
     return [updatedParagraph, ...elements.slice(1)];
@@ -3435,6 +3444,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: z.string().describe("Error message if the composition building failed").optional(),
+  xmlStructure: 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: z.string().describe("Instructions what to do next, Important to follow these instructions!").optional()
+};
 
 // src/mcp/tools/build-composition/tool.ts
 var initBuildCompositionsTool = (reg) => {
@@ -3450,7 +3466,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" }]
     },
@@ -3532,10 +3548,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
@@ -3545,10 +3561,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}
-`;
+`
+      };
     }
   });
 };
@@ -3667,7 +3681,7 @@ var inputSchema2 = {
   elementType: z2.string().describe("The type of the element to retreive the schema"),
   elementId: z2.string().describe("The unique id of the element to configure")
 };
-var outputSchema = {
+var outputSchema2 = {
   success: z2.boolean().describe(
     "Whether the configuration change was successful, only if propertyName and propertyValue are provided"
   )
@@ -3680,7 +3694,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 }
@@ -3778,7 +3792,7 @@ import { z as z3 } from "@elementor/schema";
 var schema = {
   elementId: z3.string()
 };
-var outputSchema2 = {
+var outputSchema3 = {
   properties: z3.record(z3.string(), z3.any()).describe("A record mapping PropTypes to their corresponding PropValues"),
   style: z3.record(z3.string(), z3.any()).describe("A record mapping StyleSchema properties to their corresponding PropValues"),
   childElements: z3.array(
@@ -3805,7 +3819,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

package/package.json

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

package/src/form-structure/utils.ts

@@ -32,7 +32,13 @@ export type StorageContent = {
 };
 
 export const FORM_ELEMENT_TYPE = 'e-form';
-export const FORM_FIELD_ELEMENT_TYPES = new Set( [ 'e-form-input', 'e-form-textarea', 'e-form-label' ] );
+export const FORM_FIELD_ELEMENT_TYPES = new Set( [
+	'e-form-input',
+	'e-form-textarea',
+	'e-form-label',
+	'e-form-checkbox',
+	'e-form-submit-button',
+] );
 
 export function getArgsElementType( args: CreateArgs ): string | undefined {
 	return args.model?.widgetType || args.model?.elType;

package/src/init-settings-transformers.ts

@@ -3,6 +3,7 @@ import { attributesTransformer } from './transformers/settings/attributes-transf
 import { createClassesTransformer } from './transformers/settings/classes-transformer';
 import { dateTimeTransformer } from './transformers/settings/date-time-transformer';
 import { htmlV2Transformer } from './transformers/settings/html-v2-transformer';
+import { htmlV3Transformer } from './transformers/settings/html-v3-transformer';
 import { linkTransformer } from './transformers/settings/link-transformer';
 import { queryTransformer } from './transformers/settings/query-transformer';
 import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
@@ -19,5 +20,6 @@ export function initSettingsTransformers() {
 		.register( 'attributes', attributesTransformer )
 		.register( 'date-time', dateTimeTransformer )
 		.register( 'html-v2', htmlV2Transformer )
+		.register( 'html-v3', htmlV3Transformer )
 		.registerFallback( plainTransformer );
 }

package/src/legacy/replacements/inline-editing/__tests__/inline-editing-eligibility.test.ts

@@ -13,10 +13,10 @@ const createUnionPropType = ( keys: string[] ): PropType =>
 	} ) as PropType;
 
 describe( 'isInlineEditingAllowed', () => {
-	it( 'should allow inline editing for html-v2 prop values', () => {
+	it( 'should allow inline editing for html-v3 prop values', () => {
 		expect(
 			isInlineEditingAllowed( {
-				rawValue: { $$type: 'html-v2', value: { content: 'Hello', children: [] } },
+				rawValue: { $$type: 'html-v3', value: { content: { $$type: 'string', value: 'Hello' }, children: [] } },
 				propTypeFromSchema: null,
 			} )
 		).toBe( true );
@@ -40,11 +40,11 @@ describe( 'isInlineEditingAllowed', () => {
 		).toBe( false );
 	} );
 
-	it( 'should allow when value is unset but schema key is html-v2', () => {
+	it( 'should allow when value is unset but schema key is html-v3', () => {
 		expect(
 			isInlineEditingAllowed( {
 				rawValue: undefined,
-				propTypeFromSchema: createPlainPropType( 'html-v2' ),
+				propTypeFromSchema: createPlainPropType( 'html-v3' ),
 			} )
 		).toBe( true );
 	} );
@@ -67,16 +67,16 @@ describe( 'isInlineEditingAllowed', () => {
 		).toBe( false );
 	} );
 
-	it( 'should allow when value is unset and union schema includes html-v2', () => {
+	it( 'should allow when value is unset and union schema includes html-v3', () => {
 		expect(
 			isInlineEditingAllowed( {
 				rawValue: undefined,
-				propTypeFromSchema: createUnionPropType( [ 'dynamic', 'html-v2' ] ),
+				propTypeFromSchema: createUnionPropType( [ 'dynamic', 'html-v3' ] ),
 			} )
 		).toBe( true );
 	} );
 
-	it( 'should disallow when value is unset and union schema does not include html-v2/string', () => {
+	it( 'should disallow when value is unset and union schema does not include html-v3/string', () => {
 		expect(
 			isInlineEditingAllowed( {
 				rawValue: undefined,