Skip to content
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

Drag & Drop and Paste of Images renders as Base64 without addImageBlobHook in Firefox #3224

Open
lupinitylabs opened this issue Jan 30, 2024 · 1 comment
Labels

Comments

@lupinitylabs
Copy link

lupinitylabs commented Jan 30, 2024

Describe the bug

When I remove the default addImageBlobHook, drag & drop of images does not do anything on Chrome, which is expected behavior. However, Firefox still renders the image as a Base64 representation even with no registered hooks.

To Reproduce

Steps to reproduce the behavior:

  1. Unregister the addImageBlobHook using editor.removeHook('addImageBlobHook')
  2. Drag & drop an image to the editor on Firefox (121.0.1) note: drop on an area of the editor outside of existing text, preferably on an empty editor.
  3. The image will be added and in the Markdown view, it is rendered as a base64 data url.

Expected behavior

I would expect consistent behavior across all browsers, i.e. not having base64 data urls being produced in Firefox with deactivated hooks.

Desktop (please complete the following information):

  • OS: Windows 10 Enterprise
  • Firefox 121.0.1
  • TUI editor 3.2.2

Additional context

It would probably be a good idea to have an option to deactivate the editor acting as a drag and drop target altogether.
The described issue is a highly problematic with users dragging or pasting images in, resulting in megabytes of text and a bad UX if the form value has a max length validation or if you have to filter out those images afterwards, resulting in images just being gone.

@lupinitylabs
Copy link
Author

By the way, this phenomenon only occurs when dragging the image to the toastui-editor div. It does not happen if it is dragged into the toastui-editor-contents div (so, for example, into existing text).

This should make the issue relatively easy to spot and to fix. Either we have two drop targets here that are handled differently or we can at least remove the editor toastui-editor class div drop target?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant