Feat syntax highlight request body

[Tanish2002]

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:

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

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

Added/updated tests?

• Yes

[animator]

We already have dark & light syntax highlighting themes for API Dash which is used in codegens here -

apidash/lib/consts.dart

Line 160 in f3a7865

const kLightCodeTheme = {

[Tanish2002]

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

[animator]

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]

@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:

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]

@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.

record-2024.03.26-18.08.23.mp4

[Tanish2002]

@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]

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

[Tanish2002]

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

Yeah,

• I modified the text editor class to ensure consistency between all editor widgets and make it easier for other developers to understand.
• I used plaintext as the language to remove highlighting.
  

  apidash/lib/widgets/editor.dart

  Line 33 in 4912f71

  language: plaintext,

• I believe in using existing packages (which I added in this PR) for consistent code rather than creating custom implementations for every editor type.
• I haven't implemented this but I think an abstract Editor class (using the CodeField widget) offers flexibility. Subclasses for various editors(json, graphql, protobuf, etc) can then add features like formatting and validation as needed.

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