diff --git a/commafeed-client/src/App.tsx b/commafeed-client/src/App.tsx index 5dffcc6b..198162bd 100644 --- a/commafeed-client/src/App.tsx +++ b/commafeed-client/src/App.tsx @@ -12,6 +12,7 @@ import { DisablePullToRefresh } from "components/DisablePullToRefresh" import { ErrorBoundary } from "components/ErrorBoundary" import { Header } from "components/header/Header" import { Tree } from "components/sidebar/Tree" +import { useAppLoading } from "hooks/useAppLoading" import { useBrowserExtension } from "hooks/useBrowserExtension" import { useI18n } from "i18n" import { WelcomePage } from "pages/WelcomePage" @@ -29,7 +30,7 @@ import { TagDetailsPage } from "pages/app/TagDetailsPage" import { LoginPage } from "pages/auth/LoginPage" import { PasswordRecoveryPage } from "pages/auth/PasswordRecoveryPage" import { RegistrationPage } from "pages/auth/RegistrationPage" -import React, { useEffect } from "react" +import React, { useEffect, useState } from "react" import { isSafari } from "react-device-detect" import ReactGA from "react-ga4" import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom" @@ -169,6 +170,38 @@ function BrowserExtensionBadgeUnreadCountHandler() { return null } +function CustomJsHandler() { + const [scriptLoaded, setScriptLoaded] = useState(false) + const { loading } = useAppLoading() + + useEffect(() => { + if (scriptLoaded || loading) { + return + } + + const script = document.createElement("script") + script.src = "custom_js.js" + script.async = true + document.body.appendChild(script) + + setScriptLoaded(true) + }, [scriptLoaded, loading]) + + return null +} + +function CustomCssHandler() { + useEffect(() => { + const link = document.createElement("link") + link.rel = "stylesheet" + link.type = "text/css" + link.href = "custom_css.css" + document.head.appendChild(link) + }, []) + + return null +} + export function App() { useI18n() const root = useAppSelector(state => state.tree.rootCategory) @@ -188,14 +221,18 @@ export function App() { + + {/* disable pull-to-refresh as it messes with vertical scrolling safari behaves weirdly when overscroll-behavior is set to none so we disable it only for other browsers https://github.com/Athou/commafeed/issues/1168 */} {!isSafari && } + + diff --git a/commafeed-client/vite.config.ts b/commafeed-client/vite.config.ts index accae95e..ecc6bfce 100644 --- a/commafeed-client/vite.config.ts +++ b/commafeed-client/vite.config.ts @@ -8,7 +8,6 @@ import tsconfigPaths from "vite-tsconfig-paths" // https://vitejs.dev/config/ export default defineConfig(() => ({ plugins: [ - customCodeInjector, react({ babel: { plugins: ["@lingui/babel-plugin-lingui-macro"], @@ -57,30 +56,3 @@ export default defineConfig(() => ({ setupFiles: "./src/setupTests.ts", }, })) - -// inject custom js and css links in html -const customCodeInjector: PluginOption = { - name: "customCodeInjector", - transformIndexHtml: html => { - return { - html, - tags: [ - { - tag: "script", - attrs: { - src: "custom_js.js", - }, - injectTo: "body", - }, - { - tag: "link", - attrs: { - rel: "stylesheet", - href: "custom_css.css", - }, - injectTo: "head", - }, - ], - } - }, -}