From 346e4c3ef0bed77c6e4c9a10c2af7cd2092c8900 Mon Sep 17 00:00:00 2001 From: Udhay-Adithya Date: Tue, 22 Apr 2025 14:34:43 +0530 Subject: [PATCH] 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. --- lib/dashbot/widgets/content_renderer.dart | 4 +- .../request_pane/request_pane_rest.dart | 3 +- .../request_pane/scripts_code_pane.dart | 81 +++++++++++++++++++ lib/widgets/previewer_code.dart | 2 +- lib/widgets/previewer_codegen.dart | 2 +- lib/widgets/scripts_editor_pane.dart | 44 ++++++++++ pubspec.lock | 56 +++++++++++-- pubspec.yaml | 5 +- 8 files changed, 182 insertions(+), 15 deletions(-) create mode 100644 lib/screens/home_page/editor_pane/details_card/request_pane/scripts_code_pane.dart create mode 100644 lib/widgets/scripts_editor_pane.dart diff --git a/lib/dashbot/widgets/content_renderer.dart b/lib/dashbot/widgets/content_renderer.dart index 1e8699a6..00aa0c30 100644 --- 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) { diff --git 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 index 25a7bbda..76fa3e1c 100644 --- 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(), ], ); } diff --git 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 new file mode 100644 index 00000000..9702fdb7 --- /dev/null +++ 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 createState() => _ScriptsCodePaneState(); +} + +class _ScriptsCodePaneState extends State { + 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], + ), + ), + ], + ); + } +} diff --git a/lib/widgets/previewer_code.dart b/lib/widgets/previewer_code.dart index f805d7f6..4535f3d4 100644 --- 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) { diff --git a/lib/widgets/previewer_codegen.dart b/lib/widgets/previewer_codegen.dart index 77f9b33b..99833986 100644 --- 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'; diff --git a/lib/widgets/scripts_editor_pane.dart b/lib/widgets/scripts_editor_pane.dart new file mode 100644 index 00000000..4935b2d4 --- /dev/null +++ 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 createState() => _ScriptsEditorPaneState(); +} + +class _ScriptsEditorPaneState extends ConsumerState { + @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', + ), + ), + ), + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index 9881558d..00cb163c 100644 --- 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: diff --git a/pubspec.yaml b/pubspec.yaml index 28ffae06..0f52834d 100644 --- 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