How to retain the original HTML inline styles when inserting templates into Tiptap editor (React)?

[its-me-dhina]

I’m using the Tiptap editor with some custom extensions configured like this:

const extensions = [
  // StarterKit
  StarterKit.configure({
    paragraph: {
      HTMLAttributes: {
        class: 'yp-paragraph',
      },
    },
  }),
  
  // Table extension
  Table.configure({
    resizable: false,
    HTMLAttributes: {
      style: 'display: block; width: 100%; box-sizing: border-box; border-collapse: collapse; margin: 0; overflow-x: auto; table-layout: fixed; padding: 0.25rem;',
    },
  }),
  
  // Table-related extensions
  TableRow,
  TableHeader.configure({
    HTMLAttributes: {
      style: 'background-color: #d1d5db; font-weight: bold; text-align: left; box-sizing: border-box; position: relative; vertical-align: top; border-style: solid; border-width: 1px; border-color: #9ca3af; padding: 0.375rem 0.5rem; margin-bottom: 0;',
    },
  }),
  TableCell.configure({
    HTMLAttributes: {
      style: 'box-sizing: border-box; vertical-align: top; min-width: 128px; border: 1px solid #9ca3af; padding: 0.375rem 0.5rem; margin-bottom: 0;',
    },
  }),
];

When I insert an HTML template with inline styles (like a

tag and a

), the styles defined in my extensions get applied, but the original inline styles from the HTML template get removed.

For example, if I insert this HTML:

<p style="font-size: 16px; color: #333;">This is a paragraph.</p>
<table style="border-collapse: collapse; width: 100%;">
  <tr><td style="padding: 8px;">Cell</td></tr>
</table>

Tiptap only applies the styles defined in my extensions (e.g., the yp-paragraph class), but the original inline styles (like font-size: 16px on the <p> and styles on the <table> tags) are discarded.

My Question:

How can I preserve the original inline styles from the HTML template when inserting it into Tiptap?
Do I need to handle every tag and style explicitly, or is there a better way to retain the original styles when inserting HTML?

[nperez0111]

You need to handle every style that you want to preserve. Otherwise it will be discarded as content that does not match the schema.

[its-me-dhina]

Thanks!

[sangecz]

@nperez0111 How to do that? We are using html templates for emails with inline styles. And we want to allow users to edit them in a nice way without screwing up HTML.

[nperez0111]

#5675 (reply in thread)

[sangecz]

ok, got it, we abandoned tiptap for this usecase

[subbu1308]

@nperez0111 in the above example, a p tag can possibly have varied css style props and it could be very hard to whitelist all of them.

is there a way to insert html content as it is without loosing any of the element's attributes?

[nperez0111]

No there is not a way to do this.

Tiptap is based on Prosemirror, and it is not an arbitrary HTML editor, it is a rich text editor that needs to have full control of the HTML that it is editing to make changes to it. Prosemirror does this by attempting to parse the content in such a way that it conforms to a schema (which is derived from the nodes & marks that you specify as Tiptap extensions), this means content which does not conform to the schema WILL BE LOST. This is a tradeoff, Prosemirror can accept a fair amount of HTML content & parse it into a structured format but it cannot reliably do so with arbitrary HTML (liberal in what it accepts, strict in what it outputs).