import { forwardRef, useEffect, useImperativeHandle, useRef } from "react"; import { View } from "react-native"; import WebView from "react-native-webview"; import { WEBVIEW_FONT_FAMILIES } from "@/lib/readerSettings"; import { useColorScheme } from "@/lib/useColorScheme"; import { ZReaderFontFamily } from "@karakeep/shared/types/users"; const PREVIEW_TEXT = "The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!"; export interface ReaderPreviewRef { updateStyles: ( fontFamily: ZReaderFontFamily, fontSize: number, lineHeight: number, ) => void; } interface ReaderPreviewProps { initialFontFamily: ZReaderFontFamily; initialFontSize: number; initialLineHeight: number; } export const ReaderPreview = forwardRef( ({ initialFontFamily, initialFontSize, initialLineHeight }, ref) => { const webViewRef = useRef(null); const { isDarkColorScheme: isDark } = useColorScheme(); const fontFamily = WEBVIEW_FONT_FAMILIES[initialFontFamily]; const textColor = isDark ? "#e5e7eb" : "#374151"; const bgColor = isDark ? "#000000" : "#ffffff"; useImperativeHandle(ref, () => ({ updateStyles: ( newFontFamily: ZReaderFontFamily, newFontSize: number, newLineHeight: number, ) => { const cssFontFamily = WEBVIEW_FONT_FAMILIES[newFontFamily]; webViewRef.current?.injectJavaScript(` window.updateStyles("${cssFontFamily}", ${newFontSize}, ${newLineHeight}); true; `); }, })); // Update colors when theme changes useEffect(() => { webViewRef.current?.injectJavaScript(` document.body.style.color = "${textColor}"; document.body.style.background = "${bgColor}"; true; `); }, [isDark, textColor, bgColor]); const html = ` ${PREVIEW_TEXT} `; return ( ); }, ); ReaderPreview.displayName = "ReaderPreview";