Add simple WYSIWYG editor for exercise descriptions #189

lib/widgets/add_exercise/add_exercise_html_editor.dart

@@ -0,0 +1,81 @@
+import 'dart:async';
+import 'dart:ffi';
+import 'package:flutter/material.dart';
+import 'package:html_editor_enhanced/html_editor.dart';
+import 'package:provider/provider.dart';
+import 'package:wger/providers/add_exercise.dart';
+
+class AddExerciseHtmlEditor extends StatefulWidget {
+  const AddExerciseHtmlEditor({
+    Key? key,
+    this.helperText = '',
+  }) : super(key: key);
+
+  final String helperText;
+
+  @override
+  _AddExerciseHtmlEditorState createState() => _AddExerciseHtmlEditorState();
+}
+
+class _AddExerciseHtmlEditorState extends State<AddExerciseHtmlEditor> {
+  @override
+  Widget build(BuildContext context) {
+    final addExerciseProvider = context.read<AddExerciseProvider>();
+    final HtmlEditorController editorController = HtmlEditorController(
+        processInputHtml: true,
+        processNewLineAsBr: false,
+        processOutputHtml: true
+    );
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Column(
+        children: [
+          HtmlEditor(
+            controller: editorController,
+            htmlToolbarOptions: const HtmlToolbarOptions(
+                toolbarPosition: ToolbarPosition.belowEditor,
+                toolbarType: ToolbarType.nativeScrollable,
+                defaultToolbarButtons: [
+                  FontButtons(bold: true,
+                      underline: true,
+                      italic: true,
+                      strikethrough: false,
+                      superscript: false,
+                      subscript: false,
+                      clearAll: false
+                  ),
+                  ListButtons(
+                      ol: true,
+                      ul: true,
+                      listStyles: false
+                  ),
+                  ParagraphButtons(
+                      textDirection: false,
+                      lineHeight: false,
+                      caseConverter: false,
+                      increaseIndent: false,
+                      decreaseIndent: false,
+                      alignLeft: false,
+                      alignCenter: false,
+                      alignRight: false,
+                      alignJustify: false
+                  ),
+                ]
+            ),
+            htmlEditorOptions: HtmlEditorOptions(
+              hint: widget.helperText,
+              shouldEnsureVisible: true,
+            ),
+            otherOptions: const OtherOptions(
+              height: 200,
+            ),
+            callbacks: Callbacks(onChangeContent: (String? currentHtml) {
+              addExerciseProvider.descriptionEn = currentHtml!;
+            },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/add_exercise/steps/step3description.dart

@@ -1,9 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:provider/provider.dart';
-import 'package:wger/helpers/exercises/forms.dart';
 import 'package:wger/providers/add_exercise.dart';
-import 'package:wger/widgets/add_exercise/add_exercise_text_area.dart';
+import 'package:wger/widgets/add_exercise/add_exercise_html_editor.dart';
 
 class Step3Description extends StatelessWidget {
   final GlobalKey<FormState> formkey;
@@ -17,13 +16,8 @@ class Step3Description extends StatelessWidget {
       key: formkey,
       child: Column(
         children: [
-          AddExerciseTextArea(
-            onChange: (value) => {},
-            title: '${AppLocalizations.of(context).description}*',
-            isRequired: true,
-            isMultiline: true,
-            validator: (name) => validateDescription(name, context),
-            onSaved: (String? description) => addExerciseProvider.descriptionEn = description!,
+          AddExerciseHtmlEditor(
+            helperText: AppLocalizations.of(context).description,
           ),
         ],
       ),

pubspec.yaml

@@ -58,6 +58,7 @@ dependencies:
   carousel_slider: ^4.1.1
   multi_select_flutter: ^4.1.2
   flutter_svg: ^0.23.0+1
+  html_editor_enhanced: ^2.5.0
 
 dev_dependencies:
   flutter_test: