Wrong focus annotation breaks render

[pomber]

```js
mdxOptions = {
  remarkPlugins: [
    // focus(24:44)
    [remarkCodeHike, { theme: "github-light" }],
    anotherPlugin,
  ],
}

shows nothing

[playground](https://playground-git-from-range-codehike.vercel.app/#N4IgtgJgHiBcIAMkCsDOAdAdpKB5ADgC4CWA9pqgAQC8lwWllATgKZgCGTA1gAoA2AVwDmxCrEoBtBo0oB6WZQBmpAMYDUACgBMAFlhaArAEppjCaw7cAwqQgsAEsS4sANHUqEAFmxbj0IES8BACMAWj5iIU9Cf0oAXwBdF1NKdkxSLxYmfmFRZMxGJKw4rCQEEBcQFVRUOBAAOnxWADdiFgB3UJVyQnZRLPdpSxFMcQAOfCgAbkpiiqryRUi4UAjMFgA5ATBgrNrYRXY+VFcQVE9Sdpt8AE8AIQFCQnI4Q+PT9kfSABlRLlejidKpkwCw6mBROFItEQHE4kA)

[knie20]

Hi! I'd like to take a stab at this. Hope that works for you.

[pomber]

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.

[knie20]

gotcha. I'll figure out how big the change is.

[knie20]

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

[knie20]

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.

[airtonix]

no solution?