aidam38/roamsr

Code is not properly displayed after clicking "Show Answer" because CodeMirror doesnt work with "display:none"

Closed this issue · 0 comments

TL;DR: if possible switch the hiding method from "display:none" to "visibility: hidden", because otherwise code-blocks are rendered wrong

Hi!

First of all, thanks for your plugin. I really want to use it, but I stumbled upon a bug with displaying an answer that includes code.

image

I did a little digging in your code-base and I found the problem.
In "roamsr.showAnswerAndCloze" you use "display:none" to hide the answer-block.
This is not possible with a code-block because CodeMirror (the editor that Roam uses) does need the elements width, height etc. to properly display the editor.

See: codemirror/codemirror5#61

There is two solutions to this problem:

  1. Roam extends their API so you can refresh the CodeMirror instance (unlikely and 2. is easier)
  2. Switch hiding-method from "display:none" to "visibility:hidden" (works if I switch the css live with code-blocks and with text-blocks)

All the best,
Lucca