CodeMirror has content but won't display until keypress

Question

I have a CodeMirror instance embedded in a webapp I'm building. It works great - except that the initial content won't display until user enters a new character. So it is all there but hidden until the user forces a change. This is bad. Is there any way I can force a repaint or refresh of the browser of simulate a character enter - whitespace will do.

Here is the code...

<textarea id='code-mirror' ><?php echo $contents; ?></textarea>
<script>
    jQuery(document).ready(function(){
        var textarea = document.getElementById('code-mirror');
        var myCodeMirror = CodeMirror.fromTextArea(textarea,    
            {  
            onUpdate:codemirrorcallback,
            });
        // myCodeMirror.refresh(); ? is this an option?
     });
</script>

This producing a working editor that saves the content and displays the saved content inside the text area but ONLY displays it after the user begins editing it. Before that it is just blank.

Any help, even just links would be highly appreciated. Thanks guys!

UPDATE

Calling .refresh on myCodeMirror is printing an error in the Chrome console of Uncaught TypeError: Cannot call method 'focus' of undefined

papercowboy · Answer 1 · 2012-10-02T22:17:03.343

9

You do indeed need to call a refresh() on your CodeMirror instance if this is happening. But due to space monkeys you'll need to wrap the refresh call in a timeout:

var editor = CodeMirror.fromTextArea( yourSourceDOM, { lineNumbers:true })
setTimeout( editor.refresh, 0 )

It's not pretty, but that solved it for me.

edited Oct 02 '12 at 22:17

answered Oct 02 '12 at 22:02

papercowboy

3,181
2
24
30

I had the same problem and this seemed to fix it. Do you have an idea of why this works? – Sarumanatee Mar 04 '14 at 14:47
The space monkeys does not allow me to use the setTimeout. Removing it worked for me. – Tk421 Apr 23 '14 at 08:24
1

Anytime you have to use a `setTimeout` or similar to "get it to work", it's _usually_ (don't know for sure in this case) due to someone releasing Zalgo (mixing sync vs async APIs). More about this here: http://blog.izs.me/post/59142742143/designing-apis-for-asynchrony – papercowboy Aug 16 '14 at 02:27

score 4 · Answer 2 · edited May 23 '17 at 12:01

4

Using code mirror 5.14.2, if you refresh explicitly you must take care to invoke it properly (see this question) but it is most easily handled with the codemirror supplied autorefresh add on.

edited May 23 '17 at 12:01

Community

1
1

answered May 16 '16 at 23:51

Paul Whipp

13,812
4
37
47

score 2 · Answer 3 · edited May 23 '17 at 12:24

2

If you're using CodeMirror version 2+, you can call CodeMirror.refresh(). See the documentation on refresh().

Note: This must be called on the CodeMirror instance and not the element. See https://stackoverflow.com/a/5377029/526741

edited May 23 '17 at 12:24

Community

1
1

answered Sep 11 '12 at 20:52

0b10011

17,120
3
62
80

CodeMirror has content but won't display until keypress

3 Answers3

Linked