Bug: Node-click highlighting in editor fails when using YAML format

[sakshammjn]

Bug Details

Description

Node-click highlighting (the feature that syncs the graph to the editor) is broken when using the YAML format. While clicking a node correctly scrolls and highlights the code in JSON mode, it fails in YAML mode, providing no visual feedback to the user.

Steps to Reproduce

1. Open the application (it defaults to JSON mode).
2. Click a node in the graph (e.g., "properties") and verify the editor scrolls and highlights the line.
3. Switch the editor format to YAML using the format toggle.
4. Click the same node (or any other node) in the graph visualization.
5. Observe that the editor does not scroll, move the cursor, or apply any highlighting.

Demo Video

Screen.Recording.2026-03-09.at.11.30.13.PM.mov

Expected Behavior

Clicking a node in the graph should resolve the correct line and column in the YAML source and apply the monaco-highlight-line decoration, just as it does for JSON.

Environment

• OS: macOS
• Browser: Chrome
• Version: v0.5.11-beta

Additional Context

The root cause is located in src/components/MonacoEditor.tsx at line 170. The application uses jsonc-parser to generate an AST from the editor text. Because jsonc-parser only supports JSON, it returns undefined when the content is YAML. This triggers an early return on line 171, effectively disabling the feature for YAML users.

Proposed Solution

I propose refactoring the useEffect in MonacoEditor.tsx to be format-aware by branching on the existing schemaFormat context value: using jsonc-parser's parseTree/findNodeAtLocation for JSON, and a YAML-compatible AST parser (such as the yaml library's parseDocument, which provides source offsets) for YAML content. This will allow correct resolution of JSON Pointer paths to editor line numbers regardless of format.

Good First Issue

• I believe this issue is a good first issue for new contributors.

Contribution

• I am willing to fix this bug.

[sakshammjn]

Hi @AgniveshChaubey ! I’ve been diving deep into the codebase while preparing my GSoC proposal and noticed this edge case in the YAML highlighting logic. I would love to implement the fix I outlined in the description above. Could you assign this issue to me? Please let me know if the proposed approach looks good, and I can start working on the PR right away!

[rahul-kr-rai]

I am working on this issue.

[rahul-kr-rai]

@AgniveshChaubey
I have raised PR #169. Please review and provide any suggestions or corrections needed.

[itvi-1234]

Please wait for the issue to be assigned , then you can start working on it

[AgniveshChaubey]

@sakshammjn, Yo can go ahead!

[AgniveshChaubey]

@rahul-kr-rai, the report has expressed interest. So let them work on this.

[sakshammjn]

Thanks for assigning this to me, @AgniveshChaubey ! I'll get started on the fix.

[sakshammjn]

I have opened PR #175 to address this. @AgniveshChaubey, looking forward to your review.