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

Pasted text often strangely bold #32

Open
davidreedernst opened this issue Oct 5, 2023 · 6 comments
Open

Pasted text often strangely bold #32

davidreedernst opened this issue Oct 5, 2023 · 6 comments

Comments

@davidreedernst
Copy link

davidreedernst commented Oct 5, 2023

First, thank you so much for this plugin! We've been using Quill for years, but just discovered some of the bugs related to pasting. We're very happy to have this tool!

The only weakness we're seeing is that text that's pasted in is sometimes bold, for no apparent reason. The easiest way to reproduce this is to

  • open a new Google Doc
  • type in some plain, unformatted text
  • copy it
  • paste it into a quill editor that's enhanced with quill-paste-smart

the resulting text will be bold, even though the text in the Google Doc was not.

We do not see this problem with all text. Text from the average website can be copied+pasted without this issue. I even tried with LibreOffice Writer instead of Google Docs, and it didn't happen there either. However, we did test a few other websites that didn't exhibit the same problem. So, I'm not sure what triggers it.

As a workaround, I've removed <b> and <strong> from allowed.tags. This prevents the unwanted bolding, but of course, it also prevents wanted bolding, like when you actually use the Bold feature in Google Docs. We see this as preferable for our users, so that's what we have running right now. But if you have any ideas on how we could keep bold only when it makes sense, I'd love to hear about it. I dipped my toe into the DOMPurify hooks, but it didn't seem promising. I could be wrong about that, though.

Thanks again for sharing this tool with the world!

@Artem-Schander
Copy link
Owner

Hi @davidreedernst
the only thing i can think of, is the substitution of heading tags. See source code.
You could disable the substitution all together, but that would result in inline text for all disabled block elements.

It would be nice if you could paste the content which results on unwanted bold text. If my assumption turns out to be correct, a possible solution could be to make the substitution of heading tags optional.

@davidreedernst
Copy link
Author

davidreedernst commented Oct 6, 2023

That seemed like a very good guess. To test it, though, I just hacked the quill-paste-smart code to remove those <b> tags, and the problem still happened.

I had the same thought: I wish I knew what exactly was getting pasted into quill after I select text in Google docs. Sadly, I don't know a way to do that. If you want to recommend something, I'm happy to hack at it for a while. It seems like there should be a way to use a DOMPurify hook to accomplish that. beforeSanitizeElement doesn't see to work. I can use uponSanitizeElement to log things in the console, just as you have in your example. However, it's not clear whether what gets logged before or after it gets sanitized. Whatever it is, the content all shows in the console inside of a <b> element already.

Rather than guide me through the process of figuring that out, though, it's probably easier if you just figure that out yourself. I get the error if I simply create a new Google doc, type in some random text, and paste that into my Quill. Does that happen for you too?

@Artem-Schander
Copy link
Owner

I just checked this and yes, i was able to reproduce the issue.
my first thought was to open the dev tools .. i wouldn't have thought google uses a canvas :(
however, the reason for the bold text is because google puts everything inside <b> tags and adds an inline style with font-weight:normal; to it. the inline style gets stripped by default. what's left is the <b> without the styles.

Bildschirmfoto 2023-10-06 um 17 48 33

your take on the DOMPurify events seems promising. you could try to spot the <b style="font-weight:normal;">...</b> and remove the b tag.

@Artem-Schander
Copy link
Owner

btw. if yopu would like to play around .. here is the sandbox:
https://codesandbox.io/s/vanilla-es6-quill-paste-smart-forked-75qs4p?file=/quill-paste-smart.js

@davidreedernst
Copy link
Author

The sandbox is a really nice setup, thank you for sharing that. My client is still interested in improving on what we have, so I may have time to devote to this at some point. However, it's unlikely to be in the next few days because of other priorities. I'll write back if I make any progress, in the meantime, I didn't want you to feel like I'd ghosted you. :)

@Artem-Schander
Copy link
Owner

no worries. it's all right. i don't have much time for this side quest myself.

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

No branches or pull requests

2 participants