-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (98 loc) · 3.07 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Structed</title>
<link rel="stylesheet" href="/public/codemirror.css" />
<link rel="stylesheet" href="/public/theme.css" />
<style>
body {
font-family: medium-content-sans-serif-font, -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
text-rendering: optimizeLegibility;
color: rgba(0, 0, 0, 0.84);
font-size: 13px;
line-height: 1.4em;
}
.CodeMirror {
height: 100vh;
}
#hint,
.text {
margin: 0 0 16px;
}
td {
padding: 0 8px;
}
td:first-child {
text-align: right;
}
th:first-child {
text-align: right;
}
#hint div {
margin: 4px 0;
}
#hint div span {
margin: 0 0 0 8px;
font-family: monospace;
}
</style>
</head>
<body>
<div class="text">
<p><strong>explainer</strong></p>
<p>
This is an experiemnt to implement structured (
<a href="http://danmidwood.com/content/2014/11/21/animated-paredit.html"
>Paredit</a
>-like) code editing and navigation for JavaScript and other languages
where source code is represented as plain text (no explicit structure).
Source code of a program is inherently a tree of its syntax tokens, but
most programming languages represent its syntax tree as plain text.
Instead sometimes it is useful to operate on syntax nodes, instead of
characters and words.
</p>
</div>
<div class="text">
<p><strong>give it a try</strong></p>
<p>
The purpose of this demo is to gather feedback for future development
and editors integration. Please give it a try and report any issues or
suggestion to
<a href="https://github.com/roman01la/structed/issues"
>GitHub repository</a
>.
</p>
<p>
Paste some code into the editor below and try to refactor it as usual,
but also use provided editor commands where you would usually go with
manual selection or navigation (mouse, arrow keys + alt).
</p>
</div>
<div id="hint" class="text">
<p><strong>commands</strong></p>
<table>
<thead>
<th>command</th>
<th>description</th>
<th>keybinding</th>
</thead>
<tbody></tbody>
</table>
</div>
<div id="root"></div>
<script src="/public/codemirror.js"></script>
<script src="/public/javascript.js"></script>
<script src="/public/active-line.js"></script>
<script src="/public/matchbrackets.js"></script>
<script src="/public/closebrackets.js"></script>
<script src="/dist/bundle.js"></script>
<script src="/public/main.js"></script>
</body>
</html>