Mercurial
comparison .cms/lib/codemirror/demo/tern.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: Tern 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/dialog/dialog.css"> | |
9 <link rel="stylesheet" href="../addon/hint/show-hint.css"> | |
10 <link rel="stylesheet" href="../addon/tern/tern.css"> | |
11 <script src="../lib/codemirror.js"></script> | |
12 <script src="../mode/javascript/javascript.js"></script> | |
13 <script src="../addon/dialog/dialog.js"></script> | |
14 <script src="../addon/hint/show-hint.js"></script> | |
15 <script src="../addon/tern/tern.js"></script> | |
16 <script src="https://unpkg.com/acorn/dist/acorn.js"></script> | |
17 <script src="https://unpkg.com/acorn-loose/dist/acorn-loose.js"></script> | |
18 <script src="https://unpkg.com/acorn-walk/dist/walk.js"></script> | |
19 <script src="//ternjs.net/doc/demo/polyfill.js"></script> | |
20 <script src="https://unpkg.com/tern/lib/signal.js"></script> | |
21 <script src="https://unpkg.com/tern/lib/tern.js"></script> | |
22 <script src="https://unpkg.com/tern/lib/def.js"></script> | |
23 <script src="https://unpkg.com/tern/lib/comment.js"></script> | |
24 <script src="https://unpkg.com/tern/lib/infer.js"></script> | |
25 <script src="https://unpkg.com/tern/plugin/doc_comment.js"></script> | |
26 <style> | |
27 .CodeMirror {border: 1px solid #ddd;} | |
28 </style> | |
29 <div id=nav> | |
30 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> | |
31 | |
32 <ul> | |
33 <li><a href="../index.html">Home</a> | |
34 <li><a href="../doc/manual.html">Manual</a> | |
35 <li><a href="https://github.com/codemirror/codemirror5">Code</a> | |
36 </ul> | |
37 <ul> | |
38 <li><a class=active href="#">Tern</a> | |
39 </ul> | |
40 </div> | |
41 | |
42 <article> | |
43 <h2>Tern Demo</h2> | |
44 <form><textarea id="code" name="code">// Use ctrl-space to complete something | |
45 // Put the cursor in or after an expression, press ctrl-o to | |
46 // find its type | |
47 | |
48 var foo = ["array", "of", "strings"]; | |
49 var bar = foo.slice(0, 2).join("").split("a")[0]; | |
50 | |
51 // Works for locally defined types too. | |
52 | |
53 function CTor() { this.size = 10; } | |
54 CTor.prototype.hallo = "hallo"; | |
55 | |
56 var baz = new CTor; | |
57 baz. | |
58 | |
59 // You can press ctrl-q when the cursor is on a variable name to | |
60 // rename it. Try it with CTor... | |
61 | |
62 // When the cursor is in an argument list, the arguments are | |
63 // shown below the editor. | |
64 | |
65 [1].reduce( ); | |
66 | |
67 // And a little more advanced code... | |
68 | |
69 (function(exports) { | |
70 exports.randomElt = function(arr) { | |
71 return arr[Math.floor(arr.length * Math.random())]; | |
72 }; | |
73 exports.strList = "foo".split(""); | |
74 exports.intList = exports.strList.map(function(s) { return s.charCodeAt(0); }); | |
75 })(window.myMod = {}); | |
76 | |
77 var randomStr = myMod.randomElt(myMod.strList); | |
78 var randomInt = myMod.randomElt(myMod.intList); | |
79 </textarea></form> | |
80 | |
81 <p>Demonstrates integration of <a href="http://ternjs.net/">Tern</a> | |
82 and CodeMirror. The following keys are bound:</p> | |
83 | |
84 <dl> | |
85 <dt>Ctrl-Space</dt><dd>Autocomplete</dd> | |
86 <dt>Ctrl-O</dt><dd>Find docs for the expression at the cursor</dd> | |
87 <dt>Ctrl-I</dt><dd>Find type at cursor</dd> | |
88 <dt>Alt-.</dt><dd>Jump to definition (Alt-, to jump back)</dd> | |
89 <dt>Ctrl-Q</dt><dd>Rename variable</dd> | |
90 <dt>Ctrl-.</dt><dd>Select all occurrences of a variable</dd> | |
91 </dl> | |
92 | |
93 <p>Documentation is sparse for now. See the top of | |
94 the <a href="../addon/tern/tern.js">script</a> for a rough API | |
95 overview.</p> | |
96 | |
97 <script> | |
98 function getURL(url, c) { | |
99 var xhr = new XMLHttpRequest(); | |
100 xhr.open("get", url, true); | |
101 xhr.send(); | |
102 xhr.onreadystatechange = function() { | |
103 if (xhr.readyState != 4) return; | |
104 if (xhr.status < 400) return c(null, xhr.responseText); | |
105 var e = new Error(xhr.responseText || "No response"); | |
106 e.status = xhr.status; | |
107 c(e); | |
108 }; | |
109 } | |
110 | |
111 var server; | |
112 getURL("https://unpkg.com/tern/defs/ecmascript.json", function(err, code) { | |
113 if (err) throw new Error("Request for ecmascript.json: " + err); | |
114 server = new CodeMirror.TernServer({defs: [JSON.parse(code)]}); | |
115 editor.setOption("extraKeys", { | |
116 "Ctrl-Space": function(cm) { server.complete(cm); }, | |
117 "Ctrl-I": function(cm) { server.showType(cm); }, | |
118 "Ctrl-O": function(cm) { server.showDocs(cm); }, | |
119 "Alt-.": function(cm) { server.jumpToDef(cm); }, | |
120 "Alt-,": function(cm) { server.jumpBack(cm); }, | |
121 "Ctrl-Q": function(cm) { server.rename(cm); }, | |
122 "Ctrl-.": function(cm) { server.selectName(cm); } | |
123 }) | |
124 editor.on("cursorActivity", function(cm) { server.updateArgHints(cm); }); | |
125 }); | |
126 | |
127 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
128 lineNumbers: true, | |
129 mode: "javascript" | |
130 }); | |
131 </script> | |
132 | |
133 </article> |