Only allow a single H1 on the first line only

[Adam-Collier]

Hi guys,

Thanks for the great project! I'm wondering if it's possible to allow only a single H1 on the first line and for the rest of the editing experience limit the headings to H2's and H3's? The reason for this is we want our HTML to be as semantically correct as possible and not allow multiple H1's to be rendered on a page/post :)

Hope you can help!

[levidavidmurray]

+1 on this

I opted to create a completely separate editor for my title, limiting its input with Document, Text and Heading.configure({ levels: [1] }) extensions

const titleEditor = new Editor({
    editorProps: {
        attributes: {
            class: 'article-title',
        },
    },
    content: 'Untitled Article',
    extensions: [
        Document,
        Text,
        Heading.configure({ levels: [1] })
    ],
})

This makes it so that the title editor can only have h1 tags in it, but now I'm wondering how I can limit the editor to only allow a single instance of the tag. I'll probably just opt for preventing the enter key for now.

I was originally just using a simple input, but I didn't want to bother with the hassle of implementing the height resizing logic.

[levidavidmurray]

Ahh, I misunderstood your question. My problem was different and I was able to solve it with a custom Document

https://tiptap.dev/examples/custom-document

[C-Hess]

I created a custom node extension called "Title" and then limited the document schema. All it does is wrap content within an h1 tag. You also have a bit more flexibility as with a custom extension, you can prevent adding marks if you want to the title. If I get the chance, I might post an update on how it works out later.

import { mergeAttributes, Node } from "@tiptap/core";

export type Level = 1 | 2 | 3 | 4 | 5 | 6;

export interface ITitleOptions {
    level: Level;
    HTMLAttributes: Record<string, any>;
}

declare module "@tiptap/core" {
    // eslint-disable-next-line @typescript-eslint/naming-convention
    // interface Commands<ReturnType> {
    // Custom commands go here. Leaving this snippet for any devs needing to make their own extension
    // }
}

export const Title = Node.create<ITitleOptions>({
    name: "title",

    addOptions() {
        return {
            level: 1,
            HTMLAttributes: {},
        };
    },

    content: "text*",

    marks: "",

    group: "block",

    defining: true,

    renderHTML({ HTMLAttributes }) {
        const level = this.options.level;

        return [`h${level}`, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
    },
});

export default Title;

Then for the schema I just did this:

    document: {
        extend: {
            content: "title block+",
        },
    },
`

[borodulex]

Also, I would suggest you remove the group: "block" in case if you want prevent heading split by pressing an Enter button.

[litanlitudan]

Would love to read the blog post about how this works! Very talented solution! @C-Hess

[joseph-sm]

I know this is an old thread @C-Hess thank you for that, is exactly what I needed, my one issue is hitting enter creates a new h1 I tried setting group: 'block' but I get an error "SyntaxError: No node type or group 'block' found (in content expression 'block+')".

I am fairly new to TipTap so am struggling to find a suitable solution to only allow one h1, has anyone got any further insight? I was thinking of maybe there is a way to limit the editor to one node?

UPDATE: for anyone else struggling with this I ended up preventing the user using enter in the custom title extension, I found the solution here: #2948

[chuanqisun]

Try extend the existing Heading node first and then constrain the levels. This way you can reuse everything from the built-in heading. Here is my solution:

import Document from "@tiptap/extension-document";
import Heading from "@tiptap/extension-heading";
import Paragraph from "@tiptap/extension-paragraph";
import Text from "@tiptap/extension-text";
import { Editor } from "@tiptap/core";

const DocHeading = Heading.extend({
  name: "h1",
  group: "none", // <- prevent it from being considered as a `block` in the body of the document
}).configure({ levels: [1] });

const BodyHeading = Heading.extend({
  name: "h23456",
}).configure({ levels: [2, 3, 4, 5, 6] });

const CustomDocument = Document.extend({ content: "docHeading block*" });

// ------ An example config in vanilla JS API ------
const editor = new Editor({
  extensions: [CustomDocument, DocHeading, BodyHeading, Paragraph, Text],
});