search

foss42 / apidash

API Dash is a beautiful open-source cross-platform API Client built using Flutter which can help you easily create & customize your API requests, visually inspect responses and generate API integration code. A lightweight alternative to postman/insomnia.
https://apidash.dev
Apache License 2.0
1.43k stars 269 forks source link

Feat syntax highlight request body #358

Open Tanish2002 opened 5 months ago

Tanish2002 commented 5 months ago

PR Description

This PR Introduces syntax highlighting for JSON type request body. We had a comment referencing the incomplete JsonTextFieldEditor implementation. Instead of hacking together our own, I've used a third-party package code_field.

This package provides syntax highlighting as well as inserts tab characters at appropriate positions. We can also use this same package in the future for other request bodies such as Graphql, protobuf, etc. Once we support them.

I've also changed the default TextFieldEditor widget using the plaintext theme, as the name suggests, it doesn't provide any syntax highlighting but does provide simple tab character insertion wherever needed.

Here is a list of currently supported languages and themes that are supported: languages, themes

Lastly Here are some screenshots: image image

I've decided to use monokaiSublimeTheme for dark mode and defaultTheme for light mode since they look the most natural for our colorscheme.

If unsatisfied with the current choice please tell me any other theme from the list above, The developer has also created a nice site to figure out a theme: Here

Checklist

Added/updated tests?

animator commented 5 months ago

We already have dark & light syntax highlighting themes for API Dash which is used in codegens here -https://github.com/foss42/apidash/blob/f3a7865459e3f0b2b44b9012026fe71159d8897d/lib/consts.dart#L160

Tanish2002 commented 5 months ago

@animator I missed it 😅, I've pushed a fix to address this: New screenshots: image image

animator commented 5 months ago

You need to go through the relevant issue #22 which talks about the deliverables and the past work & the issues in the WIP PR that was merged.

Tanish2002 commented 5 months ago

@animator As per the issue, I believe syntax highlight is taken care of through this PR.

I should be able to add formatting relatively easily(using kEncoder.convert), and validation should also be possible. However, I would need some help with the UI.

I added a "format JSON" elevated button. It looks like this: image Do you think this is fine? or I should do something else.

And, where do I keep the validation error? I'm thinking of simply adding a check to the OnChanged hook that will check if JSON is valid or not. If not then it would show an error. But not sure where to place this widget in the UI

Also, do I create a new file inside utils folder (json_utils.dart) for these json functions for validation, and formatting or just add methods to the JsonTextFieldEditor class?

Tanish2002 commented 5 months ago

@animator This is what I've come up with. Haven't added any new packages, simply using the json function from dart:convert for formatting as well as validation issues.

https://github.com/foss42/apidash/assets/55488165/ce121489-1035-497b-9a8f-859d6dff44cb

Tanish2002 commented 5 months ago

@animator pushed the new changes, made it look pretty as much as I could 😅. You can check the following video for a example. https://github.com/foss42/apidash/assets/55488165/22ebac0d-eb0c-4ab6-bf4f-b674f1fc43ab

animator commented 5 months ago

The original text editor is perfectly fine. Why was it modified? Only JSON editor requires modification.

Tanish2002 commented 5 months ago

The original text editor is perfectly fine. Why was it modified? Only JSON editor requires modification.

Yeah,

@animator If you believe this isn't what we should do, then I can go ahead and revert the changes for that.