mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 10:00:17 +05:30
feat(renderer): Breadcrumb shows heading symbols (settings toggleable)
This commit is contained in:
@@ -1,7 +1,38 @@
|
|||||||
|
import { useFileStore } from '@/stores/file-store';
|
||||||
|
import { useEditorStore } from '@/stores/editor-store';
|
||||||
|
import { useSettingsStore } from '@/stores/settings-store';
|
||||||
|
|
||||||
|
function extractHeadings(content: string): { level: number; text: string }[] {
|
||||||
|
const lines = content.split('\n');
|
||||||
|
const headings: { level: number; text: string }[] = [];
|
||||||
|
for (const line of lines) {
|
||||||
|
const m = line.match(/^(#{1,6})\s+(.+)$/);
|
||||||
|
if (m) headings.push({ level: m[1].length, text: m[2].trim() });
|
||||||
|
}
|
||||||
|
return headings;
|
||||||
|
}
|
||||||
|
|
||||||
export function Breadcrumb() {
|
export function Breadcrumb() {
|
||||||
|
const activeTabId = useFileStore((s) => s.activeTabId);
|
||||||
|
const openTabs = useFileStore((s) => s.openTabs);
|
||||||
|
const buffer = useEditorStore((s) => (activeTabId ? s.buffers.get(activeTabId) : undefined));
|
||||||
|
const showSymbols = useSettingsStore((s) => s.breadcrumbSymbols);
|
||||||
|
|
||||||
|
const tab = activeTabId ? openTabs.find((t) => t.id === activeTabId) : null;
|
||||||
|
const headings = showSymbols && buffer ? extractHeadings(buffer.content).slice(0, 3) : [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav aria-label="File path" className="flex h-7 items-center border-b border-border bg-card/10 px-3 text-xs text-muted-foreground">
|
<nav
|
||||||
<span>No file selected</span>
|
aria-label="File path"
|
||||||
|
className="flex h-7 items-center gap-1 border-b border-border bg-card/10 px-3 text-xs text-muted-foreground"
|
||||||
|
>
|
||||||
|
<span>{tab ? tab.title : 'No file selected'}</span>
|
||||||
|
{headings.map((h, i) => (
|
||||||
|
<span key={i} className="flex items-center gap-1">
|
||||||
|
<span aria-hidden="true">›</span>
|
||||||
|
<span className="truncate">{'#'.repeat(h.level)} {h.text}</span>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import { describe, it, expect, beforeEach } from 'vitest';
|
||||||
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import { Breadcrumb } from '@/components/layout/Breadcrumb';
|
||||||
|
import { useFileStore } from '@/stores/file-store';
|
||||||
|
import { useEditorStore } from '@/stores/editor-store';
|
||||||
|
import { useSettingsStore } from '@/stores/settings-store';
|
||||||
|
|
||||||
|
describe('Breadcrumb', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
localStorage.clear();
|
||||||
|
useSettingsStore.setState({ ...useSettingsStore.getInitialState(), breadcrumbSymbols: true });
|
||||||
|
useFileStore.setState({ activeTabId: '/test.md', openTabs: [{ id: '/test.md', path: '/test.md', title: 'test.md', dirty: false }] } as any);
|
||||||
|
useEditorStore.setState({ buffers: new Map([['/test.md', { id: '/test.md', path: '/test.md', content: '# H1\n## H2', dirty: false }]]) } as any);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows "No file selected" when no tab is active', () => {
|
||||||
|
useFileStore.setState({ activeTabId: null, openTabs: [] } as any);
|
||||||
|
render(<Breadcrumb />);
|
||||||
|
expect(screen.getByText('No file selected')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows tab title when a tab is active', () => {
|
||||||
|
render(<Breadcrumb />);
|
||||||
|
expect(screen.getByText('test.md')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows heading symbols when breadcrumbSymbols is true', () => {
|
||||||
|
render(<Breadcrumb />);
|
||||||
|
expect(screen.getByText('test.md')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText(/# H1/)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('does not show heading symbols when breadcrumbSymbols is false', () => {
|
||||||
|
useSettingsStore.setState({ ...useSettingsStore.getInitialState(), breadcrumbSymbols: false });
|
||||||
|
render(<Breadcrumb />);
|
||||||
|
expect(screen.getByText('test.md')).toBeInTheDocument();
|
||||||
|
expect(screen.queryByText(/# H1/)).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('limits heading symbols to 3', () => {
|
||||||
|
useFileStore.setState({ activeTabId: '/test.md', openTabs: [{ id: '/test.md', path: '/test.md', title: 'test.md', dirty: false }] } as any);
|
||||||
|
useEditorStore.setState({ buffers: new Map([['/test.md', { id: '/test.md', path: '/test.md', content: '# H1\n## H2\n### H3\n#### H4', dirty: false }]]) } as any);
|
||||||
|
render(<Breadcrumb />);
|
||||||
|
// Should show H1, H2, H3 but not H4
|
||||||
|
expect(screen.getByText(/# H1/)).toBeInTheDocument();
|
||||||
|
expect(screen.getByText(/# H2/)).toBeInTheDocument();
|
||||||
|
expect(screen.getByText(/# H3/)).toBeInTheDocument();
|
||||||
|
expect(screen.queryByText(/# H4/)).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user