Controller - Copy Paste, retain formatting (web)

[adrian-moisa]

Controller - Copy Paste, retain formatting (web) #8

I don't know if this behavior was ever present in Quill. I think it was if I correctly recall some comments. But for sure I want it in the Visual Editor version. Including copying of custom attributes. I'm using custom attributes to inject various DB ids in the text at precise positions. So I want to preserve them on copy paste.

edit
Apparently this works on mobile and there's code that supports this feature. However it is not working on the web. When it's added to the web, we have to be aware that we might not be able to copy paste text between tabs of the same browser. For adding to web there are utils already in place that store the styling in the state store to be later reused. The challenge will be passing this state between tabs. Most likely we will need to store the styling as well in the clipboard somehow. Trouble is that copy pasting in notepad will yield the entire json plain text + styling

Embeds - Paste Images #168

• Use pasteboard to add ability to paste images from clipboard
• Demo page, document, test
• Ref - 950 - Their implementation is fundamentally broken. They are basically asking every single client to request focus after buttons are pressed. This is terrible design. This should be handled by the lib since it already has access to this node.

[adrian-moisa]

When implementing the copy paste feature I'll have a look to check how to preserve rich text from other editors as requested in this PR. Apparently Quill JS has an entire module dedicated to converting HTML styling to delta. I'll have a look to see what we can use as inspiration.

[FelixMittermeier]

I can confirm that this functionality was working in the pure JavaScript Quill Editor and I also think this feature is quite important. Otherwise it can be very frustrating for users when the formatting gets lost all the time.

[kairan77]

Overall, no need to change any existing source code to build this feature, just build on top of existing source code of quill.

4 steps here,

• quill use the flutter‘s native selection popup menu under the hood, which has different action callbacks, I have some sample code using this feature with quill for a different purpose, but the idea is the same, you can intervene what data to pass down on onPasteText callback, so no need to change source code of quill for this
• you need to detect the format for xml/html/markdown/wordFormat/delta/plainText on your onPasteAction call back, so again no need to change quill's existing source code,
• transform all these different format into delta and insert the delta descriptions one by one using the controller. I have writen some code converting between html/markdown/delta because my workflow involves displaying quill edited text in both html and quill correctly,
• use the controller to generate the final correct delta output, and update your valueNotifier which holds the json String

Over here step 4 is for eliminating the need of using setState, many people here are using setState with quill after controller update, I do not recommend its usage here,

begin by looking at QuillEditor's argument

  textSelectionControls: MyNoteTextSelectionControls(
          focus: focus,
          // this is my own function, you can pass other functional arguments to fullfill your own purpose.
          generateNote: generateNote,
        ),

For which class MyNoteTextSelectionControls extends MaterialTextSelectionControls

You also need to override onCopy, onCut if you are to put json instead of text onto the clipboard when copying/cutting from quill editors' content.

When you are up to implementing this, give me a shout, I can give you some half-baked code to begin with.

[kairan77]

the quill-delta to markdown translation package on pub.dev is no longer maintained and due to null safety migration, no longer works, I have a working version of this code against flutter3.0 somewhere in my repo which I have added a few more features and heavily refactored, if someone is willing to open and manage a new repo on github, I can pass on my modified code to him (not fully refactored, just good enough to work atm), so you don't have to start from scratch.

[adrian-moisa]

you to detect the format for xml/html/markdown/wordFormat/delta/plainText - Any particular recommendation what technique to use for this purpose?

Again, this could be a plugin. You download barebone quill/VE, then you download the Copy/Paste extensions and they do the plugin registration behind the scenes and that enables the copy paste from various doc types. In this way you can keep the core lightweight and help to not so skilled users to enable these features. I doubt there are many users that have the skills required to setup such complex setups. Most users want to enable rich text and that's all they care about. If they can get copy paste from other doc formats that's even better. But them spending time to setup the flow, highly unlikely for most devs. So a middle ground solution would be best.

Then again, at the moment, the only pressure I see to maintain Quill super skinny is the need to optimise the download bundle for web apps (which matter a lot there). Anything that is installed locally could have 100-200kb of extra code if needed.