From a7aaa7d23028de94f62425d319ddfe36549ccd73 Mon Sep 17 00:00:00 2001 From: Rajarshee Chatterjee Date: Sat, 7 Aug 2021 12:08:31 +0530 Subject: [PATCH] feat: Custom CSS --- src/hooks/reduxHooks.js | 3 +- src/redux/settings/settings.reducer.js | 1 + src/screens/Chapter/Chapter.js | 18 +--- src/screens/More/ReaderSettings.js | 133 +++++++++++++++++++++---- src/sources/helpers/cleanHtml.js | 5 +- 5 files changed, 121 insertions(+), 39 deletions(-) diff --git a/src/hooks/reduxHooks.js b/src/hooks/reduxHooks.js index 99534ded..acb46815 100644 --- a/src/hooks/reduxHooks.js +++ b/src/hooks/reduxHooks.js @@ -1,5 +1,4 @@ -import { shallowEqual, useSelector } from "react-redux"; -import { showChapterTitlesAction } from "../redux/novel/novel.actions"; +import { useSelector } from "react-redux"; import { darkTheme } from "../theme/theme"; const useTheme = () => { diff --git a/src/redux/settings/settings.reducer.js b/src/redux/settings/settings.reducer.js index 19ba62e7..2fd8c739 100644 --- a/src/redux/settings/settings.reducer.js +++ b/src/redux/settings/settings.reducer.js @@ -54,6 +54,7 @@ const initialState = { padding: 5, fontFamily: "", lineHeight: 1.5, + customCSS: null, }, showDownloadBadges: true, showUnreadBadges: true, diff --git a/src/screens/Chapter/Chapter.js b/src/screens/Chapter/Chapter.js index bde3a02f..407486c7 100644 --- a/src/screens/Chapter/Chapter.js +++ b/src/screens/Chapter/Chapter.js @@ -6,16 +6,15 @@ import { StatusBar, ScrollView, TouchableWithoutFeedback, - Dimensions, - Pressable, } from "react-native"; -import { useDispatch, useSelector } from "react-redux"; +import { useDispatch } from "react-redux"; import { IconButton, Portal } from "react-native-paper"; import { hideNavigationBar, showNavigationBar, } from "react-native-navigation-bar-color"; +import WebView from "react-native-webview"; import { getChapterFromDB, @@ -51,7 +50,6 @@ import GestureRecognizer from "react-native-swipe-gestures"; import { LoadingScreen } from "../../components/LoadingScreen/LoadingScreen"; import { insertHistory } from "../../database/queries/HistoryQueries"; import { SET_LAST_READ } from "../../redux/preferences/preference.types"; -import WebView from "react-native-webview"; import { htmlToText } from "../../sources/helpers/htmlToText"; import { setAppSettings } from "../../redux/settings/settings.actions"; import { cleanHtml } from "../../sources/helpers/cleanHtml"; @@ -275,13 +273,6 @@ const Chapter = ({ route, navigation }) => { }) : showToast("There's no next chapter"); - const onPressLink = async (link) => { - setLoading(true); - const res = await fetchChapter(sourceId, novelUrl, link); - setChapter(res); - setLoading(false); - }; - const enableSwipeGestures = () => { dispatch(setAppSettings("swipeGestures", !swipeGestures)); showToast( @@ -419,9 +410,6 @@ const Chapter = ({ route, navigation }) => { margin-top: 20px; margin-bottom: 20px; } - span[style] { - color: ${reader.textColor} !important; - } a { color: ${theme.colorAccent}; } @@ -437,6 +425,8 @@ const Chapter = ({ route, navigation }) => { reader.fontFamily }.ttf"); } + + ${reader.customCSS} diff --git a/src/screens/More/ReaderSettings.js b/src/screens/More/ReaderSettings.js index c228f0fe..a69b1c47 100644 --- a/src/screens/More/ReaderSettings.js +++ b/src/screens/More/ReaderSettings.js @@ -1,5 +1,14 @@ import React, { useState } from "react"; -import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native"; +import { + Pressable, + ScrollView, + StyleSheet, + Text, + TextInput, + View, +} from "react-native"; +import { Button } from "react-native-paper"; +import WebView from "react-native-webview"; import { useDispatch } from "react-redux"; import { Appbar } from "../../components/Appbar"; @@ -84,31 +93,67 @@ const ReaderSettings = ({ navigation }) => { { value: "right", icon: "format-align-right" }, ]; + const [customHtmlCSS, setcustomHtmlCSS] = useState(reader.customCSS); + return ( + + + + + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Ut lobortis nunc id nisl tempor, sed tristique sem + sagittis. Mauris consequat orci egestas volutpat + vestibulum. Nullam convallis, leo in porttitor + fringilla, ex mi finibus felis, non molestie ligula + ligula facilisis ligula. Nam eu est a turpis porttitor + aliquet sed vel risus. Ut ac scelerisque diam. Nulla + fringilla enim non ex rhoncus faucibus. Integer eget + lacus justo. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Ut lobortis nunc id nisl tempor, sed tristique sem + sagittis. Mauris consequat orci egestas volutpat + vestibulum. Nullam convallis, leo in porttitor + fringilla, ex mi finibus felis, non molestie ligula + ligula facilisis ligula. + + + `, + }} + /> + - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Ut lobortis nunc id nisl tempor, sed tristique sem - sagittis. Mauris consequat orci egestas volutpat - vestibulum. Nullam convallis, leo in porttitor - fringilla, ex mi finibus felis, non molestie ligula - ligula facilisis ligula. Nam eu est a turpis porttitor - aliquet sed vel risus. Ut ac scelerisque diam. Nulla - fringilla enim non ex rhoncus faucibus. Integer eget - lacus justo. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Ut vitae tempor metus. Morbi nec nisl - cursus, gravida ex vitae, laoreet leo. Pellentesque in - lectus ante. Aliquam porta suscipit pretium. Sed ut - ligula at dolor pretium egestas quis vitae urna. In - ullamcorper venenatis orci, eu pulvinar nibh venenatis - sit amet. - - Preset @@ -215,8 +260,52 @@ const ReaderSettings = ({ navigation }) => { ))} + + CSS + + setcustomHtmlCSS(text)} + placeholderTextColor={theme.textColorSecondary} + placeholder="Example: body { color: red; }" + multiline={true} + /> + + + + + + { let text = html; text = text - .replace(/(font-family|line-height|font-size|text-align):.*?;/gi, "") + .replace( + /style="((?:color|font-family|line-height|font-size|text-align).*?)"/gi, + "" + ) .replace(/class=".*?"/gi, "") .replace(/id=".*?"/gi, "") .replace(//gim, "")