AppFlowy-IO/AppFlowy

Fork 0

mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2026-03-24 12:56:59 +00:00

[GH-ISSUE #2185] [FR] InApp Copy & Paste. Support parsing all the blocks when pasting the content copied in AppFlowy #890

New issue

Closed

opened 2026-03-23 20:42:35 +00:00 by mirror · 14 comments

mirror commented

2026-03-23 20:42:35 +00:00

Owner

Originally created by @LucasXu0 on GitHub (Apr 4, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/2185

Originally assigned to: @LucasXu0 on GitHub.

Description

We want to paste all the selected content, including code blocks, images and so on, not only the texts.

Steps

Copy the selected content in AppFlowy by using the keyboard shortcut Cmd or Ctrl + C.
Paste the content to another cursor position in AppFlowy by using the keyboard shortcut Cmd or Ctrl + V.
All selected content should be well-displayed when pasted.

Impact

users who use copy and paste in app.

Additional Context

We have been converting the selected content into HTML and plain text, and then parsing it when pasting the content in the app. However, I believe that instead of converting it, we can simply save the selected content in memory. This way, when we paste the content in the app, we can just insert the selected content back without the need for parsing it again.

Originally created by @LucasXu0 on GitHub (Apr 4, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/2185 Originally assigned to: @LucasXu0 on GitHub. ### Description We want to paste all the selected content, including code blocks, images and so on, not only the texts. Steps * Copy the selected content in AppFlowy by using the keyboard shortcut Cmd or Ctrl + C. * Paste the content to another cursor position in AppFlowy by using the keyboard shortcut Cmd or Ctrl + V. * All selected content should be well-displayed when pasted. ### Impact users who use copy and paste in app. ### Additional Context We have been converting the selected content into HTML and plain text, and then parsing it when pasting the content in the app. However, I believe that instead of converting it, we can simply save the selected content in memory. This way, when we paste the content in the app, we can just insert the selected content back without the need for parsing it again.

mirror

2026-03-23 20:42:35 +00:00

closed this issue
added the
editor
label

mirror commented

2026-03-23 20:42:36 +00:00

Author

Owner

@Pranav2612000 commented on GitHub (Apr 6, 2023):

Hey @LucasXu0 I'll like to work on this issue.

@Pranav2612000 commented on GitHub (Apr 6, 2023): Hey @LucasXu0 I'll like to work on this issue.

mirror commented

2026-03-23 20:42:36 +00:00

Author

Owner

@LucasXu0 commented on GitHub (Apr 6, 2023):

Hey, @Pranav2612000. Nice! I have assigned it to you. Just let me know if you need more context.

@LucasXu0 commented on GitHub (Apr 6, 2023): Hey, @Pranav2612000. Nice! I have assigned it to you. Just let me know if you need more context.

mirror commented

2026-03-23 20:42:36 +00:00

Author

Owner

@Pranav2612000 commented on GitHub (Apr 7, 2023):

Hey @LucasXu0 I was able to setup this repo locally and was able to run a clean & rebuild all to start the app. I was able to reproduce the issue - copying pasting a codeblocks makes it lose its 'code block'ness.
I was also reading the architecture and the documentation, and if I understand correctly, these changes would be need to be done in the flutter editor, i.e the appflowy-editor ( https://github.com/AppFlowy-IO/appflowy-editor ) repo. Right?

Any other tips for a new contributor?

@Pranav2612000 commented on GitHub (Apr 7, 2023): Hey @LucasXu0 I was able to setup this repo locally and was able to run a clean & rebuild all to start the app. I was able to reproduce the issue - copying pasting a codeblocks makes it lose its 'code block'ness. I was also reading the architecture and the documentation, and if I understand correctly, these changes would be need to be done in the flutter editor, i.e the appflowy-editor ( https://github.com/AppFlowy-IO/appflowy-editor ) repo. Right? Any other tips for a new contributor?

mirror commented

2026-03-23 20:42:37 +00:00

Author

Owner

@Pranav2612000 commented on GitHub (Apr 7, 2023):

Was able to set up the appflowy-editor and I noticed that the appflowy-editor has an image block on which I'm able to reproduce this issue, but I don't see a code block in the editor. Why is that?

@Pranav2612000 commented on GitHub (Apr 7, 2023): Was able to set up the appflowy-editor and I noticed that the appflowy-editor has an image block on which I'm able to reproduce this issue, but I don't see a code block in the editor. Why is that?

mirror commented

2026-03-23 20:42:37 +00:00

Author

Owner

@LucasXu0 commented on GitHub (Apr 7, 2023):

I don't see a code block in the editor

Hey, @Pranav2612000, the code block is defined in AppFlowy and registered to appflowy_editor.

I was also reading the architecture and the documentation, and if I understand correctly, these changes would be need to be done in the flutter editor, i.e the appflowy-editor ( https://github.com/AppFlowy-IO/appflowy-editor ) repo. Right?

Yes, you should modify the function _handleCopy in copy_paste_handler.dart.

Here's my idea:

Save the selected nodes when the user copies within the app.
When pasting, check if the copy was made within the app. If yes, paste the selected nodes directly. If not, execute the existing logic for pasting.

@LucasXu0 commented on GitHub (Apr 7, 2023): > I don't see a code block in the editor Hey, @Pranav2612000, the code block is defined in AppFlowy and registered to appflowy_editor. > I was also reading the architecture and the documentation, and if I understand correctly, these changes would be need to be done in the flutter editor, i.e the appflowy-editor ( https://github.com/AppFlowy-IO/appflowy-editor ) repo. Right? Yes, you should modify the function _handleCopy in copy_paste_handler.dart. Here's my idea: 1. Save the selected nodes when the user copies within the app. 2. When pasting, check if the copy was made within the app. If yes, paste the selected nodes directly. If not, execute the existing logic for pasting. <img width="1168" alt="Screenshot 2023-04-07 at 13 55 59" src="https://user-images.githubusercontent.com/11863087/230550262-b19a6b4a-9576-49ba-b548-c1a3f7f576b3.png">

mirror commented

2026-03-23 20:42:37 +00:00

Author

Owner

@Pranav2612000 commented on GitHub (Apr 7, 2023):

Here's a WIP PR I've created for early feedback - https://github.com/AppFlowy-IO/appflowy-editor/pull/49

@LucasXu0 When you say Save the selected nodes when the user copies within the app. Did you mean something like what I've done? Or am I off track here?

@Pranav2612000 commented on GitHub (Apr 7, 2023): Here's a WIP PR I've created for early feedback - https://github.com/AppFlowy-IO/appflowy-editor/pull/49 @LucasXu0 When you say `Save the selected nodes when the user copies within the app.` Did you mean something like what I've done? Or am I off track here?

mirror commented

2026-03-23 20:42:37 +00:00

Author

Owner

@LucasXu0 commented on GitHub (Apr 10, 2023):

@Pranav2612000. Actually, what I meant was that we should save the selected nodes in memory, so that we don't need to parse the HTML again to retrieve them.

Here's the pseudocode.

void _handleCopy(EditorState editorState) async {
  // ...
    final nodes = NodeIterator(
    document: editorState.document,
    startNode: beginNode,
    endNode: endNode,
  ).toList();

  // save the nodes in memory
  NodeStores.saveNodes(nodes);
  // ...
}
void _handlePaste(EditorState editorState) async {
  if (NodeStores.nodes != null) {
    _pasteNodes(editorState, NodeStores.nodes!);
    return;
  }
  // ...
}

@LucasXu0 commented on GitHub (Apr 10, 2023): @Pranav2612000. Actually, what I meant was that we should save the selected nodes in memory, so that we don't need to parse the HTML again to retrieve them. Here's the pseudocode. ```dart void _handleCopy(EditorState editorState) async { // ... final nodes = NodeIterator( document: editorState.document, startNode: beginNode, endNode: endNode, ).toList(); // save the nodes in memory NodeStores.saveNodes(nodes); // ... } void _handlePaste(EditorState editorState) async { if (NodeStores.nodes != null) { _pasteNodes(editorState, NodeStores.nodes!); return; } // ... } ```

mirror commented

2026-03-23 20:42:38 +00:00

Author

Owner

@Pranav2612000 commented on GitHub (Apr 18, 2023):

Sorry @LucasXu0 I was on a vacation last week and couldn't get back sooner.
I've now updated the PR to use the approach you suggested.

There are still some edge cases that need to be fixed. But can you take a look and let me know if I'm moving in the right direction?

@Pranav2612000 commented on GitHub (Apr 18, 2023): Sorry @LucasXu0 I was on a vacation last week and couldn't get back sooner. I've now updated the [PR](https://github.com/AppFlowy-IO/appflowy-editor/pull/49) to use the approach you suggested. There are still some edge cases that need to be fixed. But can you take a look and let me know if I'm moving in the right direction?

mirror commented

2026-03-23 20:42:38 +00:00

Author

Owner

@Pranav2612000 commented on GitHub (Apr 30, 2023):

@LucasXu0 Can you review the PR? I've fixed the edge cases and i think it's working as expected now.

@Pranav2612000 commented on GitHub (Apr 30, 2023): @LucasXu0 Can you review the PR? I've fixed the edge cases and i think it's working as expected now.

mirror commented

2026-03-23 20:42:38 +00:00

Author

Owner

@Pranav2612000 commented on GitHub (May 5, 2023):

@LucasXu0 ^^Bumping this up

@Pranav2612000 commented on GitHub (May 5, 2023): @LucasXu0 ^^Bumping this up

mirror commented

2026-03-23 20:42:38 +00:00

Author

Owner

@LucasXu0 commented on GitHub (May 5, 2023):

Hey, @Pranav2612000. Just commented on your PR.

@LucasXu0 commented on GitHub (May 5, 2023): Hey, @Pranav2612000. Just commented on your PR.

mirror commented

2026-03-23 20:42:38 +00:00

Author

Owner

@Pranav2612000 commented on GitHub (May 12, 2023):

@LucasXu0 I've fixed those changes. The PR is ready for review again. @Xazin has also reviewed and approved the changes. Can you take a look again?

@Pranav2612000 commented on GitHub (May 12, 2023): @LucasXu0 I've fixed those changes. The PR is ready for review again. @Xazin has also reviewed and approved the changes. Can you take a look again?

mirror commented

2026-03-23 20:42:39 +00:00

Author

Owner

@LucasXu0 commented on GitHub (May 12, 2023):

@Pranav2612000. Sure. Let me take a look.

@LucasXu0 commented on GitHub (May 12, 2023): @Pranav2612000. Sure. Let me take a look.

mirror commented

2026-03-23 20:42:39 +00:00

Author

Owner

@annieappflowy commented on GitHub (Jun 12, 2023):