feat: refactor code highlighting and add scripts editor pane

- replace `flutter_highlighter` and `highlighter` with `flutter_highlight` and `highlight`. - add `flutter_code_editor` dependency. - introduce a new scripts editor pane in the REST request view.
2025-12-01 10:17:47 +08:00 · 2025-04-22 14:34:43 +05:30
parent ef3867ef43
commit 346e4c3ef0
8 changed files with 182 additions and 15 deletions
--- a/lib/dashbot/widgets/content_renderer.dart
+++ b/lib/dashbot/widgets/content_renderer.dart
@@ -1,8 +1,8 @@
 // lib/dashbot/widgets/content_renderer.dart
 import 'dart:convert';
 import 'package:flutter/material.dart';
-import 'package:flutter_highlighter/flutter_highlighter.dart';
-import 'package:flutter_highlighter/themes/monokai-sublime.dart';
+import 'package:flutter_highlight/flutter_highlight.dart';
+import 'package:flutter_highlight/themes/monokai-sublime.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';

 Widget renderContent(BuildContext context, String text) {
--- a/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_rest.dart
+++ b/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_rest.dart
@@ -1,4 +1,5 @@
 import 'package:apidash/consts.dart';
+import 'package:apidash/screens/home_page/editor_pane/details_card/request_pane/scripts_code_pane.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:apidash/providers/providers.dart';
@@ -56,7 +57,7 @@ class EditRestRequestPane extends ConsumerWidget {
        EditRequestURLParams(),
        EditRequestHeaders(),
        EditRequestBody(),
-        SizedBox.shrink(),
+        ScriptsCodePane(),
      ],
    );
  }
--- a/lib/screens/home_page/editor_pane/details_card/request_pane/scripts_code_pane.dart
+++ b/lib/screens/home_page/editor_pane/details_card/request_pane/scripts_code_pane.dart
@@ -0,0 +1,81 @@
+import 'package:apidash/widgets/scripts_editor_pane.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_code_editor/flutter_code_editor.dart';
+import 'package:highlight/languages/javascript.dart';
+
+class ScriptsCodePane extends StatefulWidget {
+  const ScriptsCodePane({super.key});
+
+  @override
+  State<ScriptsCodePane> createState() => _ScriptsCodePaneState();
+}
+
+class _ScriptsCodePaneState extends State<ScriptsCodePane> {
+  int _selectedTabIndex = 0;
+  final preReqCodeController = CodeController(
+    text: '// Use javascript to modify this request dynamically',
+    language: javascript,
+  );
+  final postResCodeController = CodeController(
+    text: '...',
+    language: javascript,
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    final tabs = ["Pre-Req", "Post-Res"];
+    final content = [
+      ScriptsEditorPane(
+        controller: preReqCodeController,
+      ),
+      ScriptsEditorPane(
+        controller: postResCodeController,
+      ),
+    ];
+
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SizedBox(
+          width: 100,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              for (int i = 0; i < tabs.length; i++)
+                ListTile(
+                  dense: true,
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(2),
+                  ),
+                  selectedTileColor: _selectedTabIndex == i
+                      ? Theme.of(context).colorScheme.secondaryFixed
+                      : Theme.of(context).colorScheme.surface,
+                  title: Text(
+                    tabs[i],
+                    style: TextStyle(
+                      fontSize: 12,
+                    ),
+                  ),
+                  selected: _selectedTabIndex == i,
+                  onTap: () {
+                    setState(() {
+                      _selectedTabIndex = i;
+                    });
+                  },
+                ),
+            ],
+          ),
+        ),
+        const VerticalDivider(width: 1),
+        Expanded(
+          child: Container(
+            color: Theme.of(context).colorScheme.surfaceContainerLowest,
+            child: content[_selectedTabIndex],
+          ),
+        ),
+      ],
+    );
+  }
+}
--- a/lib/widgets/previewer_code.dart
+++ b/lib/widgets/previewer_code.dart
@@ -1,7 +1,7 @@
 import 'package:apidash_core/apidash_core.dart';
 import 'package:flutter/material.dart';
-import 'package:highlighter/highlighter.dart' show highlight, Node;
 import 'package:apidash/consts.dart';
