components/rich-text-editor/TextAlignMenu.tsx


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

'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'
import { AlignCenter, AlignJustify, AlignLeft, AlignRight } from 'lucide-react'

interface TextAlignMenuProps {
  editor: Editor
  disabled?: boolean
  currentAlign?: 'left' | 'center' | 'right' | 'justify'
  executeCommand: (command: () => void) => void
}

export function TextAlignMenu({ editor, disabled, executeCommand }: TextAlignMenuProps) {
  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 onSelect={() => executeCommand(() => editor.chain().focus().setTextAlign('left').run())} className="flex items-center">
          <AlignLeft className="mr-2 h-4 w-4" />
          <span>왼쪽 정렬</span>
        </DropdownMenuItem>
        <DropdownMenuItem onSelect={() => executeCommand(() => editor.chain().focus().setTextAlign('center').run())} className="flex items-center">
          <AlignCenter className="mr-2 h-4 w-4" />
          <span>가운데 정렬</span>
        </DropdownMenuItem>
        <DropdownMenuItem onSelect={() => executeCommand(() => editor.chain().focus().setTextAlign('right').run())} className="flex items-center">
          <AlignRight className="mr-2 h-4 w-4" />
          <span>오른쪽 정렬</span>
        </DropdownMenuItem>
        <DropdownMenuItem onSelect={() => executeCommand(() => editor.chain().focus().setTextAlign('justify').run())} className="flex items-center">
          <AlignJustify className="mr-2 h-4 w-4" />
          <span>양쪽 정렬</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}