Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
LuccaHellriegel opened this issue Feb 15, 2021 · 0 comments · Fixed by #19

Comments

@LuccaHellriegel
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant