@orion-studios/payload-studio 0.6.0-beta.165 → 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 +13 -11
- package/dist/builder-v2/client.mjs +13 -11
- package/package.json +1 -1
|
@@ -1399,7 +1399,7 @@ 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-")) {
|
|
1402
|
+
if (property.startsWith("padding-") || property.startsWith("margin-")) {
|
|
1403
1403
|
input.addEventListener("input", () => {
|
|
1404
1404
|
if (input.value.trim().startsWith("-")) {
|
|
1405
1405
|
return;
|
|
@@ -1411,7 +1411,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
|
|
|
1411
1411
|
input.addEventListener(
|
|
1412
1412
|
"keydown",
|
|
1413
1413
|
(event) => {
|
|
1414
|
-
if (property.startsWith("padding-")) {
|
|
1414
|
+
if (property.startsWith("padding-") || property.startsWith("margin-")) {
|
|
1415
1415
|
const selectionStart2 = input.selectionStart ?? 0;
|
|
1416
1416
|
const selectionEnd2 = input.selectionEnd ?? selectionStart2;
|
|
1417
1417
|
const value2 = input.dataset.orionPaddingDraft || input.value || "";
|
|
@@ -1431,7 +1431,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
|
|
|
1431
1431
|
const nextCursor2 = Math.min((isReplacingAll ? 0 : selectionStart2) + inserted.length, nextValue2.length);
|
|
1432
1432
|
input.setSelectionRange(nextCursor2, nextCursor2);
|
|
1433
1433
|
window.dispatchEvent(
|
|
1434
|
-
new CustomEvent("orion-builder-v2-negative-
|
|
1434
|
+
new CustomEvent("orion-builder-v2-negative-spacing-input", {
|
|
1435
1435
|
detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
|
|
1436
1436
|
})
|
|
1437
1437
|
);
|
|
@@ -2560,18 +2560,20 @@ function GrapesPageEditor({
|
|
|
2560
2560
|
selected.addStyle?.({ [property]: value });
|
|
2561
2561
|
editorRef.current?.select?.(selected);
|
|
2562
2562
|
};
|
|
2563
|
-
const
|
|
2563
|
+
const applyNegativeSpacingInput = (property, value, baseValue) => {
|
|
2564
2564
|
const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
|
|
2565
|
-
|
|
2565
|
+
const isPadding = property.startsWith("padding-");
|
|
2566
|
+
const isMargin = property.startsWith("margin-");
|
|
2567
|
+
if (!selected || !isPadding && !isMargin || !value.startsWith("-")) {
|
|
2566
2568
|
return;
|
|
2567
2569
|
}
|
|
2568
2570
|
const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
|
|
2569
|
-
const base = cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0;
|
|
2570
2571
|
const adjustment = Number.parseFloat(value);
|
|
2571
2572
|
if (!Number.isFinite(adjustment)) {
|
|
2572
2573
|
return;
|
|
2573
2574
|
}
|
|
2574
|
-
const
|
|
2575
|
+
const base = isPadding ? cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0 : 0;
|
|
2576
|
+
const next = isPadding ? Math.max(0, base + adjustment) : adjustment;
|
|
2575
2577
|
const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
|
|
2576
2578
|
selectedComponentRef.current = selected;
|
|
2577
2579
|
lastSelectedComponentRef.current = selected;
|
|
@@ -3713,12 +3715,12 @@ function GrapesPageEditor({
|
|
|
3713
3715
|
closeBuilderHelpPopovers(wrapper);
|
|
3714
3716
|
openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
|
|
3715
3717
|
};
|
|
3716
|
-
const
|
|
3718
|
+
const onNegativeSpacingInput = (event) => {
|
|
3717
3719
|
const detail = event.detail || {};
|
|
3718
3720
|
if (!detail.property || !detail.value) {
|
|
3719
3721
|
return;
|
|
3720
3722
|
}
|
|
3721
|
-
|
|
3723
|
+
applyNegativeSpacingInput(detail.property, detail.value, detail.baseValue || "0");
|
|
3722
3724
|
};
|
|
3723
3725
|
const observer = new MutationObserver(() => {
|
|
3724
3726
|
decorateBuilderControls();
|
|
@@ -3733,7 +3735,7 @@ function GrapesPageEditor({
|
|
|
3733
3735
|
document.addEventListener("input", refreshControls);
|
|
3734
3736
|
document.addEventListener("input", onStylePanelInput, true);
|
|
3735
3737
|
document.addEventListener("keydown", onDocumentKeydown, true);
|
|
3736
|
-
window.addEventListener("orion-builder-v2-negative-
|
|
3738
|
+
window.addEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
|
|
3737
3739
|
return () => {
|
|
3738
3740
|
observer.disconnect();
|
|
3739
3741
|
document.removeEventListener("change", refreshControls);
|
|
@@ -3742,7 +3744,7 @@ function GrapesPageEditor({
|
|
|
3742
3744
|
document.removeEventListener("input", refreshControls);
|
|
3743
3745
|
document.removeEventListener("input", onStylePanelInput, true);
|
|
3744
3746
|
document.removeEventListener("keydown", onDocumentKeydown, true);
|
|
3745
|
-
window.removeEventListener("orion-builder-v2-negative-
|
|
3747
|
+
window.removeEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
|
|
3746
3748
|
};
|
|
3747
3749
|
}, []);
|
|
3748
3750
|
(0, import_react.useEffect)(() => {
|
|
@@ -1275,7 +1275,7 @@ 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-")) {
|
|
1278
|
+
if (property.startsWith("padding-") || property.startsWith("margin-")) {
|
|
1279
1279
|
input.addEventListener("input", () => {
|
|
1280
1280
|
if (input.value.trim().startsWith("-")) {
|
|
1281
1281
|
return;
|
|
@@ -1287,7 +1287,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
|
|
|
1287
1287
|
input.addEventListener(
|
|
1288
1288
|
"keydown",
|
|
1289
1289
|
(event) => {
|
|
1290
|
-
if (property.startsWith("padding-")) {
|
|
1290
|
+
if (property.startsWith("padding-") || property.startsWith("margin-")) {
|
|
1291
1291
|
const selectionStart2 = input.selectionStart ?? 0;
|
|
1292
1292
|
const selectionEnd2 = input.selectionEnd ?? selectionStart2;
|
|
1293
1293
|
const value2 = input.dataset.orionPaddingDraft || input.value || "";
|
|
@@ -1307,7 +1307,7 @@ var decorateBuilderNumericSteppers = (root = document) => {
|
|
|
1307
1307
|
const nextCursor2 = Math.min((isReplacingAll ? 0 : selectionStart2) + inserted.length, nextValue2.length);
|
|
1308
1308
|
input.setSelectionRange(nextCursor2, nextCursor2);
|
|
1309
1309
|
window.dispatchEvent(
|
|
1310
|
-
new CustomEvent("orion-builder-v2-negative-
|
|
1310
|
+
new CustomEvent("orion-builder-v2-negative-spacing-input", {
|
|
1311
1311
|
detail: { baseValue: input.dataset.orionPaddingBase || "0", property, value: nextValue2 }
|
|
1312
1312
|
})
|
|
1313
1313
|
);
|
|
@@ -2436,18 +2436,20 @@ function GrapesPageEditor({
|
|
|
2436
2436
|
selected.addStyle?.({ [property]: value });
|
|
2437
2437
|
editorRef.current?.select?.(selected);
|
|
2438
2438
|
};
|
|
2439
|
-
const
|
|
2439
|
+
const applyNegativeSpacingInput = (property, value, baseValue) => {
|
|
2440
2440
|
const selected = getCurrentOrionBlockTarget(getCurrentStyleTarget());
|
|
2441
|
-
|
|
2441
|
+
const isPadding = property.startsWith("padding-");
|
|
2442
|
+
const isMargin = property.startsWith("margin-");
|
|
2443
|
+
if (!selected || !isPadding && !isMargin || !value.startsWith("-")) {
|
|
2442
2444
|
return;
|
|
2443
2445
|
}
|
|
2444
2446
|
const unit = readStylePanelValue(property)?.querySelector("select")?.value.trim() || "px";
|
|
2445
|
-
const base = cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0;
|
|
2446
2447
|
const adjustment = Number.parseFloat(value);
|
|
2447
2448
|
if (!Number.isFinite(adjustment)) {
|
|
2448
2449
|
return;
|
|
2449
2450
|
}
|
|
2450
|
-
const
|
|
2451
|
+
const base = isPadding ? cssPixelValue(`${baseValue}${unit}`) ?? cssPixelValue(baseValue) ?? 0 : 0;
|
|
2452
|
+
const next = isPadding ? Math.max(0, base + adjustment) : adjustment;
|
|
2451
2453
|
const styleValue = `${Number.isInteger(next) ? next : Number(next.toFixed(2))}${unit}`;
|
|
2452
2454
|
selectedComponentRef.current = selected;
|
|
2453
2455
|
lastSelectedComponentRef.current = selected;
|
|
@@ -3589,12 +3591,12 @@ function GrapesPageEditor({
|
|
|
3589
3591
|
closeBuilderHelpPopovers(wrapper);
|
|
3590
3592
|
openBuilderHelpPopover(helpTrigger, wrapper, willOpen);
|
|
3591
3593
|
};
|
|
3592
|
-
const
|
|
3594
|
+
const onNegativeSpacingInput = (event) => {
|
|
3593
3595
|
const detail = event.detail || {};
|
|
3594
3596
|
if (!detail.property || !detail.value) {
|
|
3595
3597
|
return;
|
|
3596
3598
|
}
|
|
3597
|
-
|
|
3599
|
+
applyNegativeSpacingInput(detail.property, detail.value, detail.baseValue || "0");
|
|
3598
3600
|
};
|
|
3599
3601
|
const observer = new MutationObserver(() => {
|
|
3600
3602
|
decorateBuilderControls();
|
|
@@ -3609,7 +3611,7 @@ function GrapesPageEditor({
|
|
|
3609
3611
|
document.addEventListener("input", refreshControls);
|
|
3610
3612
|
document.addEventListener("input", onStylePanelInput, true);
|
|
3611
3613
|
document.addEventListener("keydown", onDocumentKeydown, true);
|
|
3612
|
-
window.addEventListener("orion-builder-v2-negative-
|
|
3614
|
+
window.addEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
|
|
3613
3615
|
return () => {
|
|
3614
3616
|
observer.disconnect();
|
|
3615
3617
|
document.removeEventListener("change", refreshControls);
|
|
@@ -3618,7 +3620,7 @@ function GrapesPageEditor({
|
|
|
3618
3620
|
document.removeEventListener("input", refreshControls);
|
|
3619
3621
|
document.removeEventListener("input", onStylePanelInput, true);
|
|
3620
3622
|
document.removeEventListener("keydown", onDocumentKeydown, true);
|
|
3621
|
-
window.removeEventListener("orion-builder-v2-negative-
|
|
3623
|
+
window.removeEventListener("orion-builder-v2-negative-spacing-input", onNegativeSpacingInput);
|
|
3622
3624
|
};
|
|
3623
3625
|
}, []);
|
|
3624
3626
|
useEffect(() => {
|
package/package.json
CHANGED