[PR #363] [CLOSED] feat: Add json comment support #285

Closed
opened 2026-03-22 21:13:45 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/mountain-loop/yaak/pull/363
Author: @NureddinSoltan
Created: 1/13/2026
Status: Closed

Base: mainHead: add-json-comment-support


📝 Commits (10+)

  • 6106187 feat: Add JSON comment support to editor
  • edd92fa Merge branch 'mountain-loop:main' into add-json-comment-support
  • 1fcdc09 feat & fix: support highlight the comment if it's after the code at the same line, add an ignore for the lint check because this is a regex matching pattern.
  • 71d3620 Merge branch 'main' into add-json-comment-support
  • bc573a7 Merge branch 'main' into add-json-comment-support
  • c5a615f Merge branch 'mountain-loop:main' into add-json-comment-support
  • 83ba2e2 Merge branch 'main' into add-json-comment-support
  • a73a50f Merge branch 'main' into add-json-comment-support
  • f1da0cf Merge branch 'main' into add-json-comment-support
  • f4fcfb2 Merge branch 'main' into add-json-comment-support

📊 Changes

5 files changed (+119 additions, -14 deletions)

View changed files

📝 src-web/components/core/Editor/Editor.css (+10 -0)
📝 src-web/components/core/Editor/Editor.tsx (+6 -3)
src-web/components/core/Editor/commentHighlight.ts (+70 -0)
📝 src-web/components/core/Editor/json-lint.ts (+7 -6)
📝 src-web/hooks/useSendAnyHttpRequest.ts (+26 -5)

📄 Description

What this does

I've added support for comments in the JSON editor :) ! Now you can use // and /* */ style comments when writing request bodies, which makes it way easier to document what you're testing.

Why I built this

This was something I was really missing when I started using Yaak. I write multiple comments in my HTTP requests to test things, and I can't live without them. When I found out Yaak doesn't support this, I decided to add it myself. I thought it would be kinda easy, but it took me some time to get it right - though it was a really enjoyable experience XD.

When I'm working with complex API requests, I often want to add notes about what certain fields do or remind myself to change something later. Before this PR, adding comments would break everything because they're not valid JSON. This PR fixes that by:

  • Stripping out comments before sending the actual HTTP request.
  • Making the linter ignore comments so you don't get false errors.
  • Highlighting comments in gray so they're easy to spot.

What changed

  • Comments get removed automatically before requests are sent.
  • Added visual styling so comments look different from regular code.
  • The JSON validator won't complain about comments anymore.
  • You can use Cmd/Ctrl+/ to quickly comment/uncomment lines.

Example

Now this works without errors:

{
  "userId": 123,  // testing with user from staging
  "action": "login",
  /* 
    TODO: need to add email field here
    once the API is updated
  */
  "remember": true
}

The comments stay in the editor but get stripped out when the request is actually sent, so the API only sees valid JSON.

Tested

  • Comments don't break HTTP requests anymore
  • Both // and /* */ styles work
  • Linter still catches real JSON errors
  • Keyboard shortcut works as expecte
image

Future improvements

There's one edge case with the highlighting: if you have // /* on a line, the multi-line comment won't actually work (because the /* is inside a single-line comment), but the highlighting will still show everything after it as commented. Ideally, the highlighting should stop so the user can see that something's wrong. Although users can see a red dot and error indicator showing there's a problem, the visual highlighting could be clearer. I don't think this is critical for now since it's a rare case, but it could be improved in a future PR to help catch these mistakes.

Current behavior (left) vs. Expected behavior (right):

image image


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/mountain-loop/yaak/pull/363 **Author:** [@NureddinSoltan](https://github.com/NureddinSoltan) **Created:** 1/13/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `add-json-comment-support` --- ### 📝 Commits (10+) - [`6106187`](https://github.com/mountain-loop/yaak/commit/6106187ccb947fea40793147728193a8ac7a520b) feat: Add JSON comment support to editor - [`edd92fa`](https://github.com/mountain-loop/yaak/commit/edd92facfc997df93677c2fadfba08cf1ade62f9) Merge branch 'mountain-loop:main' into add-json-comment-support - [`1fcdc09`](https://github.com/mountain-loop/yaak/commit/1fcdc09df38107081431bd4b180ca0663fa58d36) feat & fix: support highlight the comment if it's after the code at the same line, add an ignore for the lint check because this is a regex matching pattern. - [`71d3620`](https://github.com/mountain-loop/yaak/commit/71d36203fe87912666cb26c402d456eaed189e86) Merge branch 'main' into add-json-comment-support - [`bc573a7`](https://github.com/mountain-loop/yaak/commit/bc573a7d8526e488193cf1a5c7b611ad36fedc15) Merge branch 'main' into add-json-comment-support - [`c5a615f`](https://github.com/mountain-loop/yaak/commit/c5a615f3f9d222dab499186cf1fa5110e800ec0e) Merge branch 'mountain-loop:main' into add-json-comment-support - [`83ba2e2`](https://github.com/mountain-loop/yaak/commit/83ba2e265901a7163c10839ef86306ead66b98c6) Merge branch 'main' into add-json-comment-support - [`a73a50f`](https://github.com/mountain-loop/yaak/commit/a73a50fc1df1f0aa54aec5845dd430aaa86d8335) Merge branch 'main' into add-json-comment-support - [`f1da0cf`](https://github.com/mountain-loop/yaak/commit/f1da0cfbfb9f3e6d013e999fb5ba570c9c4de2b7) Merge branch 'main' into add-json-comment-support - [`f4fcfb2`](https://github.com/mountain-loop/yaak/commit/f4fcfb2084bc4c94e74927bb5fafa04756562b3a) Merge branch 'main' into add-json-comment-support ### 📊 Changes **5 files changed** (+119 additions, -14 deletions) <details> <summary>View changed files</summary> 📝 `src-web/components/core/Editor/Editor.css` (+10 -0) 📝 `src-web/components/core/Editor/Editor.tsx` (+6 -3) ➕ `src-web/components/core/Editor/commentHighlight.ts` (+70 -0) 📝 `src-web/components/core/Editor/json-lint.ts` (+7 -6) 📝 `src-web/hooks/useSendAnyHttpRequest.ts` (+26 -5) </details> ### 📄 Description ## What this does I've added support for comments in the JSON editor :) ! Now you can use `//` and `/* */` style comments when writing request bodies, which makes it way easier to document what you're testing. ## Why I built this This was something I was really missing when I started using Yaak. I write multiple comments in my HTTP requests to test things, and I can't live without them. When I found out Yaak doesn't support this, I decided to add it myself. I thought it would be kinda easy, but it took me some time to get it right - though it was a really enjoyable experience XD. When I'm working with complex API requests, I often want to add notes about what certain fields do or remind myself to change something later. Before this PR, adding comments would break everything because they're not valid JSON. This PR fixes that by: - Stripping out comments before sending the actual HTTP request. - Making the linter ignore comments so you don't get false errors. - Highlighting comments in gray so they're easy to spot. ## What changed - Comments get removed automatically before requests are sent. - Added visual styling so comments look different from regular code. - The JSON validator won't complain about comments anymore. - You can use `Cmd/Ctrl+/` to quickly comment/uncomment lines. ## Example Now this works without errors: ```json { "userId": 123, // testing with user from staging "action": "login", /* TODO: need to add email field here once the API is updated */ "remember": true } ``` The comments stay in the editor but get stripped out when the request is actually sent, so the API only sees valid JSON. ## Tested - Comments don't break HTTP requests anymore - Both `//` and `/* */` styles work - Linter still catches real JSON errors - Keyboard shortcut works as expecte <img width="1382" height="745" alt="image" src="https://github.com/user-attachments/assets/726dd39f-6996-4c6f-9b52-8eb92c0355d3" /> ## Future improvements There's one edge case with the highlighting: if you have `// /*` on a line, the multi-line comment won't actually work (because the `/*` is inside a single-line comment), but the highlighting will still show everything after it as commented. Ideally, the highlighting should stop so the user can see that something's wrong. Although users can see a red dot and error indicator showing there's a problem, the visual highlighting could be clearer. I don't think this is critical for now since it's a rare case, but it could be improved in a future PR to help catch these mistakes. **Current behavior (left) vs. Expected behavior (right):** <p align="center"> <img width="51%" alt="image" src="https://github.com/user-attachments/assets/0cc9ed11-8e0e-4def-8053-e89162229be8" /> <img width="48%" alt="image" src="https://github.com/user-attachments/assets/8e9f3e43-5623-426d-a479-1d9a241a6053" /> </p> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-03-22 21:13:45 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/yaak#285