-
Notifications
You must be signed in to change notification settings - Fork 811
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Web] Pasting HTML Doesn't Work Propertly #1998
Comments
The rich text pasting requires native code, The rich text pasting is not available when using Include The plugin By default, the package doesn't register the However, we should update the docs.
This is a bit out of scope for the project, we will have to maintain the extension for different browsers, different platforms, and places where the extension is published, the project might already have an extension, requiring the installation of different extensions, also the users usually don't know the app they're installing use, Flutter Quill, so naming the extension
This seems to require a specific message that needs to be translated to 40 locals, some developers prefer different custom messages, so we might introduce changes that make it possible for the developer to show this message instead. The same issue on Android: If you paste using the paste button above the keyboard instead of the context menu, the same issue occurs. The rich text pasting feature works well for most use cases, though it's not meant to be perfect, especially on Flutter web. It's already disabled by default. It might not work on all browsers (e.g., Firefox), similar issues on Quill JS and similar frameworks, see Quill JS #2832 as an example. |
On web it requires no native code. package:web works fine, we've used it to implement this elsewhere. Super clipboard isn't required at all to make this work on web, which is the most likely place that you're going to be having HTML pasted. EventStreamProviders.pasteEvent
.forTarget(window.document)
.listen(onPaste);
The flutter_quill code that uses ClipboardService won't work on all browsers because FF doesn't support clipboard read until 127 (https://caniuse.com/mdn-api_clipboard_read), so this would have to come from the paste event. While ClipboardService might be a great option outside of the web, it isn't a great option on the web. If restricting to FF > 127 (released only a month ago and currently at 0% globally), then I believe reading html is a now possibility. However, paste event event handler is still useful for image paste, or potentially for pasting raw quill deltas from a native quill editor to a in browser editor. Now maybe you could argue an extension is the best place for this and that would be fine, but can the extension stop the ctrl+v from being handled by the quill editor so that it can be manually handled in the paste event?
It's still useful to have an example extension somewhere for receiving non plain text clipboard formats like images or quill deltas. Publishing plugins may be out of scope, but the code is very useful even if people are publishing their own versions of the plugin for their own apps.
Even a hook is better than the current state.
Pasting HTML doesn't work at all on web as far as i can tell. It certainly shouldn't be disabled by default on web. Not sure what the argument is for not supporting it out of the box on web, maybe the super_clipboard dependency? But like I said, super_clipboard isn't needed for this of web and isn't actually a good solution for paste on the web anyway due to the browser clipboard api situation. |
Maybe it doesn't require a third-party plugin and only needs
The current solution is not designed to support the web and might need to be refactored to support it. Or might be supported without changing the
Providing an example extension code seems to be useful. Managing it and publishing it might not fit most of the needs and use cases. Even if the developer doesn't have an extension and users only need to install the Flutter Quill extension, it's still quite confusing to the users, it should be related to the app name itself, if there is a bug related to the app code that we don't have access to, users might report it in this repository.
You're right. Though I still prefer to do it in a way that prevents using extensive conditional checks for the current platform, it would be very useful if there's a way to remove the code that has an if statement to check the current platform in the final release app. We should make the code extensible in an efficient way rather than solving a problem by showing a UI message.
Most of the developers use the package for Mobile or Desktop, which is why we have limited support for the Web, I suggest solving this issue in a way that doesn't affect the other platforms. This seems to require a platform-specific code. All platforms support retrieving the Clipboard content in HTML at any time from anywhere. Thank you for the suggestions for fixing the issue. |
This issue seems to be easy to fix Just a minor thing to keep in mind, with each feature we implement, most of the features are configurations/options that are disabled or enabled by default, we depend heavily on conditional checks, and a lot of the time it will be more performance efficient if it's implemented into the app project itself, for example
This dialog, might not be something all developers want, or they might want to customize some things like the For now, I will document how to implement this feature in the README of |
As an update, the issue of registering the The reason why the rich text paste not working properly is that the paste logic on the web seems to be separated from non-web platforms, but this is not documented. It might be a bug as well. So even if you comment on everything related to clipboard paste in The plain text functionality still works, and the rich text paste (that's already a feature before this issue and recent changes) doesn't even trigger. The |
While trying out the Flutter/WASM application with the Clipboard API implementation on Firefox (on macOS): It seems to be working fine, the following returns window.navigator.getProperty('clipboard'.toJS) != null &&
window.navigator.hasProperty('clipboard'.toJS).toDart When retrieving HTML from the clipboard, it shows a button that says It work perfectly without having to use the Clipboard events. @jezell Can you clarify or provide more details about the issue if I'm missing something? Retrieving the HTML work on the web, even on Firefox, is the issue with identifying the method that's responsible for the paste on the web since it's separated from non-web platforms. Commenting everything related to the clipboard and paste, paste text, plain text paste in When discussing the |
Is there an existing issue for this?
Flutter Quill version
9.5.13
Steps to reproduce
Copy HTML with bullets on web, paste.
A few problems here:
First off the browser won't actually let non plain text formats through using the clipboard API, so the clipboard service always thinks there is no html on the clipboard. On web, non text formats are only available from the paste event.
Steps to fix:
Expected results
Bullets are preserved
Actual results
Bullets are not preserved
Code sample
Code sample
[Paste your code here]
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]
The text was updated successfully, but these errors were encountered: