Support all headings in tiptap

Signed-off-by: Émile Ré <emile@getprobo.com>

Author: codenem

packages/ui/src/RichEditor/BlockMenu/BlockMenuContent.tsx

@@ -10,7 +10,7 @@ import {
   useFloating,
 } from "@floating-ui/react";
 import type { Icon } from "@phosphor-icons/react";
-import { CodeBlockIcon, GridFourIcon, ListBulletsIcon, ListNumbersIcon, MinusIcon, QuotesIcon, TextHOneIcon, TextHThreeIcon, TextHTwoIcon, TextTIcon } from "@phosphor-icons/react";
+import { CodeBlockIcon, GridFourIcon, ListBulletsIcon, ListNumbersIcon, MinusIcon, QuotesIcon, TextHFourIcon, TextHOneIcon, TextHThreeIcon, TextHTwoIcon, TextTIcon } from "@phosphor-icons/react";
 import { type Editor } from "@tiptap/react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 
@@ -35,6 +35,7 @@ const BLOCK_ITEMS: BlockItem[] = [
   { label: "Heading 1", icon: TextHOneIcon, action: chain => chain.toggleHeading({ level: 1 }) },
   { label: "Heading 2", icon: TextHTwoIcon, action: chain => chain.toggleHeading({ level: 2 }) },
   { label: "Heading 3", icon: TextHThreeIcon, action: chain => chain.toggleHeading({ level: 3 }) },
+  { label: "Heading 4", icon: TextHFourIcon, action: chain => chain.toggleHeading({ level: 4 }) },
   { label: "Bullet List", icon: ListBulletsIcon, action: chain => chain.toggleBulletList() },
   { label: "Ordered List", icon: ListNumbersIcon, action: chain => chain.toggleOrderedList() },
   { label: "Code Block", icon: CodeBlockIcon, action: chain => chain.toggleCodeBlock() },

packages/ui/src/RichEditor/OptionsMenu/OptionsMenuContent.tsx

@@ -2,7 +2,7 @@
 // Use of this source code is governed by the ISC license
 // that can be found in the LICENSE file.
 
-import { CodeBlockIcon, ListBulletsIcon, ListNumbersIcon, QuotesIcon, TextHOneIcon, TextHThreeIcon, TextHTwoIcon, TextTIcon } from "@phosphor-icons/react";
+import { CodeBlockIcon, ListBulletsIcon, ListNumbersIcon, QuotesIcon, TextHFourIcon, TextHOneIcon, TextHThreeIcon, TextHTwoIcon, TextTIcon } from "@phosphor-icons/react";
 import { TextSelection } from "@tiptap/pm/state";
 import { type Editor } from "@tiptap/react";
 
@@ -158,6 +158,13 @@ export function OptionsMenuContent({
         <TextHThreeIcon size={16} weight="bold" />
         Heading 3
       </MenuButton>
+      <MenuButton
+        active={hoveredBlock != null && isBlockNodeType(editor, hoveredBlock, "heading", { level: 4 })}
+        onClick={() => handleAction(chain => chain.toggleHeading({ level: 4 }))}
+      >
+        <TextHFourIcon size={16} weight="bold" />
+        Heading 4
+      </MenuButton>
       <MenuButton
         active={hoveredBlock != null && isBlockNodeType(editor, hoveredBlock, "bulletList")}
         onClick={() => handleAction(chain => chain.toggleBulletList())}

packages/ui/src/RichEditor/RichEditor.tsx

@@ -37,9 +37,7 @@ const extensions = [
   Document,
   Paragraph,
   Text,
-  Heading.configure({
-    levels: [1, 2, 3],
-  }),
+  Heading,
   Bold,
   Italic,
   Strike,

packages/ui/src/rich-editor.css

@@ -12,11 +12,12 @@
 
     strong { @apply font-semibold; }
 
-    h1 { @apply text-2xl font-semibold mt-4; }
-
-    h2 { @apply text-xl font-semibold mt-3; }
-
-    h3 { @apply text-lg font-semibold mt-2; }
+    h1 { @apply text-4xl font-semibold mt-4; }
+    h2 { @apply text-3xl font-semibold mt-3; }
+    h3 { @apply text-2xl font-semibold mt-2; }
+    h4 { @apply text-xl font-semibold mt-2; }
+    h5 { @apply text-lg font-semibold mt-2; }
+    h6 { @apply text-base font-semibold mt-2; }
 
     ul {
         @apply list-disc list-outside my-2 pl-4;