diff --git a/src/components/Editor.css b/src/components/Editor.css index 32404fcb..544f9ab9 100644 --- a/src/components/Editor.css +++ b/src/components/Editor.css @@ -333,6 +333,9 @@ letter-spacing: var(--headings-h1-letter-spacing, -0.015em); color: var(--foreground); padding: 0; + resize: none; + overflow: hidden; + font-family: inherit; } .title-field__input::placeholder { diff --git a/src/components/TitleField.tsx b/src/components/TitleField.tsx index 6b500446..83c97780 100644 --- a/src/components/TitleField.tsx +++ b/src/components/TitleField.tsx @@ -62,11 +62,21 @@ function useOptimisticTitle(title: string, onTitleChange: (t: string) => void) { * Displays the title as an editable field and shows the resulting filename below. */ export function TitleField({ title, filename, editable = true, notePath, vaultPath, onTitleChange }: TitleFieldProps) { - const inputRef = useRef(null) + const inputRef = useRef(null) const [isFocused, setIsFocused] = useState(false) const { value, isEditing, handleFocus, commitTitle, revert, setEdit } = useOptimisticTitle(title, onTitleChange) + // Auto-resize textarea to fit content + const autoResize = useCallback(() => { + const el = inputRef.current + if (!el) return + el.style.height = 'auto' + el.style.height = el.scrollHeight + 'px' + }, []) + + useEffect(() => { autoResize() }, [value, autoResize]) + useEffect(() => { const handler = (e: Event) => { const detail = (e as CustomEvent).detail @@ -106,11 +116,12 @@ export function TitleField({ title, filename, editable = true, notePath, vaultPa return (
- setEdit(e.target.value)} + rows={1} + onChange={e => { setEdit(e.target.value); autoResize() }} onFocus={() => { setIsFocused(true); handleFocus() }} onBlur={() => { setIsFocused(false); commitTitle() }} onKeyDown={handleKeyDown}