integrated a beautify button in JSON codegen and also highlighted the key and string text.

lib/screens/history/history_widgets/his_request_pane.dart

@@ -140,12 +140,11 @@ class HisRequestBody extends ConsumerWidget {
                 // TODO: Fix JsonTextFieldEditor & plug it here
                 ContentType.json => Padding(
                     padding: kPt5o10,
-                    child: TextFieldEditor(
+                    child: JsonTextFieldEditor(
                       key: Key("${selectedHistoryModel?.historyId}-json-body"),
                       fieldKey:
                           "${selectedHistoryModel?.historyId}-json-body-viewer",
                       initialValue: requestModel?.body,
-                      readOnly: true,
                     ),
                   ),
                 _ => Padding(

lib/screens/home_page/editor_pane/details_card/request_pane/request_body.dart

@@ -64,7 +64,7 @@ class EditRequestBody extends ConsumerWidget {
                 // TODO: Fix JsonTextFieldEditor & plug it here
                 ContentType.json => Padding(
                     padding: kPt5o10,
-                    child: TextFieldEditor(
+                    child: JsonTextFieldEditor(
                       key: Key("$selectedId-json-body"),
                       fieldKey: "$selectedId-json-body-editor",
                       initialValue: requestModel?.httpRequestModel?.body,
@@ -74,7 +74,6 @@ class EditRequestBody extends ConsumerWidget {
                             .read(collectionStateNotifierProvider.notifier)
                             .update(body: value);
                       },
-                      hintText: kHintJson,
                     ),
                   ),
                 _ => Padding(

lib/widgets/editor_json.dart

@@ -1,5 +1,8 @@
+import 'package:apidash/widgets/widgets.dart';
 import 'dart:math' as math;
 import 'package:apidash/consts.dart';
+import 'package:apidash/utils/utils.dart';
+import 'dart:convert';
 import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -59,7 +62,20 @@ class _JsonTextFieldEditorState extends State<JsonTextFieldEditor> {
     if (widget.initialValue != null) {
       controller.text = widget.initialValue!;
     }
-    return CallbackShortcuts(
+    return Column(
+      mainAxisSize: MainAxisSize.max,
+      children: [
+        Align(
+          alignment: Alignment.topRight,
+          child: IconButton(
+            icon: const Icon(Icons.format_align_left),
+            onPressed: () {
+              controller.formatJson(sortJson: false);
+            },
+          ),
+        ),
+        Expanded(
+          child: CallbackShortcuts(
             bindings: <ShortcutActivator, VoidCallback>{
               const SingleActivator(LogicalKeyboardKey.tab): () {
                 insertTab();
@@ -67,10 +83,10 @@ class _JsonTextFieldEditorState extends State<JsonTextFieldEditor> {
             },
             child: JsonTextField(
               stringHighlightStyle: kCodeStyle.copyWith(
-          color: Theme.of(context).colorScheme.secondary,
+                color: kColorJSONString,
               ),
               keyHighlightStyle: kCodeStyle.copyWith(
-          color: Theme.of(context).colorScheme.primary,
+                color: kColorJSONKey,
                 fontWeight: FontWeight.bold,
               ),
               errorContainerDecoration: BoxDecoration(
@@ -89,10 +105,6 @@ class _JsonTextFieldEditorState extends State<JsonTextFieldEditor> {
               maxLines: null,
               style: kCodeStyle,
               textAlignVertical: TextAlignVertical.top,
-        onChanged: (value) {
-          controller.formatJson(sortJson: false);
-          widget.onChanged?.call(value);
-        },
               decoration: InputDecoration(
                 hintText: kHintJson,
                 hintStyle: TextStyle(
@@ -111,7 +123,8 @@ class _JsonTextFieldEditorState extends State<JsonTextFieldEditor> {
                 enabledBorder: OutlineInputBorder(
                   borderRadius: kBorderRadius8,
                   borderSide: BorderSide(
-              color: Theme.of(context).colorScheme.surfaceContainerHighest,
+                    color:
+                        Theme.of(context).colorScheme.surfaceContainerHighest,
                   ),
                 ),
                 filled: true,
@@ -124,6 +137,9 @@ class _JsonTextFieldEditorState extends State<JsonTextFieldEditor> {
                     Theme.of(context).colorScheme.surface),
               ),
             ),
+          ),
+        ),
+      ],
     );
   }
 }

packages/apidash_design_system/lib/tokens/colors.dart

@@ -9,6 +9,9 @@ const kColorRed = Colors.red;
 final kColorLightDanger = Colors.red.withOpacity(0.9);
 const kColorDarkDanger = Color(0xffcf6679);
 
+const kColorJSONKey =   Color(0xFF1757BA);
+const kColorJSONString = Color(0xFFA82323);
+
 const kColorSchemeSeed = Colors.blue;
 
 final kColorStatusCodeDefault = Colors.grey.shade700;