✨ Find/Replace in Document

[austincondiff]

Description

We should allow users to search for text within the currently open document and optionally replace matching instances.

Additional Context

Users can search for text occurrences in the current file. Matching results should be highlighted.

Users should have the option to replace individual or all instances of the matching text within the document.

This should integrate into the existing Source Editor UI. A search bar should appear when the user initiates the find by pressing ⌘ F, where users can input both search and replacement strings.

The find bar will then appear at the top of the active source editor and consists of the following components:

• Find Options picker, options include:
  • Find
  • Replace
  • Recents List (recents should be completed with a separate issue)
  • Clear Recents
  • Wrap Around
• Text field
• Result count (visible when there are results)
• Clear text button (visible when text is present)
• Insert Pattern button (this should be completed with a separate issue)
• Case-sensitive toggle
• Match style picker, options include:
  • Contains
  • Matches Word
  • Starts With
  • Ends With
  • Regular Expression

All found instances should be clearly highlighted, with the currently selected match being prominently highlighted for easy navigation.

HUD Behavior

The HUD will provide visual feedback for users when navigating through occurrences:

1. Looping Navigation:

   • If the user reaches the last occurrence and clicks "Next," the search will loop to the first occurrence. A HUD should be displayed with the arrow.triangle.capsulepath symbol, indicating that the bottom of the document has been reached and navigation has looped back to the first occurrence.
   • If the user reaches the first occurrence and clicks "Previous," the search will loop to the last occurrence. A flipped version of the arrow.triangle.capsulepath symbol should be displayed in the HUD, indicating that the top of the document has been reached and navigation has looped back to the last occurrence.

2. End of Document:

   • If there are no more occurrences in the document, the HUD should display an icon such as arrow.down.to.line, signaling that the end of the document has been reached with no further results.

This HUD behavior will help users understand the state of their search, particularly when reaching the beginning or end of the document, or when no additional occurrences are found.

Screenshots

[austincondiff]

@RayZhao1998 Would you like to tackle this one since find is fresh on your mind?

[RayZhao1998]

Yep, assigned to me.

[austincondiff]

Just a quick consideration, when a query has been entered in the Find input, pressing next after the last result will loop back to the first result and display a temporary HUD symbol in the center of the current editor pane.

[austincondiff]

Moved this issue into CodeEditTextView.

@lukepistrol Work has been done in the past on this. Now that we are working on a new editor view will this need to be done again or can this work translate over?

[austincondiff]

It looks like we have Find/Replace however it does not look the same as Xcode. Created #3.

[ghost]

Can I work on it?

[austincondiff]

I believe @tom-ludwig is working on this one. Is that correct?

[austincondiff]

We are currently trying to figure out how that one will work. The find/replace bar UI will need views from CodeEditUI which is currently (at the time of posting) in the CodeEdit repository. We may consider breaking it out in it's own package if it has to be shared. I will follow this up with a discussion with @maintainers in our Discord server on the development channel.

[tom-ludwig]

@austincondiff Yeah, I’ve been working on this. But @nis-ship-it, feel free to handle the UI if you want! I’ve got a great algorithm in place, but the UI is tricky for me since I don’t use AppKit much. If you open a pull request that’s only for the UI, we can avoid duplicating efforts.

[austincondiff]

I imagine we could use SwiftUI for the UI, but I guess it depends on what is possible/easier/better.

[ghost]

@tom-ludwig no worries I would try to work on the UI. Just to confirm UI is dealt on CodeEdit repo

[tom-ludwig]

Please implement the UI in this repository since other projects might need the search too. Even though we’re considering adding a separate CodeEditUI repo, I think it’s fine to go ahead and implement the UI here for now.