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 opens

Multiple 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 list

Delete 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 note

Test It

  1. Click the menu bar icon
  2. Type some notes
  3. Create a second note
  4. Switch between them
  5. 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

  1. Run the "Add a Text Editor" prompt and confirm the editor is automatically focused when you open the popover.
  2. Apply the "Multiple Notes" prompt, create two notes, and verify the first line of each appears as its title in the list.
  3. Add delete support, then test the confirmation dialog and confirm the app never lets you delete the last remaining note.