Skip to content

Commit

Permalink
Merge pull request #110 from oss-slu/(107)-RichEditor-Bug
Browse files Browse the repository at this point in the history 
Fixing Note Visual Bug
  • Loading branch information
@yashb196
yashb196 authored Dec 7, 2023
2 parents 82890c2 + 32ebd94 commit 2aa2ba1
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 32 deletions.
72 changes: 55 additions & 17 deletions lib/screens/AddNoteScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
const [keyboardOpen, setKeyboard] = useState(false);
const [keyboardHeight, setKeyboardHeight] = useState(0);
const scrollViewRef = useRef<ScrollView | null>(null);
const [initialLoad, setInitialLoad] = useState(true);
const [location, setLocation] = useState<{
latitude: number;
longitude: number;
Expand All @@ -67,24 +68,42 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
setKeyboard(false);
setKeyboardHeight(0);
}

);
const timeout = setTimeout(() => {
setInitialLoad(false);
}, 1000); // Adjust delay as needed

return () => {
clearTimeout(timeout);
keyboardDidShowListener.remove();
keyboardDidHideListener.remove();
};
}, []);

const handleScroll = (positionY: number) => {
if (scrollViewRef.current) {
const viewportHeight = Dimensions.get('window').height - keyboardHeight;

const scrollToY = positionY - (viewportHeight / 2);

scrollViewRef.current.scrollTo({
y: Math.max(scrollToY, 0),
animated: true,
});
const handleCursorPosition = (position) => {
if (scrollViewRef.current && keyboardOpen) {
const editorBottomY = position.absoluteY + position.height;
const keyboardTopY = Dimensions.get('window').height - keyboardHeight;

if (editorBottomY > keyboardTopY) {
scrollViewRef.current.scrollTo({
y: editorBottomY - keyboardTopY,
animated: true,
});
}
}
};

const updateBodyText = () => {
if (richTextRef.current) {
richTextRef.current.getContentHtml()
.then(html => {
setBodyText(html); // Update the state with the latest content
})
.catch(error => {
console.error('Error getting content from RichEditor:', error);
});
}
};

Expand All @@ -95,11 +114,26 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
/* Additional CSS properties for sizing */
`;

const imgTag = `<img src="${imageUri}" style="${customStyle}" />`;
// Include an extra line break character after the image tag
const imgTag = `<img src="${imageUri}" style="${customStyle}" />&nbsp;<br><br>`;

richTextRef.current?.insertHTML(imgTag);

if (scrollViewRef.current && !initialLoad) {
// Adjust this timeout and calculation as necessary
setTimeout(() => {
scrollViewRef.current?.scrollToEnd({ animated: true });
}, 500);
}
};

// const onEditorContentSizeChange = (e) => {
// if (scrollViewRef.current) {
// scrollViewRef.current.scrollToEnd({ animated: true });
// }
// };


const saveNote = async () => {
if (titleText === "") {
navigation.goBack();
Expand Down Expand Up @@ -316,19 +350,23 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
</View>

</View>

<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{ flex: 1 }}
keyboardVerticalOffset={Platform.OS === "ios" ? 60 : 20}
>
<View style={NotePageStyles().container}>
<View style={[NotePageStyles().container, { flex: 1 }]}>
<ScrollView
nestedScrollEnabled={true}
showsVerticalScrollIndicator={false}
style={{ flex: 1 }}
ref={scrollViewRef}
>
contentContainerStyle={{ paddingBottom: keyboardOpen ? keyboardHeight : 20 }}
>
<RichEditor data-testid="RichEditor"
ref={(r) => (richTextRef.current = r)}
style={{...NotePageStyles().input }}
style={{...NotePageStyles().input, flex: 1, minHeight: 650 }}
editorStyle={{
contentCSSText: `
position: absolute;
Expand All @@ -340,13 +378,13 @@ const AddNoteScreen: React.FC<AddNoteScreenProps> = ({ navigation, route }) => {
placeholder="Write your note here"
onChange={(text) => setBodyText(text)}
initialContentHTML={bodyText}
onCursorPosition={(position) => {
handleScroll(position);
}}
onCursorPosition={handleCursorPosition}
/>
</ScrollView>
</View>
</KeyboardAvoidingView>


</SafeAreaView>
);

Expand Down
52 changes: 37 additions & 15 deletions lib/screens/EditNoteScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,16 +94,18 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
checkOwner();
}, [creator]);

const handleScroll = (positionY: number) => {
if (scrollViewRef.current) {
const handleScroll = (position) => {
if (keyboardOpen && scrollViewRef.current) {
const viewportHeight = Dimensions.get('window').height - keyboardHeight;

const scrollToY = positionY - (viewportHeight / 2);

scrollViewRef.current.scrollTo({
y: Math.max(scrollToY, 0),
animated: true,
});
const cursorRelativePosition = position.relativeY;
const spaceBelowCursor = viewportHeight - cursorRelativePosition;

if (spaceBelowCursor < keyboardHeight) {
scrollViewRef.current.scrollTo({
y: position.absoluteY - spaceBelowCursor + keyboardHeight,
animated: true,
});
}
}
};

Expand All @@ -117,16 +119,36 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
}
};

const updateBodyText = () => {
if (richTextRef.current) {
richTextRef.current.getContentHtml()
.then(html => {
setText(html); // Update the state with the latest content
})
.catch(error => {
console.error('Error getting content from RichEditor:', error);
});
}
};

const addImageToEditor = (imageUri: string) => {
const customStyle = `
max-width: 50%;
height: auto; /* Maintain aspect ratio */
/* Additional CSS properties for sizing */
`;

const imgTag = `<img src="${imageUri}" style="${customStyle}" />`;
// Include an extra line break character after the image tag
const imgTag = `<img src="${imageUri}" style="${customStyle}" />&nbsp;<br><br>`;

richTextRef.current?.insertHTML(imgTag);

// Add a delay before updating the text state
setTimeout(() => {
if (scrollViewRef.current) {
scrollViewRef.current.scrollToEnd({ animated: true });
}
}, 500); // Adjust the delay as needed
};

const handleSaveNote = async () => {
Expand Down Expand Up @@ -310,15 +332,16 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{ flex: 1 }}
>
<View style={NotePageStyles().container}>
<View style={[NotePageStyles().container, { flex: 1 }]}>
<ScrollView
nestedScrollEnabled={true}
showsVerticalScrollIndicator={false}
style={{ flex: 1 }}
ref={scrollViewRef}
>
<RichEditor
ref={(r) => (richTextRef.current = r)}
style={NotePageStyles().input}
style={{ ...NotePageStyles().input, flex: 1, minHeight: 650 }}
editorStyle={{
contentCSSText: `
position: absolute;
Expand All @@ -329,14 +352,13 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
placeholder="Write your note here"
onChange={(text) => setText(text)}
initialContentHTML={text}
onCursorPosition={(position) => {
handleScroll(position);
}}
onCursorPosition={handleScroll}
disabled={!owner}
/>
</ScrollView>
</View>
</KeyboardAvoidingView>

</SafeAreaView>
);
};
Expand Down

0 comments on commit 2aa2ba1

Please sign in to comment.