Create editor widget

lib/pages/create_post.dart

@@ -15,8 +15,8 @@ import '../util/extensions/api.dart';
 import '../util/extensions/spaced.dart';
 import '../util/goto.dart';
 import '../util/pictrs.dart';
+import '../widgets/editor.dart';
 import '../widgets/markdown_mode_icon.dart';
-import '../widgets/markdown_text.dart';
 import '../widgets/radio_picker.dart';
 import 'full_post.dart';
 
@@ -292,28 +292,14 @@ class CreatePostPage extends HookWidget {
       decoration: InputDecoration(labelText: L10n.of(context)!.title),
     );
 
-    final body = IndexedStack(
-      index: showFancy.value ? 1 : 0,
-      children: [
-        TextField(
-          controller: bodyController,
-          focusNode: bodyFocusNode,
-          keyboardType: TextInputType.multiline,
-          textCapitalization: TextCapitalization.sentences,
-          onSubmitted: (_) =>
-              delayed.pending ? () {} : loggedInAction(handleSubmit),
-          maxLines: null,
-          minLines: 5,
-          decoration: InputDecoration(labelText: L10n.of(context)!.body),
-        ),
-        Padding(
-          padding: const EdgeInsets.all(16),
-          child: MarkdownText(
-            bodyController.text,
-            instanceHost: selectedInstance.value,
-          ),
-        ),
-      ],
+    final body = Editor(
+      controller: bodyController,
+      focusNode: bodyFocusNode,
+      onSubmitted: (_) =>
+          delayed.pending ? () {} : loggedInAction(handleSubmit),
+      labelText: L10n.of(context)!.body,
+      instanceHost: selectedInstance.value,
+      fancy: showFancy.value,
     );
 
     return Scaffold(

lib/widgets/editor.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+import 'markdown_text.dart';
+
+/// A text field with added functionality for ease of editing
+class Editor extends HookWidget {
+  final TextEditingController? controller;
+  final FocusNode? focusNode;
+  final ValueChanged<String>? onSubmitted;
+  final int? minLines;
+  final String? labelText;
+  final bool autofocus;
+
+  /// Whether the editor should be preview the contents
+  final bool fancy;
+  final String instanceHost;
+
+  const Editor({
+    Key? key,
+    this.controller,
+    this.focusNode,
+    this.onSubmitted,
+    this.minLines = 5,
+    this.labelText,
+    this.fancy = false,
+    required this.instanceHost,
+    this.autofocus = false,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final defaultController = useTextEditingController();
+    final actualController = controller ?? defaultController;
+
+    if (fancy) {
+      return Padding(
+        padding: const EdgeInsets.all(8),
+        child: MarkdownText(
+          actualController.text,
+          instanceHost: instanceHost,
+        ),
+      );
+    }
+
+    return TextField(
+      controller: actualController,
+      focusNode: focusNode,
+      autofocus: autofocus,
+      keyboardType: TextInputType.multiline,
+      textCapitalization: TextCapitalization.sentences,
+      onSubmitted: onSubmitted,
+      maxLines: null,
+      minLines: minLines,
+      decoration: InputDecoration(labelText: labelText),
+    );
+  }
+}

lib/widgets/write_comment.dart

@@ -5,6 +5,7 @@ import 'package:lemmy_api_client/v3.dart';
 import '../hooks/delayed_loading.dart';
 import '../hooks/logged_in_action.dart';
 import '../l10n/l10n.dart';
+import 'editor.dart';
 import 'markdown_mode_icon.dart';
 import 'markdown_text.dart';
 
@@ -110,25 +111,11 @@ class WriteComment extends HookWidget {
             ),
           ),
           const Divider(),
-          IndexedStack(
-            index: showFancy.value ? 1 : 0,
-            children: [
-              TextField(
-                controller: controller,
-                keyboardType: TextInputType.multiline,
-                textCapitalization: TextCapitalization.sentences,
-                autofocus: true,
-                minLines: 5,
-                maxLines: null,
-              ),
-              Padding(
-                padding: const EdgeInsets.all(16),
-                child: MarkdownText(
-                  controller.text,
-                  instanceHost: post.instanceHost,
-                ),
-              )
-            ],
+          Editor(
+            instanceHost: post.instanceHost,
+            controller: controller,
+            autofocus: true,
+            fancy: showFancy.value,
           ),
           Row(
             mainAxisAlignment: MainAxisAlignment.end,