Cursor postion Issue

[Bilal-Txend]

import React, {
useCallback,
useEffect,
useRef,
useState,
forwardRef,
} from "react";
import { StyleSheet, Text, View } from "react-native";
import {
KeyboardAwareScrollView,
KeyboardStickyView,
} from "react-native-keyboard-controller";
import Reanimated, {
interpolate,
useAnimatedStyle,
} from "react-native-reanimated";
import {
actions,
RichEditor,
RichToolbar,
} from "react-native-pell-rich-editor";
import { XMath } from "@wxik/core";

import colors from "../../../constants/colors";
import {
KeyboardEventsListener,
useGradualKeyboardAnimation,
} from "../../../hooks/useGradualKeyboardAnimation";

const Editor = forwardRef(({ content, setContent, change, isOpen }, ref) => {
const scrollRef = useRef(null);
const [disabled, setDisable] = useState(isOpen);
const [editorHeight, setEditorHeight] = useState(40);
const [scrollViewHeight, setScrollViewHeight] = useState(0);
const { height, progress } = useGradualKeyboardAnimation();
const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);

KeyboardEventsListener({ setKeyboardVisible: setIsKeyboardVisible });

const displayStyle = useAnimatedStyle(() => {
return {
backgroundColor: "transparent",
height: height.value > 50 ? 44 : height.value,
transform: [
{
scaleX: interpolate(progress.value, [0, 1], [0, 1]),
},
],
};
});

const contentStyle = {
backgroundColor: colors.white,
color: colors.black,
contentCSSText: font-family: sans-serif; font-size: 18px; min-height: 300px; padding-top:0px; margin-top:0px,
};

const onPressTouch = () => {
scrollRef.current?.scrollTo({
y: 0,
animated: true,
});
};

const handleChange = useCallback(
(html) => {
setContent(html);
},
[setContent]
);

const onDisabled = useCallback(() => {
setDisable(!disabled);
}, [disabled]);

const editorInitializedCallback = useCallback(() => {
ref.current.registerToolbar((items) => {});
}, [ref]);

const handleHeightChange = useCallback(
(height) => {
setEditorHeight(height);
},
[editorHeight, scrollViewHeight]
);

const handleInsertHTML = useCallback(() => {
ref.current?.insertHTML(``);
}, [ref]);

const handleFontSize = useCallback(() => {
let size = [1, 2, 3, 4, 5, 6, 7];
ref.current?.setFontSize(size[XMath.random(size.length - 1)]);
}, [ref]);

const handlePaste = useCallback((data) => {
// console.log("Paste:", data);
}, []);

const handleKeyUp = useCallback((data) => {
// console.log("KeyUp:", data);
}, []);

const handleKeyDown = useCallback((data) => {
// console.log("KeyDown:", data);
}, []);

const handleInput = useCallback((data) => {
// console.log("inputType", data);
}, []);

const handleCursorPosition = useCallback((scrollY) => {
scrollRef.current.scrollTo({ y: scrollY - 30, animated: true });
}, []);

useEffect(() => {
onPressTouch();
}, [change]);

return (

<KeyboardAwareScrollView
keyboardDismissMode={"interactive"}
keyboardShouldPersistTaps="handled"
contentContainerStyle={
isKeyboardVisible ? { flexGrow: 1 } : { height: editorHeight }
}
style={styles.scroll}
scrollEventThrottle={20}
ref={scrollRef}
showsVerticalScrollIndicator={false}
disableScrollOnKeyboardHide={true}
onLayout={(event) => {
const { height } = event.nativeEvent.layout;
setScrollViewHeight(height);
}}
>
<RichEditor
initialFocus={false}
firstFocusEnd={false}
disabled={isOpen}
editorStyle={contentStyle}
ref={ref}
initialContentHTML={content}
style={styles.rich}
useContainer={true}
initialHeight={400}
enterKeyHint={"go"}
injectedJavaScript={(function() { var value = window.getSelection().toString() || ''; window.ReactNativeWebView.postMessage(JSON.stringify({ data: {type: 'SELECTION_CHANGE', value } })); void(0); })();}
editorInitializedCallback={editorInitializedCallback}
onChange={handleChange}
onHeightChange={handleHeightChange}
onPaste={handlePaste}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
onInput={handleInput}
onCursorPosition={(e) => handleCursorPosition(e)}
pasteAsPlainText={true}
/>


<Reanimated.View style={[displayStyle]}>
<RichToolbar
style={styles.richBar}
flatContainerStyle={styles.flatStyle}
editor={ref}
disabled={disabled}
disabledIconTint={"#bfbfbf"}
iconSize={26}
iconGap={14}
actions={[
"Done",
actions.setBold,
actions.setItalic,
actions.alignLeft,
actions.alignCenter,
actions.alignRight,
actions.code,
actions.setStrikethrough,
actions.insertOrderedList,
actions.blockquote,
]}
iconMap={{
Done: () => (
<Text
style={{
...styles.doneButtonStyling,
}}
>
Done

),
}}
Done={() => {
ref.current?.dismissKeyboard();
}}
insertHTML={handleInsertHTML}
fontSize={handleFontSize}
/>
</Reanimated.View>


);
});

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#efefef",
},
rich: {
flex: 1,
minHeight: 300,
},
richBar: {
borderColor: "#efefef",
borderTopWidth: StyleSheet.hairlineWidth,
},
scroll: {
flex: 1,
backgroundColor: "#ffffff",
},
item: {
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: "#e8e8e8",
flexDirection: "row",
height: 40,
alignItems: "center",
paddingHorizontal: 15,
},
flatStyle: {
paddingHorizontal: 18,
},
doneButtonStyling: {
fontSize: 14,
fontWeight: "500",
color: colors.white,
backgroundColor: colors.primary_teal,
width: 44,
justifyContent: "center",
alignItems: "center",
textAlign: "center",
marginRight: 10,
height: 28,
borderRadius: 4,
paddingVertical: 4,
},
});

export default Editor;

I am using this package for https://kirillzyusko.github.io/react-native-keyboard-controller/
And I am using this component as a child component can i one help

MicrosoftTeams-video.mp4