@orion-studios/payload-studio 0.6.0-beta.164 → 0.6.0-beta.166
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/builder-v2/client.js +37 -60
- package/dist/builder-v2/client.mjs +37 -60
- package/dist/builder-v2/styles.css +0 -8
- package/package.json +1 -1
|
@@ -1399,42 +1399,40 @@ var decorateBuilderNumericSteppers = (root = document) => {
|
|
|
1399
1399
|
input.type = "text";
|
|
1400
1400
|
input.inputMode = "decimal";
|
|
1401
1401
|
field.querySelector("select")?.setAttribute("tabindex", "-1");
|
|
1402
|
-
if (property.startsWith("padding-")) {
|
|
1403
|
-
|
|
1404
|
-
if (
|
|
1405
|
-
delete input.dataset.orionRawValue;
|
|
1402
|
+
if (property.startsWith("padding-") || property.startsWith("margin-")) {
|
|
1403
|
+
input.addEventListener("input", () => {
|
|
1404
|
+
if (input.value.trim().startsWith("-")) {
|
|
1406
1405
|
return;
|
|
1407
1406
|
}
|
|
1408
|
-
input.dataset.
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
input.addEventListener("change", keepNegativePaddingValue, true);
|
|
1407
|
+
delete input.dataset.orionPaddingBase;
|
|
1408
|
+
delete input.dataset.orionPaddingDraft;
|
|
1409
|
+
});
|
|
1412
1410
|
}
|
|
1413
1411
|
input.addEventListener(
|
|
1414
1412
|
"keydown",
|
|
1415
1413
|
(event) => {
|
|
1416
|
-
if (property.startsWith("padding-")) {
|
|
1414
|
+
if (property.startsWith("padding-") || property.startsWith("margin-")) {
|
|
1417
1415
|
const selectionStart2 = input.selectionStart ?? 0;
|
|
1418
1416
|
const selectionEnd2 = input.selectionEnd ?? selectionStart2;
|
|
1419
|
-
const value2 = input.dataset.
|
|
1417
|
+
const value2 = input.dataset.orionPaddingDraft || input.value || "";
|
|
1420
1418
|
const isReplacingAll = selectionStart2 === 0 && selectionEnd2 === value2.length;
|
|
1421
|
-
const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.
|
|
1419
|
+
const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.orionPaddingDraft?.startsWith("-")) || event.key === "-";
|
|
1422
1420
|
if (isNegativeEntry && event.key.length === 1 && /^[-.\d]$/.test(event.key)) {
|
|
1423
1421
|
event.preventDefault();
|
|
1424
1422
|
event.stopImmediatePropagation();
|
|
1425
|
-
if (!input.dataset.
|
|
1423
|
+
if (!input.dataset.orionPaddingDraft) {
|
|
1426
1424
|
input.dataset.orionPaddingBase = input.value || "0";
|
|
1427
1425
|
}
|
|
1428
1426
|
const inserted = event.key === "-" ? "-" : event.key;
|
|
1429
1427
|
const rawValue = value2.startsWith("-") && event.key === "-" && selectionStart2 === 0 && selectionEnd2 <= 1 ? value2.slice(1) : isReplacingAll ? inserted : `${value2.slice(0, selectionStart2)}${inserted}${value2.slice(selectionEnd2)}`;
|
|
1430
1428
|
const nextValue2 = rawValue.replace(/(?!^)-/g, "").replace(/^(-?[^.]*\.).*\./, "$1");
|
|
1431
1429
|
input.value = nextValue2;
|
|
1432
|
-
input.dataset.
|
|
1430
|
+
input.dataset.orionPaddingDraft = nextValue2;
|
|
1433
1431
|
const nextCursor2 = Math.min((isReplacingAll ? 0 : selectionStart2) + inserted.length, nextValue2.length);
|
|
1434
1432
|
input.setSelectionRange(nextCursor2, nextCursor2);
|
|
1435
1433
|
window.dispatchEvent(
|
|
1436
|
-
new CustomEvent("orion-builder-v2-negative-
|
|
1437
|
-
detail: { property, value: nextValue2 }
|
|
1434
|
+
new CustomEvent("orion-builder-v2-negative-spacing-input", {
|
|
1435
|
+
detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
|
|
1438
1436
|
})
|
|
1439
1437
|
);
|
|
1440
1438
|
return;
|
|
@@ -1786,14 +1784,6 @@ var canvasSelectionCss = `
|
|
|
1786
1784
|
position: relative;
|
|
1787
1785
|
}
|
|
1788
1786
|
|
|
1789
|
-
.orion-builder-v2-has-negative-padding > .xo-builder-preview,
|
|
1790
|
-
.orion-builder-v2-runtime .orion-builder-v2-has-negative-padding > * {
|
|
1791
|
-
margin-top: calc(var(--orion-builder-negative-padding-top, 0px) * -1) !important;
|
|
1792
|
-
margin-right: calc(var(--orion-builder-negative-padding-right, 0px) * -1) !important;
|
|
1793
|
-
margin-bottom: calc(var(--orion-builder-negative-padding-bottom, 0px) * -1) !important;
|
|
1794
|
-
margin-left: calc(var(--orion-builder-negative-padding-left, 0px) * -1) !important;
|
|
1795
|
-
}
|
|
1796
|
-
|
|
1797
1787
|
.xo-builder-preview-grid {
|
|
1798
1788
|
display: grid;
|
|
1799
1789
|
gap: 22px;
|
|
@@ -1922,7 +1912,7 @@ var readStylePanelValue = (property) => {
|
|
|
1922
1912
|
var readStylePanelLength = (property) => {
|
|
1923
1913
|
const control = readStylePanelValue(property);
|
|
1924
1914
|
const input = control?.querySelector("input");
|
|
1925
|
-
const value = (input?.
|
|
1915
|
+
const value = (input?.value || "").trim();
|
|
1926
1916
|
const unit = control?.querySelector("select")?.value.trim() || "";
|
|
1927
1917
|
if (!value) {
|
|
1928
1918
|
return "";
|
|
@@ -1944,13 +1934,14 @@ var readStylePanelColor = (property) => {
|
|
|
1944
1934
|
return swatchColor;
|
|
1945
1935
|
};
|
|
1946
1936
|
var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
|
|
1947
|
-
var
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1937
|
+
var cssPixelValue = (value) => {
|
|
1938
|
+
const match = value.trim().match(/^(-?\d*\.?\d+)(px)?$/i);
|
|
1939
|
+
if (!match) {
|
|
1940
|
+
return null;
|
|
1941
|
+
}
|
|
1942
|
+
const parsed = Number.parseFloat(match[1]);
|
|
1943
|
+
return Number.isFinite(parsed) ? parsed : null;
|
|
1944
|
+
};
|
|
1954
1945
|
var propertyNameFromStyleControl = (element) => {
|
|
1955
1946
|
const property = element?.closest(".gjs-sm-property");
|
|
1956
1947
|
const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
|
|
@@ -2566,41 +2557,27 @@ function GrapesPageEditor({
|
|
|
2566
2557
|
const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
|
|
2567
2558
|
selectedComponentRef.current = selected;
|
|
2568
2559
|
lastSelectedComponentRef.current = selected;
|
|
2569
|
-
if (property.startsWith("padding-") && !value.startsWith("-")) {
|
|
2570
|
-
clearNegativePaddingForProperty(selected, property);
|
|
2571
|
-
}
|
|
2572
2560
|
selected.addStyle?.({ [property]: value });
|
|
2573
2561
|
editorRef.current?.select?.(selected);
|
|
2574
2562
|
};
|
|
2575
|
-
const
|
|
2576
|
-
const variable = negativePaddingVariableForProperty(property);
|
|
2577
|
-
if (!variable) {
|
|
2578
|
-
return;
|
|
2579
|
-
}
|
|
2580
|
-
component.removeStyle?.(variable);
|
|
2581
|
-
const style = component.getStyle?.() || {};
|
|
2582
|
-
const hasNegativePadding = negativePaddingVariables.some((candidate) => candidate !== variable && Boolean(style[candidate]));
|
|
2583
|
-
if (!hasNegativePadding) {
|
|
2584
|
-
component.removeClass?.("orion-builder-v2-has-negative-padding");
|
|
2585
|
-
}
|
|
2586
|
-
};
|
|
2587
|
-
const applyNegativePaddingInput = (property, value) => {
|
|
2563
|
+
const applyNegativeSpacingInput = (property, value, baseValue) => {
|
|
2588
2564
|
const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
|
|
2589
|
-
const
|
|
2590
|
-
|
|
2565
|
+
const isPadding = property.startsWith("padding-");
|
|
2566
|
+
const isMargin = property.startsWith("margin-");
|
|
2567
|
+
if (!selected || !isPadding && !isMargin || !value.startsWith("-")) {
|
|
2591
2568
|
return;
|
|
2592
2569
|
}
|
|
2593
2570
|
const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
|
|
2594
|
-
const
|
|
2595
|
-
if (!Number.isFinite(
|
|
2596
|
-
clearNegativePaddingForProperty(selected, property);
|
|
2571
|
+
const adjustment = Number.parseFloat(value);
|
|
2572
|
+
if (!Number.isFinite(adjustment)) {
|
|
2597
2573
|
return;
|
|
2598
2574
|
}
|
|
2599
|
-
const
|
|
2575
|
+
const base = isPadding ? cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0 : 0;
|
|
2576
|
+
const next = isPadding ? Math.max(0, base + adjustment) : adjustment;
|
|
2577
|
+
const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
|
|
2600
2578
|
selectedComponentRef.current = selected;
|
|
2601
2579
|
lastSelectedComponentRef.current = selected;
|
|
2602
|
-
selected.
|
|
2603
|
-
selected.addStyle?.({ [variable]: styleValue });
|
|
2580
|
+
selected.addStyle?.({ [property]: styleValue });
|
|
2604
2581
|
editorRef.current?.select?.(selected);
|
|
2605
2582
|
};
|
|
2606
2583
|
const updateSelectedOrionBlock = (updates) => {
|
|
@@ -3681,7 +3658,7 @@ function GrapesPageEditor({
|
|
|
3681
3658
|
const onStylePanelInput = (event) => {
|
|
3682
3659
|
const target = event.target;
|
|
3683
3660
|
if (target?.closest("#orion-builder-v2-styles")) {
|
|
3684
|
-
if (target?.dataset?.
|
|
3661
|
+
if (target?.dataset?.orionPaddingDraft?.startsWith("-")) {
|
|
3685
3662
|
return;
|
|
3686
3663
|
}
|
|
3687
3664
|
const activeElement = document.activeElement;
|
|
@@ -3738,12 +3715,12 @@ function GrapesPageEditor({
|
|
|
3738
3715
|
closeBuilderHelpPopovers(wrapper);
|
|
3739
3716
|
openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
|
|
3740
3717
|
};
|
|
3741
|
-
const
|
|
3718
|
+
const onNegativeSpacingInput = (event) => {
|
|
3742
3719
|
const detail = event.detail || {};
|
|
3743
3720
|
if (!detail.property || !detail.value) {
|
|
3744
3721
|
return;
|
|
3745
3722
|
}
|
|
3746
|
-
|
|
3723
|
+
applyNegativeSpacingInput(detail.property, detail.value, detail.baseValue || "0");
|
|
3747
3724
|
};
|
|
3748
3725
|
const observer = new MutationObserver(() => {
|
|
3749
3726
|
decorateBuilderControls();
|
|
@@ -3758,7 +3735,7 @@ function GrapesPageEditor({
|
|
|
3758
3735
|
document.addEventListener("input", refreshControls);
|
|
3759
3736
|
document.addEventListener("input", onStylePanelInput, true);
|
|
3760
3737
|
document.addEventListener("keydown", onDocumentKeydown, true);
|
|
3761
|
-
window.addEventListener("orion-builder-v2-negative-
|
|
3738
|
+
window.addEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
|
|
3762
3739
|
return () => {
|
|
3763
3740
|
observer.disconnect();
|
|
3764
3741
|
document.removeEventListener("change", refreshControls);
|
|
@@ -3767,7 +3744,7 @@ function GrapesPageEditor({
|
|
|
3767
3744
|
document.removeEventListener("input", refreshControls);
|
|
3768
3745
|
document.removeEventListener("input", onStylePanelInput, true);
|
|
3769
3746
|
document.removeEventListener("keydown", onDocumentKeydown, true);
|
|
3770
|
-
window.removeEventListener("orion-builder-v2-negative-
|
|
3747
|
+
window.removeEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
|
|
3771
3748
|
};
|
|
3772
3749
|
}, []);
|
|
3773
3750
|
(0, import_react.useEffect)(() => {
|
|
@@ -1275,42 +1275,40 @@ var decorateBuilderNumericSteppers = (root = document) => {
|
|
|
1275
1275
|
input.type = "text";
|
|
1276
1276
|
input.inputMode = "decimal";
|
|
1277
1277
|
field.querySelector("select")?.setAttribute("tabindex", "-1");
|
|
1278
|
-
if (property.startsWith("padding-")) {
|
|
1279
|
-
|
|
1280
|
-
if (
|
|
1281
|
-
delete input.dataset.orionRawValue;
|
|
1278
|
+
if (property.startsWith("padding-") || property.startsWith("margin-")) {
|
|
1279
|
+
input.addEventListener("input", () => {
|
|
1280
|
+
if (input.value.trim().startsWith("-")) {
|
|
1282
1281
|
return;
|
|
1283
1282
|
}
|
|
1284
|
-
input.dataset.
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
input.addEventListener("change", keepNegativePaddingValue, true);
|
|
1283
|
+
delete input.dataset.orionPaddingBase;
|
|
1284
|
+
delete input.dataset.orionPaddingDraft;
|
|
1285
|
+
});
|
|
1288
1286
|
}
|
|
1289
1287
|
input.addEventListener(
|
|
1290
1288
|
"keydown",
|
|
1291
1289
|
(event) => {
|
|
1292
|
-
if (property.startsWith("padding-")) {
|
|
1290
|
+
if (property.startsWith("padding-") || property.startsWith("margin-")) {
|
|
1293
1291
|
const selectionStart2 = input.selectionStart ?? 0;
|
|
1294
1292
|
const selectionEnd2 = input.selectionEnd ?? selectionStart2;
|
|
1295
|
-
const value2 = input.dataset.
|
|
1293
|
+
const value2 = input.dataset.orionPaddingDraft || input.value || "";
|
|
1296
1294
|
const isReplacingAll = selectionStart2 === 0 && selectionEnd2 === value2.length;
|
|
1297
|
-
const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.
|
|
1295
|
+
const isNegativeEntry = value2.startsWith("-") || Boolean(input.dataset.orionPaddingDraft?.startsWith("-")) || event.key === "-";
|
|
1298
1296
|
if (isNegativeEntry && event.key.length === 1 && /^[-.\d]$/.test(event.key)) {
|
|
1299
1297
|
event.preventDefault();
|
|
1300
1298
|
event.stopImmediatePropagation();
|
|
1301
|
-
if (!input.dataset.
|
|
1299
|
+
if (!input.dataset.orionPaddingDraft) {
|
|
1302
1300
|
input.dataset.orionPaddingBase = input.value || "0";
|
|
1303
1301
|
}
|
|
1304
1302
|
const inserted = event.key === "-" ? "-" : event.key;
|
|
1305
1303
|
const rawValue = value2.startsWith("-") && event.key === "-" && selectionStart2 === 0 && selectionEnd2 <= 1 ? value2.slice(1) : isReplacingAll ? inserted : `${value2.slice(0, selectionStart2)}${inserted}${value2.slice(selectionEnd2)}`;
|
|
1306
1304
|
const nextValue2 = rawValue.replace(/(?!^)-/g, "").replace(/^(-?[^.]*\.).*\./, "$1");
|
|
1307
1305
|
input.value = nextValue2;
|
|
1308
|
-
input.dataset.
|
|
1306
|
+
input.dataset.orionPaddingDraft = nextValue2;
|
|
1309
1307
|
const nextCursor2 = Math.min((isReplacingAll ? 0 : selectionStart2) + inserted.length, nextValue2.length);
|
|
1310
1308
|
input.setSelectionRange(nextCursor2, nextCursor2);
|
|
1311
1309
|
window.dispatchEvent(
|
|
1312
|
-
new CustomEvent("orion-builder-v2-negative-
|
|
1313
|
-
detail: { property, value: nextValue2 }
|
|
1310
|
+
new CustomEvent("orion-builder-v2-negative-spacing-input", {
|
|
1311
|
+
detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
|
|
1314
1312
|
})
|
|
1315
1313
|
);
|
|
1316
1314
|
return;
|
|
@@ -1662,14 +1660,6 @@ var canvasSelectionCss = `
|
|
|
1662
1660
|
position: relative;
|
|
1663
1661
|
}
|
|
1664
1662
|
|
|
1665
|
-
.orion-builder-v2-has-negative-padding > .xo-builder-preview,
|
|
1666
|
-
.orion-builder-v2-runtime .orion-builder-v2-has-negative-padding > * {
|
|
1667
|
-
margin-top: calc(var(--orion-builder-negative-padding-top, 0px) * -1) !important;
|
|
1668
|
-
margin-right: calc(var(--orion-builder-negative-padding-right, 0px) * -1) !important;
|
|
1669
|
-
margin-bottom: calc(var(--orion-builder-negative-padding-bottom, 0px) * -1) !important;
|
|
1670
|
-
margin-left: calc(var(--orion-builder-negative-padding-left, 0px) * -1) !important;
|
|
1671
|
-
}
|
|
1672
|
-
|
|
1673
1663
|
.xo-builder-preview-grid {
|
|
1674
1664
|
display: grid;
|
|
1675
1665
|
gap: 22px;
|
|
@@ -1798,7 +1788,7 @@ var readStylePanelValue = (property) => {
|
|
|
1798
1788
|
var readStylePanelLength = (property) => {
|
|
1799
1789
|
const control = readStylePanelValue(property);
|
|
1800
1790
|
const input = control?.querySelector("input");
|
|
1801
|
-
const value = (input?.
|
|
1791
|
+
const value = (input?.value || "").trim();
|
|
1802
1792
|
const unit = control?.querySelector("select")?.value.trim() || "";
|
|
1803
1793
|
if (!value) {
|
|
1804
1794
|
return "";
|
|
@@ -1820,13 +1810,14 @@ var readStylePanelColor = (property) => {
|
|
|
1820
1810
|
return swatchColor;
|
|
1821
1811
|
};
|
|
1822
1812
|
var readStylePanelRadio = (property) => (readStylePanelValue(property)?.querySelector("input:checked")?.value || "").trim();
|
|
1823
|
-
var
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1813
|
+
var cssPixelValue = (value) => {
|
|
1814
|
+
const match = value.trim().match(/^(-?\d*\.?\d+)(px)?$/i);
|
|
1815
|
+
if (!match) {
|
|
1816
|
+
return null;
|
|
1817
|
+
}
|
|
1818
|
+
const parsed = Number.parseFloat(match[1]);
|
|
1819
|
+
return Number.isFinite(parsed) ? parsed : null;
|
|
1820
|
+
};
|
|
1830
1821
|
var propertyNameFromStyleControl = (element) => {
|
|
1831
1822
|
const property = element?.closest(".gjs-sm-property");
|
|
1832
1823
|
const className = Array.from(property?.classList || []).find((name) => name.startsWith("gjs-sm-property__"));
|
|
@@ -2442,41 +2433,27 @@ function GrapesPageEditor({
|
|
|
2442
2433
|
const value = property === "font-weight" ? normalizeFontWeightValue(readStylePanelSelect(property)) || readStylePanelInput(property) : property === "opacity" ? readStylePanelInput(property) : readStylePanelLength(property) || readStylePanelInput(property) || readStylePanelSelect(property) || readStylePanelRadio(property);
|
|
2443
2434
|
selectedComponentRef.current = selected;
|
|
2444
2435
|
lastSelectedComponentRef.current = selected;
|
|
2445
|
-
if (property.startsWith("padding-") && !value.startsWith("-")) {
|
|
2446
|
-
clearNegativePaddingForProperty(selected, property);
|
|
2447
|
-
}
|
|
2448
2436
|
selected.addStyle?.({ [property]: value });
|
|
2449
2437
|
editorRef.current?.select?.(selected);
|
|
2450
2438
|
};
|
|
2451
|
-
const
|
|
2452
|
-
const variable = negativePaddingVariableForProperty(property);
|
|
2453
|
-
if (!variable) {
|
|
2454
|
-
return;
|
|
2455
|
-
}
|
|
2456
|
-
component.removeStyle?.(variable);
|
|
2457
|
-
const style = component.getStyle?.() || {};
|
|
2458
|
-
const hasNegativePadding = negativePaddingVariables.some((candidate) => candidate !== variable && Boolean(style[candidate]));
|
|
2459
|
-
if (!hasNegativePadding) {
|
|
2460
|
-
component.removeClass?.("orion-builder-v2-has-negative-padding");
|
|
2461
|
-
}
|
|
2462
|
-
};
|
|
2463
|
-
const applyNegativePaddingInput = (property, value) => {
|
|
2439
|
+
const applyNegativeSpacingInput = (property, value, baseValue) => {
|
|
2464
2440
|
const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
|
|
2465
|
-
const
|
|
2466
|
-
|
|
2441
|
+
const isPadding = property.startsWith("padding-");
|
|
2442
|
+
const isMargin = property.startsWith("margin-");
|
|
2443
|
+
if (!selected || !isPadding && !isMargin || !value.startsWith("-")) {
|
|
2467
2444
|
return;
|
|
2468
2445
|
}
|
|
2469
2446
|
const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
|
|
2470
|
-
const
|
|
2471
|
-
if (!Number.isFinite(
|
|
2472
|
-
clearNegativePaddingForProperty(selected, property);
|
|
2447
|
+
const adjustment = Number.parseFloat(value);
|
|
2448
|
+
if (!Number.isFinite(adjustment)) {
|
|
2473
2449
|
return;
|
|
2474
2450
|
}
|
|
2475
|
-
const
|
|
2451
|
+
const base = isPadding ? cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0 : 0;
|
|
2452
|
+
const next = isPadding ? Math.max(0, base + adjustment) : adjustment;
|
|
2453
|
+
const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
|
|
2476
2454
|
selectedComponentRef.current = selected;
|
|
2477
2455
|
lastSelectedComponentRef.current = selected;
|
|
2478
|
-
selected.
|
|
2479
|
-
selected.addStyle?.({ [variable]: styleValue });
|
|
2456
|
+
selected.addStyle?.({ [property]: styleValue });
|
|
2480
2457
|
editorRef.current?.select?.(selected);
|
|
2481
2458
|
};
|
|
2482
2459
|
const updateSelectedOrionBlock = (updates) => {
|
|
@@ -3557,7 +3534,7 @@ function GrapesPageEditor({
|
|
|
3557
3534
|
const onStylePanelInput = (event) => {
|
|
3558
3535
|
const target = event.target;
|
|
3559
3536
|
if (target?.closest("#orion-builder-v2-styles")) {
|
|
3560
|
-
if (target?.dataset?.
|
|
3537
|
+
if (target?.dataset?.orionPaddingDraft?.startsWith("-")) {
|
|
3561
3538
|
return;
|
|
3562
3539
|
}
|
|
3563
3540
|
const activeElement = document.activeElement;
|
|
@@ -3614,12 +3591,12 @@ function GrapesPageEditor({
|
|
|
3614
3591
|
closeBuilderHelpPopovers(wrapper);
|
|
3615
3592
|
openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
|
|
3616
3593
|
};
|
|
3617
|
-
const
|
|
3594
|
+
const onNegativeSpacingInput = (event) => {
|
|
3618
3595
|
const detail = event.detail || {};
|
|
3619
3596
|
if (!detail.property || !detail.value) {
|
|
3620
3597
|
return;
|
|
3621
3598
|
}
|
|
3622
|
-
|
|
3599
|
+
applyNegativeSpacingInput(detail.property, detail.value, detail.baseValue || "0");
|
|
3623
3600
|
};
|
|
3624
3601
|
const observer = new MutationObserver(() => {
|
|
3625
3602
|
decorateBuilderControls();
|
|
@@ -3634,7 +3611,7 @@ function GrapesPageEditor({
|
|
|
3634
3611
|
document.addEventListener("input", refreshControls);
|
|
3635
3612
|
document.addEventListener("input", onStylePanelInput, true);
|
|
3636
3613
|
document.addEventListener("keydown", onDocumentKeydown, true);
|
|
3637
|
-
window.addEventListener("orion-builder-v2-negative-
|
|
3614
|
+
window.addEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
|
|
3638
3615
|
return () => {
|
|
3639
3616
|
observer.disconnect();
|
|
3640
3617
|
document.removeEventListener("change", refreshControls);
|
|
@@ -3643,7 +3620,7 @@ function GrapesPageEditor({
|
|
|
3643
3620
|
document.removeEventListener("input", refreshControls);
|
|
3644
3621
|
document.removeEventListener("input", onStylePanelInput, true);
|
|
3645
3622
|
document.removeEventListener("keydown", onDocumentKeydown, true);
|
|
3646
|
-
window.removeEventListener("orion-builder-v2-negative-
|
|
3623
|
+
window.removeEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
|
|
3647
3624
|
};
|
|
3648
3625
|
}, []);
|
|
3649
3626
|
useEffect(() => {
|
|
@@ -2385,14 +2385,6 @@
|
|
|
2385
2385
|
letter-spacing: 0;
|
|
2386
2386
|
}
|
|
2387
2387
|
|
|
2388
|
-
.orion-builder-v2-has-negative-padding > .xo-builder-preview,
|
|
2389
|
-
.orion-builder-v2-runtime .orion-builder-v2-has-negative-padding > * {
|
|
2390
|
-
margin-top: calc(var(--orion-builder-negative-padding-top, 0px) * -1) !important;
|
|
2391
|
-
margin-right: calc(var(--orion-builder-negative-padding-right, 0px) * -1) !important;
|
|
2392
|
-
margin-bottom: calc(var(--orion-builder-negative-padding-bottom, 0px) * -1) !important;
|
|
2393
|
-
margin-left: calc(var(--orion-builder-negative-padding-left, 0px) * -1) !important;
|
|
2394
|
-
}
|
|
2395
|
-
|
|
2396
2388
|
.xo-builder-preview *,
|
|
2397
2389
|
.xo-builder-preview *::before,
|
|
2398
2390
|
.xo-builder-preview *::after {
|
package/package.json
CHANGED