implement enhanced clipboard for html editor

app/lib/common/toolkit/html_editor/clipboard/commands/custom_copy_handler.dart

@@ -0,0 +1,93 @@
+import 'package:acter/common/toolkit/html_editor/html_editor.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:logging/logging.dart';
+import 'package:super_clipboard/super_clipboard.dart';
+
+/*
+ * This file contains code derived from AppFlowy
+ * Original source: https://github.com/AppFlowy-IO/AppFlowy
+ * Licensed under AGPL-3.0
+ * 
+ * Modifications made: Enhanced with clipboard event handling
+ * Date of derivation: 27 June 2025
+ */
+final _log = Logger(
+  'a3::common::toolkit::html_editor::clipboard::commands::custom_copy_handler',
+);
+
+class CustomCopyHandler {
+  static EditorState? _currentEditorState;
+  static bool _isInitialized = false;
+
+  static void initialize(EditorState editorState) {
+    _currentEditorState = editorState;
+
+    if (!_isInitialized) {
+      _initClipboardEvents();
+      _isInitialized = true;
+    }
+  }
+
+  static void _initClipboardEvents() {
+    final events = ClipboardEvents.instance;
+    if (events == null) {
+      // clipboard events are only supported on web
+      return;
+    }
+
+    // copy event listener for external clipboard events
+    events.registerCopyEventListener((event) async {
+      final editorState = _currentEditorState;
+      if (editorState == null) return;
+
+      await _handleCopyEvent(editorState, event, isCut: false);
+    });
+
+    //  cut event listener for external clipboard events
+    events.registerCutEventListener((event) async {
+      final editorState = _currentEditorState;
+      if (editorState == null) return;
+
+      await _handleCopyEvent(editorState, event, isCut: true);
+    });
+  }
+
+  static Future<void> _handleCopyEvent(
+    EditorState editorState,
+    ClipboardWriteEvent event, {
+    bool isCut = false,
+  }) async {
+    final selection = editorState.selection?.normalized;
+    if (selection == null || selection.isCollapsed) {
+      return;
+    }
+
+    try {
+      final markdown = editorState.intoMarkdown();
+
+      final item = DataWriterItem();
+
+      item.add(Formats.plainText(markdown));
+
+      await event.write([item]);
+
+      // if is cut, delete the selection also
+      if (isCut) {
+        await editorState.deleteSelection(selection);
+      }
+    } catch (e) {
+      _log.info('Error handling copy/cut event: $e');
+    }
+  }
+
+  static void dispose() {
+    final events = ClipboardEvents.instance;
+    if (events != null) {
+      // unregister the copy and cut event listeners
+      events.unregisterCutEventListener((_) => _initClipboardEvents);
+      events.unregisterCopyEventListener((_) => _initClipboardEvents);
+    }
+    _currentEditorState = null;
+    _isInitialized = false;
+  }
+}

app/lib/common/toolkit/html_editor/clipboard/commands/custom_paste_command.dart

