Only show markdown note on focus

app/lib/blackboard/blackboard_dialog.dart

@@ -17,11 +17,10 @@ import 'package:sharezone/blackboard/blackboard_item.dart';
 import 'package:sharezone/blackboard/blackboard_page.dart';
 import 'package:sharezone/blackboard/blackboard_picture.dart';
 import 'package:sharezone/blackboard/blocs/blackboard_dialog_bloc.dart';
-import 'package:sharezone/main/application_bloc.dart';
 import 'package:sharezone/filesharing/dialog/attach_file.dart';
 import 'package:sharezone/filesharing/dialog/course_tile.dart';
+import 'package:sharezone/main/application_bloc.dart';
 import 'package:sharezone/markdown/markdown_analytics.dart';
-import 'package:sharezone/markdown/markdown_support.dart';
 import 'package:sharezone/widgets/material/list_tile_with_description.dart';
 import 'package:sharezone/widgets/material/save_button.dart';
 import 'package:sharezone_common/api_errors.dart';
@@ -456,28 +455,14 @@ class _TextField extends StatelessWidget {
     final bloc = BlocProvider.of<BlackboardDialogBloc>(context);
     return Padding(
       padding: const EdgeInsets.only(top: 4),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: <Widget>[
-          ListTile(
-            leading: const Icon(Icons.subject),
-            title: PrefilledTextField(
-              prefilledText: initialText,
-              maxLines: null,
-              scrollPadding: const EdgeInsets.all(16.0),
-              keyboardType: TextInputType.multiline,
-              decoration: const InputDecoration(
-                hintText: "Nachricht verfassen",
-                border: InputBorder.none,
-              ),
-              onChanged: bloc.changeText,
-            ),
-          ),
-          const Padding(
-            padding: EdgeInsets.fromLTRB(16, 0, 16, 12),
-            child: MarkdownSupport(),
-          ),
-        ],
+      child: MarkdownField(
+        icon: const Icon(Icons.subject),
+        prefilledText: initialText,
+        inputDecoration: const InputDecoration(
+          hintText: "Nachricht verfassen",
+          border: InputBorder.none,
+        ),
+        onChanged: bloc.changeText,
       ),
     );
   }

app/lib/homework/homework_dialog/homework_dialog.dart

@@ -32,7 +32,6 @@ import 'package:sharezone/homework/homework_dialog/homework_dialog_bloc.dart';
 import 'package:sharezone/main/application_bloc.dart';
 import 'package:sharezone/main/constants.dart';
 import 'package:sharezone/markdown/markdown_analytics.dart';
-import 'package:sharezone/markdown/markdown_support.dart';
 import 'package:sharezone/timetable/src/edit_time.dart';
 import 'package:sharezone/util/next_lesson_calculator/next_lesson_calculator.dart';
 import 'package:sharezone/widgets/material/save_button.dart';
@@ -1034,43 +1033,18 @@ class _DescriptionFieldBase extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return MaxWidthConstraintBox(
-      child: SafeArea(
-        top: false,
-        bottom: false,
-        child: Padding(
-          padding: const EdgeInsets.only(top: 4),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: <Widget>[
-              ListTile(
-                leading: const Icon(Icons.subject),
-                title: PrefilledTextField(
-                  key: HwDialogKeys.descriptionField,
-                  prefilledText: prefilledDescription,
-                  maxLines: null,
-                  scrollPadding: const EdgeInsets.all(16.0),
-                  keyboardType: TextInputType.multiline,
-                  decoration: const InputDecoration(
-                    hintText: "Zusatzinformationen eingeben",
-                    border: InputBorder.none,
-                    enabledBorder: InputBorder.none,
-                    focusedBorder: InputBorder.none,
-                    errorBorder: InputBorder.none,
-                    fillColor: Colors.transparent,
-                  ),
-                  onChanged: onChanged,
-                  textCapitalization: TextCapitalization.sentences,
-                ),
-              ),
-              const Padding(
-                padding: EdgeInsets.fromLTRB(16, 0, 16, 12),
-                child: MarkdownSupport(),
-              ),
-            ],
-          ),
-        ),
+    return MarkdownField(
+      inputDecoration: const InputDecoration(
+        hintText: "Zusatzinformationen eingeben",
+        border: InputBorder.none,
+        enabledBorder: InputBorder.none,
+        focusedBorder: InputBorder.none,
+        errorBorder: InputBorder.none,
+        fillColor: Colors.transparent,
       ),
+      onChanged: onChanged,
+      prefilledText: prefilledDescription,
+      icon: const Icon(Icons.subject),
     );
   }
 }

