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

Name: codemirror5/demo/xmlcomplete.html at master · codemirror/codemirror5 · GitHub
Rating: 4.8 (5603 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>

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

<linkrel="stylesheet" href="../lib/codemirror.css">
<linkrel="stylesheet" href="../addon/hint/show-hint.css">
<scriptsrc="../lib/codemirror.js"></script>
<scriptsrc="../addon/hint/show-hint.js"></script>
<scriptsrc="../addon/hint/xml-hint.js"></script>
<scriptsrc="../mode/xml/xml.js"></script>
<style>
 .CodeMirror { border:1px solid #eee; }
</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="#">XML Autocomplete</a>
</ul>
</div>

<article>
<h2>XML Autocomplete Demo</h2>
<form><textareaid="code" name="code"><!-- write some xml below -->
</textarea></form>

<p>Press <strong>ctrl-space</strong>, or type a '&lt;' character to
 activate autocompletion. This demo defines a simple schema that
 guides completion. The schema can be customized—see
 the <ahref="../doc/manual.html#addon_xml-hint">manual</a>.</p>

<p>Development of the <code>xml-hint</code> addon was kindly
 sponsored
 by <ahref="http://www.xperiment.mobi">www.xperiment.mobi</a>.</p>

<script>
vardummy={
attrs: {
color: ["red","green","blue","purple","white","black","yellow"],
size: ["large","medium","small"],
description: null
},
children: []
};

vartags={
"!top": ["top"],
"!attrs": {
id: null,
class: ["A","B","C"]
},
top: {
attrs: {
lang: ["en","de","fr","nl"],
freeform: null
},
children: ["animal","plant"]
},
animal: {
attrs: {
name: null,
isduck: ["yes","no"]
},
children: ["wings","feet","body","head","tail"]
},
plant: {
attrs: {name: null},
children: ["leaves","stem","flowers"]
},
wings: dummy,feet: dummy,body: dummy,head: dummy,tail: dummy,
leaves: dummy,stem: dummy,flowers: dummy
};

functioncompleteAfter(cm,pred){
varcur=cm.getCursor();
if(!pred||pred())setTimeout(function(){
if(!cm.state.completionActive)
cm.showHint({completeSingle: false});
},100);
returnCodeMirror.Pass;
}

functioncompleteIfAfterLt(cm){
returncompleteAfter(cm,function(){
varcur=cm.getCursor();
returncm.getRange(CodeMirror.Pos(cur.line,cur.ch-1),cur)=="<";
});
}

functioncompleteIfInTag(cm){
returncompleteAfter(cm,function(){
vartok=cm.getTokenAt(cm.getCursor());
if(tok.type=="string"&&(!/['"]/.test(tok.string.charAt(tok.string.length-1))||tok.string.length==1))returnfalse;
varinner=CodeMirror.innerMode(cm.getMode(),tok.state).state;
returninner.tagName;
});
}

vareditor=CodeMirror.fromTextArea(document.getElementById("code"),{
mode: "xml",
lineNumbers: true,
extraKeys: {
"'<'": completeAfter,
"'/'": completeIfAfterLt,
"' '": completeIfInTag,
"'='": completeIfInTag,
"Ctrl-Space": "autocomplete"
},
hintOptions: {schemaInfo: tags}
});
</script>
</article>