From f802b61bb48e918412944e4c7307568d8218b677 Mon Sep 17 00:00:00 2001 From: AndrewC Date: Mon, 8 Apr 2024 04:09:36 -0500 Subject: [PATCH] Added the 10Tap into our application --- lib/components/photoScroller.tsx | 4 - lib/screens/AddNoteScreen.tsx | 156 ++++--------------------------- lib/screens/EditNoteScreen.tsx | 152 ++++-------------------------- styles/pages/NoteStyles.tsx | 5 + 4 files changed, 40 insertions(+), 277 deletions(-) diff --git a/lib/components/photoScroller.tsx b/lib/components/photoScroller.tsx index 80bfabc..99f3726 100644 --- a/lib/components/photoScroller.tsx +++ b/lib/components/photoScroller.tsx @@ -30,14 +30,10 @@ const PhotoScroller = forwardRef( newMedia, setNewMedia, active, - insertImageToEditor, - addVideoToEditor, }: { newMedia: Media[]; setNewMedia: React.Dispatch>; active: Boolean; - insertImageToEditor: Function; - addVideoToEditor: Function; }, ref ) => { diff --git a/lib/screens/AddNoteScreen.tsx b/lib/screens/AddNoteScreen.tsx index 132733f..acd9f52 100644 --- a/lib/screens/AddNoteScreen.tsx +++ b/lib/screens/AddNoteScreen.tsx @@ -32,6 +32,7 @@ import { } from "react-native-pell-rich-editor"; import NotePageStyles from "../../styles/pages/NoteStyles"; import { useTheme } from "../components/ThemeProvider"; +import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor'; const user = User.getInstance(); @@ -47,7 +48,6 @@ const AddNoteScreen: React.FC = ({ navigation, route }) => { const [isTagging, setIsTagging] = useState(false); const [isLocation, setIsLocation] = useState(false); const [isTime, setIsTime] = useState(false); - const richTextRef = useRef(null); const [isPublished, setIsPublished] = useState(false); const [keyboardOpen, setKeyboard] = useState(false); const [keyboardHeight, setKeyboardHeight] = useState(0); @@ -61,6 +61,12 @@ const AddNoteScreen: React.FC = ({ navigation, route }) => { const { theme } = useTheme(); + const editor = useEditorBridge({ + autofocus: true, + avoidIosKeyboard: true, + initialContent: 'Start editing!', + }); + useEffect(() => { const keyboardDidShowListener = Keyboard.addListener( "keyboardDidShow", @@ -104,85 +110,6 @@ const AddNoteScreen: React.FC = ({ navigation, route }) => { } }; - 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); - }); - } - }; - - const addImageToEditor = (imageUri: string) => { - const customStyle = ` - max-width: 50%; - height: auto; /* Maintain aspect ratio */ - /* Additional CSS properties for sizing */ - `; - - // Include an extra line break character after the image tag - const imgTag = ` 

`; - - richTextRef.current?.insertHTML(imgTag); - - if (scrollViewRef.current && !initialLoad) { - // Adjust this timeout and calculation as necessary - setTimeout(() => { - scrollViewRef.current?.scrollToEnd({ animated: true }); - }, 500); - } - }; - - const addVideoToEditor = async (videoUri: string) => { - try { - // Fetch the thumbnail URI - const thumbnailUri = await getThumbnail(videoUri); - - const videoHtml = ` - -

${videoUri}

- - `; - - richTextRef.current?.insertHTML(videoHtml); - - setTimeout(() => { - if (scrollViewRef.current) { - scrollViewRef.current.scrollToEnd({ animated: true }); - } - }, 500); - } catch (error) { - console.error("Error adding video with thumbnail: ", error); - } - } - const handleShareButtonPress = () => { setIsPublished(!isPublished); // Toggle the share status ToastMessage.show({ @@ -376,7 +303,7 @@ const AddNoteScreen: React.FC = ({ navigation, route }) => { - + {viewAudio && ( )} @@ -386,26 +313,6 @@ const AddNoteScreen: React.FC = ({ navigation, route }) => { )} {isTime && } - - - {tags.length > 0 && ( = ({ navigation, route }) => { - - - - (richTextRef.current = r)} - style={[NotePageStyles().editor, {flex: 1, minHeight: 650 }]} - editorStyle={{ - contentCSSText: ` - position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - `, - backgroundColor: theme.primaryColor, - color: theme.text, - }} - autoCorrect={true} - placeholder="Write your note here" - onChange={(text) => setBodyText(text)} - initialContentHTML={bodyText} - onCursorPosition={handleCursorPosition} - /> - - - - - - + ) => setBodyText(text)} + /> + + + + ); }; diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index 5780aa2..e79c115 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -24,7 +24,7 @@ import ApiService from "../utils/api_calls"; import TagWindow from "../components/tagging"; import LocationWindow from "../components/location"; import TimeWindow from "../components/time"; -import { RichEditor, RichToolbar, actions } from "react-native-pell-rich-editor"; +import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor'; import NotePageStyles from "../../styles/pages/NoteStyles"; import ToastMessage from 'react-native-toast-message'; import { useTheme } from "../components/ThemeProvider"; @@ -55,7 +55,6 @@ const EditNoteScreen: React.FC = ({ const [keyboardOpen, setKeyboard] = useState(false); const [keyboardHeight, setKeyboardHeight] = useState(0); const [isLocation, setIsLocation] = useState(false); - const richTextRef = useRef(null); const [isTime, setIsTime] = useState(false); const [location, setLocation] = useState<{ latitude: number; @@ -71,6 +70,12 @@ const EditNoteScreen: React.FC = ({ const { height, width } = useWindowDimensions(); const { theme } = useTheme(); + const editor = useEditorBridge({ + autofocus: true, + avoidIosKeyboard: true, + initialContent: "Start Here!", + }); + useEffect(() => { const keyboardDidShowListener = Keyboard.addListener( "keyboardDidShow", @@ -100,21 +105,6 @@ const EditNoteScreen: React.FC = ({ checkOwner(); }, [creator]); - const handleScroll = (position) => { - if (keyboardOpen && scrollViewRef.current) { - const viewportHeight = Dimensions.get('window').height - keyboardHeight; - const cursorRelativePosition = position.relativeY; - const spaceBelowCursor = viewportHeight - cursorRelativePosition; - - if (spaceBelowCursor < keyboardHeight) { - scrollViewRef.current.scrollTo({ - y: position.absoluteY - spaceBelowCursor + keyboardHeight, - animated: true, - }); - } - } - }; - const photoScrollerRef = useRef<{ goBig(index: number): void } | null>( null ); @@ -133,71 +123,6 @@ const EditNoteScreen: React.FC = ({ visibilityTime: 3000 // 3 seconds }); }; - - 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 */ - `; - - // Include an extra line break character after the image tag - const imgTag = ` 

`; - - 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 addVideoToEditor = async (videoUri: string) => { - try { - // Fetch the thumbnail URI - const thumbnailUri = await getThumbnail(videoUri); - - const videoHtml = ` - -

${videoUri}

- - `; - - richTextRef.current?.insertHTML(videoHtml); - - setTimeout(() => { - if (scrollViewRef.current) { - scrollViewRef.current.scrollToEnd({ animated: true }); - } - }, 500); - } catch (error) { - console.error("Error adding video with thumbnail: ", error); - } - } const handleSaveNote = async () => { try { @@ -282,8 +207,6 @@ const EditNoteScreen: React.FC = ({ active={viewMedia} newMedia={media} setNewMedia={setMedia} - insertImageToEditor={addImageToEditor} - addVideoToEditor={addVideoToEditor} /> {viewAudio && ( @@ -294,26 +217,6 @@ const EditNoteScreen: React.FC = ({ )} {isTime && } - - - {tags.length > 0 && ( = ({ - - - ) => setText(text)} + /> + - (richTextRef.current = r)} - style={[NotePageStyles().editor, {flex: 1, minHeight: 650 }]} - editorStyle={ - { - contentCSSText: ` - position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - `, - backgroundColor: theme.primaryColor, - color: theme.text, - }} - autoCorrect={true} - placeholder="Write your note here" - onChange={(text) => setText(text)} - initialContentHTML={text} - onCursorPosition={handleScroll} - disabled={!owner} - /> - - - + + ); diff --git a/styles/pages/NoteStyles.tsx b/styles/pages/NoteStyles.tsx index 8a09413..9b3d6c6 100644 --- a/styles/pages/NoteStyles.tsx +++ b/styles/pages/NoteStyles.tsx @@ -108,6 +108,11 @@ const NotePageStyles = () => { justifyContent: "center", alignSelf: "center", }, + keyboardAvoidingView: { + position: 'absolute', + width: '100%', + bottom: 0, + }, }); };