Replace output SelectableText with a CodeField instance (apache#25640)

akvelon · Apr 27, 2023 · c0867d6 · c0867d6
1 parent 07d8023
commit c0867d6
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 41 deletions.
diff --git a/learning/tour-of-beam/frontend/integration_test/tour_page_test.dart b/learning/tour-of-beam/frontend/integration_test/tour_page_test.dart
@@ -178,7 +178,7 @@ public class MyClass {
   await _selectExampleWithSnippet(wt);
   await wt.pumpAndSettle();
 
-  await wt.enterText(find.codeField(), code);
+  await wt.enterText(find.snippetCodeField(), code);
   await wt.pumpAndSettle();
 
   await _runAndCancelExample(wt, const Duration(milliseconds: 300));

diff --git a/playground/frontend/integration_test/standalone_cancel_running_example_test.dart b/playground/frontend/integration_test/standalone_cancel_running_example_test.dart
@@ -35,7 +35,7 @@ void main() {
     await _runAndCancelExample(wt, const Duration(milliseconds: 300));
 
     final source = wt.findPlaygroundController().source ?? '';
-    await wt.enterText(find.codeField(), '//comment\n' + source);
+    await wt.enterText(find.snippetCodeField(), '//comment\n' + source);
     await wt.pumpAndSettle();
 
     // Cancel changed example.

diff --git a/playground/frontend/integration_test/standalone_change_example_sdk_run_test.dart b/playground/frontend/integration_test/standalone_change_example_sdk_run_test.dart
@@ -60,7 +60,7 @@ public class MyClass {
 }
 ''';
 
-    await wt.enterText(find.codeField(), code);
+    await wt.enterText(find.snippetCodeField(), code);
     await wt.pumpAndSettle();
 
     await wt.tapAndSettle(find.runOrCancelButton());
@@ -103,7 +103,7 @@ public class MyClass {
     const text = 'OK';
     const code = 'print("$text", end="")';
 
-    await wt.enterText(find.codeField(), code);
+    await wt.enterText(find.snippetCodeField(), code);
     await wt.pumpAndSettle();
 
     await wt.tapAndSettle(find.runOrCancelButton());

diff --git a/playground/frontend/playground_components/lib/src/widgets/output/result_tab_content.dart b/playground/frontend/playground_components/lib/src/widgets/output/result_tab_content.dart
@@ -17,6 +17,7 @@
  */
 
 import 'package:flutter/material.dart';
+import 'package:flutter_code_editor/flutter_code_editor.dart';
 
 import '../../constants/sizes.dart';
 import '../../controllers/playground_controller.dart';
@@ -38,36 +39,30 @@ class ResultTabContent extends StatefulWidget {
 
 class _ResultTabContentState extends State<ResultTabContent> {
   final ScrollController _scrollController = ScrollController();
+  final CodeController _codeController = CodeController();
 
   @override
-  Widget build(BuildContext context) {
-    final ext = Theme.of(context).extension<BeamThemeExtension>()!;
+  void initState() {
+    super.initState();
+    widget.playgroundController.codeRunner.addListener(_updateText);
+    widget.playgroundController.resultFilterController.addListener(
+      _updateText,
+    );
+    _updateText();
+  }
 
-    return UnreadClearer(
-      controller: widget.playgroundController.codeRunner.unreadController,
-      unreadKey: UnreadEntryEnum.result,
-      child: AnimatedBuilder(
-        animation: widget.playgroundController.codeRunner,
-        builder: (context, child) => SingleChildScrollView(
-          controller: _scrollController,
-          child: Scrollbar(
-            thumbVisibility: true,
-            trackVisibility: true,
-            controller: _scrollController,
-            child: Padding(
-              padding: const EdgeInsets.all(BeamSizes.size16),
-              child: AnimatedBuilder(
-                animation: widget.playgroundController.resultFilterController,
-                builder: (context, child) => SelectableText(
-                  _getText(),
-                  style: ext.codeRootStyle,
-                ),
-              ),
-            ),
-          ),
-        ),
-      ),
+  void _updateText() {
+    _codeController.fullText = _getText();
+  }
+
+  @override
+  void dispose() {
+    _codeController.dispose();
+    widget.playgroundController.resultFilterController.removeListener(
+      _updateText,
     );
+    widget.playgroundController.codeRunner.removeListener(_updateText);
+    super.dispose();
   }
 
   String _getText() {
@@ -82,4 +77,46 @@ class _ResultTabContentState extends State<ResultTabContent> {
         return widget.playgroundController.codeRunner.resultLogOutput;
     }
   }
+
+  @override
+  Widget build(BuildContext context) {
+    final ext = Theme.of(context).extension<BeamThemeExtension>()!;
+
+    return UnreadClearer(
+      controller: widget.playgroundController.codeRunner.unreadController,
+      unreadKey: UnreadEntryEnum.result,
+      child: ColoredBox(
+        // TODO(alexeyinkin): Migrate to Material 3: https://github.com/apache/beam/issues/24610
+        color: Theme.of(context).backgroundColor,
+        child: AnimatedBuilder(
+          animation: widget.playgroundController.codeRunner,
+          builder: (context, child) => SingleChildScrollView(
+            controller: _scrollController,
+            child: Scrollbar(
+              thumbVisibility: true,
+              trackVisibility: true,
+              controller: _scrollController,
+              child: Padding(
+                padding: const EdgeInsets.all(BeamSizes.size16),
+                child: AnimatedBuilder(
+                  animation: widget.playgroundController.resultFilterController,
+                  builder: (context, child) {
+                    return CodeTheme(
+                      data: ext.codeTheme,
+                      child: CodeField(
+                        readOnly: true,
+                        controller: _codeController,
+                        gutterStyle: GutterStyle.none,
+                        textStyle: ext.codeRootStyle,
+                      ),
+                    );
+                  },
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
 }
diff --git a/playground/frontend/playground_components_dev/lib/src/common_finders.dart b/playground/frontend/playground_components_dev/lib/src/common_finders.dart
@@ -24,8 +24,11 @@ import 'package:playground_components/playground_components.dart';
 import 'finder.dart';
 
 extension CommonFindersExtension on CommonFinders {
-  Finder codeField() {
-    return byType(CodeField);
+  Finder snippetCodeField() {
+    return find.descendant(
+      of: find.byType(SnippetEditor),
+      matching: byType(CodeField),
+    );
   }
 
   Finder dropdownMenuItemWithText(String text) {
@@ -40,10 +43,10 @@ extension CommonFindersExtension on CommonFinders {
     return widgetWithText(OutputTab, 'Graph');
   }
 
-  Finder outputSelectableText() {
+  Finder outputCodeField() {
     return find.descendant(
       of: find.outputWidget(),
-      matching: find.byType(SelectableText),
+      matching: byType(CodeField),
     );
   }
 

diff --git a/playground/frontend/playground_components_dev/lib/src/widget_tester.dart b/playground/frontend/playground_components_dev/lib/src/widget_tester.dart
@@ -32,7 +32,7 @@ import 'expect.dart';
 extension WidgetTesterExtension on WidgetTester {
   //workaround for https://github.com/flutter/flutter/issues/120060
   Future<void> enterCodeFieldText(String text) async {
-    final codeField = widget(find.codeField());
+    final codeField = widget(find.snippetCodeField());
     (codeField as CodeField).controller.fullText = text;
     codeField.focusNode?.requestFocus();
   }
@@ -48,7 +48,7 @@ extension WidgetTesterExtension on WidgetTester {
   }
 
   CodeController findOneCodeController() {
-    final codeField = find.codeField();
+    final codeField = find.snippetCodeField();
     expect(codeField, findsOneWidget);
 
     return widget<CodeField>(codeField).controller;
@@ -66,14 +66,12 @@ extension WidgetTesterExtension on WidgetTester {
   }
 
   String? findOutputText() {
-    final selectableText = find.outputSelectableText();
-    expect(selectableText, findsOneWidget);
-
-    return widget<SelectableText>(selectableText).data;
+    final codeField = widget(find.outputCodeField());
+    return (codeField as CodeField).controller.text;
   }
 
   PlaygroundController findPlaygroundController() {
-    final context = element(find.codeField());
+    final context = element(find.snippetCodeField());
     return context.read<PlaygroundController>();
   }