Fallback node for unsupported HTML tags

[offbit-it]

What’s the bug you are facing?

When I provide HTML string to the editor, it removes the unsupported HTML tags like img, script, (event custom tags in case of frontend frameworks).

How can we reproduce the bug on our side?

Provide any HTML string which contains unsupported tags like img, script.

Can you provide a CodeSandbox?

No response

What did you expect to happen?

I expected that those unsupported tags are NOT removed from the editor (because the same data is used to edit raw HTML in textarea). It should be either not displayed or display text if available inside that tag.

Anything to add? (optional)

Maybe some sort of wildcard/fallback node?

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖

[jameslesliewatts]

I am also struggling with this because I need the user to be able to toggle between Tiptap editing and HTML editing.

I'm trying to make a sort of Wildcard Node that will match any tag and just render the matched tag name with its inline attributes and pass the content back in.

I am trying to match by using regex for tag in the parseHTML method, but that doesn't work.

Is this possible? Are there other workarounds?

Thank you so much!

[philippkuehn]

This is by design. Tiptap (ProseMirror) is a semantic text editor and not an HTML editor. You can try to create something like a wildcard extension but this is nothing we will provide.

[crairdin]

Once we figured out what tiptap is and what it isn't (as described by @philippkuehn), and what it would take to create the extensions we would need to make it even nominally useful for our particular case, we determined it was easier to remove it from our project than do everything required to make it do even the simplest task (like accept and reasonably reproduce a copied and pasted snip of a website or Word document). With just a few hours work, we were able to adapt a simple contenteditable div to our purpose without giving up convenient features like using a custom toolbar to control (and show the state of) bold, italic, underline, strike, font color, font size, ordered/unordered lists, link/unlink, headings, paragraphs, blockquotes, and probably more I'm not thinking of. In the case of constructs like tables that we don't provide easy buttons to insert, the user can construct a table by editing the HTML directly or by pasting a table into the div. Once they do this, they can edit the table just fine.

tiptap probably works fine for simple tasks with limited requirements and might be exactly what a lot of people are looking for. My users are going to immediately paste tables and nested lists into our editor, and no amount of explaining what a "semantic text editor" is will satisfy them. :-)

[offbit-it]

@philippkuehn do you have somewhere an example how to make wildcard extension? Thanks!

[kazzkiq]

This is by design. Tiptap (ProseMirror) is a semantic text editor and not an HTML editor.

Not sure what semantic means in this context?

90%+ of internet users interact with social networks on a daily basis. Social posts are linked into many news websites, blogs, and CMS editors. And many of those social embeds make use of <script> tags.

It is really important for Tiptap to actually provide a way to embed such posts (or giving the devs low-level APIs to do so). Simply ignoring this behemoth of a need doesn't seems the right approach.