fix: copy pasting object into text

packages/excalidraw/clipboard.ts

@@ -357,6 +357,23 @@ export const parseClipboard = async (
 
   try {
     const systemClipboardData = JSON.parse(parsedEventData.value);
+    try{
+      // If object is being pasted in textbox, insted of returning whole object return only text
+      const isTextBox = (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement);
+      if(isTextBox){
+        var onlyTexts = ""
+        for(const element of systemClipboardData.elements){
+          if(element.type == 'text'){
+            onlyTexts += " " + element.text
+          }
+        }
+        return {
+          text : onlyTexts
+        }
+      }
+    }catch (error: any) {
+      console.error(error);
+    }
     const programmaticAPI =
       systemClipboardData.type === EXPORT_DATA_TYPES.excalidrawClipboardWithAPI;
     if (clipboardContainsElements(systemClipboardData)) {

packages/excalidraw/element/textWysiwyg.tsx

@@ -324,14 +324,32 @@ export const textWysiwyg = ({
 
   if (onChange) {
     editable.onpaste = async (event) => {
+      event.preventDefault(); // Prevent the default paste action
+  
       const clipboardData = await parseClipboard(event, true);
       if (!clipboardData.text) {
         return;
       }
-      const data = normalizeText(clipboardData.text);
+  
+      const data = normalizeText(clipboardData.text)
       if (!data) {
         return;
       }
+  
+      // Handle text selection and replace the selected text with the pasted data
+      const selectionStart = editable.selectionStart;
+      const selectionEnd = editable.selectionEnd;
+  
+      const beforeText = editable.value.substring(0, selectionStart);
+      const afterText = editable.value.substring(selectionEnd);
+  
+      editable.value = beforeText + data + afterText;
+  
+      // Move the cursor to the end of the pasted text
+      const newCursorPos = selectionStart + data.length;
+      editable.selectionStart = newCursorPos;
+      editable.selectionEnd = newCursorPos;
+  
       const container = getContainerElement(
         element,
         app.scene.getNonDeletedElementsMap(),
@@ -341,19 +359,23 @@ export const textWysiwyg = ({
         fontSize: app.state.currentItemFontSize,
         fontFamily: app.state.currentItemFontFamily,
       });
+  
       if (container) {
         const boundTextElement = getBoundTextElement(
           container,
           app.scene.getNonDeletedElementsMap(),
         );
         const wrappedText = wrapText(
-          `${editable.value}${data}`,
+          editable.value,
           font,
           getBoundTextMaxWidth(container, boundTextElement),
         );
         const width = getTextWidth(wrappedText, font, true);
         editable.style.width = `${width}px`;
       }
+  
+      // Trigger the onChange callback with the updated value
+      onChange(editable.value);
     };
   
     editable.oninput = () => {
@@ -370,6 +392,7 @@ export const textWysiwyg = ({
     };
   }
   
+
   editable.onkeydown = (event) => {
     if (!event.shiftKey && actionZoomIn.keyTest(event)) {
       event.preventDefault();