Rich content copy/paste

[matthew-carroll]

SuperEditor users should be able to copy structured content and images from a document, as well as paste structured content into a document.

Research:

• Research access to the native clipboard and what format is provided. Extract use cases and potential APIs for SuperEditor afterwards @bk-one

Use-Cases

TBD

Possible Blockers

The Flutter engine and framework APIs only support plain text.

Funding

TBD

[matthew-carroll]

A ticket was filed for this milestone. I closed the ticket in favor of documenting the milestone: #307

[brian-superlist]

Heya Matt, trying to use the terminology you've described in this document: https://github.com/Flutter-Bounty-Hunters/policies/wiki/Management-Terminology

User stories

"As a user, I'd like to be able to copy rich text and paste it into SuperEditor, so that I don't have to format it manually"

"As a user, I'd like to be able to copy Images from other apps and paste them into SuperEditor, so I can easily add images from other apps to my document"

Use Cases

• When the user copies bold text from the Mac Notes app, SuperEditor should paste bold text
• When the user copies italic text from the Mac Notes app, SuperEditor should paste italic text
• When the user copies underline text from the Mac Notes app, SuperEditor should paste underline text
• When the user copies strikethrough text from the Mac Notes app, SuperEditor should paste strikethrough text
• When the user copies Red (any color, just an example) text from the Mac Notes app, SuperEditor should paste Red text
• When a user copies super/subscript from the Mac Notes app, SuperEditor should paste super/subscript text
• When a user copies text that has been increased in size by the user from the Mac Notes App, SuperEditor should paste text with increased size
• When a user copies text that has been decreased in size by the user from the Mac Notes App, SuperEditor should paste text with decreased size
• When a user copies text that has been centered from the Mac Notes App, SuperEditor should paste centered text
• When a user copies text that has been left aligned from the Mac notes app, SuperEditor should paste left align text
• When a user copies text that has been right aligned from the Mac notes app, SuperEditor should paste right align text
• When a user copies text that has been justified from the Mac notes app, SuperEditor should paste justified text
• When a user copies an image from the Mac notes app, SuperEditor should paste the image

[matthew-carroll]

Thanks Brian. I think we can shorten this quite a bit.

First, for user stories, those are only necessary if you want us to have further conversations to discover the use-cases. In other words, user stories have to be resolved. So if you really want a particular user value, but Superlist doesn't know how they want the UX to operate in their app, then a user story would be a jumping off point for us to discuss. Looking through what we have here, I'm guessing that user stories aren't necessary.

With regard to the use-cases, I know that some teams require a repeatable sentence template like that, but I don't think we need to worry about that here. For user stories it makes sense, because sometimes a "user" is actually a "dev" or "UI designer" or "truck driver". But use-cases are specific UX/UI requirements that have already gone past any concern about role or value.

Please let me know if the following re-wording captures all the details you think Superlist needs, and doesn't include any details that Superlist doesn't need:

Selected content can be copied to the clipboard as HTML with all existing block types and attributions represented in the HTML.

• Attributions: color, font size, bold, italics, strikethrough, underline, superscript, subscript, link
• Blocks: headers, paragraph (with alignment), blockquote, ordered/unordered list, code, image (including image binary)

Structured content within the clipboard that represents the above attributions and blocks, can be pasted into Super Editor.

Verifications:

• Copying all aforementioned content from the Mac Notes app should paste the content with the same styles into Super Editor
• Copying all aforementioned content from Super Editor should paste the content with the same styles into the Mac Notes app.

Question: does Superlist care about being able to right-click on an image and copy it? Or is it sufficient to tap the image for selection and then press cmd+c?

[osaxma]

Originally posted at #307 as an answer about the standard format and how it would work

I believe HTML is the standard format for rich content.

Typically for MacOS, when you copy a content from somewhere, it'll be available in the clipboard in multiple formats such as:

• public.utf8-plain-text
• public.html
• .tiff for an image.
• Other custom formats from the source or the OS.

Here's an example from Clipboard Viewer on MacOS for a text that's copied from Google Docs:

Note: I noticed that both Google Docs and Notion add org.chromium.web-custom-data format to the clipboard -- it could be another standard format.

Given that, I believe SuperEditor should be able to convert HTML into a Document and vice versa in order to paste rich content or allow copying rich content. However, another hurdle is that Flutter's clipboard only supports plain text at the moment according to this.

[Jethro87]

For reference, the Flutter blocking issue can be found here: flutter/flutter#23603

[Jethro87]

Looks like the superlist team created a custom clipboard solution: https://github.com/superlistapp/super_native_extensions/tree/main/super_clipboard

[miguelcmedeiros]

We currently use super_clipboard, which means we have our own implementations for handling the keyboard shortcuts for copy/cut/paste and the editor command pasting content.

SuperEditor could potentially use and offer support for copy/paste rich content, and although it might be enough for all apps (e.g. an app might want to support image upload differently than how SuperEditor does or might want to support a different type of media), it would be better than the existing solution.