@ohhwells/bridge 0.1.105 → 0.1.107
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 +50 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +50 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -593,6 +593,19 @@ function alignSubjectOf(el) {
|
|
|
593
593
|
while (subject.parentElement && !subject.parentElement.hasAttribute("data-ohw-section") && /^inline/.test(getComputedStyle(subject).display)) {
|
|
594
594
|
subject = subject.parentElement;
|
|
595
595
|
}
|
|
596
|
+
const TEXT_ROW = /^(P|LI|H[1-6]|BLOCKQUOTE|FIGCAPTION|DT|DD)$/;
|
|
597
|
+
const parent = subject.parentElement;
|
|
598
|
+
if (parent && TEXT_ROW.test(parent.tagName) && /^(inline-)?flex$/.test(getComputedStyle(parent).display)) {
|
|
599
|
+
return parent;
|
|
600
|
+
}
|
|
601
|
+
if (parent && !parent.hasAttribute("data-ohw-section")) {
|
|
602
|
+
const pcs = getComputedStyle(parent);
|
|
603
|
+
const children = Array.from(parent.children);
|
|
604
|
+
const textRowChild = (c) => c.hasAttribute("data-ohw-editable") || (c.textContent ?? "").trim().length === 0 || c.getAttribute("aria-hidden") === "true";
|
|
605
|
+
if (/^(inline-)?flex$/.test(pcs.display) && pcs.flexDirection.startsWith("row") && children.length > 0 && children.some((c) => c.hasAttribute("data-ohw-editable")) && children.every(textRowChild)) {
|
|
606
|
+
return parent;
|
|
607
|
+
}
|
|
608
|
+
}
|
|
596
609
|
const row = subject.closest("li");
|
|
597
610
|
if (row && row !== subject && /^(inline-)?flex$/.test(getComputedStyle(row).display)) {
|
|
598
611
|
return row;
|
|
@@ -19501,10 +19514,21 @@ function OhhwellsBridge() {
|
|
|
19501
19514
|
gap: 6px;
|
|
19502
19515
|
}
|
|
19503
19516
|
/* Not the form: it is a layout container (flex/grid with gaps), and forcing block
|
|
19504
|
-
crushed its fields together (OHH-490).
|
|
19505
|
-
|
|
19517
|
+
crushed its fields together (OHH-490). Not media (image/bg-image/video/icon/map)
|
|
19518
|
+
either: those can be their own flex containers centering fallback content (a
|
|
19519
|
+
placeholder label, a mascot emoji) \u2014 forcing block broke that centering while the
|
|
19520
|
+
image was unset (OHH-758-ish). */
|
|
19521
|
+
[data-ohw-editable]:not([data-ohw-editable="form"]):not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]):not([data-ohw-editable="icon"]):not([data-ohw-editable="map"]) {
|
|
19506
19522
|
display: block;
|
|
19507
19523
|
}
|
|
19524
|
+
/* The block-force above is an author rule, so it beats the browser's own
|
|
19525
|
+
details-not-open child-display-none UA rule \u2014 origin always wins over specificity.
|
|
19526
|
+
Left alone, a closed FAQ's answer became a real, hoverable box that overflowed past
|
|
19527
|
+
the collapsed <details> into the gap before the next item. Restore the native
|
|
19528
|
+
collapse for editable content once it isn't the summary. */
|
|
19529
|
+
details:not([open]) > [data-ohw-editable]:not(summary) {
|
|
19530
|
+
display: none !important;
|
|
19531
|
+
}
|
|
19508
19532
|
/* Body text (no item-action toolbar) \u2014 first click enters text edit \u2192 I-beam.
|
|
19509
19533
|
Exclude select-first nav/footer labels so grab/default on [data-ohw-href-key] can win. */
|
|
19510
19534
|
[data-ohw-editable]:not([contenteditable]):not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]):not([data-ohw-editable="link"]):not(:is([data-ohw-href-key] *)) {
|
|
@@ -19528,6 +19552,14 @@ function OhhwellsBridge() {
|
|
|
19528
19552
|
[data-ohw-editable="video"], [data-ohw-editable="video"] *,
|
|
19529
19553
|
[data-ohw-editable="bg-image"], [data-ohw-editable="bg-image"] * { cursor: pointer !important; }
|
|
19530
19554
|
[data-ohw-editable="link"], [data-ohw-editable="link"] * { cursor: pointer !important; }
|
|
19555
|
+
/* A text/plain editable nested inside a media editable (e.g. a placeholder's fallback
|
|
19556
|
+
label inside its bg-image box) is its own click target, not the media picker \u2014 the
|
|
19557
|
+
blanket media cursor rule above would otherwise show pointer where a click actually
|
|
19558
|
+
opens text edit. */
|
|
19559
|
+
[data-ohw-editable="bg-image"] [data-ohw-editable="text"],
|
|
19560
|
+
[data-ohw-editable="bg-image"] [data-ohw-editable="text"] *,
|
|
19561
|
+
[data-ohw-editable="image"] [data-ohw-editable="text"],
|
|
19562
|
+
[data-ohw-editable="image"] [data-ohw-editable="text"] * { cursor: text !important; }
|
|
19531
19563
|
/* A form field is a design surface in the editor: its input takes the pointer so the
|
|
19532
19564
|
field can be picked and hovered from anywhere inside it (OHH-642). */
|
|
19533
19565
|
[data-ohw-editable="form"] [data-ohw-form-field] input,
|
|
@@ -20114,6 +20146,8 @@ function OhhwellsBridge() {
|
|
|
20114
20146
|
setFormHoverRect(null);
|
|
20115
20147
|
}
|
|
20116
20148
|
if (!editable) return;
|
|
20149
|
+
const editableRect = editable.getBoundingClientRect();
|
|
20150
|
+
if (editableRect.width <= 0 || editableRect.height <= 0) return;
|
|
20117
20151
|
const selected = selectedElRef.current;
|
|
20118
20152
|
if (selected && (selected === editable || selected.contains(editable))) return;
|
|
20119
20153
|
if (!isMediaEditable(editable) && !editable.hasAttribute("contenteditable")) {
|
|
@@ -22217,6 +22251,18 @@ function OhhwellsBridge() {
|
|
|
22217
22251
|
hoveredNavContainerRef.current = null;
|
|
22218
22252
|
setHoveredNavContainerRect(null);
|
|
22219
22253
|
};
|
|
22254
|
+
const handleDetailsToggle = (e) => {
|
|
22255
|
+
if (e.target?.tagName !== "DETAILS") return;
|
|
22256
|
+
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
22257
|
+
hovered.removeAttribute("data-ohw-hovered");
|
|
22258
|
+
});
|
|
22259
|
+
setHoveredTextRect(null);
|
|
22260
|
+
hoveredItemElRef.current = null;
|
|
22261
|
+
setHoveredItemRect(null);
|
|
22262
|
+
hoveredNavContainerRef.current = null;
|
|
22263
|
+
setHoveredNavContainerRect(null);
|
|
22264
|
+
};
|
|
22265
|
+
document.addEventListener("toggle", handleDetailsToggle, true);
|
|
22220
22266
|
window.addEventListener("resize", handleViewportResize, { passive: true });
|
|
22221
22267
|
document.addEventListener("click", handleClick, true);
|
|
22222
22268
|
document.addEventListener("dblclick", handleDblClick, true);
|
|
@@ -22234,6 +22280,7 @@ function OhhwellsBridge() {
|
|
|
22234
22280
|
document.addEventListener("selectionchange", handleSelectionChange);
|
|
22235
22281
|
window.addEventListener("scroll", handleScroll, true);
|
|
22236
22282
|
return () => {
|
|
22283
|
+
document.removeEventListener("toggle", handleDetailsToggle, true);
|
|
22237
22284
|
document.removeEventListener("click", handleClick, true);
|
|
22238
22285
|
document.removeEventListener("dblclick", handleDblClick, true);
|
|
22239
22286
|
document.removeEventListener("paste", handlePaste, true);
|
|
@@ -22487,7 +22534,7 @@ function OhhwellsBridge() {
|
|
|
22487
22534
|
postToParent2({
|
|
22488
22535
|
type: "ow:ready",
|
|
22489
22536
|
version: "1",
|
|
22490
|
-
bridgeVersion: "0.1.
|
|
22537
|
+
bridgeVersion: "0.1.106",
|
|
22491
22538
|
path: pathname,
|
|
22492
22539
|
nodes: collectEditableNodes(editContentRef.current),
|
|
22493
22540
|
sections
|