app/lib/timetable/timetable_add_event/timetable_add_event_dialog.dart

@@ -19,7 +19,6 @@ import 'package:sharezone/filesharing/dialog/course_tile.dart';
 import 'package:sharezone/homework/homework_dialog/homework_dialog.dart';
 import 'package:sharezone/main/application_bloc.dart';
 import 'package:sharezone/markdown/markdown_analytics.dart';
-import 'package:sharezone/markdown/markdown_support.dart';
 import 'package:sharezone/widgets/material/list_tile_with_description.dart';
 import 'package:sharezone/widgets/material/save_button.dart';
 import 'package:sharezone_widgets/sharezone_widgets.dart';
@@ -560,41 +559,20 @@ class _DescriptionFieldBase extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return MaxWidthConstraintBox(
-      child: SafeArea(
-        top: false,
-        bottom: false,
-        child: Padding(
-          padding: const EdgeInsets.only(top: 4),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: <Widget>[
-              ListTile(
-                leading: const Icon(Icons.subject),
-                title: PrefilledTextField(
-                  key: textFieldKey,
-                  prefilledText: prefilledDescription,
-                  maxLines: null,
-                  scrollPadding: const EdgeInsets.all(16.0),
-                  keyboardType: TextInputType.multiline,
-                  decoration: InputDecoration(
-                    hintText: hintText,
-                    border: InputBorder.none,
-                    enabledBorder: InputBorder.none,
-                    focusedBorder: InputBorder.none,
-                    errorBorder: InputBorder.none,
-                    fillColor: Colors.transparent,
-                  ),
-                  onChanged: onChanged,
-                  textCapitalization: TextCapitalization.sentences,
-                ),
-              ),
-              const Padding(
-                padding: EdgeInsets.fromLTRB(16, 0, 16, 12),
-                child: MarkdownSupport(),
-              ),
-            ],
-          ),
+    return Padding(
+      padding: const EdgeInsets.only(top: 4),
+      child: MarkdownField(
+        textFieldKey: textFieldKey,
+        onChanged: onChanged,
+        icon: const Icon(Icons.subject),
+        prefilledText: prefilledDescription,
+        inputDecoration: InputDecoration(
+          hintText: hintText,
+          border: InputBorder.none,
+          enabledBorder: InputBorder.none,
+          focusedBorder: InputBorder.none,
+          errorBorder: InputBorder.none,
+          fillColor: Colors.transparent,
         ),
       ),
     );

app/lib/timetable/timetable_edit/event/timetable_event_edit_page.dart

@@ -15,7 +15,6 @@ import 'package:group_domain_models/group_domain_models.dart';
 import 'package:sharezone/calendrical_events/models/calendrical_event.dart';
 import 'package:sharezone/main/application_bloc.dart';
 import 'package:sharezone/markdown/markdown_analytics.dart';
-import 'package:sharezone/markdown/markdown_support.dart';
 import 'package:sharezone/timetable/src/edit_date.dart';
 import 'package:sharezone/timetable/src/edit_time.dart';
 import 'package:sharezone/timetable/timetable_page/lesson/timetable_lesson_sheet.dart';
@@ -362,9 +361,9 @@ class _DetailField extends StatelessWidget {
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: <Widget>[
-            PrefilledTextField(
+            MarkdownField(
               prefilledText: initialEvent.detail,
-              decoration: InputDecoration(
+              inputDecoration: InputDecoration(
                 icon: const Padding(
                   padding: EdgeInsets.only(left: 6),
                   child: Icon(Icons.details),
@@ -373,8 +372,6 @@ class _DetailField extends StatelessWidget {
                 labelText: isExam ? "Themen der Prüfung" : "Details",
               ),
               onChanged: bloc.changeDetail,
-              textInputAction: TextInputAction.newline,
-              maxLines: null,
             ),
             const SizedBox(height: 8),
             const MarkdownSupport(),

lib/sharezone_widgets/lib/sharezone_widgets.dart

@@ -100,3 +100,7 @@ export 'src/expanded_chip.dart';
 
 // wrapper
 export 'src/wrapper.dart';
+
+// markdown
+export 'src/markdown/markdown_field.dart';
+export 'src/markdown/markdown_support.dart';

lib/sharezone_widgets/lib/src/markdown/markdown_field.dart

@@ -0,0 +1,113 @@
+// Copyright (c) 2024 Sharezone UG (haftungsbeschränkt)
+// Licensed under the EUPL-1.2-or-later.
+//
+// You may obtain a copy of the Licence at:
+// https://joinup.ec.europa.eu/software/page/eupl
+//
+// SPDX-License-Identifier: EUPL-1.2
+
+import 'package:flutter/material.dart';
+import 'package:sharezone_widgets/sharezone_widgets.dart';
+
+class MarkdownField extends StatefulWidget {
+  const MarkdownField({
+    super.key,
+    required this.onChanged,
+    this.textFieldKey,
+    this.prefilledText,
+    this.inputDecoration,
+    this.icon,
+    this.focusNode,
+  });
+
+  final Function(String) onChanged;
+
+  /// Key for the [PrefilledTextField] (used for testing).
+  final Key? textFieldKey;
+
+  final String? prefilledText;
+  final InputDecoration? inputDecoration;
+  final Widget? icon;
+  final FocusNode? focusNode;
+
+  @override
+  State<MarkdownField> createState() => MarkdownFieldState();
+}
+
+class MarkdownFieldState extends State<MarkdownField> {
+  bool isFocused = false;
+  late FocusNode focusNode;
+  late TextEditingController controller;
+
+  @override
+  void initState() {
+    super.initState();
+    focusNode = widget.focusNode ?? FocusNode();
+    focusNode.addListener(onFocusChange);
+  }
+
+  @override
+  void dispose() {
+    focusNode.removeListener(onFocusChange);
+    focusNode.dispose();
+    super.dispose();
+  }
+
+  void onFocusChange() {
+    setState(() {
+      isFocused = focusNode.hasFocus;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaxWidthConstraintBox(
+      child: SafeArea(
+        bottom: false,
+        top: false,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: <Widget>[
+            ListTile(
+              leading: widget.icon,
+              title: PrefilledTextField(
+                key: widget.textFieldKey,
+                prefilledText: widget.prefilledText,
+                focusNode: focusNode,
+                maxLines: null,
+                scrollPadding: const EdgeInsets.all(16.0),
+                keyboardType: TextInputType.multiline,
+                decoration: widget.inputDecoration,
+                onChanged: widget.onChanged,
+                textCapitalization: TextCapitalization.sentences,
+                textInputAction: TextInputAction.newline,
+              ),
+            ),
+            AnimatedSwitcher(
+              duration: const Duration(milliseconds: 250),
+              transitionBuilder: (child, animation) {
+                return FadeTransition(
+                  opacity: animation,
+                  child: SlideTransition(
+                    position: Tween<Offset>(
+                      begin: const Offset(0, -0.1),
+                      end: Offset.zero,
+                    ).animate(animation),
+                    child: child,
+                  ),
+                );
+              },
+              child: isFocused
+                  ? Padding(
+                      key: ValueKey(isFocused),
+                      padding: const EdgeInsets.fromLTRB(67, 0, 16, 12),
+                      child: const MarkdownSupport(),
+                    )
+                  : SizedBox(key: ValueKey(isFocused)),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/sharezone_widgets/lib/src/markdown/markdown_support.dart

@@ -0,0 +1,35 @@
+// Copyright (c) 2022 Sharezone UG (haftungsbeschränkt)
+// Licensed under the EUPL-1.2-or-later.
+//
+// You may obtain a copy of the Licence at:
+// https://joinup.ec.europa.eu/software/page/eupl
+//
+// SPDX-License-Identifier: EUPL-1.2
+
+import 'package:flutter/material.dart';
+
+class MarkdownSupport extends StatelessWidget {
+  const MarkdownSupport({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    const style = TextStyle(color: Colors.grey, fontSize: 14);
+    return const Text.rich(
+      TextSpan(
+        children: <TextSpan>[
+          TextSpan(text: "Markdown: "),
+          TextSpan(
+            text: "**fett**",
+            style: TextStyle(fontWeight: FontWeight.bold),
+          ),
+          TextSpan(text: ", "),
+          TextSpan(
+            text: "*kursiv*",
+            style: TextStyle(fontStyle: FontStyle.italic),
+          ),
+        ],
+        style: style,
+      ),
+    );
+  }
+}