diff --git a/src/element/textWysiwyg.test.tsx b/src/element/textWysiwyg.test.tsx index 755a76aac..502ef9948 100644 --- a/src/element/textWysiwyg.test.tsx +++ b/src/element/textWysiwyg.test.tsx @@ -933,7 +933,7 @@ describe("textWysiwyg", () => { await new Promise((cb) => setTimeout(cb, 0)); editor.blur(); - expect(rectangle.width).toBe(110); + expect(rectangle.width).toBe(100); expect(rectangle.height).toBe(210); const textElement = h.elements[1] as ExcalidrawTextElement; expect(textElement.text).toBe(wrappedText); diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index f208c034a..c346a4a90 100644 --- a/src/element/textWysiwyg.tsx +++ b/src/element/textWysiwyg.tsx @@ -290,14 +290,21 @@ export const textWysiwyg = ({ fontSize: app.state.currentItemFontSize, fontFamily: app.state.currentItemFontFamily, }); - const wrappedText = container - ? wrapText(data, font, getMaxContainerWidth(container)) - : data; - const dimensions = measureText(wrappedText, font); - editable.style.height = `${dimensions.height}px`; - - onChange(wrappedText); + if (data) { + const text = editable.value; + const start = Math.min(editable.selectionStart, editable.selectionEnd); + const end = Math.max(editable.selectionStart, editable.selectionEnd); + const newText = `${text.substring(0, start)}${data}${text.substring( + end, + )}`; + const wrappedText = container + ? wrapText(newText, font, getMaxContainerWidth(container!)) + : newText; + const dimensions = measureText(wrappedText, font); + editable.style.height = `${dimensions.height}px`; + onChange(newText); + } }; editable.oninput = () => { const updatedTextElement = Scene.getScene(element)?.getElement(