@@ -0,0 +1,140 @@
+import 'package:acter/common/toolkit/html_editor/services/clipboard_service.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
+import 'package:logging/logging.dart';
+import 'package:super_clipboard/super_clipboard.dart';
+
+/*
+ * This file contains code derived from AppFlowy
+ * Original source: https://github.com/AppFlowy-IO/AppFlowy
+ * Licensed under AGPL-3.0
+ * 
+ * Modifications made: Enhanced with clipboard event handling
+ * Date of derivation: 27 June 2025
+ */
+final _log = Logger(
+  'a3::common::toolkit::html_editor::commands::custom_paste_command',
+);
+
+final List<CommandShortcutEvent> customPasteCommands = [customPasteCommand];
+
+final CommandShortcutEvent customPasteCommand = CommandShortcutEvent(
+  key: 'paste the content',
+  getDescription: () => AppFlowyEditorL10n.current.cmdPasteContent,
+  command: 'ctrl+v',
+  macOSCommand: 'cmd+v',
+  handler: _customPasteCommandHandler,
+);
+
+CommandShortcutEventHandler _customPasteCommandHandler = (editorState) {
+  final selection = editorState.selection;
+  if (selection == null) {
+    return KeyEventResult.ignored;
+  }
+
+  () async {
+    final data = await HtmlEditorClipboardService().getFormattedText();
+    final richText = data.richText;
+    if (richText == null || richText.isEmpty) {
+      return false;
+    }
+
+    // shared paste logic
+    await CustomPasteHandler._handlePasteContent(editorState, richText);
+    return true;
+  }();
+
+  return KeyEventResult.handled;
+};
+
+class CustomPasteHandler {
+  static EditorState? _currentEditorState;
+  static bool _isInitialized = false;
+
+  static void initialize(EditorState editorState) {
+    _currentEditorState = editorState;
+
+    if (!_isInitialized) {
+      _initClipboardEvents();
+      _isInitialized = true;
+    }
+  }
+
+  static void _initClipboardEvents() {
+    final events = ClipboardEvents.instance;
+    if (events == null) {
+      // clipboard events are only supported on web
+      return;
+    }
+
+    events.registerPasteEventListener((event) async {
+      final editorState = _currentEditorState;
+      if (editorState == null) return;
+
+      final reader = await event.getClipboardReader();
+
+      // try to get html first
+      String? content;
+      if (reader.canProvide(Formats.htmlText)) {
+        content = await reader.readValue(Formats.htmlText);
+      } else if (reader.canProvide(Formats.plainText)) {
+        content = await reader.readValue(Formats.plainText);
+      }
+
+      if (content != null && content.isNotEmpty) {
+        await _handlePasteContent(editorState, content);
+      }
+    });
+  }
+
+  static Future<bool> _handlePasteContent(
+    EditorState editorState,
+    String content,
+  ) async {
+    final selection = editorState.selection;
+    if (selection == null) {
+      return false;
+    }
+
+    try {
+      final nodes = htmlToDocument(content).root.children.toList();
+
+      // Remove empty nodes from front and back
+      while (nodes.isNotEmpty &&
+          nodes.first.delta?.isEmpty == true &&
+          nodes.first.children.isEmpty) {
+        nodes.removeAt(0);
+      }
+      while (nodes.isNotEmpty &&
+          nodes.last.delta?.isEmpty == true &&
+          nodes.last.children.isEmpty) {
+        nodes.removeLast();
+      }
+
+      if (nodes.isEmpty) {
+        return false;
+      }
+
+      if (nodes.length == 1) {
+        await editorState.pasteSingleLineNode(nodes.first);
+      } else {
+        await editorState.pasteMultiLineNodes(nodes.toList());
+      }
+
+      return true;
+    } catch (e) {
+      _log.info('Error pasting content: $e');
+      return false;
+    }
+  }
+
+  static void dispose() {
+    final events = ClipboardEvents.instance;
+    if (events != null) {
+      // unregister the paste event listener
+      events.unregisterPasteEventListener((_) => _initClipboardEvents);
+    }
+    _currentEditorState = null;
+    _isInitialized = false;
+  }
+}

app/lib/common/toolkit/html_editor/html_editor.dart

@@ -6,8 +6,11 @@
 import 'package:acter/common/toolkit/buttons/primary_action_button.dart';
 import 'package:acter/common/toolkit/buttons/user_chip.dart';
 import 'package:acter/common/toolkit/html/utils.dart';
+import 'package:acter/common/toolkit/html_editor/clipboard/commands/custom_copy_handler.dart';
+import 'package:acter/common/toolkit/html_editor/clipboard/commands/custom_paste_command.dart';
 import 'package:acter/common/toolkit/html_editor/mentions/commands/mention_movements.dart';
 import 'package:acter/common/toolkit/html_editor/mentions/mention_detection.dart';
+import 'package:acter/common/toolkit/html_editor/services/clipboard_service.dart';
 import 'package:acter/config/constants.dart';
 import 'package:acter/common/toolkit/html_editor/services/constants.dart';
 import 'package:acter/common/toolkit/html_editor/mentions/mention_shortcuts.dart';
