JsonTextFieldEditor fixes

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

@@ -20,6 +20,9 @@ class EditRequestBody extends ConsumerWidget {
         .select((value) => value?.httpRequestModel?.bodyContentType));
     final apiType = ref
         .watch(selectedRequestModelProvider.select((value) => value?.apiType));
+    final mode = ref.watch(settingsProvider.select(
+      (value) => value.isDark,
+    ));
 
     // TODO: #178 GET->POST Currently switches to POST everytime user edits body even if the user intentionally chooses GET
     // final sm = ScaffoldMessenger.of(context);
@@ -66,7 +69,7 @@ class EditRequestBody extends ConsumerWidget {
                     padding: kPt5o10,
                     child: JsonTextFieldEditor(
                       key: Key("$selectedId-json-body"),
-                      fieldKey: "$selectedId-json-body-editor",
+                      fieldKey: "$selectedId-json-body-editor-$mode",
                       initialValue: requestModel?.httpRequestModel?.body,
                       onChanged: (String value) {
                         // changeToPostMethod();

lib/widgets/editor_json.dart

@@ -1,12 +1,9 @@
-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';
 import 'package:json_text_field/json_text_field.dart';
+import 'package:apidash/consts.dart';
 
 class JsonTextFieldEditor extends StatefulWidget {
   const JsonTextFieldEditor({
@@ -49,6 +46,9 @@ class _JsonTextFieldEditorState extends State<JsonTextFieldEditor> {
   @override
   void initState() {
     super.initState();
+    if (widget.initialValue != null) {
+      controller.text = widget.initialValue!;
+    }
     controller.formatJson(sortJson: false);
     editorFocusNode = FocusNode(debugLabel: "Editor Focus Node");
   }
@@ -60,30 +60,43 @@ class _JsonTextFieldEditorState extends State<JsonTextFieldEditor> {
   }
 
   @override
-  Widget build(BuildContext context) {
+  void didUpdateWidget(JsonTextFieldEditor oldWidget) {
-    if (widget.initialValue != null) {
+    super.didUpdateWidget(oldWidget);
-      controller.text = widget.initialValue!;
+    if (oldWidget.initialValue != widget.initialValue) {
+      controller.text = widget.initialValue ?? "";
+      controller.selection =
+          TextSelection.collapsed(offset: controller.text.length);
     }
-    return Column(
+    if (oldWidget.fieldKey != widget.fieldKey) {
-      mainAxisSize: MainAxisSize.max,
+      // TODO: JsonTextField uses ExtendedTextField which does
+      // not rebuild because no key is provided
+      // so light mode to dark mode switching leads to incorrect color.
+      setState(() {});
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
       children: [
-        Align(
+        CallbackShortcuts(
-          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();
             },
           },
           child: JsonTextField(
+            key: Key(widget.fieldKey),
+            commonTextStyle: kCodeStyle.copyWith(
+              color: Theme.of(context).brightness == Brightness.dark
+                  ? kDarkCodeTheme['root']?.color
+                  : kLightCodeTheme['root']?.color,
+            ),
+            specialCharHighlightStyle: kCodeStyle.copyWith(
+              color: Theme.of(context).brightness == Brightness.dark
+                  ? kDarkCodeTheme['root']?.color
+                  : kLightCodeTheme['root']?.color,
+            ),
             stringHighlightStyle: kCodeStyle.copyWith(
               color: Theme.of(context).brightness == Brightness.dark
                   ? kDarkCodeTheme['string']?.color
@@ -110,57 +123,62 @@ class _JsonTextFieldEditorState extends State<JsonTextFieldEditor> {
                   : kLightCodeTheme['attr']?.color,
               fontWeight: FontWeight.bold,
             ),
-              errorContainerDecoration: BoxDecoration(
+            // errorContainerDecoration: BoxDecoration(
-                color: Theme.of(context).colorScheme.error.withOpacity(
+            //   color: Theme.of(context).colorScheme.error.withOpacity(
-                      kForegroundOpacity,
+            //         kForegroundOpacity,
-                    ),
+            //       ),
-                borderRadius: kBorderRadius8,
+            //   borderRadius: kBorderRadius8,
-              ),
+            // ),
-              showErrorMessage: true,
+            // TODO: Show error message in Global Status bar
-              readOnly: widget.readOnly,
+            // showErrorMessage: true,
             isFormatting: true,
-
-              key: Key(widget.fieldKey),
             controller: controller,
             focusNode: editorFocusNode,
             keyboardType: TextInputType.multiline,
             expands: true,
             maxLines: null,
-              style: kCodeStyle,
+            readOnly: widget.readOnly,
+            style: kCodeStyle.copyWith(
+              fontSize: Theme.of(context).textTheme.bodyMedium?.fontSize,
+            ),
             textAlignVertical: TextAlignVertical.top,
+            onChanged: widget.onChanged,
+            onTapOutside: (PointerDownEvent event) {
+              editorFocusNode.unfocus();
+            },
             decoration: InputDecoration(
               hintText: kHintJson,
               hintStyle: TextStyle(
-                  color: Theme.of(context).colorScheme.outline.withOpacity(
+                color: Theme.of(context).colorScheme.outlineVariant,
-                        kHintOpacity,
-                      ),
               ),
               focusedBorder: OutlineInputBorder(
                 borderRadius: kBorderRadius8,
                 borderSide: BorderSide(
-                    color: Theme.of(context).colorScheme.primary.withOpacity(
+                  color: Theme.of(context).colorScheme.outlineVariant,
-                          kHintOpacity,
-                        ),
                 ),
               ),
               enabledBorder: OutlineInputBorder(
                 borderRadius: kBorderRadius8,
                 borderSide: BorderSide(
-                    color:
+                  color: Theme.of(context).colorScheme.surfaceContainerHighest,
-                        Theme.of(context).colorScheme.surfaceContainerHighest,
                 ),
               ),
               filled: true,
               hoverColor: kColorTransparent,
-                fillColor: Color.alphaBlend(
+              fillColor: Theme.of(context).colorScheme.surfaceContainerLow,
-                    (Theme.of(context).brightness == Brightness.dark
-                            ? Theme.of(context).colorScheme.onPrimaryContainer
-                            : Theme.of(context).colorScheme.primaryContainer)
-                        .withOpacity(kForegroundOpacity),
-                    Theme.of(context).colorScheme.surface),
             ),
           ),
         ),
+        Align(
+          alignment: Alignment.topRight,
+          child: ADIconButton(
+            icon: Icons.format_align_left,
+            tooltip: "Format JSON",
+            onPressed: () {
+              controller.formatJson(sortJson: false);
+              widget.onChanged?.call(controller.text);
+            },
+          ),
         ),
       ],
     );