First heading has top margin it shouldn't have

[maral]

Description

The Heading Element, in its code, appears to be removing the top margin when it's the first block of the whole document. So the first heading shouldn't have a top margin, but all the other headings should. However, it doesn't work - the mt-0 class gets overwritten by the variant top margin. It's probably because cva is overriding the former fields by the latter fields, but I haven't investigated it further.

The fix is easy, just switch the variant and isFirstBlock props in the cva argument's object, like this:

const headingVariants = cva('', {
  variants: {
    variant: {
      h1: 'mb-1 mt-[2em] font-heading text-4xl font-bold',
      h2: 'mb-px mt-[1.4em] font-heading text-2xl font-semibold tracking-tight',
      h3: 'mb-px mt-[1em] font-heading text-xl font-semibold tracking-tight',
      h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',
      h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',
      h6: 'mt-[0.75em] text-base font-semibold tracking-tight',
    },
    isFirstBlock: {
      false: '',
      true: 'mt-0',
    },
  },
});

One extra thing in the same file, there's actually an unused prop:

  ({ children, isFirstBlock, variant = 'h1', ...props }, ref) => {
                    ^- this one here

Here you can see it in the playground:

Reproduction URL

https://platejs.org/

Reproduction steps

1. In the playground, take a look at the first heading (Blocks) - it has a weirdly large top margin. 
2. That's the actual bug - if the first heading shouldn't have its top margin removed, it would be better to take it out from the code.

Plate version

35.0.0

Slate React version

0.105.0

Screenshots

It's actually not possible to add screenshots to this field... What? 😂 I added it to the description.

Logs

No response

Browsers

Chrome

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified