From cfce5ac35d346df558876141f39da8eafab2de42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Wed, 6 Mar 2024 12:46:03 +0100 Subject: [PATCH] Add review changes --- example/src/App.tsx | 4 +--- src/MarkdownTextInput.web.tsx | 13 +++++++------ src/web/cursorUtils.ts | 22 +++++++++++----------- 3 files changed, 19 insertions(+), 20 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index 034c1a56..ebde39b4 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -99,9 +99,7 @@ export default function App() { ref={ref} markdownStyle={markdownStyle} placeholder="Type here..." - onSelectionChange={(e) => { - setSelection(e.nativeEvent.selection); - }} + onSelectionChange={(e) => setSelection(e.nativeEvent.selection)} selection={selection} /> {/* TextInput singleline diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx index f2fe9a2b..c5d357b2 100644 --- a/src/MarkdownTextInput.web.tsx +++ b/src/MarkdownTextInput.web.tsx @@ -300,7 +300,8 @@ const MarkdownTextInput = React.forwardRef( [onSelectionChange, setEventProps], ); - const updateRefSelectionVariables = useCallback((start: number, end: number) => { + const updateRefSelectionVariables = useCallback((newSelection: Selection) => { + const {start, end} = newSelection; const markdownHTMLInput = divRef.current as HTMLInputElement; markdownHTMLInput.selectionStart = start; markdownHTMLInput.selectionEnd = end; @@ -310,12 +311,12 @@ const MarkdownTextInput = React.forwardRef( if (!divRef.current) { return; } - const currentSelection = CursorUtils.getCurrentCursorPosition(divRef.current); + const newSelection = CursorUtils.getCurrentCursorPosition(divRef.current); - if (currentSelection && (contentSelection.current.start !== currentSelection.start || contentSelection.current.end !== currentSelection.end)) { + if (newSelection && (contentSelection.current.start !== newSelection.start || contentSelection.current.end !== newSelection.end)) { if (contentSelection.current.start >= 0 && contentSelection.current.end >= 0) { - updateRefSelectionVariables(contentSelection.current.start, contentSelection.current.end); - contentSelection.current = currentSelection; + updateRefSelectionVariables(contentSelection.current); + contentSelection.current = newSelection; } if (e) { handleSelectionChange(e); @@ -530,7 +531,7 @@ const MarkdownTextInput = React.forwardRef( if (autoFocus) { divRef.current.focus(); } - updateRefSelectionVariables(contentSelection.current.start, contentSelection.current.end); + updateRefSelectionVariables(contentSelection.current); }, []); useEffect(() => { diff --git a/src/web/cursorUtils.ts b/src/web/cursorUtils.ts index 3522c79c..bf12c8e6 100644 --- a/src/web/cursorUtils.ts +++ b/src/web/cursorUtils.ts @@ -1,8 +1,8 @@ function findTextNodes(textNodes: Text[], node: ChildNode) { - if (node.nodeType === 3) { + if (node.nodeType === Node.TEXT_NODE) { textNodes.push(node as Text); } else { - for (let i = 0, len = node.childNodes.length; i < len; ++i) { + for (let i = 0, length = node.childNodes.length; i < length; ++i) { const childNode = node.childNodes[i]; if (childNode) { findTextNodes(textNodes, childNode); @@ -66,16 +66,16 @@ function moveCursorToEnd(target: HTMLElement) { function getCurrentCursorPosition(target: HTMLElement) { const selection = window.getSelection(); - if (selection && selection.rangeCount > 0) { - const range = selection.getRangeAt(0); - const preSelectionRange = range.cloneRange(); - preSelectionRange.selectNodeContents(target); - preSelectionRange.setEnd(range.startContainer, range.startOffset); - const start = preSelectionRange.toString().length; - const end = start + range.toString().length; - return {start, end}; + if (!selection || (selection && selection.rangeCount === 0)) { + return null; } - return null; + const range = selection.getRangeAt(0); + const preSelectionRange = range.cloneRange(); + preSelectionRange.selectNodeContents(target); + preSelectionRange.setEnd(range.startContainer, range.startOffset); + const start = preSelectionRange.toString().length; + const end = start + range.toString().length; + return {start, end}; } function removeSelection() {