codemirror5/demo/widget.html at master · codemirror/codemirror5 · GitHub

Name: codemirror5/demo/widget.html at master · codemirror/codemirror5 · GitHub
Rating: 4.4 (7192 reviews)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>

<title>CodeMirror: Inline Widget Demo</title>
<metacharset="utf-8"/>
<linkrel=stylesheethref="../doc/docs.css">

<linkrel="stylesheet" href="../lib/codemirror.css">
<scriptsrc="../lib/codemirror.js"></script>
<scriptsrc="../mode/javascript/javascript.js"></script>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jshint/2.9.5/jshint.min.js"></script>
<style>
 .CodeMirror {border:1px solid black;}
 .lint-error {font-family: arial; font-size:70%; background:#ffa; color:#a00; padding:2px5px3px; }
 .lint-error-icon {color: white; background-color: red; font-weight: bold; border-radius:50%; padding:03px; margin-right:7px;}
</style>
<divid=nav>
<ahref="https://codemirror.net/5"><h1>CodeMirror</h1><imgid=logosrc="../doc/logo.png"></a>

<ul>
<li><ahref="../index.html">Home</a>
<li><ahref="../doc/manual.html">Manual</a>
<li><ahref="https://github.com/codemirror/codemirror5">Code</a>
</ul>
<ul>
<li><aclass=activehref="#">Inline Widget</a>
</ul>
</div>

<article>
<h2>Inline Widget Demo</h2>


<divid=code></div>
<scriptid="script">varwidgets=[]
functionupdateHints(){
editor.operation(function(){
for(vari=0;i<widgets.length;++i)
editor.removeLineWidget(widgets[i]);
widgets.length=0;

JSHINT(editor.getValue());
for(vari=0;i<JSHINT.errors.length;++i){
varerr=JSHINT.errors[i];
if(!err)continue;
varmsg=document.createElement("div");
varicon=msg.appendChild(document.createElement("span"));
icon.innerHTML="!!";
icon.className="lint-error-icon";
msg.appendChild(document.createTextNode(err.reason));
msg.className="lint-error";
widgets.push(editor.addLineWidget(err.line-1,msg,{coverGutter: false,noHScroll: true}));
}
});
varinfo=editor.getScrollInfo();
varafter=editor.charCoords({line: editor.getCursor().line+1,ch: 0},"local").top;
if(info.top+info.clientHeight<after)
editor.scrollTo(null,after-info.clientHeight+3);
}

window.onload=function(){
varsc=document.getElementById("script");
varcontent=sc.textContent||sc.innerText||sc.innerHTML;

window.editor=CodeMirror(document.getElementById("code"),{
lineNumbers: true,
mode: "javascript",
value: content
});

varwaiting;
editor.on("change",function(){
clearTimeout(waiting);
waiting=setTimeout(updateHints,500);
});

setTimeout(updateHints,100);
};

"long line to create a horizontal scrollbar, in order to test whether the (non-inline) widgets stay in place when scrolling to the right";
</script>
<p>This demo runs <ahref="http://jshint.com">JSHint</a> over the code
in the editor (which is the script used on this page), and
inserts <ahref="../doc/manual.html#addLineWidget">line widgets</a> to
display the warnings that JSHint comes up with.</p>
</article>