75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
import { useRef, useEffect } from 'react';
|
|
import Markdown from 'react-markdown';
|
|
import remarkGfm from 'remark-gfm';
|
|
import { components } from './MarkdownComponents';
|
|
import helpContent from '../../../../HELP.md?raw';
|
|
|
|
const tocItems = [
|
|
{ id: 'overview', label: '1. Overview' },
|
|
{ id: 'navigation', label: '2. Navigation' },
|
|
{ id: 'main-sections', label: '3. Main Sections' },
|
|
{ id: 'keyboard-shortcuts', label: '4. Keyboard Shortcuts' },
|
|
{ id: 'display-modes', label: '5. Display Modes' },
|
|
];
|
|
|
|
export function HelpView() {
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
|
|
const scrollToSection = (id: string) => {
|
|
const element = document.getElementById(id);
|
|
const panel = document.getElementById("details-panel");
|
|
if (element && panel) {
|
|
panel.scrollTo({
|
|
top: element.offsetTop - panel.offsetTop - 16,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
const panel = document.getElementById("details-panel");
|
|
if (!panel) return;
|
|
|
|
if (e.key === 'PageUp' || e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
panel.scrollTop -= Math.max(200, panel.clientHeight);
|
|
} else if (e.key === 'PageDown' || e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
panel.scrollTop += Math.max(200, panel.clientHeight);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, []);
|
|
|
|
const contentWithoutToc = helpContent.replace(/^# Table of Contents[\s\S]*?^---$/m, '');
|
|
|
|
return (
|
|
<div className="h-full overflow-y-auto">
|
|
<div className="grid grid-cols-1 lg:grid-cols-[1fr_3fr] gap-4">
|
|
<div className="bg-gray-900 border border-gray-700 rounded-lg p-4 sticky top-0">
|
|
<h2 className="text-xl font-bold text-white mb-4">Table of Contents</h2>
|
|
<nav className="space-y-2">
|
|
{tocItems.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => scrollToSection(item.id)}
|
|
className="block text-blue-400 hover:underline text-left w-full"
|
|
>
|
|
{item.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
<div id="details-panel" ref={contentRef} className="bg-gray-900 border border-gray-700 rounded-lg p-4 overflow-y-auto max-h-[calc(100vh-200px)]">
|
|
<div className="prose prose-invert max-w-none prose-sm prose-table:border-collapse prose-th:border prose-td:border prose-th:border-gray-600 prose-td:border-gray-600 prose-th:p-2 prose-td:p-2 prose-thead:bg-gray-800 prose-tr:hover:bg-gray-800">
|
|
<Markdown remarkPlugins={[remarkGfm]} components={components}>{contentWithoutToc}</Markdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|