diff --git a/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx b/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx index 2942b1594..d7eccde1e 100644 --- a/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx +++ b/renderer/src/components/EditorPage/TextEditor/RecursiveBlock.jsx @@ -2,8 +2,9 @@ /* eslint-disable no-unused-vars */ import React, { useEffect, useState } from 'react'; import { HtmlPerfEditor } from '@xelah/type-perf-html'; -import { getCurrentCursorPosition } from '@/util/cursorUtils'; +import { getCurrentCursorPosition, pasteTextAtCursorPosition } from '@/util/cursorUtils'; import { getCurrentVerse, getCurrentChapter } from '@/components/EditorPage/TextEditor/utils/getReferences'; +import { on } from 'ws'; const getTarget = ({ content }) => { const div = document.createElement('div'); @@ -89,6 +90,14 @@ export default function RecursiveBlock({ handleSelection(); }; + function onPasteHandler(event) { + console.log('onPasteHandler'); + const cursorPosition = getCurrentCursorPosition('editor'); + const paste = (event.clipboardData || window.clipboardData).getData('text'); + console.log({ paste, event }); + pasteTextAtCursorPosition({ cursorPosition, textToInsert: paste }); + } + let component; const editable = !!content.match(/data-type="paragraph"/); @@ -103,6 +112,7 @@ export default function RecursiveBlock({ onMouseUp={checkCurrentVerse} onMouseDown={updateCursorPosition} {...props} + onPaste={(event) => { event.preventDefault(); onPasteHandler(event); }} /> ); } diff --git a/renderer/src/util/cursorUtils.js b/renderer/src/util/cursorUtils.js index ec505cf79..1194a9a20 100644 --- a/renderer/src/util/cursorUtils.js +++ b/renderer/src/util/cursorUtils.js @@ -119,6 +119,19 @@ export function pasteHtmlAtCaret(html, selectPastedContent, cursorPosition) { } } +// paste copied text from external source. This will paste the sanitized text. +export function pasteTextAtCursorPosition({ cursorPosition, textToInsert }) { + setCurrentCursorPosition(cursorPosition); + const sel = window.getSelection(); + let range; + if (sel.getRangeAt && sel.rangeCount) { + range = sel.getRangeAt(0); + range.deleteContents(); + range.insertNode(document.createTextNode(textToInsert)); + sel.collapseToEnd(); + } +} + export function insertVerseNumber({ caretPosition, numberToInsert }) { console.log({ caretPosition, numberToInsert }); if (numberToInsert && caretPosition) { @@ -175,61 +188,3 @@ export function getSelectedText() { } return selectedText; } - -// Paste text from clipboard -export function pasteText() { - const editor = document.getElementById('editor'); - - navigator.clipboard.readText() - .then((text) => { - editor.focus(); - document.execCommand('insertText', false, text); - }) - .catch((error) => { - console.error(`Unable to paste text: ${error}`); - }); -} -export class Clipboard { - static copyText(text) { - navigator.clipboard - .writeText(text) - .then(() => { - // console.log('Text copied to clipboard'); - }) - .catch((error) => { - console.error('Failed to copy text:', error); - }); - } - - static pasteText(element) { - navigator.clipboard - .readText() - .then((pastedText) => { - element.focus(); - document.execCommand('insertText', false, pastedText); - // console.log('Text pasted from clipboard'); - }) - .catch((error) => { - console.error('Failed to paste text:', error); - }); - } -} - -// export function getWordAtCursor(parentElement) { -// const cursorPosition = Cursor.getCurrentCursorPosition(parentElement); -// const textContent = parentElement.textContent; -// const words = textContent.trim().split(/\s+/); -// let charCount = 0; - -// for (let i = 0; i < words.length; i++) { -// const word = words[i]; -// const wordLength = word.length; -// charCount += wordLength + 1; // +1 for the space after the word - -// if (charCount > cursorPosition) { -// return word; -// } -// } - -// return null; -// }