@adminide-stack/yantra-help-browser 12.0.16-alpha.16 → 12.0.16-alpha.17
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/lib/pages/ArticlePage/ArticlePage.d.ts.map +1 -1
- package/lib/pages/ArticlePage/ArticlePage.js +51 -6
- package/lib/pages/ArticlePage/ArticlePage.js.map +1 -1
- package/lib/pages/ArticlePage/components/TableOfContents.d.ts +1 -0
- package/lib/pages/ArticlePage/components/TableOfContents.d.ts.map +1 -1
- package/lib/pages/ArticlePage/components/TableOfContents.js +25 -3
- package/lib/pages/ArticlePage/components/TableOfContents.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticlePage.d.ts","sourceRoot":"","sources":["../../../src/pages/ArticlePage/ArticlePage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"ArticlePage.d.ts","sourceRoot":"","sources":["../../../src/pages/ArticlePage/ArticlePage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAkP/B,CAAC"}
|
|
@@ -7,6 +7,8 @@ import {jsx,jsxs}from'react/jsx-runtime';import {useState,useRef,useEffect}from'
|
|
|
7
7
|
const [loading, setLoading] = useState(true);
|
|
8
8
|
const [activeHeadingId, setActiveHeadingId] = useState('');
|
|
9
9
|
const observerRef = useRef(null);
|
|
10
|
+
const isScrollingRef = useRef(false);
|
|
11
|
+
const scrollTimeoutRef = useRef(null);
|
|
10
12
|
useEffect(() => {
|
|
11
13
|
if (articleSlug) {
|
|
12
14
|
const loadContent = async () => {
|
|
@@ -26,14 +28,41 @@ import {jsx,jsxs}from'react/jsx-runtime';import {useState,useRef,useEffect}from'
|
|
|
26
28
|
}
|
|
27
29
|
// Create new intersection observer
|
|
28
30
|
observerRef.current = new IntersectionObserver(entries => {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
// Don't update if we're programmatically scrolling
|
|
32
|
+
if (isScrollingRef.current) return;
|
|
33
|
+
// Find the heading that's most visible in the viewport
|
|
34
|
+
const visibleEntries = entries.filter(entry => entry.isIntersecting);
|
|
35
|
+
if (visibleEntries.length === 0) return;
|
|
36
|
+
// Find the heading that's closest to the top of the viewport (within the top 30%)
|
|
37
|
+
// Prioritize headings that are in the upper portion of the viewport
|
|
38
|
+
let bestEntry = visibleEntries[0];
|
|
39
|
+
let bestScore = Infinity;
|
|
40
|
+
visibleEntries.forEach(entry => {
|
|
41
|
+
const rect = entry.boundingClientRect;
|
|
42
|
+
const viewportHeight = window.innerHeight;
|
|
43
|
+
const top30Percent = viewportHeight * 0.3;
|
|
44
|
+
// Calculate a score: lower is better
|
|
45
|
+
// Headings in the top 30% of viewport get priority
|
|
46
|
+
let score;
|
|
47
|
+
if (rect.top >= 0 && rect.top <= top30Percent) {
|
|
48
|
+
// Heading is in the top 30% - prioritize by distance from top
|
|
49
|
+
score = rect.top;
|
|
50
|
+
} else if (rect.top >= 0) {
|
|
51
|
+
// Heading is below top 30% but visible - lower priority
|
|
52
|
+
score = 1000 + rect.top;
|
|
53
|
+
} else {
|
|
54
|
+
// Heading is above viewport - lowest priority unless it's the only one
|
|
55
|
+
score = 2000 + Math.abs(rect.top);
|
|
56
|
+
}
|
|
57
|
+
if (score < bestScore) {
|
|
58
|
+
bestScore = score;
|
|
59
|
+
bestEntry = entry;
|
|
32
60
|
}
|
|
33
61
|
});
|
|
62
|
+
setActiveHeadingId(bestEntry.target.id);
|
|
34
63
|
}, {
|
|
35
|
-
rootMargin: '-
|
|
36
|
-
threshold: 0
|
|
64
|
+
rootMargin: '-10% 0px -70% 0px',
|
|
65
|
+
threshold: [0, 0.1, 0.5, 1]
|
|
37
66
|
});
|
|
38
67
|
// Observe all headings
|
|
39
68
|
article.headings.forEach(heading => {
|
|
@@ -47,6 +76,9 @@ import {jsx,jsxs}from'react/jsx-runtime';import {useState,useRef,useEffect}from'
|
|
|
47
76
|
if (observerRef.current) {
|
|
48
77
|
observerRef.current.disconnect();
|
|
49
78
|
}
|
|
79
|
+
if (scrollTimeoutRef.current) {
|
|
80
|
+
clearTimeout(scrollTimeoutRef.current);
|
|
81
|
+
}
|
|
50
82
|
};
|
|
51
83
|
}, [article]);
|
|
52
84
|
if (loading) {
|
|
@@ -169,7 +201,20 @@ import {jsx,jsxs}from'react/jsx-runtime';import {useState,useRef,useEffect}from'
|
|
|
169
201
|
})]
|
|
170
202
|
}), jsx(TableOfContents, {
|
|
171
203
|
headings: article.headings || [],
|
|
172
|
-
activeHeadingId: activeHeadingId
|
|
204
|
+
activeHeadingId: activeHeadingId,
|
|
205
|
+
onHeadingClick: headingId => {
|
|
206
|
+
// Set scrolling flag to prevent observer from overriding
|
|
207
|
+
isScrollingRef.current = true;
|
|
208
|
+
setActiveHeadingId(headingId);
|
|
209
|
+
// Clear any existing timeout
|
|
210
|
+
if (scrollTimeoutRef.current) {
|
|
211
|
+
clearTimeout(scrollTimeoutRef.current);
|
|
212
|
+
}
|
|
213
|
+
// Re-enable observer after scroll completes (smooth scroll takes ~500ms)
|
|
214
|
+
scrollTimeoutRef.current = setTimeout(() => {
|
|
215
|
+
isScrollingRef.current = false;
|
|
216
|
+
}, 800);
|
|
217
|
+
}
|
|
173
218
|
})]
|
|
174
219
|
})
|
|
175
220
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArticlePage.js","sources":["../../../src/pages/ArticlePage/ArticlePage.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"0fAUO,MAAM,WAAW,GAAa,MAAK;QAChC;IACN,UAAc;IACd;MACM,SAAgB,EAAA;AACtB,EAAA,MAAA,CAAA,mBAAoB,CAAA,GAAoC,QAAM,CAAA,IAAA,CAAA;
|
|
1
|
+
{"version":3,"file":"ArticlePage.js","sources":["../../../src/pages/ArticlePage/ArticlePage.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableOfContents.d.ts","sourceRoot":"","sources":["../../../../src/pages/ArticlePage/components/TableOfContents.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TableOfContents.d.ts","sourceRoot":"","sources":["../../../../src/pages/ArticlePage/components/TableOfContents.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,OAAO;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,oBAAoB;IAC1B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6E1D,CAAC"}
|
|
@@ -1,11 +1,29 @@
|
|
|
1
|
-
import {jsx,jsxs}from'react/jsx-runtime';import {cn}from'../../../utils/index.js';const TableOfContents = ({
|
|
1
|
+
import {jsx,jsxs}from'react/jsx-runtime';import {Link}from'@remix-run/react';import {cn}from'../../../utils/index.js';const TableOfContents = ({
|
|
2
2
|
headings,
|
|
3
3
|
activeHeadingId,
|
|
4
|
+
onHeadingClick,
|
|
4
5
|
className
|
|
5
6
|
}) => {
|
|
6
7
|
if (!headings || headings.length === 0) {
|
|
7
8
|
return null;
|
|
8
9
|
}
|
|
10
|
+
const handleClick = headingId => {
|
|
11
|
+
// Immediately set the active heading when clicked
|
|
12
|
+
if (onHeadingClick) {
|
|
13
|
+
onHeadingClick(headingId);
|
|
14
|
+
}
|
|
15
|
+
// Smooth scroll to the heading with proper offset
|
|
16
|
+
const element = document.getElementById(headingId);
|
|
17
|
+
if (element) {
|
|
18
|
+
// Calculate the position with offset for header
|
|
19
|
+
const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
|
|
20
|
+
const offsetPosition = elementPosition - 100; // 100px offset from top
|
|
21
|
+
window.scrollTo({
|
|
22
|
+
top: offsetPosition,
|
|
23
|
+
behavior: 'smooth'
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
};
|
|
9
27
|
return jsx("aside", {
|
|
10
28
|
className: "hidden xl:block xl:w-80 xl:flex-shrink-0 max-w-[28rem]",
|
|
11
29
|
children: jsxs("div", {
|
|
@@ -23,8 +41,12 @@ import {jsx,jsxs}from'react/jsx-runtime';import {cn}from'../../../utils/index.js
|
|
|
23
41
|
className: "space-y-1 flex-1 overflow-y-auto overflow-x-hidden min-h-0",
|
|
24
42
|
children: headings.map((heading, index) => {
|
|
25
43
|
const isActive = activeHeadingId === heading.id;
|
|
26
|
-
return jsx(
|
|
27
|
-
|
|
44
|
+
return jsx(Link, {
|
|
45
|
+
to: `#${heading.id}`,
|
|
46
|
+
onClick: e => {
|
|
47
|
+
e.preventDefault();
|
|
48
|
+
handleClick(heading.id);
|
|
49
|
+
},
|
|
28
50
|
className: cn('relative block text-sm transition-colors py-1 pl-4', 'border-l-2 border-transparent', isActive ? 'text-primary border-l-primary bg-muted/20' : 'text-muted-foreground hover:text-primary hover:border-l-primary', heading.level === 1 ? 'font-semibold' : heading.level === 2 ? 'ml-2' : heading.level === 3 ? 'ml-4' : heading.level === 4 ? 'ml-6' : heading.level === 5 ? 'ml-8' : 'ml-10'),
|
|
29
51
|
children: heading.text
|
|
30
52
|
}, index);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableOfContents.js","sources":["../../../../src/pages/ArticlePage/components/TableOfContents.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"TableOfContents.js","sources":["../../../../src/pages/ArticlePage/components/TableOfContents.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"sHAiBO,MAAM,eAAe,GAAmC,CAAC;;AAOxD,EAAA;gBACH;AAED,EAAA;;eAEQ,IAAA,SAAgB,MAAC,KAAA,CAAA,EAAA;eACH;;QAGlB,WAAkD,GAAA,SAAA,IAAA;;QAElD,cAAc,EAAA;oBACsC,CAAA,SAAA,CAAA;AAChD;AACA;iBAEM,WAAU,CAAA,cAAA,CAAA,SAAA,CAAA;AACZ,IAAA,IAAA,OAAA,EAAA;AACA;AACH,MAAA,MAAA,eAAE,GAAA,OAAA,CAAA,qBAAA,EAAA,CAAA,GAAA,GAAA,MAAA,CAAA,WAAA;YACN,cAAA,GAAA,eAAA,GAAA,GAAA,CAAA;AACL,MAAE,MAAA,CAAA,QAAA,CAAA;AAEF,QAAA,GAAO,EACI,cAAA;AAUS,QAAA,QAAA,EAAA;AACA,OAAA,CAAA;;AAMY,GAAA;;AAMI,IAAA,SAAA,EAAA,wDAA6C;AAC7C,IAAA,QAAA,EAAAA,IAAA,CAAA,KAAA,EAAA;AAEA,MAAA,SAAA,EAAA,oDAAiB;AACjB,MAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA;AACE,QAAA,SAAA,EAAA,oBAAQ;AACR,QAAA,QAAA,EAAAD,IAAA,CAAA,IAAA,EAAA;AACE,UAAA,SAAA,EAAA,sDAAQ;AACR,UAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,MAAA,EAAA;AACE,YAAA,SAAA,EAAA,MAAA;AACA,YAAA,QAAA,EAAA;AACE,WAAA,CAAA,EAAA,cAAA;;AAO5B,OAAA,CAAA,EAAAA,GAAA,CAAA,KAAA,EAAE;AAKtB,QAAE,SAAA,EAAA,4DAAA;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adminide-stack/yantra-help-browser",
|
|
3
|
-
"version": "12.0.16-alpha.
|
|
3
|
+
"version": "12.0.16-alpha.17",
|
|
4
4
|
"description": "Sample core for higher packages to depend on",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "Yantra App",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"typescript": {
|
|
71
71
|
"definition": "lib/index.d.ts"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "ecc45b56ea30530f3c469f6a13adcfe00ee485f6"
|
|
74
74
|
}
|