feat: expose all theme.json properties in theme editor
Add ThemePropertyEditor component that surfaces all customizable properties from theme.json — typography, headings, lists, code blocks, blockquote, table, and horizontal rule — organized into collapsible sections with appropriate input types (number, color, select, text). - themeSchema.ts: derives flat property list from theme.json with auto-detected input types, units, and select options - ThemePropertyEditor.tsx: sectioned editor with collapsible sections, keyboard-accessible toggles, debounced live updates - ThemeManager: add updateThemeProperty() and activeThemeContent - SettingsPanel: show property editor below theme list when active Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
@@ -1,6 +1,7 @@
|
||||
import { useState, useRef, useCallback, useEffect } from 'react'
|
||||
import { X, Eye, EyeSlash, GithubLogo, SignOut, Check, Plus } from '@phosphor-icons/react'
|
||||
import { GitHubDeviceFlow } from './GitHubDeviceFlow'
|
||||
import { ThemePropertyEditor } from './ThemePropertyEditor'
|
||||
import type { Settings, ThemeFile } from '../types'
|
||||
import type { ThemeManager } from '../hooks/useThemeManager'
|
||||
|
||||
@@ -356,6 +357,13 @@ function AppearanceSection({ themeManager }: { themeManager: ThemeManager }) {
|
||||
<Plus size={14} />
|
||||
New Theme
|
||||
</button>
|
||||
|
||||
{activeThemeId && (
|
||||
<>
|
||||
<div style={{ height: 1, background: 'var(--border)', margin: '4px 0' }} />
|
||||
<ThemePropertyEditor themeManager={themeManager} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
133
src/components/ThemePropertyEditor.test.tsx
Normal file
133
src/components/ThemePropertyEditor.test.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { render, screen, fireEvent, act } from '@testing-library/react'
|
||||
import { ThemePropertyEditor } from './ThemePropertyEditor'
|
||||
import type { ThemeManager } from '../hooks/useThemeManager'
|
||||
|
||||
function makeThemeManager(overrides: Partial<ThemeManager> = {}): ThemeManager {
|
||||
return {
|
||||
themes: [],
|
||||
activeThemeId: '/vault/_themes/My Theme.md',
|
||||
activeTheme: { id: '/vault/_themes/My Theme.md', name: 'My Theme', description: '', colors: {}, typography: {}, spacing: {} },
|
||||
activeThemeContent: '---\nIs A: Theme\nName: My Theme\neditor-font-size: 18px\nlists-bullet-color: "#ff0000"\n---\n',
|
||||
isDark: false,
|
||||
switchTheme: vi.fn(),
|
||||
createTheme: vi.fn().mockResolvedValue(''),
|
||||
reloadThemes: vi.fn(),
|
||||
updateThemeProperty: vi.fn(),
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
describe('ThemePropertyEditor', () => {
|
||||
it('shows message when no theme is active', () => {
|
||||
const tm = makeThemeManager({ activeThemeId: null })
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
expect(screen.getByText(/Select a theme/)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders the editor when a theme is active', () => {
|
||||
const tm = makeThemeManager()
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
expect(screen.getByTestId('theme-property-editor')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows section headers for all theme.json sections', () => {
|
||||
const tm = makeThemeManager()
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
expect(screen.getByText('Typography')).toBeInTheDocument()
|
||||
expect(screen.getByText('Headings')).toBeInTheDocument()
|
||||
expect(screen.getByText('Lists')).toBeInTheDocument()
|
||||
expect(screen.getByText('Code Blocks')).toBeInTheDocument()
|
||||
expect(screen.getByText('Blockquote')).toBeInTheDocument()
|
||||
expect(screen.getByText('Table')).toBeInTheDocument()
|
||||
expect(screen.getByText('Horizontal Rule')).toBeInTheDocument()
|
||||
expect(screen.getByText('Colors')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows active theme name', () => {
|
||||
const tm = makeThemeManager()
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
expect(screen.getByText('My Theme')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('expands Typography section by default', () => {
|
||||
const tm = makeThemeManager()
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
// Typography section should be expanded, showing its properties
|
||||
expect(screen.getByTestId('theme-input-editor-font-size')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows current theme value for overridden properties', () => {
|
||||
const tm = makeThemeManager()
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
const fontSizeInput = screen.getByTestId('theme-input-editor-font-size') as HTMLInputElement
|
||||
expect(fontSizeInput.value).toBe('18')
|
||||
})
|
||||
|
||||
it('shows default value for non-overridden properties', () => {
|
||||
const tm = makeThemeManager()
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
// editor-max-width is not in the theme content, so it should show the default (720)
|
||||
const maxWidthInput = screen.getByTestId('theme-input-editor-max-width') as HTMLInputElement
|
||||
expect(maxWidthInput.value).toBe('720')
|
||||
})
|
||||
|
||||
it('calls updateThemeProperty on number input change', async () => {
|
||||
vi.useFakeTimers()
|
||||
const updateFn = vi.fn()
|
||||
const tm = makeThemeManager({ updateThemeProperty: updateFn })
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
const fontSizeInput = screen.getByTestId('theme-input-editor-font-size') as HTMLInputElement
|
||||
fireEvent.change(fontSizeInput, { target: { value: '16' } })
|
||||
|
||||
// Debounce fires after 300ms
|
||||
act(() => { vi.advanceTimersByTime(300) })
|
||||
expect(updateFn).toHaveBeenCalledWith('editor-font-size', '16px')
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('expands collapsed sections on click', () => {
|
||||
const tm = makeThemeManager()
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
// Lists section should be collapsed by default
|
||||
expect(screen.queryByTestId('theme-input-lists-bullet-size')).not.toBeInTheDocument()
|
||||
|
||||
// Click to expand
|
||||
fireEvent.click(screen.getByTestId('theme-section-lists-toggle'))
|
||||
expect(screen.getByTestId('theme-input-lists-bullet-size')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('toggles section via keyboard Enter', () => {
|
||||
const tm = makeThemeManager()
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
const toggle = screen.getByTestId('theme-section-lists-toggle')
|
||||
fireEvent.keyDown(toggle, { key: 'Enter' })
|
||||
expect(screen.getByTestId('theme-input-lists-bullet-size')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('toggles section via keyboard Space', () => {
|
||||
const tm = makeThemeManager()
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
const toggle = screen.getByTestId('theme-section-lists-toggle')
|
||||
fireEvent.keyDown(toggle, { key: ' ' })
|
||||
expect(screen.getByTestId('theme-input-lists-bullet-size')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows heading subsections after expanding Headings', () => {
|
||||
const tm = makeThemeManager()
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
fireEvent.click(screen.getByTestId('theme-section-headings-toggle'))
|
||||
expect(screen.getByText('Heading 1')).toBeInTheDocument()
|
||||
expect(screen.getByText('Heading 2')).toBeInTheDocument()
|
||||
expect(screen.getByText('Heading 3')).toBeInTheDocument()
|
||||
expect(screen.getByText('Heading 4')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows unit label for numeric properties', () => {
|
||||
const tm = makeThemeManager()
|
||||
render(<ThemePropertyEditor themeManager={tm} />)
|
||||
// "px" should appear near Font Size input
|
||||
const container = screen.getByTestId('theme-input-editor-font-size').parentElement!
|
||||
expect(container.textContent).toContain('px')
|
||||
})
|
||||
})
|
||||
321
src/components/ThemePropertyEditor.tsx
Normal file
321
src/components/ThemePropertyEditor.tsx
Normal file
@@ -0,0 +1,321 @@
|
||||
import { useState, useCallback, useMemo, useRef } from 'react'
|
||||
import { CaretRight } from '@phosphor-icons/react'
|
||||
import { ColorSwatch } from './ColorInput'
|
||||
import { getThemeSchema, formatValueForFrontmatter, parseValueFromFrontmatter } from '../utils/themeSchema'
|
||||
import type { ThemeProperty, ThemeSection, ThemeSubsection } from '../utils/themeSchema'
|
||||
import type { ThemeManager } from '../hooks/useThemeManager'
|
||||
import { parseFrontmatter } from '../utils/frontmatter'
|
||||
import { isValidCssColor } from '../utils/colorUtils'
|
||||
|
||||
/** Extract current theme property values from frontmatter content. */
|
||||
function useThemeValues(content: string | undefined): Record<string, string> {
|
||||
return useMemo(() => {
|
||||
if (!content) return {}
|
||||
const fm = parseFrontmatter(content)
|
||||
const result: Record<string, string> = {}
|
||||
for (const [key, value] of Object.entries(fm)) {
|
||||
if (typeof value === 'string') result[key] = value
|
||||
else if (typeof value === 'number') result[key] = String(value)
|
||||
else if (typeof value === 'boolean') result[key] = String(value)
|
||||
}
|
||||
return result
|
||||
}, [content])
|
||||
}
|
||||
|
||||
// --- Individual input components ---
|
||||
|
||||
function NumberInput({ property, value, onChange }: {
|
||||
property: ThemeProperty
|
||||
value: string | number
|
||||
onChange: (val: string) => void
|
||||
}) {
|
||||
const numericValue = typeof value === 'number' ? value : parseFloat(String(value)) || 0
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout>>()
|
||||
|
||||
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const raw = e.target.value
|
||||
if (raw === '' || raw === '-') return
|
||||
const num = parseFloat(raw)
|
||||
if (isNaN(num)) return
|
||||
if (property.min !== undefined && num < property.min) return
|
||||
clearTimeout(debounceRef.current)
|
||||
debounceRef.current = setTimeout(() => {
|
||||
onChange(formatValueForFrontmatter(num, property))
|
||||
}, 300)
|
||||
}, [onChange, property])
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<input
|
||||
type="number"
|
||||
defaultValue={numericValue}
|
||||
onChange={handleChange}
|
||||
min={property.min}
|
||||
step={property.unit ? 1 : 0.1}
|
||||
className="w-20 rounded border border-border bg-transparent px-2 py-1 text-xs text-foreground outline-none focus:border-primary"
|
||||
data-testid={`theme-input-${property.cssVar}`}
|
||||
/>
|
||||
{property.unit && (
|
||||
<span className="text-[11px] text-muted-foreground">{property.unit}</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ColorInput({ property, value, onChange }: {
|
||||
property: ThemeProperty
|
||||
value: string
|
||||
onChange: (val: string) => void
|
||||
}) {
|
||||
const [localValue, setLocalValue] = useState(value)
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout>>()
|
||||
const showSwatch = isValidCssColor(localValue)
|
||||
|
||||
const handleTextChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newVal = e.target.value
|
||||
setLocalValue(newVal)
|
||||
clearTimeout(debounceRef.current)
|
||||
debounceRef.current = setTimeout(() => onChange(newVal), 300)
|
||||
}, [onChange])
|
||||
|
||||
const handlePickerChange = useCallback((hex: string) => {
|
||||
setLocalValue(hex)
|
||||
onChange(hex)
|
||||
}, [onChange])
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
{showSwatch && <ColorSwatch color={localValue} onChange={handlePickerChange} />}
|
||||
<input
|
||||
type="text"
|
||||
value={localValue}
|
||||
onChange={handleTextChange}
|
||||
className="w-28 rounded border border-border bg-transparent px-2 py-1 text-xs text-foreground outline-none focus:border-primary"
|
||||
data-testid={`theme-input-${property.cssVar}`}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectInput({ property, value, onChange }: {
|
||||
property: ThemeProperty
|
||||
value: string
|
||||
onChange: (val: string) => void
|
||||
}) {
|
||||
return (
|
||||
<select
|
||||
value={value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
className="w-28 rounded border border-border bg-transparent px-2 py-1 text-xs text-foreground outline-none focus:border-primary"
|
||||
data-testid={`theme-input-${property.cssVar}`}
|
||||
>
|
||||
{property.options?.map(opt => (
|
||||
<option key={opt} value={opt}>{opt}</option>
|
||||
))}
|
||||
</select>
|
||||
)
|
||||
}
|
||||
|
||||
function TextInput({ property, value, onChange }: {
|
||||
property: ThemeProperty
|
||||
value: string
|
||||
onChange: (val: string) => void
|
||||
}) {
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout>>()
|
||||
|
||||
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newVal = e.target.value
|
||||
clearTimeout(debounceRef.current)
|
||||
debounceRef.current = setTimeout(() => onChange(newVal), 500)
|
||||
}, [onChange])
|
||||
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={value}
|
||||
onChange={handleChange}
|
||||
className="w-40 rounded border border-border bg-transparent px-2 py-1 text-xs text-foreground outline-none focus:border-primary"
|
||||
data-testid={`theme-input-${property.cssVar}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Property row ---
|
||||
|
||||
function PropertyRow({ property, currentValue, onUpdate }: {
|
||||
property: ThemeProperty
|
||||
currentValue: string | undefined
|
||||
onUpdate: (cssVar: string, value: string) => void
|
||||
}) {
|
||||
const displayValue = currentValue !== undefined
|
||||
? parseValueFromFrontmatter(currentValue, property)
|
||||
: property.defaultValue
|
||||
const isPlaceholder = currentValue === undefined
|
||||
|
||||
const handleChange = useCallback((val: string) => {
|
||||
onUpdate(property.cssVar, val)
|
||||
}, [property.cssVar, onUpdate])
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-between gap-2 py-1"
|
||||
style={{ minHeight: 28 }}
|
||||
>
|
||||
<label
|
||||
className="text-xs shrink-0"
|
||||
style={{ color: isPlaceholder ? 'var(--muted-foreground)' : 'var(--foreground)', minWidth: 100 }}
|
||||
>
|
||||
{property.label}
|
||||
</label>
|
||||
<div className="flex-shrink-0">
|
||||
{property.inputType === 'number' && (
|
||||
<NumberInput property={property} value={displayValue} onChange={handleChange} />
|
||||
)}
|
||||
{property.inputType === 'color' && (
|
||||
<ColorInput property={property} value={String(displayValue)} onChange={handleChange} />
|
||||
)}
|
||||
{property.inputType === 'select' && (
|
||||
<SelectInput property={property} value={String(displayValue)} onChange={handleChange} />
|
||||
)}
|
||||
{property.inputType === 'text' && (
|
||||
<TextInput property={property} value={String(displayValue)} onChange={handleChange} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Collapsible section ---
|
||||
|
||||
function CollapsibleSection({ label, defaultOpen, children, testId }: {
|
||||
label: string
|
||||
defaultOpen?: boolean
|
||||
children: React.ReactNode
|
||||
testId?: string
|
||||
}) {
|
||||
const [open, setOpen] = useState(defaultOpen ?? false)
|
||||
|
||||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
setOpen(prev => !prev)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div data-testid={testId}>
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center gap-1 border-none bg-transparent p-0 cursor-pointer"
|
||||
style={{ fontSize: 12, fontWeight: 600, color: 'var(--foreground)', padding: '4px 0' }}
|
||||
onClick={() => setOpen(prev => !prev)}
|
||||
onKeyDown={handleKeyDown}
|
||||
aria-expanded={open}
|
||||
data-testid={testId ? `${testId}-toggle` : undefined}
|
||||
>
|
||||
<CaretRight
|
||||
size={12}
|
||||
weight="bold"
|
||||
style={{ transform: open ? 'rotate(90deg)' : 'none', transition: 'transform 0.15s' }}
|
||||
/>
|
||||
{label}
|
||||
</button>
|
||||
{open && (
|
||||
<div style={{ paddingLeft: 16 }}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Section renderers ---
|
||||
|
||||
function SubsectionBlock({ subsection, currentValues, onUpdate }: {
|
||||
subsection: ThemeSubsection
|
||||
currentValues: Record<string, string>
|
||||
onUpdate: (cssVar: string, value: string) => void
|
||||
}) {
|
||||
return (
|
||||
<CollapsibleSection label={subsection.label} testId={`theme-sub-${subsection.id}`}>
|
||||
{subsection.properties.map(prop => (
|
||||
<PropertyRow
|
||||
key={prop.cssVar}
|
||||
property={prop}
|
||||
currentValue={currentValues[prop.cssVar]}
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
))}
|
||||
</CollapsibleSection>
|
||||
)
|
||||
}
|
||||
|
||||
function SectionBlock({ section, currentValues, onUpdate }: {
|
||||
section: ThemeSection
|
||||
currentValues: Record<string, string>
|
||||
onUpdate: (cssVar: string, value: string) => void
|
||||
}) {
|
||||
return (
|
||||
<CollapsibleSection
|
||||
label={section.label}
|
||||
defaultOpen={section.id === 'editor'}
|
||||
testId={`theme-section-${section.id}`}
|
||||
>
|
||||
{section.properties.map(prop => (
|
||||
<PropertyRow
|
||||
key={prop.cssVar}
|
||||
property={prop}
|
||||
currentValue={currentValues[prop.cssVar]}
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
))}
|
||||
{section.subsections.map(sub => (
|
||||
<SubsectionBlock
|
||||
key={sub.id}
|
||||
subsection={sub}
|
||||
currentValues={currentValues}
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
))}
|
||||
</CollapsibleSection>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Main component ---
|
||||
|
||||
export function ThemePropertyEditor({ themeManager }: { themeManager: ThemeManager }) {
|
||||
const schema = useMemo(() => getThemeSchema(), [])
|
||||
const currentValues = useThemeValues(themeManager.activeThemeContent)
|
||||
|
||||
const handleUpdate = useCallback((cssVar: string, value: string) => {
|
||||
themeManager.updateThemeProperty(cssVar, value)
|
||||
}, [themeManager])
|
||||
|
||||
if (!themeManager.activeThemeId) {
|
||||
return (
|
||||
<div className="text-xs text-muted-foreground" style={{ padding: '8px 0' }}>
|
||||
Select a theme to customize its properties.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col gap-1"
|
||||
data-testid="theme-property-editor"
|
||||
style={{ fontSize: 12 }}
|
||||
>
|
||||
<div style={{ fontSize: 11, color: 'var(--muted-foreground)', marginBottom: 4 }}>
|
||||
Editing: <strong>{themeManager.activeTheme?.name ?? 'Theme'}</strong>
|
||||
</div>
|
||||
{schema.map(section => (
|
||||
<SectionBlock
|
||||
key={section.id}
|
||||
section={section}
|
||||
currentValues={currentValues}
|
||||
onUpdate={handleUpdate}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user