Codemirror: Line numbers appear outside gutter

Created on 30 Nov 2016 · 5Comments · Source: codemirror/CodeMirror

Setting a gutter, and then quickly hiding CodeMirror will cause it to incorrectly measure itself and display the gutter improperly.

gutterbad

HTML file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CodeMirror: Gutter Issue</title>
    <link rel="stylesheet" href="../lib/codemirror.css">
    <script src="../lib/codemirror.js"></script>
    <script src="../mode/javascript/javascript.js"></script>
    <link rel="stylesheet" href="../addon/lint/lint.css">
    <link rel="stylesheet" href="../doc/docs.css">

    <style type="text/css">
      .CodeMirror {border: 1px solid black; font-size:13px}
    </style>
</head>
<body>
    <h1>CodeMirror: Gutter issue</h1>
    <p>Clicking "set gutter" causes line numbers to be misplaced.</p>
    <div id="container">
        <textarea id="code" name="code">
function findSequence(goal) {
  function find(start, history) {
    if (start == goal)
      return history;
    else if (start > goal)
      return null;
    else
      return find(start + 5, "(" + history + " + 5)") ||
             find(start * 3, "(" + history + " * 3)");
  }
  return find(1, "1");
}
        </textarea>
    </div>
    <p>
        <button type=button onclick="setgutter()">set gutter</button>
        <button type=button onclick="cleargutter()">clear gutter</button>
    </p>
<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true
    });

    console.log('CodeMirror version: ' + CodeMirror.version);

    function setgutter() {
        editor.setOption('gutters', ['CodeMirror-lint-markers']);
        document.getElementById("container").style.display = "none";
        setTimeout(()=>{
            document.getElementById("container").style.display = "block";
        }, 100)
    }
    function cleargutter() {
        editor.setOption('gutters', []);
    }
</script>
</body>
</html>

This appears to be related to issue #1498, with the fix being to wrap alignHorizontally in a setTimeout. This makes working with CodeMirror very hard, because it forces me to leave CodeMirror onscreen longer than I might like, or to perform an expensive refresh every time I show it.

Source

JoelEinbinder

Most helpful comment

You're expected to call .refresh() after un-hiding the editor (unless you can be sure that it was in a fully coherent state before it was hidden, and its size hasn't changed).

marijnh on 30 Nov 2016

👍3

All 5 comments

You're expected to call .refresh() after un-hiding the editor (unless you can be sure that it was in a fully coherent state before it was hidden, and its size hasn't changed).

marijnh on 30 Nov 2016

👍3

The size doesn't change, but I have no way of knowing when alignHorizontally gets called so a race condition forms.

JoelEinbinder on 30 Nov 2016

Ah, I see what you mean. Yeah, that _is_ awkward.

marijnh on 30 Nov 2016

I looked into fixing this, but I am having trouble understanding why alignHorizontally needs to be called in setTimeout. I can't reproduce the original bug.

JoelEinbinder on 13 Dec 2016

Indeed, I also can't reproduce #1498 anymore with the current code. A bunch of things changed in the updating code in the meantime, so I assume the timeout really isn't necessary anymore. Removed it in attached patch.

marijnh on 15 Dec 2016

Was this page helpful?

0 / 5 - 0 ratings