verbb / vizy

A flexible visual editor for Craft CMS
Other
43 stars 8 forks source link

Dealing with tags when pasting content. #134

Open JeanLucEsser opened 2 years ago

JeanLucEsser commented 2 years ago

What are you trying to do?

One of the main use case with a wysiwyg editor, at least with my clients, is pasting from an outside source. That could be from a web page, or worse, a word doc!

We should be able to set the tags we want to be allowed when pasting, with option for simply removing, replacing, and even dealing with removing some tag's attributes.

But doing that, we want something more bug free than what redactor offers, as well as simpler to set up.

There is another issue dealing with line breaks and allowing new paragraphs on pasting but that's for another discussion.

What's your proposed solution?

As previously said, we should keep it simple.

First, I don't think we need both an allowTags and a preventTags option. When thinking about what should be kept and what should be removed, I think we only need to allow. Let's be explicit about it. After all, let us decide what nodes we want and need for our content to make sense. Preventing tags has the added risk to forget about a bizarre tag we didn't even thought existed.

Second, I think that a well formed json config option can deal with removing and replacing, and even with attributes.

Here's what I think an tagsOnPaste option could look like:

{
  "allow": ["p", "h1", "h2", "h3", "img", "strong"],
  "h3": {
    "replaces": ["h4", "h5", "h6"]
  },
  "strong": {
    "replaces": ["b"],
    "attributes": null
  },
  "img": {
    "attributes": ["src", "srcset", "size", "alt"]
  }
}

This would keep p, h1, h2, h3 unchanged, would replace h4, h5, h6 with h3, would replace b with strong and removing any attributes on the tag, and removing all attributes on img except for src, srcset, size and alt. And it would remove all other tags.

Told you I had more coming ;)