From 6403559a62ea410b02004ac7545c4166eee210c6 Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 27 May 2024 09:23:54 +0700 Subject: [PATCH 1/2] fix: use setBaseAndExtent Signed-off-by: dominictb --- src/MarkdownTextInput.web.tsx | 4 +++- src/web/cursorUtils.ts | 6 ++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index 13c00e6d..872b77e4 100644 --- a/src/MarkdownTextInput.web.tsx +++ b/src/MarkdownTextInput.web.tsx @@ -559,7 +559,9 @@ const MarkdownTextInput = React.forwardRef( } const text = processedValue !== undefined ? processedValue : ''; - parseText(divRef.current, text, processedMarkdownStyle, text.length); + + const currentCursorPostion = contentSelection?.current && contentSelection?.current.end <= text.length ? contentSelection.current.end : text.length; + parseText(divRef.current, text, processedMarkdownStyle, currentCursorPostion); 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); } } From f89949b34bdca7120bb942a50f26494c41568abf Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 27 May 2024 17:50:45 +0700 Subject: [PATCH 2/2] fix: optimize implementation Signed-off-by: dominictb --- src/MarkdownTextInput.web.tsx | 3 +-- src/web/parserUtils.ts | 7 ++++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index 872b77e4..2745b9a7 100644 --- a/src/MarkdownTextInput.web.tsx +++ b/src/MarkdownTextInput.web.tsx @@ -560,8 +560,7 @@ const MarkdownTextInput = React.forwardRef( const text = processedValue !== undefined ? processedValue : ''; - const currentCursorPostion = contentSelection?.current && contentSelection?.current.end <= text.length ? contentSelection.current.end : text.length; - parseText(divRef.current, text, processedMarkdownStyle, currentCursorPostion); + parseText(divRef.current, text, processedMarkdownStyle, contentSelection.current?.end); updateTextColor(divRef.current, value); }, [multiline, processedMarkdownStyle, processedValue], 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; }