(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
actual fix this time
+19
-47
+3
-1
extension/src/components/popup/App.tsx
+3
-1
extension/src/components/popup/App.tsx
···
879
879
{item.target?.title || item.title || 'Untitled'}
880
880
</div>
881
881
<div className="text-xs text-[var(--text-tertiary)] truncate">
882
-
{(item.target?.source || item.source) ? new URL(item.target?.source || item.source!).hostname : ''}
882
+
{item.target?.source || item.source
883
+
? new URL(item.target?.source || item.source!).hostname
884
+
: ''}
883
885
</div>
884
886
</a>
885
887
<button
+16
-46
extension/src/utils/overlay.ts
+16
-46
extension/src/utils/overlay.ts
···
928
928
): Array<{ range: Range; item: Annotation; rect: DOMRect }> {
929
929
const results: Array<{ range: Range; item: Annotation; rect: DOMRect }> = [];
930
930
931
-
let caretRange: Range | null = null;
932
-
try {
933
-
if (typeof (document as any).caretPositionFromPoint === 'function') {
934
-
const pos = (document as any).caretPositionFromPoint(x, y);
935
-
if (pos) {
936
-
caretRange = document.createRange();
937
-
caretRange.setStart(pos.offsetNode, pos.offset);
938
-
caretRange.collapse(true);
939
-
}
940
-
} else if (typeof (document as any).caretRangeFromPoint === 'function') {
941
-
caretRange = (document as any).caretRangeFromPoint(x, y);
942
-
}
943
-
} catch {
944
-
/* ignore */
945
-
}
946
-
931
+
const pad = 6;
947
932
for (const { range, item } of activeItems) {
948
-
let hit = false;
949
-
950
-
if (caretRange) {
951
-
try {
952
-
const afterStart = range.compareBoundaryPoints(Range.START_TO_START, caretRange) <= 0;
953
-
const beforeEnd = range.compareBoundaryPoints(Range.END_TO_START, caretRange) >= 0;
954
-
hit = afterStart && beforeEnd;
955
-
} catch {
956
-
/* ignore */
957
-
}
958
-
}
959
-
960
-
if (!hit) {
961
-
for (const rect of range.getClientRects()) {
962
-
if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
963
-
hit = true;
964
-
break;
933
+
const rects = range.getClientRects();
934
+
for (const rect of rects) {
935
+
if (
936
+
x >= rect.left - pad &&
937
+
x <= rect.right + pad &&
938
+
y >= rect.top - pad &&
939
+
y <= rect.bottom + pad
940
+
) {
941
+
if (!results.some((r) => r.item === item)) {
942
+
results.push({ range, item, rect });
965
943
}
966
-
}
967
-
}
968
-
969
-
if (hit) {
970
-
const firstRect = range.getClientRects()[0];
971
-
if (firstRect && !results.some((r) => r.item === item)) {
972
-
results.push({ range, item, rect: firstRect });
944
+
break;
973
945
}
974
946
}
975
947
}
···
985
957
)
986
958
) {
987
959
document.body.style.cursor = '';
988
-
if (hoverIndicator) hoverIndicator.classList.remove('visible');
960
+
if (hoverIndicator && !popoverEl) hoverIndicator.classList.remove('visible');
989
961
return;
990
962
}
991
963
···
1062
1034
}
1063
1035
} else {
1064
1036
document.body.style.cursor = '';
1065
-
if (hoverIndicator && hoverIndicator.classList.contains('visible')) {
1037
+
if (hoverIndicator && hoverIndicator.classList.contains('visible') && !popoverEl) {
1066
1038
if (hoverIntentTimer) clearTimeout(hoverIntentTimer);
1067
1039
hoverIntentTimer = setTimeout(() => {
1068
1040
hoverIntentTimer = null;
1069
-
if (hoverIndicator) hoverIndicator.classList.remove('visible');
1070
-
}, 80);
1041
+
if (hoverIndicator && !popoverEl) hoverIndicator.classList.remove('visible');
1042
+
}, 120);
1071
1043
}
1072
1044
}
1073
1045
}
···
1117
1089
if (currentIds === newIds) {
1118
1090
popoverEl.remove();
1119
1091
popoverEl = null;
1120
-
if (hoverIndicator) hoverIndicator.classList.remove('visible');
1121
1092
return;
1122
1093
}
1123
1094
}
···
1137
1108
if (popoverEl) {
1138
1109
popoverEl.remove();
1139
1110
popoverEl = null;
1140
-
if (hoverIndicator) hoverIndicator.classList.remove('visible');
1141
1111
}
1142
1112
}
1143
1113
}