feat: add quill text editor

2025-12-16 11:47:54 +01:00 · 2019-11-22 06:08:27 +05:00
parent ffb2457606
commit 7c265f8eed
8 changed files with 38169 additions and 48 deletions
--- a/apps/mobile/App.js
+++ b/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={{
--- a/apps/mobile/android/app/src/main/assets/fonts.css
+++ b/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;
+}
--- a/apps/mobile/android/app/src/main/assets/texteditor.html
+++ b/apps/mobile/android/app/src/main/assets/texteditor.html
--- a/apps/mobile/android/app/src/main/assets/textviewer.html
+++ b/apps/mobile/android/app/src/main/assets/textviewer.html
--- a/apps/mobile/src/services/NavigationService.js
+++ b/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',
  },
 );

--- a/apps/mobile/src/views/Editor/index.js
+++ b/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,
-          borderBottomWidth: 1,
-          borderBottomColor: colors.navbg,
+          paddingVertical: pv,
+
          alignSelf: 'center',
+          marginTop: 25,
        }}>
        <Icon name="ios-arrow-back" size={SIZE.xl} color="black" />
      </View>

-      <TextInput
-        style={{
-          width: '100%',
-          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;
-        }}
-      />
+      <RichText value="">
+        <RichText.Editor onChangeText={text => console.log(text)} />
+      </RichText>
    </SafeAreaView>
  );
 };
--- a/apps/mobile/src/views/ListsEditor/index.js
+++ b/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,
--- a/apps/mobile/src/views/ReminderEditor/index.js
+++ b/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;