project quicknotes
Step 3: Note Editor
System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck
Full Lesson Reference
Add the text editing view.
Where We Are
You have a menu bar app with a popover. Now let's fill it with a note editor.
Add a Text Editor
terminal
Inside the popover, create a simple note-taking interface:
- A TextEditor (multi-line text input) that fills most of the popover
- A small header bar at the top with "QuickNotes" title
- The text should use a clean, readable font
- The editor should be focused when the popover opensMultiple Notes
terminal
Add support for multiple notes:
- A sidebar or list at the top showing note titles
- Tapping a note switches to it in the editor
- An "Add Note" button creates a new blank note
- Use the first line of each note as its title in the listDelete Notes
terminal
Add the ability to delete notes:
- Right-click (context menu) on a note in the list to delete
- Or add a small delete button
- Confirm before deleting
- Always keep at least one noteTest It
- Click the menu bar icon
- Type some notes
- Create a second note
- Switch between them
- Delete one
Checkpoint
By now you should have:
- Text editor works in the popover
- Multiple notes supported
- Can create and delete notes
- First line shows as note title
What You Learned
- SwiftUI TextEditor for multi-line text
- Managing a list of items
- Context menus on macOS
- Focus management in popovers
Exercises
- Run the "Add a Text Editor" prompt and confirm the editor is automatically focused when you open the popover.
- Apply the "Multiple Notes" prompt, create two notes, and verify the first line of each appears as its title in the list.
- Add delete support, then test the confirmation dialog and confirm the app never lets you delete the last remaining note.