@elementor/editor-canvas 4.2.0-beta1 → 4.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +138 -58
- package/dist/index.mjs +103 -23
- package/package.json +20 -20
- package/src/__tests__/parse-xml.ts +2 -0
- package/src/components/__tests__/elements-overlays.test.tsx +7 -0
- package/src/components/elements-overlays.tsx +13 -10
- package/src/components/grid-outline/__tests__/grid-outline-overlay.test.tsx +13 -15
- package/src/components/grid-outline/grid-outline-overlay.tsx +3 -4
- package/src/components/outline-overlay.tsx +9 -2
- package/src/composition-builder/composition-builder.ts +12 -0
- package/src/form-structure/__tests__/form-structure-utils.test.ts +218 -0
- package/src/form-structure/enforce-form-ancestor-commands.ts +11 -4
- package/src/form-structure/utils.ts +47 -0
- package/src/init-style-transformers.ts +2 -2
- package/src/mcp/tools/build-composition/tool.ts +9 -2
- package/src/types/element-overlay.ts +2 -0
- package/src/utils/__tests__/grid-outline-utils.test.ts +39 -0
- package/src/utils/__tests__/outline-offset-utils.test.ts +39 -0
- package/src/utils/grid-outline-utils.ts +13 -2
- package/src/utils/outline-offset-utils.ts +11 -0
package/dist/index.js
CHANGED
|
@@ -522,8 +522,8 @@ function toGridTracks(computedStyle) {
|
|
|
522
522
|
return {
|
|
523
523
|
columns: parseTrackList(computedStyle.gridTemplateColumns),
|
|
524
524
|
rows: parseTrackList(computedStyle.gridTemplateRows),
|
|
525
|
-
columnGap:
|
|
526
|
-
rowGap:
|
|
525
|
+
columnGap: resolveGapPx(computedStyle.columnGap, computedStyle.width),
|
|
526
|
+
rowGap: resolveGapPx(computedStyle.rowGap, computedStyle.height),
|
|
527
527
|
padding: {
|
|
528
528
|
top: toPx(computedStyle.paddingTop),
|
|
529
529
|
right: toPx(computedStyle.paddingRight),
|
|
@@ -598,6 +598,14 @@ function toPx(value) {
|
|
|
598
598
|
const parsed = parseFloat(value);
|
|
599
599
|
return Number.isFinite(parsed) ? parsed : 0;
|
|
600
600
|
}
|
|
601
|
+
function resolveGapPx(value, referenceSize) {
|
|
602
|
+
if (value.trim().endsWith("%")) {
|
|
603
|
+
const percent = parseFloat(value);
|
|
604
|
+
const reference = parseFloat(referenceSize);
|
|
605
|
+
return Number.isFinite(percent) && Number.isFinite(reference) ? percent / 100 * reference : 0;
|
|
606
|
+
}
|
|
607
|
+
return toPx(value);
|
|
608
|
+
}
|
|
601
609
|
|
|
602
610
|
// src/hooks/use-grid-children.ts
|
|
603
611
|
var import_react3 = require("react");
|
|
@@ -870,7 +878,6 @@ var GridEmptyCellPositioner = ({ element }) => {
|
|
|
870
878
|
// src/components/grid-outline/grid-outline-overlay.tsx
|
|
871
879
|
var React6 = __toESM(require("react"));
|
|
872
880
|
var import_editor_elements4 = require("@elementor/editor-elements");
|
|
873
|
-
var import_editor_props2 = require("@elementor/editor-props");
|
|
874
881
|
var import_ui2 = require("@elementor/ui");
|
|
875
882
|
var import_react11 = require("@floating-ui/react");
|
|
876
883
|
|
|
@@ -971,6 +978,16 @@ var useHasOverlapping = () => {
|
|
|
971
978
|
return hasOverlapping;
|
|
972
979
|
};
|
|
973
980
|
|
|
981
|
+
// src/utils/outline-offset-utils.ts
|
|
982
|
+
var THIN_ELEMENT_MAX_HEIGHT_PX = 1;
|
|
983
|
+
var SMALLER_OUTLINE_OFFSET_WIDGET_TYPES = /* @__PURE__ */ new Set(["e-form-input"]);
|
|
984
|
+
function shouldUseSmallerOutlineOffset(element, widgetType) {
|
|
985
|
+
if (element.offsetHeight <= THIN_ELEMENT_MAX_HEIGHT_PX) {
|
|
986
|
+
return true;
|
|
987
|
+
}
|
|
988
|
+
return widgetType !== void 0 && SMALLER_OUTLINE_OFFSET_WIDGET_TYPES.has(widgetType);
|
|
989
|
+
}
|
|
990
|
+
|
|
974
991
|
// src/components/outline-overlay.tsx
|
|
975
992
|
var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
|
|
976
993
|
var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
|
|
@@ -982,12 +999,18 @@ var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
|
|
|
982
999
|
pointerEvents: "none"
|
|
983
1000
|
})
|
|
984
1001
|
);
|
|
985
|
-
var OutlineOverlay = ({
|
|
1002
|
+
var OutlineOverlay = ({
|
|
1003
|
+
element,
|
|
1004
|
+
isSelected,
|
|
1005
|
+
id,
|
|
1006
|
+
isGlobal = false,
|
|
1007
|
+
widgetType
|
|
1008
|
+
}) => {
|
|
986
1009
|
const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
|
|
987
1010
|
const { getFloatingProps, getReferenceProps } = (0, import_react9.useInteractions)([(0, import_react9.useHover)(context)]);
|
|
988
1011
|
const hasOverlapping = useHasOverlapping();
|
|
989
1012
|
useBindReactPropsToElement(element, getReferenceProps);
|
|
990
|
-
const isSmallerOffset = element
|
|
1013
|
+
const isSmallerOffset = shouldUseSmallerOutlineOffset(element, widgetType);
|
|
991
1014
|
return isVisible && !hasOverlapping && /* @__PURE__ */ React.createElement(import_react9.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
|
|
992
1015
|
OverlayBox,
|
|
993
1016
|
{
|
|
@@ -1143,8 +1166,8 @@ function GridOutline({ element, tracks, width, height }) {
|
|
|
1143
1166
|
|
|
1144
1167
|
// src/components/grid-outline/grid-outline-overlay.tsx
|
|
1145
1168
|
var GridOutlineOverlay = ({ element, id, isSelected }) => {
|
|
1146
|
-
const
|
|
1147
|
-
const enabled =
|
|
1169
|
+
const settings = (0, import_editor_elements4.useElementEditorSettings)(id);
|
|
1170
|
+
const enabled = settings?.grid_outline;
|
|
1148
1171
|
const rect = useElementRect(element);
|
|
1149
1172
|
const tracks = useGridTracks(element, rect);
|
|
1150
1173
|
const { floating } = useFloatingOnElement({ element, isSelected });
|
|
@@ -1167,9 +1190,10 @@ var GridOutlineOverlay = ({ element, id, isSelected }) => {
|
|
|
1167
1190
|
};
|
|
1168
1191
|
|
|
1169
1192
|
// src/components/elements-overlays.tsx
|
|
1193
|
+
var hasGridStyleDisplay = (element) => {
|
|
1194
|
+
return element.computedStyleMap().get("display")?.toString() === "grid";
|
|
1195
|
+
};
|
|
1170
1196
|
var ELEMENTS_DATA_ATTR = "atomic";
|
|
1171
|
-
var E_GRID_TYPE = "e-grid";
|
|
1172
|
-
var isGridElement = (element) => [element.dataset.eType, element.dataset.element_type].includes(E_GRID_TYPE);
|
|
1173
1197
|
var overlayRegistry = [
|
|
1174
1198
|
{
|
|
1175
1199
|
component: OutlineOverlay,
|
|
@@ -1177,11 +1201,11 @@ var overlayRegistry = [
|
|
|
1177
1201
|
},
|
|
1178
1202
|
{
|
|
1179
1203
|
component: GridEmptyCellPositioner,
|
|
1180
|
-
shouldRender: ({ element }) =>
|
|
1204
|
+
shouldRender: ({ element }) => hasGridStyleDisplay(element)
|
|
1181
1205
|
},
|
|
1182
1206
|
{
|
|
1183
1207
|
component: GridOutlineOverlay,
|
|
1184
|
-
shouldRender: ({
|
|
1208
|
+
shouldRender: ({ isSelected, element }) => isSelected && hasGridStyleDisplay(element)
|
|
1185
1209
|
}
|
|
1186
1210
|
];
|
|
1187
1211
|
function ElementsOverlays() {
|
|
@@ -1194,17 +1218,18 @@ function ElementsOverlays() {
|
|
|
1194
1218
|
if (!isActive) {
|
|
1195
1219
|
return null;
|
|
1196
1220
|
}
|
|
1197
|
-
return elements.map(({ id, domElement, isGlobal }) => {
|
|
1221
|
+
return elements.map(({ id, domElement, isGlobal, widgetType }) => {
|
|
1198
1222
|
const isSelected = selected.element?.id === id;
|
|
1199
1223
|
return overlayRegistry.map(
|
|
1200
|
-
({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected }) && /* @__PURE__ */ React7.createElement(
|
|
1224
|
+
({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected, widgetType }) && /* @__PURE__ */ React7.createElement(
|
|
1201
1225
|
Overlay,
|
|
1202
1226
|
{
|
|
1203
1227
|
key: `${id}-${index}`,
|
|
1204
1228
|
id,
|
|
1205
1229
|
element: domElement,
|
|
1206
1230
|
isSelected,
|
|
1207
|
-
isGlobal
|
|
1231
|
+
isGlobal,
|
|
1232
|
+
widgetType
|
|
1208
1233
|
}
|
|
1209
1234
|
)
|
|
1210
1235
|
);
|
|
@@ -1217,7 +1242,8 @@ function useElementsDom() {
|
|
|
1217
1242
|
return (0, import_editor_elements5.getElements)().filter((el) => isV4Element(el.view?.el?.dataset)).map((element) => ({
|
|
1218
1243
|
id: element.id,
|
|
1219
1244
|
domElement: element.view?.getDomElement?.()?.get?.(0),
|
|
1220
|
-
isGlobal: element.model.get("isGlobal") ?? false
|
|
1245
|
+
isGlobal: element.model.get("isGlobal") ?? false,
|
|
1246
|
+
widgetType: element.model.get("widgetType")
|
|
1221
1247
|
})).filter((item) => !!item.domElement);
|
|
1222
1248
|
}
|
|
1223
1249
|
);
|
|
@@ -1467,7 +1493,7 @@ var import_editor_styles = require("@elementor/editor-styles");
|
|
|
1467
1493
|
var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
|
|
1468
1494
|
|
|
1469
1495
|
// src/renderers/create-props-resolver.ts
|
|
1470
|
-
var
|
|
1496
|
+
var import_editor_props2 = require("@elementor/editor-props");
|
|
1471
1497
|
|
|
1472
1498
|
// src/renderers/multi-props.ts
|
|
1473
1499
|
var isMultiProps = (propValue) => {
|
|
@@ -1505,7 +1531,7 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
|
|
|
1505
1531
|
if (value === null || value === void 0) {
|
|
1506
1532
|
return null;
|
|
1507
1533
|
}
|
|
1508
|
-
if (!(0,
|
|
1534
|
+
if (!(0, import_editor_props2.isTransformable)(value)) {
|
|
1509
1535
|
return value;
|
|
1510
1536
|
}
|
|
1511
1537
|
if (depth > TRANSFORM_DEPTH_LIMIT) {
|
|
@@ -1563,13 +1589,13 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
|
|
|
1563
1589
|
}
|
|
1564
1590
|
|
|
1565
1591
|
// src/renderers/enqueue-font-from-style-prop.ts
|
|
1566
|
-
var
|
|
1592
|
+
var import_editor_props3 = require("@elementor/editor-props");
|
|
1567
1593
|
var maybeEnqueueFontFromStyleProp = (propType, propValue, enqueue) => {
|
|
1568
|
-
if (!(0,
|
|
1594
|
+
if (!(0, import_editor_props3.isTransformable)(propValue) || propValue.disabled) {
|
|
1569
1595
|
return;
|
|
1570
1596
|
}
|
|
1571
1597
|
const typeKey = propType.kind === "union" ? propValue.$$type : propType.key;
|
|
1572
|
-
const propTypeUtil = (0,
|
|
1598
|
+
const propTypeUtil = (0, import_editor_props3.getPropSchemaFromCache)(typeKey);
|
|
1573
1599
|
if (!propTypeUtil || !("getEnqueueFontFamily" in propTypeUtil) || typeof propTypeUtil.getEnqueueFontFamily !== "function") {
|
|
1574
1600
|
return;
|
|
1575
1601
|
}
|
|
@@ -2030,6 +2056,46 @@ function clipboardRootsAreAtomicForms(elements) {
|
|
|
2030
2056
|
}
|
|
2031
2057
|
return elements.every((el) => getClipboardElementType(el) === FORM_ELEMENT_TYPE);
|
|
2032
2058
|
}
|
|
2059
|
+
function hasFormAncestor(node) {
|
|
2060
|
+
return node.closest(FORM_ELEMENT_TYPE) !== null;
|
|
2061
|
+
}
|
|
2062
|
+
function collectFormAncestorErrors(xml) {
|
|
2063
|
+
const errors = [];
|
|
2064
|
+
for (const node of xml.querySelectorAll("*")) {
|
|
2065
|
+
if (!FORM_FIELD_ELEMENT_TYPES.has(node.tagName.toLowerCase())) {
|
|
2066
|
+
continue;
|
|
2067
|
+
}
|
|
2068
|
+
if (hasFormAncestor(node)) {
|
|
2069
|
+
continue;
|
|
2070
|
+
}
|
|
2071
|
+
const id = node.getAttribute("configuration-id");
|
|
2072
|
+
errors.push(
|
|
2073
|
+
`<${node.tagName}${id ? ` configuration-id="${id}"` : ""}> must be nested inside <e-form> (any ancestor depth is allowed).`
|
|
2074
|
+
);
|
|
2075
|
+
}
|
|
2076
|
+
return errors;
|
|
2077
|
+
}
|
|
2078
|
+
function collectSubmitButtonErrors(xml) {
|
|
2079
|
+
const errors = [];
|
|
2080
|
+
for (const form of xml.querySelectorAll("e-form")) {
|
|
2081
|
+
const submitButtons = form.querySelectorAll("e-form-submit-button");
|
|
2082
|
+
if (submitButtons.length === 0) {
|
|
2083
|
+
errors.push(`<e-form> has no <e-form-submit-button>.`);
|
|
2084
|
+
} else if (submitButtons.length > 1) {
|
|
2085
|
+
errors.push(`<e-form> has ${submitButtons.length} submit buttons \u2014 only 1 is allowed.`);
|
|
2086
|
+
}
|
|
2087
|
+
}
|
|
2088
|
+
return errors;
|
|
2089
|
+
}
|
|
2090
|
+
function collectEmptyMessageErrors(xml) {
|
|
2091
|
+
const errors = [];
|
|
2092
|
+
for (const node of xml.querySelectorAll("e-form-success-message, e-form-error-message")) {
|
|
2093
|
+
if (node.children.length === 0) {
|
|
2094
|
+
errors.push(`<${node.tagName}> must have at least one child element (e.g. <e-atomic-paragraph>).`);
|
|
2095
|
+
}
|
|
2096
|
+
}
|
|
2097
|
+
return errors;
|
|
2098
|
+
}
|
|
2033
2099
|
|
|
2034
2100
|
// src/form-structure/enforce-form-ancestor-commands.ts
|
|
2035
2101
|
var FORM_FIELDS_OUTSIDE_ALERT = {
|
|
@@ -2056,7 +2122,8 @@ function blockFormFieldCreate(args) {
|
|
|
2056
2122
|
if (!elementType || !FORM_FIELD_ELEMENT_TYPES.has(elementType)) {
|
|
2057
2123
|
return false;
|
|
2058
2124
|
}
|
|
2059
|
-
|
|
2125
|
+
const containers = args.containers ?? [args.container];
|
|
2126
|
+
if (containers.some((container) => !isWithinForm(container))) {
|
|
2060
2127
|
handleBlockedFormField();
|
|
2061
2128
|
return true;
|
|
2062
2129
|
}
|
|
@@ -2064,10 +2131,10 @@ function blockFormFieldCreate(args) {
|
|
|
2064
2131
|
}
|
|
2065
2132
|
function blockFormFieldMove(args) {
|
|
2066
2133
|
const { containers = [args.container], target } = args;
|
|
2067
|
-
const
|
|
2068
|
-
(container) => container ? hasElementTypes(container, FORM_FIELD_ELEMENT_TYPES) : false
|
|
2134
|
+
const hasLooseFormFields = containers.some(
|
|
2135
|
+
(container) => container ? !hasElementType(container, FORM_ELEMENT_TYPE) && hasElementTypes(container, FORM_FIELD_ELEMENT_TYPES) : false
|
|
2069
2136
|
);
|
|
2070
|
-
if (
|
|
2137
|
+
if (hasLooseFormFields && !isWithinForm(target) && !movedContainersIncludeAtomicFormRoot(containers)) {
|
|
2071
2138
|
handleBlockedFormField();
|
|
2072
2139
|
return true;
|
|
2073
2140
|
}
|
|
@@ -2723,13 +2790,13 @@ function initStyleTransformers() {
|
|
|
2723
2790
|
"layout-direction",
|
|
2724
2791
|
createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
|
|
2725
2792
|
).register("flex", flexTransformer).register(
|
|
2726
|
-
"border-width",
|
|
2793
|
+
"border-width-v2",
|
|
2727
2794
|
createMultiPropsTransformer(
|
|
2728
2795
|
["block-start", "block-end", "inline-start", "inline-end"],
|
|
2729
2796
|
({ key }) => `border-${key}-width`
|
|
2730
2797
|
)
|
|
2731
2798
|
).register(
|
|
2732
|
-
"border-radius",
|
|
2799
|
+
"border-radius-v2",
|
|
2733
2800
|
createMultiPropsTransformer(
|
|
2734
2801
|
["start-start", "start-end", "end-start", "end-end"],
|
|
2735
2802
|
({ key }) => `border-${key}-radius`
|
|
@@ -3425,7 +3492,7 @@ var import_client = require("react-dom/client");
|
|
|
3425
3492
|
// src/legacy/replacements/inline-editing/inline-editing-elements.tsx
|
|
3426
3493
|
var React11 = __toESM(require("react"));
|
|
3427
3494
|
var import_editor_elements9 = require("@elementor/editor-elements");
|
|
3428
|
-
var
|
|
3495
|
+
var import_editor_props5 = require("@elementor/editor-props");
|
|
3429
3496
|
var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
|
|
3430
3497
|
var import_i18n3 = require("@wordpress/i18n");
|
|
3431
3498
|
|
|
@@ -3702,11 +3769,11 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
|
|
|
3702
3769
|
};
|
|
3703
3770
|
|
|
3704
3771
|
// src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
|
|
3705
|
-
var
|
|
3772
|
+
var import_editor_props4 = require("@elementor/editor-props");
|
|
3706
3773
|
var hasKey = (propType) => {
|
|
3707
3774
|
return "key" in propType;
|
|
3708
3775
|
};
|
|
3709
|
-
var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([
|
|
3776
|
+
var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props4.htmlV3PropTypeUtil.key, import_editor_props4.stringPropTypeUtil.key]);
|
|
3710
3777
|
var isCoreTextPropTypeKey = (key) => {
|
|
3711
3778
|
return TEXT_PROP_TYPE_KEYS.has(key);
|
|
3712
3779
|
};
|
|
@@ -3726,7 +3793,7 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
|
|
|
3726
3793
|
if (rawValue === null || rawValue === void 0) {
|
|
3727
3794
|
return isAllowedBySchema(propTypeFromSchema);
|
|
3728
3795
|
}
|
|
3729
|
-
return
|
|
3796
|
+
return import_editor_props4.htmlV3PropTypeUtil.isValid(rawValue) || import_editor_props4.stringPropTypeUtil.isValid(rawValue);
|
|
3730
3797
|
};
|
|
3731
3798
|
|
|
3732
3799
|
// src/legacy/replacements/inline-editing/inline-editing-elements.tsx
|
|
@@ -3811,15 +3878,15 @@ var InlineEditingReplacement = class extends ReplacementBase {
|
|
|
3811
3878
|
}
|
|
3812
3879
|
getExtractedContentValue() {
|
|
3813
3880
|
const propValue = this.getInlineEditablePropValue();
|
|
3814
|
-
const extracted =
|
|
3815
|
-
return
|
|
3881
|
+
const extracted = import_editor_props5.htmlV3PropTypeUtil.extract(propValue);
|
|
3882
|
+
return import_editor_props5.stringPropTypeUtil.extract(extracted?.content ?? null) ?? "";
|
|
3816
3883
|
}
|
|
3817
3884
|
setContentValue(value) {
|
|
3818
3885
|
const settingKey = this.getInlineEditablePropertyName();
|
|
3819
3886
|
const html = value || "";
|
|
3820
|
-
const parsed = (0,
|
|
3821
|
-
const valueToSave =
|
|
3822
|
-
content: parsed.content ?
|
|
3887
|
+
const parsed = (0, import_editor_props5.parseHtmlChildren)(html);
|
|
3888
|
+
const valueToSave = import_editor_props5.htmlV3PropTypeUtil.create({
|
|
3889
|
+
content: parsed.content ? import_editor_props5.stringPropTypeUtil.create(parsed.content) : null,
|
|
3823
3890
|
children: parsed.children
|
|
3824
3891
|
});
|
|
3825
3892
|
(0, import_editor_v1_adapters13.undoable)(
|
|
@@ -3850,7 +3917,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
|
|
|
3850
3917
|
return null;
|
|
3851
3918
|
}
|
|
3852
3919
|
if (propType.kind === "union") {
|
|
3853
|
-
const textKeys = [
|
|
3920
|
+
const textKeys = [import_editor_props5.htmlV3PropTypeUtil.key, import_editor_props5.stringPropTypeUtil.key];
|
|
3854
3921
|
for (const key of textKeys) {
|
|
3855
3922
|
if (propType.prop_types[key]) {
|
|
3856
3923
|
return key;
|
|
@@ -3879,7 +3946,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
|
|
|
3879
3946
|
getExpectedTag() {
|
|
3880
3947
|
const tagPropType = this.getTagPropType();
|
|
3881
3948
|
const tagSettingKey = "tag";
|
|
3882
|
-
return
|
|
3949
|
+
return import_editor_props5.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props5.stringPropTypeUtil.extract(tagPropType?.default ?? null) ?? null;
|
|
3883
3950
|
}
|
|
3884
3951
|
getTagPropType() {
|
|
3885
3952
|
const propsSchema = (0, import_editor_elements9.getElementType)(this.type)?.propsSchema;
|
|
@@ -4106,7 +4173,7 @@ function createNestedTemplatedType(type, renderer, element) {
|
|
|
4106
4173
|
}
|
|
4107
4174
|
|
|
4108
4175
|
// src/legacy/tabs-model-extensions.ts
|
|
4109
|
-
var
|
|
4176
|
+
var import_editor_props6 = require("@elementor/editor-props");
|
|
4110
4177
|
var tabModelExtensions = {
|
|
4111
4178
|
modifyDefaultChildren(elements) {
|
|
4112
4179
|
if (!Array.isArray(elements) || elements.length === 0) {
|
|
@@ -4122,8 +4189,8 @@ var tabModelExtensions = {
|
|
|
4122
4189
|
...paragraphElement,
|
|
4123
4190
|
settings: {
|
|
4124
4191
|
...paragraphElement.settings,
|
|
4125
|
-
paragraph:
|
|
4126
|
-
content:
|
|
4192
|
+
paragraph: import_editor_props6.htmlV3PropTypeUtil.create({
|
|
4193
|
+
content: import_editor_props6.stringPropTypeUtil.create(`Tab ${position}`),
|
|
4127
4194
|
children: []
|
|
4128
4195
|
})
|
|
4129
4196
|
}
|
|
@@ -4136,7 +4203,7 @@ function initTabsModelExtensions() {
|
|
|
4136
4203
|
}
|
|
4137
4204
|
|
|
4138
4205
|
// src/mcp/canvas-mcp.ts
|
|
4139
|
-
var
|
|
4206
|
+
var import_editor_props11 = require("@elementor/editor-props");
|
|
4140
4207
|
|
|
4141
4208
|
// src/mcp/resources/available-widgets-resource.ts
|
|
4142
4209
|
var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
|
|
@@ -4288,7 +4355,7 @@ function extractElementData(element) {
|
|
|
4288
4355
|
}
|
|
4289
4356
|
|
|
4290
4357
|
// src/mcp/resources/dynamic-tags-resource.ts
|
|
4291
|
-
var
|
|
4358
|
+
var import_editor_props7 = require("@elementor/editor-props");
|
|
4292
4359
|
|
|
4293
4360
|
// src/mcp/utils/resolve-dynamic-tag.ts
|
|
4294
4361
|
var import_editor_v1_adapters17 = require("@elementor/editor-v1-adapters");
|
|
@@ -4356,7 +4423,7 @@ var defaultSettingValue = (propType) => {
|
|
|
4356
4423
|
var DYNAMIC_TAGS_URI = "elementor://dynamic-tags";
|
|
4357
4424
|
var settingsSchema = (propsSchema) => {
|
|
4358
4425
|
return Object.fromEntries(
|
|
4359
|
-
Object.entries(propsSchema ?? {}).filter(([key]) => !OMITTED_DYNAMIC_SETTING_KEYS.includes(key)).map(([key, propType]) => [key,
|
|
4426
|
+
Object.entries(propsSchema ?? {}).filter(([key]) => !OMITTED_DYNAMIC_SETTING_KEYS.includes(key)).map(([key, propType]) => [key, import_editor_props7.Schema.propTypeToJsonSchema(propType)])
|
|
4360
4427
|
);
|
|
4361
4428
|
};
|
|
4362
4429
|
var buildDynamicTagsList = () => {
|
|
@@ -4713,7 +4780,7 @@ var import_editor_elements15 = require("@elementor/editor-elements");
|
|
|
4713
4780
|
|
|
4714
4781
|
// src/mcp/utils/do-update-element-property.ts
|
|
4715
4782
|
var import_editor_elements14 = require("@elementor/editor-elements");
|
|
4716
|
-
var
|
|
4783
|
+
var import_editor_props8 = require("@elementor/editor-props");
|
|
4717
4784
|
var import_editor_styles4 = require("@elementor/editor-styles");
|
|
4718
4785
|
var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
|
|
4719
4786
|
|
|
@@ -4790,7 +4857,7 @@ var LOCAL_STYLE_META = {
|
|
|
4790
4857
|
};
|
|
4791
4858
|
function resolvePropValue(value, forceKey) {
|
|
4792
4859
|
const Utils = window.elementorV2.editorVariables.Utils;
|
|
4793
|
-
return
|
|
4860
|
+
return import_editor_props8.Schema.adjustLlmPropValueSchema(value, {
|
|
4794
4861
|
forceKey,
|
|
4795
4862
|
transformers: {
|
|
4796
4863
|
...Utils.globalVariablesLLMResolvers,
|
|
@@ -4849,7 +4916,7 @@ var doUpdateElementProperty = (params) => {
|
|
|
4849
4916
|
}
|
|
4850
4917
|
if (propertyRawSchema.kind === "plain") {
|
|
4851
4918
|
if (typeof propertyMapValue[stylePropName] !== "object") {
|
|
4852
|
-
const propUtil = (0,
|
|
4919
|
+
const propUtil = (0, import_editor_props8.getPropSchemaFromCache)(propertyRawSchema.key);
|
|
4853
4920
|
if (propUtil) {
|
|
4854
4921
|
const plainValue = propUtil.create(propertyMapValue[stylePropName]);
|
|
4855
4922
|
propertyMapValue[stylePropName] = plainValue;
|
|
@@ -4902,7 +4969,7 @@ var doUpdateElementProperty = (params) => {
|
|
|
4902
4969
|
}
|
|
4903
4970
|
const propKey = elementPropSchema[propertyName].key;
|
|
4904
4971
|
const value = resolvePropValue(propertyValue, propKey);
|
|
4905
|
-
const { valid, jsonSchema } =
|
|
4972
|
+
const { valid, jsonSchema } = import_editor_props8.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
|
|
4906
4973
|
if (!valid) {
|
|
4907
4974
|
throw new Error(
|
|
4908
4975
|
`Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
|
|
@@ -5173,6 +5240,11 @@ var CompositionBuilder = class _CompositionBuilder {
|
|
|
5173
5240
|
throw new Error(`Invalid element structure:
|
|
5174
5241
|
${childTypeErrors.join("\n")}`);
|
|
5175
5242
|
}
|
|
5243
|
+
const formErrors = [
|
|
5244
|
+
...collectFormAncestorErrors(this.xml),
|
|
5245
|
+
...collectSubmitButtonErrors(this.xml),
|
|
5246
|
+
...collectEmptyMessageErrors(this.xml)
|
|
5247
|
+
];
|
|
5176
5248
|
const children = Array.from(this.xml.children);
|
|
5177
5249
|
for (const childNode of children) {
|
|
5178
5250
|
const modelTree = this.buildModelTree(childNode, widgetsCache);
|
|
@@ -5207,6 +5279,7 @@ ${childTypeErrors.join("\n")}`);
|
|
|
5207
5279
|
return {
|
|
5208
5280
|
configErrors,
|
|
5209
5281
|
styleErrors,
|
|
5282
|
+
formErrors,
|
|
5210
5283
|
rootContainers: [...this.rootContainers]
|
|
5211
5284
|
};
|
|
5212
5285
|
}
|
|
@@ -5517,7 +5590,11 @@ var initBuildCompositionsTool = (reg) => {
|
|
|
5517
5590
|
compositionBuilder.setElementConfig(elementConfig);
|
|
5518
5591
|
compositionBuilder.setStylesConfig(stylesConfig);
|
|
5519
5592
|
compositionBuilder.setCustomCSS(customCSS);
|
|
5520
|
-
const {
|
|
5593
|
+
const {
|
|
5594
|
+
configErrors,
|
|
5595
|
+
formErrors,
|
|
5596
|
+
rootContainers: generatedRootContainers
|
|
5597
|
+
} = await compositionBuilder.build(targetContainer);
|
|
5521
5598
|
rootContainers.push(...generatedRootContainers);
|
|
5522
5599
|
generatedXML = new XMLSerializer().serializeToString(compositionBuilder.getXML());
|
|
5523
5600
|
rootContainers.forEach((container) => {
|
|
@@ -5532,6 +5609,9 @@ var initBuildCompositionsTool = (reg) => {
|
|
|
5532
5609
|
if (configErrors.length) {
|
|
5533
5610
|
errors.push(...configErrors.map((msg) => new Error(msg)));
|
|
5534
5611
|
}
|
|
5612
|
+
if (formErrors.length) {
|
|
5613
|
+
errors.push(...formErrors.map((msg) => new Error(msg)));
|
|
5614
|
+
}
|
|
5535
5615
|
} catch (error) {
|
|
5536
5616
|
errors.push(error);
|
|
5537
5617
|
}
|
|
@@ -5647,7 +5727,7 @@ function onElementAdded(element) {
|
|
|
5647
5727
|
// src/mcp/tools/configure-element/tool.ts
|
|
5648
5728
|
var import_editor_elements17 = require("@elementor/editor-elements");
|
|
5649
5729
|
var import_editor_mcp5 = require("@elementor/editor-mcp");
|
|
5650
|
-
var
|
|
5730
|
+
var import_editor_props9 = require("@elementor/editor-props");
|
|
5651
5731
|
|
|
5652
5732
|
// src/mcp/tools/configure-element/prompt.ts
|
|
5653
5733
|
var import_editor_mcp4 = require("@elementor/editor-mcp");
|
|
@@ -5836,7 +5916,7 @@ var initConfigureElementTool = (reg) => {
|
|
|
5836
5916
|
const propertiesToUpdate = resolveCanonicalPropKeys(elementType, propertiesToChange);
|
|
5837
5917
|
const toUpdate = Object.entries(propertiesToUpdate);
|
|
5838
5918
|
for (const [propertyName, propertyValue] of toUpdate) {
|
|
5839
|
-
if (!
|
|
5919
|
+
if (!import_editor_props9.Schema.isPropKeyConfigurable(propertyName)) {
|
|
5840
5920
|
throw new Error(`Not allowed to update ${propertyName}`);
|
|
5841
5921
|
}
|
|
5842
5922
|
try {
|
|
@@ -5913,7 +5993,7 @@ Provide styling as raw CSS via the "style" parameter (a flat map of CSS property
|
|
|
5913
5993
|
|
|
5914
5994
|
// src/mcp/tools/get-element-config/tool.ts
|
|
5915
5995
|
var import_editor_elements18 = require("@elementor/editor-elements");
|
|
5916
|
-
var
|
|
5996
|
+
var import_editor_props10 = require("@elementor/editor-props");
|
|
5917
5997
|
var import_schema5 = require("@elementor/schema");
|
|
5918
5998
|
var schema = {
|
|
5919
5999
|
elementId: import_schema5.z.string()
|
|
@@ -5970,7 +6050,7 @@ var initGetElementConfigTool = (reg) => {
|
|
|
5970
6050
|
}
|
|
5971
6051
|
const propValues = {};
|
|
5972
6052
|
const stylePropValues = {};
|
|
5973
|
-
|
|
6053
|
+
import_editor_props10.Schema.configurableKeys(propSchema).forEach((key) => {
|
|
5974
6054
|
propValues[key] = structuredClone(elementRawSettings.get(key));
|
|
5975
6055
|
});
|
|
5976
6056
|
const elementStyles = (0, import_editor_elements18.getElementStyles)(elementId) || {};
|
|
@@ -6006,7 +6086,7 @@ var initGetElementConfigTool = (reg) => {
|
|
|
6006
6086
|
|
|
6007
6087
|
// src/mcp/canvas-mcp.ts
|
|
6008
6088
|
var initCanvasMcp = (reg) => {
|
|
6009
|
-
|
|
6089
|
+
import_editor_props11.Schema.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
|
|
6010
6090
|
initWidgetsSchemaResource(reg);
|
|
6011
6091
|
initAvailableWidgetsResource(reg);
|
|
6012
6092
|
initDocumentStructureResource(reg);
|
|
@@ -6213,12 +6293,12 @@ function shouldBlock(sourceElements, targetElements) {
|
|
|
6213
6293
|
|
|
6214
6294
|
// src/style-commands/paste-style.ts
|
|
6215
6295
|
var import_editor_elements22 = require("@elementor/editor-elements");
|
|
6216
|
-
var
|
|
6296
|
+
var import_editor_props13 = require("@elementor/editor-props");
|
|
6217
6297
|
var import_editor_v1_adapters24 = require("@elementor/editor-v1-adapters");
|
|
6218
6298
|
|
|
6219
6299
|
// src/utils/command-utils.ts
|
|
6220
6300
|
var import_editor_elements20 = require("@elementor/editor-elements");
|
|
6221
|
-
var
|
|
6301
|
+
var import_editor_props12 = require("@elementor/editor-props");
|
|
6222
6302
|
var import_i18n5 = require("@wordpress/i18n");
|
|
6223
6303
|
function hasAtomicWidgets(args) {
|
|
6224
6304
|
const { containers = [args.container] } = args;
|
|
@@ -6236,7 +6316,7 @@ function getClassesProp(container) {
|
|
|
6236
6316
|
return null;
|
|
6237
6317
|
}
|
|
6238
6318
|
const [propKey] = Object.entries(propsSchema).find(
|
|
6239
|
-
([, propType]) => propType.kind === "plain" && propType.key ===
|
|
6319
|
+
([, propType]) => propType.kind === "plain" && propType.key === import_editor_props12.CLASSES_PROP_KEY
|
|
6240
6320
|
) ?? [];
|
|
6241
6321
|
return propKey ?? null;
|
|
6242
6322
|
}
|
|
@@ -6385,8 +6465,8 @@ function pasteClasses(containers, classes) {
|
|
|
6385
6465
|
return;
|
|
6386
6466
|
}
|
|
6387
6467
|
const classesSetting = (0, import_editor_elements22.getElementSetting)(container.id, classesProp);
|
|
6388
|
-
const currentClasses =
|
|
6389
|
-
const newClasses =
|
|
6468
|
+
const currentClasses = import_editor_props13.classesPropTypeUtil.extract(classesSetting) ?? [];
|
|
6469
|
+
const newClasses = import_editor_props13.classesPropTypeUtil.create(Array.from(/* @__PURE__ */ new Set([...classes, ...currentClasses])));
|
|
6390
6470
|
(0, import_editor_elements22.updateElementSettings)({
|
|
6391
6471
|
id: container.id,
|
|
6392
6472
|
props: { [classesProp]: newClasses }
|