Diagnostic renderMessage() position not the same as message

v6
1

Hey,
We’ve been using Diagnostic’s renderMessage() to display tooltip with the error but found that the tooltip is displayed at the cursor position rather than being displayed relative to the Diagnostic. That’s not the case when using message so we think it might be a CM bug.

Would love to hear from you if that’s intentional or we’ve missed something on our end.

Code looks roughly like this:

const lintError = async (): Promise<readonly Diagnostic[]> => {
  const diagnostics: Diagnostic[] = []
  const queries = await getQueries()

  await Promise.all(
    queries.map(({ from }) => {
      const response = await runCode()
      if (!response.error) return

      const errorOffset = findErrorPosition(response)
      const tooltip = renderToString(<Error error={response} />)
      const elm = document.createElement('div')
      elm.innerHTML = tooltip
  
      diagnostics.push({
        from: errorOffset.from,
        to: errorOffset.to,
        severity: 'error',
        renderMessage: () => elm,
        message: '',
      })
    })
  )

  return diagnostics
}

Cheers,
Kaloyan

2

Most likely because you are using React in your rendering, which renders asynchronously, so that the tooltip logic doesn’t know the size of the tooltip content yet when it determines its position.

3

Ah, that makes sense. Thank you for taking a look :raised_hands: