area17 / twill

Twill is an open source CMS toolkit for Laravel that helps developers rapidly create a custom admin console that is intuitive, powerful and flexible. Chat with us on Discord at https://discord.gg/cnWk7EFv8R.
https://twillcms.com
Apache License 2.0
3.72k stars 568 forks source link

Disable HTML paste in TipTap #2489

Closed AidasK closed 3 months ago

AidasK commented 6 months ago

Summary

Currently wysiwyg editor allows to paste any html you want to it and it messes up some html output. It might be even a security issue where non technical people might copy paste some headline from the other website which contains some html scripts and css.

Describe the solution you'd like

There are two possible solutions:

Additional context

We currently have a h2 block which uses tiptap editor to highlight some phrases in the headline. Final result is invalid html, because html was copied from another website.

We must use wysiwyg editor as our customers don't understand html, so editor should provide a safe way to do this.

image
Tofandel commented 6 months ago

AFAIK tiptap does sanitize the html you paste based on the nodes/extensions availables to tiptap, only the allowed tags and attributes listed in the nodes are kept

From what I see your issue is because in the tiptap editor even though we don't show the heading in the menu, the extension is still there and configured for all levels of headings, we should review the menu to make sure the controls and the extensions given match

BTW if you are just providing a heading H2 you could just use a text for this, which it seems is what you want instead of disabling html paste, because you are the one wrapping it in h2 after the fact, tiptap can't do any html validation (because it has rules for it and normally you can't put a block node inside another block node and tiptap would not allow a h1 into a h2 for this reason)

With tiptap what you would normally do is pass it a document and force it to be a h2 https://tiptap.dev/docs/editor/examples/custom-document

We just need to develop a way to allow this kind of things into twill, I would love a way to have full control over the editor