rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Support all headings in tiptap

Browse Source 
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-03-27 18:13:01 +04:00
parent 745c52537d
commit 37e17c370f
4 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/ui/src/RichEditor/BlockMenu/BlockMenuContent.tsx
View File

@@ -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() },

9
packages/ui/src/RichEditor/OptionsMenu/OptionsMenuContent.tsx
View File

@@ -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())}

4
packages/ui/src/RichEditor/RichEditor.tsx
View File

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

11
packages/ui/src/rich-editor.css
View File

@@ -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;