feat: add custom context menu items for copy, cut, and paste commands

This commit is contained in:
Lucas.Xu 2023-08-24 19:25:05 +08:00
parent 1ba7224088
commit 255f30590f
8 changed files with 56 additions and 12 deletions

View File

@ -226,6 +226,30 @@ void main() {
);
},
);
// https://github.com/AppFlowy-IO/AppFlowy/issues/3263
testWidgets(
'paste the image from clipboard when html and image are both available',
(tester) async {
const html =
'''<meta charset='utf-8'><img src="https://user-images.githubusercontent.com/9403740/262918875-603f4adb-58dd-49b5-8201-341d354935fd.png" alt="image"/>''';
final image = await rootBundle.load('assets/test/images/sample.png');
final bytes = image.buffer.asUint8List();
await tester.pasteContent(
html: html,
image: ('png', bytes),
(editorState) {
expect(editorState.document.root.children.length, 2);
final node = editorState.getNodeAtPath([0])!;
expect(node.type, ImageBlockKeys.type);
expect(
node.attributes[ImageBlockKeys.url],
'https://user-images.githubusercontent.com/9403740/262918875-603f4adb-58dd-49b5-8201-341d354935fd.png',
);
},
);
},
);
}
extension on WidgetTester {

View File

@ -159,6 +159,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
// customize the shortcuts
characterShortcutEvents: characterShortcutEvents,
commandShortcutEvents: commandShortcutEvents,
contextMenuItems: customContextMenuItems,
header: widget.header,
footer: const VSpace(200),
);

View File

@ -0,0 +1,21 @@
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart';
final List<List<ContextMenuItem>> customContextMenuItems = [
[
ContextMenuItem(
name: LocaleKeys.document_plugins_contextMenu_copy.tr(),
onPressed: (editorState) => customCopyCommand.execute(editorState),
),
ContextMenuItem(
name: LocaleKeys.document_plugins_contextMenu_paste.tr(),
onPressed: (editorState) => customPasteCommand.execute(editorState),
),
ContextMenuItem(
name: LocaleKeys.document_plugins_contextMenu_cut.tr(),
onPressed: (editorState) => customCutCommand.execute(editorState),
),
],
];

View File

@ -17,15 +17,7 @@ extension PasteNodes on EditorState {
if (delta.isEmpty) {
transaction.insertNode(
selection.end.path.next,
insertedDelta == null
? node.copyWith(
type: node.type,
attributes: {
...node.attributes,
...insertedNode.attributes,
},
)
: insertedNode,
insertedNode,
);
transaction.deleteNode(node);
final path = calculatePath(selection.end.path, [insertedNode]);

View File

@ -3,6 +3,7 @@ export 'actions/option_action.dart';
export 'callout/callout_block_component.dart';
export 'code_block/code_block_component.dart';
export 'code_block/code_block_shortcut_event.dart';
export 'context_menu/custom_context_menu.dart';
export 'copy_and_paste/custom_copy_command.dart';
export 'copy_and_paste/custom_cut_command.dart';
export 'copy_and_paste/custom_paste_command.dart';

View File

@ -54,8 +54,8 @@ packages:
dependency: "direct main"
description:
path: "."
ref: f4db21c
resolved-ref: f4db21c3678290d133ae6cffa015d3d79920bf84
ref: "28c5adf"
resolved-ref: "28c5adf0f94c22e74a260c8a0bf5b20cb6e5a12d"
url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
source: git
version: "1.2.3"

View File

@ -48,7 +48,7 @@ dependencies:
appflowy_editor:
git:
url: https://github.com/AppFlowy-IO/appflowy-editor.git
ref: f4db21c
ref: 28c5adf
appflowy_popover:
path: packages/appflowy_popover

View File

@ -548,6 +548,11 @@
},
"outline": {
"addHeadingToCreateOutline": "Add headings to create a table of contents."
},
"contextMenu": {
"copy": "Copy",
"cut": "Cut",
"paste": "Paste"
}
},
"textBlock": {