Which packages did you experience the bug in?

nextjs

What Tiptap version are you using?

2.2.4

What’s the bug you are facing?

I'm using Tiptap for a rich text editor. I have h1 and h2 heading elements, but when I change the text to these headings, the font size doesn't visually change. Inspecting the element in the browser confirms the tag is correctly set to h1 or h2, but the size remains the same as regular text.

I've downloaded and configured all the necessary Tiptap extensions, but there's no apparent font size change for headings. While inspecting the element, it shows up as h1 or h2 as expected.

What I've tried:

Used h1 and h2 elements in Tiptap editor. Inspected the element in the browser to verify tag changes. Downloaded and configured all Tiptap extensions.

What browser are you using?

Chrome

Code example

https://github.com/loki4514/Blog-App/tree/main/src/app/TipTap

What did you expect to happen?

Create Blog

            </div>`

`const Tiptap = ({ content, onChange }: any) => {

const handleChange1 = (newContent: string) => {
    onChange(newContent)
}
const editor = useEditor({
    extensions: [
        Document,
        Paragraph,
        Text,
        Heading.configure({
            levels: [1, 2],
        }),
        CodeBlockLowlight.configure({
            lowlight,
        }),
        StarterKit.configure({
            bulletList: {
                HTMLAttributes: {
                    class: "bullet_class",
                },
            },
            orderedList: {
                HTMLAttributes: {
                    class: "order_class",
                },
            },
            heading: {
                HTMLAttributes: {
                    class: ``,
                },
            },
        }),
        Image,
        BulletList.configure({
            HTMLAttributes: {
                class: 'list-disc pl-13'
            }
        }),
        ListItem,
        Underline,
        Link.configure({
            openOnClick: false,
            autolink: true,
        }),
        OrderedList.configure({
            HTMLAttributes: {
                class: 'list-decimal pl-13'
            }
        })
    ],
    editorProps: {
        attributes: {
            class:
                "flex flex-col px-6 py-3 justify-start border-b border-r text-black border-l border-gray-700  items-start w-full gap-3 pt-4 rounded-bl-md rounded-br-md outline-none"
        }
    },
    onUpdate: ({ editor }) => {
        handleChange1(editor.getHTML());
    },
})

return (
    <>
        <div className='w-full px-4'>
            <Toolbar editor={editor} content={content}></Toolbar>
            <EditorContent style={{ whiteSpace: "pre-line" }} editor={editor} />
        </div>

    </>

)

}

//tiptap svg button <button onClick={(e: any) => { e.preventDefault() editor.chain().focus().toggleHeading({ level: 1 }).run() }} className={ editor.isActive("heading", { level: 1 }) ? "bg-slate-500 text-white p-2 text-3xl rounded-lg" : "text-bold text-3xl" }

                >
                    <Heading1 className="w-5 h-5" />
                </button>
                <button
                    onClick={(e: any) => {
                        e.preventDefault()
                        editor.chain().focus().toggleHeading({ level: 2 }).run()
                    }}
                    className={
                        editor.isActive("heading", { level: 2 })
                            ? "bg-slate-500 text-white p-2 rounded-lg"
                            : "text-bold"
                    }

                >
                    <Heading2 className="w-5 h-5" />
                </button>`

Anything to add? (optional)

No response

Did you update your dependencies?

[X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

[ ] Yes, I’m a sponsor. 💖

ueberdosis / tiptap

Text size not changing for h1 and h2 elements in Tiptap editor #5008