feat(md): Issue-746

2025-10-29 17:27:05 +03:00
parent 8799375880
commit 977b7150fe
1 changed files with 364 additions and 33 deletions
--- 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<BlogPostCreateScreen> {
  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<BlogPostCreateScreen> {
  @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 = <Widget>[];
+
+    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 = <TextSpan>[];
+    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<BlogPostCreateCubit>(
@@ -132,7 +451,7 @@ class _BlogPostCreateScreenState extends State<BlogPostCreateScreen> {
  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<BlogPostCreateScreen> {
  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<BlogPostCreateScreen> {
    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<BlogPostCreateScreen> {
                    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<BlogPostCreateScreen> {
            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),