@ohhwells/bridge 0.1.50 → 0.1.51-next.118
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.cjs +1243 -462
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +28 -4
- package/dist/index.d.ts +28 -4
- package/dist/index.js +1043 -268
- package/dist/index.js.map +1 -1
- package/dist/styles.css +348 -375
- package/package.json +2 -1
package/dist/index.cjs
CHANGED
|
@@ -36,6 +36,12 @@ __export(index_exports, {
|
|
|
36
36
|
CustomToolbarDivider: () => CustomToolbarDivider,
|
|
37
37
|
DragHandle: () => DragHandle,
|
|
38
38
|
DropIndicator: () => DropIndicator,
|
|
39
|
+
DropdownMenu: () => DropdownMenu,
|
|
40
|
+
DropdownMenuContent: () => DropdownMenuContent,
|
|
41
|
+
DropdownMenuGroup: () => DropdownMenuGroup,
|
|
42
|
+
DropdownMenuItem: () => DropdownMenuItem,
|
|
43
|
+
DropdownMenuSeparator: () => DropdownMenuSeparator,
|
|
44
|
+
DropdownMenuTrigger: () => DropdownMenuTrigger,
|
|
39
45
|
ItemActionToolbar: () => ItemActionToolbar,
|
|
40
46
|
ItemInteractionLayer: () => ItemInteractionLayer,
|
|
41
47
|
LinkEditorPanel: () => LinkEditorPanel,
|
|
@@ -63,7 +69,7 @@ __export(index_exports, {
|
|
|
63
69
|
module.exports = __toCommonJS(index_exports);
|
|
64
70
|
|
|
65
71
|
// src/OhhwellsBridge.tsx
|
|
66
|
-
var
|
|
72
|
+
var import_react11 = __toESM(require("react"), 1);
|
|
67
73
|
var import_client = require("react-dom/client");
|
|
68
74
|
var import_react_dom2 = require("react-dom");
|
|
69
75
|
|
|
@@ -4400,22 +4406,116 @@ var CustomToolbarButton = React4.forwardRef(
|
|
|
4400
4406
|
CustomToolbarButton.displayName = "CustomToolbarButton";
|
|
4401
4407
|
|
|
4402
4408
|
// src/ui/item-action-toolbar.tsx
|
|
4409
|
+
var import_react4 = require("react");
|
|
4403
4410
|
var import_lucide_react2 = require("lucide-react");
|
|
4404
4411
|
|
|
4405
|
-
// src/ui/
|
|
4412
|
+
// src/ui/dropdown-menu.tsx
|
|
4406
4413
|
var import_radix_ui3 = require("radix-ui");
|
|
4407
4414
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
4415
|
+
function DropdownMenu({ ...props }) {
|
|
4416
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
|
|
4417
|
+
}
|
|
4418
|
+
function DropdownMenuTrigger({
|
|
4419
|
+
...props
|
|
4420
|
+
}) {
|
|
4421
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.DropdownMenu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
|
|
4422
|
+
}
|
|
4423
|
+
function DropdownMenuGroup({
|
|
4424
|
+
className,
|
|
4425
|
+
...props
|
|
4426
|
+
}) {
|
|
4427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
4428
|
+
import_radix_ui3.DropdownMenu.Group,
|
|
4429
|
+
{
|
|
4430
|
+
"data-slot": "dropdown-menu-group",
|
|
4431
|
+
className: cn("flex w-full flex-col items-start p-1", className),
|
|
4432
|
+
...props
|
|
4433
|
+
}
|
|
4434
|
+
);
|
|
4435
|
+
}
|
|
4436
|
+
function DropdownMenuContent({
|
|
4437
|
+
className,
|
|
4438
|
+
sideOffset = 6,
|
|
4439
|
+
...props
|
|
4440
|
+
}) {
|
|
4441
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
4442
|
+
import_radix_ui3.DropdownMenu.Content,
|
|
4443
|
+
{
|
|
4444
|
+
"data-slot": "dropdown-menu-content",
|
|
4445
|
+
"data-ohw-more-menu": "",
|
|
4446
|
+
sideOffset,
|
|
4447
|
+
className: cn(
|
|
4448
|
+
"z-[2147483647] flex w-56 min-w-32 flex-col items-center overflow-hidden rounded-[6px] border border-border bg-popover p-0 text-popover-foreground outline-none",
|
|
4449
|
+
"shadow-[0px_4px_6px_0px_rgba(0,0,0,0.1),0px_2px_4px_0px_rgba(0,0,0,0.1)]",
|
|
4450
|
+
"origin-[var(--radix-dropdown-menu-content-transform-origin)]",
|
|
4451
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
4452
|
+
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
4453
|
+
className
|
|
4454
|
+
),
|
|
4455
|
+
...props
|
|
4456
|
+
}
|
|
4457
|
+
) });
|
|
4458
|
+
}
|
|
4459
|
+
function DropdownMenuItem({
|
|
4460
|
+
className,
|
|
4461
|
+
inset,
|
|
4462
|
+
variant = "default",
|
|
4463
|
+
...props
|
|
4464
|
+
}) {
|
|
4465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
4466
|
+
import_radix_ui3.DropdownMenu.Item,
|
|
4467
|
+
{
|
|
4468
|
+
"data-slot": "dropdown-menu-item",
|
|
4469
|
+
"data-inset": inset ? "" : void 0,
|
|
4470
|
+
"data-variant": variant,
|
|
4471
|
+
className: cn(
|
|
4472
|
+
"relative flex w-full min-w-32 cursor-pointer select-none items-center gap-2 rounded-[calc(var(--radius,0.5rem)-4px)] py-1.5 pl-8 pr-2 text-sm leading-5 outline-none",
|
|
4473
|
+
"text-popover-foreground",
|
|
4474
|
+
"focus:bg-muted data-[highlighted]:bg-muted",
|
|
4475
|
+
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
4476
|
+
"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
|
4477
|
+
"[&_svg:not([class*=absolute])]:relative",
|
|
4478
|
+
// Leading icon — Figma absolute left-2 / top-1/2
|
|
4479
|
+
"[&>svg:first-child]:absolute [&>svg:first-child]:left-2 [&>svg:first-child]:top-1/2 [&>svg:first-child]:-translate-y-1/2",
|
|
4480
|
+
"data-[variant=destructive]:text-destructive",
|
|
4481
|
+
"data-[variant=destructive]:focus:bg-bg-destructive-10 data-[variant=destructive]:focus:text-destructive",
|
|
4482
|
+
"data-[variant=destructive]:data-[highlighted]:bg-bg-destructive-10 data-[variant=destructive]:data-[highlighted]:text-destructive",
|
|
4483
|
+
"data-[variant=destructive]:[&_svg]:text-destructive",
|
|
4484
|
+
inset && "pl-8",
|
|
4485
|
+
className
|
|
4486
|
+
),
|
|
4487
|
+
...props
|
|
4488
|
+
}
|
|
4489
|
+
);
|
|
4490
|
+
}
|
|
4491
|
+
function DropdownMenuSeparator({
|
|
4492
|
+
className,
|
|
4493
|
+
...props
|
|
4494
|
+
}) {
|
|
4495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
4496
|
+
import_radix_ui3.DropdownMenu.Separator,
|
|
4497
|
+
{
|
|
4498
|
+
"data-slot": "dropdown-menu-separator",
|
|
4499
|
+
className: cn("h-px w-full bg-border", className),
|
|
4500
|
+
...props
|
|
4501
|
+
}
|
|
4502
|
+
);
|
|
4503
|
+
}
|
|
4504
|
+
|
|
4505
|
+
// src/ui/tooltip.tsx
|
|
4506
|
+
var import_radix_ui4 = require("radix-ui");
|
|
4507
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
4408
4508
|
function TooltipProvider({
|
|
4409
4509
|
delayDuration = 0,
|
|
4410
4510
|
...props
|
|
4411
4511
|
}) {
|
|
4412
|
-
return /* @__PURE__ */ (0,
|
|
4512
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Tooltip.Provider, { "data-slot": "tooltip-provider", delayDuration, ...props });
|
|
4413
4513
|
}
|
|
4414
4514
|
function Tooltip({ ...props }) {
|
|
4415
|
-
return /* @__PURE__ */ (0,
|
|
4515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Tooltip.Root, { "data-slot": "tooltip", ...props });
|
|
4416
4516
|
}
|
|
4417
4517
|
function TooltipTrigger({ ...props }) {
|
|
4418
|
-
return /* @__PURE__ */ (0,
|
|
4518
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
4419
4519
|
}
|
|
4420
4520
|
var arrowClassBySide = {
|
|
4421
4521
|
top: "before:bottom-0 before:left-1/2 before:-translate-x-1/2 before:translate-y-1/2",
|
|
@@ -4432,8 +4532,8 @@ function TooltipContent({
|
|
|
4432
4532
|
...props
|
|
4433
4533
|
}) {
|
|
4434
4534
|
const resolvedSide = side ?? "bottom";
|
|
4435
|
-
return /* @__PURE__ */ (0,
|
|
4436
|
-
|
|
4535
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4536
|
+
import_radix_ui4.Tooltip.Content,
|
|
4437
4537
|
{
|
|
4438
4538
|
"data-slot": "tooltip-content",
|
|
4439
4539
|
side,
|
|
@@ -4455,7 +4555,7 @@ function TooltipContent({
|
|
|
4455
4555
|
}
|
|
4456
4556
|
|
|
4457
4557
|
// src/ui/item-action-toolbar.tsx
|
|
4458
|
-
var
|
|
4558
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
4459
4559
|
function ToolbarActionTooltip({
|
|
4460
4560
|
label,
|
|
4461
4561
|
side = "bottom",
|
|
@@ -4463,25 +4563,31 @@ function ToolbarActionTooltip({
|
|
|
4463
4563
|
buttonProps,
|
|
4464
4564
|
children
|
|
4465
4565
|
}) {
|
|
4466
|
-
const button = /* @__PURE__ */ (0,
|
|
4467
|
-
return /* @__PURE__ */ (0,
|
|
4468
|
-
/* @__PURE__ */ (0,
|
|
4469
|
-
/* @__PURE__ */ (0,
|
|
4566
|
+
const button = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CustomToolbarButton, { type: "button", "aria-label": label, disabled, ...buttonProps, children });
|
|
4567
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
|
|
4568
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex", children: button }) : button }),
|
|
4569
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { side, sideOffset: 9, children: label })
|
|
4470
4570
|
] });
|
|
4471
4571
|
}
|
|
4472
4572
|
function ItemActionToolbar({
|
|
4473
4573
|
onEditLink,
|
|
4474
4574
|
onAddItem,
|
|
4475
|
-
|
|
4575
|
+
onSelectParent,
|
|
4576
|
+
onDuplicate,
|
|
4577
|
+
onDelete,
|
|
4476
4578
|
editLinkDisabled = false,
|
|
4477
4579
|
addItemDisabled = true,
|
|
4478
|
-
moreDisabled =
|
|
4580
|
+
moreDisabled = false,
|
|
4581
|
+
selectParentDisabled = false,
|
|
4582
|
+
duplicateDisabled = false,
|
|
4583
|
+
deleteDisabled = false,
|
|
4479
4584
|
showAddItem = true,
|
|
4480
4585
|
showMore = true,
|
|
4481
4586
|
tooltipSide = "bottom"
|
|
4482
4587
|
}) {
|
|
4483
|
-
|
|
4484
|
-
|
|
4588
|
+
const [moreOpen, setMoreOpen] = (0, import_react4.useState)(false);
|
|
4589
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(CustomToolbar, { children: [
|
|
4590
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4485
4591
|
ToolbarActionTooltip,
|
|
4486
4592
|
{
|
|
4487
4593
|
label: "Edit link",
|
|
@@ -4499,10 +4605,10 @@ function ItemActionToolbar({
|
|
|
4499
4605
|
e.stopPropagation();
|
|
4500
4606
|
}
|
|
4501
4607
|
},
|
|
4502
|
-
children: /* @__PURE__ */ (0,
|
|
4608
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
4503
4609
|
}
|
|
4504
4610
|
),
|
|
4505
|
-
showAddItem ? /* @__PURE__ */ (0,
|
|
4611
|
+
showAddItem ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4506
4612
|
ToolbarActionTooltip,
|
|
4507
4613
|
{
|
|
4508
4614
|
label: "Add item",
|
|
@@ -4516,32 +4622,84 @@ function ItemActionToolbar({
|
|
|
4516
4622
|
onAddItem?.();
|
|
4517
4623
|
}
|
|
4518
4624
|
},
|
|
4519
|
-
children: /* @__PURE__ */ (0,
|
|
4625
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Plus, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
4520
4626
|
}
|
|
4521
4627
|
) : null,
|
|
4522
|
-
showMore ? /* @__PURE__ */ (0,
|
|
4523
|
-
|
|
4524
|
-
|
|
4525
|
-
|
|
4526
|
-
|
|
4527
|
-
|
|
4528
|
-
|
|
4628
|
+
showMore ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenu, { open: moreOpen, onOpenChange: setMoreOpen, children: [
|
|
4629
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { open: moreOpen ? false : void 0, children: [
|
|
4630
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuTrigger, { asChild: true, disabled: moreDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
4631
|
+
CustomToolbarButton,
|
|
4632
|
+
{
|
|
4633
|
+
type: "button",
|
|
4634
|
+
"aria-label": "More",
|
|
4635
|
+
disabled: moreDisabled,
|
|
4636
|
+
onMouseDown: (e) => {
|
|
4637
|
+
e.preventDefault();
|
|
4638
|
+
e.stopPropagation();
|
|
4639
|
+
},
|
|
4640
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.MoreHorizontal, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
4641
|
+
}
|
|
4642
|
+
) }) }),
|
|
4643
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { side: tooltipSide, sideOffset: 9, children: "More" })
|
|
4644
|
+
] }),
|
|
4645
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
4646
|
+
DropdownMenuContent,
|
|
4647
|
+
{
|
|
4648
|
+
align: "end",
|
|
4649
|
+
side: "bottom",
|
|
4650
|
+
onCloseAutoFocus: (e) => e.preventDefault(),
|
|
4529
4651
|
onMouseDown: (e) => {
|
|
4530
|
-
if (moreDisabled) return;
|
|
4531
4652
|
e.preventDefault();
|
|
4532
4653
|
e.stopPropagation();
|
|
4533
|
-
|
|
4534
|
-
|
|
4535
|
-
|
|
4536
|
-
|
|
4537
|
-
|
|
4538
|
-
|
|
4654
|
+
},
|
|
4655
|
+
children: [
|
|
4656
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenuGroup, { children: [
|
|
4657
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
4658
|
+
DropdownMenuItem,
|
|
4659
|
+
{
|
|
4660
|
+
disabled: selectParentDisabled,
|
|
4661
|
+
onSelect: () => onSelectParent?.(),
|
|
4662
|
+
children: [
|
|
4663
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.CornerLeftUp, { size: 12, "aria-hidden": true }),
|
|
4664
|
+
"Select parent"
|
|
4665
|
+
]
|
|
4666
|
+
}
|
|
4667
|
+
),
|
|
4668
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
4669
|
+
DropdownMenuItem,
|
|
4670
|
+
{
|
|
4671
|
+
disabled: duplicateDisabled,
|
|
4672
|
+
onSelect: () => onDuplicate?.(),
|
|
4673
|
+
children: [
|
|
4674
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Copy, { size: 12, "aria-hidden": true }),
|
|
4675
|
+
"Duplicate"
|
|
4676
|
+
]
|
|
4677
|
+
}
|
|
4678
|
+
)
|
|
4679
|
+
] }),
|
|
4680
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuSeparator, {}),
|
|
4681
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
4682
|
+
DropdownMenuItem,
|
|
4683
|
+
{
|
|
4684
|
+
variant: "destructive",
|
|
4685
|
+
disabled: deleteDisabled,
|
|
4686
|
+
onSelect: () => onDelete?.(),
|
|
4687
|
+
children: [
|
|
4688
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Trash2, { size: 15, "aria-hidden": true }),
|
|
4689
|
+
"Delete"
|
|
4690
|
+
]
|
|
4691
|
+
}
|
|
4692
|
+
) })
|
|
4693
|
+
]
|
|
4694
|
+
}
|
|
4695
|
+
)
|
|
4696
|
+
] }) : null
|
|
4539
4697
|
] }) });
|
|
4540
4698
|
}
|
|
4541
4699
|
|
|
4542
4700
|
// src/ui/item-interaction-layer.tsx
|
|
4543
4701
|
var React5 = __toESM(require("react"), 1);
|
|
4544
|
-
var
|
|
4702
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
4545
4703
|
var PRIMARY = "var(--ohw-primary, #0885FE)";
|
|
4546
4704
|
var FOCUS_RING = `0 0 0 4px color-mix(in srgb, ${PRIMARY} 12%, transparent)`;
|
|
4547
4705
|
var DRAG_SHADOW = "0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)";
|
|
@@ -4623,7 +4781,7 @@ function ClampedToolbarSlot({
|
|
|
4623
4781
|
window.removeEventListener("resize", clamp);
|
|
4624
4782
|
};
|
|
4625
4783
|
}, [placement, children]);
|
|
4626
|
-
return /* @__PURE__ */ (0,
|
|
4784
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4627
4785
|
"div",
|
|
4628
4786
|
{
|
|
4629
4787
|
ref: slotRef,
|
|
@@ -4663,7 +4821,7 @@ function ItemInteractionLayer({
|
|
|
4663
4821
|
const showToolbar = isActive && toolbar;
|
|
4664
4822
|
const showDragHandle = (isActive || isDragging) && showHandle;
|
|
4665
4823
|
const itemDragEnabled = itemDragSurface && isActive && showHandle && !isDragging && !dragDisabled;
|
|
4666
|
-
return /* @__PURE__ */ (0,
|
|
4824
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
4667
4825
|
"div",
|
|
4668
4826
|
{
|
|
4669
4827
|
ref: elRef,
|
|
@@ -4679,7 +4837,7 @@ function ItemInteractionLayer({
|
|
|
4679
4837
|
zIndex: getChromeZIndex(state)
|
|
4680
4838
|
},
|
|
4681
4839
|
children: [
|
|
4682
|
-
/* @__PURE__ */ (0,
|
|
4840
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4683
4841
|
"div",
|
|
4684
4842
|
{
|
|
4685
4843
|
"aria-hidden": true,
|
|
@@ -4687,7 +4845,7 @@ function ItemInteractionLayer({
|
|
|
4687
4845
|
style: getChromeStyle(state)
|
|
4688
4846
|
}
|
|
4689
4847
|
),
|
|
4690
|
-
itemDragEnabled && /* @__PURE__ */ (0,
|
|
4848
|
+
itemDragEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4691
4849
|
"div",
|
|
4692
4850
|
{
|
|
4693
4851
|
"data-ohw-item-drag-surface": "",
|
|
@@ -4703,14 +4861,14 @@ function ItemInteractionLayer({
|
|
|
4703
4861
|
}
|
|
4704
4862
|
}
|
|
4705
4863
|
),
|
|
4706
|
-
showDragHandle && /* @__PURE__ */ (0,
|
|
4864
|
+
showDragHandle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4707
4865
|
"div",
|
|
4708
4866
|
{
|
|
4709
4867
|
"data-ohw-drag-handle-container": "",
|
|
4710
4868
|
className: "pointer-events-auto absolute left-0 top-1/2 z-10 -translate-x-[calc(100%+7px)] -translate-y-1/2",
|
|
4711
4869
|
style: isDragging ? { opacity: 0 } : void 0,
|
|
4712
4870
|
"aria-hidden": isDragging || void 0,
|
|
4713
|
-
children: /* @__PURE__ */ (0,
|
|
4871
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
4714
4872
|
DragHandle,
|
|
4715
4873
|
{
|
|
4716
4874
|
draggable: !dragDisabled,
|
|
@@ -4740,8 +4898,8 @@ function ItemInteractionLayer({
|
|
|
4740
4898
|
)
|
|
4741
4899
|
}
|
|
4742
4900
|
),
|
|
4743
|
-
showToolbar && state === "active-top" && /* @__PURE__ */ (0,
|
|
4744
|
-
showToolbar && state === "active-bottom" && /* @__PURE__ */ (0,
|
|
4901
|
+
showToolbar && state === "active-top" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ClampedToolbarSlot, { placement: "top", children: toolbar }),
|
|
4902
|
+
showToolbar && state === "active-bottom" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ClampedToolbarSlot, { placement: "bottom", children: toolbar })
|
|
4745
4903
|
]
|
|
4746
4904
|
}
|
|
4747
4905
|
);
|
|
@@ -4753,8 +4911,8 @@ var import_lucide_react3 = require("lucide-react");
|
|
|
4753
4911
|
|
|
4754
4912
|
// src/ui/button.tsx
|
|
4755
4913
|
var React6 = __toESM(require("react"), 1);
|
|
4756
|
-
var
|
|
4757
|
-
var
|
|
4914
|
+
var import_radix_ui5 = require("radix-ui");
|
|
4915
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
4758
4916
|
var buttonVariants = cva(
|
|
4759
4917
|
"inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 min-w-[80px] px-3 py-2",
|
|
4760
4918
|
{
|
|
@@ -4777,8 +4935,8 @@ var buttonVariants = cva(
|
|
|
4777
4935
|
);
|
|
4778
4936
|
var Button = React6.forwardRef(
|
|
4779
4937
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
4780
|
-
const Comp = asChild ?
|
|
4781
|
-
return /* @__PURE__ */ (0,
|
|
4938
|
+
const Comp = asChild ? import_radix_ui5.Slot.Root : "button";
|
|
4939
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
4782
4940
|
Comp,
|
|
4783
4941
|
{
|
|
4784
4942
|
ref,
|
|
@@ -4792,7 +4950,7 @@ var Button = React6.forwardRef(
|
|
|
4792
4950
|
Button.displayName = "Button";
|
|
4793
4951
|
|
|
4794
4952
|
// src/ui/MediaOverlay.tsx
|
|
4795
|
-
var
|
|
4953
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
4796
4954
|
var MEDIA_UPLOAD_FADE_MS = 300;
|
|
4797
4955
|
var VIDEO_SETTINGS_BAR_INSET = 8;
|
|
4798
4956
|
var OVERLAY_BUTTON_STYLE = {
|
|
@@ -4850,7 +5008,7 @@ function MediaOverlay({
|
|
|
4850
5008
|
return () => anim.cancel();
|
|
4851
5009
|
}, [isUploading, fadingOut, onFadeOutComplete, hover.key]);
|
|
4852
5010
|
if (isUploading) {
|
|
4853
|
-
return /* @__PURE__ */ (0,
|
|
5011
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4854
5012
|
"div",
|
|
4855
5013
|
{
|
|
4856
5014
|
ref: skeletonRef,
|
|
@@ -4859,11 +5017,11 @@ function MediaOverlay({
|
|
|
4859
5017
|
"data-ohw-media-skeleton": "",
|
|
4860
5018
|
"aria-hidden": true,
|
|
4861
5019
|
style: { ...box, pointerEvents: "none" },
|
|
4862
|
-
children: /* @__PURE__ */ (0,
|
|
5020
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("style", { children: SKELETON_CSS })
|
|
4863
5021
|
}
|
|
4864
5022
|
);
|
|
4865
5023
|
}
|
|
4866
|
-
const settingsBar = isVideo && !hover.isDragOver ? /* @__PURE__ */ (0,
|
|
5024
|
+
const settingsBar = isVideo && !hover.isDragOver ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
4867
5025
|
"div",
|
|
4868
5026
|
{
|
|
4869
5027
|
"data-ohw-bridge": "",
|
|
@@ -4879,7 +5037,7 @@ function MediaOverlay({
|
|
|
4879
5037
|
},
|
|
4880
5038
|
onClick: (e) => e.stopPropagation(),
|
|
4881
5039
|
children: [
|
|
4882
|
-
/* @__PURE__ */ (0,
|
|
5040
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4883
5041
|
Button,
|
|
4884
5042
|
{
|
|
4885
5043
|
"data-ohw-media-overlay": "",
|
|
@@ -4894,10 +5052,10 @@ function MediaOverlay({
|
|
|
4894
5052
|
e.stopPropagation();
|
|
4895
5053
|
onVideoSettingsChange?.(hover.key, { autoplay: !autoplay });
|
|
4896
5054
|
},
|
|
4897
|
-
children: autoplay ? /* @__PURE__ */ (0,
|
|
5055
|
+
children: autoplay ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Pause, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Play, { size: 14 })
|
|
4898
5056
|
}
|
|
4899
5057
|
),
|
|
4900
|
-
/* @__PURE__ */ (0,
|
|
5058
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4901
5059
|
Button,
|
|
4902
5060
|
{
|
|
4903
5061
|
"data-ohw-media-overlay": "",
|
|
@@ -4912,15 +5070,15 @@ function MediaOverlay({
|
|
|
4912
5070
|
e.stopPropagation();
|
|
4913
5071
|
onVideoSettingsChange?.(hover.key, { muted: !muted });
|
|
4914
5072
|
},
|
|
4915
|
-
children: muted ? /* @__PURE__ */ (0,
|
|
5073
|
+
children: muted ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.VolumeX, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Volume2, { size: 14 })
|
|
4916
5074
|
}
|
|
4917
5075
|
)
|
|
4918
5076
|
]
|
|
4919
5077
|
}
|
|
4920
5078
|
) : null;
|
|
4921
|
-
return /* @__PURE__ */ (0,
|
|
5079
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
4922
5080
|
settingsBar,
|
|
4923
|
-
/* @__PURE__ */ (0,
|
|
5081
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
4924
5082
|
"div",
|
|
4925
5083
|
{
|
|
4926
5084
|
"data-ohw-bridge": "",
|
|
@@ -4937,21 +5095,25 @@ function MediaOverlay({
|
|
|
4937
5095
|
background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
|
|
4938
5096
|
},
|
|
4939
5097
|
onClick: () => onReplace(hover.key),
|
|
4940
|
-
children: /* @__PURE__ */ (0,
|
|
5098
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
4941
5099
|
Button,
|
|
4942
5100
|
{
|
|
4943
5101
|
"data-ohw-media-overlay": "",
|
|
4944
5102
|
variant: "outline",
|
|
4945
5103
|
size: "sm",
|
|
4946
5104
|
className: "gap-1.5 cursor-pointer hover:bg-background",
|
|
4947
|
-
style:
|
|
5105
|
+
style: {
|
|
5106
|
+
...OVERLAY_BUTTON_STYLE,
|
|
5107
|
+
// Don't let Replace steal clicks when text (e.g. nav) sits on top of this media.
|
|
5108
|
+
pointerEvents: hover.hasTextOverlap ? "none" : "auto"
|
|
5109
|
+
},
|
|
4948
5110
|
onMouseDown: (e) => e.preventDefault(),
|
|
4949
5111
|
onClick: (e) => {
|
|
4950
5112
|
e.stopPropagation();
|
|
4951
5113
|
onReplace(hover.key);
|
|
4952
5114
|
},
|
|
4953
5115
|
children: [
|
|
4954
|
-
isVideo ? /* @__PURE__ */ (0,
|
|
5116
|
+
isVideo ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.ImageIcon, { size: 14 }),
|
|
4955
5117
|
isVideo ? "Replace video" : "Replace image"
|
|
4956
5118
|
]
|
|
4957
5119
|
}
|
|
@@ -4963,7 +5125,7 @@ function MediaOverlay({
|
|
|
4963
5125
|
|
|
4964
5126
|
// src/ui/CarouselOverlay.tsx
|
|
4965
5127
|
var import_lucide_react4 = require("lucide-react");
|
|
4966
|
-
var
|
|
5128
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
4967
5129
|
var OVERLAY_BUTTON_STYLE2 = {
|
|
4968
5130
|
pointerEvents: "auto",
|
|
4969
5131
|
fontFamily: "Inter, sans-serif",
|
|
@@ -4975,7 +5137,7 @@ function CarouselOverlay({
|
|
|
4975
5137
|
onEdit
|
|
4976
5138
|
}) {
|
|
4977
5139
|
const { rect } = hover;
|
|
4978
|
-
return /* @__PURE__ */ (0,
|
|
5140
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4979
5141
|
"div",
|
|
4980
5142
|
{
|
|
4981
5143
|
"data-ohw-bridge": "",
|
|
@@ -4993,7 +5155,7 @@ function CarouselOverlay({
|
|
|
4993
5155
|
background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
|
|
4994
5156
|
},
|
|
4995
5157
|
onClick: () => onEdit(hover.key),
|
|
4996
|
-
children: /* @__PURE__ */ (0,
|
|
5158
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
4997
5159
|
Button,
|
|
4998
5160
|
{
|
|
4999
5161
|
"data-ohw-carousel-overlay": "",
|
|
@@ -5007,7 +5169,7 @@ function CarouselOverlay({
|
|
|
5007
5169
|
onEdit(hover.key);
|
|
5008
5170
|
},
|
|
5009
5171
|
children: [
|
|
5010
|
-
/* @__PURE__ */ (0,
|
|
5172
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.GalleryHorizontal, { size: 14 }),
|
|
5011
5173
|
"Edit gallery"
|
|
5012
5174
|
]
|
|
5013
5175
|
}
|
|
@@ -5296,29 +5458,29 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
5296
5458
|
}
|
|
5297
5459
|
|
|
5298
5460
|
// src/ui/link-modal/LinkPopover.tsx
|
|
5299
|
-
var
|
|
5461
|
+
var import_react8 = require("react");
|
|
5300
5462
|
|
|
5301
5463
|
// src/ui/dialog.tsx
|
|
5302
5464
|
var React8 = __toESM(require("react"), 1);
|
|
5303
|
-
var
|
|
5465
|
+
var import_radix_ui6 = require("radix-ui");
|
|
5304
5466
|
var import_lucide_react5 = require("lucide-react");
|
|
5305
|
-
var
|
|
5467
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
5306
5468
|
function Dialog2({
|
|
5307
5469
|
...props
|
|
5308
5470
|
}) {
|
|
5309
|
-
return /* @__PURE__ */ (0,
|
|
5471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
5310
5472
|
}
|
|
5311
5473
|
function DialogPortal({
|
|
5312
5474
|
...props
|
|
5313
5475
|
}) {
|
|
5314
|
-
return /* @__PURE__ */ (0,
|
|
5476
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
|
|
5315
5477
|
}
|
|
5316
5478
|
function DialogOverlay({
|
|
5317
5479
|
className,
|
|
5318
5480
|
...props
|
|
5319
5481
|
}) {
|
|
5320
|
-
return /* @__PURE__ */ (0,
|
|
5321
|
-
|
|
5482
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5483
|
+
import_radix_ui6.Dialog.Overlay,
|
|
5322
5484
|
{
|
|
5323
5485
|
"data-slot": "dialog-overlay",
|
|
5324
5486
|
"data-ohw-link-modal-root": "",
|
|
@@ -5330,10 +5492,10 @@ function DialogOverlay({
|
|
|
5330
5492
|
var DialogContent = React8.forwardRef(
|
|
5331
5493
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
5332
5494
|
const positionMode = container ? "absolute" : "fixed";
|
|
5333
|
-
return /* @__PURE__ */ (0,
|
|
5334
|
-
/* @__PURE__ */ (0,
|
|
5335
|
-
/* @__PURE__ */ (0,
|
|
5336
|
-
|
|
5495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DialogPortal, { container: container ?? void 0, children: [
|
|
5496
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
5497
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
5498
|
+
import_radix_ui6.Dialog.Content,
|
|
5337
5499
|
{
|
|
5338
5500
|
ref,
|
|
5339
5501
|
"data-slot": "dialog-content",
|
|
@@ -5348,13 +5510,13 @@ var DialogContent = React8.forwardRef(
|
|
|
5348
5510
|
...props,
|
|
5349
5511
|
children: [
|
|
5350
5512
|
children,
|
|
5351
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
5352
|
-
|
|
5513
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5514
|
+
import_radix_ui6.Dialog.Close,
|
|
5353
5515
|
{
|
|
5354
5516
|
type: "button",
|
|
5355
5517
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
5356
5518
|
"aria-label": "Close",
|
|
5357
|
-
children: /* @__PURE__ */ (0,
|
|
5519
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.X, { size: 16, "aria-hidden": true })
|
|
5358
5520
|
}
|
|
5359
5521
|
) : null
|
|
5360
5522
|
]
|
|
@@ -5363,18 +5525,18 @@ var DialogContent = React8.forwardRef(
|
|
|
5363
5525
|
] });
|
|
5364
5526
|
}
|
|
5365
5527
|
);
|
|
5366
|
-
DialogContent.displayName =
|
|
5528
|
+
DialogContent.displayName = import_radix_ui6.Dialog.Content.displayName;
|
|
5367
5529
|
function DialogHeader({
|
|
5368
5530
|
className,
|
|
5369
5531
|
...props
|
|
5370
5532
|
}) {
|
|
5371
|
-
return /* @__PURE__ */ (0,
|
|
5533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
5372
5534
|
}
|
|
5373
5535
|
function DialogFooter({
|
|
5374
5536
|
className,
|
|
5375
5537
|
...props
|
|
5376
5538
|
}) {
|
|
5377
|
-
return /* @__PURE__ */ (0,
|
|
5539
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5378
5540
|
"div",
|
|
5379
5541
|
{
|
|
5380
5542
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -5382,8 +5544,8 @@ function DialogFooter({
|
|
|
5382
5544
|
}
|
|
5383
5545
|
);
|
|
5384
5546
|
}
|
|
5385
|
-
var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
5386
|
-
|
|
5547
|
+
var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5548
|
+
import_radix_ui6.Dialog.Title,
|
|
5387
5549
|
{
|
|
5388
5550
|
ref,
|
|
5389
5551
|
className: cn(
|
|
@@ -5393,36 +5555,36 @@ var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
5393
5555
|
...props
|
|
5394
5556
|
}
|
|
5395
5557
|
));
|
|
5396
|
-
DialogTitle.displayName =
|
|
5397
|
-
var DialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
5398
|
-
|
|
5558
|
+
DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
|
|
5559
|
+
var DialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
5560
|
+
import_radix_ui6.Dialog.Description,
|
|
5399
5561
|
{
|
|
5400
5562
|
ref,
|
|
5401
5563
|
className: cn("text-sm text-muted-foreground", className),
|
|
5402
5564
|
...props
|
|
5403
5565
|
}
|
|
5404
5566
|
));
|
|
5405
|
-
DialogDescription.displayName =
|
|
5406
|
-
var DialogClose =
|
|
5567
|
+
DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
|
|
5568
|
+
var DialogClose = import_radix_ui6.Dialog.Close;
|
|
5407
5569
|
|
|
5408
5570
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
5409
5571
|
var import_lucide_react9 = require("lucide-react");
|
|
5410
5572
|
|
|
5411
5573
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
5412
5574
|
var import_lucide_react6 = require("lucide-react");
|
|
5413
|
-
var
|
|
5575
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
5414
5576
|
function DestinationBreadcrumb({
|
|
5415
5577
|
pageTitle,
|
|
5416
5578
|
sectionLabel
|
|
5417
5579
|
}) {
|
|
5418
|
-
return /* @__PURE__ */ (0,
|
|
5419
|
-
/* @__PURE__ */ (0,
|
|
5420
|
-
/* @__PURE__ */ (0,
|
|
5421
|
-
/* @__PURE__ */ (0,
|
|
5422
|
-
/* @__PURE__ */ (0,
|
|
5423
|
-
/* @__PURE__ */ (0,
|
|
5580
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
5581
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
5582
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
5583
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
5584
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
5585
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
5424
5586
|
] }),
|
|
5425
|
-
/* @__PURE__ */ (0,
|
|
5587
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
5426
5588
|
import_lucide_react6.ArrowRight,
|
|
5427
5589
|
{
|
|
5428
5590
|
size: 16,
|
|
@@ -5430,8 +5592,8 @@ function DestinationBreadcrumb({
|
|
|
5430
5592
|
"aria-hidden": true
|
|
5431
5593
|
}
|
|
5432
5594
|
),
|
|
5433
|
-
/* @__PURE__ */ (0,
|
|
5434
|
-
/* @__PURE__ */ (0,
|
|
5595
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
5596
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
5435
5597
|
import_lucide_react6.GalleryVertical,
|
|
5436
5598
|
{
|
|
5437
5599
|
size: 16,
|
|
@@ -5439,7 +5601,7 @@ function DestinationBreadcrumb({
|
|
|
5439
5601
|
"aria-hidden": true
|
|
5440
5602
|
}
|
|
5441
5603
|
),
|
|
5442
|
-
/* @__PURE__ */ (0,
|
|
5604
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
5443
5605
|
] })
|
|
5444
5606
|
] })
|
|
5445
5607
|
] });
|
|
@@ -5447,22 +5609,22 @@ function DestinationBreadcrumb({
|
|
|
5447
5609
|
|
|
5448
5610
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
5449
5611
|
var import_lucide_react7 = require("lucide-react");
|
|
5450
|
-
var
|
|
5612
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
5451
5613
|
function SectionTreeItem({
|
|
5452
5614
|
section,
|
|
5453
5615
|
onSelect,
|
|
5454
5616
|
selected
|
|
5455
5617
|
}) {
|
|
5456
5618
|
const interactive = Boolean(onSelect);
|
|
5457
|
-
return /* @__PURE__ */ (0,
|
|
5458
|
-
/* @__PURE__ */ (0,
|
|
5619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
5620
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5459
5621
|
"div",
|
|
5460
5622
|
{
|
|
5461
5623
|
className: "mr-[-1px] h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
5462
5624
|
"aria-hidden": true
|
|
5463
5625
|
}
|
|
5464
5626
|
),
|
|
5465
|
-
/* @__PURE__ */ (0,
|
|
5627
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
5466
5628
|
"div",
|
|
5467
5629
|
{
|
|
5468
5630
|
role: interactive ? "button" : void 0,
|
|
@@ -5480,7 +5642,7 @@ function SectionTreeItem({
|
|
|
5480
5642
|
interactive && selected && "border-primary"
|
|
5481
5643
|
),
|
|
5482
5644
|
children: [
|
|
5483
|
-
/* @__PURE__ */ (0,
|
|
5645
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
5484
5646
|
import_lucide_react7.GalleryVertical,
|
|
5485
5647
|
{
|
|
5486
5648
|
size: 16,
|
|
@@ -5488,7 +5650,7 @@ function SectionTreeItem({
|
|
|
5488
5650
|
"aria-hidden": true
|
|
5489
5651
|
}
|
|
5490
5652
|
),
|
|
5491
|
-
/* @__PURE__ */ (0,
|
|
5653
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
5492
5654
|
]
|
|
5493
5655
|
}
|
|
5494
5656
|
)
|
|
@@ -5496,14 +5658,14 @@ function SectionTreeItem({
|
|
|
5496
5658
|
}
|
|
5497
5659
|
|
|
5498
5660
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
5499
|
-
var
|
|
5661
|
+
var import_react5 = require("react");
|
|
5500
5662
|
|
|
5501
5663
|
// src/ui/input.tsx
|
|
5502
5664
|
var React9 = __toESM(require("react"), 1);
|
|
5503
|
-
var
|
|
5665
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
5504
5666
|
var Input = React9.forwardRef(
|
|
5505
5667
|
({ className, type, ...props }, ref) => {
|
|
5506
|
-
return /* @__PURE__ */ (0,
|
|
5668
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
5507
5669
|
"input",
|
|
5508
5670
|
{
|
|
5509
5671
|
type,
|
|
@@ -5521,11 +5683,11 @@ var Input = React9.forwardRef(
|
|
|
5521
5683
|
Input.displayName = "Input";
|
|
5522
5684
|
|
|
5523
5685
|
// src/ui/label.tsx
|
|
5524
|
-
var
|
|
5525
|
-
var
|
|
5686
|
+
var import_radix_ui7 = require("radix-ui");
|
|
5687
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
5526
5688
|
function Label({ className, ...props }) {
|
|
5527
|
-
return /* @__PURE__ */ (0,
|
|
5528
|
-
|
|
5689
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
5690
|
+
import_radix_ui7.Label.Root,
|
|
5529
5691
|
{
|
|
5530
5692
|
"data-slot": "label",
|
|
5531
5693
|
className: cn("text-sm font-medium leading-5 text-foreground", className),
|
|
@@ -5536,11 +5698,11 @@ function Label({ className, ...props }) {
|
|
|
5536
5698
|
|
|
5537
5699
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
5538
5700
|
var import_lucide_react8 = require("lucide-react");
|
|
5539
|
-
var
|
|
5701
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
5540
5702
|
function FieldChevron({
|
|
5541
5703
|
onClick
|
|
5542
5704
|
}) {
|
|
5543
|
-
return /* @__PURE__ */ (0,
|
|
5705
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5544
5706
|
"button",
|
|
5545
5707
|
{
|
|
5546
5708
|
type: "button",
|
|
@@ -5548,7 +5710,7 @@ function FieldChevron({
|
|
|
5548
5710
|
onClick,
|
|
5549
5711
|
"aria-label": "Open page list",
|
|
5550
5712
|
tabIndex: -1,
|
|
5551
|
-
children: /* @__PURE__ */ (0,
|
|
5713
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react8.ChevronDown, { size: 16 })
|
|
5552
5714
|
}
|
|
5553
5715
|
);
|
|
5554
5716
|
}
|
|
@@ -5564,11 +5726,11 @@ function UrlOrPageInput({
|
|
|
5564
5726
|
readOnly = false,
|
|
5565
5727
|
urlError
|
|
5566
5728
|
}) {
|
|
5567
|
-
const inputId = (0,
|
|
5568
|
-
const inputRef = (0,
|
|
5569
|
-
const rootRef = (0,
|
|
5570
|
-
const [isFocused, setIsFocused] = (0,
|
|
5571
|
-
(0,
|
|
5729
|
+
const inputId = (0, import_react5.useId)();
|
|
5730
|
+
const inputRef = (0, import_react5.useRef)(null);
|
|
5731
|
+
const rootRef = (0, import_react5.useRef)(null);
|
|
5732
|
+
const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
|
|
5733
|
+
(0, import_react5.useEffect)(() => {
|
|
5572
5734
|
if (!dropdownOpen) return;
|
|
5573
5735
|
const isOutside = (e) => {
|
|
5574
5736
|
const root = rootRef.current;
|
|
@@ -5609,11 +5771,11 @@ function UrlOrPageInput({
|
|
|
5609
5771
|
"data-ohw-link-field flex h-[36px] w-full items-center overflow-hidden rounded-md border bg-background pl-3 pr-3 py-2 outline-none transition-[border-color,box-shadow]",
|
|
5610
5772
|
urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
|
|
5611
5773
|
);
|
|
5612
|
-
return /* @__PURE__ */ (0,
|
|
5613
|
-
/* @__PURE__ */ (0,
|
|
5614
|
-
/* @__PURE__ */ (0,
|
|
5615
|
-
/* @__PURE__ */ (0,
|
|
5616
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
5774
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
5775
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
5776
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
|
|
5777
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
5778
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5617
5779
|
import_lucide_react8.File,
|
|
5618
5780
|
{
|
|
5619
5781
|
size: 16,
|
|
@@ -5621,7 +5783,7 @@ function UrlOrPageInput({
|
|
|
5621
5783
|
"aria-hidden": true
|
|
5622
5784
|
}
|
|
5623
5785
|
) }) : null,
|
|
5624
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
5786
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5625
5787
|
Input,
|
|
5626
5788
|
{
|
|
5627
5789
|
ref: inputRef,
|
|
@@ -5647,7 +5809,7 @@ function UrlOrPageInput({
|
|
|
5647
5809
|
)
|
|
5648
5810
|
}
|
|
5649
5811
|
),
|
|
5650
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
5812
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5651
5813
|
"button",
|
|
5652
5814
|
{
|
|
5653
5815
|
type: "button",
|
|
@@ -5655,26 +5817,26 @@ function UrlOrPageInput({
|
|
|
5655
5817
|
onMouseDown: clearSelection,
|
|
5656
5818
|
"aria-label": "Clear selected page",
|
|
5657
5819
|
tabIndex: -1,
|
|
5658
|
-
children: /* @__PURE__ */ (0,
|
|
5820
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react8.X, { size: 16, "aria-hidden": true })
|
|
5659
5821
|
}
|
|
5660
5822
|
) : null,
|
|
5661
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
5823
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
5662
5824
|
] }),
|
|
5663
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0,
|
|
5825
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
5664
5826
|
"div",
|
|
5665
5827
|
{
|
|
5666
5828
|
"data-ohw-link-page-dropdown": "",
|
|
5667
5829
|
className: "absolute left-0 right-0 top-[calc(100%+4px)] z-50 max-h-48 overflow-auto rounded-lg border border-border bg-popover py-1 shadow-lg",
|
|
5668
5830
|
onMouseDown: (e) => e.preventDefault(),
|
|
5669
|
-
children: filteredPages.map((page) => /* @__PURE__ */ (0,
|
|
5831
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
5670
5832
|
"button",
|
|
5671
5833
|
{
|
|
5672
5834
|
type: "button",
|
|
5673
5835
|
className: "flex h-9 w-full items-center gap-2 border-0 bg-transparent px-3 text-left text-sm leading-5 text-foreground outline-none hover:bg-muted",
|
|
5674
5836
|
onClick: () => onPageSelect(page),
|
|
5675
5837
|
children: [
|
|
5676
|
-
/* @__PURE__ */ (0,
|
|
5677
|
-
/* @__PURE__ */ (0,
|
|
5838
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react8.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
5839
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "truncate", children: page.title })
|
|
5678
5840
|
]
|
|
5679
5841
|
},
|
|
5680
5842
|
page.path
|
|
@@ -5682,34 +5844,34 @@ function UrlOrPageInput({
|
|
|
5682
5844
|
}
|
|
5683
5845
|
) : null
|
|
5684
5846
|
] }),
|
|
5685
|
-
urlError ? /* @__PURE__ */ (0,
|
|
5847
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
5686
5848
|
] });
|
|
5687
5849
|
}
|
|
5688
5850
|
|
|
5689
5851
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
5690
|
-
var
|
|
5852
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
5691
5853
|
function LinkEditorPanel({ state, onClose }) {
|
|
5692
5854
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
5693
|
-
return /* @__PURE__ */ (0,
|
|
5694
|
-
/* @__PURE__ */ (0,
|
|
5855
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
|
|
5856
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5695
5857
|
"button",
|
|
5696
5858
|
{
|
|
5697
5859
|
type: "button",
|
|
5698
5860
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
5699
5861
|
"aria-label": "Close",
|
|
5700
5862
|
onClick: onClose,
|
|
5701
|
-
children: /* @__PURE__ */ (0,
|
|
5863
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.X, { size: 16, "aria-hidden": true })
|
|
5702
5864
|
}
|
|
5703
5865
|
) }),
|
|
5704
|
-
/* @__PURE__ */ (0,
|
|
5705
|
-
/* @__PURE__ */ (0,
|
|
5706
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
5866
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
5867
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
5868
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5707
5869
|
DestinationBreadcrumb,
|
|
5708
5870
|
{
|
|
5709
5871
|
pageTitle: state.selectedPage.title,
|
|
5710
5872
|
sectionLabel: state.selectedSection.label
|
|
5711
5873
|
}
|
|
5712
|
-
) : /* @__PURE__ */ (0,
|
|
5874
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5713
5875
|
UrlOrPageInput,
|
|
5714
5876
|
{
|
|
5715
5877
|
value: state.searchValue,
|
|
@@ -5722,8 +5884,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5722
5884
|
urlError: state.urlError
|
|
5723
5885
|
}
|
|
5724
5886
|
),
|
|
5725
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
5726
|
-
/* @__PURE__ */ (0,
|
|
5887
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
5888
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5727
5889
|
Button,
|
|
5728
5890
|
{
|
|
5729
5891
|
type: "button",
|
|
@@ -5734,15 +5896,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5734
5896
|
children: "Choose a section"
|
|
5735
5897
|
}
|
|
5736
5898
|
),
|
|
5737
|
-
/* @__PURE__ */ (0,
|
|
5738
|
-
/* @__PURE__ */ (0,
|
|
5739
|
-
/* @__PURE__ */ (0,
|
|
5899
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
5900
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
5901
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
5740
5902
|
] })
|
|
5741
5903
|
] }) : null,
|
|
5742
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
5904
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
5743
5905
|
] }),
|
|
5744
|
-
/* @__PURE__ */ (0,
|
|
5745
|
-
/* @__PURE__ */ (0,
|
|
5906
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
5907
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5746
5908
|
Button,
|
|
5747
5909
|
{
|
|
5748
5910
|
type: "button",
|
|
@@ -5757,7 +5919,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5757
5919
|
children: state.secondaryLabel
|
|
5758
5920
|
}
|
|
5759
5921
|
),
|
|
5760
|
-
/* @__PURE__ */ (0,
|
|
5922
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
5761
5923
|
Button,
|
|
5762
5924
|
{
|
|
5763
5925
|
type: "button",
|
|
@@ -5776,11 +5938,11 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
5776
5938
|
}
|
|
5777
5939
|
|
|
5778
5940
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
5779
|
-
var
|
|
5941
|
+
var import_react6 = require("react");
|
|
5780
5942
|
var import_react_dom = require("react-dom");
|
|
5781
5943
|
var import_lucide_react10 = require("lucide-react");
|
|
5782
5944
|
var import_navigation = require("next/navigation");
|
|
5783
|
-
var
|
|
5945
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
5784
5946
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
5785
5947
|
function rectsEqual(a, b) {
|
|
5786
5948
|
if (a.size !== b.size) return false;
|
|
@@ -5813,12 +5975,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
5813
5975
|
return null;
|
|
5814
5976
|
}
|
|
5815
5977
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
5816
|
-
const [rects, setRects] = (0,
|
|
5817
|
-
const sectionIds = (0,
|
|
5978
|
+
const [rects, setRects] = (0, import_react6.useState)(/* @__PURE__ */ new Map());
|
|
5979
|
+
const sectionIds = (0, import_react6.useMemo)(
|
|
5818
5980
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
5819
5981
|
[sectionIdsKey]
|
|
5820
5982
|
);
|
|
5821
|
-
(0,
|
|
5983
|
+
(0, import_react6.useEffect)(() => {
|
|
5822
5984
|
if (!enabled || sectionIds.length === 0) {
|
|
5823
5985
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
5824
5986
|
return;
|
|
@@ -5859,13 +6021,13 @@ function SectionPickerOverlay({
|
|
|
5859
6021
|
}) {
|
|
5860
6022
|
const router = (0, import_navigation.useRouter)();
|
|
5861
6023
|
const pathname = (0, import_navigation.usePathname)();
|
|
5862
|
-
const [selectedId, setSelectedId] = (0,
|
|
5863
|
-
const [hoveredId, setHoveredId] = (0,
|
|
5864
|
-
const pointerRef = (0,
|
|
5865
|
-
const pointerScreenRef = (0,
|
|
5866
|
-
const iframeOffsetTopRef = (0,
|
|
5867
|
-
const sectionIdsRef = (0,
|
|
5868
|
-
const [chromeClip, setChromeClip] = (0,
|
|
6024
|
+
const [selectedId, setSelectedId] = (0, import_react6.useState)(null);
|
|
6025
|
+
const [hoveredId, setHoveredId] = (0, import_react6.useState)(null);
|
|
6026
|
+
const pointerRef = (0, import_react6.useRef)(null);
|
|
6027
|
+
const pointerScreenRef = (0, import_react6.useRef)(null);
|
|
6028
|
+
const iframeOffsetTopRef = (0, import_react6.useRef)(null);
|
|
6029
|
+
const sectionIdsRef = (0, import_react6.useRef)([]);
|
|
6030
|
+
const [chromeClip, setChromeClip] = (0, import_react6.useState)(
|
|
5869
6031
|
() => ({
|
|
5870
6032
|
top: 0,
|
|
5871
6033
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -5873,12 +6035,12 @@ function SectionPickerOverlay({
|
|
|
5873
6035
|
);
|
|
5874
6036
|
const normalizedTarget = normalizePath(pagePath);
|
|
5875
6037
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
5876
|
-
(0,
|
|
6038
|
+
(0, import_react6.useEffect)(() => {
|
|
5877
6039
|
if (isOnTargetPage) return;
|
|
5878
6040
|
const search = readPreservedSearch();
|
|
5879
6041
|
router.push(`${normalizedTarget}${search}`);
|
|
5880
6042
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
5881
|
-
(0,
|
|
6043
|
+
(0, import_react6.useEffect)(() => {
|
|
5882
6044
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
5883
6045
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
5884
6046
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -5890,24 +6052,24 @@ function SectionPickerOverlay({
|
|
|
5890
6052
|
document.documentElement.removeAttribute("data-ohw-section-picking");
|
|
5891
6053
|
};
|
|
5892
6054
|
}, []);
|
|
5893
|
-
const liveSections = (0,
|
|
6055
|
+
const liveSections = (0, import_react6.useMemo)(() => {
|
|
5894
6056
|
if (!isOnTargetPage) return sections;
|
|
5895
6057
|
const live = collectSectionsFromDom();
|
|
5896
6058
|
if (live.length === 0) return sections;
|
|
5897
6059
|
const labels = new Map(sections.map((s) => [s.id, s.label]));
|
|
5898
6060
|
return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
|
|
5899
6061
|
}, [isOnTargetPage, sections, pathname]);
|
|
5900
|
-
const sectionIdsKey = (0,
|
|
6062
|
+
const sectionIdsKey = (0, import_react6.useMemo)(
|
|
5901
6063
|
() => liveSections.map((s) => s.id).join("\0"),
|
|
5902
6064
|
[liveSections]
|
|
5903
6065
|
);
|
|
5904
|
-
const sectionIds = (0,
|
|
6066
|
+
const sectionIds = (0, import_react6.useMemo)(
|
|
5905
6067
|
() => liveSections.map((s) => s.id),
|
|
5906
6068
|
[liveSections]
|
|
5907
6069
|
);
|
|
5908
6070
|
sectionIdsRef.current = sectionIds;
|
|
5909
6071
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
5910
|
-
const applyHoverAt = (0,
|
|
6072
|
+
const applyHoverAt = (0, import_react6.useCallback)(
|
|
5911
6073
|
(x, y, liveRects) => {
|
|
5912
6074
|
const ids = sectionIdsRef.current;
|
|
5913
6075
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -5916,7 +6078,7 @@ function SectionPickerOverlay({
|
|
|
5916
6078
|
},
|
|
5917
6079
|
[]
|
|
5918
6080
|
);
|
|
5919
|
-
(0,
|
|
6081
|
+
(0, import_react6.useEffect)(() => {
|
|
5920
6082
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
|
|
5921
6083
|
const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
|
|
5922
6084
|
const bottom = Math.min(
|
|
@@ -5958,12 +6120,12 @@ function SectionPickerOverlay({
|
|
|
5958
6120
|
window.removeEventListener("resize", onResize);
|
|
5959
6121
|
};
|
|
5960
6122
|
}, [applyHoverAt]);
|
|
5961
|
-
(0,
|
|
6123
|
+
(0, import_react6.useEffect)(() => {
|
|
5962
6124
|
const ptr = pointerRef.current;
|
|
5963
6125
|
if (!ptr) return;
|
|
5964
6126
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
5965
6127
|
}, [rects, applyHoverAt]);
|
|
5966
|
-
(0,
|
|
6128
|
+
(0, import_react6.useEffect)(() => {
|
|
5967
6129
|
const rememberPointer = (clientX, clientY) => {
|
|
5968
6130
|
pointerRef.current = { x: clientX, y: clientY };
|
|
5969
6131
|
const top = iframeOffsetTopRef.current;
|
|
@@ -5987,7 +6149,7 @@ function SectionPickerOverlay({
|
|
|
5987
6149
|
window.removeEventListener("message", onPointerSync);
|
|
5988
6150
|
};
|
|
5989
6151
|
}, [rects, applyHoverAt]);
|
|
5990
|
-
const handleSelect = (0,
|
|
6152
|
+
const handleSelect = (0, import_react6.useCallback)(
|
|
5991
6153
|
(section) => {
|
|
5992
6154
|
if (selectedId) return;
|
|
5993
6155
|
setSelectedId(section.id);
|
|
@@ -5995,7 +6157,7 @@ function SectionPickerOverlay({
|
|
|
5995
6157
|
},
|
|
5996
6158
|
[selectedId, onSelect]
|
|
5997
6159
|
);
|
|
5998
|
-
(0,
|
|
6160
|
+
(0, import_react6.useEffect)(() => {
|
|
5999
6161
|
const onKeyDown = (e) => {
|
|
6000
6162
|
if (e.key === "Escape") {
|
|
6001
6163
|
e.preventDefault();
|
|
@@ -6009,7 +6171,7 @@ function SectionPickerOverlay({
|
|
|
6009
6171
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
6010
6172
|
if (!portalRoot) return null;
|
|
6011
6173
|
return (0, import_react_dom.createPortal)(
|
|
6012
|
-
/* @__PURE__ */ (0,
|
|
6174
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
6013
6175
|
"div",
|
|
6014
6176
|
{
|
|
6015
6177
|
"data-ohw-section-picker": "",
|
|
@@ -6019,12 +6181,12 @@ function SectionPickerOverlay({
|
|
|
6019
6181
|
role: "dialog",
|
|
6020
6182
|
"aria-label": "Choose a section",
|
|
6021
6183
|
children: [
|
|
6022
|
-
/* @__PURE__ */ (0,
|
|
6184
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
6023
6185
|
"div",
|
|
6024
6186
|
{
|
|
6025
6187
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
6026
6188
|
style: { top: chromeClip.top + 20 },
|
|
6027
|
-
children: /* @__PURE__ */ (0,
|
|
6189
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
6028
6190
|
Button,
|
|
6029
6191
|
{
|
|
6030
6192
|
type: "button",
|
|
@@ -6033,14 +6195,14 @@ function SectionPickerOverlay({
|
|
|
6033
6195
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
6034
6196
|
onClick: onBack,
|
|
6035
6197
|
children: [
|
|
6036
|
-
/* @__PURE__ */ (0,
|
|
6198
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
6037
6199
|
"Back"
|
|
6038
6200
|
]
|
|
6039
6201
|
}
|
|
6040
6202
|
)
|
|
6041
6203
|
}
|
|
6042
6204
|
),
|
|
6043
|
-
/* @__PURE__ */ (0,
|
|
6205
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
6044
6206
|
"div",
|
|
6045
6207
|
{
|
|
6046
6208
|
className: "pointer-events-none fixed left-1/2 z-[2] rounded-lg px-4 py-3 text-xs leading-4 tracking-[0.18px] text-white shadow-md",
|
|
@@ -6053,7 +6215,7 @@ function SectionPickerOverlay({
|
|
|
6053
6215
|
children: "Click on section to select"
|
|
6054
6216
|
}
|
|
6055
6217
|
),
|
|
6056
|
-
!isOnTargetPage ? /* @__PURE__ */ (0,
|
|
6218
|
+
!isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
6057
6219
|
"div",
|
|
6058
6220
|
{
|
|
6059
6221
|
className: "pointer-events-none fixed left-1/2 z-[1] -translate-x-1/2 rounded-md px-3 py-2 text-sm text-muted-foreground shadow-sm",
|
|
@@ -6061,14 +6223,14 @@ function SectionPickerOverlay({
|
|
|
6061
6223
|
children: "Loading page preview\u2026"
|
|
6062
6224
|
}
|
|
6063
6225
|
) : null,
|
|
6064
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0,
|
|
6226
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
6065
6227
|
isOnTargetPage ? liveSections.map((section) => {
|
|
6066
6228
|
const rect = rects.get(section.id);
|
|
6067
6229
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
6068
6230
|
const isSelected = selectedId === section.id;
|
|
6069
6231
|
const isHovered = hoveredId === section.id;
|
|
6070
6232
|
const isLit = isSelected || isHovered;
|
|
6071
|
-
return /* @__PURE__ */ (0,
|
|
6233
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
6072
6234
|
"button",
|
|
6073
6235
|
{
|
|
6074
6236
|
type: "button",
|
|
@@ -6083,7 +6245,7 @@ function SectionPickerOverlay({
|
|
|
6083
6245
|
"aria-label": `Select section ${section.label}`,
|
|
6084
6246
|
onClick: () => handleSelect(section),
|
|
6085
6247
|
children: [
|
|
6086
|
-
isLit ? /* @__PURE__ */ (0,
|
|
6248
|
+
isLit ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
6087
6249
|
"span",
|
|
6088
6250
|
{
|
|
6089
6251
|
className: "pointer-events-none absolute",
|
|
@@ -6096,13 +6258,13 @@ function SectionPickerOverlay({
|
|
|
6096
6258
|
"aria-hidden": true
|
|
6097
6259
|
}
|
|
6098
6260
|
) : null,
|
|
6099
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
6261
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
6100
6262
|
"span",
|
|
6101
6263
|
{
|
|
6102
6264
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
6103
6265
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
6104
6266
|
"aria-hidden": true,
|
|
6105
|
-
children: /* @__PURE__ */ (0,
|
|
6267
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react10.Check, { className: "size-5" })
|
|
6106
6268
|
}
|
|
6107
6269
|
) : null
|
|
6108
6270
|
]
|
|
@@ -6118,7 +6280,7 @@ function SectionPickerOverlay({
|
|
|
6118
6280
|
}
|
|
6119
6281
|
|
|
6120
6282
|
// src/ui/link-modal/useLinkModalState.ts
|
|
6121
|
-
var
|
|
6283
|
+
var import_react7 = require("react");
|
|
6122
6284
|
function useLinkModalState({
|
|
6123
6285
|
open,
|
|
6124
6286
|
mode,
|
|
@@ -6130,14 +6292,14 @@ function useLinkModalState({
|
|
|
6130
6292
|
onClose,
|
|
6131
6293
|
onSubmit
|
|
6132
6294
|
}) {
|
|
6133
|
-
const availablePages = (0,
|
|
6134
|
-
const [searchValue, setSearchValue] = (0,
|
|
6135
|
-
const [selectedPage, setSelectedPage] = (0,
|
|
6136
|
-
const [selectedSection, setSelectedSection] = (0,
|
|
6137
|
-
const [step, setStep] = (0,
|
|
6138
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
6139
|
-
const [urlError, setUrlError] = (0,
|
|
6140
|
-
const reset = (0,
|
|
6295
|
+
const availablePages = (0, import_react7.useMemo)(() => pages, [pages]);
|
|
6296
|
+
const [searchValue, setSearchValue] = (0, import_react7.useState)("");
|
|
6297
|
+
const [selectedPage, setSelectedPage] = (0, import_react7.useState)(null);
|
|
6298
|
+
const [selectedSection, setSelectedSection] = (0, import_react7.useState)(null);
|
|
6299
|
+
const [step, setStep] = (0, import_react7.useState)("input");
|
|
6300
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react7.useState)(false);
|
|
6301
|
+
const [urlError, setUrlError] = (0, import_react7.useState)("");
|
|
6302
|
+
const reset = (0, import_react7.useCallback)(() => {
|
|
6141
6303
|
setSearchValue("");
|
|
6142
6304
|
setSelectedPage(null);
|
|
6143
6305
|
setSelectedSection(null);
|
|
@@ -6145,7 +6307,7 @@ function useLinkModalState({
|
|
|
6145
6307
|
setDropdownOpen(false);
|
|
6146
6308
|
setUrlError("");
|
|
6147
6309
|
}, []);
|
|
6148
|
-
(0,
|
|
6310
|
+
(0, import_react7.useEffect)(() => {
|
|
6149
6311
|
if (!open) return;
|
|
6150
6312
|
if (mode === "edit" && initialTarget) {
|
|
6151
6313
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -6161,11 +6323,11 @@ function useLinkModalState({
|
|
|
6161
6323
|
setDropdownOpen(false);
|
|
6162
6324
|
setUrlError("");
|
|
6163
6325
|
}, [open, mode, initialTarget, reset]);
|
|
6164
|
-
const filteredPages = (0,
|
|
6326
|
+
const filteredPages = (0, import_react7.useMemo)(() => {
|
|
6165
6327
|
if (!searchValue.trim()) return availablePages;
|
|
6166
6328
|
return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
|
|
6167
6329
|
}, [availablePages, searchValue]);
|
|
6168
|
-
const activeSections = (0,
|
|
6330
|
+
const activeSections = (0, import_react7.useMemo)(() => {
|
|
6169
6331
|
if (!selectedPage) return [];
|
|
6170
6332
|
return getSectionsForPath(sectionsByPath, selectedPage.path);
|
|
6171
6333
|
}, [selectedPage, sectionsByPath]);
|
|
@@ -6214,7 +6376,7 @@ function useLinkModalState({
|
|
|
6214
6376
|
reset();
|
|
6215
6377
|
onClose();
|
|
6216
6378
|
};
|
|
6217
|
-
const isValid = (0,
|
|
6379
|
+
const isValid = (0, import_react7.useMemo)(() => {
|
|
6218
6380
|
if (urlError) return false;
|
|
6219
6381
|
if (showBreadcrumb) return true;
|
|
6220
6382
|
if (selectedPage) return true;
|
|
@@ -6282,7 +6444,7 @@ function useLinkModalState({
|
|
|
6282
6444
|
}
|
|
6283
6445
|
|
|
6284
6446
|
// src/ui/link-modal/LinkPopover.tsx
|
|
6285
|
-
var
|
|
6447
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
6286
6448
|
function postToParent(data) {
|
|
6287
6449
|
window.parent?.postMessage(data, "*");
|
|
6288
6450
|
}
|
|
@@ -6311,7 +6473,7 @@ function LinkPopover({
|
|
|
6311
6473
|
onSubmit
|
|
6312
6474
|
});
|
|
6313
6475
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
6314
|
-
(0,
|
|
6476
|
+
(0, import_react8.useEffect)(() => {
|
|
6315
6477
|
if (!open) return;
|
|
6316
6478
|
if (sectionPickerActive) {
|
|
6317
6479
|
postToParent({ type: "ui:unlock" });
|
|
@@ -6378,15 +6540,15 @@ function LinkPopover({
|
|
|
6378
6540
|
);
|
|
6379
6541
|
};
|
|
6380
6542
|
}, [open, sectionPickerActive]);
|
|
6381
|
-
return /* @__PURE__ */ (0,
|
|
6382
|
-
/* @__PURE__ */ (0,
|
|
6543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
6544
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
6383
6545
|
Dialog2,
|
|
6384
6546
|
{
|
|
6385
6547
|
open: open && !sectionPickerActive,
|
|
6386
6548
|
onOpenChange: (next) => {
|
|
6387
6549
|
if (!next) onClose?.();
|
|
6388
6550
|
},
|
|
6389
|
-
children: /* @__PURE__ */ (0,
|
|
6551
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
6390
6552
|
DialogContent,
|
|
6391
6553
|
{
|
|
6392
6554
|
ref: panelRef,
|
|
@@ -6396,12 +6558,12 @@ function LinkPopover({
|
|
|
6396
6558
|
"data-ohw-bridge": "",
|
|
6397
6559
|
showCloseButton: false,
|
|
6398
6560
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
6399
|
-
children: /* @__PURE__ */ (0,
|
|
6561
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LinkEditorPanel, { state, onClose })
|
|
6400
6562
|
}
|
|
6401
6563
|
)
|
|
6402
6564
|
}
|
|
6403
6565
|
),
|
|
6404
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0,
|
|
6566
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
6405
6567
|
SectionPickerOverlay,
|
|
6406
6568
|
{
|
|
6407
6569
|
pagePath: state.selectedPage.path,
|
|
@@ -6940,9 +7102,57 @@ function insertNavbarItem(href, label, afterAnchor = null) {
|
|
|
6940
7102
|
order
|
|
6941
7103
|
};
|
|
6942
7104
|
}
|
|
7105
|
+
function duplicateNavbarItem(sourceAnchor) {
|
|
7106
|
+
if (!isNavbarLinkItem(sourceAnchor)) return null;
|
|
7107
|
+
const sourceHrefKey = sourceAnchor.getAttribute("data-ohw-href-key");
|
|
7108
|
+
if (!sourceHrefKey || !isNavbarHrefKey(sourceHrefKey)) return null;
|
|
7109
|
+
const href = getLinkHref(sourceAnchor);
|
|
7110
|
+
const labelEl = sourceAnchor.querySelector('[data-ohw-editable="text"]');
|
|
7111
|
+
const label = (labelEl?.textContent ?? "").trim() || "Untitled";
|
|
7112
|
+
const forest = getNavForestFromDom();
|
|
7113
|
+
const sourceNode = forest.find((n) => n.id === sourceHrefKey);
|
|
7114
|
+
const childIds = sourceNode?.children.map((c) => c.id) ?? [];
|
|
7115
|
+
const primary = insertNavbarItem(href, label, sourceAnchor);
|
|
7116
|
+
const childResults = [];
|
|
7117
|
+
let after = primary.anchor;
|
|
7118
|
+
for (const childId of childIds) {
|
|
7119
|
+
const childEl = findCounterpartByHrefKey(childId, document) ?? document.querySelector(`[data-ohw-href-key="${CSS.escape(childId)}"]`);
|
|
7120
|
+
if (!childEl || !isNavbarLinkItem(childEl)) continue;
|
|
7121
|
+
const childHref = getLinkHref(childEl);
|
|
7122
|
+
const childLabelEl = childEl.querySelector('[data-ohw-editable="text"]');
|
|
7123
|
+
const childLabel = (childLabelEl?.textContent ?? "").trim() || "Untitled";
|
|
7124
|
+
const inserted = insertNavbarItem(childHref, childLabel, after);
|
|
7125
|
+
childResults.push(inserted);
|
|
7126
|
+
after = inserted.anchor;
|
|
7127
|
+
}
|
|
7128
|
+
let orderJson;
|
|
7129
|
+
if (childResults.length > 0) {
|
|
7130
|
+
const nextForest = getNavForestFromDom();
|
|
7131
|
+
const withoutNew = nextForest.filter(
|
|
7132
|
+
(n) => n.id !== primary.hrefKey && !childResults.some((c) => c.hrefKey === n.id)
|
|
7133
|
+
);
|
|
7134
|
+
const sourceIdx = withoutNew.findIndex((n) => n.id === sourceHrefKey);
|
|
7135
|
+
const insertAt = sourceIdx >= 0 ? sourceIdx + 1 : withoutNew.length;
|
|
7136
|
+
withoutNew.splice(insertAt, 0, {
|
|
7137
|
+
id: primary.hrefKey,
|
|
7138
|
+
children: childResults.map((c) => ({ id: c.hrefKey, children: [] }))
|
|
7139
|
+
});
|
|
7140
|
+
applyNavForest(withoutNew);
|
|
7141
|
+
orderJson = serializeNavOrder(withoutNew);
|
|
7142
|
+
} else {
|
|
7143
|
+
orderJson = serializeNavOrder(getNavForestFromDom());
|
|
7144
|
+
}
|
|
7145
|
+
return {
|
|
7146
|
+
...primary,
|
|
7147
|
+
order: flattenNavOrder(parseNavOrderJson(orderJson) ?? getNavForestFromDom()),
|
|
7148
|
+
childResults,
|
|
7149
|
+
orderJson
|
|
7150
|
+
};
|
|
7151
|
+
}
|
|
6943
7152
|
|
|
6944
7153
|
// src/lib/footer-items.ts
|
|
6945
7154
|
var FOOTER_ORDER_KEY = "__ohw_footer_order";
|
|
7155
|
+
var MAX_FOOTER_COLUMNS = 18;
|
|
6946
7156
|
var FOOTER_HREF_RE = /^footer-(\d+)-(\d+)-href$/;
|
|
6947
7157
|
function parseFooterHrefKey(key) {
|
|
6948
7158
|
if (!key) return null;
|
|
@@ -7123,7 +7333,191 @@ function parseFooterOrder(content) {
|
|
|
7123
7333
|
return null;
|
|
7124
7334
|
}
|
|
7125
7335
|
}
|
|
7336
|
+
var FOOTER_HEADING_RE = /^footer-(\d+)-heading$/;
|
|
7337
|
+
var FOOTER_LABEL_RE = /^footer-(\d+)-(\d+)-label$/;
|
|
7338
|
+
var DEFAULT_FOOTER_COLUMN_HEADING = "New";
|
|
7339
|
+
var DEFAULT_FOOTER_COLUMN_LINK_LABEL = "New link";
|
|
7340
|
+
var DEFAULT_FOOTER_COLUMN_LINK_HREF = "";
|
|
7341
|
+
function isFooterLinksContainer(el) {
|
|
7342
|
+
return el.hasAttribute("data-ohw-footer-links") || el.classList.contains("rb-footer-links");
|
|
7343
|
+
}
|
|
7344
|
+
function getFooterColumnIndicesInDom() {
|
|
7345
|
+
const indices = /* @__PURE__ */ new Set();
|
|
7346
|
+
for (const col of listFooterColumns()) {
|
|
7347
|
+
const attr = col.getAttribute("data-ohw-footer-col");
|
|
7348
|
+
if (attr != null) {
|
|
7349
|
+
const n = parseInt(attr, 10);
|
|
7350
|
+
if (Number.isFinite(n)) indices.add(n);
|
|
7351
|
+
}
|
|
7352
|
+
for (const link of listFooterLinksInColumn(col)) {
|
|
7353
|
+
const parsed = parseFooterHrefKey(link.getAttribute("data-ohw-href-key"));
|
|
7354
|
+
if (parsed) indices.add(parsed.col);
|
|
7355
|
+
}
|
|
7356
|
+
const heading = col.querySelector('[data-ohw-key^="footer-"][data-ohw-key$="-heading"]');
|
|
7357
|
+
const headingKey = heading?.getAttribute("data-ohw-key");
|
|
7358
|
+
if (headingKey) {
|
|
7359
|
+
const match = headingKey.match(FOOTER_HEADING_RE);
|
|
7360
|
+
if (match) indices.add(parseInt(match[1], 10));
|
|
7361
|
+
}
|
|
7362
|
+
}
|
|
7363
|
+
return [...indices].sort((a, b) => a - b);
|
|
7364
|
+
}
|
|
7365
|
+
function getNextFooterColumnIndex() {
|
|
7366
|
+
const indices = getFooterColumnIndicesInDom();
|
|
7367
|
+
if (indices.length === 0) return 0;
|
|
7368
|
+
return Math.max(...indices) + 1;
|
|
7369
|
+
}
|
|
7370
|
+
function canAddFooterColumn() {
|
|
7371
|
+
return listFooterColumns().length < MAX_FOOTER_COLUMNS;
|
|
7372
|
+
}
|
|
7373
|
+
function buildFooterHeading(colIndex, text) {
|
|
7374
|
+
const heading = document.createElement("p");
|
|
7375
|
+
heading.setAttribute("data-ohw-editable", "text");
|
|
7376
|
+
heading.setAttribute("data-ohw-key", `footer-${colIndex}-heading`);
|
|
7377
|
+
heading.textContent = text;
|
|
7378
|
+
heading.style.cssText = [
|
|
7379
|
+
"color: var(--espresso, #3d312b)",
|
|
7380
|
+
"font-size: 14px",
|
|
7381
|
+
"font-weight: 800",
|
|
7382
|
+
"opacity: 0.82",
|
|
7383
|
+
"margin: 0 0 6px",
|
|
7384
|
+
"padding: 0",
|
|
7385
|
+
"line-height: 1.2"
|
|
7386
|
+
].join(";");
|
|
7387
|
+
return heading;
|
|
7388
|
+
}
|
|
7389
|
+
function buildFooterLink(colIndex, itemIndex, href, label, template) {
|
|
7390
|
+
const anchor = cloneFooterLinkShell(template);
|
|
7391
|
+
anchor.setAttribute("href", href);
|
|
7392
|
+
anchor.setAttribute("data-ohw-href-key", `footer-${colIndex}-${itemIndex}-href`);
|
|
7393
|
+
const span = document.createElement("span");
|
|
7394
|
+
span.setAttribute("data-ohw-editable", "text");
|
|
7395
|
+
span.setAttribute("data-ohw-key", `footer-${colIndex}-${itemIndex}-label`);
|
|
7396
|
+
span.textContent = label;
|
|
7397
|
+
anchor.appendChild(span);
|
|
7398
|
+
return anchor;
|
|
7399
|
+
}
|
|
7400
|
+
function footerColumnExistsInDom(colIndex) {
|
|
7401
|
+
return document.querySelector(`[data-ohw-footer-col="${colIndex}"]`) !== null || document.querySelector(`[data-ohw-href-key^="footer-${colIndex}-"]`) !== null || document.querySelector(`[data-ohw-key="footer-${colIndex}-heading"]`) !== null;
|
|
7402
|
+
}
|
|
7403
|
+
function getFooterLinkTemplate() {
|
|
7404
|
+
for (const col of listFooterColumns()) {
|
|
7405
|
+
const link = listFooterLinksInColumn(col)[0];
|
|
7406
|
+
if (link) return link;
|
|
7407
|
+
}
|
|
7408
|
+
return null;
|
|
7409
|
+
}
|
|
7410
|
+
function getFooterColumnTemplate() {
|
|
7411
|
+
return listFooterColumns()[0] ?? null;
|
|
7412
|
+
}
|
|
7413
|
+
function insertFooterColumnDom(colIndex, heading, items) {
|
|
7414
|
+
const container = getFooterLinksContainer();
|
|
7415
|
+
if (!container) return null;
|
|
7416
|
+
const colTemplate = getFooterColumnTemplate();
|
|
7417
|
+
const linkTemplate = getFooterLinkTemplate();
|
|
7418
|
+
const column = document.createElement("div");
|
|
7419
|
+
if (colTemplate?.className) column.className = colTemplate.className;
|
|
7420
|
+
else column.className = "rb-footer-link-col";
|
|
7421
|
+
column.setAttribute("data-ohw-footer-col", String(colIndex));
|
|
7422
|
+
if (colTemplate) {
|
|
7423
|
+
const gap = getComputedStyle(colTemplate).gap;
|
|
7424
|
+
if (gap && gap !== "normal") column.style.gap = gap;
|
|
7425
|
+
column.style.display = getComputedStyle(colTemplate).display || "flex";
|
|
7426
|
+
column.style.flexDirection = "column";
|
|
7427
|
+
}
|
|
7428
|
+
column.appendChild(buildFooterHeading(colIndex, heading));
|
|
7429
|
+
let firstLink = null;
|
|
7430
|
+
items.forEach((item, itemIndex) => {
|
|
7431
|
+
const link = buildFooterLink(colIndex, itemIndex, item.href, item.label, linkTemplate);
|
|
7432
|
+
column.appendChild(link);
|
|
7433
|
+
if (!firstLink) firstLink = link;
|
|
7434
|
+
});
|
|
7435
|
+
container.appendChild(column);
|
|
7436
|
+
return { column, firstLink };
|
|
7437
|
+
}
|
|
7438
|
+
function insertFooterColumn(heading = DEFAULT_FOOTER_COLUMN_HEADING, linkLabel = DEFAULT_FOOTER_COLUMN_LINK_LABEL, linkHref = DEFAULT_FOOTER_COLUMN_LINK_HREF) {
|
|
7439
|
+
if (!canAddFooterColumn()) {
|
|
7440
|
+
throw new Error(`Footer column limit reached (${MAX_FOOTER_COLUMNS})`);
|
|
7441
|
+
}
|
|
7442
|
+
const colIndex = getNextFooterColumnIndex();
|
|
7443
|
+
const inserted = insertFooterColumnDom(colIndex, heading, [{ href: linkHref, label: linkLabel }]);
|
|
7444
|
+
if (!inserted?.firstLink) throw new Error("Failed to insert footer column");
|
|
7445
|
+
syncFooterColumnIndices(listFooterColumns());
|
|
7446
|
+
return {
|
|
7447
|
+
column: inserted.column,
|
|
7448
|
+
firstLink: inserted.firstLink,
|
|
7449
|
+
colIndex,
|
|
7450
|
+
headingKey: `footer-${colIndex}-heading`,
|
|
7451
|
+
hrefKey: `footer-${colIndex}-0-href`,
|
|
7452
|
+
labelKey: `footer-${colIndex}-0-label`,
|
|
7453
|
+
heading,
|
|
7454
|
+
label: linkLabel,
|
|
7455
|
+
href: linkHref,
|
|
7456
|
+
order: getFooterOrderFromDom()
|
|
7457
|
+
};
|
|
7458
|
+
}
|
|
7459
|
+
function collectFooterColumnIndicesFromContent(content) {
|
|
7460
|
+
const indices = /* @__PURE__ */ new Set();
|
|
7461
|
+
for (const key of Object.keys(content)) {
|
|
7462
|
+
const href = parseFooterHrefKey(key);
|
|
7463
|
+
if (href) indices.add(href.col);
|
|
7464
|
+
const heading = key.match(FOOTER_HEADING_RE);
|
|
7465
|
+
if (heading) indices.add(parseInt(heading[1], 10));
|
|
7466
|
+
const label = key.match(FOOTER_LABEL_RE);
|
|
7467
|
+
if (label) indices.add(parseInt(label[1], 10));
|
|
7468
|
+
}
|
|
7469
|
+
const order = parseFooterOrder(content);
|
|
7470
|
+
if (order) {
|
|
7471
|
+
for (const col of order) {
|
|
7472
|
+
for (const hrefKey of col) {
|
|
7473
|
+
const parsed = parseFooterHrefKey(hrefKey);
|
|
7474
|
+
if (parsed) indices.add(parsed.col);
|
|
7475
|
+
}
|
|
7476
|
+
}
|
|
7477
|
+
}
|
|
7478
|
+
return [...indices].sort((a, b) => a - b);
|
|
7479
|
+
}
|
|
7480
|
+
function collectFooterItemsForColumn(content, colIndex) {
|
|
7481
|
+
const itemIndices = /* @__PURE__ */ new Set();
|
|
7482
|
+
for (const key of Object.keys(content)) {
|
|
7483
|
+
const href = parseFooterHrefKey(key);
|
|
7484
|
+
if (href?.col === colIndex) itemIndices.add(href.item);
|
|
7485
|
+
const label = key.match(FOOTER_LABEL_RE);
|
|
7486
|
+
if (label && parseInt(label[1], 10) === colIndex) {
|
|
7487
|
+
itemIndices.add(parseInt(label[2], 10));
|
|
7488
|
+
}
|
|
7489
|
+
}
|
|
7490
|
+
const sorted = [...itemIndices].sort((a, b) => a - b);
|
|
7491
|
+
if (sorted.length === 0) {
|
|
7492
|
+
return [
|
|
7493
|
+
{
|
|
7494
|
+
href: content[`footer-${colIndex}-0-href`] ?? DEFAULT_FOOTER_COLUMN_LINK_HREF,
|
|
7495
|
+
label: content[`footer-${colIndex}-0-label`] ?? DEFAULT_FOOTER_COLUMN_LINK_LABEL
|
|
7496
|
+
}
|
|
7497
|
+
];
|
|
7498
|
+
}
|
|
7499
|
+
return sorted.map((itemIndex) => ({
|
|
7500
|
+
href: content[`footer-${colIndex}-${itemIndex}-href`] ?? DEFAULT_FOOTER_COLUMN_LINK_HREF,
|
|
7501
|
+
label: content[`footer-${colIndex}-${itemIndex}-label`] ?? DEFAULT_FOOTER_COLUMN_LINK_LABEL
|
|
7502
|
+
}));
|
|
7503
|
+
}
|
|
7504
|
+
function reconcileFooterColumnsFromContent(content) {
|
|
7505
|
+
const indices = collectFooterColumnIndicesFromContent(content);
|
|
7506
|
+
for (const colIndex of indices) {
|
|
7507
|
+
if (footerColumnExistsInDom(colIndex)) continue;
|
|
7508
|
+
const heading = content[`footer-${colIndex}-heading`] ?? DEFAULT_FOOTER_COLUMN_HEADING;
|
|
7509
|
+
const items = collectFooterItemsForColumn(content, colIndex);
|
|
7510
|
+
const hasPayload = Boolean(content[`footer-${colIndex}-heading`]) || items.some(
|
|
7511
|
+
(_, i) => content[`footer-${colIndex}-${i}-href`] !== void 0 || content[`footer-${colIndex}-${i}-label`] !== void 0
|
|
7512
|
+
) || (parseFooterOrder(content)?.some(
|
|
7513
|
+
(col) => col.some((k) => parseFooterHrefKey(k)?.col === colIndex)
|
|
7514
|
+
) ?? false);
|
|
7515
|
+
if (!hasPayload) continue;
|
|
7516
|
+
insertFooterColumnDom(colIndex, heading, items);
|
|
7517
|
+
}
|
|
7518
|
+
}
|
|
7126
7519
|
function reconcileFooterOrderFromContent(content) {
|
|
7520
|
+
reconcileFooterColumnsFromContent(content);
|
|
7127
7521
|
const order = parseFooterOrder(content);
|
|
7128
7522
|
if (!order?.length) return;
|
|
7129
7523
|
const current = getFooterOrderFromDom();
|
|
@@ -7133,6 +7527,26 @@ function reconcileFooterOrderFromContent(content) {
|
|
|
7133
7527
|
}
|
|
7134
7528
|
applyFooterOrder(order);
|
|
7135
7529
|
}
|
|
7530
|
+
function resolveFooterLinksContainerSelectionTarget(target, clientX, clientY, isPointOverItem) {
|
|
7531
|
+
const container = getFooterLinksContainer();
|
|
7532
|
+
if (!container) return null;
|
|
7533
|
+
const inContainer = target === container || container.contains(target) && Boolean(target.closest("[data-ohw-footer-links], .rb-footer-links"));
|
|
7534
|
+
if (!inContainer && target !== container) {
|
|
7535
|
+
const r2 = container.getBoundingClientRect();
|
|
7536
|
+
const over = clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
|
|
7537
|
+
if (!over) return null;
|
|
7538
|
+
}
|
|
7539
|
+
if (isPointOverItem(container, clientX, clientY)) return null;
|
|
7540
|
+
const column = target.closest("[data-ohw-footer-col], [data-ohw-footer-column]") ?? null;
|
|
7541
|
+
if (column && container.contains(column)) {
|
|
7542
|
+
if (target === column || column.contains(target)) return null;
|
|
7543
|
+
}
|
|
7544
|
+
if (target === container || container.contains(target) || inContainer) {
|
|
7545
|
+
if (target === container || isFooterLinksContainer(target)) return container;
|
|
7546
|
+
if (!column) return container;
|
|
7547
|
+
}
|
|
7548
|
+
return null;
|
|
7549
|
+
}
|
|
7136
7550
|
function isRowLayoutColumn(links) {
|
|
7137
7551
|
if (links.length < 2) return false;
|
|
7138
7552
|
const firstTop = links[0].getBoundingClientRect().top;
|
|
@@ -7287,6 +7701,108 @@ function hitTestColumnDropSlot(clientX, _clientY) {
|
|
|
7287
7701
|
}
|
|
7288
7702
|
return best?.slot ?? null;
|
|
7289
7703
|
}
|
|
7704
|
+
function getLinkHref2(el) {
|
|
7705
|
+
const key = el.getAttribute("data-ohw-href-key");
|
|
7706
|
+
if (key) {
|
|
7707
|
+
const stored = getStoredLinkHref(key);
|
|
7708
|
+
if (stored !== void 0) return stored;
|
|
7709
|
+
}
|
|
7710
|
+
return el.getAttribute("href") ?? "";
|
|
7711
|
+
}
|
|
7712
|
+
function getNextFooterItemIndex(col) {
|
|
7713
|
+
let max = -1;
|
|
7714
|
+
for (const el of document.querySelectorAll("footer [data-ohw-href-key]")) {
|
|
7715
|
+
const parsed = parseFooterHrefKey(el.getAttribute("data-ohw-href-key"));
|
|
7716
|
+
if (!parsed || parsed.col !== col) continue;
|
|
7717
|
+
if (parsed.item > max) max = parsed.item;
|
|
7718
|
+
}
|
|
7719
|
+
return max + 1;
|
|
7720
|
+
}
|
|
7721
|
+
function cloneFooterLinkShell(template) {
|
|
7722
|
+
const anchor = document.createElement("a");
|
|
7723
|
+
if (template) {
|
|
7724
|
+
anchor.style.cssText = template.style.cssText;
|
|
7725
|
+
if (template.className) anchor.className = template.className;
|
|
7726
|
+
}
|
|
7727
|
+
anchor.style.cursor = "pointer";
|
|
7728
|
+
anchor.style.textDecoration = "none";
|
|
7729
|
+
return anchor;
|
|
7730
|
+
}
|
|
7731
|
+
function insertFooterItem(column, href, label, afterAnchor = null) {
|
|
7732
|
+
const columns = listFooterColumns();
|
|
7733
|
+
const colIndex = columns.indexOf(column);
|
|
7734
|
+
if (colIndex < 0) throw new Error("Footer column not found");
|
|
7735
|
+
const item = getNextFooterItemIndex(colIndex);
|
|
7736
|
+
const hrefKey = `footer-${colIndex}-${item}-href`;
|
|
7737
|
+
const labelKey = `footer-${colIndex}-${item}-label`;
|
|
7738
|
+
const template = listFooterLinksInColumn(column)[0] ?? null;
|
|
7739
|
+
const anchor = cloneFooterLinkShell(template);
|
|
7740
|
+
anchor.href = href;
|
|
7741
|
+
anchor.setAttribute("data-ohw-href-key", hrefKey);
|
|
7742
|
+
const span = document.createElement("span");
|
|
7743
|
+
span.setAttribute("data-ohw-editable", "text");
|
|
7744
|
+
span.setAttribute("data-ohw-key", labelKey);
|
|
7745
|
+
span.textContent = label;
|
|
7746
|
+
anchor.appendChild(span);
|
|
7747
|
+
if (afterAnchor && afterAnchor.parentElement === column) {
|
|
7748
|
+
afterAnchor.insertAdjacentElement("afterend", anchor);
|
|
7749
|
+
} else {
|
|
7750
|
+
column.appendChild(anchor);
|
|
7751
|
+
}
|
|
7752
|
+
const order = getFooterOrderFromDom();
|
|
7753
|
+
applyFooterOrder(order);
|
|
7754
|
+
return {
|
|
7755
|
+
anchor,
|
|
7756
|
+
col: colIndex,
|
|
7757
|
+
item,
|
|
7758
|
+
hrefKey,
|
|
7759
|
+
labelKey,
|
|
7760
|
+
href,
|
|
7761
|
+
label,
|
|
7762
|
+
order
|
|
7763
|
+
};
|
|
7764
|
+
}
|
|
7765
|
+
function duplicateFooterItem(sourceAnchor) {
|
|
7766
|
+
if (!isFooterLinkAnchor(sourceAnchor)) return null;
|
|
7767
|
+
const column = findFooterColumnForLink(sourceAnchor);
|
|
7768
|
+
if (!column) return null;
|
|
7769
|
+
const href = getLinkHref2(sourceAnchor);
|
|
7770
|
+
const labelEl = sourceAnchor.querySelector('[data-ohw-editable="text"]');
|
|
7771
|
+
const label = (labelEl?.textContent ?? "").trim() || "Untitled";
|
|
7772
|
+
return insertFooterItem(column, href || "/", label, sourceAnchor);
|
|
7773
|
+
}
|
|
7774
|
+
|
|
7775
|
+
// src/lib/add-footer-column.ts
|
|
7776
|
+
function buildFooterColumnEditContentPatch(result) {
|
|
7777
|
+
return {
|
|
7778
|
+
[result.headingKey]: result.heading,
|
|
7779
|
+
[result.hrefKey]: result.href,
|
|
7780
|
+
[result.labelKey]: result.label,
|
|
7781
|
+
[FOOTER_ORDER_KEY]: JSON.stringify(result.order)
|
|
7782
|
+
};
|
|
7783
|
+
}
|
|
7784
|
+
function addFooterColumnWithPersist({
|
|
7785
|
+
postToParent: postToParent2
|
|
7786
|
+
}) {
|
|
7787
|
+
if (!canAddFooterColumn()) {
|
|
7788
|
+
postToParent2({
|
|
7789
|
+
type: "ow:toast",
|
|
7790
|
+
title: `Maximum ${MAX_FOOTER_COLUMNS} columns`,
|
|
7791
|
+
toastType: "error"
|
|
7792
|
+
});
|
|
7793
|
+
return null;
|
|
7794
|
+
}
|
|
7795
|
+
const result = insertFooterColumn();
|
|
7796
|
+
const patch = buildFooterColumnEditContentPatch(result);
|
|
7797
|
+
setStoredLinkHref(result.hrefKey, result.href);
|
|
7798
|
+
postToParent2({
|
|
7799
|
+
type: "ow:change",
|
|
7800
|
+
nodes: Object.entries(patch).map(([key, text]) => ({ key, text }))
|
|
7801
|
+
});
|
|
7802
|
+
postToParent2({ type: "ow:toast", title: "Item added", toastType: "success" });
|
|
7803
|
+
enforceLinkHrefs();
|
|
7804
|
+
return result;
|
|
7805
|
+
}
|
|
7290
7806
|
|
|
7291
7807
|
// src/lib/item-drag-interaction.ts
|
|
7292
7808
|
function disableNativeHrefDrag(el) {
|
|
@@ -7485,7 +8001,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey) {
|
|
|
7485
8001
|
}
|
|
7486
8002
|
|
|
7487
8003
|
// src/useNavItemDrag.ts
|
|
7488
|
-
var
|
|
8004
|
+
var import_react9 = require("react");
|
|
7489
8005
|
function useNavItemDrag({
|
|
7490
8006
|
isEditMode,
|
|
7491
8007
|
editContentRef,
|
|
@@ -7510,11 +8026,11 @@ function useNavItemDrag({
|
|
|
7510
8026
|
isDragHandleDisabled: isDragHandleDisabled2,
|
|
7511
8027
|
isNavbarButton: isNavbarButton3
|
|
7512
8028
|
}) {
|
|
7513
|
-
const navDragRef = (0,
|
|
7514
|
-
const [navDropSlots, setNavDropSlots] = (0,
|
|
7515
|
-
const [activeNavDropIndex, setActiveNavDropIndex] = (0,
|
|
7516
|
-
const navPointerDragRef = (0,
|
|
7517
|
-
const clearNavDragVisuals = (0,
|
|
8029
|
+
const navDragRef = (0, import_react9.useRef)(null);
|
|
8030
|
+
const [navDropSlots, setNavDropSlots] = (0, import_react9.useState)([]);
|
|
8031
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react9.useState)(null);
|
|
8032
|
+
const navPointerDragRef = (0, import_react9.useRef)(null);
|
|
8033
|
+
const clearNavDragVisuals = (0, import_react9.useCallback)(() => {
|
|
7518
8034
|
navDragRef.current = null;
|
|
7519
8035
|
setNavDropSlots([]);
|
|
7520
8036
|
setActiveNavDropIndex(null);
|
|
@@ -7523,7 +8039,7 @@ function useNavItemDrag({
|
|
|
7523
8039
|
setIsItemDragging(false);
|
|
7524
8040
|
unlockItemDragInteraction();
|
|
7525
8041
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
7526
|
-
const refreshNavDragVisuals = (0,
|
|
8042
|
+
const refreshNavDragVisuals = (0, import_react9.useCallback)(
|
|
7527
8043
|
(session, activeSlot, clientX, clientY) => {
|
|
7528
8044
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
7529
8045
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -7541,13 +8057,13 @@ function useNavItemDrag({
|
|
|
7541
8057
|
},
|
|
7542
8058
|
[setDraggedItemRect, setSiblingHintRects]
|
|
7543
8059
|
);
|
|
7544
|
-
const refreshNavDragVisualsRef = (0,
|
|
8060
|
+
const refreshNavDragVisualsRef = (0, import_react9.useRef)(refreshNavDragVisuals);
|
|
7545
8061
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
7546
|
-
const commitNavDragRef = (0,
|
|
8062
|
+
const commitNavDragRef = (0, import_react9.useRef)(() => {
|
|
7547
8063
|
});
|
|
7548
|
-
const beginNavDragRef = (0,
|
|
8064
|
+
const beginNavDragRef = (0, import_react9.useRef)(() => {
|
|
7549
8065
|
});
|
|
7550
|
-
const beginNavDrag = (0,
|
|
8066
|
+
const beginNavDrag = (0, import_react9.useCallback)(
|
|
7551
8067
|
(session) => {
|
|
7552
8068
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
7553
8069
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -7574,7 +8090,7 @@ function useNavItemDrag({
|
|
|
7574
8090
|
]
|
|
7575
8091
|
);
|
|
7576
8092
|
beginNavDragRef.current = beginNavDrag;
|
|
7577
|
-
const commitNavDrag = (0,
|
|
8093
|
+
const commitNavDrag = (0, import_react9.useCallback)(
|
|
7578
8094
|
(clientX, clientY) => {
|
|
7579
8095
|
const session = navDragRef.current;
|
|
7580
8096
|
if (!session) {
|
|
@@ -7635,7 +8151,7 @@ function useNavItemDrag({
|
|
|
7635
8151
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
7636
8152
|
);
|
|
7637
8153
|
commitNavDragRef.current = commitNavDrag;
|
|
7638
|
-
const startNavLinkDrag = (0,
|
|
8154
|
+
const startNavLinkDrag = (0, import_react9.useCallback)(
|
|
7639
8155
|
(anchor, clientX, clientY, wasSelected) => {
|
|
7640
8156
|
if (footerDragRef.current) return false;
|
|
7641
8157
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -7653,7 +8169,7 @@ function useNavItemDrag({
|
|
|
7653
8169
|
},
|
|
7654
8170
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isNavbarButton3]
|
|
7655
8171
|
);
|
|
7656
|
-
const onNavDragOver = (0,
|
|
8172
|
+
const onNavDragOver = (0, import_react9.useCallback)(
|
|
7657
8173
|
(e) => {
|
|
7658
8174
|
const session = navDragRef.current;
|
|
7659
8175
|
if (!session) return false;
|
|
@@ -7665,7 +8181,7 @@ function useNavItemDrag({
|
|
|
7665
8181
|
},
|
|
7666
8182
|
[]
|
|
7667
8183
|
);
|
|
7668
|
-
(0,
|
|
8184
|
+
(0, import_react9.useEffect)(() => {
|
|
7669
8185
|
if (!isEditMode) return;
|
|
7670
8186
|
const THRESHOLD = 10;
|
|
7671
8187
|
const resolveWasSelected = (el) => {
|
|
@@ -7790,7 +8306,7 @@ function useNavItemDrag({
|
|
|
7790
8306
|
setLinkPopover,
|
|
7791
8307
|
suppressNextClickRef
|
|
7792
8308
|
]);
|
|
7793
|
-
const armNavPressFromChrome = (0,
|
|
8309
|
+
const armNavPressFromChrome = (0, import_react9.useCallback)(
|
|
7794
8310
|
(selected, clientX, clientY, pointerId) => {
|
|
7795
8311
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
7796
8312
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -7820,8 +8336,59 @@ function useNavItemDrag({
|
|
|
7820
8336
|
};
|
|
7821
8337
|
}
|
|
7822
8338
|
|
|
8339
|
+
// src/ui/footer-container-chrome.tsx
|
|
8340
|
+
var import_lucide_react11 = require("lucide-react");
|
|
8341
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
8342
|
+
function FooterContainerChrome({
|
|
8343
|
+
rect,
|
|
8344
|
+
onAdd,
|
|
8345
|
+
addDisabled = false
|
|
8346
|
+
}) {
|
|
8347
|
+
const chromeGap = 6;
|
|
8348
|
+
const buttonMargin = 7;
|
|
8349
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
8350
|
+
"div",
|
|
8351
|
+
{
|
|
8352
|
+
"data-ohw-footer-container-chrome": "",
|
|
8353
|
+
"data-ohw-bridge": "",
|
|
8354
|
+
className: "pointer-events-none fixed z-[2147483647]",
|
|
8355
|
+
style: {
|
|
8356
|
+
top: rect.top - chromeGap,
|
|
8357
|
+
left: rect.left - chromeGap,
|
|
8358
|
+
width: rect.width + chromeGap * 2,
|
|
8359
|
+
height: rect.height + chromeGap * 2
|
|
8360
|
+
},
|
|
8361
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Tooltip, { children: [
|
|
8362
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
8363
|
+
"button",
|
|
8364
|
+
{
|
|
8365
|
+
type: "button",
|
|
8366
|
+
"data-ohw-footer-add-button": "",
|
|
8367
|
+
disabled: addDisabled,
|
|
8368
|
+
className: "pointer-events-auto absolute left-1/2 flex size-7 -translate-x-1/2 -translate-y-full items-center justify-center rounded-[10px] border border-border bg-background p-0.5 shadow-sm transition-colors hover:bg-muted/80 disabled:pointer-events-none disabled:opacity-40",
|
|
8369
|
+
style: { top: chromeGap - buttonMargin },
|
|
8370
|
+
"aria-label": "Add item",
|
|
8371
|
+
onMouseDown: (e) => {
|
|
8372
|
+
e.preventDefault();
|
|
8373
|
+
e.stopPropagation();
|
|
8374
|
+
},
|
|
8375
|
+
onClick: (e) => {
|
|
8376
|
+
e.preventDefault();
|
|
8377
|
+
e.stopPropagation();
|
|
8378
|
+
if (addDisabled) return;
|
|
8379
|
+
onAdd();
|
|
8380
|
+
},
|
|
8381
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
8382
|
+
}
|
|
8383
|
+
) }),
|
|
8384
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
8385
|
+
] })
|
|
8386
|
+
}
|
|
8387
|
+
) });
|
|
8388
|
+
}
|
|
8389
|
+
|
|
7823
8390
|
// src/lib/carousel.ts
|
|
7824
|
-
var
|
|
8391
|
+
var import_react10 = require("react");
|
|
7825
8392
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
7826
8393
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
7827
8394
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -7883,8 +8450,8 @@ function applyCarouselNode(key, val) {
|
|
|
7883
8450
|
return true;
|
|
7884
8451
|
}
|
|
7885
8452
|
function useOhwCarousel(key, initial) {
|
|
7886
|
-
const [images, setImages] = (0,
|
|
7887
|
-
(0,
|
|
8453
|
+
const [images, setImages] = (0, import_react10.useState)(initial);
|
|
8454
|
+
(0, import_react10.useEffect)(() => {
|
|
7888
8455
|
const el = document.querySelector(
|
|
7889
8456
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
7890
8457
|
);
|
|
@@ -7905,14 +8472,14 @@ function useOhwCarousel(key, initial) {
|
|
|
7905
8472
|
}
|
|
7906
8473
|
|
|
7907
8474
|
// src/ui/navbar-container-chrome.tsx
|
|
7908
|
-
var
|
|
7909
|
-
var
|
|
8475
|
+
var import_lucide_react12 = require("lucide-react");
|
|
8476
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
7910
8477
|
function NavbarContainerChrome({
|
|
7911
8478
|
rect,
|
|
7912
8479
|
onAdd
|
|
7913
8480
|
}) {
|
|
7914
8481
|
const chromeGap = 6;
|
|
7915
|
-
return /* @__PURE__ */ (0,
|
|
8482
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
7916
8483
|
"div",
|
|
7917
8484
|
{
|
|
7918
8485
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -7924,7 +8491,7 @@ function NavbarContainerChrome({
|
|
|
7924
8491
|
width: rect.width + chromeGap * 2,
|
|
7925
8492
|
height: rect.height + chromeGap * 2
|
|
7926
8493
|
},
|
|
7927
|
-
children: /* @__PURE__ */ (0,
|
|
8494
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
7928
8495
|
"button",
|
|
7929
8496
|
{
|
|
7930
8497
|
type: "button",
|
|
@@ -7941,7 +8508,7 @@ function NavbarContainerChrome({
|
|
|
7941
8508
|
e.stopPropagation();
|
|
7942
8509
|
onAdd();
|
|
7943
8510
|
},
|
|
7944
|
-
children: /* @__PURE__ */ (0,
|
|
8511
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
7945
8512
|
}
|
|
7946
8513
|
)
|
|
7947
8514
|
}
|
|
@@ -7950,7 +8517,7 @@ function NavbarContainerChrome({
|
|
|
7950
8517
|
|
|
7951
8518
|
// src/ui/drop-indicator.tsx
|
|
7952
8519
|
var React10 = __toESM(require("react"), 1);
|
|
7953
|
-
var
|
|
8520
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
7954
8521
|
var dropIndicatorVariants = cva(
|
|
7955
8522
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
7956
8523
|
{
|
|
@@ -7974,7 +8541,7 @@ var dropIndicatorVariants = cva(
|
|
|
7974
8541
|
);
|
|
7975
8542
|
var DropIndicator = React10.forwardRef(
|
|
7976
8543
|
({ className, direction, state, ...props }, ref) => {
|
|
7977
|
-
return /* @__PURE__ */ (0,
|
|
8544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
7978
8545
|
"div",
|
|
7979
8546
|
{
|
|
7980
8547
|
ref,
|
|
@@ -7991,7 +8558,7 @@ var DropIndicator = React10.forwardRef(
|
|
|
7991
8558
|
DropIndicator.displayName = "DropIndicator";
|
|
7992
8559
|
|
|
7993
8560
|
// src/ui/badge.tsx
|
|
7994
|
-
var
|
|
8561
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
7995
8562
|
var badgeVariants = cva(
|
|
7996
8563
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
7997
8564
|
{
|
|
@@ -8009,12 +8576,12 @@ var badgeVariants = cva(
|
|
|
8009
8576
|
}
|
|
8010
8577
|
);
|
|
8011
8578
|
function Badge({ className, variant, ...props }) {
|
|
8012
|
-
return /* @__PURE__ */ (0,
|
|
8579
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
8013
8580
|
}
|
|
8014
8581
|
|
|
8015
8582
|
// src/OhhwellsBridge.tsx
|
|
8016
|
-
var
|
|
8017
|
-
var
|
|
8583
|
+
var import_lucide_react13 = require("lucide-react");
|
|
8584
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
8018
8585
|
var PRIMARY2 = "#0885FE";
|
|
8019
8586
|
var IMAGE_FADE_MS = 300;
|
|
8020
8587
|
function runOpacityFade(el, onDone) {
|
|
@@ -8193,7 +8760,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
|
|
|
8193
8760
|
const root = (0, import_client.createRoot)(container);
|
|
8194
8761
|
(0, import_react_dom2.flushSync)(() => {
|
|
8195
8762
|
root.render(
|
|
8196
|
-
/* @__PURE__ */ (0,
|
|
8763
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8197
8764
|
SchedulingWidget,
|
|
8198
8765
|
{
|
|
8199
8766
|
notifyOnConnect,
|
|
@@ -8233,7 +8800,7 @@ function mountSchedulingEntries(entries, notifyOnConnect = false) {
|
|
|
8233
8800
|
}
|
|
8234
8801
|
}
|
|
8235
8802
|
}
|
|
8236
|
-
function
|
|
8803
|
+
function getLinkHref3(el) {
|
|
8237
8804
|
const anchor = el instanceof HTMLAnchorElement ? el : el.querySelector("a");
|
|
8238
8805
|
return anchor?.getAttribute("href") ?? "";
|
|
8239
8806
|
}
|
|
@@ -8283,7 +8850,7 @@ function collectEditableNodes(extraContent) {
|
|
|
8283
8850
|
return { key: el.dataset.ohwKey ?? "", type: "video", text: getVideoEl(el)?.src ?? "" };
|
|
8284
8851
|
}
|
|
8285
8852
|
if (el.dataset.ohwEditable === "link") {
|
|
8286
|
-
return { key: el.dataset.ohwKey ?? "", type: "link", text:
|
|
8853
|
+
return { key: el.dataset.ohwKey ?? "", type: "link", text: getLinkHref3(el) };
|
|
8287
8854
|
}
|
|
8288
8855
|
return {
|
|
8289
8856
|
key: el.dataset.ohwKey ?? "",
|
|
@@ -8294,7 +8861,7 @@ function collectEditableNodes(extraContent) {
|
|
|
8294
8861
|
document.querySelectorAll("[data-ohw-href-key]").forEach((el) => {
|
|
8295
8862
|
const key = el.getAttribute("data-ohw-href-key") ?? "";
|
|
8296
8863
|
if (!key) return;
|
|
8297
|
-
nodes.push({ key, type: "link", text:
|
|
8864
|
+
nodes.push({ key, type: "link", text: getLinkHref3(el) });
|
|
8298
8865
|
});
|
|
8299
8866
|
if (extraContent) {
|
|
8300
8867
|
for (const key of [NAV_ORDER_KEY, FOOTER_ORDER_KEY, NAV_COUNT_KEY]) {
|
|
@@ -8397,7 +8964,7 @@ function applyLinkByKey(key, val) {
|
|
|
8397
8964
|
}
|
|
8398
8965
|
function isInsideLinkEditor(target) {
|
|
8399
8966
|
return Boolean(
|
|
8400
|
-
target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest("[data-ohw-section-picker]") || target.closest("[data-ohw-navbar-container-chrome]") || target.closest("[data-ohw-navbar-add-button]") || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
|
|
8967
|
+
target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest("[data-ohw-section-picker]") || target.closest("[data-ohw-navbar-container-chrome]") || target.closest("[data-ohw-navbar-add-button]") || target.closest("[data-ohw-footer-container-chrome]") || target.closest("[data-ohw-footer-add-button]") || target.closest("[data-ohw-more-menu]") || target.closest('[data-slot="dropdown-menu-content"]') || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
|
|
8401
8968
|
);
|
|
8402
8969
|
}
|
|
8403
8970
|
function getHrefKeyFromElement(el) {
|
|
@@ -8478,7 +9045,7 @@ function isInferredFooterGroup(el) {
|
|
|
8478
9045
|
return countFooterNavItems(el) >= 2;
|
|
8479
9046
|
}
|
|
8480
9047
|
function isNavigationContainer(el) {
|
|
8481
|
-
return el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isNavigationRoot(el) || isInferredFooterGroup(el);
|
|
9048
|
+
return el.hasAttribute("data-ohw-nav-container") || isFooterLinksContainer(el) || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isNavigationRoot(el) || isInferredFooterGroup(el);
|
|
8482
9049
|
}
|
|
8483
9050
|
function isNavbarLinksContainer(el) {
|
|
8484
9051
|
return el.hasAttribute("data-ohw-nav-container");
|
|
@@ -8497,6 +9064,9 @@ function isPointOverNavigation(x, y) {
|
|
|
8497
9064
|
const roots = /* @__PURE__ */ new Set();
|
|
8498
9065
|
const navRoot = document.querySelector("[data-ohw-nav-root]") ?? document.querySelector("nav");
|
|
8499
9066
|
if (navRoot) roots.add(navRoot);
|
|
9067
|
+
document.querySelectorAll("[data-ohw-nav-drawer], [data-ohw-nav-container]").forEach((el) => {
|
|
9068
|
+
roots.add(el);
|
|
9069
|
+
});
|
|
8500
9070
|
const footer = document.querySelector("footer");
|
|
8501
9071
|
if (footer) roots.add(footer);
|
|
8502
9072
|
for (const root of roots) {
|
|
@@ -8525,6 +9095,12 @@ function isPointOverNavItem(container, x, y) {
|
|
|
8525
9095
|
return x >= itemRect.left && x <= itemRect.right && y >= itemRect.top && y <= itemRect.bottom;
|
|
8526
9096
|
});
|
|
8527
9097
|
}
|
|
9098
|
+
function isPointOverFooterColumn(x, y) {
|
|
9099
|
+
return listFooterColumns().some((col) => {
|
|
9100
|
+
const r2 = col.getBoundingClientRect();
|
|
9101
|
+
return x >= r2.left && x <= r2.right && y >= r2.top && y <= r2.bottom;
|
|
9102
|
+
});
|
|
9103
|
+
}
|
|
8528
9104
|
function resolveNavContainerSelectionTarget(target, clientX, clientY) {
|
|
8529
9105
|
if (getNavigationItemAnchor(target)) return null;
|
|
8530
9106
|
if (target.closest('[data-ohw-role="navbar-button"]')) return null;
|
|
@@ -8555,7 +9131,10 @@ function getNavigationSelectionParent(el) {
|
|
|
8555
9131
|
if (footerGroup) return footerGroup;
|
|
8556
9132
|
return getNavigationRoot(el);
|
|
8557
9133
|
}
|
|
8558
|
-
if (el
|
|
9134
|
+
if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup(el))) {
|
|
9135
|
+
return getFooterLinksContainer();
|
|
9136
|
+
}
|
|
9137
|
+
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isFooterLinksContainer(el) || isInferredFooterGroup(el)) {
|
|
8559
9138
|
return getNavigationRoot(el);
|
|
8560
9139
|
}
|
|
8561
9140
|
return null;
|
|
@@ -8782,7 +9361,7 @@ function EditGlowChrome({
|
|
|
8782
9361
|
hideHandle = false
|
|
8783
9362
|
}) {
|
|
8784
9363
|
const GAP = SELECTION_CHROME_GAP2;
|
|
8785
|
-
return /* @__PURE__ */ (0,
|
|
9364
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
8786
9365
|
"div",
|
|
8787
9366
|
{
|
|
8788
9367
|
ref: elRef,
|
|
@@ -8797,7 +9376,7 @@ function EditGlowChrome({
|
|
|
8797
9376
|
zIndex: 2147483646
|
|
8798
9377
|
},
|
|
8799
9378
|
children: [
|
|
8800
|
-
/* @__PURE__ */ (0,
|
|
9379
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8801
9380
|
"div",
|
|
8802
9381
|
{
|
|
8803
9382
|
style: {
|
|
@@ -8810,7 +9389,7 @@ function EditGlowChrome({
|
|
|
8810
9389
|
}
|
|
8811
9390
|
}
|
|
8812
9391
|
),
|
|
8813
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0,
|
|
9392
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8814
9393
|
"div",
|
|
8815
9394
|
{
|
|
8816
9395
|
"data-ohw-drag-handle-container": "",
|
|
@@ -8822,7 +9401,7 @@ function EditGlowChrome({
|
|
|
8822
9401
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
8823
9402
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
8824
9403
|
},
|
|
8825
|
-
children: /* @__PURE__ */ (0,
|
|
9404
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8826
9405
|
DragHandle,
|
|
8827
9406
|
{
|
|
8828
9407
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -9005,9 +9584,9 @@ function FloatingToolbar({
|
|
|
9005
9584
|
showEditLink,
|
|
9006
9585
|
onEditLink
|
|
9007
9586
|
}) {
|
|
9008
|
-
const localRef =
|
|
9009
|
-
const [measuredW, setMeasuredW] =
|
|
9010
|
-
const setRefs =
|
|
9587
|
+
const localRef = import_react11.default.useRef(null);
|
|
9588
|
+
const [measuredW, setMeasuredW] = import_react11.default.useState(330);
|
|
9589
|
+
const setRefs = import_react11.default.useCallback(
|
|
9011
9590
|
(node) => {
|
|
9012
9591
|
localRef.current = node;
|
|
9013
9592
|
if (typeof elRef === "function") elRef(node);
|
|
@@ -9019,7 +9598,7 @@ function FloatingToolbar({
|
|
|
9019
9598
|
},
|
|
9020
9599
|
[elRef]
|
|
9021
9600
|
);
|
|
9022
|
-
|
|
9601
|
+
import_react11.default.useLayoutEffect(() => {
|
|
9023
9602
|
const node = localRef.current;
|
|
9024
9603
|
if (!node) return;
|
|
9025
9604
|
const update = () => {
|
|
@@ -9032,7 +9611,7 @@ function FloatingToolbar({
|
|
|
9032
9611
|
return () => ro.disconnect();
|
|
9033
9612
|
}, [showEditLink, activeCommands]);
|
|
9034
9613
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
9035
|
-
return /* @__PURE__ */ (0,
|
|
9614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
9036
9615
|
"div",
|
|
9037
9616
|
{
|
|
9038
9617
|
ref: setRefs,
|
|
@@ -9044,12 +9623,12 @@ function FloatingToolbar({
|
|
|
9044
9623
|
zIndex: 2147483647,
|
|
9045
9624
|
pointerEvents: "auto"
|
|
9046
9625
|
},
|
|
9047
|
-
children: /* @__PURE__ */ (0,
|
|
9048
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
9049
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
9626
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CustomToolbar, { children: [
|
|
9627
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react11.default.Fragment, { children: [
|
|
9628
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CustomToolbarDivider, {}),
|
|
9050
9629
|
btns.map((btn) => {
|
|
9051
9630
|
const isActive = activeCommands.has(btn.cmd);
|
|
9052
|
-
return /* @__PURE__ */ (0,
|
|
9631
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
9053
9632
|
CustomToolbarButton,
|
|
9054
9633
|
{
|
|
9055
9634
|
title: btn.title,
|
|
@@ -9058,7 +9637,7 @@ function FloatingToolbar({
|
|
|
9058
9637
|
e.preventDefault();
|
|
9059
9638
|
onCommand(btn.cmd);
|
|
9060
9639
|
},
|
|
9061
|
-
children: /* @__PURE__ */ (0,
|
|
9640
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
9062
9641
|
"svg",
|
|
9063
9642
|
{
|
|
9064
9643
|
width: "16",
|
|
@@ -9079,7 +9658,7 @@ function FloatingToolbar({
|
|
|
9079
9658
|
);
|
|
9080
9659
|
})
|
|
9081
9660
|
] }, gi)),
|
|
9082
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
9661
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
9083
9662
|
CustomToolbarButton,
|
|
9084
9663
|
{
|
|
9085
9664
|
type: "button",
|
|
@@ -9093,7 +9672,7 @@ function FloatingToolbar({
|
|
|
9093
9672
|
e.preventDefault();
|
|
9094
9673
|
e.stopPropagation();
|
|
9095
9674
|
},
|
|
9096
|
-
children: /* @__PURE__ */ (0,
|
|
9675
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react13.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
9097
9676
|
}
|
|
9098
9677
|
) : null
|
|
9099
9678
|
] })
|
|
@@ -9110,7 +9689,7 @@ function StateToggle({
|
|
|
9110
9689
|
states,
|
|
9111
9690
|
onStateChange
|
|
9112
9691
|
}) {
|
|
9113
|
-
return /* @__PURE__ */ (0,
|
|
9692
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
9114
9693
|
ToggleGroup,
|
|
9115
9694
|
{
|
|
9116
9695
|
"data-ohw-state-toggle": "",
|
|
@@ -9124,7 +9703,7 @@ function StateToggle({
|
|
|
9124
9703
|
left: rect.right - 8,
|
|
9125
9704
|
transform: "translateX(-100%)"
|
|
9126
9705
|
},
|
|
9127
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
9706
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
9128
9707
|
}
|
|
9129
9708
|
);
|
|
9130
9709
|
}
|
|
@@ -9151,8 +9730,8 @@ function OhhwellsBridge() {
|
|
|
9151
9730
|
const router = (0, import_navigation2.useRouter)();
|
|
9152
9731
|
const searchParams = (0, import_navigation2.useSearchParams)();
|
|
9153
9732
|
const isEditMode = isEditSessionActive();
|
|
9154
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
9155
|
-
(0,
|
|
9733
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react11.useState)(null);
|
|
9734
|
+
(0, import_react11.useEffect)(() => {
|
|
9156
9735
|
const figtreeFontId = "ohw-figtree-font";
|
|
9157
9736
|
if (!document.getElementById(figtreeFontId)) {
|
|
9158
9737
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -9180,99 +9759,99 @@ function OhhwellsBridge() {
|
|
|
9180
9759
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
9181
9760
|
const subdomain = resolveSubdomain(subdomainFromQuery);
|
|
9182
9761
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
9183
|
-
const postToParent2 = (0,
|
|
9762
|
+
const postToParent2 = (0, import_react11.useCallback)((data) => {
|
|
9184
9763
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
9185
9764
|
window.parent.postMessage(data, "*");
|
|
9186
9765
|
}
|
|
9187
9766
|
}, []);
|
|
9188
|
-
const [fetchState, setFetchState] = (0,
|
|
9189
|
-
const autoSaveTimers = (0,
|
|
9190
|
-
const activeElRef = (0,
|
|
9191
|
-
const pointerHeldRef = (0,
|
|
9192
|
-
const selectedElRef = (0,
|
|
9193
|
-
const selectedHrefKeyRef = (0,
|
|
9194
|
-
const selectedFooterColAttrRef = (0,
|
|
9195
|
-
const originalContentRef = (0,
|
|
9196
|
-
const activeStateElRef = (0,
|
|
9197
|
-
const parentScrollRef = (0,
|
|
9198
|
-
const visibleViewportRef = (0,
|
|
9199
|
-
const [dialogPortalContainer, setDialogPortalContainer] = (0,
|
|
9200
|
-
const attachVisibleViewport = (0,
|
|
9767
|
+
const [fetchState, setFetchState] = (0, import_react11.useState)("idle");
|
|
9768
|
+
const autoSaveTimers = (0, import_react11.useRef)(/* @__PURE__ */ new Map());
|
|
9769
|
+
const activeElRef = (0, import_react11.useRef)(null);
|
|
9770
|
+
const pointerHeldRef = (0, import_react11.useRef)(false);
|
|
9771
|
+
const selectedElRef = (0, import_react11.useRef)(null);
|
|
9772
|
+
const selectedHrefKeyRef = (0, import_react11.useRef)(null);
|
|
9773
|
+
const selectedFooterColAttrRef = (0, import_react11.useRef)(null);
|
|
9774
|
+
const originalContentRef = (0, import_react11.useRef)(null);
|
|
9775
|
+
const activeStateElRef = (0, import_react11.useRef)(null);
|
|
9776
|
+
const parentScrollRef = (0, import_react11.useRef)(null);
|
|
9777
|
+
const visibleViewportRef = (0, import_react11.useRef)(null);
|
|
9778
|
+
const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react11.useState)(null);
|
|
9779
|
+
const attachVisibleViewport = (0, import_react11.useCallback)((node) => {
|
|
9201
9780
|
visibleViewportRef.current = node;
|
|
9202
9781
|
setDialogPortalContainer(node);
|
|
9203
9782
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
9204
9783
|
}, []);
|
|
9205
|
-
const toolbarElRef = (0,
|
|
9206
|
-
const glowElRef = (0,
|
|
9207
|
-
const hoveredImageRef = (0,
|
|
9208
|
-
const hoveredImageHasTextOverlapRef = (0,
|
|
9209
|
-
const dragOverElRef = (0,
|
|
9210
|
-
const [mediaHover, setMediaHover] = (0,
|
|
9211
|
-
const [carouselHover, setCarouselHover] = (0,
|
|
9212
|
-
const [uploadingRects, setUploadingRects] = (0,
|
|
9213
|
-
const hoveredGapRef = (0,
|
|
9214
|
-
const imageUnhoverTimerRef = (0,
|
|
9215
|
-
const imageShowTimerRef = (0,
|
|
9216
|
-
const editStylesRef = (0,
|
|
9217
|
-
const activateRef = (0,
|
|
9784
|
+
const toolbarElRef = (0, import_react11.useRef)(null);
|
|
9785
|
+
const glowElRef = (0, import_react11.useRef)(null);
|
|
9786
|
+
const hoveredImageRef = (0, import_react11.useRef)(null);
|
|
9787
|
+
const hoveredImageHasTextOverlapRef = (0, import_react11.useRef)(false);
|
|
9788
|
+
const dragOverElRef = (0, import_react11.useRef)(null);
|
|
9789
|
+
const [mediaHover, setMediaHover] = (0, import_react11.useState)(null);
|
|
9790
|
+
const [carouselHover, setCarouselHover] = (0, import_react11.useState)(null);
|
|
9791
|
+
const [uploadingRects, setUploadingRects] = (0, import_react11.useState)({});
|
|
9792
|
+
const hoveredGapRef = (0, import_react11.useRef)(null);
|
|
9793
|
+
const imageUnhoverTimerRef = (0, import_react11.useRef)(null);
|
|
9794
|
+
const imageShowTimerRef = (0, import_react11.useRef)(null);
|
|
9795
|
+
const editStylesRef = (0, import_react11.useRef)(null);
|
|
9796
|
+
const activateRef = (0, import_react11.useRef)(() => {
|
|
9218
9797
|
});
|
|
9219
|
-
const deactivateRef = (0,
|
|
9798
|
+
const deactivateRef = (0, import_react11.useRef)(() => {
|
|
9220
9799
|
});
|
|
9221
|
-
const selectRef = (0,
|
|
9800
|
+
const selectRef = (0, import_react11.useRef)(() => {
|
|
9222
9801
|
});
|
|
9223
|
-
const selectFrameRef = (0,
|
|
9802
|
+
const selectFrameRef = (0, import_react11.useRef)(() => {
|
|
9224
9803
|
});
|
|
9225
|
-
const deselectRef = (0,
|
|
9804
|
+
const deselectRef = (0, import_react11.useRef)(() => {
|
|
9226
9805
|
});
|
|
9227
|
-
const reselectNavigationItemRef = (0,
|
|
9806
|
+
const reselectNavigationItemRef = (0, import_react11.useRef)(() => {
|
|
9228
9807
|
});
|
|
9229
|
-
const commitNavigationTextEditRef = (0,
|
|
9808
|
+
const commitNavigationTextEditRef = (0, import_react11.useRef)(() => {
|
|
9230
9809
|
});
|
|
9231
|
-
const refreshActiveCommandsRef = (0,
|
|
9810
|
+
const refreshActiveCommandsRef = (0, import_react11.useRef)(() => {
|
|
9232
9811
|
});
|
|
9233
|
-
const postToParentRef = (0,
|
|
9812
|
+
const postToParentRef = (0, import_react11.useRef)(postToParent2);
|
|
9234
9813
|
postToParentRef.current = postToParent2;
|
|
9235
|
-
const sectionsLoadedRef = (0,
|
|
9236
|
-
const pendingScheduleConfigRequests = (0,
|
|
9237
|
-
const [toolbarRect, setToolbarRect] = (0,
|
|
9238
|
-
const [toolbarVariant, setToolbarVariant] = (0,
|
|
9239
|
-
const toolbarVariantRef = (0,
|
|
9814
|
+
const sectionsLoadedRef = (0, import_react11.useRef)(false);
|
|
9815
|
+
const pendingScheduleConfigRequests = (0, import_react11.useRef)([]);
|
|
9816
|
+
const [toolbarRect, setToolbarRect] = (0, import_react11.useState)(null);
|
|
9817
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react11.useState)("none");
|
|
9818
|
+
const toolbarVariantRef = (0, import_react11.useRef)("none");
|
|
9240
9819
|
toolbarVariantRef.current = toolbarVariant;
|
|
9241
|
-
const [selectedIsCta, setSelectedIsCta] = (0,
|
|
9242
|
-
const [reorderHrefKey, setReorderHrefKey] = (0,
|
|
9243
|
-
const [reorderDragDisabled, setReorderDragDisabled] = (0,
|
|
9244
|
-
const [toggleState, setToggleState] = (0,
|
|
9245
|
-
const [maxBadge, setMaxBadge] = (0,
|
|
9246
|
-
const [activeCommands, setActiveCommands] = (0,
|
|
9247
|
-
const [sectionGap, setSectionGap] = (0,
|
|
9248
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] = (0,
|
|
9249
|
-
const hoveredNavContainerRef = (0,
|
|
9250
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0,
|
|
9251
|
-
const hoveredItemElRef = (0,
|
|
9252
|
-
const [hoveredItemRect, setHoveredItemRect] = (0,
|
|
9253
|
-
const siblingHintElRef = (0,
|
|
9254
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
9255
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
9256
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
9257
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0,
|
|
9258
|
-
const footerDragRef = (0,
|
|
9259
|
-
const [footerDropSlots, setFooterDropSlots] = (0,
|
|
9260
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0,
|
|
9261
|
-
const [draggedItemRect, setDraggedItemRect] = (0,
|
|
9262
|
-
const footerPointerDragRef = (0,
|
|
9263
|
-
const suppressNextClickRef = (0,
|
|
9264
|
-
const suppressClickUntilRef = (0,
|
|
9265
|
-
const [linkPopover, setLinkPopover] = (0,
|
|
9266
|
-
const linkPopoverSessionRef = (0,
|
|
9267
|
-
const addNavAfterAnchorRef = (0,
|
|
9268
|
-
const editContentRef = (0,
|
|
9269
|
-
const [sitePages, setSitePages] = (0,
|
|
9270
|
-
const [sectionsByPath, setSectionsByPath] = (0,
|
|
9271
|
-
const sectionsPrefetchGenRef = (0,
|
|
9272
|
-
const setLinkPopoverRef = (0,
|
|
9273
|
-
const linkPopoverPanelRef = (0,
|
|
9274
|
-
const linkPopoverOpenRef = (0,
|
|
9275
|
-
const linkPopoverGraceUntilRef = (0,
|
|
9820
|
+
const [selectedIsCta, setSelectedIsCta] = (0, import_react11.useState)(false);
|
|
9821
|
+
const [reorderHrefKey, setReorderHrefKey] = (0, import_react11.useState)(null);
|
|
9822
|
+
const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react11.useState)(false);
|
|
9823
|
+
const [toggleState, setToggleState] = (0, import_react11.useState)(null);
|
|
9824
|
+
const [maxBadge, setMaxBadge] = (0, import_react11.useState)(null);
|
|
9825
|
+
const [activeCommands, setActiveCommands] = (0, import_react11.useState)(/* @__PURE__ */ new Set());
|
|
9826
|
+
const [sectionGap, setSectionGap] = (0, import_react11.useState)(null);
|
|
9827
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react11.useState)(false);
|
|
9828
|
+
const hoveredNavContainerRef = (0, import_react11.useRef)(null);
|
|
9829
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react11.useState)(null);
|
|
9830
|
+
const hoveredItemElRef = (0, import_react11.useRef)(null);
|
|
9831
|
+
const [hoveredItemRect, setHoveredItemRect] = (0, import_react11.useState)(null);
|
|
9832
|
+
const siblingHintElRef = (0, import_react11.useRef)(null);
|
|
9833
|
+
const [siblingHintRect, setSiblingHintRect] = (0, import_react11.useState)(null);
|
|
9834
|
+
const [siblingHintRects, setSiblingHintRects] = (0, import_react11.useState)([]);
|
|
9835
|
+
const [isItemDragging, setIsItemDragging] = (0, import_react11.useState)(false);
|
|
9836
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react11.useState)(false);
|
|
9837
|
+
const footerDragRef = (0, import_react11.useRef)(null);
|
|
9838
|
+
const [footerDropSlots, setFooterDropSlots] = (0, import_react11.useState)([]);
|
|
9839
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react11.useState)(null);
|
|
9840
|
+
const [draggedItemRect, setDraggedItemRect] = (0, import_react11.useState)(null);
|
|
9841
|
+
const footerPointerDragRef = (0, import_react11.useRef)(null);
|
|
9842
|
+
const suppressNextClickRef = (0, import_react11.useRef)(false);
|
|
9843
|
+
const suppressClickUntilRef = (0, import_react11.useRef)(0);
|
|
9844
|
+
const [linkPopover, setLinkPopover] = (0, import_react11.useState)(null);
|
|
9845
|
+
const linkPopoverSessionRef = (0, import_react11.useRef)(null);
|
|
9846
|
+
const addNavAfterAnchorRef = (0, import_react11.useRef)(null);
|
|
9847
|
+
const editContentRef = (0, import_react11.useRef)({});
|
|
9848
|
+
const [sitePages, setSitePages] = (0, import_react11.useState)([]);
|
|
9849
|
+
const [sectionsByPath, setSectionsByPath] = (0, import_react11.useState)({});
|
|
9850
|
+
const sectionsPrefetchGenRef = (0, import_react11.useRef)(0);
|
|
9851
|
+
const setLinkPopoverRef = (0, import_react11.useRef)(setLinkPopover);
|
|
9852
|
+
const linkPopoverPanelRef = (0, import_react11.useRef)(null);
|
|
9853
|
+
const linkPopoverOpenRef = (0, import_react11.useRef)(false);
|
|
9854
|
+
const linkPopoverGraceUntilRef = (0, import_react11.useRef)(0);
|
|
9276
9855
|
setLinkPopoverRef.current = setLinkPopover;
|
|
9277
9856
|
linkPopoverSessionRef.current = linkPopover;
|
|
9278
9857
|
const {
|
|
@@ -9311,7 +9890,7 @@ function OhhwellsBridge() {
|
|
|
9311
9890
|
const bumpLinkPopoverGrace = () => {
|
|
9312
9891
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
9313
9892
|
};
|
|
9314
|
-
const runSectionsPrefetch = (0,
|
|
9893
|
+
const runSectionsPrefetch = (0, import_react11.useCallback)((pages) => {
|
|
9315
9894
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
9316
9895
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
9317
9896
|
const paths = pages.map((p) => p.path);
|
|
@@ -9330,9 +9909,9 @@ function OhhwellsBridge() {
|
|
|
9330
9909
|
);
|
|
9331
9910
|
});
|
|
9332
9911
|
}, [isEditMode, pathname]);
|
|
9333
|
-
const runSectionsPrefetchRef = (0,
|
|
9912
|
+
const runSectionsPrefetchRef = (0, import_react11.useRef)(runSectionsPrefetch);
|
|
9334
9913
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
9335
|
-
(0,
|
|
9914
|
+
(0, import_react11.useEffect)(() => {
|
|
9336
9915
|
if (!linkPopover) {
|
|
9337
9916
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
9338
9917
|
return;
|
|
@@ -9382,7 +9961,7 @@ function OhhwellsBridge() {
|
|
|
9382
9961
|
document.removeEventListener("touchmove", preventBackgroundScroll, scrollOpts);
|
|
9383
9962
|
};
|
|
9384
9963
|
}, [linkPopover, postToParent2]);
|
|
9385
|
-
(0,
|
|
9964
|
+
(0, import_react11.useEffect)(() => {
|
|
9386
9965
|
if (!isEditMode) return;
|
|
9387
9966
|
const useFixtures = shouldUseDevFixtures();
|
|
9388
9967
|
if (useFixtures) {
|
|
@@ -9406,14 +9985,14 @@ function OhhwellsBridge() {
|
|
|
9406
9985
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
9407
9986
|
return () => window.removeEventListener("message", onSitePages);
|
|
9408
9987
|
}, [isEditMode, postToParent2]);
|
|
9409
|
-
(0,
|
|
9988
|
+
(0, import_react11.useEffect)(() => {
|
|
9410
9989
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
9411
9990
|
void loadAllSectionsManifest().then((manifest) => {
|
|
9412
9991
|
if (Object.keys(manifest).length === 0) return;
|
|
9413
9992
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
9414
9993
|
});
|
|
9415
9994
|
}, [isEditMode]);
|
|
9416
|
-
(0,
|
|
9995
|
+
(0, import_react11.useEffect)(() => {
|
|
9417
9996
|
const update = () => {
|
|
9418
9997
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
9419
9998
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -9437,10 +10016,10 @@ function OhhwellsBridge() {
|
|
|
9437
10016
|
vvp.removeEventListener("resize", update);
|
|
9438
10017
|
};
|
|
9439
10018
|
}, []);
|
|
9440
|
-
const refreshStateRules = (0,
|
|
10019
|
+
const refreshStateRules = (0, import_react11.useCallback)(() => {
|
|
9441
10020
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
9442
10021
|
}, []);
|
|
9443
|
-
const processConfigRequest = (0,
|
|
10022
|
+
const processConfigRequest = (0, import_react11.useCallback)((insertAfterVal) => {
|
|
9444
10023
|
const tracker = getSectionsTracker();
|
|
9445
10024
|
let entries = [];
|
|
9446
10025
|
try {
|
|
@@ -9463,7 +10042,7 @@ function OhhwellsBridge() {
|
|
|
9463
10042
|
}
|
|
9464
10043
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
9465
10044
|
}, [isEditMode]);
|
|
9466
|
-
const deactivate = (0,
|
|
10045
|
+
const deactivate = (0, import_react11.useCallback)(() => {
|
|
9467
10046
|
const el = activeElRef.current;
|
|
9468
10047
|
if (!el) return;
|
|
9469
10048
|
const key = el.dataset.ohwKey;
|
|
@@ -9495,12 +10074,12 @@ function OhhwellsBridge() {
|
|
|
9495
10074
|
setToolbarShowEditLink(false);
|
|
9496
10075
|
postToParent2({ type: "ow:exit-edit" });
|
|
9497
10076
|
}, [postToParent2]);
|
|
9498
|
-
const clearSelectedAttr = (0,
|
|
10077
|
+
const clearSelectedAttr = (0, import_react11.useCallback)(() => {
|
|
9499
10078
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
9500
10079
|
el.removeAttribute("data-ohw-selected");
|
|
9501
10080
|
});
|
|
9502
10081
|
}, []);
|
|
9503
|
-
const deselect = (0,
|
|
10082
|
+
const deselect = (0, import_react11.useCallback)(() => {
|
|
9504
10083
|
clearSelectedAttr();
|
|
9505
10084
|
selectedElRef.current = null;
|
|
9506
10085
|
selectedHrefKeyRef.current = null;
|
|
@@ -9520,11 +10099,11 @@ function OhhwellsBridge() {
|
|
|
9520
10099
|
setToolbarVariant("none");
|
|
9521
10100
|
}
|
|
9522
10101
|
}, [clearSelectedAttr]);
|
|
9523
|
-
const markSelected = (0,
|
|
10102
|
+
const markSelected = (0, import_react11.useCallback)((el) => {
|
|
9524
10103
|
clearSelectedAttr();
|
|
9525
10104
|
el.setAttribute("data-ohw-selected", "");
|
|
9526
10105
|
}, [clearSelectedAttr]);
|
|
9527
|
-
const resolveHrefKeyElement = (0,
|
|
10106
|
+
const resolveHrefKeyElement = (0, import_react11.useCallback)((hrefKey) => {
|
|
9528
10107
|
if (isFooterHrefKey(hrefKey)) {
|
|
9529
10108
|
return document.querySelector(
|
|
9530
10109
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -9539,7 +10118,7 @@ function OhhwellsBridge() {
|
|
|
9539
10118
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
9540
10119
|
);
|
|
9541
10120
|
}, []);
|
|
9542
|
-
const resyncSelectedNavigationItem = (0,
|
|
10121
|
+
const resyncSelectedNavigationItem = (0, import_react11.useCallback)(() => {
|
|
9543
10122
|
const hrefKey = selectedHrefKeyRef.current;
|
|
9544
10123
|
if (hrefKey) {
|
|
9545
10124
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -9567,7 +10146,7 @@ function OhhwellsBridge() {
|
|
|
9567
10146
|
);
|
|
9568
10147
|
}
|
|
9569
10148
|
}, [resolveHrefKeyElement]);
|
|
9570
|
-
const reselectNavigationItem = (0,
|
|
10149
|
+
const reselectNavigationItem = (0, import_react11.useCallback)((navAnchor) => {
|
|
9571
10150
|
selectedElRef.current = navAnchor;
|
|
9572
10151
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
9573
10152
|
selectedFooterColAttrRef.current = null;
|
|
@@ -9582,7 +10161,7 @@ function OhhwellsBridge() {
|
|
|
9582
10161
|
setToolbarShowEditLink(false);
|
|
9583
10162
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
9584
10163
|
}, [markSelected]);
|
|
9585
|
-
const commitNavigationTextEdit = (0,
|
|
10164
|
+
const commitNavigationTextEdit = (0, import_react11.useCallback)((navAnchor) => {
|
|
9586
10165
|
const el = activeElRef.current;
|
|
9587
10166
|
if (!el) return;
|
|
9588
10167
|
const key = el.dataset.ohwKey;
|
|
@@ -9609,7 +10188,7 @@ function OhhwellsBridge() {
|
|
|
9609
10188
|
postToParent2({ type: "ow:exit-edit" });
|
|
9610
10189
|
reselectNavigationItem(navAnchor);
|
|
9611
10190
|
}, [postToParent2, reselectNavigationItem]);
|
|
9612
|
-
const handleAddTopLevelNavItem = (0,
|
|
10191
|
+
const handleAddTopLevelNavItem = (0, import_react11.useCallback)(() => {
|
|
9613
10192
|
const items = listNavbarItems();
|
|
9614
10193
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
9615
10194
|
deselectRef.current();
|
|
@@ -9621,7 +10200,28 @@ function OhhwellsBridge() {
|
|
|
9621
10200
|
intent: "add-nav"
|
|
9622
10201
|
});
|
|
9623
10202
|
}, []);
|
|
9624
|
-
const
|
|
10203
|
+
const handleAddFooterColumn = (0, import_react11.useCallback)(() => {
|
|
10204
|
+
if (!canAddFooterColumn()) {
|
|
10205
|
+
postToParent2({
|
|
10206
|
+
type: "ow:toast",
|
|
10207
|
+
title: `Maximum ${MAX_FOOTER_COLUMNS} columns`,
|
|
10208
|
+
toastType: "error"
|
|
10209
|
+
});
|
|
10210
|
+
return;
|
|
10211
|
+
}
|
|
10212
|
+
deselectRef.current();
|
|
10213
|
+
deactivateRef.current();
|
|
10214
|
+
const result = addFooterColumnWithPersist({ postToParent: postToParent2 });
|
|
10215
|
+
if (!result) return;
|
|
10216
|
+
editContentRef.current = {
|
|
10217
|
+
...editContentRef.current,
|
|
10218
|
+
...buildFooterColumnEditContentPatch(result)
|
|
10219
|
+
};
|
|
10220
|
+
requestAnimationFrame(() => {
|
|
10221
|
+
selectRef.current(result.firstLink);
|
|
10222
|
+
});
|
|
10223
|
+
}, [postToParent2]);
|
|
10224
|
+
const clearFooterDragVisuals = (0, import_react11.useCallback)(() => {
|
|
9625
10225
|
footerDragRef.current = null;
|
|
9626
10226
|
setSiblingHintRects([]);
|
|
9627
10227
|
setFooterDropSlots([]);
|
|
@@ -9630,7 +10230,7 @@ function OhhwellsBridge() {
|
|
|
9630
10230
|
setIsItemDragging(false);
|
|
9631
10231
|
unlockFooterDragInteraction();
|
|
9632
10232
|
}, []);
|
|
9633
|
-
const refreshFooterDragVisuals = (0,
|
|
10233
|
+
const refreshFooterDragVisuals = (0, import_react11.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
9634
10234
|
const dragged = session.draggedEl;
|
|
9635
10235
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
9636
10236
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -9655,13 +10255,13 @@ function OhhwellsBridge() {
|
|
|
9655
10255
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
9656
10256
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
9657
10257
|
}, []);
|
|
9658
|
-
const refreshFooterDragVisualsRef = (0,
|
|
10258
|
+
const refreshFooterDragVisualsRef = (0, import_react11.useRef)(refreshFooterDragVisuals);
|
|
9659
10259
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
9660
|
-
const commitFooterDragRef = (0,
|
|
10260
|
+
const commitFooterDragRef = (0, import_react11.useRef)(() => {
|
|
9661
10261
|
});
|
|
9662
|
-
const beginFooterDragRef = (0,
|
|
10262
|
+
const beginFooterDragRef = (0, import_react11.useRef)(() => {
|
|
9663
10263
|
});
|
|
9664
|
-
const beginFooterDrag = (0,
|
|
10264
|
+
const beginFooterDrag = (0, import_react11.useCallback)(
|
|
9665
10265
|
(session) => {
|
|
9666
10266
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
9667
10267
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -9681,7 +10281,7 @@ function OhhwellsBridge() {
|
|
|
9681
10281
|
[refreshFooterDragVisuals]
|
|
9682
10282
|
);
|
|
9683
10283
|
beginFooterDragRef.current = beginFooterDrag;
|
|
9684
|
-
const commitFooterDrag = (0,
|
|
10284
|
+
const commitFooterDrag = (0, import_react11.useCallback)(
|
|
9685
10285
|
(clientX, clientY) => {
|
|
9686
10286
|
const session = footerDragRef.current;
|
|
9687
10287
|
if (!session) {
|
|
@@ -9785,7 +10385,7 @@ function OhhwellsBridge() {
|
|
|
9785
10385
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
9786
10386
|
);
|
|
9787
10387
|
commitFooterDragRef.current = commitFooterDrag;
|
|
9788
|
-
const startFooterLinkDrag = (0,
|
|
10388
|
+
const startFooterLinkDrag = (0, import_react11.useCallback)(
|
|
9789
10389
|
(anchor, clientX, clientY, wasSelected) => {
|
|
9790
10390
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
9791
10391
|
if (!hrefKey || !isFooterHrefKey(hrefKey)) return false;
|
|
@@ -9806,7 +10406,7 @@ function OhhwellsBridge() {
|
|
|
9806
10406
|
},
|
|
9807
10407
|
[beginFooterDrag]
|
|
9808
10408
|
);
|
|
9809
|
-
const startFooterColumnDrag = (0,
|
|
10409
|
+
const startFooterColumnDrag = (0, import_react11.useCallback)(
|
|
9810
10410
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
9811
10411
|
const columns = listFooterColumns();
|
|
9812
10412
|
const idx = columns.indexOf(columnEl);
|
|
@@ -9826,7 +10426,7 @@ function OhhwellsBridge() {
|
|
|
9826
10426
|
},
|
|
9827
10427
|
[beginFooterDrag]
|
|
9828
10428
|
);
|
|
9829
|
-
const handleItemDragStart = (0,
|
|
10429
|
+
const handleItemDragStart = (0, import_react11.useCallback)(
|
|
9830
10430
|
(e) => {
|
|
9831
10431
|
const selected = selectedElRef.current;
|
|
9832
10432
|
if (!selected) {
|
|
@@ -9846,7 +10446,7 @@ function OhhwellsBridge() {
|
|
|
9846
10446
|
},
|
|
9847
10447
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
|
|
9848
10448
|
);
|
|
9849
|
-
const handleItemDragEnd = (0,
|
|
10449
|
+
const handleItemDragEnd = (0, import_react11.useCallback)(
|
|
9850
10450
|
(e) => {
|
|
9851
10451
|
if (footerDragRef.current) {
|
|
9852
10452
|
const x = e?.clientX;
|
|
@@ -9872,7 +10472,7 @@ function OhhwellsBridge() {
|
|
|
9872
10472
|
},
|
|
9873
10473
|
[commitFooterDrag, commitNavDrag, navDragRef]
|
|
9874
10474
|
);
|
|
9875
|
-
const handleItemChromePointerDown = (0,
|
|
10475
|
+
const handleItemChromePointerDown = (0, import_react11.useCallback)((e) => {
|
|
9876
10476
|
if (e.button !== 0) return;
|
|
9877
10477
|
const selected = selectedElRef.current;
|
|
9878
10478
|
if (!selected) return;
|
|
@@ -9903,7 +10503,7 @@ function OhhwellsBridge() {
|
|
|
9903
10503
|
}
|
|
9904
10504
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
9905
10505
|
}, [armNavPressFromChrome]);
|
|
9906
|
-
const handleItemChromeClick = (0,
|
|
10506
|
+
const handleItemChromeClick = (0, import_react11.useCallback)((clientX, clientY) => {
|
|
9907
10507
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
9908
10508
|
suppressNextClickRef.current = false;
|
|
9909
10509
|
return;
|
|
@@ -9916,7 +10516,7 @@ function OhhwellsBridge() {
|
|
|
9916
10516
|
}, []);
|
|
9917
10517
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
9918
10518
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
9919
|
-
const select = (0,
|
|
10519
|
+
const select = (0, import_react11.useCallback)((anchor) => {
|
|
9920
10520
|
if (!isNavigationItem(anchor)) return;
|
|
9921
10521
|
if (activeElRef.current) deactivate();
|
|
9922
10522
|
selectedElRef.current = anchor;
|
|
@@ -9942,10 +10542,10 @@ function OhhwellsBridge() {
|
|
|
9942
10542
|
setToolbarShowEditLink(false);
|
|
9943
10543
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
9944
10544
|
}, [deactivate, markSelected]);
|
|
9945
|
-
const selectFrame = (0,
|
|
10545
|
+
const selectFrame = (0, import_react11.useCallback)((el) => {
|
|
9946
10546
|
if (!isNavigationContainer(el)) return;
|
|
9947
10547
|
if (activeElRef.current) deactivate();
|
|
9948
|
-
const isFooterColumn = el.hasAttribute("data-ohw-footer-col") || Boolean(el.closest("footer") && isInferredFooterGroup(el));
|
|
10548
|
+
const isFooterColumn = !isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || Boolean(el.closest("footer") && isInferredFooterGroup(el)));
|
|
9949
10549
|
selectedElRef.current = el;
|
|
9950
10550
|
selectedHrefKeyRef.current = null;
|
|
9951
10551
|
selectedFooterColAttrRef.current = isFooterColumn ? el.getAttribute("data-ohw-footer-col") ?? String(listFooterColumns().indexOf(el)) : null;
|
|
@@ -9970,7 +10570,7 @@ function OhhwellsBridge() {
|
|
|
9970
10570
|
setToolbarShowEditLink(false);
|
|
9971
10571
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
9972
10572
|
}, [deactivate, markSelected]);
|
|
9973
|
-
const activate = (0,
|
|
10573
|
+
const activate = (0, import_react11.useCallback)((el, options) => {
|
|
9974
10574
|
if (activeElRef.current === el) return;
|
|
9975
10575
|
clearSelectedAttr();
|
|
9976
10576
|
selectedElRef.current = null;
|
|
@@ -10035,7 +10635,7 @@ function OhhwellsBridge() {
|
|
|
10035
10635
|
selectRef.current = select;
|
|
10036
10636
|
selectFrameRef.current = selectFrame;
|
|
10037
10637
|
deselectRef.current = deselect;
|
|
10038
|
-
(0,
|
|
10638
|
+
(0, import_react11.useLayoutEffect)(() => {
|
|
10039
10639
|
if (!subdomain || isEditMode) {
|
|
10040
10640
|
setFetchState("done");
|
|
10041
10641
|
return;
|
|
@@ -10106,7 +10706,7 @@ function OhhwellsBridge() {
|
|
|
10106
10706
|
cancelled = true;
|
|
10107
10707
|
};
|
|
10108
10708
|
}, [subdomain, isEditMode]);
|
|
10109
|
-
(0,
|
|
10709
|
+
(0, import_react11.useEffect)(() => {
|
|
10110
10710
|
if (!subdomain || isEditMode) return;
|
|
10111
10711
|
let debounceTimer = null;
|
|
10112
10712
|
let observer = null;
|
|
@@ -10157,16 +10757,16 @@ function OhhwellsBridge() {
|
|
|
10157
10757
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
10158
10758
|
};
|
|
10159
10759
|
}, [subdomain, isEditMode, pathname]);
|
|
10160
|
-
(0,
|
|
10760
|
+
(0, import_react11.useLayoutEffect)(() => {
|
|
10161
10761
|
const el = document.getElementById("ohw-loader");
|
|
10162
10762
|
if (!el) return;
|
|
10163
10763
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
10164
10764
|
el.style.display = visible ? "flex" : "none";
|
|
10165
10765
|
}, [subdomain, fetchState]);
|
|
10166
|
-
(0,
|
|
10766
|
+
(0, import_react11.useEffect)(() => {
|
|
10167
10767
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
10168
10768
|
}, [pathname, postToParent2]);
|
|
10169
|
-
(0,
|
|
10769
|
+
(0, import_react11.useEffect)(() => {
|
|
10170
10770
|
if (!isEditMode) return;
|
|
10171
10771
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
10172
10772
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -10174,7 +10774,7 @@ function OhhwellsBridge() {
|
|
|
10174
10774
|
deselectRef.current();
|
|
10175
10775
|
deactivateRef.current();
|
|
10176
10776
|
}, [pathname, isEditMode]);
|
|
10177
|
-
(0,
|
|
10777
|
+
(0, import_react11.useEffect)(() => {
|
|
10178
10778
|
const contentForNav = () => {
|
|
10179
10779
|
if (isEditMode) return editContentRef.current;
|
|
10180
10780
|
if (!subdomain) return {};
|
|
@@ -10239,7 +10839,7 @@ function OhhwellsBridge() {
|
|
|
10239
10839
|
observer?.disconnect();
|
|
10240
10840
|
};
|
|
10241
10841
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
10242
|
-
(0,
|
|
10842
|
+
(0, import_react11.useEffect)(() => {
|
|
10243
10843
|
if (!isEditMode) return;
|
|
10244
10844
|
const measure = () => {
|
|
10245
10845
|
const h = document.body.scrollHeight;
|
|
@@ -10263,7 +10863,7 @@ function OhhwellsBridge() {
|
|
|
10263
10863
|
window.removeEventListener("resize", handleResize);
|
|
10264
10864
|
};
|
|
10265
10865
|
}, [pathname, isEditMode, postToParent2]);
|
|
10266
|
-
(0,
|
|
10866
|
+
(0, import_react11.useEffect)(() => {
|
|
10267
10867
|
if (!subdomainFromQuery || isEditMode) return;
|
|
10268
10868
|
const handleClick = (e) => {
|
|
10269
10869
|
const anchor = e.target.closest("a");
|
|
@@ -10279,7 +10879,7 @@ function OhhwellsBridge() {
|
|
|
10279
10879
|
document.addEventListener("click", handleClick, true);
|
|
10280
10880
|
return () => document.removeEventListener("click", handleClick, true);
|
|
10281
10881
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
10282
|
-
(0,
|
|
10882
|
+
(0, import_react11.useEffect)(() => {
|
|
10283
10883
|
if (!isEditMode) {
|
|
10284
10884
|
editStylesRef.current?.base.remove();
|
|
10285
10885
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -10478,7 +11078,7 @@ function OhhwellsBridge() {
|
|
|
10478
11078
|
setLinkPopoverRef.current({
|
|
10479
11079
|
key: editable.dataset.ohwKey ?? "",
|
|
10480
11080
|
mode: "edit",
|
|
10481
|
-
target:
|
|
11081
|
+
target: getLinkHref3(editable)
|
|
10482
11082
|
});
|
|
10483
11083
|
return;
|
|
10484
11084
|
}
|
|
@@ -10503,7 +11103,7 @@ function OhhwellsBridge() {
|
|
|
10503
11103
|
}
|
|
10504
11104
|
e.preventDefault();
|
|
10505
11105
|
e.stopPropagation();
|
|
10506
|
-
activateRef.current(editable);
|
|
11106
|
+
activateRef.current(editable, { caretX: e.clientX, caretY: e.clientY });
|
|
10507
11107
|
return;
|
|
10508
11108
|
}
|
|
10509
11109
|
const hrefAnchor = getNavigationItemAnchor(target);
|
|
@@ -10530,6 +11130,18 @@ function OhhwellsBridge() {
|
|
|
10530
11130
|
selectFrameRef.current(footerColClick);
|
|
10531
11131
|
return;
|
|
10532
11132
|
}
|
|
11133
|
+
const footerLinksToSelect = resolveFooterLinksContainerSelectionTarget(
|
|
11134
|
+
target,
|
|
11135
|
+
e.clientX,
|
|
11136
|
+
e.clientY,
|
|
11137
|
+
isPointOverNavItem
|
|
11138
|
+
);
|
|
11139
|
+
if (footerLinksToSelect) {
|
|
11140
|
+
e.preventDefault();
|
|
11141
|
+
e.stopPropagation();
|
|
11142
|
+
selectFrameRef.current(footerLinksToSelect);
|
|
11143
|
+
return;
|
|
11144
|
+
}
|
|
10533
11145
|
const navContainerToSelect = resolveNavContainerSelectionTarget(target, e.clientX, e.clientY);
|
|
10534
11146
|
if (navContainerToSelect) {
|
|
10535
11147
|
e.preventDefault();
|
|
@@ -10588,8 +11200,8 @@ function OhhwellsBridge() {
|
|
|
10588
11200
|
return;
|
|
10589
11201
|
}
|
|
10590
11202
|
const navLabel = getNavigationLabelEditable(target);
|
|
10591
|
-
|
|
10592
|
-
|
|
11203
|
+
const editable = navLabel?.editable ?? target.closest('[data-ohw-editable="text"], [data-ohw-editable="plain"]');
|
|
11204
|
+
if (!editable || isMediaEditable(editable) || editable.dataset.ohwEditable === "link") return;
|
|
10593
11205
|
e.preventDefault();
|
|
10594
11206
|
e.stopPropagation();
|
|
10595
11207
|
if (activeElRef.current !== editable) {
|
|
@@ -10610,16 +11222,38 @@ function OhhwellsBridge() {
|
|
|
10610
11222
|
setHoveredNavContainerRect(null);
|
|
10611
11223
|
return;
|
|
10612
11224
|
}
|
|
10613
|
-
|
|
10614
|
-
const
|
|
10615
|
-
|
|
10616
|
-
|
|
10617
|
-
|
|
10618
|
-
|
|
10619
|
-
|
|
10620
|
-
|
|
11225
|
+
{
|
|
11226
|
+
const selected2 = selectedElRef.current;
|
|
11227
|
+
const selectedIsFooterColumn = Boolean(selected2) && !isFooterLinksContainer(selected2) && (selected2.hasAttribute("data-ohw-footer-col") || selected2.hasAttribute("data-ohw-footer-column") || Boolean(selected2.closest("footer") && isInferredFooterGroup(selected2)));
|
|
11228
|
+
const allowNavContainerHover = toolbarVariantRef.current !== "select-frame";
|
|
11229
|
+
const allowFooterLinksHover = toolbarVariantRef.current !== "select-frame" || selectedIsFooterColumn;
|
|
11230
|
+
if (allowNavContainerHover) {
|
|
11231
|
+
const navContainer = target.closest("[data-ohw-nav-container]");
|
|
11232
|
+
if (navContainer && !getNavigationItemAnchor(target)) {
|
|
11233
|
+
hoveredNavContainerRef.current = navContainer;
|
|
11234
|
+
setHoveredNavContainerRect(navContainer.getBoundingClientRect());
|
|
11235
|
+
hoveredItemElRef.current = null;
|
|
11236
|
+
setHoveredItemRect(null);
|
|
11237
|
+
return;
|
|
11238
|
+
}
|
|
10621
11239
|
}
|
|
10622
|
-
if (
|
|
11240
|
+
if (allowFooterLinksHover) {
|
|
11241
|
+
const navContainer = target.closest("[data-ohw-nav-container]");
|
|
11242
|
+
if (!navContainer) {
|
|
11243
|
+
const footerLinks = target.closest("[data-ohw-footer-links], .rb-footer-links") ?? null;
|
|
11244
|
+
if (footerLinks && selected2 !== footerLinks && !getNavigationItemAnchor(target) && !target.closest("[data-ohw-footer-col], [data-ohw-footer-column]")) {
|
|
11245
|
+
hoveredNavContainerRef.current = footerLinks;
|
|
11246
|
+
setHoveredNavContainerRect(footerLinks.getBoundingClientRect());
|
|
11247
|
+
hoveredItemElRef.current = null;
|
|
11248
|
+
setHoveredItemRect(null);
|
|
11249
|
+
return;
|
|
11250
|
+
}
|
|
11251
|
+
if (!footerLinks) {
|
|
11252
|
+
hoveredNavContainerRef.current = null;
|
|
11253
|
+
setHoveredNavContainerRect(null);
|
|
11254
|
+
}
|
|
11255
|
+
}
|
|
11256
|
+
} else if (toolbarVariantRef.current === "select-frame") {
|
|
10623
11257
|
hoveredNavContainerRef.current = null;
|
|
10624
11258
|
setHoveredNavContainerRect(null);
|
|
10625
11259
|
}
|
|
@@ -10661,9 +11295,9 @@ function OhhwellsBridge() {
|
|
|
10661
11295
|
};
|
|
10662
11296
|
const handleMouseOut = (e) => {
|
|
10663
11297
|
const target = e.target;
|
|
10664
|
-
if (target.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column]")) {
|
|
11298
|
+
if (target.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column], [data-ohw-footer-links], .rb-footer-links")) {
|
|
10665
11299
|
const related2 = e.relatedTarget instanceof Element ? e.relatedTarget : null;
|
|
10666
|
-
if (related2?.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column], [data-ohw-navbar-container-chrome], [data-ohw-navbar-add-button]")) {
|
|
11300
|
+
if (related2?.closest("[data-ohw-nav-container], [data-ohw-footer-col], [data-ohw-footer-column], [data-ohw-footer-links], .rb-footer-links, [data-ohw-navbar-container-chrome], [data-ohw-navbar-add-button], [data-ohw-footer-container-chrome], [data-ohw-footer-add-button]")) {
|
|
10667
11301
|
return;
|
|
10668
11302
|
}
|
|
10669
11303
|
hoveredNavContainerRef.current = null;
|
|
@@ -10758,6 +11392,15 @@ function OhhwellsBridge() {
|
|
|
10758
11392
|
if (track) track.setAttribute("data-ohw-hover-paused", "");
|
|
10759
11393
|
};
|
|
10760
11394
|
const clearImageHover = () => setMediaHover(null);
|
|
11395
|
+
const dismissImageHover = () => {
|
|
11396
|
+
if (hoveredImageRef.current) {
|
|
11397
|
+
hoveredImageRef.current = null;
|
|
11398
|
+
hoveredImageHasTextOverlapRef.current = false;
|
|
11399
|
+
resumeAnimTracks();
|
|
11400
|
+
postToParentRef.current({ type: "ow:image-unhover" });
|
|
11401
|
+
}
|
|
11402
|
+
clearImageHover();
|
|
11403
|
+
};
|
|
10761
11404
|
const findImageAtPoint = (clientX, clientY, fromParentViewport) => {
|
|
10762
11405
|
const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
|
|
10763
11406
|
const images = Array.from(document.querySelectorAll(MEDIA_SELECTOR));
|
|
@@ -10801,16 +11444,13 @@ function OhhwellsBridge() {
|
|
|
10801
11444
|
}
|
|
10802
11445
|
return smallest;
|
|
10803
11446
|
};
|
|
10804
|
-
const dismissImageHover = () => {
|
|
10805
|
-
if (hoveredImageRef.current) {
|
|
10806
|
-
hoveredImageRef.current = null;
|
|
10807
|
-
hoveredImageHasTextOverlapRef.current = false;
|
|
10808
|
-
resumeAnimTracks();
|
|
10809
|
-
postToParentRef.current({ type: "ow:image-unhover" });
|
|
10810
|
-
}
|
|
10811
|
-
};
|
|
10812
11447
|
const probeNavigationHoverAt = (x, y) => {
|
|
10813
|
-
|
|
11448
|
+
const selected = selectedElRef.current;
|
|
11449
|
+
const selectedIsFooterColumn = Boolean(selected) && !isFooterLinksContainer(selected) && (selected.hasAttribute("data-ohw-footer-col") || selected.hasAttribute("data-ohw-footer-column") || Boolean(selected.closest("footer") && isInferredFooterGroup(selected)));
|
|
11450
|
+
const selectedIsFooterLinks = Boolean(selected && isFooterLinksContainer(selected));
|
|
11451
|
+
const allowNavContainerHover = toolbarVariantRef.current !== "select-frame";
|
|
11452
|
+
const allowFooterLinksHover = (toolbarVariantRef.current !== "select-frame" || selectedIsFooterColumn) && !selectedIsFooterLinks;
|
|
11453
|
+
if (toolbarVariantRef.current === "select-frame" && !allowFooterLinksHover) {
|
|
10814
11454
|
hoveredNavContainerRef.current = null;
|
|
10815
11455
|
setHoveredNavContainerRect(null);
|
|
10816
11456
|
}
|
|
@@ -10832,7 +11472,6 @@ function OhhwellsBridge() {
|
|
|
10832
11472
|
if (navItemHit) {
|
|
10833
11473
|
hoveredNavContainerRef.current = null;
|
|
10834
11474
|
setHoveredNavContainerRect(null);
|
|
10835
|
-
const selected = selectedElRef.current;
|
|
10836
11475
|
if (selected !== navItemHit) {
|
|
10837
11476
|
clearHrefKeyHover(navItemHit);
|
|
10838
11477
|
hoveredItemElRef.current = navItemHit;
|
|
@@ -10844,7 +11483,7 @@ function OhhwellsBridge() {
|
|
|
10844
11483
|
return;
|
|
10845
11484
|
}
|
|
10846
11485
|
}
|
|
10847
|
-
if (
|
|
11486
|
+
if (allowNavContainerHover) {
|
|
10848
11487
|
for (const container of navContainers) {
|
|
10849
11488
|
const containerRect = container.getBoundingClientRect();
|
|
10850
11489
|
const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
|
|
@@ -10856,12 +11495,23 @@ function OhhwellsBridge() {
|
|
|
10856
11495
|
setHoveredItemRect(null);
|
|
10857
11496
|
return;
|
|
10858
11497
|
}
|
|
10859
|
-
hoveredNavContainerRef.current = null;
|
|
10860
|
-
setHoveredNavContainerRect(null);
|
|
10861
|
-
} else {
|
|
10862
|
-
hoveredNavContainerRef.current = null;
|
|
10863
|
-
setHoveredNavContainerRect(null);
|
|
10864
11498
|
}
|
|
11499
|
+
if (allowFooterLinksHover) {
|
|
11500
|
+
const footerLinks = getFooterLinksContainer();
|
|
11501
|
+
if (footerLinks) {
|
|
11502
|
+
const containerRect = footerLinks.getBoundingClientRect();
|
|
11503
|
+
const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
|
|
11504
|
+
if (overContainer && !isPointOverNavItem(footerLinks, x, y) && !isPointOverFooterColumn(x, y)) {
|
|
11505
|
+
hoveredNavContainerRef.current = footerLinks;
|
|
11506
|
+
setHoveredNavContainerRect(footerLinks.getBoundingClientRect());
|
|
11507
|
+
hoveredItemElRef.current = null;
|
|
11508
|
+
setHoveredItemRect(null);
|
|
11509
|
+
return;
|
|
11510
|
+
}
|
|
11511
|
+
}
|
|
11512
|
+
}
|
|
11513
|
+
hoveredNavContainerRef.current = null;
|
|
11514
|
+
setHoveredNavContainerRect(null);
|
|
10865
11515
|
for (const column of footerColumns) {
|
|
10866
11516
|
const containerRect = column.getBoundingClientRect();
|
|
10867
11517
|
const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
|
|
@@ -10900,6 +11550,13 @@ function OhhwellsBridge() {
|
|
|
10900
11550
|
probeNavigationHoverAt(x, y);
|
|
10901
11551
|
return;
|
|
10902
11552
|
}
|
|
11553
|
+
const overMoreMenu = document.elementFromPoint(x, y)?.closest?.(
|
|
11554
|
+
'[data-ohw-more-menu], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-item"]'
|
|
11555
|
+
);
|
|
11556
|
+
if (overMoreMenu) {
|
|
11557
|
+
dismissImageHover();
|
|
11558
|
+
return;
|
|
11559
|
+
}
|
|
10903
11560
|
hoveredNavContainerRef.current = null;
|
|
10904
11561
|
setHoveredNavContainerRect(null);
|
|
10905
11562
|
if (hoveredItemElRef.current?.hasAttribute("data-ohw-footer-col") || hoveredItemElRef.current?.hasAttribute("data-ohw-footer-column")) {
|
|
@@ -10946,7 +11603,7 @@ function OhhwellsBridge() {
|
|
|
10946
11603
|
return;
|
|
10947
11604
|
}
|
|
10948
11605
|
const topEl = document.elementFromPoint(x2, y2);
|
|
10949
|
-
if (topEl?.closest('[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"]')) {
|
|
11606
|
+
if (topEl?.closest('[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"], [data-ohw-more-menu], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-item"]')) {
|
|
10950
11607
|
if (hoveredImageRef.current) {
|
|
10951
11608
|
hoveredImageRef.current = null;
|
|
10952
11609
|
resumeAnimTracks();
|
|
@@ -11370,6 +12027,7 @@ function OhhwellsBridge() {
|
|
|
11370
12027
|
}
|
|
11371
12028
|
editContentRef.current = { ...editContentRef.current, ...content };
|
|
11372
12029
|
reconcileNavbarItemsFromContent(editContentRef.current);
|
|
12030
|
+
reconcileFooterOrderFromContent(editContentRef.current);
|
|
11373
12031
|
syncNavigationDragCursorAttrs();
|
|
11374
12032
|
enforceLinkHrefs();
|
|
11375
12033
|
postToParentRef.current({ type: "ow:hydrate-done" });
|
|
@@ -11389,6 +12047,7 @@ function OhhwellsBridge() {
|
|
|
11389
12047
|
window.addEventListener("message", handleDeactivate);
|
|
11390
12048
|
const handleUiEscape = (e) => {
|
|
11391
12049
|
if (e.data?.type !== "ui:escape") return;
|
|
12050
|
+
if (document.querySelector("[data-ohw-more-menu]")) return;
|
|
11392
12051
|
if (linkPopoverOpenRef.current) {
|
|
11393
12052
|
setLinkPopoverRef.current(null);
|
|
11394
12053
|
return;
|
|
@@ -11424,6 +12083,11 @@ function OhhwellsBridge() {
|
|
|
11424
12083
|
}
|
|
11425
12084
|
if (selectedElRef.current) {
|
|
11426
12085
|
if (toolbarVariantRef.current === "select-frame") {
|
|
12086
|
+
const parent2 = getNavigationSelectionParent(selectedElRef.current);
|
|
12087
|
+
if (parent2 && isNavigationContainer(parent2) && isFooterLinksContainer(parent2) && !isFooterLinksContainer(selectedElRef.current)) {
|
|
12088
|
+
selectFrameRef.current(parent2);
|
|
12089
|
+
return;
|
|
12090
|
+
}
|
|
11427
12091
|
deselectRef.current();
|
|
11428
12092
|
return;
|
|
11429
12093
|
}
|
|
@@ -11438,14 +12102,12 @@ function OhhwellsBridge() {
|
|
|
11438
12102
|
window.addEventListener("message", handleUiEscape);
|
|
11439
12103
|
const handleKeyDown = (e) => {
|
|
11440
12104
|
if (e.key === "Escape" && document.querySelector("[data-ohw-section-picker]")) return;
|
|
12105
|
+
if (e.key === "Escape" && document.querySelector("[data-ohw-more-menu]")) return;
|
|
11441
12106
|
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a" && activeElRef.current) {
|
|
11442
|
-
|
|
11443
|
-
|
|
11444
|
-
|
|
11445
|
-
|
|
11446
|
-
refreshActiveCommandsRef.current();
|
|
11447
|
-
return;
|
|
11448
|
-
}
|
|
12107
|
+
e.preventDefault();
|
|
12108
|
+
selectAllTextInEditable(activeElRef.current);
|
|
12109
|
+
refreshActiveCommandsRef.current();
|
|
12110
|
+
return;
|
|
11449
12111
|
}
|
|
11450
12112
|
if (e.key === "Escape" && linkPopoverOpenRef.current) {
|
|
11451
12113
|
setLinkPopoverRef.current(null);
|
|
@@ -11453,6 +12115,12 @@ function OhhwellsBridge() {
|
|
|
11453
12115
|
}
|
|
11454
12116
|
if (e.key === "Escape" && selectedElRef.current && !activeElRef.current) {
|
|
11455
12117
|
if (toolbarVariantRef.current === "select-frame") {
|
|
12118
|
+
const parent2 = getNavigationSelectionParent(selectedElRef.current);
|
|
12119
|
+
if (parent2 && isNavigationContainer(parent2) && isFooterLinksContainer(parent2) && !isFooterLinksContainer(selectedElRef.current)) {
|
|
12120
|
+
e.preventDefault();
|
|
12121
|
+
selectFrameRef.current(parent2);
|
|
12122
|
+
return;
|
|
12123
|
+
}
|
|
11456
12124
|
deselectRef.current();
|
|
11457
12125
|
return;
|
|
11458
12126
|
}
|
|
@@ -11902,7 +12570,7 @@ function OhhwellsBridge() {
|
|
|
11902
12570
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
11903
12571
|
};
|
|
11904
12572
|
}, [isEditMode, refreshStateRules]);
|
|
11905
|
-
(0,
|
|
12573
|
+
(0, import_react11.useEffect)(() => {
|
|
11906
12574
|
if (!isEditMode) return;
|
|
11907
12575
|
const THRESHOLD = 10;
|
|
11908
12576
|
const resolveWasSelected = (el) => {
|
|
@@ -12056,7 +12724,7 @@ function OhhwellsBridge() {
|
|
|
12056
12724
|
unlockFooterDragInteraction();
|
|
12057
12725
|
};
|
|
12058
12726
|
}, [isEditMode]);
|
|
12059
|
-
(0,
|
|
12727
|
+
(0, import_react11.useEffect)(() => {
|
|
12060
12728
|
const handler = (e) => {
|
|
12061
12729
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
12062
12730
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -12072,7 +12740,7 @@ function OhhwellsBridge() {
|
|
|
12072
12740
|
window.addEventListener("message", handler);
|
|
12073
12741
|
return () => window.removeEventListener("message", handler);
|
|
12074
12742
|
}, [processConfigRequest]);
|
|
12075
|
-
(0,
|
|
12743
|
+
(0, import_react11.useEffect)(() => {
|
|
12076
12744
|
if (!isEditMode) return;
|
|
12077
12745
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
12078
12746
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -12107,13 +12775,13 @@ function OhhwellsBridge() {
|
|
|
12107
12775
|
clearTimeout(timer);
|
|
12108
12776
|
};
|
|
12109
12777
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
12110
|
-
(0,
|
|
12778
|
+
(0, import_react11.useEffect)(() => {
|
|
12111
12779
|
scrollToHashSectionWhenReady();
|
|
12112
12780
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
12113
12781
|
window.addEventListener("hashchange", onHashChange);
|
|
12114
12782
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
12115
12783
|
}, [pathname]);
|
|
12116
|
-
const handleCommand = (0,
|
|
12784
|
+
const handleCommand = (0, import_react11.useCallback)((cmd) => {
|
|
12117
12785
|
const el = activeElRef.current;
|
|
12118
12786
|
const selBefore = window.getSelection();
|
|
12119
12787
|
let savedOffsets = null;
|
|
@@ -12149,7 +12817,7 @@ function OhhwellsBridge() {
|
|
|
12149
12817
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
12150
12818
|
refreshActiveCommandsRef.current();
|
|
12151
12819
|
}, []);
|
|
12152
|
-
const handleStateChange = (0,
|
|
12820
|
+
const handleStateChange = (0, import_react11.useCallback)((state) => {
|
|
12153
12821
|
if (!activeStateElRef.current) return;
|
|
12154
12822
|
const el = activeStateElRef.current;
|
|
12155
12823
|
if (state === "Default") {
|
|
@@ -12162,22 +12830,22 @@ function OhhwellsBridge() {
|
|
|
12162
12830
|
}
|
|
12163
12831
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
12164
12832
|
}, [deactivate]);
|
|
12165
|
-
const closeLinkPopover = (0,
|
|
12833
|
+
const closeLinkPopover = (0, import_react11.useCallback)(() => {
|
|
12166
12834
|
addNavAfterAnchorRef.current = null;
|
|
12167
12835
|
setLinkPopover(null);
|
|
12168
12836
|
}, []);
|
|
12169
|
-
const openLinkPopoverForActive = (0,
|
|
12837
|
+
const openLinkPopoverForActive = (0, import_react11.useCallback)(() => {
|
|
12170
12838
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
12171
12839
|
if (!hrefCtx) return;
|
|
12172
12840
|
bumpLinkPopoverGrace();
|
|
12173
12841
|
setLinkPopover({
|
|
12174
12842
|
key: hrefCtx.key,
|
|
12175
12843
|
mode: "edit",
|
|
12176
|
-
target:
|
|
12844
|
+
target: getLinkHref3(hrefCtx.anchor)
|
|
12177
12845
|
});
|
|
12178
12846
|
deactivate();
|
|
12179
12847
|
}, [deactivate]);
|
|
12180
|
-
const openLinkPopoverForSelected = (0,
|
|
12848
|
+
const openLinkPopoverForSelected = (0, import_react11.useCallback)(() => {
|
|
12181
12849
|
const anchor = selectedElRef.current;
|
|
12182
12850
|
if (!anchor) return;
|
|
12183
12851
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -12186,11 +12854,108 @@ function OhhwellsBridge() {
|
|
|
12186
12854
|
setLinkPopover({
|
|
12187
12855
|
key,
|
|
12188
12856
|
mode: "edit",
|
|
12189
|
-
target:
|
|
12857
|
+
target: getLinkHref3(anchor)
|
|
12190
12858
|
});
|
|
12191
12859
|
deselect();
|
|
12192
12860
|
}, [deselect]);
|
|
12193
|
-
const
|
|
12861
|
+
const handleSelectParent = (0, import_react11.useCallback)(() => {
|
|
12862
|
+
const selected = selectedElRef.current;
|
|
12863
|
+
if (!selected) return;
|
|
12864
|
+
if (toolbarVariantRef.current === "select-frame") {
|
|
12865
|
+
deselectRef.current();
|
|
12866
|
+
return;
|
|
12867
|
+
}
|
|
12868
|
+
const parent = getNavigationSelectionParent(selected);
|
|
12869
|
+
if (parent && isNavigationContainer(parent)) {
|
|
12870
|
+
selectFrameRef.current(parent);
|
|
12871
|
+
} else {
|
|
12872
|
+
deselectRef.current();
|
|
12873
|
+
}
|
|
12874
|
+
}, []);
|
|
12875
|
+
const handleDuplicateSelected = (0, import_react11.useCallback)(() => {
|
|
12876
|
+
const selected = selectedElRef.current;
|
|
12877
|
+
if (!selected || !isNavigationItem(selected)) return;
|
|
12878
|
+
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
12879
|
+
if (!hrefKey) return;
|
|
12880
|
+
if (isNavbarHrefKey(hrefKey)) {
|
|
12881
|
+
const result = duplicateNavbarItem(selected);
|
|
12882
|
+
if (!result) return;
|
|
12883
|
+
applyLinkByKey(result.hrefKey, result.href);
|
|
12884
|
+
document.querySelectorAll(`[data-ohw-key="${result.labelKey}"]`).forEach((el) => {
|
|
12885
|
+
el.textContent = result.label;
|
|
12886
|
+
});
|
|
12887
|
+
const nodes = [
|
|
12888
|
+
{ key: result.hrefKey, text: result.href },
|
|
12889
|
+
{ key: result.labelKey, text: result.label }
|
|
12890
|
+
];
|
|
12891
|
+
for (const child of result.childResults) {
|
|
12892
|
+
applyLinkByKey(child.hrefKey, child.href);
|
|
12893
|
+
document.querySelectorAll(`[data-ohw-key="${child.labelKey}"]`).forEach((el) => {
|
|
12894
|
+
el.textContent = child.label;
|
|
12895
|
+
});
|
|
12896
|
+
nodes.push(
|
|
12897
|
+
{ key: child.hrefKey, text: child.href },
|
|
12898
|
+
{ key: child.labelKey, text: child.label }
|
|
12899
|
+
);
|
|
12900
|
+
}
|
|
12901
|
+
const maxIndex = Math.max(
|
|
12902
|
+
result.index,
|
|
12903
|
+
...result.childResults.map((c) => c.index)
|
|
12904
|
+
);
|
|
12905
|
+
const navCount = String(maxIndex + 1);
|
|
12906
|
+
nodes.push(
|
|
12907
|
+
{ key: NAV_COUNT_KEY, text: navCount },
|
|
12908
|
+
{ key: NAV_ORDER_KEY, text: result.orderJson }
|
|
12909
|
+
);
|
|
12910
|
+
editContentRef.current = {
|
|
12911
|
+
...editContentRef.current,
|
|
12912
|
+
[result.hrefKey]: result.href,
|
|
12913
|
+
[result.labelKey]: result.label,
|
|
12914
|
+
...Object.fromEntries(
|
|
12915
|
+
result.childResults.flatMap((c) => [
|
|
12916
|
+
[c.hrefKey, c.href],
|
|
12917
|
+
[c.labelKey, c.label]
|
|
12918
|
+
])
|
|
12919
|
+
),
|
|
12920
|
+
[NAV_COUNT_KEY]: navCount,
|
|
12921
|
+
[NAV_ORDER_KEY]: result.orderJson
|
|
12922
|
+
};
|
|
12923
|
+
postToParent2({ type: "ow:change", nodes });
|
|
12924
|
+
enforceLinkHrefs();
|
|
12925
|
+
requestAnimationFrame(() => {
|
|
12926
|
+
selectRef.current(result.anchor);
|
|
12927
|
+
});
|
|
12928
|
+
return;
|
|
12929
|
+
}
|
|
12930
|
+
if (isFooterHrefKey(hrefKey)) {
|
|
12931
|
+
const result = duplicateFooterItem(selected);
|
|
12932
|
+
if (!result) return;
|
|
12933
|
+
applyLinkByKey(result.hrefKey, result.href);
|
|
12934
|
+
document.querySelectorAll(`[data-ohw-key="${result.labelKey}"]`).forEach((el) => {
|
|
12935
|
+
el.textContent = result.label;
|
|
12936
|
+
});
|
|
12937
|
+
const orderJson = JSON.stringify(result.order);
|
|
12938
|
+
editContentRef.current = {
|
|
12939
|
+
...editContentRef.current,
|
|
12940
|
+
[result.hrefKey]: result.href,
|
|
12941
|
+
[result.labelKey]: result.label,
|
|
12942
|
+
[FOOTER_ORDER_KEY]: orderJson
|
|
12943
|
+
};
|
|
12944
|
+
postToParent2({
|
|
12945
|
+
type: "ow:change",
|
|
12946
|
+
nodes: [
|
|
12947
|
+
{ key: result.hrefKey, text: result.href },
|
|
12948
|
+
{ key: result.labelKey, text: result.label },
|
|
12949
|
+
{ key: FOOTER_ORDER_KEY, text: orderJson }
|
|
12950
|
+
]
|
|
12951
|
+
});
|
|
12952
|
+
enforceLinkHrefs();
|
|
12953
|
+
requestAnimationFrame(() => {
|
|
12954
|
+
selectRef.current(result.anchor);
|
|
12955
|
+
});
|
|
12956
|
+
}
|
|
12957
|
+
}, [postToParent2]);
|
|
12958
|
+
const handleLinkPopoverSubmit = (0, import_react11.useCallback)(
|
|
12194
12959
|
(target) => {
|
|
12195
12960
|
const session = linkPopoverSessionRef.current;
|
|
12196
12961
|
if (!session) return;
|
|
@@ -12249,19 +13014,19 @@ function OhhwellsBridge() {
|
|
|
12249
13014
|
const showEditLink = toolbarShowEditLink;
|
|
12250
13015
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
12251
13016
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
12252
|
-
const handleMediaReplace = (0,
|
|
13017
|
+
const handleMediaReplace = (0, import_react11.useCallback)(
|
|
12253
13018
|
(key) => {
|
|
12254
13019
|
postToParent2({ type: "ow:image-pick", key, elementType: mediaHover?.elementType ?? "image" });
|
|
12255
13020
|
},
|
|
12256
13021
|
[postToParent2, mediaHover?.elementType]
|
|
12257
13022
|
);
|
|
12258
|
-
const handleEditCarousel = (0,
|
|
13023
|
+
const handleEditCarousel = (0, import_react11.useCallback)(
|
|
12259
13024
|
(key) => {
|
|
12260
13025
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
12261
13026
|
},
|
|
12262
13027
|
[postToParent2]
|
|
12263
13028
|
);
|
|
12264
|
-
const handleMediaFadeOutComplete = (0,
|
|
13029
|
+
const handleMediaFadeOutComplete = (0, import_react11.useCallback)((key) => {
|
|
12265
13030
|
setUploadingRects((prev) => {
|
|
12266
13031
|
if (!(key in prev)) return prev;
|
|
12267
13032
|
const next = { ...prev };
|
|
@@ -12269,7 +13034,7 @@ function OhhwellsBridge() {
|
|
|
12269
13034
|
return next;
|
|
12270
13035
|
});
|
|
12271
13036
|
}, []);
|
|
12272
|
-
const handleVideoSettingsChange = (0,
|
|
13037
|
+
const handleVideoSettingsChange = (0, import_react11.useCallback)(
|
|
12273
13038
|
(key, settings) => {
|
|
12274
13039
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
12275
13040
|
const video = getVideoEl(el);
|
|
@@ -12292,9 +13057,9 @@ function OhhwellsBridge() {
|
|
|
12292
13057
|
[postToParent2]
|
|
12293
13058
|
);
|
|
12294
13059
|
return bridgeRoot ? (0, import_react_dom3.createPortal)(
|
|
12295
|
-
/* @__PURE__ */ (0,
|
|
12296
|
-
/* @__PURE__ */ (0,
|
|
12297
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0,
|
|
13060
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
|
|
13061
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
13062
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12298
13063
|
MediaOverlay,
|
|
12299
13064
|
{
|
|
12300
13065
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -12305,7 +13070,7 @@ function OhhwellsBridge() {
|
|
|
12305
13070
|
},
|
|
12306
13071
|
`uploading-${key}`
|
|
12307
13072
|
)),
|
|
12308
|
-
mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0,
|
|
13073
|
+
mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12309
13074
|
MediaOverlay,
|
|
12310
13075
|
{
|
|
12311
13076
|
hover: mediaHover,
|
|
@@ -12314,11 +13079,11 @@ function OhhwellsBridge() {
|
|
|
12314
13079
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
12315
13080
|
}
|
|
12316
13081
|
),
|
|
12317
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
12318
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0,
|
|
12319
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0,
|
|
12320
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0,
|
|
12321
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
13082
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
|
|
13083
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
13084
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
13085
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
13086
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12322
13087
|
"div",
|
|
12323
13088
|
{
|
|
12324
13089
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -12328,7 +13093,7 @@ function OhhwellsBridge() {
|
|
|
12328
13093
|
width: slot.width,
|
|
12329
13094
|
height: slot.height
|
|
12330
13095
|
},
|
|
12331
|
-
children: /* @__PURE__ */ (0,
|
|
13096
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12332
13097
|
DropIndicator,
|
|
12333
13098
|
{
|
|
12334
13099
|
direction: slot.direction,
|
|
@@ -12339,7 +13104,7 @@ function OhhwellsBridge() {
|
|
|
12339
13104
|
},
|
|
12340
13105
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
12341
13106
|
)),
|
|
12342
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
13107
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12343
13108
|
"div",
|
|
12344
13109
|
{
|
|
12345
13110
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -12349,7 +13114,7 @@ function OhhwellsBridge() {
|
|
|
12349
13114
|
width: slot.width,
|
|
12350
13115
|
height: slot.height
|
|
12351
13116
|
},
|
|
12352
|
-
children: /* @__PURE__ */ (0,
|
|
13117
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12353
13118
|
DropIndicator,
|
|
12354
13119
|
{
|
|
12355
13120
|
direction: slot.direction,
|
|
@@ -12360,10 +13125,18 @@ function OhhwellsBridge() {
|
|
|
12360
13125
|
},
|
|
12361
13126
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
12362
13127
|
)),
|
|
12363
|
-
hoveredNavContainerRect && toolbarVariant !== "select-frame" && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
12364
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0,
|
|
12365
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
12366
|
-
toolbarRect && !linkPopover &&
|
|
13128
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
13129
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
13130
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
13131
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
13132
|
+
FooterContainerChrome,
|
|
13133
|
+
{
|
|
13134
|
+
rect: toolbarRect,
|
|
13135
|
+
onAdd: handleAddFooterColumn,
|
|
13136
|
+
addDisabled: !canAddFooterColumn()
|
|
13137
|
+
}
|
|
13138
|
+
),
|
|
13139
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12367
13140
|
ItemInteractionLayer,
|
|
12368
13141
|
{
|
|
12369
13142
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -12377,21 +13150,23 @@ function OhhwellsBridge() {
|
|
|
12377
13150
|
onItemPointerDown: handleItemChromePointerDown,
|
|
12378
13151
|
onItemClick: handleItemChromeClick,
|
|
12379
13152
|
itemDragSurface: !isFooterFrameSelection,
|
|
12380
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ (0,
|
|
13153
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12381
13154
|
ItemActionToolbar,
|
|
12382
13155
|
{
|
|
12383
13156
|
onEditLink: openLinkPopoverForSelected,
|
|
13157
|
+
onSelectParent: handleSelectParent,
|
|
13158
|
+
onDuplicate: handleDuplicateSelected,
|
|
12384
13159
|
addItemDisabled: true,
|
|
12385
13160
|
editLinkDisabled: false,
|
|
12386
|
-
moreDisabled:
|
|
13161
|
+
moreDisabled: false,
|
|
12387
13162
|
showAddItem: !selectedIsCta,
|
|
12388
13163
|
showMore: !selectedIsCta
|
|
12389
13164
|
}
|
|
12390
13165
|
) : void 0
|
|
12391
13166
|
}
|
|
12392
13167
|
),
|
|
12393
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0,
|
|
12394
|
-
/* @__PURE__ */ (0,
|
|
13168
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
|
|
13169
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12395
13170
|
EditGlowChrome,
|
|
12396
13171
|
{
|
|
12397
13172
|
rect: toolbarRect,
|
|
@@ -12401,7 +13176,7 @@ function OhhwellsBridge() {
|
|
|
12401
13176
|
hideHandle: isItemDragging
|
|
12402
13177
|
}
|
|
12403
13178
|
),
|
|
12404
|
-
/* @__PURE__ */ (0,
|
|
13179
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12405
13180
|
FloatingToolbar,
|
|
12406
13181
|
{
|
|
12407
13182
|
rect: toolbarRect,
|
|
@@ -12414,7 +13189,7 @@ function OhhwellsBridge() {
|
|
|
12414
13189
|
}
|
|
12415
13190
|
)
|
|
12416
13191
|
] }),
|
|
12417
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
13192
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
12418
13193
|
"div",
|
|
12419
13194
|
{
|
|
12420
13195
|
"data-ohw-max-badge": "",
|
|
@@ -12440,7 +13215,7 @@ function OhhwellsBridge() {
|
|
|
12440
13215
|
]
|
|
12441
13216
|
}
|
|
12442
13217
|
),
|
|
12443
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
13218
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12444
13219
|
StateToggle,
|
|
12445
13220
|
{
|
|
12446
13221
|
rect: toggleState.rect,
|
|
@@ -12449,15 +13224,15 @@ function OhhwellsBridge() {
|
|
|
12449
13224
|
onStateChange: handleStateChange
|
|
12450
13225
|
}
|
|
12451
13226
|
),
|
|
12452
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
13227
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
12453
13228
|
"div",
|
|
12454
13229
|
{
|
|
12455
13230
|
"data-ohw-section-insert-line": "",
|
|
12456
13231
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
12457
13232
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
12458
13233
|
children: [
|
|
12459
|
-
/* @__PURE__ */ (0,
|
|
12460
|
-
/* @__PURE__ */ (0,
|
|
13234
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
|
|
13235
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12461
13236
|
Badge,
|
|
12462
13237
|
{
|
|
12463
13238
|
className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
|
|
@@ -12474,11 +13249,11 @@ function OhhwellsBridge() {
|
|
|
12474
13249
|
children: "Add Section"
|
|
12475
13250
|
}
|
|
12476
13251
|
),
|
|
12477
|
-
/* @__PURE__ */ (0,
|
|
13252
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
|
|
12478
13253
|
]
|
|
12479
13254
|
}
|
|
12480
13255
|
),
|
|
12481
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
13256
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12482
13257
|
LinkPopover,
|
|
12483
13258
|
{
|
|
12484
13259
|
panelRef: linkPopoverPanelRef,
|
|
@@ -12506,6 +13281,12 @@ function OhhwellsBridge() {
|
|
|
12506
13281
|
CustomToolbarDivider,
|
|
12507
13282
|
DragHandle,
|
|
12508
13283
|
DropIndicator,
|
|
13284
|
+
DropdownMenu,
|
|
13285
|
+
DropdownMenuContent,
|
|
13286
|
+
DropdownMenuGroup,
|
|
13287
|
+
DropdownMenuItem,
|
|
13288
|
+
DropdownMenuSeparator,
|
|
13289
|
+
DropdownMenuTrigger,
|
|
12509
13290
|
ItemActionToolbar,
|
|
12510
13291
|
ItemInteractionLayer,
|
|
12511
13292
|
LinkEditorPanel,
|