I have different kinds of articles: some already come with Tiptap-compatible JSON (plus HTML and raw text), while others come from external sources that include their own styling (for example, a class named pkv-header). These external articles do not have JSON.

My goal is to unify all articles under a single, preconfigured Tiptap-based editing flow so that, when loaded into the Tiptap editor, their styling is recognized and transformed into the styling used by my app. When clicking “edit,” the external styling should be converted to my styling, and upon saving, only my styling should remain.

Right now, I’m experimenting with a custom node in Tiptap to detect and handle the pkv-header class. The initial rendering somewhat works when I open the article in Tiptap. However, when I save, the styling is lost. Ideally, I want to parse the external class once, transform or map it to my desired style, and maintain consistency in the Tiptap JSON.

Here’s an outline of what I’m doing:

1. Parsing external text • If the article has no Tiptap JSON, I use generateJSON(thisment.text, EDITOR_CONFIG) as a first pass to create Tiptap JSON. • The external text might look like:

<div class="pkv-header">Gold text here...</div>

// My first approach.. But dont work after save
{
    "type": "doc",
    "content": [
        {
            "type": "pkvHeader",
            "content": [
                {
                    "type": "text",
                    "text": "Gold text here..."
                }
            ]
        },
        .....

The final result should look like:

<p><span class="r-editor-text-color-grey"><strong>Gold text here...</strong></span></p>

Json should look like:

{
    "type": "doc",
    "content": [
        {
            "type": "paragraph",
            "content": [
                {
                    "type": "text",
                    "marks": [
                        {
                            "type": "textStyle",
                            "attrs": {
                                "color": "grey"
                            }
                        },
                        {
                            "type": "bold"
                        }
                    ],
                    "text": "Gold text here..."
                }
            ]
        },
        ........
    ]
}

2. Custom Node (PkvHeader) • I created a custom node that looks for div.pkv-header:

export const PkvHeader = Node.create({
  name: 'pkvHeader',  // might be a wrong or suboptimal node name
  group: 'block',
  content: 'inline*',

  parseHTML() {
    return [
      {
        tag: 'div.pkv-header', // Finds a div with class "pkv-header"
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    return [
      'p',
      mergeAttributes(HTMLAttributes, { style: 'font-weight: bold; color: #999;' }),
      0
    ];
  },
});

The intent is that this will detect the and the Tiptap NodeStyleJSON, which generates the desired HTML.

export const EDITOR_CONFIG = [
  StarterKit,
  TextStyle,
  Underline,
  CustomHighlight.configure({ multicolor: true }),
  CustomColor,
  Link.configure({
    protocols: ['https'],
    openOnClick: false,
  }),
  Table,
  TableRow,
  TableHeader,
  TableCell,
  PkvHeader,  // my custom node
];

ngOnChanges(changes: SimpleChanges) {
  if (
    changes['isEditing'] &&
    changes['isEditing'].currentValue !== changes['isEditing'].previousValue
  ) {
    if (thisment && !thisment.textJson) {
      // for external comments: if there's no Tiptap JSON, generate it
      const json = generateJSON(thisment.text, EDITOR_CONFIG);
      console.log(json);
      thisment.textJson = JSON.stringify(json);
    }

    this.updateForm();
    if (thisment) {
      console.log(thisment.textJson);
      const sel = this.xxx.find((item) => item.id === thisment.scope)
                 || this.xxx.find((item) => item.id === Scope.CLIENT);
      this.currentScopeOption$.next(sel);
    }
  }
}

What’s Going Wrong • When I load the external text, the custom node sometimes captures the styling on the first load. •After editing and saving, the pkv-header style is gone, and everything is stripped or turned into plain text without my bold/color definition. •I’d like to either preserve the external styling as-is or convert it to my own styling consistently in the Tiptap JSON.

Its feel like i dont understand how Tiptap works.

What I’ve Tried 1.Using the parseHTML() method to detect .pkv-header. 2.Using renderHTML() to assign inline styles. 3.Changing the custom node’s name to match the class. 4.Searching for a Tiptap extension that would handle foreign classes automatically.

Question •How do I make Tiptap properly parse these external classes (like pkv-header), transform them into my own style or markup, and keep that styling when saving the document? •Is there a recommended approach for converting external HTML classes into Tiptap’s internal node schema so that the final JSON retains (or translates) those styles?

I use Tiptap v2

Best regards