components/rich-text-editor/BulletListButton.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 { Toggle } from '@/components/ui/toggle'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { List as ListIcon } from 'lucide-react'

interface BulletListButtonProps {
  editor: Editor | null
  disabled?: boolean
  isActive: boolean
  executeCommand: (command: () => void) => void
}

export function BulletListButton({ editor, disabled, isActive, executeCommand }: BulletListButtonProps) {


  if (!editor) return null

  const handleToggleBulletList = () => {
    console.log('toggleBulletList')
    executeCommand(() => editor.chain().focus().toggleBulletList().run())
  }

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Toggle
          size="sm"
          pressed={isActive}
          onMouseDown={e => e.preventDefault()}
          onPressedChange={handleToggleBulletList}
          disabled={disabled}
        >
          <ListIcon className="h-4 w-4" />
        </Toggle>
      </TooltipTrigger>
      <TooltipContent>
        <p>글머리 기호</p>
      </TooltipContent>
    </Tooltip>
  )
}