From f7b3befd0a47b9030a5908d0d242c2c21e3f715d Mon Sep 17 00:00:00 2001 From: Clarence Chan <69307556+clarencechaan@users.noreply.github.com> Date: Fri, 9 Aug 2024 16:20:36 -0400 Subject: [PATCH] fix: text content with tab characters act different in view/edit (#8336) Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com> --- packages/excalidraw/components/App.tsx | 3 ++- packages/excalidraw/element/textWysiwyg.tsx | 11 ++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 7b26cd5ed..bd23ea70f 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -332,6 +332,7 @@ import { isMeasureTextSupported, isValidTextContainer, measureText, + normalizeText, wrapText, } from "../element/textElement"; import { @@ -3412,7 +3413,7 @@ class App extends React.Component { const lines = isPlainPaste ? [text] : text.split("\n"); const textElements = lines.reduce( (acc: ExcalidrawTextElement[], line, idx) => { - const originalText = line.trim(); + const originalText = normalizeText(line).trim(); if (originalText.length) { const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ x, diff --git a/packages/excalidraw/element/textWysiwyg.tsx b/packages/excalidraw/element/textWysiwyg.tsx index f8397fb73..5093a2624 100644 --- a/packages/excalidraw/element/textWysiwyg.tsx +++ b/packages/excalidraw/element/textWysiwyg.tsx @@ -357,7 +357,16 @@ export const textWysiwyg = ({ }; editable.oninput = () => { - onChange(normalizeText(editable.value)); + const normalized = normalizeText(editable.value); + if (editable.value !== normalized) { + const selectionStart = editable.selectionStart; + editable.value = normalized; + // put the cursor at some position close to where it was before + // normalization (otherwise it'll end up at the end of the text) + editable.selectionStart = selectionStart; + editable.selectionEnd = selectionStart; + } + onChange(editable.value); }; }