How can i add custom class to heading?

[crying2812]

I created a heading like this but when it shown on the frontend, it doesn't show my custom class, how can i fix it? Thanks

content: < h1 class="direction--vertical writing__startDate">asdasdsa</ h1>

[andreasvirkus]

Hi @crying2812! You would need to create a custom Heading extension for that. You can reuse a bulk of the existing Heading extension by extending it. The only part you'll need to change is the toDOM method in the schema:

toDOM: node => [`h${node.attrs.level}`, { class: 'custom-class' }, 0]

Putting it together, this is how it'd look like in a Vue component

<script>
// Editor.vue 
import { Heading } from 'tiptap-extensions'
import { Editor } from 'tiptap'

class CustomHeading extends Heading {
  get schema() {
    return {
      attrs: {
        level: {
          default: 1,
        },
      },
      content: 'inline*',
      group: 'block',
      defining: true,
      draggable: false,
      parseDOM: this.options.levels
        .map(level => ({
          tag: `h${level}`,
          attrs: { level },
        })),
      toDOM: node => [`h${node.attrs.level}`, { class: 'custom-class' }, 0], // Change `custom-class` in this line 
    }
  }
}

export default {
  name: 'Editor',
  data() {
    return {
      editor: new Editor({
        extensions: [CustomHeading]
      })
    }
  }
}
</script>