Skip to content

Commit

Permalink
Add review changes
Browse files Browse the repository at this point in the history
  • Loading branch information
Skalakid committed Mar 6, 2024
1 parent 4504afb commit 21e3cde
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 30 deletions.
4 changes: 1 addition & 3 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
{/* <Text>TextInput singleline</Text>
Expand Down
33 changes: 17 additions & 16 deletions src/MarkdownTextInput.web.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
const divRef = useRef<HTMLDivElement | null>(null);
const currentlyFocusedField = useRef<HTMLDivElement | null>(null);
const valueLength = value ? value.length : 0;
const contentSelection = useRef<Selection>({start: valueLength, end: valueLength});
const currentSelection = useRef<Selection>({start: valueLength, end: valueLength});
const className = `react-native-live-markdown-input-${multiline ? 'multiline' : 'singleline'}`;
const history = useRef<InputHistory>();
if (!history.current) {
Expand All @@ -175,7 +175,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
const setEventProps = useCallback((e: NativeSyntheticEvent<any>) => {
if (divRef.current) {
const text = normalizeValue(divRef.current.innerText || '');
if (e.target && typeof e.target !== 'number') {
if (e.target) {
// TODO: change the logic here so every event have value property
(e.target as unknown as HTMLInputElement).value = text;
}
Expand Down Expand Up @@ -292,15 +292,16 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
(event) => {
const e = event as unknown as NativeSyntheticEvent<TextInputSelectionChangeEventData>;
setEventProps(e);
if (onSelectionChange && contentSelection.current) {
e.nativeEvent.selection = contentSelection.current;
if (onSelectionChange && currentSelection.current) {
e.nativeEvent.selection = currentSelection.current;
onSelectionChange(e);
}
},
[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;
Expand All @@ -310,12 +311,12 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
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 (contentSelection.current.start >= 0 && contentSelection.current.end >= 0) {
updateRefSelectionVariables(contentSelection.current.start, contentSelection.current.end);
contentSelection.current = currentSelection;
if (newSelection && (currentSelection.current.start !== newSelection.start || currentSelection.current.end !== newSelection.end)) {
if (currentSelection.current.start >= 0 && currentSelection.current.end >= 0) {
updateRefSelectionVariables(newSelection);
currentSelection.current = newSelection;
}
if (e) {
handleSelectionChange(e);
Expand Down Expand Up @@ -393,8 +394,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
const hostNode = e.target as unknown as HTMLDivElement;
currentlyFocusedField.current = hostNode;
setEventProps(e);
if (divRef.current && contentSelection.current) {
CursorUtils.setCursorPosition(divRef.current, contentSelection.current.end || contentSelection.current.start);
if (divRef.current && currentSelection.current) {
CursorUtils.setCursorPosition(divRef.current, currentSelection.current.end || currentSelection.current.start);
}

if (onFocus) {
Expand Down Expand Up @@ -530,11 +531,11 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
if (autoFocus) {
divRef.current.focus();
}
updateRefSelectionVariables(contentSelection.current.start, contentSelection.current.end);
updateRefSelectionVariables(currentSelection.current);
}, []);

useEffect(() => {
if (!divRef.current || !selection || !(selection.start !== contentSelection.current.start || selection.end !== contentSelection.current.end)) {
if (!divRef.current || !selection || !(selection.start === currentSelection.current.start && selection.end === currentSelection.current.end)) {
return;
}
CursorUtils.setCursorPosition(divRef.current, selection.start, selection.end);
Expand Down Expand Up @@ -578,8 +579,8 @@ const styles = StyleSheet.create({
// @ts-expect-error it works on web
boxSizing: 'border-box',
whiteSpace: 'pre-wrap',
overflowY: 'scroll',
overflowX: 'scroll',
overflowY: 'auto',
overflowX: 'auto',
overflowWrap: 'break-word',
},
disabledInputStyles: {
Expand Down
22 changes: 11 additions & 11 deletions src/web/cursorUtils.ts
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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() {
Expand Down

0 comments on commit 21e3cde

Please sign in to comment.