fix(app): fix Notes editor formatting and title issues (#93)

Author: Antonio Maiolo

.changeset/fix-notes-editor.md

@@ -0,0 +1,10 @@
+---
+"think-app": patch
+---
+
+Fix Notes editor formatting and title wrapping issues
+
+- Fix bullet list, numbered list, and blockquote buttons not working (CSS was being purged by Tailwind)
+- Fix H2/H3 heading differentiation (H3 now visually distinct with smaller size and lighter weight)
+- Fix title horizontal scrolling (changed to auto-resizing textarea)
+- Fix Enter key in title to move focus to editor content

app/src/components/editor/NoteEditor.tsx

@@ -60,7 +60,7 @@ export function NoteEditor({
   const [showCloseWarning, setShowCloseWarning] = useState(false);
 
   // Ref for focus
-  const titleInputRef = useRef<HTMLInputElement>(null);
+  const titleInputRef = useRef<HTMLTextAreaElement>(null);
   // Track initial content for regeneration check on close
   const initialContentRef = useRef("");
 
@@ -135,6 +135,15 @@ export function NoteEditor({
     };
   }, [isOpen]);
 
+  // Auto-resize title textarea when title changes or editor opens
+  useEffect(() => {
+    if (titleInputRef.current && isOpen) {
+      const textarea = titleInputRef.current;
+      textarea.style.height = 'auto';
+      textarea.style.height = textarea.scrollHeight + 'px';
+    }
+  }, [title, isOpen]);
+
   // Handle save - triggers regeneration on successful save
   const handleSave = useCallback(async () => {
     const finalId = await save();
@@ -225,13 +234,24 @@ export function NoteEditor({
       <div className="flex-1 overflow-y-auto">
         <div className={editorTokens.content}>
           {/* Title */}
-          <input
+          <textarea
             ref={titleInputRef}
-            type="text"
             placeholder="Untitled"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
-            className={cn(editorTokens.title, "mb-6")}
+            rows={1}
+            className={cn(editorTokens.title, "mb-6 resize-none overflow-hidden")}
+            onInput={(e) => {
+              const target = e.target as HTMLTextAreaElement;
+              target.style.height = 'auto';
+              target.style.height = target.scrollHeight + 'px';
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                editor?.chain().focus().run();
+              }
+            }}
           />
 
           {/* Editor */}

app/src/index.css

@@ -185,81 +185,91 @@
   .chat-prose blockquote {
     @apply border-l-2 border-primary/50 pl-3 italic my-2;
   }
+}
 
-  /* TipTap Editor prose styling */
-  .ProseMirror {
-    line-height: 1.7;
-    letter-spacing: -0.01em;
-  }
-  .ProseMirror > * + * {
-    margin-top: 0.75em;
-  }
-  .ProseMirror p {
-    margin: 0.5em 0;
-  }
-  .ProseMirror h1 {
-    font-family: 'Goudy Bookletter 1911', Georgia, serif;
-    font-size: 1.875rem;
-    font-weight: 600;
-    margin: 1.5rem 0 0.75rem;
-    line-height: 1.3;
-  }
-  .ProseMirror h2 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin: 1.25rem 0 0.5rem;
-    line-height: 1.35;
-  }
-  .ProseMirror h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin: 1rem 0 0.5rem;
-    line-height: 1.4;
-  }
-  .ProseMirror ul {
-    list-style-type: disc;
-    padding-left: 1.5em;
-    margin: 0.5em 0;
-  }
-  .ProseMirror ol {
-    list-style-type: decimal;
-    padding-left: 1.5em;
-    margin: 0.5em 0;
-  }
-  .ProseMirror li {
-    margin: 0.25em 0;
-  }
-  .ProseMirror li > p {
-    margin: 0;
-  }
-  .ProseMirror blockquote {
-    border-left: 3px solid hsl(var(--primary));
-    padding-left: 1rem;
-    margin: 1rem 0;
-    color: hsl(var(--muted-foreground));
-    font-style: italic;
-  }
-  .ProseMirror code {
-    @apply bg-black/10 dark:bg-white/10 px-1.5 py-0.5 rounded text-[0.9em];
-    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
-  }
-  .ProseMirror pre {
-    @apply bg-black/10 dark:bg-white/10 p-3 rounded-lg overflow-x-auto my-2;
-  }
-  .ProseMirror pre code {
-    @apply bg-transparent p-0;
-    font-size: 0.875rem;
-    line-height: 1.6;
-  }
-  .ProseMirror a {
-    @apply text-primary underline;
-  }
-  .ProseMirror strong {
-    font-weight: 600;
-  }
-  .ProseMirror hr {
-    border: none;
-    border-top: 1px solid hsl(var(--border));
-    margin: 1.5rem 0;
-  }
+/* TipTap Editor prose styling - OUTSIDE @layer to prevent Tailwind purging */
+.ProseMirror {
+  line-height: 1.7;
+  letter-spacing: -0.01em;
+}
+.ProseMirror > * + * {
+  margin-top: 0.75em;
+}
+.ProseMirror p {
+  margin: 0.5em 0;
+}
+.ProseMirror h1 {
+  font-family: 'Goudy Bookletter 1911', Georgia, serif;
+  font-size: 1.875rem;
+  font-weight: 600;
+  margin: 1.5rem 0 0.75rem;
+  line-height: 1.3;
+}
+.ProseMirror h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 1.25rem 0 0.5rem;
+  line-height: 1.35;
+}
+.ProseMirror h3 {
+  font-size: 1.125rem !important;
+  font-weight: 500 !important;
+  margin: 1rem 0 0.5rem;
+  line-height: 1.4;
+}
+.ProseMirror ul {
+  list-style-type: disc !important;
+  padding-left: 1.5em !important;
+  margin: 0.5em 0;
+}
+.ProseMirror ol {
+  list-style-type: decimal !important;
+  padding-left: 1.5em !important;
+  margin: 0.5em 0;
+}
+.ProseMirror li {
+  margin: 0.25em 0;
+  display: list-item !important;
+}
+.ProseMirror li > p {
+  margin: 0;
+}
+.ProseMirror blockquote {
+  border-left: 3px solid hsl(var(--primary));
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: hsl(var(--muted-foreground));
+  font-style: italic;
+}
+.ProseMirror code {
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.9em;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+}
+.ProseMirror pre {
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 0.5rem 0;
+}
+.ProseMirror pre code {
+  background-color: transparent;
+  padding: 0;
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+.ProseMirror a {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+}
+.ProseMirror strong {
+  font-weight: 600;
+}
+.ProseMirror hr {
+  border: none;
+  border-top: 1px solid hsl(var(--border));
+  margin: 1.5rem 0;
 }