feat: add quill text editor

apps/mobile/App.js

@@ -69,7 +69,9 @@ const App = () => {
           hideShadow={true}
           buttonColor="#1abc9c"
           title=""
-          onPress={() => {}}>
+          onPress={() => {
+            NavigationService.navigate('ReminderEditor');
+          }}>
           <Icon
             name="ios-clock"
             style={{

apps/mobile/android/app/src/main/assets/fonts.css

@@ -0,0 +1,59 @@
+/* latin */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(./fonts/Quicksand-Light.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./fonts/Quicksand-Regular.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(./fonts/Quicksand-Medium.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(./fonts/Quicksand-SemiBold.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(./fonts/Quicksand-Bold.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}

apps/mobile/src/services/NavigationService.js

@@ -7,6 +7,7 @@ import Lists from '../views/Lists';
 import Folders from '../views/Folders';
 import Favorites from '../views/Favorites';
 import ListsEditor from '../views/ListsEditor';
+import ReminderEditor from '../views/ReminderEditor';
 
 const TopLevelNavigator = createStackNavigator(
   {
@@ -31,9 +32,12 @@ const TopLevelNavigator = createStackNavigator(
     ListsEditor: {
       screen: ListsEditor,
     },
+    ReminderEditor: {
+      screen: ReminderEditor,
+    },
   },
   {
-    initialRouteName: 'Home',
+    initialRouteName: 'Editor',
   },
 );
 

apps/mobile/src/views/Editor/index.js

@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
   TextInput,
   SafeAreaView,
+  StatusBar,
 } from 'react-native';
 import {
   COLOR_SCHEME,
@@ -18,7 +19,7 @@ import {
   WEIGHT,
 } from '../../common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
-
+import RichText from 'react-native-rich-text';
 const saveText = (type, title, content) => {
   let data = {
     type,
@@ -35,58 +36,25 @@ const Editor = ({navigation}) => {
   const _textRender = createRef();
 
   return (
-    <SafeAreaView>
+    <SafeAreaView
+      style={{
+        height: '100%',
+      }}>
       <View
         style={{
           width: '100%',
           paddingHorizontal: '5%',
-          paddingVertical: pv + 5,
+          paddingVertical: pv,
-          borderBottomWidth: 1,
+
-          borderBottomColor: colors.navbg,
           alignSelf: 'center',
+          marginTop: 25,
         }}>
         <Icon name="ios-arrow-back" size={SIZE.xl} color="black" />
       </View>
 
-      <TextInput
+      <RichText value="">
-        style={{
+        <RichText.Editor onChangeText={text => console.log(text)} />
-          width: '100%',
+      </RichText>
-          maxWidth: '100%',
-          textAlignVertical: 'top',
-          fontSize: SIZE.xl,
-          fontFamily: WEIGHT.semibold,
-          paddingHorizontal: '5%',
-          paddingVertical: ph,
-        }}
-        allowFontScaling={true}
-        adjustsFontSizeToFit={true}
-        maxLength={50}
-        numberOfLines={1}
-        placeholderTextColor={colors.icon}
-        placeholder="Untitled Note"
-        onChangeText={value => {
-          _heading = value;
-        }}
-      />
-
-      <TextInput
-        ref={_textRender}
-        style={{
-          width: '100%',
-          maxWidth: '100%',
-          textAlignVertical: 'top',
-          fontSize: SIZE.md,
-          fontFamily: WEIGHT.semibold,
-          paddingHorizontal: '5%',
-          paddingVertical: ph,
-        }}
-        multiline={true}
-        placeholder="Start writing"
-        placeholderTextColor={colors.icon}
-        onChangeText={value => {
-          _text = value;
-        }}
-      />
     </SafeAreaView>
   );
 };

apps/mobile/src/views/ListsEditor/index.js

@@ -48,7 +48,6 @@ const ListsEditor = ({navigation}) => {
   const [deleteMode, setDeleteMode] = useState(false);
 
   const forceUpdate = useForceUpdate();
-
   const _textRender = createRef();
   let prevItem = null;
   let prevIndex = null;
@@ -67,7 +66,7 @@ const ListsEditor = ({navigation}) => {
         }}>
         <TextInput
           style={{
-            fontSize: SIZE.xxl,
+            fontSize: SIZE.xl,
             color: colors.pri,
             fontFamily: WEIGHT.bold,
             paddingVertical: 0,

apps/mobile/src/views/ReminderEditor/index.js

@@ -0,0 +1,142 @@
+import React, {useEffect, useState, createRef, useCallback} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  TextInput,
+  SafeAreaView,
+  Dimensions,
+  FlatList,
+} from 'react-native';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+
+const saveText = (type, title, content) => {
+  let data = {
+    type,
+    title,
+    headline: content.slice(0, 60),
+    timestamp: Date.now(),
+  };
+};
+
+export function useForceUpdate() {
+  const [, setTick] = useState(0);
+  const update = useCallback(() => {
+    setTick(tick => tick + 1);
+  }, []);
+  return update;
+}
+
+const ReminderEditor = ({navigation}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+
+  const _textRender = createRef();
+
+  return (
+    <SafeAreaView>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingHorizontal: '5%',
+          marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
+          marginBottom: h * 0.04,
+        }}>
+        <Text
+          style={{
+            fontSize: SIZE.xl,
+            color: colors.pri,
+            fontFamily: WEIGHT.bold,
+            paddingVertical: 0,
+            paddingHorizontal: 0,
+            maxWidth: '90%',
+            width: '90%',
+          }}>
+          Set a Reminder
+        </Text>
+        <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
+      </View>
+
+      <Text
+        style={{
+          width: '90%',
+          alignSelf: 'center',
+          fontFamily: WEIGHT.semibold,
+          color: colors.pri,
+          fontSize: SIZE.sm,
+          marginBottom: 10,
+        }}>
+        What do you want to be reminded about?
+      </Text>
+
+      <TextInput
+        ref={_textRender}
+        style={{
+          width: '90%',
+          maxWidth: '90%',
+          textAlignVertical: 'top',
+          fontSize: SIZE.sm,
+          fontFamily: WEIGHT.regular,
+          marginHorizontal: '5%',
+          paddingVertical: pv - 5,
+          borderRadius: 5,
+          paddingHorizontal: ph - 5,
+          backgroundColor: colors.navbg,
+          marginBottom: 15,
+        }}
+        maxLength={80}
+        placeholder="eg. Sara's Birthday"
+        placeholderTextColor={colors.icon}
+        onChangeText={value => {
+          _text = value;
+        }}
+      />
+
+      <TextInput
+        ref={_textRender}
+        style={{
+          width: '90%',
+          maxWidth: '90%',
+          textAlignVertical: 'top',
+          fontSize: SIZE.sm,
+          fontFamily: WEIGHT.regular,
+          marginHorizontal: '5%',
+          paddingVertical: pv - 5,
+          borderRadius: 5,
+          paddingHorizontal: ph - 5,
+          backgroundColor: colors.navbg,
+          marginBottom: 10,
+        }}
+        numberOfLines={3}
+        maxLength={80}
+        multiline={true}
+        placeholder="You can add a short note here"
+        placeholderTextColor={colors.icon}
+        onChangeText={value => {
+          _text = value;
+        }}
+      />
+    </SafeAreaView>
+  );
+};
+
+ReminderEditor.navigationOptions = {
+  header: null,
+};
+
+export default ReminderEditor;