artem-schander / quill-paste-smart Goto Github PK
View Code? Open in Web Editor NEWQuill.js module to paste only supported HTML
License: MIT License
Quill.js module to paste only supported HTML
License: MIT License
Hi the plugin is great, works fine copying and pasting html. But it not allow me paste plain text, is there some config to allow me to do that?
When I paste this code in the editor quill-paste-smart is trimming all the white space
This is how it actually looks with quill-paste-smart enabled
What should I do to ensure that there are proper line breaks?
This is my allowed configuration
allowed: {
tags: [
'a',
'b',
'i',
'p',
'br',
'ul',
'ol',
'li',
'pre',
'span',
'h1',
'h2',
],
attributes: ['href', 'rel', 'target'],
},
Our Quill Configuration looks like this:
[
["bold", "italic", "strike", "link"],
[{ header: [3, 4, 5, 6, false] }],
["blockquote", "code-block"],
[{ list: "bullet" }, { list: "ordered" }]
]
As you can see we are only allowing h3
to h6
to be used because h1
and h2
are used in the design of our site. Unfortunately the header configuration is not parsed by quill-paste-smart and h3
etc are removed from parsed text. I think this is because the configuration is an array and not an literal.
I am currently using quill-paste-smart in my Angular 11 project. When I build it, it generates the following warning:
Warning: C:\Users\user123\my-app\src\main.ts depends on 'quill-paste-smart'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Do you supply an ECMAScript Module also?
Thanks.
When I paste from the clipboard, I cannot prevent certain attributes not to be stripped. If I add "class" or "id" to the list of allowed attributes, they still get removed. If I remove "href" then gets stripped too so it appears to be partially working.
Here's my config:
var quill = new Quill('#editor-quill', {
theme: 'snow',
modules: {
clipboard: {
allowed: {
tags: [ 'a', 'b', 'strong', 'i', 'em', 'div', 'p', 'ul', 'ol', 'li', 'span', 'br' ],
attributes: ['class', 'id', 'href', 'rel', 'target'],
},
},
},
});
Any ideas what I might be doing wrong? Or is this a bug?
Hey! The package is working nicely! But when I paste an iframe (like for a YouTube embed).... it pastes the content as text (as you would guess)... but now I have a bunch of text that looks like an iframe, but isn't. I've been trying to use clipboard addmatchers to detect the pasting of an iframe and only paste the src of the iframe, without the rest... but so far, no luck. Does this package have some options to make this work better? :)
Hello, I use Quill editor with plain javascript using script tag.
<script src="js/quill-1.3.7.min.js"></script>Than I can create new instance of quill editor by calling new Quill(...) but I struggle to use this your module same way. Is it possible insert it into webpage using <script> tag same way as Quill works ? Without need for npm ? Thank you.
The paste event suppresses base64 image conversion when pasting an image from the clipboard even if IMG or the Image option are selected. Looking at the source, it doesn't appear to look at the clipboardData.items collection values of type image. Alternatively, if img/image is permitted, permit the default quill paste behavior for that type.
when i paste img only, the ImageUploader plugin has already handled it once,so i want to prevent pasting. how to do that?
I have the configuration with toolbar: false, but with this plugin configured, I am getting that error because of:
{snip} ATTR&&(r=!0,e.ALLOWED_ATTR=["class"]),this.quill.getModule("toolbar").controls.forEach((function(n){switch(n[0]){case"bold":t&&(e.ALLOWED_TA {snip}
When I paste a text like this test test test https://github.com test test
, the module does not recognise the link in between and renders them all as plain text.
This however is recognised just fine with the default clipboard onPaste method.
On line 103, I replaced this
delta = delta.insert(content);
with
delta = delta.concat(this.convert(content))
This seemed to work. Is there a reason why the plainText is not handled with the this.convert
method?
Thanks
The README implies you can specify your own formatting preferences, instead of toolbar, however in my instance i'm hiding the toolbar with toolbar: false
in the modules.
This then throws an error on paste as in the plugin assumes the module toolbars will be present.
Cannot read property 'controls' of undefined
Example sandbox (paste some text):
https://codesandbox.io/s/react-quill-quill-paste-smart-forked-wxl2g?file=/src/App.js
I love this extension, but I have a problem running custom clipboard paste matchers. When the matcher returns a delta, this extension does not trigger the on("text-change").
This is an issue when also including other third party quill extensions like the quill-magic-url extension which relies on custom matchers. It took me a really long time to realize that this extension was causing the issue.
This only happens when checking for "Node.TEXT_NODE". Everything else seems to work fine.
Hi, I started using this recently and it's excellent. But I'm running into a frustrating problem. In one of my many pages that use this library, I need to have a button that simply inserts a small local image into the editor. I think I'm simply using
quill.clipboard.dangerouslyPasteHTML("<img src=/myimage.png />")
I was told other than in this one case, we cannot allow images to be pasted. When I took out 'img' from the allowed list, this no longer works. It inserts it, but then when I read the text out of the editor, the image string is gone. I understand this is by design. But is there any way for me to allow an exception or to further refine the criteria? For example, a way to allow only an image with a special class or id or something in order to whitelist it, but otherwise not allow other images. Or is it all images or no images?. Is there any middle ground? Like if I could combine items in the allowed list to allow more refinement in what is excluded? eg: allowed: ['b', 'strong', 'img[id=myimage]'].... something along those lines.
Thanks
Everything pastes normally except alignments.
When I try copy paste from word file, with any of the four alignments it does not work, it just pastes it in normal left alignment.
My toolbar is defined in html rather than in js configuration:
I've tried making toolbar through js also and it didn't work then aswell
<select class="ql-align">
<option selected="selected"></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
To not make the text big I have only copied the html alignment code.
For configuration I used your example where I added only headers because I needed them
modules: {
clipboard: {
allowed: {
tags: ['a', 'b', 'strong', 'u', 's', 'i', 'p', 'br', 'ul', 'ol', 'li', 'span', 'h1','h2','h3','h4','h5','h6',],
attributes: ['href', 'rel', 'target', 'class']
},
keepSelection: false
},
toolbar : '#toolbar'
}
If I have made a mistake somewhere please tell me where and why was that the problem.
Here is an example of text from Outlook:
Copying the same text from browser doesn't allow to repro the issue. Just try to type smth similar.
I created a small repo that could help you reproduce the issue: https://github.com/FreddyMcRay/quill-smart-paste-repro
Pasting text that you could see above results in following:
Hello,
How you can register this module on vue 3?
Steps to reproduce:
<img src='x' onerror='javascript:alert("XSS !" + location.href)' />
into Quill editorI assume this issue exists due to the fact that in the source code assigning of innerHTML is used. In quill editor it appears as expected so pasted text with HTML is displayed as plain text.
NOTE: If you comment out import import 'quill-paste-smart';
after pasting malicious img tag it does not open the alert.
when i npm install it, i get a umd file; i want to get the 'QuillPasteSmart' from module.ts by import xxx from 'quill-paste-smart'
I encouter this issue when npm run build. Does anyone encouter this issue?
Uncaught TypeError: Super expression must either be null or a function
Hi,
thanks for this awesome package! However, I have one problem.
I am using this package here to support mentions within my comments. The problem I am facing is that when I type a @
and select a user everything works fine! The mention tag is getting placed correct!
But when I edit an comment again the mention gets kind of destroy. Normally the mention looks like this @myuser
. But when clicking on edit the mention looks like this @a href="http://mywebsiteproject.test/user/myuser" target=_blankmyuser
.
So, there is a problem which the text which gets pasted into the textfield... But I don't know why.
The HTML Tag of a mention looks like this:
<span class="mention" data-index="0" data-denotation-char="@" data-id="1" data-value="<a href="http://mywebsiteproject.test/user/myuser" target=_blank>myuser" data-link="http://mywebsiteproject.test/user/myuser">
<span contenteditable="false">
<span class="ql-mention-denotation-char">@</span>
<a href="http://mywebsiteproject.test/user/myuser" target="_blank">myuser</a>
</span>
</span>
But after I pressed edit the html tags look like this:
<span class="mention" data-index="0" data-denotation-char="@" data-id="1" data-value="a href="http://mywebsiteproject.test/user/DealBee" target=_blankDealBee" data-link="http://mywebsiteproject.test/user/DealBee">
<span contenteditable="false">
<span class="ql-mention-denotation-char">@</span>
a href="http://mywebsiteproject.test/user/DealBee" target=_blankDealBee
</span>
</span>
=> Basically there is a problem with the tag..
This is how my clipboard module looks like:
clipboard: {
allowed: {
tags: ['a', 'b', 'strong', 'u', 's', 'i', 'p', 'br', 'ul', 'ol', 'li', 'span'],
attributes: ['href', 'rel', 'target', 'class', 'data-index', 'data-denotation-char', 'data-id', 'data-value', 'data-link', 'contenteditable', 'ql-mention-denotation-char']
},
keepSelection: true,
},
Does anybody know how to fix this problem/allow the mention tags and attributes?
Kind regards
For the italics case, only i
is included, and em
isn't - Quill uses em
for Italics, so when I try to copy/paste between quill instances when using quill-paste-smart, italics are removed.
Please could you add em
here:
quill-paste-smart/src/module.js
Line 141 in 39c5f09
Thanks!
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
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!
Here is the codepen.
I can't paste because of this issue. I hope you'll be able to resolve this. Thanks
If you are pasting, for example, the HTML content <ul data-checked="true"><li>todo item</li></ul>
and have enabled ul
and li
tags and the data-checked
attributes, it should paste as-is. However, what happens is the data-checked
attribute is lost. I've identified this happens when substituteBlockElements
option is set to true. Looking at the code, I'm not sure why, but it seems to go through the DOM and replace all block elements with new replacements, but those replaced items do not have the attributes copied over.
The end result is that this module currently breaks copy/paste for lists of type check
, which is a core feature of Quill.
A proposed solution would be to use the config object to see what attributes are permitted and copy the values of those attributes in this DOM node recreation step. However, I was unsure why this node replacement is happening in the first place even for whitelisted block tags, so I don't feel confident changing the code for a PR. Also, the module attempts to auto-configure itself and should ideally detect the presence of checklists in the toolbar config as well. Thanks for any help/insights.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.