rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions 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, useFloating,
} from "@floating-ui/react"; } from "@floating-ui/react";
import type { Icon } from "@phosphor-icons/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 { type Editor } from "@tiptap/react";
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "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 1", icon: TextHOneIcon, action: chain => chain.toggleHeading({ level: 1 }) },
{ label: "Heading 2", icon: TextHTwoIcon, action: chain => chain.toggleHeading({ level: 2 }) }, { label: "Heading 2", icon: TextHTwoIcon, action: chain => chain.toggleHeading({ level: 2 }) },
{ label: "Heading 3", icon: TextHThreeIcon, action: chain => chain.toggleHeading({ level: 3 }) }, { 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: "Bullet List", icon: ListBulletsIcon, action: chain => chain.toggleBulletList() },
{ label: "Ordered List", icon: ListNumbersIcon, action: chain => chain.toggleOrderedList() }, { label: "Ordered List", icon: ListNumbersIcon, action: chain => chain.toggleOrderedList() },
{ label: "Code Block", icon: CodeBlockIcon, action: chain => chain.toggleCodeBlock() }, { 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 // Use of this source code is governed by the ISC license
// that can be found in the LICENSE file. // 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 { TextSelection } from "@tiptap/pm/state";
import { type Editor } from "@tiptap/react"; import { type Editor } from "@tiptap/react";
@@ -158,6 +158,13 @@ export function OptionsMenuContent({
<TextHThreeIcon size={16} weight="bold" /> <TextHThreeIcon size={16} weight="bold" />
Heading 3 Heading 3
</MenuButton> </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 <MenuButton
active={hoveredBlock != null && isBlockNodeType(editor, hoveredBlock, "bulletList")} active={hoveredBlock != null && isBlockNodeType(editor, hoveredBlock, "bulletList")}
onClick={() => handleAction(chain => chain.toggleBulletList())} onClick={() => handleAction(chain => chain.toggleBulletList())}

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

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

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

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