Composer: Configurable allowed HTML elements and attributes

[benbucksch]

Objective

Create a TipTap extension which allows arbitrary HTML elements and attributes, and is configured with simple arrays to list the elements and attributes.

Config format

The format for configuration should look exactly like this:

    "allowedTags": [
      "html", "head", "title", "body",  "style",
      "a", "article", "b", "blockquote", "br", "caption", "code", "del", "details", "div", "em",
      "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "img", "ins", "kbd", "li", "main", "ol",
      "p", "pre", "section", "span", "strike", "strong", "sub", "summary", "sup", "table",
      "tbody", "td", "th", "thead", "tr", "u", "ul",
      "font",
    ],
    "allowedAttributes": {
      "a": ["href", "name", "target"],
      "iframe": ["allowfullscreen", "frameborder", "src"],
      "img": ["src", "alt", "height", "width"],
      "blockquote": ["cite"],
      "td": ["width", "valign", "align"],
      "font": ["size", "color"],
      "*": ["class", "name", "id", "title", "style", "border"],
    },

• This is similar to insane.
• Obviously, the specific elements and attributes are to be modified.
• * stands for any HTML element name.

Interop

• The whitelist should be in addition to the HTML elements and attributes already allowed by other extensions.
• If there are HTML elements in this list which are already configured by other extensions, this whitelist extension must not alter the behavior of these other extensions.
• Call the extension Whitelist.

Importance

• When we reply to styled emails from marketing departments, the formatting is completely wrong/lost, making the cited passage look very different from the original.
• We still need to sanitize the HTML for security and simplicity.

[jermy-c]

Progress

1. Having an issue getting a list of extensions that are already in the editor, running getting the extensions in OnBeforeCreate() still runs after addExtensions(), it is very important so we know extensions are already in the editor and we don't alter them

[benbucksch]

If you need to get the list of other extensions during your own extension startup, you run into an inherent problem: You are also an extension, and you might not be able to guarantee the order of loading, so if you do this at startup, the other extension that you're trying to list might not be loaded yet.

If that's your problem, I see a number of potential solutions:

• List this extension last in the list. (Disadvantages: Unreliable, because TipTap might change load order. Also, fragile to ask the dev to do that.)
• Delay the startup of your extension, then do the work. (Disadvantage: Not sure whether TipTap allows that or whether your code will still work.)
• Write your whitelist code in a defensive way, so that it won't interfere with the other extensions, even if they are both active at the same time.

[jermy-c]

Thanks for the solutions!

1. Listing the extension last can be achieved in the extension by setting the priority to a number lower than 100 but it doesn't seem to work or it works only on runtime.
2. Delaying the extension, delays the startup of the editor.
3. Writing the whitelist code in a defensive way, maybe the only option now.

[jermy-c]

Progress

1. Adds tags to editor and avoids conflict by having the dev pass in the extension used(not ideal and will change once a better solution is found)
2. All tags are added as nodes i.e. all tags are blocks and require at least a paragraph as their content<tag><p></p></tag>
3. The extension list is still needed or at least the schema of it because for * or all HTML contents, we need to pass in all the node/mark types for types to add the attribute for all types.
4. Just found out once the editor is initialized you can't enable/disable extensions, see https://github.com/ueberdosis/tiptap/issues/1044

[benbucksch]

Have you tried to google whether other people tried to solve the same problem (esp. the whitelist) and had ideas?

[jermy-c]

Have you tried to google whether other people tried to solve the same problem (esp. the whitelist) and had ideas?

I have googled the problem and the only possible solution I've seen is to destroy and reinitialize the editor. The UUID pro extension is adding an attribute to all tags which something similar to the global attribute problem.

Update I might be able to implement it by creating a ProseMirror plugin and having the extension call that (for attributes only).

Update

I might be able to implement it by creating a ProseMirror plugin and having the extension call that (for attributes only).

Won't work because it doesn't create the schema.

• I just implemented the extension by having the dev pass in the extensions that'll be used. It is working but it is messy atm.

Update

• [tag]: [attributes] the tag is but the extension names are not the same as the tag names. Do we allow tags or extension names?
• To allow tags we'll need to search the schema for the tag

Progress

1. Whitelist extension functional
2. You can copy and paste HTML with inline CSS and it works (and other whitelist elements and attributes)
3. Downside: it requires the dev to manually pass in the existing extensions