summaryrefslogtreecommitdiff
path: root/components/rich-text-editor/BlockquoteButton.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/rich-text-editor/BlockquoteButton.tsx')
-rw-r--r--components/rich-text-editor/BlockquoteButton.tsx38
1 files changed, 38 insertions, 0 deletions
diff --git a/components/rich-text-editor/BlockquoteButton.tsx b/components/rich-text-editor/BlockquoteButton.tsx
new file mode 100644
index 00000000..be9a342b
--- /dev/null
+++ b/components/rich-text-editor/BlockquoteButton.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import React from 'react'
+import type { Editor } from '@tiptap/react'
+import { Toggle } from '@/components/ui/toggle'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { Quote as QuoteIcon } from 'lucide-react'
+
+interface BlockquoteButtonProps {
+ editor: Editor | null
+ disabled?: boolean
+ isActive: boolean
+ executeCommand: (command: () => void) => void
+}
+
+export function BlockquoteButton({ editor, disabled, isActive, executeCommand }: BlockquoteButtonProps) {
+ if (!editor) return null
+ return (
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Toggle
+ size="sm"
+ pressed={isActive}
+ onMouseDown={e => e.preventDefault()}
+ onPressedChange={() => executeCommand(() => editor.chain().focus().toggleBlockquote().run())}
+ disabled={disabled}
+ >
+ <QuoteIcon className="h-4 w-4" />
+ </Toggle>
+ </TooltipTrigger>
+ <TooltipContent>
+ <p>인용문</p>
+ </TooltipContent>
+ </Tooltip>
+ )
+}
+
+