From 185f5fd1d74bc81ac676447a3099961969f127b7 Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Mon, 14 Oct 2024 17:23:38 -0500 Subject: [PATCH 1/9] New library --- lib/screens/EditNoteScreen.tsx | 61 ++++++++++++---------------------- 1 file changed, 22 insertions(+), 39 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index 6ad2faa..b20b251 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -30,6 +30,8 @@ import ToastMessage from 'react-native-toast-message'; import { useTheme } from "../components/ThemeProvider"; import LoadingModal from "../components/LoadingModal"; import * as Location from 'expo-location'; +import { RichText, Toolbar, useEditorBridge } from "@10play/tentap-editor"; + const user = User.getInstance(); @@ -63,6 +65,9 @@ const EditNoteScreen: React.FC = ({ const richTextRef = useRef(null); const [isTime, setIsTime] = useState(false); const [isUpdating, setIsUpdating] = useState(false); + const [bodyText, setBodyText] = useState(""); + const editor = useEditorBridge({ initialContent: bodyText || "", autofocus: true }); + let [location, setLocation] = useState<{ latitude: number; longitude: number; @@ -363,26 +368,7 @@ const EditNoteScreen: React.FC = ({ )} {isTime && } - - - + {tags.length > 0 && ( = ({ style={{ flex: 1 }} ref={scrollViewRef} > - (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} - /> + + + + + {/* Toolbar placed at the bottom */} + + + From 2f8f9b79e1e2b35bfe52d2522407cb3f1658e8b2 Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Sun, 20 Oct 2024 14:10:10 -0500 Subject: [PATCH 2/9] Toolbar adjustment, theme on text solved --- lib/screens/EditNoteScreen.tsx | 44 ++++++++++++++++++++++++++++++---- 1 file changed, 39 insertions(+), 5 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index b20b251..284f748 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -66,8 +66,26 @@ const EditNoteScreen: React.FC = ({ const [isTime, setIsTime] = useState(false); const [isUpdating, setIsUpdating] = useState(false); const [bodyText, setBodyText] = useState(""); + const { isDarkmode, toggleDarkmode, theme } = useTheme(); const editor = useEditorBridge({ initialContent: bodyText || "", autofocus: true }); + // Define the dynamic CSS for text color based on isDarkmode + const textColorCSS = ` + p, span, div { + color: ${theme.text} !important; + } + * { + color: ${theme.text} !important; + } + `; + + // Inject and update the CSS in the editor whenever dark mode changes + useEffect(() => { + if (editor) { + editor.injectCSS(textColorCSS, 'text-color-style'); + } + }, [isDarkmode, editor]); + let [location, setLocation] = useState<{ latitude: number; longitude: number; @@ -82,7 +100,6 @@ const EditNoteScreen: React.FC = ({ console.log(note.latitude); console.log(note.longitude); const { height, width } = useWindowDimensions(); - const { theme } = useTheme(); useEffect(() => { const keyboardDidShowListener = Keyboard.addListener( @@ -450,8 +467,9 @@ const EditNoteScreen: React.FC = ({ style={[NotePageStyles().editor, {backgroundColor: Platform.OS == "android" && "white"}]} /> - - {/* Toolbar placed at the bottom */} + + + = ({ actions={['bold', 'italic', 'underline', 'bullet_list', 'blockquote', 'indent', 'outdent', 'close_keyboard' ]} /> - - ); }; +const styles = ({ + + richTextContainer: { + flex: 1, + }, + editor: { + flex: 1, + padding: 10, // Adjust padding as needed + }, + toolbarContainer: { + borderTopWidth: 1, // Add border at the top to separate from the editor + borderTopColor: '#ccc', + backgroundColor: 'white', // Or use theme.background for dynamic background + }, + toolbar: { + height: 600, // Adjust height as needed + }, +}); export default EditNoteScreen; \ No newline at end of file From 602cc901c71f1e77fed5537686953ba7958a2845 Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Mon, 21 Oct 2024 09:37:28 -0500 Subject: [PATCH 3/9] Editted test that was testing on previous editor changed to tentap. --- __tests__/AddNoteScreen.test.tsx | 2 +- lib/screens/AddNoteScreen.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/__tests__/AddNoteScreen.test.tsx b/__tests__/AddNoteScreen.test.tsx index 00cf76d..737c84e 100644 --- a/__tests__/AddNoteScreen.test.tsx +++ b/__tests__/AddNoteScreen.test.tsx @@ -60,7 +60,7 @@ describe('AddNoteScreen', () => { const { getByTestId } = render(); // Check if the RichEditor is rendered - expect(getByTestId('RichEditor')).toBeTruthy(); + expect(getByTestId('TenTapEditor')).toBeTruthy(); }); diff --git a/lib/screens/AddNoteScreen.tsx b/lib/screens/AddNoteScreen.tsx index 0f2b018..cbdf7aa 100644 --- a/lib/screens/AddNoteScreen.tsx +++ b/lib/screens/AddNoteScreen.tsx @@ -302,12 +302,13 @@ const AddNoteScreen: React.FC<{ navigation: any, route: any }> = ({ navigation, keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 0} > - + + {/* Toolbar placed at the bottom */} From 601f1a8ead60ca4fa66475baa58c2b5897063970 Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Mon, 21 Oct 2024 20:16:21 -0500 Subject: [PATCH 4/9] Textbox takes on full screen --- lib/screens/EditNoteScreen.tsx | 95 +++++++++++++++++++--------------- 1 file changed, 54 insertions(+), 41 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index 284f748..1c499d4 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -12,6 +12,8 @@ import { SafeAreaView, Dimensions } from "react-native"; +import { StyleSheet } from "react-native"; + import { Ionicons } from "@expo/vector-icons"; import { Note } from "../../types"; import PhotoScroller from "../components/photoScroller"; @@ -78,6 +80,45 @@ const EditNoteScreen: React.FC = ({ color: ${theme.text} !important; } `; + const exampleStyles = StyleSheet.create({ + fullScreen: { + flex: 1, + backgroundColor: theme.primaryColor, // Match the background color of your screen + }, + richTextContainer: { + flex: 1, // Use full available height for RichText component + justifyContent: 'center', + paddingHorizontal: 10, // Add some padding horizontally + backgroundColor: theme.primaryColor, // Apply black background to the entire container + color : theme.tertiaryColor, + }, + richText: { + flex: 1, + minHeight: '100%', // Ensure it takes full height available + padding: 10, + borderWidth: 1, + borderColor: theme.tertiaryColor, + color: theme.tertiaryColor, // Set text color to white for dark mode + }, + editor: { + backgroundColor: theme.tertiaryColor, + marginBottom: 4, + width: "100%", + minHeight: 200, // Adjust for better visibility + color: theme.text, // Ensure text is visible + padding: 10, // Add padding for better input experience + }, + editorContainer: { + marginBottom: 4, + width: "100%", + backgroundColor: theme.primaryColor, // Ensure it matches the overall theme + }, + toolbar: { + height: 50, // Fixed height for the toolbar at the bottom + backgroundColor: '#333', // Ensure the toolbar has a background color + }, + }); + // Inject and update the CSS in the editor whenever dark mode changes useEffect(() => { @@ -449,56 +490,28 @@ const EditNoteScreen: React.FC = ({ + - - - - + - - - - - - + + ); }; -const styles = ({ - - richTextContainer: { - flex: 1, - }, - editor: { - flex: 1, - padding: 10, // Adjust padding as needed - }, - toolbarContainer: { - borderTopWidth: 1, // Add border at the top to separate from the editor - borderTopColor: '#ccc', - backgroundColor: 'white', // Or use theme.background for dynamic background - }, - toolbar: { - height: 600, // Adjust height as needed - }, -}); + + + + export default EditNoteScreen; \ No newline at end of file From 7c0be26b8baa42264f9ced264e725ea23e93b092 Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Sun, 27 Oct 2024 14:12:26 -0500 Subject: [PATCH 5/9] android coloring --- lib/screens/EditNoteScreen.tsx | 125 ++++++++++++++++++++++++++------- 1 file changed, 101 insertions(+), 24 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index 1c499d4..a461526 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -32,7 +32,7 @@ import ToastMessage from 'react-native-toast-message'; import { useTheme } from "../components/ThemeProvider"; import LoadingModal from "../components/LoadingModal"; import * as Location from 'expo-location'; -import { RichText, Toolbar, useEditorBridge } from "@10play/tentap-editor"; +import { DEFAULT_TOOLBAR_ITEMS, RichText, Toolbar, useEditorBridge } from "@10play/tentap-editor"; @@ -69,7 +69,16 @@ const EditNoteScreen: React.FC = ({ const [isUpdating, setIsUpdating] = useState(false); const [bodyText, setBodyText] = useState(""); const { isDarkmode, toggleDarkmode, theme } = useTheme(); - const editor = useEditorBridge({ initialContent: bodyText || "", autofocus: true }); + const [refreshEditor, setRefreshEditor] = useState(false); + + // Pass the appropriate theme based on dark mode status + const editor = useEditorBridge({ + initialContent: bodyText || "", + autofocus: true, + }); + + + // Define the dynamic CSS for text color based on isDarkmode const textColorCSS = ` @@ -80,52 +89,112 @@ const EditNoteScreen: React.FC = ({ color: ${theme.text} !important; } `; + + const exampleStyles = StyleSheet.create({ fullScreen: { - flex: 1, - backgroundColor: theme.primaryColor, // Match the background color of your screen + ...Platform.select({ + android: { + flex: 1, + backgroundColor: theme.tertiaryColor, // Match the background color of your screen + }, + ios: { + flex: 1, + backgroundColor: theme.tertiaryColor, // Match the background color of your screen + }, + }), }, richTextContainer: { flex: 1, // Use full available height for RichText component justifyContent: 'center', paddingHorizontal: 10, // Add some padding horizontally backgroundColor: theme.primaryColor, // Apply black background to the entire container - color : theme.tertiaryColor, + color: theme.tertiaryColor, + ...Platform.select({ + android: { + flex: 1, // Use full available height for RichText component + justifyContent: 'center', + paddingHorizontal: 10, // Add some padding horizontally + backgroundColor: theme.primaryColor, // Apply black background to the entire container + color: theme.tertiaryColor, + }, + + }), }, - richText: { + richText: { + flex: 1, minHeight: '100%', // Ensure it takes full height available padding: 10, borderWidth: 1, - borderColor: theme.tertiaryColor, - color: theme.tertiaryColor, // Set text color to white for dark mode + borderColor: theme.primaryColor, + color: theme.text, // Set text color to white for dark mode + ...Platform.select({ + android: { + flex: 1, + minHeight: '100%', // Ensure it takes full height available + padding: 2, + borderWidth: 1, + borderColor: theme.primaryColor, + color: theme.primaryColor, // Set text color to white for dark mode + }, + + }), }, - editor: { - backgroundColor: theme.tertiaryColor, - marginBottom: 4, - width: "100%", - minHeight: 200, // Adjust for better visibility - color: theme.text, // Ensure text is visible - padding: 10, // Add padding for better input experience + editor: { + backgroundColor: theme.primaryColor, + marginBottom: 4, + width: "100%", + minHeight: 200, // Adjust for better visibility + color: theme.text, // Ensure text is visible + padding: 10, // Add padding for better input experience + ...Platform.select({ + android: { + backgroundColor: theme.primaryColor, // Ensure consistent background color on Android + color: theme.text, // Ensure consistent text color on Android + marginBottom: 4, + width: "100%", + minHeight: 200, // Adjust for better visibility + padding: 10, // Add padding for better input experience + }, + }), }, editorContainer: { - marginBottom: 4, + backgroundColor: theme.primaryColor, // Ensure consistent background color on iOS + marginBottom: 1, width: "100%", - backgroundColor: theme.primaryColor, // Ensure it matches the overall theme + ...Platform.select({ + android: { + backgroundColor: theme.primaryColor, // Ensure consistent background color on Android + marginBottom: 1, + width: "100%", + }, + }), }, toolbar: { height: 50, // Fixed height for the toolbar at the bottom backgroundColor: '#333', // Ensure the toolbar has a background color + + ...Platform.select({ + android: { + height: 80, // Fixed height for the toolbar at the bottom + backgroundColor: '#333', // Ensure the toolbar has a background color + }, + ios: { + height: 50, // Fixed height for the toolbar at the bottom + backgroundColor: '#333', // Ensure the toolbar has a background color + }, + }), }, }); - - - // Inject and update the CSS in the editor whenever dark mode changes + useEffect(() => { if (editor) { editor.injectCSS(textColorCSS, 'text-color-style'); + console.log("text color will be: " , theme.text); } - }, [isDarkmode, editor]); + }, [isDarkmode, editor, theme]); + let [location, setLocation] = useState<{ latitude: number; @@ -356,6 +425,11 @@ const EditNoteScreen: React.FC = ({ } }; + if (isDarkmode && editor) { + editor.injectCSS(textColorCSS, 'text-color-style'); + console.log("text color will be: #F7F8F9 from IF state"); + } + return ( @@ -492,17 +566,19 @@ const EditNoteScreen: React.FC = ({ + + + - + @@ -514,4 +590,5 @@ const EditNoteScreen: React.FC = ({ + export default EditNoteScreen; \ No newline at end of file From 2b20f9c561cecf176a417d00e050a22d69dfa275 Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Sun, 27 Oct 2024 15:39:38 -0500 Subject: [PATCH 6/9] Coloring issue of Textbox across plattform --- lib/screens/EditNoteScreen.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index a461526..caf6511 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -574,12 +574,14 @@ const EditNoteScreen: React.FC = ({ - + + + From 3e0c13afd53c14d5586f6033e45c01e4210843be Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Sun, 27 Oct 2024 18:04:40 -0500 Subject: [PATCH 7/9] toolbar visibility --- lib/screens/EditNoteScreen.tsx | 52 ++++++++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 12 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index caf6511..bdaddb9 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -96,11 +96,11 @@ const EditNoteScreen: React.FC = ({ ...Platform.select({ android: { flex: 1, - backgroundColor: theme.tertiaryColor, // Match the background color of your screen + backgroundColor: theme.primaryColor, // Match the background color of your screen }, ios: { flex: 1, - backgroundColor: theme.tertiaryColor, // Match the background color of your screen + backgroundColor: theme.primaryColor, // Match the background color of your screen }, }), }, @@ -177,8 +177,8 @@ const EditNoteScreen: React.FC = ({ ...Platform.select({ android: { - height: 80, // Fixed height for the toolbar at the bottom - backgroundColor: '#333', // Ensure the toolbar has a background color + height: 60, // Fixed height for the toolbar at the bottom + backgroundColor: theme.tertiaryColor, // Ensure the toolbar has a background color }, ios: { height: 50, // Fixed height for the toolbar at the bottom @@ -429,6 +429,21 @@ const EditNoteScreen: React.FC = ({ editor.injectCSS(textColorCSS, 'text-color-style'); console.log("text color will be: #F7F8F9 from IF state"); } + const [isKeyboardVisible, setIsKeyboardVisible] = useState(false); + useEffect(() => { + const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => { + setIsKeyboardVisible(true); + }); + const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => { + setIsKeyboardVisible(false); + }); + + return () => { + keyboardDidShowListener.remove(); + keyboardDidHideListener.remove(); + }; + }, []); + return ( @@ -566,20 +581,33 @@ const EditNoteScreen: React.FC = ({ - - + > - - - + + + + + + + From 39ca926b6962dd5781ce0ca940c15808973482ef Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Tue, 29 Oct 2024 13:18:43 -0500 Subject: [PATCH 8/9] Toolbar on IOS --- lib/screens/EditNoteScreen.tsx | 34 +++++++++++++++++----------------- styles/pages/NoteStyles.tsx | 2 +- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index bdaddb9..f7b4be1 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -172,17 +172,22 @@ const EditNoteScreen: React.FC = ({ }), }, toolbar: { - height: 50, // Fixed height for the toolbar at the bottom + height: 40, // Fixed height for the toolbar at the bottom backgroundColor: '#333', // Ensure the toolbar has a background color ...Platform.select({ android: { - height: 60, // Fixed height for the toolbar at the bottom + height: 70, // Fixed height for the toolbar at the bottom backgroundColor: theme.tertiaryColor, // Ensure the toolbar has a background color + overflow: 'hidden', // Ensure no extra space + marginTop: 50 }, ios: { height: 50, // Fixed height for the toolbar at the bottom - backgroundColor: '#333', // Ensure the toolbar has a background color + backgroundColor: theme.primaryColor, + overflow: 'hidden', // Ensure no extra space + marginTop: 50 + }, }), }, @@ -591,25 +596,20 @@ const EditNoteScreen: React.FC = ({ /> + + + + - - - + + diff --git a/styles/pages/NoteStyles.tsx b/styles/pages/NoteStyles.tsx index 4c754d9..1c9fdf6 100644 --- a/styles/pages/NoteStyles.tsx +++ b/styles/pages/NoteStyles.tsx @@ -112,7 +112,7 @@ const NotePageStyles = () => { }, //tool bar styles toolBar: { - height: 50 + height: 100 }, closeKeyboardButton: { padding: 10, From 5d4333c88302aebb552286860a7e021eb1bfa90d Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Sun, 3 Nov 2024 19:40:08 -0600 Subject: [PATCH 9/9] duplicate toolbars --- lib/screens/EditNoteScreen.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index f7b4be1..e798fbe 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -53,7 +53,7 @@ const EditNoteScreen: React.FC = ({ const [isPublished, setIsPublished] = useState(note.published); const [creator, setCreator] = useState(note.creator); const [owner, setOwner] = useState(false); - const scrollViewRef = useRef(null); + //const scrollViewRef = useRef(null); const [viewMedia, setViewMedia] = useState(false); const [viewAudio, setViewAudio] = useState(false); const [isTagging, setIsTagging] = useState(false); @@ -178,7 +178,7 @@ const EditNoteScreen: React.FC = ({ ...Platform.select({ android: { height: 70, // Fixed height for the toolbar at the bottom - backgroundColor: theme.tertiaryColor, // Ensure the toolbar has a background color + backgroundColor: theme.primaryColor, // Ensure the toolbar has a background color overflow: 'hidden', // Ensure no extra space marginTop: 50 }, @@ -196,7 +196,6 @@ const EditNoteScreen: React.FC = ({ useEffect(() => { if (editor) { editor.injectCSS(textColorCSS, 'text-color-style'); - console.log("text color will be: " , theme.text); } }, [isDarkmode, editor, theme]); @@ -244,7 +243,7 @@ const EditNoteScreen: React.FC = ({ }; checkOwner(); }, [creator]); - +/* const handleScroll = (position) => { if (keyboardOpen && scrollViewRef.current) { const viewportHeight = Dimensions.get('window').height - keyboardHeight; @@ -259,7 +258,7 @@ const EditNoteScreen: React.FC = ({ } } }; - +*/ const [latitude, setLatitude] = useState( location?.latitude?.toString() || "" ); @@ -432,7 +431,6 @@ const EditNoteScreen: React.FC = ({ if (isDarkmode && editor) { editor.injectCSS(textColorCSS, 'text-color-style'); - console.log("text color will be: #F7F8F9 from IF state"); } const [isKeyboardVisible, setIsKeyboardVisible] = useState(false); useEffect(() => { @@ -603,10 +601,13 @@ const EditNoteScreen: React.FC = ({ items={DEFAULT_TOOLBAR_ITEMS} /> - - - + {Platform.OS === 'ios' && ( + + )}