From 4e895e95ba6d2d42cb586f70f5ad60a3c5fd8508 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Tue, 20 Aug 2024 11:07:05 +0200 Subject: [PATCH] Add text normalization to fix problems with \r\n --- src/MarkdownTextInput.web.tsx | 10 +++++----- src/web/utils/inputUtils.ts | 8 ++++++-- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index 9080fd45..01de8eb1 100644 --- a/src/MarkdownTextInput.web.tsx +++ b/src/MarkdownTextInput.web.tsx @@ -19,7 +19,7 @@ import type {TreeNode} from './web/utils/treeUtils'; import {getCurrentCursorPosition, removeSelection, setCursorPosition} from './web/utils/cursorUtils'; import './web/MarkdownTextInput.css'; import type {MarkdownStyle} from './MarkdownTextInputDecoratorViewNativeComponent'; -import {getElementHeight, getPlaceholderValue, isEventComposing, parseInnerHTMLToText} from './web/utils/inputUtils'; +import {getElementHeight, getPlaceholderValue, isEventComposing, normalizeValue, parseInnerHTMLToText} from './web/utils/inputUtils'; import {parseToReactDOMStyle, processMarkdownStyle} from './web/utils/webStyleUtils'; require('../parser/react-native-live-markdown-parser.js'); @@ -286,7 +286,7 @@ const MarkdownTextInput = React.forwardRef( updateTextColor(divRef.current, e.target.textContent ?? ''); const previousText = divRef.current.value; - const parsedText = inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement); + const parsedText = normalizeValue(inputType === 'pasteText' ? pasteContent.current || '' : parseInnerHTMLToText(e.target as MarkdownTextInputElement)); if (pasteContent.current) { pasteContent.current = null; @@ -596,9 +596,9 @@ const MarkdownTextInput = React.forwardRef( parseText(divRef.current, divRef.current.value, processedMarkdownStyle); return; } - - divRef.current.value = value; - parseText(divRef.current, value, processedMarkdownStyle); + const normalizedValue = normalizeValue(value); + divRef.current.value = normalizedValue; + parseText(divRef.current, normalizedValue, processedMarkdownStyle); updateTextColor(divRef.current, value); }, [multiline, processedMarkdownStyle, value], diff --git a/src/web/utils/inputUtils.ts b/src/web/utils/inputUtils.ts index 6e7043f4..0e006990 100644 --- a/src/web/utils/inputUtils.ts +++ b/src/web/utils/inputUtils.ts @@ -32,6 +32,10 @@ function getElementHeight(node: HTMLDivElement, styles: CSSProperties, numberOfL return styles.height ? `${styles.height}px` : 'auto'; } +function normalizeValue(value: string) { + return value.replaceAll('\r\n', '\n'); +} + // Parses the HTML structure of a MarkdownTextInputElement to a plain text string. Used for getting the correct value of the input element. function parseInnerHTMLToText(target: MarkdownTextInputElement): string { // Returns the parent of a given node that is higher in the hierarchy and is of a different type than 'text', 'br' or 'line' @@ -96,7 +100,7 @@ function parseInnerHTMLToText(target: MarkdownTextInputElement): string { } } - return text; + return text.replaceAll('\r\n', '\n'); } -export {isEventComposing, getPlaceholderValue, getElementHeight, parseInnerHTMLToText}; +export {isEventComposing, getPlaceholderValue, getElementHeight, parseInnerHTMLToText, normalizeValue};