heading style

udecode · Sep 28, 2024 · d736eba · d736eba
1 parent 68540d0
commit d736eba
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
@@ -8,8 +8,13 @@ Since Plate UI is not a component library, a changelog is maintained here.
 
 Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components.
 
+
 ## September 2024 #14
 
+### September 29 2024 #15
+
+- fix `heading-element`: if the heading is the first block, it should not have a top margin
+
 ### September 13 #14.2
 
 - fix `code-block-combobox`: filter based on label or value

diff --git a/apps/www/src/registry/default/plate-ui/heading-element.tsx b/apps/www/src/registry/default/plate-ui/heading-element.tsx
@@ -4,27 +4,33 @@ import { withRef, withVariants } from '@udecode/cn';
 import { PlateElement } from '@udecode/plate-common/react';
 import { cva } from 'class-variance-authority';
 
-const headingVariants = cva('', {
+const headingVariants = cva('relative mb-1', {
   variants: {
-    isFirstBlock: {
-      false: '',
-      true: 'mt-0',
-    },
     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',
+      h1: 'mt-[1.6em] pb-1 font-heading text-4xl font-bold',
+      h2: 'mt-[1.4em] pb-px font-heading text-2xl font-semibold tracking-tight',
+      h3: 'mt-[1em] pb-px 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',
     },
   },
 });
 
-const HeadingElementVariants = withVariants(PlateElement, headingVariants, [
-  'isFirstBlock',
-  'variant',
-]);
+const blockVariants = cva('', {
+  variants: {
+    isFirstBlock: {
+      false: '',
+      true: 'mt-0',
+    },
+  },
+});
+
+const HeadingElementVariants = withVariants(
+  withVariants(PlateElement, headingVariants, ['variant']),
+  blockVariants,
+  ['isFirstBlock']
+);
 
 export const HeadingElement = withRef<typeof HeadingElementVariants>(
   ({ children, isFirstBlock, variant = 'h1', ...props }, ref) => {