Tiptap: [Help Needed] adding custom classes to default nodes?

[Neophen]

Hey is there a way to add custom classes to nodes.

At the moment i'm extending the default nodes.

But this has an issue with the heading block, as for some reason it doesn't detect that a heading is active in menuBubble.

While it adds the correct attributes and class on click.

this is how i'm extending the Heading node.

import { Heading } from "tiptap-extensions";

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

[mnooblet]

I'm kinda trying the same, may I ask how you solved this?

[Neophen]

@mnooblet here's the heading node. let me know if you need any others:
i have bullet-list, paragraph, and link.

import { Heading } from "tiptap-extensions";

export class OctHeading 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: `oct-h${node.attrs.level}`
      }, 0],
    }
  }
}

[lmvalenzuela]

@Neophen could you please share your parragraph node class extension you developed ? I'm trying to put just a custom css class to all my parragraphs and haven't been able to do it. Thanks

[Neophen]

import { Paragraph } from "tiptap";

export class OctParagraph extends Paragraph {
  get schema() {
    return {
      content: "inline*",
      group: "block",
      draggable: false,
      parseDOM: [
        {
          tag: "p"
        }
      ],
      toDOM: () => [
        "p",
        {
          class: "oct-p"
        },
        0
      ]
    };
  }
}

[hanspagel]

Thanks for sharing! We’ll make that easier with version 2. 🙃