diff --git a/packages/excalidraw/clipboard.ts b/packages/excalidraw/clipboard.ts index 397c350ff..47f15ef40 100644 --- a/packages/excalidraw/clipboard.ts +++ b/packages/excalidraw/clipboard.ts @@ -389,6 +389,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)) { diff --git a/packages/excalidraw/element/textWysiwyg.tsx b/packages/excalidraw/element/textWysiwyg.tsx index b31798687..24d0767ba 100644 --- a/packages/excalidraw/element/textWysiwyg.tsx +++ b/packages/excalidraw/element/textWysiwyg.tsx @@ -327,38 +327,60 @@ 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(), ); - + const font = getFontString({ 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); editable.style.width = `${width}px`; } + + // Trigger the onChange callback with the updated value + onChange(editable.value); }; - + editable.oninput = () => { const normalized = normalizeText(editable.value); if (editable.value !== normalized) { @@ -372,6 +394,7 @@ export const textWysiwyg = ({ onChange(editable.value); }; } + editable.onkeydown = (event) => { if (!event.shiftKey && actionZoomIn.keyTest(event)) {