Add simple markdown toolbar

LinwoodDev · Oct 30, 2023 · 61275a8 · 61275a8
1 parent 8c310aa
commit 61275a8
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 9 deletions.
diff --git a/app/lib/l10n/app_en.arb b/app/lib/l10n/app_en.arb
@@ -270,5 +270,14 @@
   },
   "deleteLabelDescription": "Are you sure you want to delete the label {name}?",
   "label": "Label",
-  "startOfWeek": "Start of week"
+  "startOfWeek": "Start of week",
+  "headlineNumber": "Headline {number}",
+  "@headlineNumber": {
+    "placeholders": {
+      "number": {
+        "type": "int",
+        "example": "1"
+      }
+    }
+  }
 }
diff --git a/app/lib/pages/notes/card.dart b/app/lib/pages/notes/card.dart
@@ -1,3 +1,6 @@
+import 'dart:math';
+
+import 'package:collection/collection.dart';
 import 'package:flow/helpers/sourced_paging_controller.dart';
 import 'package:flow/widgets/color.dart';
 import 'package:flow/widgets/markdown_field.dart';
@@ -36,8 +39,10 @@ class NoteCard extends StatefulWidget {
   State<NoteCard> createState() => _NoteCardState();
 }
 
+enum PastePositing { line, selection }
+
 class _NoteCardState extends State<NoteCard> {
-  late final TextEditingController _nameController;
+  late final TextEditingController _nameController, _descriptionController;
   late Note _newNote;
   late final FlowCubit _cubit;
   late final SourceService _sourceService;
@@ -52,6 +57,8 @@ class _NoteCardState extends State<NoteCard> {
   void initState() {
     super.initState();
     _nameController = TextEditingController(text: widget.note.name);
+    _descriptionController =
+        TextEditingController(text: widget.note.description);
     _newNote = widget.note;
     _cubit = context.read<FlowCubit>();
     _sourceService = _cubit.getService(widget.source);
@@ -85,6 +92,26 @@ class _NoteCardState extends State<NoteCard> {
     }
   }
 
+  void _addDescription(PastePositing position, String text) {
+    var description = _descriptionController.text;
+    final selection = _descriptionController.selection;
+    if (!selection.isValid) return;
+    final start = selection.baseOffset;
+    final lineStart = max(0, description.lastIndexOf("\n", start));
+    description = switch (position) {
+      PastePositing.line => description.substring(0, lineStart) +
+          text +
+          description.substring(lineStart),
+      PastePositing.selection => description.substring(0, start) +
+          text +
+          description.substring(selection.extentOffset),
+    };
+    _descriptionController.text = description;
+    _descriptionController.selection = TextSelection.collapsed(
+      offset: start + text.length,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return Card(
@@ -302,12 +329,32 @@ class _NoteCardState extends State<NoteCard> {
               ]),
             ),
             const SizedBox(height: 16),
+            if (widget.primary)
+              SizedBox(
+                height: 50,
+                child: ListView(scrollDirection: Axis.horizontal, children: [
+                  ...[
+                    PhosphorIconsLight.textHOne,
+                    PhosphorIconsLight.textHTwo,
+                    PhosphorIconsLight.textHThree,
+                    PhosphorIconsLight.textHFour,
+                    PhosphorIconsLight.textHFive,
+                    PhosphorIconsLight.textHSix
+                  ].mapIndexed((index, element) => IconButton(
+                        icon: PhosphorIcon(element),
+                        onPressed: () => _addDescription(
+                          PastePositing.line,
+                          "${"#" * (index + 1)} ",
+                        ),
+                      ))
+                ]),
+              ),
             MarkdownField(
               decoration: InputDecoration(
                 labelText: AppLocalizations.of(context).description,
                 border: const OutlineInputBorder(),
               ),
-              value: _newNote.description,
+              controller: _descriptionController,
               onChangeEnd: (value) {
                 _newNote = _newNote.copyWith(description: value);
                 _updateNote();

diff --git a/app/lib/widgets/markdown_field.dart b/app/lib/widgets/markdown_field.dart
@@ -5,14 +5,16 @@ import 'package:url_launcher/url_launcher_string.dart';
 import 'package:markdown/markdown.dart' as md;
 
 class MarkdownField extends StatefulWidget {
-  final String value;
+  final String? value;
   final InputDecoration decoration;
+  final TextEditingController? controller;
   final ValueChanged<String>? onChanged, onChangeEnd;
   final List<Widget> actions;
 
   const MarkdownField(
       {super.key,
-      required this.value,
+      this.value,
+      this.controller,
       this.onChanged,
       this.onChangeEnd,
       this.decoration = const InputDecoration(),
@@ -23,14 +25,15 @@ class MarkdownField extends StatefulWidget {
 }
 
 class _MarkdownFieldState extends State<MarkdownField> {
-  final TextEditingController _controller = TextEditingController();
+  late final TextEditingController _controller;
   bool _editMode = false;
   final FocusNode _focusNode = FocusNode();
 
   @override
   void initState() {
     super.initState();
-    _controller.text = widget.value;
+    _controller =
+        widget.controller ?? TextEditingController(text: widget.value);
     _focusNode.addListener(() {
       if (!_focusNode.hasFocus) {
         _exitEditMode();
@@ -42,7 +45,7 @@ class _MarkdownFieldState extends State<MarkdownField> {
   void didUpdateWidget(MarkdownField oldWidget) {
     super.didUpdateWidget(oldWidget);
     if (oldWidget.value != widget.value) {
-      _controller.text = widget.value;
+      _controller.text = widget.value ?? _controller.text;
     }
   }
 

diff --git a/app/lib/widgets/source_dropdown.dart b/app/lib/widgets/source_dropdown.dart
@@ -33,7 +33,6 @@ class SourceDropdown<T> extends StatelessWidget {
         })
         .whereNotNull()
         .toList());
-    final remotes = services.keys.map((e) => cubit.sourcesService.getRemote(e));
     return Column(
       children: [
         const SizedBox(height: 16),