Custom attributes gets removed when inserted from already designed template in to tiptap editor

Description
I was trying to insert a pre-defined template which contains custom attributes for each elements based on the element needs like data-element-name are getting removed when inserted inside the tiptap editor. Also some of the html elements are also getting removed in the similar manner.

How can we prevent the removal of these element attributes from being getting removed?

Screenshot, video, or GIF

1. Element structure which expected to be as when data is being inserted to tiptap editor.
   
2. Element structure when tiptap editor modifies it.
   

Initial Content was inserted from the template by using content key in the configure content

Tiptap (and the underlying ProseMirror) editor ensures that any markup, including attributes, tags etc., that is not explicitly whitelisted gets stripped off when it's loaded in the editor. This behaviour is desirable to keep your markup clean. That means you will need to whitelist these attributes explicitly (only the ones you want).

You are probably using the Heading extension from Tiptap to handle your heading tags, you can extend the Tiptap extension to whitelist these attributes -

import { Heading as TipTapHeading } from "@tiptap/extension-heading";

export const Heading = TipTapHeading.extend({
  addAttributes() {
    return {
      id: {
        default: null, // change this if you want a different default value
        parseHTML: (element: HTMLElement) => {
          // Get the attribute value from markup if it's available, otherwise assign null as the attribute value
          return element.hasAttribute("id") ? element.getAttribute("id") : null;
        },
      },
      "data-element-name": {
        default: null, // change this if you want a different default value
        parseHTML: (element: HTMLElement) => {
          // Get the attribute value from markup if it's available, otherwise assign null as the attribute value
          return element.hasAttribute("data-element-name") ? element.getAttribute("data-element-name") : null;
        },
      }
    };
  }
});

Then use this extension in editor extensions list and remove the Heading extension from Tiptap -

import { Editor } from '@tiptap/core';
import Document from '@tiptap/extension-document';
import Paragraph from '@tiptap/extension-paragraph';
import Text from '@tiptap/extension-text';
// import Heading from '@tiptap/extension-heading';
import Heading from './path/to/your/extension/file';

const editorInstance = new Editor({
  extensions: [
    Document,
    Paragraph,
    Text,
    Heading.configure({
      levels: [1, 2, 3],
    }),
  ],
});

Similarly, for the tags that are removed from the final markup, you'll need to check if the relevant extensions (see Nodes and Marks) are part of the editor config, if not add them. If you can't find any extension that supports your tag then you'll need to create your own extension.

Also, go through the custom extension documentation and extensions documentation to see other options you can use while extending an existing extension or creating a new one.