fix(inbox): do not inject host style in mail render

Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Oct 23, 2024 · 483d4ac · 483d4ac
1 parent 8f7a101
commit 483d4ac
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/apps/renderer/src/components/common/ShadowDOM.tsx b/apps/renderer/src/components/common/ShadowDOM.tsx
@@ -53,14 +53,21 @@ const cloneStylesElement = (_mutationRecord?: MutationRecord) => {
 
   return reactNodes
 }
-export const ShadowDOM: FC<PropsWithChildren<React.HTMLProps<HTMLElement>>> & {
+export const ShadowDOM: FC<
+  PropsWithChildren<React.HTMLProps<HTMLElement>> & {
+    injectHostStyles?: boolean
+  }
+> & {
   useIsShadowDOM: () => boolean
 } = (props) => {
-  const { ...rest } = props
+  const { injectHostStyles = true, ...rest } = props
 
-  const [stylesElements, setStylesElements] = useState<ReactNode[]>(cloneStylesElement)
+  const [stylesElements, setStylesElements] = useState<ReactNode[]>(() =>
+    injectHostStyles ? cloneStylesElement() : [],
+  )
 
   useLayoutEffect(() => {
+    if (!injectHostStyles) return
     const mutationObserver = new MutationObserver((e) => {
       const event = e[0]
 
@@ -74,7 +81,7 @@ export const ShadowDOM: FC<PropsWithChildren<React.HTMLProps<HTMLElement>>> & {
     return () => {
       mutationObserver.disconnect()
     }
-  }, [])
+  }, [injectHostStyles])
 
   const dark = useIsDark()
 
@@ -98,7 +105,7 @@ export const ShadowDOM: FC<PropsWithChildren<React.HTMLProps<HTMLElement>>> & {
           data-theme={dark ? "dark" : "light"}
           className="font-theme"
         >
-          {stylesElements}
+          {injectHostStyles ? stylesElements : null}
           {props.children}
         </div>
       </ShadowDOMContext.Provider>

diff --git a/apps/renderer/src/lib/parse-html.ts b/apps/renderer/src/lib/parse-html.ts
@@ -15,6 +15,7 @@ import type { Node } from "unist"
 import { visit } from "unist-util-visit"
 import { VFile } from "vfile"
 
+import { MemoedDangerousHTMLStyle } from "~/components/common/MemoedDangerousHTMLStyle"
 import { ShadowDOM } from "~/components/common/ShadowDOM"
 import { Checkbox } from "~/components/ui/checkbox"
 import { ShikiHighLighter } from "~/components/ui/code-highlighter"
@@ -312,10 +313,12 @@ export function extractCodeFromHtml(htmlString: string) {
 const Style: Components["style"] = ({ node, ...props }) => {
   const isShadowDOM = ShadowDOM.useIsShadowDOM()
 
-  if (isShadowDOM) {
-    return createElement("style", {
-      ...props,
-    })
+  if (isShadowDOM && typeof props.children === "string") {
+    return createElement(
+      MemoedDangerousHTMLStyle,
+      null,
+      props.children.replaceAll(/html|body/g, "#shadow-html"),
+    )
   }
   return null
 }

diff --git a/apps/renderer/src/modules/entry-content/index.tsx b/apps/renderer/src/modules/entry-content/index.tsx
@@ -215,6 +215,8 @@ export const EntryContentRender: Component<{
     })
   }
 
+  const isInbox = feed?.type === "inbox"
+
   return (
     <>
       <EntryHeader
@@ -260,7 +262,7 @@ export const EntryContentRender: Component<{
                   )}
                   <ErrorBoundary fallback={RenderError}>
                     {!isInReadabilityMode ? (
-                      <ShadowDOM>
+                      <ShadowDOM injectHostStyles={!isInbox}>
                         <EntryContentHTMLRenderer
                           view={view}
                           feedId={feed?.id}
@@ -292,9 +294,7 @@ export const EntryContentRender: Component<{
               {!content && (
                 <div className="center mt-16 min-w-0">
                   {isPending ? (
-                    <EntryContentLoading
-                      icon={feed?.type === "inbox" ? undefined : feed?.siteUrl!}
-                    />
+                    <EntryContentLoading icon={!isInbox ? feed?.siteUrl! : undefined} />
                   ) : error ? (
                     <div className="center flex min-w-0 flex-col gap-2">
                       <i className="i-mgc-close-cute-re text-3xl text-red-500" />