Wrong focus annotation breaks render
pomber opened this issue · comments
```js
mdxOptions = {
remarkPlugins: [
// focus(24:44)
[remarkCodeHike, { theme: "github-light" }],
anotherPlugin,
],
}
```
shows nothing
Hi! I'd like to take a stab at this. Hope that works for you.
Hi! I'd like to take a stab at this. Hope that works for you.
Sure. I'm planning to refactor how annotations are handled soon, so if it ends up requiring a big change it will be better to wait.
gotcha. I'll figure out how big the change is.
here's what I found so far.
The render of the code element breaks because the <code>
element rendered has its opacity set to 0 due to the data-dh-measured
attribute being set to false
.
I don't fully understand why this is happening yet, but I have found that with a faulty focus annotation,
// focus(24:44)
the render loops (as in hitting the below breakpoint) through code-tween.tsx > Wrapper
2 times while a valid focus annotation
// focus(1:2)
loops 6 times. The measured
argument passed in changing to true
on the 3rd loop.
I'll keep investigating. Meanwhile, any feedbacks or directions appreciated
more digging around led me to the use-dimensions file. With the faulty annotation, the ref isn't being inserted into the JSX element for React.useRef(null!)
to pick up, causing dimensions to return null, on the 2nd render.
Pretty close to a solution I think.
no solution?