@@ -229,6 +232,8 @@
     ]);
 
     updateEditorState(widget.editorState ?? EditorState.blank());
+    CustomCopyHandler.initialize(editorState);
+    CustomPasteHandler.initialize(editorState);
   }
 
   @override
@@ -245,6 +250,8 @@
       _updateEditorHeight,
     );
     _changeListener?.cancel();
+    CustomCopyHandler.dispose();
+    CustomPasteHandler.dispose();
     super.dispose();
   }
 
@@ -355,6 +362,16 @@
     ];
   }
 
+  List<CommandShortcutEvent> _buildCommandShortcutEvents() {
+    return [
+      ...standardCommandShortcutEvents.where(
+        (e) => e != pasteCommand && e != pasteTextWithoutFormattingCommand,
+      ),
+      ...mentionMenuCommandShortcutEvents,
+      ...customPasteCommands,
+    ];
+  }
+
   Widget? generateFooter() {
     if (widget.footer != null) {
       return widget.footer;
@@ -450,7 +467,16 @@
               closeToolbar();
             },
             onCut: () => cutCommand.execute(editorState),
-            onPaste: () => pasteCommand.execute(editorState),
+            onPaste: () async {
+              final data = await HtmlEditorClipboardService()
+                  .getFormattedText();
+              final richText = data.richText;
+              if (richText != null && richText.isNotEmpty) {
+                customPasteCommand.execute(editorState);
+              } else {
+                pasteCommand.execute(editorState);
+              }
+            },
             onSelectAll: () => selectAllCommand.execute(editorState),
             onLiveTextInput: null,
             onLookUp: null,
@@ -478,10 +504,7 @@
       footer: generateFooter(),
       blockComponentBuilders: _buildBlockComponentBuilders(),
       characterShortcutEvents: _buildCharacterShortcutEvents(),
-      commandShortcutEvents: [
-        ...mentionMenuCommandShortcutEvents,
-        ...standardCommandShortcutEvents,
-      ],
+      commandShortcutEvents: _buildCommandShortcutEvents(),
       disableAutoScroll: false,
       autoScrollEdgeOffset: 20,
     );
@@ -492,14 +515,13 @@
 
     return ValueListenableBuilder(
       valueListenable: _contentHeightNotifier,
-      builder:
-          (context, value, child) => AnimatedContainer(
-            duration: const Duration(milliseconds: 200),
-            curve: Curves.easeInOutCubic,
-            width: MediaQuery.sizeOf(context).width,
-            height: max(value, widget.minHeight ?? 50),
-            child: editor,
-          ),
+      builder: (context, value, child) => AnimatedContainer(
+        duration: const Duration(milliseconds: 200),
+        curve: Curves.easeInOutCubic,
+        width: MediaQuery.sizeOf(context).width,
+        height: max(value, widget.minHeight ?? 50),
+        child: editor,
+      ),
     );
   }
 
@@ -516,8 +538,9 @@
             ).textTheme.bodySmall.expect('bodySmall style not available'),
             lineHeight: 1.0,
           ),
-      textSpanDecorator:
-          widget.roomId != null ? customizeAttributeDecorator : null,
+      textSpanDecorator: widget.roomId != null
+          ? customizeAttributeDecorator
+          : null,
     );
   }
 
@@ -534,10 +557,12 @@
             ).textTheme.bodySmall.expect('bodySmall style not available'),
             lineHeight: 1.0,
           ),
-      textSpanDecorator:
-          widget.roomId != null ? customizeAttributeDecorator : null,
-      mobileDragHandleBallSize:
-          Platform.isIOS ? const Size.square(16) : const Size.square(12),
+      textSpanDecorator: widget.roomId != null
+          ? customizeAttributeDecorator
+          : null,
+      mobileDragHandleBallSize: Platform.isIOS
+          ? const Size.square(16)
+          : const Size.square(12),
     );
   }