Raw editing of HTML being sanitized

[twitcher07]

Describe the bug

I am experiencing a bug where manually added HTML in the HTML view is being sanitized on saving the entry. I am trying to do an anchor link within a vizy field but manually adding a id attribute to a html tag is being sanitized. It was my assumption that when you enable the html button and click on it, that you should be able to add some custom html.

Here is the html before saving:

HTML after saving:

Here is my vizy config JSON for the field:

{
    "buttons": [
        "html",
        "formatting",
        "bold",
        "italic",
        "underline",
        "image",
        "unordered-list",
        "ordered-list",
        "align-left",
        "align-center",
        "align-right",
        "link",
        "hr"
    ],
    "formatting": [
        "paragraph",
        "h2",
        "h3",
        "h4",
        "h5",
        "h6"
    ]
}

Steps to reproduce

1. Enable html button for field config.
2. Go to a entry with the vizy field included and click on the html button.
3. Manually add id="test" attribute to a HTML element.
4. Save entry.

Craft CMS version

4.4.15

Plugin version

2.1.9

Multi-site?

No

Additional context

No response

[engram-design]

This is by design with ProseMirror and its schema. You can't just add arbitrary HTML and have it save against a node. So while you can edit the raw HTML of the field, it won't necessarily save everything as you input it. This is to ensure that the HTML can be effectively represented as blocks of content (JSON).

This is true for HTML elements (the tags) and the attributes on the tag. We would need to modify the default Paragraph tag to allow for any additional attributes we want to support.

The way around this - while a little more work - is to create an extension for Tiptap that adds this allowed attribute to the Paragraph node.

[twitcher07]

@engram-design Ok. I kind of figured it had something to do with ProseMirror or Tiptap. I was just unsure with all the different layers and options which needed configured to allow it.

I will look at making a extension to allow it. I might have some questions though if you don't mind answering them once I get started on it.

[engram-design]

Yeah, it's an unfortunate limitation, and I know the presence of a HTML button makes it seem like its a free-for-all. I did spend some time looking into ways we could allow this, but it really goes against the fundamentals of these libraries.

Please do ask any questions (maybe in a new issue to track there)!

[thangaraj-moorthi]

I am still facing the same issue when manually adding an ID to any HTML tag in the HTML view, as the entry is sanitized upon saving in the latest version 2.1.12.

[engram-design]

This is correct behavior, as per my above comments. It’s a design decision from TipTap/ProseMirror and not something easily worked-around. You cannot save arbitrary HTML against a node, because that’s not how they work. They have a specific schema that’s very strict.

[thangaraj-moorthi]

Thank you.