+ {/* 텍스트 스타일 */}
+
+
+
+ executeCommand(() => editor.chain().focus().toggleBold().run())
+ }
+ disabled={disabled}
+ >
+
+
+
+
+ 굵게 (Ctrl+B)
+
+
+
+
+
+
+ executeCommand(() => editor.chain().focus().toggleItalic().run())
+ }
+ disabled={disabled}
+ >
+
+
+
+
+ 기울임 (Ctrl+I)
+
+
+
+
+
+
+ executeCommand(() => editor.chain().focus().toggleUnderline().run())
+ }
+ disabled={disabled}
+ >
+
+
+
+
+ 밑줄
+
+
+
+
+
+
+ executeCommand(() => editor.chain().focus().toggleStrike().run())
+ }
+ disabled={disabled}
+ >
+
+
+
+
+ 취소선
+
+
+
+
+
+ {/* 제목 및 단락 */}
+
+
+
+
+
+
+
+ {([1, 2, 3] as Array<1 | 2 | 3>).map((level) => (
+
+ executeCommand(() =>
+ editor.chain().focus().toggleHeading({ level }).run()
+ )
+ }
+ className="flex items-center"
+ >
+
+ 제목 {level}
+
+
+ ))}
+
+ executeCommand(() => editor.chain().focus().setParagraph().run())
+ }
+ className="flex items-center"
+ >
+ 본문
+
+
+
+
+ {/* 글자 크기 - 동적 width 적용 */}
+
+ {
+ const size = e.target.value
+ setFontSize(size)
+ if (size && parseInt(size) >= 8 && parseInt(size) <= 72) {
+ executeCommand(() =>
+ editor
+ .chain()
+ .focus()
+ .setMark('textStyle', { fontSize: `${size}px` })
+ .run()
+ )
+ }
+ }}
+ style={{ width: `${getFontSizeInputWidth(fontSize)}px` }}
+ className="h-8 text-xs"
+ disabled={disabled}
+ />
+
+
+
+
+
+ {[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72].map((size) => (
+ {
+ setFontSize(size.toString())
+ executeCommand(() =>
+ editor
+ .chain()
+ .focus()
+ .setMark('textStyle', { fontSize: `${size}px` })
+ .run()
+ )
+ }}
+ className="flex items-center"
+ >
+ {size}px
+
+ ))}
+
+
+
+
+
+
+ {/* 리스트 */}
+
+
+
+ executeCommand(() => editor.chain().focus().toggleBulletList().run())
+ }
+ disabled={disabled}
+ >
+
+
+
+
+ 글머리 기호
+
+
+
+
+
+
+ executeCommand(() => editor.chain().focus().toggleOrderedList().run())
+ }
+ disabled={disabled}
+ >
+
+
+
+
+ 번호 매기기
+
+
+
+
+
+
+ executeCommand(() => editor.chain().focus().toggleBlockquote().run())
+ }
+ disabled={disabled}
+ >
+
+
+
+
+ 인용문
+
+
+
+
+
+ {/* 텍스트 정렬 */}
+
+
+
+
+
+ {toolbarState.textAlign === 'center' ? (
+
+ ) : toolbarState.textAlign === 'right' ? (
+
+ ) : toolbarState.textAlign === 'justify' ? (
+
+ ) : (
+
+ )}
+
+
+
+ 텍스트 정렬
+
+
+
+
+
+ executeCommand(() => editor.chain().focus().setTextAlign('left').run())
+ }
+ className="flex items-center"
+ >
+
+ 왼쪽 정렬
+
+
+ executeCommand(() => editor.chain().focus().setTextAlign('center').run())
+ }
+ className="flex items-center"
+ >
+
+ 가운데 정렬
+
+
+ executeCommand(() => editor.chain().focus().setTextAlign('right').run())
+ }
+ className="flex items-center"
+ >
+
+ 오른쪽 정렬
+
+
+ executeCommand(() => editor.chain().focus().setTextAlign('justify').run())
+ }
+ className="flex items-center"
+ >
+
+ 양쪽 정렬
+
+
+
+
+
+
+ {/* 링크 */}
+
+
+ {
+ if (toolbarState.link) {
+ executeCommand(() => editor.chain().focus().unsetLink().run())
+ } else {
+ const url = window.prompt('URL을 입력하세요:')
+ if (url) {
+ executeCommand(() => editor.chain().focus().setLink({ href: url }).run())
+ }
+ }
+ }}
+ disabled={disabled}
+ >
+
+
+
+
+ 링크 {toolbarState.link ? '제거' : '삽입'}
+
+
+
+ {/* 이미지 업로드 */}
+
+
+
+ {
+ const file = e.target.files?.[0]
+ if (file) handleImageUpload(file)
+ }}
+ />
+ {
+ document.getElementById('image-upload-rt')?.click()
+ }}
+ disabled={disabled}
+ >
+
+
+
+
+
+ 이미지 삽입
+
+
+
+
+
+ {/* 첨자 */}
+
+
+
+ executeCommand(() => editor.chain().focus().toggleSubscript().run())
+ }
+ disabled={disabled}
+ >
+
+
+
+
+ 아래 첨자
+
+
+
+
+
+
+ executeCommand(() => editor.chain().focus().toggleSuperscript().run())
+ }
+ disabled={disabled}
+ >
+
+
+
+
+ 위 첨자
+
+
+
+
+
+ {/* 하이라이트 */}
+
+
+
+ executeCommand(() => editor.chain().focus().toggleHighlight().run())
+ }
+ disabled={disabled}
+ >
+
+
+
+
+ 하이라이트
+
+
+
+ {/* 체크리스트 */}
+
+
+
+ executeCommand(() => editor.chain().focus().toggleTaskList().run())
+ }
+ disabled={disabled}
+ >
+
+
+
+
+ 체크리스트
+
+
+
+
+
+ {/* 테이블 */}
+ {!toolbarState.table ? (
+
+ ) : (
+
+
+
+
+
+
+
+
+
+ 테이블 편집
+
+
+
+
+
+ executeCommand(() => editor.chain().focus().addRowBefore().run())
+ }
+ className="flex items-center"
+ >
+ 위에 행 추가
+
+
+ executeCommand(() => editor.chain().focus().addRowAfter().run())
+ }
+ className="flex items-center"
+ >
+ 아래에 행 추가
+
+
+ executeCommand(() => editor.chain().focus().addColumnBefore().run())
+ }
+ className="flex items-center"
+ >
+ 왼쪽에 열 추가
+
+
+ executeCommand(() => editor.chain().focus().addColumnAfter().run())
+ }
+ className="flex items-center"
+ >
+ 오른쪽에 열 추가
+
+
+ executeCommand(() => editor.chain().focus().deleteRow().run())
+ }
+ className="flex items-center"
+ >
+ 행 삭제
+
+
+ executeCommand(() => editor.chain().focus().deleteColumn().run())
+ }
+ className="flex items-center"
+ >
+ 열 삭제
+
+
+ executeCommand(() => editor.chain().focus().deleteTable().run())
+ }
+ className="flex items-center text-red-600"
+ >
+ 테이블 삭제
+
+
+
+ )}
+
+
+
+ {/* 실행 취소/다시 실행 */}
+
+
+
+ executeCommand(() => editor.chain().focus().undo().run())
+ }
+ disabled={!editor.can().undo() || disabled}
+ >
+
+
+
+
+ 실행 취소 (Ctrl+Z)
+
+
+
+
+
+
+ executeCommand(() => editor.chain().focus().redo().run())
+ }
+ disabled={!editor.can().redo() || disabled}
+ >
+
+
+
+
+ 다시 실행 (Ctrl+Y)
+
+
+