mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 18:10:18 +05:30
feat(renderer): Minimap (custom overview, wired to settings.minimap)
This commit is contained in:
@@ -9,6 +9,8 @@ import { oneDark } from '@codemirror/theme-one-dark';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { lightTheme, lightHighlight } from './themes/light';
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
import { useSettingsStore } from '@/stores/settings-store';
|
||||
import { Minimap } from './Minimap';
|
||||
|
||||
interface Props {
|
||||
bufferId: string;
|
||||
@@ -24,6 +26,7 @@ export function CodeMirrorEditor({ bufferId, initialContent, onChange, onCursorC
|
||||
const { resolvedTheme } = useTheme();
|
||||
const updateContent = useEditorStore((s) => s.updateContent);
|
||||
const setCursor = useEditorStore((s) => s.setCursor);
|
||||
const minimap = useSettingsStore((s) => s.minimap);
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return;
|
||||
@@ -76,5 +79,10 @@ export function CodeMirrorEditor({ bufferId, initialContent, onChange, onCursorC
|
||||
});
|
||||
}, [resolvedTheme]);
|
||||
|
||||
return <div ref={ref} className="h-full overflow-hidden" />;
|
||||
return (
|
||||
<div className="relative h-full overflow-hidden">
|
||||
<div ref={ref} className="h-full overflow-hidden" />
|
||||
{minimap && <Minimap content={initialContent} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
interface Props {
|
||||
content: string;
|
||||
scrollRatio?: number; // 0-1, where the viewport is
|
||||
visibleRatio?: number; // 0-1, what fraction of content is visible
|
||||
}
|
||||
|
||||
export function Minimap({ content, scrollRatio = 0, visibleRatio = 1 }: Props) {
|
||||
const lines = content.split('\n');
|
||||
// Compute viewport position in the minimap
|
||||
const viewportTop = Math.round(scrollRatio * 100);
|
||||
const viewportHeight = Math.round(visibleRatio * 100);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="minimap"
|
||||
className="pointer-events-none absolute right-0 top-0 h-full w-[100px] overflow-hidden border-l border-border bg-card/30 p-1 font-mono text-[6px] leading-[8px] text-muted-foreground"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<pre className="w-full truncate whitespace-pre">
|
||||
{lines.map((line, i) => (
|
||||
<div key={i} data-testid="minimap-line">
|
||||
{line || ' '}
|
||||
</div>
|
||||
))}
|
||||
</pre>
|
||||
<div
|
||||
data-testid="minimap-viewport"
|
||||
className="pointer-events-none absolute left-0 right-0 bg-brand/15"
|
||||
style={{ top: `${viewportTop}%`, height: `${Math.max(viewportHeight, 5)}%` }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user