[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,92 @@
+import 'package:acter/common/providers/room_providers.dart';
+import 'package:acter/common/widgets/html_editor/models/mention_block_keys.dart';
+import 'package:acter_avatar/acter_avatar.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class MentionBlock extends ConsumerWidget {
+  const MentionBlock({
+    super.key,
+    required this.node,
+    required this.index,
+    required this.mention,
+    required this.userRoomId,
+  });
+
+  final Map<String, dynamic> mention;
+  final String userRoomId;
+  final Node node;
+  final int index;
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final String type = mention[MentionBlockKeys.type];
+    final String displayName = mention[MentionBlockKeys.displayName];
+    final String mentionId = type == 'user'
+        ? mention[MentionBlockKeys.userId]
+        : mention[MentionBlockKeys.roomId];
+    final avatarInfo = type == 'user'
+        ? ref.watch(
+            memberAvatarInfoProvider((roomId: userRoomId, userId: mentionId)),
+          )
+        : ref.watch(roomAvatarInfoProvider(mentionId));
+    final options = type == 'user'
+        ? AvatarOptions.DM(avatarInfo, size: 8)
+        : AvatarOptions(avatarInfo, size: 16);
+
+    return _mentionContent(
+      context: context,
+      mentionId: mentionId,
+      displayName: displayName,
+      avatarOptions: options,
+      ref: ref,
+    );
+  }
+
+  Widget _mentionContent({
+    required BuildContext context,
+    required String mentionId,
+    required String displayName,
+    required WidgetRef ref,
+    required AvatarOptions avatarOptions,
+  }) {
+    final desktopPlatforms = [
+      TargetPlatform.linux,
+      TargetPlatform.macOS,
+      TargetPlatform.windows,
+    ];
+    final name = displayName.isNotEmpty ? displayName : mentionId;
+    final mentionContentWidget = Container(
+      padding: const EdgeInsets.symmetric(horizontal: 12),
+      decoration: BoxDecoration(
+        color: Theme.of(context).unselectedWidgetColor,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          ActerAvatar(options: avatarOptions),
+          const SizedBox(width: 4),
+          Text(name, style: Theme.of(context).textTheme.bodyMedium),
+        ],
+      ),
+    );
+
+    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_item.dart

@@ -0,0 +1,50 @@
+import 'package:acter/common/utils/constants.dart';
+import 'package:acter/common/widgets/html_editor/models/mention_type.dart';
+import 'package:acter_avatar/acter_avatar.dart';
+import 'package:flutter/material.dart';
+
+class MentionItem extends StatelessWidget {
+  const MentionItem({
+    super.key,
+    required this.mentionId,
+    required this.mentionType,
+    required this.displayName,
+    required this.avatarOptions,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  final String mentionId;
+  final MentionType mentionType;
+  final String displayName;
+  final AvatarOptions avatarOptions;
+  final bool isSelected;
+
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final isDesktop = desktopPlatforms.contains(Theme.of(context).platform);
+
+    return Container(
+      height: 60,
+      // selection color is only for desktop with keyboard navigation
+      color: (isSelected && isDesktop)
+          ? Theme.of(context).colorScheme.primary
+          : null,
+      child: ListTile(
+        dense: true,
+        onTap: onTap,
+        contentPadding: const EdgeInsets.symmetric(horizontal: 12),
+        leading: ActerAvatar(options: avatarOptions),
+        title: Text(
+          displayName.isNotEmpty ? displayName : mentionId,
+          style: Theme.of(context).textTheme.bodyMedium,
+        ),
+        subtitle: displayName.isNotEmpty
+            ? Text(mentionId, style: Theme.of(context).textTheme.labelMedium)
+            : null,
+      ),
+    );
+  }
+}