Skip to content

Commit 347c5ea

Browse files
jcreedcmujcreedcmu
committed
Add ace editor component
1 parent e59fb9b commit 347c5ea

File tree

7 files changed

+82
-28
lines changed

7 files changed

+82
-28
lines changed

‎assets/bundle.js

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/bundle.js.map

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/vendor/ace.js

Lines changed: 23 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/style.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,16 @@ pre {
6969
height: 1.5rem;
7070
}
7171

72+
#primary-view {
73+
position: absolute;
74+
top: 0;
75+
left: 1.5rem;
76+
right: 0;
77+
bottom: 0;
78+
}
79+
7280
#primary-view-wrap {
81+
position: relative;
7382
height: calc(var(--size) + 2px);
7483
}
7584

‎index.html

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,36 @@
1212
<title>Twelf Sandbox</title>
1313

1414
<link rel="stylesheet" href="css/style.css">
15-
<body>
16-
<div id="app">
17-
<h1>Twelf Sandbox</h1>
18-
<div class="wrap" id="primary-view-wrap">
19-
<textarea id="primary-view" spellcheck="false"></textarea>
20-
</div>
21-
<div class="control">
22-
<button id="check-button">Check</button>
23-
<button id="share-button">Share</button>
24-
<span id="loading-indicator"><span class="loader"></span><em>Loading Twelf Wasm...</em></span>
25-
<div class="spacer"></div>
26-
<div id="server-status" class="server-status server-status-ok">Server OK</div>
27-
</div>
28-
<div class="wrap" id="twelf-response-wrap">
29-
<textarea readonly id="twelf-response" spellcheck="false"></textarea>
30-
</div>
15+
</head>
16+
<body>
17+
<div id="app">
18+
<h1>Twelf Sandbox</h1>
19+
20+
<div class="wrap" id="primary-view-wrap">
21+
<div id="primary-view"></div>
22+
</div>
23+
<div class="control">
24+
<button id="check-button">Check</button>
25+
<button id="share-button">Share</button>
26+
<span id="loading-indicator"><span class="loader"></span><em>Loading Twelf Wasm...</em></span>
27+
<div class="spacer"></div>
28+
<div id="server-status" class="server-status server-status-ok">Server OK</div>
3129
</div>
32-
<div style="margin-left: 3em; margin-top: 3em; font-size: 0.8rem;">
33-
<a href="http://twelf.org/wiki/Main_Page">Twelf</a> on Wasm is made possible by <a href="https://twelf-live.onrender.com/">Twelf Live</a> and
34-
<a href="https://github.com/MLton/mlton/pull/550">this MLton PR</a>, which adds a cross-compilation target for Wasm/WASI. <a href="https://github.com/jcreedcmu/twelf-wasm/">Source to this repo</a>. As a shortcut, <tt>Ctrl-Enter</tt> also checks file.
30+
<div class="wrap" id="twelf-response-wrap">
31+
<textarea readonly id="twelf-response" spellcheck="false"></textarea>
3532
</div>
36-
<div id="copy-indicator" class="copy-notification-disabled"><b>Copied URL to clipboard</b></div>
37-
</body>
38-
<script src="assets/bundle.js"></script>
33+
</div>
34+
<div style="margin-left: 3em; margin-top: 3em; font-size: 0.8rem;">
35+
<a href="http://twelf.org/wiki/Main_Page">Twelf</a> on Wasm is made possible by <a href="https://twelf-live.onrender.com/">Twelf Live</a> and
36+
<a href="https://github.com/MLton/mlton/pull/550">this MLton PR</a>, which adds a cross-compilation target for Wasm/WASI. <a href="https://github.com/jcreedcmu/twelf-wasm/">Source to this repo</a>. As a shortcut, <tt>Ctrl-Enter</tt> also checks file.
37+
</div>
38+
<div id="copy-indicator" class="copy-notification-disabled"><b>Copied URL to clipboard</b></div>
39+
</body>
40+
<script src="assets/vendor/ace.js"></script>
41+
<script>
42+
const editor = ace.edit("primary-view");
43+
editor.renderer.setOption("showPrintMargin", false);
44+
</script>
45+
<script src="assets/bundle.js"></script>
46+
3947
</html>

‎src/ace.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
type AceRenderer = {
2+
setOption(option: any, value: any): void;
3+
};
4+
5+
type AceEditor = {
6+
getValue(): string;
7+
setValue(text: string, index?: number): void;
8+
renderer: AceRenderer;
9+
focus(): void;
10+
};
11+
12+
declare const editor: AceEditor;

‎src/index.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,11 +146,11 @@ async function init() {
146146
document.getElementById('loading-indicator')!.classList.add('hidden');
147147

148148
function getText(): string {
149-
return (document.getElementById('primary-view') as HTMLTextAreaElement).value;
149+
return editor.getValue();
150150
}
151151

152152
function setText(text: string): void {
153-
(document.getElementById('primary-view') as HTMLTextAreaElement).value = text;
153+
editor.setValue(text, 1);
154154
}
155155

156156
const checkButton = document.getElementById('check-button') as HTMLButtonElement;
@@ -170,6 +170,7 @@ async function init() {
170170
onclick();
171171
}
172172
});
173+
editor.focus();
173174
}
174175

175176
init();

0 commit comments

Comments
 (0)