diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index 13c00e6d..2745b9a7 100644 --- a/src/MarkdownTextInput.web.tsx +++ b/src/MarkdownTextInput.web.tsx @@ -559,7 +559,8 @@ const MarkdownTextInput = React.forwardRef( } const text = processedValue !== undefined ? processedValue : ''; - parseText(divRef.current, text, processedMarkdownStyle, text.length); + + parseText(divRef.current, text, processedMarkdownStyle, contentSelection.current?.end); updateTextColor(divRef.current, value); }, [multiline, processedMarkdownStyle, processedValue], diff --git a/src/web/cursorUtils.ts b/src/web/cursorUtils.ts index 98c50ca0..1cda6599 100644 --- a/src/web/cursorUtils.ts +++ b/src/web/cursorUtils.ts @@ -94,8 +94,7 @@ function setCursorPosition(target: HTMLElement, start: number, end: number | nul const selection = window.getSelection(); if (selection) { - selection.removeAllRanges(); - selection.addRange(range); + selection.setBaseAndExtent(range.startContainer, range.startOffset, range.endContainer, range.endOffset); } scrollCursorIntoView(target as HTMLInputElement); @@ -107,8 +106,7 @@ function moveCursorToEnd(target: HTMLElement) { if (selection) { range.setStart(target, target.childNodes.length); range.collapse(true); - selection.removeAllRanges(); - selection.addRange(range); + selection.setBaseAndExtent(range.startContainer, range.startOffset, range.endContainer, range.endOffset); } } diff --git a/src/web/parserUtils.ts b/src/web/parserUtils.ts index 5e2ef243..3758bbaf 100644 --- a/src/web/parserUtils.ts +++ b/src/web/parserUtils.ts @@ -179,12 +179,13 @@ function moveCursor(isFocused: boolean, alwaysMoveCursorToTheEnd: boolean, curso } } -function parseText(target: HTMLElement, text: string, curosrPositionIndex: number | null, markdownStyle: PartialMarkdownStyle = {}, alwaysMoveCursorToTheEnd = false) { +function parseText(target: HTMLElement, text: string, cursorPositionIndex: number | null, markdownStyle: PartialMarkdownStyle = {}, alwaysMoveCursorToTheEnd = false) { const targetElement = target; - let cursorPosition: number | null = curosrPositionIndex; + // in case the cursorPositionIndex is larger than text length, cursorPosition will be null, i.e: move the caret to the end + let cursorPosition: number | null = cursorPositionIndex && cursorPositionIndex <= text.length ? cursorPositionIndex : null; const isFocused = document.activeElement === target; - if (isFocused && curosrPositionIndex === null) { + if (isFocused && cursorPositionIndex === null) { const selection = CursorUtils.getCurrentCursorPosition(target); cursorPosition = selection ? selection.end : null; }