, pageIndex: number) => {
+ const pasteText = e.clipboardData.getData('text')
+ const updatedPages = [...pages]
+ const currentText = updatedPages[pageIndex]
+ const selectionStart = e.currentTarget.selectionStart || 0
+ const selectionEnd = e.currentTarget.selectionEnd || 0
+
+ const newText = currentText.slice(0, selectionStart) + pasteText + currentText.slice(selectionEnd)
+ updatedPages[pageIndex] = newText
+ setPages(updatedPages)
+
+ if (newText.length > e.currentTarget.maxLength) {
+ const remainingText = newText.slice(e.currentTarget.maxLength)
+ updatedPages[pageIndex] = newText.slice(0, e.currentTarget.maxLength)
+ setPages(updatedPages)
+
+ const nextPageIndex = pageIndex + 1
+
+ if (nextPageIndex < pages.length) {
+ handlePasteRemainingText(remainingText, nextPageIndex)
+ } else {
+ setPages((prevPages) => [...prevPages, remainingText])
+ setCurrentPage(Math.floor(nextPageIndex / (isSinglePage ? 1 : 2)))
+ focusOnTextArea(nextPageIndex)
+ }
+ }
+ }
+
+ const handlePasteRemainingText = (remainingText: string, nextPageIndex: number) => {
+ const updatedPages = [...pages]
+ updatedPages[nextPageIndex] = remainingText
+ setPages(updatedPages)
+ focusOnTextArea(nextPageIndex)
+ }
+
+ const focusOnTextArea = (index: number) => {
+ setTimeout(() => {
+ textAreaRefs.current[index]?.focus()
+ }, 0)
+ }
+
+ const handleSign = useCallback(() => {
+ if (editable && signClickedOnce) {
+ const title = inputRef.current?.value || ''
+ onSign(pages, title)
+ }
+ setSignClickedOnce(true)
+ setAnimatePageIcon(1)
+ setAnimateInsideIcon(1)
+ setTimeout(() => {
+ setAnimateTitleIcon(1)
+ }, 150)
+ }, [pages, onSign, editable, signClickedOnce])
+
+ const handleEdit = useCallback(() => {
+ setSignClickedOnce(false)
+ onEdit(pages)
+ }, [pages, onEdit])
+
+ const handleCancel = useCallback(() => {
+ if (signClickedOnce) {
+ setSignClickedOnce(false)
+ setAnimateTitleIcon(2)
+ setTimeout(() => {
+ setAnimateInsideIcon(2)
+ setTimeout(() => {
+ setAnimatePageIcon(2)
+ }, 150)
+ }, 150)
+ } else {
+ onClose()
+ }
+ }, [signClickedOnce, onClose])
+
+ const setRef = (index: number) => (el: HTMLTextAreaElement | null) => {
+ textAreaRefs.current[index] = el!
+ }
+
+ const getAnimationClass = (animationState, baseClass) => {
+ switch (animationState) {
+ case 1:
+ return `${baseClass} ${styles.pageAnimation}`
+ case 2:
+ return `${baseClass} ${styles.pageAnimationReverse}`
+ default:
+ return baseClass
+ }
+ }
+
+ const renderPage = (index) => (
+
+ {editable ? (
+