blob: a919e63953bfdf9e370e14c613d3d24e84662d39 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
'use client'
import React from 'react'
import type { Editor } from '@tiptap/react'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
interface StyleMenuProps {
editor: Editor | null
disabled?: boolean
executeCommand: (command: () => void) => void
}
export function StyleMenu({ editor, disabled, executeCommand }: StyleMenuProps) {
if (!editor) return null
return (
<DropdownMenu>
<DropdownMenuTrigger asChild onMouseDown={e => e.preventDefault()}>
<Button variant="outline" size="sm" className="h-8 px-2" disabled={disabled}>
스타일
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem
className="flex items-center"
onSelect={() =>
executeCommand(() =>
editor
.chain()
.focus()
.setMark('textStyle', { fontSize: '32px' })
.setBold()
.run()
)
}
>
제목 (굵게 + 32pt)
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center"
onSelect={() =>
executeCommand(() =>
editor
.chain()
.focus()
.unsetBold()
.setParagraph()
.setMark('textStyle', { fontSize: null as unknown as string })
.run()
)
}
>
본문 (기본)
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
|
