Custom Extensions: how to add a custom class?

[ElHex]

Hey, I've been loving tiptap! really wonderfull editor but I think we are lacking a bit in the documentation, I've seen all the examples but haven't found any way to change/add a custom class?

I've been trying to apply a "line height" custom extension using a class, but only I've seen examples with the attributes part:

  addGlobalAttributes () {
    return [
      {
        attributes: {
          lineHeight: {
            default: '1.0',
            renderHTML: attributes => {
              if (!attributes.fontSize) {
                return {}
              }

              return {
                // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
                style: `font-size: ${attributes.fontSize}`
              }
            },
            parseHTML: element => ({
              fontSize: element.style.fontSize.replace(/['"]+/g, '')
            })
          }
        }
      }
    ]
  },

on addGlobalAttributes () is there a option for class? Thanks!

[philippkuehn]

Does that help? https://www.tiptap.dev/guide/styling/#option-2-add-custom-classes

[hanspagel]

If you want to build a LineHeight extension have look at the source code of the TextAlign extension:

https://www.tiptap.dev/api/extensions/text-align

It’s bascially the same, just replace text-align with line-height, pass numbers as a value and so on. :)

[ElHex]

Yeah I've taken a look to that, but I really need to use classes on this one, when I import a html that has that property (or a similar class) I want to replace it with my custom class :/