components/rich-text-editor/HistoryMenu.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

'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 { Undo, Redo } from 'lucide-react'

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

export function HistoryMenu({ editor, disabled, executeCommand }: HistoryMenuProps) {
  if (!editor) return null
  return (
    <>
      <Tooltip>
        <TooltipTrigger asChild>
          <Toggle size="sm" pressed={false} onPressedChange={() => executeCommand(() => editor.chain().focus().undo().run())} disabled={!editor.can().undo() || disabled}>
            <Undo className="h-4 w-4" />
          </Toggle>
        </TooltipTrigger>
        <TooltipContent>
          <p>실행 취소 (Ctrl+Z)</p>
        </TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger asChild>
          <Toggle size="sm" pressed={false} onPressedChange={() => executeCommand(() => editor.chain().focus().redo().run())} disabled={!editor.can().redo() || disabled}>
            <Redo className="h-4 w-4" />
          </Toggle>
        </TooltipTrigger>
        <TooltipContent>
          <p>다시 실행 (Ctrl+Y)</p>
        </TooltipContent>
      </Tooltip>
    </>
  )
}