diff --git a/lib/features/blog_post_create/presentation/pages/blog_post_create_screen.dart b/lib/features/blog_post_create/presentation/pages/blog_post_create_screen.dart index 9fc7892e..48536468 100644 --- a/lib/features/blog_post_create/presentation/pages/blog_post_create_screen.dart +++ b/lib/features/blog_post_create/presentation/pages/blog_post_create_screen.dart @@ -41,6 +41,8 @@ class _BlogPostCreateScreenState extends State { final videoUrlController = TextEditingController(); bool isLoading = false; bool enableMdPanel = false; + bool isPreviewMode = false; + final FocusNode descriptionFocusNode = FocusNode(); @override void initState() { @@ -62,9 +64,326 @@ class _BlogPostCreateScreenState extends State { @override void dispose() { keyboardSubscription.cancel(); + descriptionFocusNode.dispose(); super.dispose(); } + bool _hasFormatting(String prefix, String suffix) { + final text = descriptionController.text; + final selection = descriptionController.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 = descriptionController.text; + final selection = descriptionController.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); + descriptionController.text = newText; + + final newSelection = TextSelection(baseOffset: selection.start, extentOffset: selection.start + unformattedText.length); + descriptionController.selection = newSelection; + } 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; + descriptionController.text = newText; + + final newCursorPosition = cursorPosition - prefix.length; + descriptionController.selection = TextSelection.collapsed(offset: newCursorPosition); + } + } + } + + void _applyMarkdownFormat(String prefix, String suffix) { + final text = descriptionController.text; + final selection = descriptionController.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); + descriptionController.text = newText; + + final newSelection = TextSelection(baseOffset: selection.start, extentOffset: selection.start + formattedText.length); + descriptionController.selection = newSelection; + } else { + final cursorPosition = selection.baseOffset; + final newText = '${text.substring(0, cursorPosition)}$prefix$suffix${text.substring(cursorPosition)}'; + descriptionController.text = newText; + + final newCursorPosition = cursorPosition + prefix.length; + descriptionController.selection = TextSelection.collapsed(offset: newCursorPosition); + } + } + + 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 = descriptionController.text; + final selection = descriptionController.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); + descriptionController.text = newText; + + final newSelection = TextSelection(baseOffset: selection.start, extentOffset: selection.start + linkText.length); + descriptionController.selection = newSelection; + } else { + final formattedText = '[$selectedText](url)'; + final newText = text.replaceRange(selection.start, selection.end, formattedText); + descriptionController.text = newText; + + final newSelection = TextSelection(baseOffset: selection.start + selectedText.length + 2, extentOffset: selection.start + selectedText.length + 5); + descriptionController.selection = newSelection; + } + } else { + _applyMarkdownFormat('[', '](url)'); + } + } + + void _applyHorizontalRule() { + final cursorPosition = descriptionController.selection.baseOffset; + final text = descriptionController.text; + final newText = '${text.substring(0, cursorPosition)}\n---\n${text.substring(cursorPosition)}'; + descriptionController.text = newText; + + final newCursorPosition = cursorPosition + 5; + descriptionController.selection = TextSelection.collapsed(offset: newCursorPosition); + } + + void _togglePreview() { + setState(() { + isPreviewMode = !isPreviewMode; + }); + + if (!isPreviewMode) { + Future.delayed(const Duration(milliseconds: 100), () { + descriptionFocusNode.requestFocus(); + }); + } else { + descriptionFocusNode.unfocus(); + } + } + + Widget _buildMarkdownPreview() { + return Container( + height: 120, + 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(descriptionController.text)), + ); + } + + Widget _parseMarkdown(String text) { + if (text.isEmpty) { + return const Text( + 'Описание', + style: TextStyle(fontSize: 16, color: Color(0xFF323F4B), fontWeight: FontWeight.w500), + ); + } + + 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 BlocProvider( @@ -132,7 +451,7 @@ class _BlogPostCreateScreenState extends State { Widget _mdButton(IconData icon, Function() onTap) { return Expanded( child: GestureDetector( - onTap: () {}, + onTap: onTap, child: Container( height: 36, decoration: BoxDecoration(color: const Color(0xFFF1F2F6), borderRadius: BorderRadius.circular(10)), @@ -145,7 +464,7 @@ class _BlogPostCreateScreenState extends State { Widget _mdTextButton(String text, Function() onTap) { return Expanded( child: GestureDetector( - onTap: () {}, + onTap: onTap, child: Container( height: 36, decoration: BoxDecoration(color: const Color(0xFFF1F2F6), borderRadius: BorderRadius.circular(10)), @@ -164,39 +483,43 @@ class _BlogPostCreateScreenState extends State { return Scaffold( resizeToAvoidBottomInset: true, floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, - floatingActionButton: enableMdPanel + floatingActionButton: enableMdPanel || isPreviewMode ? 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).withValues(alpha: 0.2), spreadRadius: 0, blurRadius: 32, offset: const Offset(0, 0))], + if (!isPreviewMode) ...[ + 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).withValues(alpha: 0.2), 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), + ], + ), ), - child: Row( - children: [ - const SizedBox(width: 8), - _mdTextButton('H', () {}), - const SizedBox(width: 8), - _mdButton(Icons.format_bold, () {}), - const SizedBox(width: 8), - _mdButton(Icons.format_italic, () {}), - const SizedBox(width: 8), - _mdButton(Icons.format_list_numbered, () {}), - const SizedBox(width: 8), - _mdButton(Icons.format_list_bulleted, () {}), - const SizedBox(width: 8), - _mdButton(Icons.link, () {}), - const SizedBox(width: 8), - _mdButton(Icons.horizontal_rule, () {}), - const SizedBox(width: 8), - ], - ), - ), - const SizedBox(width: 8), + const SizedBox(width: 8), + ], Container( width: 52, height: 52, @@ -206,7 +529,7 @@ class _BlogPostCreateScreenState extends State { borderRadius: BorderRadius.circular(20), boxShadow: [BoxShadow(color: const Color(0x00000000).withValues(alpha: 0.2), spreadRadius: 0, blurRadius: 32, offset: const Offset(0, 0))], ), - child: Row(children: [_mdButton(Icons.visibility, () {})]), + child: Row(children: [_mdButton(isPreviewMode ? Icons.edit : Icons.visibility, _togglePreview)]), ), ], ) @@ -224,7 +547,15 @@ class _BlogPostCreateScreenState extends State { const SizedBox(height: 16), const Text('Описание'), const SizedBox(height: 8), - CustomTextFormField(key: AppKeys.blogPostCreateScreenContentTextField, controller: descriptionController, maxLines: 6, minLines: 4), + isPreviewMode + ? _buildMarkdownPreview() + : CustomTextFormField( + key: AppKeys.blogPostCreateScreenContentTextField, + controller: descriptionController, + focusNode: descriptionFocusNode, + maxLines: 6, + minLines: 4, + ), const SizedBox(height: 16), if (videoUrlController.text.isEmpty) const Text('Изображение поста'), if (videoUrlController.text.isEmpty) const SizedBox(height: 8),