I'm attempting to enable "lintWith" for javascript files but not for HTML. With any commit between v3.12 and the commit before this one, I could switch between file types. From this commit onwards, the gutters are initially drawn incorrectly as shown in the screenshots. If you reload the file, it is then drawn correctly. This is a single instance of the editor. The tabs switch between two documents using cm.swapDoc (which works brilliantly). However these screenshots are immediately after reloading the file. The loading sequence is:
It seems that this change has altered the way the gutter widths are calculated
Here is an example which runs from the codemirror/demo directory. With CM v3.12 it works as expected but after
commit
9d92920
the first button click redraws the gutter incorrectly and you have to click the button a second time to get the desired effect.
<!doctype html>
<meta charset="utf-8">
<title>CodeMirror: Gutter Issue</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<link rel="stylesheet" href="../theme/cobalt.css">
<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>
<h1>CodeMirror: Gutter issue</h1>
<p>CM v3.12 is fine but after the commit "coverGutterNextToScrollbar" you have to set the gutter twice</p>
<textarea id="code" name="code">
function findSequence(goal) {
function find(start, history) {
if (start == goal)
return history;
else if (start > goal)
return null;
return find(start + 5, "(" + history + " + 5)") ||
find(start * 3, "(" + history + " * 3)");
return find(1, "1");
</textarea>
<button type=button onclick="setgutter()">set gutter</button>
<button type=button onclick="cleargutter()">clear gutter</button>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
theme: 'cobalt'
console.log('CodeMirror version: ' + CodeMirror.version);
function setgutter() {
editor.setOption('gutters', ['CodeMirror-lint-markers']);
function cleargutter() {
editor.setOption('gutters', []);
</script>
</body>
</html>
Looking at your other suggestions:
If option fixedGutter is set to false, the buttons in the demo work as expected
Can't make option coverGutterNextToScrollbar do anything
The problem seems to be in the left position of the CodeMirror-gutters element, for example here it is with the problem but when you click the "set gutter" button a second time, it changes to 0px:
<div class="CodeMirror-gutters" style="left: 16px;">
<div class="CodeMirror-gutter CodeMirror-lint-markers"></div>
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 28px;"></div>
