Font sizes of headings cannot be overridden in MenuSelectHeading

[RuckieOfficial]

Which packages did you experience the bug in?

starter-kit

What Tiptap version are you using?

2.1.13

What’s the bug you are facing?

I have default settings and in the heading menu select heading h2 is 0.75 rem instead of 1.75rem.

extensions={[StarterKit, ...extension]}

In my custom extensions is not anything, that overrides heading config.

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

I expected that font sizes go chronologically.

Anything to add? (optional)

No response

Did you update your dependencies?

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

[RuckieOfficial]

Weird, seems like it takes mui h4 typography settings.

Forked example code: https://codesandbox.io/p/devbox/mui-tiptap-demo-forked-99lnfr?file=%2Fsrc%2FApp.tsx

[RuckieOfficial]

Update1: Right I see it uses mui theme heading sizes but skipped.

This should be better documented..

Also is possible to ovewrite these font sizes in menuHeadingSelect without changing theme? In example it is only in editor, but this popper is on the top of Dom.

I think you shouldn't use theme font sizes same as in h1 or enable to overwrite it.

Or my personal best solution count other headings based on your h1.

[sjdemartini]

@RuckieOfficial I'm not sure I entirely follow what the issue you're reporting is. Is it that you want each heading style to match the MUI default heading font sizes? For what it's worth, I left a comment in the code about my decision on those styles:

mui-tiptap/src/styles.ts

Lines 51 to 53 in 9e4bbb5

	// We don't use MUI's default heading typography styles of h1-h6 here
	// since h1 and h2 are a bit too huge/dramatic. Instead, for we use h3-h6,
	// subtitle1, and subtitle2.

In other words, I found the MUI default theme styles for h1 to be useful for something like a landing page hero, but not practical inside a document or similar (like a Tiptap rich text editor), hence choosing smaller heading font sizes all the way down. There's quite a lot to cover in the README as is, so I haven't documented stuff that seems more minor, like decisions around particular default styles in mui-tiptap.

You can override styles for anything in the rich text editor, like in this example (same as in the CodeSandbox linked from the README):

mui-tiptap/src/demo/Editor.tsx

Lines 129 to 138 in 0ad9992

	// An example of how editor styles can be overridden. In this case,
	// setting where the scroll anchors to when jumping to headings. The
	// scroll margin isn't built in since it will likely vary depending on
	// where the editor itself is rendered (e.g. if there's a sticky nav
	// bar on your site).
	"& .ProseMirror": {
	"& h1, & h2, & h3, & h4, & h5, & h6": {
	scrollMarginTop: showMenuBar ? 50 : 0,
	},
	},

This won't automatically override styles for the MenuSelectHeading component, and it isn't super straightforward to override styles for that component. It would be nice to make that component's styles more customizable.

If you could please clarify your issue, that would help. Thanks.

[RuckieOfficial]

@sjdemartini I agree that default fonts are huge. Now you have custom h1 font size and other font sizes are from theme. But if you use custom font sizes in project, headings > h1 could be way larger or smaller than h1.

And we use only h1 - h4 in our project with custom sizes, but you use more headings so headings > h4 could be larger or smaller too in that case.

I tried override headings in editor and it works just fine, but how u say it doesn't impact MenuSelectHeading at all which is not good, because it is not consistent then.

I hope I made it more clear now.

Edit: Long story short I think it would be optimal to not using theme font sizes at all in MenuSelectHeading and define it similarly as in h1 heading.

Edit2: It gotta be changed globally for headings because MenuSelectHeading is using default headings styles.

Edit3: Something like:
h1 = 1.5625 * 1.2
h2 = 1.5625
h3 = 1.5625 * 0.8
h4 = 1.5625 * 0.6
...

[mcsimps2]

Not proud of this one, but you can hack MenuSelectHeading like so for each of the list items by using GlobalStyles somewhere on the component you are rendering.

            <GlobalStyles styles={(theme) => ({
                'li[data-value="Heading 1"] span': {
                    ...theme.typography.h1
                }
            })} />