[Chat-ng]: Appflowy Editor editor integration

.changes/2332-chat-ng-editor.md

@@ -0,0 +1 @@
+- Chat-NG now supports Appflowy editor with proper markdown support. Some/Other features might be disabled or limited for now.

app/integration_test/tests/pins.dart

@@ -1,5 +1,5 @@
 import 'package:acter/common/utils/constants.dart';
-import 'package:acter/common/widgets/html_editor.dart';
+import 'package:acter/common/widgets/html_editor/html_editor.dart';
 import 'package:acter/common/widgets/spaces/select_space_form_field.dart';
 import 'package:acter/features/home/data/keys.dart';
 import 'package:acter/features/pins/pages/create_pin_page.dart';

app/lib/common/widgets/edit_html_description_sheet.dart

@@ -1,6 +1,6 @@
 import 'package:acter/common/themes/colors/color_scheme.dart';
 import 'package:acter/common/toolkit/buttons/primary_action_button.dart';
-import 'package:acter/common/widgets/html_editor.dart';
+import 'package:acter/common/widgets/html_editor/html_editor.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';

app/lib/common/widgets/html_editor/components/mention_block.dart

@@ -0,0 +1,112 @@
+import 'package:acter/common/widgets/html_editor/components/mention_content.dart';
+import 'package:acter/common/widgets/html_editor/models/mention_block_keys.dart';
+import 'package:acter/common/widgets/html_editor/models/mention_type.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
+
+class MentionBlock extends StatelessWidget {
+  const MentionBlock({
+    super.key,
+    required this.editorState,
+    required this.mention,
+    required this.node,
+    required this.index,
+    required this.textStyle,
+  });
+
+  final EditorState editorState;
+  final Map<String, dynamic> mention;
+  final Node node;
+  final int index;
+  final TextStyle? textStyle;
+
+  @override
+  Widget build(BuildContext context) {
+    final type = MentionType.fromStr(mention[MentionBlockKeys.type]);
+
+    switch (type) {
+      case MentionType.user:
+        final String? userId = mention[MentionBlockKeys.userId] as String?;
+        final String? blockId = mention[MentionBlockKeys.blockId] as String?;
+        final String? displayName =
+            mention[MentionBlockKeys.displayName] as String?;
+
+        if (userId == null) {
+          return const SizedBox.shrink();
+        }
+
+        return _mentionContent(
+          context: context,
+          mentionId: userId,
+          blockId: blockId,
+          editorState: editorState,
+          displayName: displayName,
+          node: node,
+          index: index,
+        );
+      case MentionType.room:
+        final String? roomId = mention[MentionBlockKeys.roomId] as String?;
+        final String? blockId = mention[MentionBlockKeys.blockId] as String?;
+        final String? displayName =
+            mention[MentionBlockKeys.displayName] as String?;
+
+        if (roomId == null) {
+          return const SizedBox.shrink();
+        }
+
+        return _mentionContent(
+          context: context,
+          mentionId: roomId,
+          blockId: blockId,
+          editorState: editorState,
+          displayName: displayName,
+          node: node,
+          index: index,
+        );
+      default:
+        return const SizedBox.shrink();
+    }
+  }
+
+  Widget _mentionContent({
+    required BuildContext context,
+    required EditorState editorState,
+    required String mentionId,
+    String? blockId,
+    required String? displayName,
+    TextStyle? textStyle,
+    required Node node,
+    required int index,
+  }) {
+    final desktopPlatforms = [
+      TargetPlatform.linux,
+      TargetPlatform.macOS,
+      TargetPlatform.windows,
+    ];
+    final mentionContentWidget = MentionContentWidget(
+      mentionId: mentionId,
+      displayName: displayName,
+      textStyle: textStyle,
+      editorState: editorState,
+      node: node,
+      index: index,
+    );
+
+    final Widget content = GestureDetector(
+      onTap: _handleUserTap,
+      behavior: HitTestBehavior.opaque,
+      child: desktopPlatforms.contains(Theme.of(context).platform)
+          ? MouseRegion(
+              cursor: SystemMouseCursors.click,
+              child: mentionContentWidget,
+            )
+          : mentionContentWidget,
+    );
+
+    return content;
+  }
+
+  void _handleUserTap() {
+    // Implement user tap action (e.g., show profile, start chat)
+  }
+}

app/lib/common/widgets/html_editor/components/mention_content.dart

@@ -0,0 +1,50 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
+
+class MentionContentWidget extends StatelessWidget {
+  const MentionContentWidget({
+    super.key,
+    required this.mentionId,
+    this.displayName,
+    required this.textStyle,
+    required this.editorState,
+    required this.node,
+    required this.index,
+  });
+
+  final String mentionId;
+  final String? displayName;
+  final TextStyle? textStyle;
+  final EditorState editorState;
+  final Node node;
+  final int index;
+
+  @override
+  Widget build(BuildContext context) {
+    final baseTextStyle = textStyle?.copyWith(
+      color: Theme.of(context).colorScheme.primary,
+      leadingDistribution: TextLeadingDistribution.even,
+    );
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (displayName != null)
+          Text(
+            displayName!,
+            style: baseTextStyle?.copyWith(
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+        const SizedBox(width: 4),
+        Text(
+          mentionId,
+          style: baseTextStyle?.copyWith(
+            fontSize: (baseTextStyle.fontSize ?? 14.0) * 0.9,
+            color: Theme.of(context).hintColor,
+          ),
+        ),
+      ],
+    );
+  }
+}