From dbd92a65ea0bccc5b4edc0ed29695638f1a9346a Mon Sep 17 00:00:00 2001 From: mso7nueh Date: Fri, 31 Oct 2025 00:20:21 +0300 Subject: [PATCH] feat(md): Issue-746 --- lib/common/widgets/markdown_editor.dart | 502 ++++++++++++++++++ .../presentation/create_diet_screen.dart | 32 +- .../presentation/create_plan_screen.dart | 38 +- .../pages/recipe_create_screen.dart | 13 +- .../widgets/info_about_recipe_widget.dart | 14 +- 5 files changed, 566 insertions(+), 33 deletions(-) create mode 100644 lib/common/widgets/markdown_editor.dart diff --git a/lib/common/widgets/markdown_editor.dart b/lib/common/widgets/markdown_editor.dart new file mode 100644 index 00000000..551f1449 --- /dev/null +++ b/lib/common/widgets/markdown_editor.dart @@ -0,0 +1,502 @@ +import 'dart:async'; +import 'package:flutter/material.dart'; +import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart'; +import 'package:eatvio_app/core/widgets/custom_text_form_field.dart'; + +class MarkdownEditor extends StatefulWidget { + const MarkdownEditor({ + super.key, + this.initialText, + this.hintText, + this.hasError = false, + this.minLines = 4, + this.maxLines = 6, + this.heightPreview = 120, + this.onChanged, + this.onToolbarVisibilityChanged, + this.showInlineToolbar = true, + }); + + final String? initialText; + final String? hintText; + final bool hasError; + final int minLines; + final int maxLines; + final double heightPreview; + final void Function(String value)? onChanged; + final void Function(bool visible)? onToolbarVisibilityChanged; + final bool showInlineToolbar; + + @override + State createState() => MarkdownEditorState(); +} + +class MarkdownEditorState extends State { + late final TextEditingController _controller; + final FocusNode _focusNode = FocusNode(); + bool _isPreview = false; + bool _enablePanel = false; + late final KeyboardVisibilityController _keyboardVisibilityController; + late final StreamSubscription _keyboardSubscription; + + bool get isToolbarVisible => _enablePanel || _isPreview; + + @override + void initState() { + super.initState(); + _controller = TextEditingController(text: widget.initialText ?? ''); + _keyboardVisibilityController = KeyboardVisibilityController(); + _keyboardSubscription = _keyboardVisibilityController.onChange.listen((visible) { + setState(() { + _enablePanel = visible; + }); + widget.onToolbarVisibilityChanged?.call(isToolbarVisible); + }); + WidgetsBinding.instance.addPostFrameCallback((_) { + widget.onToolbarVisibilityChanged?.call(isToolbarVisible); + }); + } + + @override + void dispose() { + _keyboardSubscription.cancel(); + _focusNode.dispose(); + _controller.dispose(); + super.dispose(); + } + + bool _hasFormatting(String prefix, String suffix) { + final text = _controller.text; + final selection = _controller.selection; + if (selection.isValid && !selection.isCollapsed) { + final selectedText = text.substring(selection.start, selection.end); + return selectedText.startsWith(prefix) && selectedText.endsWith(suffix); + } else { + final cursorPosition = selection.baseOffset; + if (cursorPosition >= prefix.length && text.length >= cursorPosition + suffix.length) { + final beforeCursor = text.substring(cursorPosition - prefix.length, cursorPosition); + final afterCursor = text.substring(cursorPosition, cursorPosition + suffix.length); + return beforeCursor == prefix && afterCursor == suffix; + } + } + return false; + } + + void _removeFormatting(String prefix, String suffix) { + final text = _controller.text; + final selection = _controller.selection; + if (selection.isValid && !selection.isCollapsed) { + final selectedText = text.substring(selection.start, selection.end); + final unformattedText = selectedText.substring(prefix.length, selectedText.length - suffix.length); + final newText = text.replaceRange(selection.start, selection.end, unformattedText); + _controller.text = newText; + _controller.selection = TextSelection(baseOffset: selection.start, extentOffset: selection.start + unformattedText.length); + } else { + final cursorPosition = selection.baseOffset; + if (cursorPosition >= prefix.length && text.length >= cursorPosition + suffix.length) { + final beforeCursor = text.substring(0, cursorPosition - prefix.length); + final afterCursor = text.substring(cursorPosition + suffix.length); + final newText = beforeCursor + afterCursor; + _controller.text = newText; + _controller.selection = TextSelection.collapsed(offset: cursorPosition - prefix.length); + } + } + widget.onChanged?.call(_controller.text); + } + + void _applyMarkdownFormat(String prefix, String suffix) { + final text = _controller.text; + final selection = _controller.selection; + if (selection.isValid && !selection.isCollapsed) { + final selectedText = text.substring(selection.start, selection.end); + final formattedText = '$prefix$selectedText$suffix'; + final newText = text.replaceRange(selection.start, selection.end, formattedText); + _controller.text = newText; + _controller.selection = TextSelection(baseOffset: selection.start, extentOffset: selection.start + formattedText.length); + } else { + final cursorPosition = selection.baseOffset; + final newText = '${text.substring(0, cursorPosition)}$prefix$suffix${text.substring(cursorPosition)}'; + _controller.text = newText; + _controller.selection = TextSelection.collapsed(offset: cursorPosition + prefix.length); + } + widget.onChanged?.call(_controller.text); + } + + void _applyHeading() { + if (_hasFormatting('# ', '')) { + _removeFormatting('# ', ''); + } else { + _applyMarkdownFormat('# ', ''); + } + } + + void _applyBold() { + if (_hasFormatting('**', '**')) { + _removeFormatting('**', '**'); + } else { + _applyMarkdownFormat('**', '**'); + } + } + + void _applyItalic() { + if (_hasFormatting('*', '*')) { + _removeFormatting('*', '*'); + } else { + _applyMarkdownFormat('*', '*'); + } + } + + void _applyNumberedList() { + if (_hasFormatting('1. ', '')) { + _removeFormatting('1. ', ''); + } else { + _applyMarkdownFormat('1. ', ''); + } + } + + void _applyBulletedList() { + if (_hasFormatting('- ', '')) { + _removeFormatting('- ', ''); + } else { + _applyMarkdownFormat('- ', ''); + } + } + + void _applyLink() { + final text = _controller.text; + final selection = _controller.selection; + if (selection.isValid && !selection.isCollapsed) { + final selectedText = text.substring(selection.start, selection.end); + final linkRegex = RegExp(r'^\[(.*?)\]\((.*?)\)$'); + if (linkRegex.hasMatch(selectedText)) { + final match = linkRegex.firstMatch(selectedText); + final linkText = match?.group(1) ?? selectedText; + final newText = text.replaceRange(selection.start, selection.end, linkText); + _controller.text = newText; + _controller.selection = TextSelection(baseOffset: selection.start, extentOffset: selection.start + linkText.length); + } else { + final formattedText = '[$selectedText](url)'; + final newText = text.replaceRange(selection.start, selection.end, formattedText); + _controller.text = newText; + _controller.selection = TextSelection(baseOffset: selection.start + selectedText.length + 2, extentOffset: selection.start + selectedText.length + 5); + } + } else { + _applyMarkdownFormat('[', '](url)'); + } + widget.onChanged?.call(_controller.text); + } + + void _applyHorizontalRule() { + final cursorPosition = _controller.selection.baseOffset; + final text = _controller.text; + final newText = '${text.substring(0, cursorPosition)}\n---\n${text.substring(cursorPosition)}'; + _controller.text = newText; + _controller.selection = TextSelection.collapsed(offset: cursorPosition + 5); + widget.onChanged?.call(_controller.text); + } + + void _togglePreview() { + setState(() { + _isPreview = !_isPreview; + }); + if (!_isPreview) { + Future.delayed(const Duration(milliseconds: 100), () { + _focusNode.requestFocus(); + }); + } else { + _focusNode.unfocus(); + } + widget.onToolbarVisibilityChanged?.call(isToolbarVisible); + } + + Widget _mdButton(IconData icon, VoidCallback onTap) { + return Expanded( + child: GestureDetector( + onTap: onTap, + child: Container( + height: 36, + decoration: BoxDecoration(color: const Color(0xFFF1F2F6), borderRadius: BorderRadius.circular(10)), + child: Icon(icon), + ), + ), + ); + } + + Widget _mdTextButton(String text, VoidCallback onTap) { + return Expanded( + child: GestureDetector( + onTap: onTap, + child: Container( + height: 36, + decoration: BoxDecoration(color: const Color(0xFFF1F2F6), borderRadius: BorderRadius.circular(10)), + child: Center( + child: Text( + text, + style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w900, color: Colors.black87), + ), + ), + ), + ), + ); + } + + Widget _buildMarkdownPreview(BuildContext context) { + return Container( + height: widget.heightPreview, + padding: const EdgeInsets.all(16), + width: MediaQuery.of(context).size.width - 32, + decoration: BoxDecoration( + color: const Color(0xFFF6F6F6), + borderRadius: BorderRadius.circular(20), + border: Border.all(color: const Color(0xFFE0E0E0)), + ), + child: SingleChildScrollView(child: _parseMarkdown(_controller.text)), + ); + } + + Widget buildToolbar(BuildContext context) { + return Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + width: MediaQuery.of(context).size.width - 76, + height: 52, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(20), + boxShadow: [BoxShadow(color: const Color(0x00000000).withAlpha((255 * 0.2).toInt()), spreadRadius: 0, blurRadius: 32, offset: const Offset(0, 0))], + ), + child: Row( + children: [ + const SizedBox(width: 8), + _mdTextButton('H', _applyHeading), + const SizedBox(width: 8), + _mdButton(Icons.format_bold, _applyBold), + const SizedBox(width: 8), + _mdButton(Icons.format_italic, _applyItalic), + const SizedBox(width: 8), + _mdButton(Icons.format_list_numbered, _applyNumberedList), + const SizedBox(width: 8), + _mdButton(Icons.format_list_bulleted, _applyBulletedList), + const SizedBox(width: 8), + _mdButton(Icons.link, _applyLink), + const SizedBox(width: 8), + _mdButton(Icons.horizontal_rule, _applyHorizontalRule), + const SizedBox(width: 8), + ], + ), + ), + const SizedBox(width: 8), + Container( + width: 52, + height: 52, + padding: const EdgeInsets.symmetric(horizontal: 8), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(20), + boxShadow: [BoxShadow(color: const Color(0x00000000).withAlpha((255 * 0.2).toInt()), spreadRadius: 0, blurRadius: 32, offset: const Offset(0, 0))], + ), + child: Row(children: [_mdButton(_isPreview ? Icons.edit : Icons.visibility, _togglePreview)]), + ), + ], + ); + } + + Widget _parseMarkdown(String text) { + if (text.isEmpty) { + return Text(widget.hintText ?? ''); + } + final lines = text.split('\n'); + final widgets = []; + for (int i = 0; i < lines.length; i++) { + final line = lines[i]; + if (line.trim().isEmpty) { + widgets.add(const SizedBox(height: 8)); + continue; + } + if (line.startsWith('# ')) { + widgets.add( + Text( + line.substring(2), + style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.black), + ), + ); + } else if (line.startsWith('## ')) { + widgets.add( + Text( + line.substring(3), + style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.black), + ), + ); + } else if (line.startsWith('### ')) { + widgets.add( + Text( + line.substring(4), + style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.black), + ), + ); + } else if (line.startsWith('- ') || line.startsWith('* ')) { + widgets.add( + Padding( + padding: const EdgeInsets.only(left: 16), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('• ', style: TextStyle(fontSize: 16)), + Expanded(child: _parseInlineMarkdown(line.substring(2))), + ], + ), + ), + ); + } else if (RegExp(r'^\d+\. ').hasMatch(line)) { + final match = RegExp(r'^(\d+)\. ').firstMatch(line); + final number = match?.group(1) ?? '1'; + widgets.add( + Padding( + padding: const EdgeInsets.only(left: 16), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text('$number. ', style: const TextStyle(fontSize: 16)), + Expanded(child: _parseInlineMarkdown(line.substring(number.length + 2))), + ], + ), + ), + ); + } else if (line.trim() == '---') { + widgets.add(const Divider(color: Colors.grey, thickness: 1)); + } else { + widgets.add(_parseInlineMarkdown(line)); + } + if (i < lines.length - 1) { + widgets.add(const SizedBox(height: 4)); + } + } + return Column(crossAxisAlignment: CrossAxisAlignment.start, children: widgets); + } + + Widget _parseInlineMarkdown(String text) { + final spans = []; + final regex = RegExp(r'(\*\*.*?\*\*|\*.*?\*|\[.*?\]\(.*?\))'); + int lastEnd = 0; + for (final match in regex.allMatches(text)) { + if (match.start > lastEnd) { + spans.add( + TextSpan( + text: text.substring(lastEnd, match.start), + style: const TextStyle(fontSize: 16, color: Colors.black), + ), + ); + } + final matchedText = match.group(0)!; + if (matchedText.startsWith('**') && matchedText.endsWith('**')) { + spans.add( + TextSpan( + text: matchedText.substring(2, matchedText.length - 2), + style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black), + ), + ); + } else if (matchedText.startsWith('*') && matchedText.endsWith('*')) { + spans.add( + TextSpan( + text: matchedText.substring(1, matchedText.length - 1), + style: const TextStyle(fontSize: 16, fontStyle: FontStyle.italic, color: Colors.black), + ), + ); + } else if (matchedText.startsWith('[') && matchedText.contains('](')) { + final linkMatch = RegExp(r'\[(.*?)\]\((.*?)\)').firstMatch(matchedText); + if (linkMatch != null) { + final linkText = linkMatch.group(1)!; + spans.add( + TextSpan( + text: linkText, + style: const TextStyle(fontSize: 16, color: Colors.blue, decoration: TextDecoration.underline), + ), + ); + } + } + lastEnd = match.end; + } + if (lastEnd < text.length) { + spans.add( + TextSpan( + text: text.substring(lastEnd), + style: const TextStyle(fontSize: 16, color: Colors.black), + ), + ); + } + return RichText(text: TextSpan(children: spans)); + } + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (_isPreview) + _buildMarkdownPreview(context) + else + CustomTextFormField( + controller: _controller, + focusNode: _focusNode, + maxLines: widget.maxLines, + minLines: widget.minLines, + hintText: widget.hintText, + hasError: widget.hasError, + onChanged: (value) => widget.onChanged?.call(value), + ), + const SizedBox(height: 8), + if (widget.showInlineToolbar && (isToolbarVisible || !_isPreview)) + Row( + children: [ + Expanded( + child: Container( + height: 52, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(20), + boxShadow: [ + BoxShadow(color: const Color(0x00000000).withAlpha((255 * 0.2).toInt()), spreadRadius: 0, blurRadius: 32, offset: const Offset(0, 0)), + ], + ), + child: Row( + children: [ + const SizedBox(width: 8), + _mdTextButton('H', _applyHeading), + const SizedBox(width: 8), + _mdButton(Icons.format_bold, _applyBold), + const SizedBox(width: 8), + _mdButton(Icons.format_italic, _applyItalic), + const SizedBox(width: 8), + _mdButton(Icons.format_list_numbered, _applyNumberedList), + const SizedBox(width: 8), + _mdButton(Icons.format_list_bulleted, _applyBulletedList), + const SizedBox(width: 8), + _mdButton(Icons.link, _applyLink), + const SizedBox(width: 8), + _mdButton(Icons.horizontal_rule, _applyHorizontalRule), + const SizedBox(width: 8), + ], + ), + ), + ), + const SizedBox(width: 8), + Container( + width: 52, + height: 52, + padding: const EdgeInsets.symmetric(horizontal: 8), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(20), + boxShadow: [ + BoxShadow(color: const Color(0x00000000).withAlpha((255 * 0.2).toInt()), spreadRadius: 0, blurRadius: 32, offset: const Offset(0, 0)), + ], + ), + child: Row(children: [_mdButton(_isPreview ? Icons.edit : Icons.visibility, _togglePreview)]), + ), + ], + ), + ], + ); + } +} diff --git a/lib/features/create_diet/presentation/create_diet_screen.dart b/lib/features/create_diet/presentation/create_diet_screen.dart index 670e20fd..95775e86 100644 --- a/lib/features/create_diet/presentation/create_diet_screen.dart +++ b/lib/features/create_diet/presentation/create_diet_screen.dart @@ -1,3 +1,4 @@ +import 'package:eatvio_app/common/widgets/markdown_editor.dart'; import 'package:eatvio_app/core/locator_service.dart'; import 'package:eatvio_app/core/theme/custom_text_style.dart'; import 'package:eatvio_app/core/theme/theme_helper.dart'; @@ -54,6 +55,8 @@ class _CreateDietScreenContentState extends State { final nameController = TextEditingController(); final descriptionController = TextEditingController(); final scaffoldKey = GlobalKey(); + final GlobalKey _mdKey = GlobalKey(); + bool _mdToolbarVisible = false; @override void initState() { @@ -92,6 +95,8 @@ class _CreateDietScreenContentState extends State { return Scaffold( backgroundColor: appTheme.gray100, + floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, + floatingActionButton: _mdToolbarVisible && _mdKey.currentState != null ? _mdKey.currentState!.buildToolbar(context) : null, appBar: AppBar( centerTitle: true, title: Text( @@ -122,20 +127,19 @@ class _CreateDietScreenContentState extends State { ), if (state.dietNameError != null) ...[const SizedBox(height: 4), ValidationErrorWidget(error: state.dietNameError ?? '')], const SizedBox(height: 12), - SizedBox( - height: 132, - child: CustomTextFormField( - hasError: state.dietDescriptionError != null, - controller: descriptionController, - textAlignVertical: TextAlignVertical.top, - maxLines: null, - minLines: null, - expands: true, - hintText: s.enter_diet_description, - onChanged: (value) { - context.read().setDetails(value); - }, - ), + MarkdownEditor( + key: _mdKey, + initialText: descriptionController.text, + hintText: s.enter_diet_description, + hasError: state.dietDescriptionError != null, + minLines: 6, + maxLines: 8, + showInlineToolbar: false, + onToolbarVisibilityChanged: (v) => setState(() => _mdToolbarVisible = v), + onChanged: (value) { + descriptionController.text = value; + context.read().setDetails(value); + }, ), if (state.dietDescriptionError != null) ...[const SizedBox(height: 4), ValidationErrorWidget(error: state.dietDescriptionError ?? '')], const SizedBox(height: 12), diff --git a/lib/features/create_plan/presentation/create_plan_screen.dart b/lib/features/create_plan/presentation/create_plan_screen.dart index 5536a093..1b0a3e5c 100644 --- a/lib/features/create_plan/presentation/create_plan_screen.dart +++ b/lib/features/create_plan/presentation/create_plan_screen.dart @@ -1,3 +1,4 @@ +import 'package:eatvio_app/common/widgets/markdown_editor.dart'; import 'package:eatvio_app/core/locator_service.dart'; import 'package:eatvio_app/core/theme/custom_text_style.dart'; import 'package:eatvio_app/core/theme/theme_helper.dart'; @@ -32,9 +33,17 @@ class CreatePlanScreen extends StatelessWidget { } } -class CreatePlanScreenContent extends StatelessWidget { +class CreatePlanScreenContent extends StatefulWidget { const CreatePlanScreenContent({super.key}); + @override + State createState() => _CreatePlanScreenContentState(); +} + +class _CreatePlanScreenContentState extends State { + final GlobalKey _mdKey = GlobalKey(); + bool _mdToolbarVisible = false; + @override Widget build(BuildContext context) { final s = S.of(context); @@ -54,6 +63,8 @@ class CreatePlanScreenContent extends StatelessWidget { } return Scaffold( backgroundColor: appTheme.gray100, + floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, + floatingActionButton: _mdToolbarVisible && _mdKey.currentState != null ? _mdKey.currentState!.buildToolbar(context) : null, appBar: AppBar( centerTitle: true, title: Text( @@ -131,20 +142,17 @@ class CreatePlanScreenContent extends StatelessWidget { builder: (context, state) { return Column( children: [ - SizedBox( - height: 132, - child: CustomTextFormField( - hasError: state.validationState.descriptionHasError, - textAlignVertical: TextAlignVertical.top, - maxLength: 1000, - maxLines: null, - minLines: null, - expands: true, - hintText: s.plan_desc_example, - onChanged: (value) { - context.read().setDetails(value); - }, - ), + MarkdownEditor( + key: _mdKey, + hintText: s.plan_desc_example, + hasError: state.validationState.descriptionHasError, + minLines: 6, + maxLines: 8, + showInlineToolbar: false, + onToolbarVisibilityChanged: (v) => setState(() => _mdToolbarVisible = v), + onChanged: (value) { + context.read().setDetails(value); + }, ), if (state.validationState.descriptionHasError) ...[ const SizedBox(height: 4), diff --git a/lib/features/create_recipe/presentation/pages/recipe_create_screen.dart b/lib/features/create_recipe/presentation/pages/recipe_create_screen.dart index d230bd1a..c8a6d4ef 100644 --- a/lib/features/create_recipe/presentation/pages/recipe_create_screen.dart +++ b/lib/features/create_recipe/presentation/pages/recipe_create_screen.dart @@ -8,6 +8,7 @@ import 'package:eatvio_app/core/widgets/success_published_recipe_bottom_sheet.da import 'package:eatvio_app/features/create_recipe/presentation/bloc/create_recipe_cubit/create_recipe_cubit.dart'; import 'package:eatvio_app/features/create_recipe/presentation/bloc/create_recipe_cubit/create_recipe_state.dart'; import 'package:eatvio_app/features/create_recipe/presentation/widgets/info_about_recipe_widget.dart'; +import 'package:eatvio_app/common/widgets/markdown_editor.dart'; import 'package:eatvio_app/features/create_recipe/presentation/widgets/ingredients_widget.dart'; import 'package:eatvio_app/features/create_recipe/presentation/widgets/steps_widget.dart'; import 'package:eatvio_app/features/feed/models/recipes_model.dart'; @@ -30,6 +31,8 @@ class RecipeCreateScreen extends StatefulWidget { class _RecipeCreateScreenState extends State { late final CreateRecipeCubit createRecipeCubit; + final GlobalKey _mdKey = GlobalKey(); + bool _mdToolbarVisible = false; @override void initState() { @@ -54,6 +57,10 @@ class _RecipeCreateScreenState extends State { } else { return Scaffold( backgroundColor: const Color(0xFFF0F2F5), + floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, + floatingActionButton: _mdToolbarVisible && _mdKey.currentState != null + ? _mdKey.currentState!.buildToolbar(context) + : null, appBar: AppBar( title: widget.recipe != null ? const Text('Редактирование рецепта') : const Text('Добавление рецепта'), centerTitle: true, @@ -65,7 +72,11 @@ class _RecipeCreateScreenState extends State { child: Column( spacing: 16, children: [ - InfoAboutRecipeWidget(createRecipeCubit: createRecipeCubit), + InfoAboutRecipeWidget( + createRecipeCubit: createRecipeCubit, + markdownEditorKey: _mdKey, + onMarkdownToolbarVisibilityChanged: (v) => setState(() => _mdToolbarVisible = v), + ), const IngredientsWidget(), StepsWidget(createRecipeCubit: createRecipeCubit), BlocBuilder( diff --git a/lib/features/create_recipe/presentation/widgets/info_about_recipe_widget.dart b/lib/features/create_recipe/presentation/widgets/info_about_recipe_widget.dart index 7ce4d26d..0eb609e4 100644 --- a/lib/features/create_recipe/presentation/widgets/info_about_recipe_widget.dart +++ b/lib/features/create_recipe/presentation/widgets/info_about_recipe_widget.dart @@ -1,3 +1,4 @@ +import 'package:eatvio_app/common/widgets/markdown_editor.dart'; import 'package:eatvio_app/app_keys.dart'; import 'package:eatvio_app/core/data/selectionPopupModel/selection_popup_model.dart'; import 'package:eatvio_app/core/theme/theme_helper.dart'; @@ -16,8 +17,10 @@ import 'package:flutter_bloc/flutter_bloc.dart'; class InfoAboutRecipeWidget extends StatefulWidget { final CreateRecipeCubit createRecipeCubit; + final GlobalKey? markdownEditorKey; + final void Function(bool visible)? onMarkdownToolbarVisibilityChanged; - const InfoAboutRecipeWidget({super.key, required this.createRecipeCubit}); + const InfoAboutRecipeWidget({super.key, required this.createRecipeCubit, this.markdownEditorKey, this.onMarkdownToolbarVisibilityChanged}); @override State createState() => _InfoAboutRecipeWidgetState(); @@ -105,19 +108,24 @@ class _InfoAboutRecipeWidgetState extends State { builder: (context, state) { return Column( children: [ - CustomTextFormField( + KeyedSubtree( key: AppKeys.recipeCreateScreenDescriptionField, + child: MarkdownEditor( + key: widget.markdownEditorKey, hintText: 'Расскажите, почему вы выбрали именно этот рецепт? Опишите, каким будет готовое блюдо и в чём его достоинства.', minLines: 5, - initialValue: state.entity.description, maxLines: 5, + initialText: state.entity.description, hasError: state.descriptionValidationError != null, + showInlineToolbar: false, + onToolbarVisibilityChanged: widget.onMarkdownToolbarVisibilityChanged, onChanged: (value) { widget.createRecipeCubit.replaceDescription(value); if (state.descriptionValidationError != null) { widget.createRecipeCubit.validateDescription(); } }, + ), ), if (state.descriptionValidationError != null) ...[ const SizedBox(height: 4),