diff --git a/packages/@shared/util.ts b/packages/@shared/util.ts index cf6ce6d4..d74c7d9e 100644 --- a/packages/@shared/util.ts +++ b/packages/@shared/util.ts @@ -91,18 +91,27 @@ export function addDefaultStyles() { } .giscus-frame { border: none; - color-scheme: auto; + color-scheme: normal; } ` document.head.prepend(style) } -export function createErrorMessageListener(resetSession: () => void) { +export function createErrorMessageListener( + resetSession: () => void, + iframe: HTMLIFrameElement | null = null +) { return function (event: MessageEvent) { if (event.origin !== GISCUS_ORIGIN) return const { data } = event - if (!(typeof data === 'object' && data?.giscus?.error)) return + if (!(typeof data === 'object' && data.giscus)) return + + if (iframe && data.giscus.resizeHeight) { + iframe.style.height = `${data.giscus.resizeHeight}px` + } + + if (!data.giscus.error) return const message: string = data.giscus.error diff --git a/packages/react/lib/Giscus.tsx b/packages/react/lib/Giscus.tsx index 6d008071..c40646b2 100644 --- a/packages/react/lib/Giscus.tsx +++ b/packages/react/lib/Giscus.tsx @@ -5,10 +5,8 @@ import { createErrorMessageListener, formatError, getIframeSrc, - GISCUS_ORIGIN, GISCUS_SESSION_KEY } from '@shared/util' -import iFrameResizer from 'iframe-resizer' function GiscusClient(props: GiscusProps) { const [session, setSession] = useState('') @@ -43,26 +41,20 @@ function GiscusClient(props: GiscusProps) { useEffect(addDefaultStyles, []) useEffect(() => { - const listener = createErrorMessageListener(() => setSession('')) + const listener = createErrorMessageListener( + () => setSession(''), + iframe.current + ) window.addEventListener('message', listener) return () => window.removeEventListener('message', listener) }, []) - useEffect(() => { - if (!iframe.current) return - iframe.current.addEventListener('load', () => - iFrameResizer.iframeResizer( - { checkOrigin: [GISCUS_ORIGIN] }, - iframe.current as HTMLIFrameElement - ) - ) - }, [src]) - return (