Beautify JSON and highlight json text

[Mrudul111]

PR Description

This PR was made to tackle 2 enhancement issues that are beautification of JSON text and highlight of key and string value in JSON text and plug it in body section of History Request page and Request page. Here is a video demonstrating the functionality.

Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-02-22.at.13.47.07.mp4

Related Issues

• Closes# Add option to automatically/manually beautify JSON request body #581 Add syntax highlighting for JSON request body #582

Checklist

• I have gone through the contributing guide
• I have updated my branch and synced it with project main branch before making this PR
• I am using the latest Flutter stable branch (run flutter upgrade and verify)
• I have run the tests (flutter test) and all tests are passing

Added/updated tests?

We encourage you to add relevant test cases.

• Yes
• No, and this is why: This enhancement feature does not need any tests

OS on which you have developed and tested the feature?

• Windows
• macOS
• Linux

[ashitaprasad]

The JSON theme does not match the light mode and dark mode theme we currently use in the app

If you go to "View Code" -> "HAR" (which is a JSON, you can see the highlighting)

The current theme resides here -
https://github.com/foss42/apidash/blob/main/packages/apidash_design_system/lib/tokens/themes.dart

[Mrudul111]

should I use the same color scheme as HAR or we should go for another color scheme.

[ashitaprasad]

should I use the same color scheme as HAR or we should go for another color scheme.

All colour scheme flow through the API Dash design system as mentioned in the comment link above.
Your theme should be derived from the same color scheme.

[Mrudul111]

should I use the same color scheme as HAR or we should go for another color scheme.

All colour scheme flow through the API Dash design system as mentioned in the comment link above. Your theme should be derived from the same color scheme.

I used the attr and string color from the same file. Is that good or should we go for another pair from the same file?

[ashitaprasad]

read only feature is important as the user cannot modify the JSON body when viewing history.

[Mrudul111]

On it

[ashitaprasad]

@Mrudul111 You forgot adding the following styles in the JSON editor:

numberHighlightStyle
boolHighlightStyle
nullHighlightStyle

[Mrudul111]

@Mrudul111 You forgot adding the following styles in the JSON editor:

numberHighlightStyle
boolHighlightStyle
nullHighlightStyle

what should be the color for nullHighlightStyle the same as string?

[ashitaprasad]

@Mrudul111 You forgot adding the following styles in the JSON editor:

numberHighlightStyle
boolHighlightStyle
nullHighlightStyle

what should be the color for nullHighlightStyle the same as string?

You have access to the theme and the code view widget. It is part of the task to figure out how the colors map.

[Mrudul111]

This looks good to me. Every variable is uniquely identifiable

[ashitaprasad]

What is your FOSSHACK project link?

[Mrudul111]

project

I am not contributing to FOSSHACK

[ashitaprasad]

project

I am not contributing to FOSSHACK

cool 👍