3 min read
Step 3: Note Editor
Build the editor with rich text formatting.
Where We Are
You have a menu bar app with a popover. Now let’s fill it with a real note editor — not just a plain text box, but something that supports formatting.
Add a Text Editor
Inside the popover, create a 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 opensAdd Rich Text Formatting
This is what makes QuickNotes more than a scratch pad. Notes should support basic formatting so they’re actually useful.
Add Markdown support to the note editor:
- Support bold (**text**), italic (*text*), and headings (# Heading)
- Render the Markdown formatting live as the user types
- Use a library like MarkdownUI or build a simple Markdown renderer
- Keep the editing experience clean — don't clutter it with toolbar buttons
- The raw Markdown should be easy to read even without renderingIf you’d prefer a rich text toolbar instead of Markdown:
Add a rich text editing toolbar to the note editor:
- A small formatting bar above the editor with bold, italic, and heading buttons
- Use NSAttributedString for rich text storage
- Keep the toolbar minimal — just the essentials
- Store the formatted text so it persists correctlyEither approach works. Markdown is simpler to implement and store. Rich text feels more visual. Pick the one that fits how you’d actually want to use the app.
Multiple Notes
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
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 — try formatting with bold or headings
- Create a second note
- Switch between them
- Delete one
- Confirm formatting is preserved when switching notes
Checkpoint
By now you should have:
- Text editor works in the popover
- Rich text or Markdown formatting works
- Multiple notes supported
- Can create and delete notes
- First line shows as note title
What You Learned
- SwiftUI TextEditor for multi-line text
- Markdown rendering or rich text editing on macOS
- Managing a list of items
- Context menus on macOS
- Focus management in popovers