custom paste function

bible-technology · Nov 14, 2023 · 3b675ee · 3b675ee
1 parent 106b74a
commit 3b675ee
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 59 deletions.
diff --git 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
@@ -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;
-// }