Mercurial
comparison .cms/lib/codemirror/demo/complete.html @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
1 <!doctype html> | |
2 | |
3 <title>CodeMirror: Autocomplete Demo</title> | |
4 <meta charset="utf-8"/> | |
5 <link rel=stylesheet href="../doc/docs.css"> | |
6 | |
7 <link rel="stylesheet" href="../lib/codemirror.css"> | |
8 <link rel="stylesheet" href="../addon/hint/show-hint.css"> | |
9 <script src="../lib/codemirror.js"></script> | |
10 <script src="../addon/hint/show-hint.js"></script> | |
11 <script src="../addon/hint/javascript-hint.js"></script> | |
12 <script src="../mode/javascript/javascript.js"></script> | |
13 <script src="../mode/markdown/markdown.js"></script> | |
14 | |
15 <div id=nav> | |
16 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> | |
17 | |
18 <ul> | |
19 <li><a href="../index.html">Home</a> | |
20 <li><a href="../doc/manual.html">Manual</a> | |
21 <li><a href="https://github.com/codemirror/codemirror5">Code</a> | |
22 </ul> | |
23 <ul> | |
24 <li><a class=active href="#">Autocomplete</a> | |
25 </ul> | |
26 </div> | |
27 | |
28 <article> | |
29 <h2>Autocomplete Demo</h2> | |
30 <form><textarea id="code" name="code"> | |
31 function getCompletions(token, context) { | |
32 var found = [], start = token.string; | |
33 function maybeAdd(str) { | |
34 if (str.indexOf(start) == 0) found.push(str); | |
35 } | |
36 function gatherCompletions(obj) { | |
37 if (typeof obj == "string") forEach(stringProps, maybeAdd); | |
38 else if (obj instanceof Array) forEach(arrayProps, maybeAdd); | |
39 else if (obj instanceof Function) forEach(funcProps, maybeAdd); | |
40 for (var name in obj) maybeAdd(name); | |
41 } | |
42 | |
43 if (context) { | |
44 // If this is a property, see if it belongs to some object we can | |
45 // find in the current environment. | |
46 var obj = context.pop(), base; | |
47 if (obj.className == "js-variable") | |
48 base = window[obj.string]; | |
49 else if (obj.className == "js-string") | |
50 base = ""; | |
51 else if (obj.className == "js-atom") | |
52 base = 1; | |
53 while (base != null && context.length) | |
54 base = base[context.pop().string]; | |
55 if (base != null) gatherCompletions(base); | |
56 } | |
57 else { | |
58 // If not, just look in the window object and any local scope | |
59 // (reading into JS mode internals to get at the local variables) | |
60 for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name); | |
61 gatherCompletions(window); | |
62 forEach(keywords, maybeAdd); | |
63 } | |
64 return found; | |
65 } | |
66 </textarea></form> | |
67 | |
68 <p>Press <strong>ctrl-space</strong> to activate autocompletion. Built | |
69 on top of the <a href="../doc/manual.html#addon_show-hint"><code>show-hint</code></a> | |
70 and <a href="../doc/manual.html#addon_javascript-hint"><code>javascript-hint</code></a> | |
71 addons.</p> | |
72 | |
73 <form><textarea style="display: none" id="synonyms" name="synonyms"> | |
74 Here, the completion use an asynchronous hinting function to provide | |
75 synonyms for each words. If your browser support `Promises`, the | |
76 hinting function can also return one. | |
77 </textarea></form> | |
78 | |
79 <script> | |
80 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
81 lineNumbers: true, | |
82 extraKeys: {"Ctrl-Space": "autocomplete"}, | |
83 mode: {name: "javascript", globalVars: true} | |
84 }); | |
85 | |
86 if (typeof Promise !== "undefined") { | |
87 var comp = [ | |
88 ["here", "hither"], | |
89 ["asynchronous", "nonsynchronous"], | |
90 ["completion", "achievement", "conclusion", "culmination", "expirations"], | |
91 ["hinting", "advise", "broach", "imply"], | |
92 ["function","action"], | |
93 ["provide", "add", "bring", "give"], | |
94 ["synonyms", "equivalents"], | |
95 ["words", "token"], | |
96 ["each", "every"], | |
97 ] | |
98 | |
99 function synonyms(cm, option) { | |
100 return new Promise(function(accept) { | |
101 setTimeout(function() { | |
102 var cursor = cm.getCursor(), line = cm.getLine(cursor.line) | |
103 var start = cursor.ch, end = cursor.ch | |
104 while (start && /\w/.test(line.charAt(start - 1))) --start | |
105 while (end < line.length && /\w/.test(line.charAt(end))) ++end | |
106 var word = line.slice(start, end).toLowerCase() | |
107 for (var i = 0; i < comp.length; i++) if (comp[i].indexOf(word) != -1) | |
108 return accept({list: comp[i], | |
109 from: CodeMirror.Pos(cursor.line, start), | |
110 to: CodeMirror.Pos(cursor.line, end)}) | |
111 return accept(null) | |
112 }, 100) | |
113 }) | |
114 } | |
115 | |
116 var editor2 = CodeMirror.fromTextArea(document.getElementById("synonyms"), { | |
117 extraKeys: {"Ctrl-Space": "autocomplete"}, | |
118 lineNumbers: true, | |
119 lineWrapping: true, | |
120 mode: "text/x-markdown", | |
121 hintOptions: {hint: synonyms} | |
122 }) | |
123 } | |
124 </script> | |
125 | |
126 </article> |