✨ Highlight Matching Tags
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 28/100
Research direction
The issue names no files, tests, or entry points. First locate the editor's tag parsing, cursor matching, highlighting, and edit-synchronization components; done means matching opening and closing tags are highlighted for the described cursor positions and remain synchronized while names are edited.
Written by the indexing model from the issue text.
Description
Description
We want to enhance tag-matching behavior in markup languages such as HTML, XML, and JSX by highlighting matching tags based on cursor position. This feature is inspired by bracket matching in Xcode, where matching brackets are highlighted based on cursor placement.
When the cursor is placed within a tag, the corresponding opening or closing tag should be highlighted. Additionally, if any tag name is modified in either the beginning or end tag, the matching tag should update to reflect the change.
Behavior Examples
In the following examples, | represents the cursor position, and underlined text represents the highlighted matching tags:
- <|div class="wrapper">Hello world!</div>
- <div| class="wrapper">Hello world!</div>
- <div class="wrapper">|Hello world!</div>
- <div class="wrapper">Hello world!<|/div>
- <div class="wrapper">Hello world!</div|>
- <div class="wrapper">Hello world!</div>|
Requirements
-
Cursor-Based Tag Matching:
- When the cursor is within a tag name, either at the opening or closing tag, the corresponding tag should be highlighted.
-
Tag Synchronization:
- When a tag name is edited, the matching tag should update to reflect the change in real-time, ensuring that both tags are always in sync.
-
Highlight Behavior:
- Highlighting should clearly indicate the matching tag, using a distinct visual style (e.g., underline or color change) for both the opening and closing tags to enhance visibility.
This feature will improve the editing experience by making it easier to identify matching tags, reducing errors in nested or complex structures.
Original Issue Description
Is it possible to highlight the opening and closing tags? Example: <div> </div>
- Dominant language
- Swift
- Stars
- 720
- Forks
- 162
- PR merge metrics
- No merged PRs in 30d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from CodeEditApp/CodeEditSourceEditor
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
CodeEditApp/CodeEditSourceEditor#377 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
CodeEditApp/CodeEditSourceEditor#376 · 1 comment ·
-
Difficulty 1/5 1-3 hours Newbie friendliness 68/100
-
Difficulty 3/5 1-2 days Newbie friendliness 68/100
CodeEditApp/CodeEditSourceEditor#378 · 1 comment ·
-
Difficulty 4/5 3-5 days Newbie friendliness 32/100
All issues in CodeEditApp/CodeEditSourceEditor
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
manaflow-ai/cmux#13763 ·
-
type: feature request
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
googleapis/google-cloud-swift#1036 · 1 comment ·
-
Difficulty 1/5 Under an hour Newbie friendliness 78/100
wultra/mtoken-sdk-ios#253 ·
-
area:dictation documentation P2
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
uttrflow/uttrflow-swift#1180 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100