diff --git a/packages/mdx/src/highlighter/index.tsx b/packages/mdx/src/highlighter/index.tsx index c6e7c707..6cad3d76 100644 --- a/packages/mdx/src/highlighter/index.tsx +++ b/packages/mdx/src/highlighter/index.tsx @@ -3,6 +3,8 @@ import { highlight as light } from "@code-hike/lighter" const newlineRe = /\r\n|\r|\n/ +const warnings = new Set() + export async function highlight({ code, lang, @@ -35,10 +37,13 @@ export async function highlight({ return { lines, lang } } catch (e) { // TODO check error is "missing grammar" - console.warn( - "[Code Hike warning]", - `${lang} is not a valid language, no syntax highlighting will be applied.` - ) + if (!warnings.has(lang)) { + console.warn( + "[Code Hike warning]", + `${lang} is not a valid language, no syntax highlighting will be applied.` + ) + warnings.add(lang) + } return highlight({ code, lang: "text", theme }) } } diff --git a/packages/mdx/src/smooth-code/code-tween.tsx b/packages/mdx/src/smooth-code/code-tween.tsx index 61100a0c..a15cdf6e 100644 --- a/packages/mdx/src/smooth-code/code-tween.tsx +++ b/packages/mdx/src/smooth-code/code-tween.tsx @@ -109,10 +109,7 @@ function BeforeDimensions({ debug?: boolean }) { return ( - + {element} ) @@ -137,7 +134,7 @@ function AfterDimensions({ htmlProps: HTMLProps }) { return ( - + because https://github.com/code-hike/codehike/issues/120 @@ -173,10 +170,7 @@ function Wrapper({ className={`ch-code-wrapper ${ htmlProps?.className || "" }`} - style={{ - ...style, - ...htmlProps?.style, - }} + data-ch-measured={measured} children={children} /> ) diff --git a/packages/mdx/src/smooth-code/index.scss b/packages/mdx/src/smooth-code/index.scss index e81706d9..72fb4822 100644 --- a/packages/mdx/src/smooth-code/index.scss +++ b/packages/mdx/src/smooth-code/index.scss @@ -51,3 +51,9 @@ // to avoid resets using "border-box" that break the scrollbar https://github.com/code-hike/codehike/issues/240 box-sizing: content-box; } +.ch-code-wrapper[data-ch-measured="false"] { + overflow: auto; +} +.ch-code-wrapper[data-ch-measured="false"] > * { + opacity: 0; +} diff --git a/packages/mdx/src/smooth-code/use-dimensions.tsx b/packages/mdx/src/smooth-code/use-dimensions.tsx index 19365383..c5926fff 100644 --- a/packages/mdx/src/smooth-code/use-dimensions.tsx +++ b/packages/mdx/src/smooth-code/use-dimensions.tsx @@ -45,9 +45,13 @@ function useDimensions( const [dimensions, setDimensions] = React.useState(null) + // in case the element starts hidden https://github.com/code-hike/codehike/issues/372 + const [visibility, markAsVisible] = React.useState(0) + const windowWidth = useWindowWidth() const prevLineRef = React.useRef(null!) + // the element to render before dimensions are calculated const { prevLongestLine, nextLongestLine, element } = React.useMemo(() => { const prevLongestLine = getLongestLine( @@ -135,6 +139,7 @@ function useDimensions( prevLongestLine, nextLongestLine, minColumns, + visibility, ] useLayoutEffect(() => { @@ -143,6 +148,21 @@ function useDimensions( const contentElement = pll?.parentElement! const codeElement = contentElement.parentElement! + const { width } = codeElement.getBoundingClientRect() + if (!width && visibility === 0) { + const resizeObserver = new ResizeObserver( + ([entry]) => { + const { width } = entry.contentRect + if (width) { + resizeObserver.disconnect() + markAsVisible(1) + } + } + ) + resizeObserver.observe(codeElement) + return () => resizeObserver.disconnect() + } + // TODO is it clientWidth or clientRect? const lineContentDiv = pll?.querySelector( ":scope > div" @@ -195,6 +215,7 @@ function useDimensions( } setDimensions(d) } + return () => {} }, allDeps) if (