+import 'package:highlight/highlight.dart';
 import 'error_message.dart';

 (String, bool) sanitize(String input) {
--- a/lib/widgets/previewer_codegen.dart
+++ b/lib/widgets/previewer_codegen.dart
@@ -1,8 +1,8 @@
 import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
-import 'package:highlighter/highlighter.dart' show highlight;
 import 'package:apidash/consts.dart';
 import 'package:apidash/utils/utils.dart';
+import 'package:highlight/highlight.dart';
 import 'button_copy.dart';
 import 'button_save_download.dart';
 import 'button_share.dart';
--- a/lib/widgets/scripts_editor_pane.dart
+++ b/lib/widgets/scripts_editor_pane.dart
@@ -0,0 +1,44 @@
+import 'package:apidash/providers/settings_providers.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_code_editor/flutter_code_editor.dart';
+import 'package:flutter_highlight/themes/monokai.dart';
+import 'package:flutter_highlight/themes/xcode.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class ScriptsEditorPane extends ConsumerStatefulWidget {
+  final CodeController controller;
+  const ScriptsEditorPane({super.key, required this.controller});
+
+  @override
+  ConsumerState<ScriptsEditorPane> createState() => _ScriptsEditorPaneState();
+}
+
+class _ScriptsEditorPaneState extends ConsumerState<ScriptsEditorPane> {
+  @override
+  Widget build(BuildContext context) {
+    final settings = ref.watch(settingsProvider);
+    return CodeTheme(
+      data: CodeThemeData(
+        styles: settings.isDark ? monokaiTheme : xcodeTheme,
+      ),
+      child: SingleChildScrollView(
+        child: CodeField(
+          smartDashesType: SmartDashesType.enabled,
+          smartQuotesType: SmartQuotesType.enabled,
+          background: Theme.of(context).colorScheme.surfaceContainerLowest,
+          gutterStyle: GutterStyle(
+            width: 40, // TODO: Fix numbers size
+            margin: 2,
+            textAlign: TextAlign.left,
+          ),
+          cursorColor: Theme.of(context).colorScheme.primary,
+          controller: widget.controller,
+          textStyle: TextStyle(
+            fontSize: 12,
+            fontFamily: 'monospace',
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -79,6 +79,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "0.1.25"
+  autotrie:
+    dependency: transitive
+    description:
+      name: autotrie
+      sha256: "55da6faefb53cfcb0abb2f2ca8636123fb40e35286bb57440d2cf467568188f8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.0"
  barcode:
    dependency: transitive
    description:
@@ -523,19 +531,27 @@ packages:
    description: flutter
    source: sdk
    version: "0.0.0"
+  flutter_code_editor:
+    dependency: "direct main"
+    description:
+      name: flutter_code_editor
+      sha256: "18cc1200e7481fcf144bc970fdec4e75b83e3f523da60bbf55810a4e8dd6f5fb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.3.3"
  flutter_driver:
    dependency: transitive
    description: flutter
    source: sdk
    version: "0.0.0"
-  flutter_highlighter:
+  flutter_highlight:
    dependency: "direct main"
    description:
-      name: flutter_highlighter
-      sha256: "93173afd47a9ada53f3176371755e7ea4a1065362763976d06d6adfb4d946e10"
+      name: flutter_highlight
+      sha256: "7b96333867aa07e122e245c033b8ad622e4e3a42a1a2372cbb098a2541d8782c"
      url: "https://pub.dev"
    source: hosted
-    version: "0.1.1"
+    version: "0.7.0"
  flutter_hooks:
    dependency: "direct main"
    description:
@@ -671,14 +687,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "2.3.2"
-  highlighter:
+  highlight:
    dependency: "direct main"
    description:
-      name: highlighter
-      sha256: "92180c72b9da8758e1acf39a45aa305a97dcfe2fdc8f3d1d2947c23f2772bfbc"
+      name: highlight
+      sha256: "5353a83ffe3e3eca7df0abfb72dcf3fa66cc56b953728e7113ad4ad88497cf21"
      url: "https://pub.dev"
    source: hosted
-    version: "0.1.1"
+    version: "0.7.0"
  hive:
    dependency: transitive
    description:
@@ -905,6 +921,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "3.0.1"
+  linked_scroll_controller:
+    dependency: transitive
+    description:
+      name: linked_scroll_controller
+      sha256: e6020062bcf4ffc907ee7fd090fa971e65d8dfaac3c62baf601a3ced0b37986a
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.2.0"
  lints:
    dependency: transitive
    description:
@@ -985,6 +1009,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "3.0.0"
+  mocktail:
+    dependency: transitive
+    description:
+      name: mocktail
+      sha256: "890df3f9688106f25755f26b1c60589a92b3ab91a22b8b224947ad041bf172d8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.4"
  mpv_dart:
    dependency: transitive
    description:
@@ -1628,6 +1660,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "1.0.2"
+  tuple:
+    dependency: transitive
+    description:
+      name: tuple
+      sha256: a97ce2013f240b2f3807bcbaf218765b6f301c3eff91092bcfa23a039e7dd151
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.2"
  typed_data:
    dependency: transitive
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -22,14 +22,12 @@ dependencies:
  extended_text_field: ^16.0.0
  file_selector: ^1.0.3
  flex_color_scheme: ^8.1.1
-  flutter_highlighter: ^0.1.0
  flutter_hooks: ^0.21.2
  flutter_markdown: ^0.7.6+2
  flutter_portal: ^1.1.4
  flutter_riverpod: ^2.5.1
  flutter_svg: ^2.0.17
  fvp: ^0.30.0
-  highlighter: ^0.1.1
  hive_flutter: ^1.1.0
  hooks_riverpod: ^2.5.2
  intl: ^0.19.0
@@ -70,6 +68,9 @@ dependencies:
      url: https://github.com/google/flutter-desktop-embedding.git
      path: plugins/window_size
  carousel_slider: ^5.0.0
+  flutter_code_editor: ^0.3.3
+  highlight: ^0.7.0
+  flutter_highlight: ^0.7.0

 dependency_overrides:
  extended_text_field: ^16.0.0