187 Ten Tap

__tests__/AddNoteScreen.test.tsx

@@ -60,7 +60,7 @@ describe('AddNoteScreen', () => {
     const { getByTestId } = render(<AddNoteScreen route={routeMock as any} />);
 
     // Check if the RichEditor is rendered
-    expect(getByTestId('RichEditor')).toBeTruthy();
+    expect(getByTestId('TenTapEditor')).toBeTruthy();
   });
 
 

lib/screens/AddNoteScreen.tsx

@@ -302,12 +302,13 @@ const AddNoteScreen: React.FC<{ navigation: any, route: any }> = ({ navigation,
         keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 0}
       >
 
-          <View style={[NotePageStyles().richTextContainer]}>
+          <View style={[NotePageStyles().richTextContainer]} testID="TenTapEditor">
           <RichText
             editor={editor}
             placeholder="Write something..."
             style={[NotePageStyles().editor, {backgroundColor: Platform.OS == "android" && "white"}]}
           />
+
           </View>
 
         {/* Toolbar placed at the bottom */}

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";
@@ -30,6 +32,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 +67,66 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
   const richTextRef = useRef<RichEditor | null>(null);
   const [isTime, setIsTime] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
+  const [bodyText, setBodyText] = useState<string>("");
+  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;
+    }
+  `;
+  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(() => {
+    if (editor) {
+      editor.injectCSS(textColorCSS, 'text-color-style');
+    }
+  }, [isDarkmode, editor]);  
+
   let [location, setLocation] = useState<{
     latitude: number;
     longitude: number;
@@ -77,7 +141,6 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
   console.log(note.latitude);
   console.log(note.longitude);
   const { height, width } = useWindowDimensions();
-  const { theme } = useTheme();
 
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener(
@@ -363,26 +426,7 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
           )}
           {isTime && <TimeWindow time={time} setTime={setTime} />}
         </View>
-        <View>
-          <RichToolbar
-            style={NotePageStyles().container}
-            editor={richTextRef}
-            actions={[
-              actions.keyboard,
-              actions.undo,
-              actions.redo,
-              actions.setBold,
-              actions.setItalic,
-              actions.setUnderline,
-              actions.insertBulletsList,
-              actions.blockquote,
-              actions.indent,
-              actions.outdent,
-            ]}
-            iconTint={NotePageStyles().saveText.color}
-            selectedIconTint="#2095F2"
-          />
-        </View>
+
         <View key="Tags Container">
           {tags.length > 0 && (
             <ScrollView
@@ -446,42 +490,28 @@ const EditNoteScreen: React.FC<EditNoteScreenProps> = ({
           </View>
 
       </View>
+      <SafeAreaView style={exampleStyles.fullScreen}>
       <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1 }}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={exampleStyles.fullScreen}
       >
-        <View style={[NotePageStyles().editorContainer, { flex: 1 }]}>
-          <ScrollView
-            nestedScrollEnabled={true}
-            showsVerticalScrollIndicator={false}
-            style={{ flex: 1 }}
-            ref={scrollViewRef}
-          >
-            <RichEditor
-              ref={(r) => (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}
-            />
-          </ScrollView>
+        <View style={exampleStyles.richTextContainer}>
+          <RichText 
+            editor={editor} 
+            placeholder="Write something..."
+            style={[exampleStyles.editor, {backgroundColor: Platform.OS == "android" && "white"}]} // Apply styling here
+          />
         </View>
+        <Toolbar editor={editor} style={exampleStyles.toolbar} />
       </KeyboardAvoidingView>
+    </SafeAreaView>
       <LoadingModal visible={isUpdating} />
     </SafeAreaView>
   );
 };
 
+
+
+
+
 export default EditNoteScreen;