changes

src/components/EditorView.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { Editor as TiptapEditor } from "@tiptap/react";
 import { Sidebar } from "./Sidebar";
 import { Dock } from "./Dock";
@@ -258,15 +258,13 @@ export function EditorView() {
               <article className="sheet">
                 <header className="chapter-opener">
                   <div className="chapter-num">{eyebrow}</div>
-                  <input
-                    className="chapter-title-input"
+                  <ChapterTitleInput
                     value={chapter.noTitle ? "" : chapter.title}
                     placeholder={
                       chapter.noTitle ? "No title" : kind === "body" ? "Chapter title" : kind === "part" ? "Part title (optional)" : "Page title"
                     }
-                    spellCheck={false}
-                    disabled={chapter.noTitle}
-                    onChange={(e) => setChapterTitle(chapter.id, e.target.value)}
+                    disabled={!!chapter.noTitle}
+                    onChange={(value) => setChapterTitle(chapter.id, value)}
                   />
                   {(chapter.noTitle || !chapter.title.trim()) && (
                     <label className="no-title-check">
@@ -336,3 +334,38 @@ export function EditorView() {
     </div>
   );
 }
+
+function ChapterTitleInput({
+  value,
+  placeholder,
+  disabled,
+  onChange,
+}: {
+  value: string;
+  placeholder: string;
+  disabled: boolean;
+  onChange: (value: string) => void;
+}) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value, disabled]);
+
+  return (
+    <textarea
+      ref={ref}
+      className="chapter-title-input"
+      rows={1}
+      value={value}
+      placeholder={placeholder}
+      spellCheck={false}
+      disabled={disabled}
+      onKeyDown={(e) => e.key === "Enter" && e.preventDefault()}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+}

src/styles/app.css

@@ -654,6 +654,7 @@ body.resizing {
 }
 
 .chapter-title-input {
+  display: block;
   width: 100%;
   margin: 15px 0 0;
   padding: 0;
@@ -666,6 +667,9 @@ body.resizing {
   line-height: 1.16;
   letter-spacing: -0.01em;
   color: var(--ink);
+  resize: none;
+  overflow: hidden;
+  overflow-wrap: break-word;
 }
 
 .chapter-title-input:focus {