fix: paste multiple lines in codeblock (#3151)

* fix: paste multiple lines in codeblock

* fix: works with non collapsed selection

* chore: localize code block

* test: multiline paste in codeblock

* chore: remove unused import

* fix: only hanlde code block paste command if all the selected nodes are code block

---------

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_component.dart

@@ -1,7 +1,9 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_item_list_menu.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/string_extension.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:highlight/highlight.dart' as highlight;
@@ -40,7 +42,7 @@ Node codeBlockNode({
 
 // defining the callout block menu item for selection
 SelectionMenuItem codeBlockItem = SelectionMenuItem.node(
-  name: 'Code Block',
+  name: LocaleKeys.document_selectionMenu_codeBlock.tr(),
   iconData: Icons.abc,
   keywords: ['code', 'codeblock'],
   nodeBuilder: (editorState, _) => codeBlockNode(),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_shortcut_event.dart

@@ -9,9 +9,10 @@ final List<CharacterShortcutEvent> codeBlockCharacterEvents = [
 
 final List<CommandShortcutEvent> codeBlockCommands = [
   insertNewParagraphNextToCodeBlockCommand,
+  pasteInCodeblock,
+  selectAllInCodeBlockCommand,
   tabToInsertSpacesInCodeBlockCommand,
   tabToDeleteSpacesInCodeBlockCommand,
-  selectAllInCodeBlockCommand,
 ];
 
 /// press the enter key in code block to insert a new line in it.
@@ -97,6 +98,18 @@ final CommandShortcutEvent selectAllInCodeBlockCommand = CommandShortcutEvent(
   handler: _selectAllInCodeBlockCommandHandler,
 );
 
+/// ctrl + v to paste text in code block.
+///
+/// - support
+///   - desktop
+///   - web
+final CommandShortcutEvent pasteInCodeblock = CommandShortcutEvent(
+  key: 'paste in codeblock',
+  command: 'ctrl+v',
+  macOSCommand: 'cmd+v',
+  handler: _pasteInCodeBlock,
+);
+
 CharacterShortcutEventHandler _enterInCodeBlockCommandHandler =
     (editorState) async {
   final selection = editorState.selection;
@@ -267,3 +280,49 @@ CommandShortcutEventHandler _selectAllInCodeBlockCommandHandler =
 
   return KeyEventResult.handled;
 };
+
+CommandShortcutEventHandler _pasteInCodeBlock = (editorState) {
+  var selection = editorState.selection;
+
+  if (selection == null) {
+    return KeyEventResult.ignored;
+  }
+
+  if (editorState.getNodesInSelection(selection).length != 1) {
+    return KeyEventResult.ignored;
+  }
+
+  final node = editorState.getNodeAtPath(selection.end.path);
+  if (node == null || node.type != CodeBlockKeys.type) {
+    return KeyEventResult.ignored;
+  }
+
+  // delete the selection first.
+  if (!selection.isCollapsed) {
+    editorState.deleteSelection(selection);
+  }
+
+  // fetch selection again.
+  selection = editorState.selection;
+  if (selection == null) {
+    return KeyEventResult.skipRemainingHandlers;
+  }
+  assert(selection.isCollapsed);
+
+  () async {
+    final data = await AppFlowyClipboard.getData();
+    final text = data.text;
+    if (text != null && text.isNotEmpty) {
+      final transaction = editorState.transaction
+        ..insertText(
+          node,
+          selection!.end.offset,
+          text,
+        );
+
+      await editorState.apply(transaction);
+    }
+  }();
+
+  return KeyEventResult.handled;
+};