Skip to content

Commit 305c25a

Browse files
austinvhuangaustinvhuang
committed
simplify fasthtml code editor
1 parent 88d7059 commit 305c25a

File tree

5 files changed

+176
-198
lines changed

5 files changed

+176
-198
lines changed

‎experimental/fasthtml/components/code_editor.js‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
2+
let editor;
3+
let completionTippy;
4+
let currentCompletion = '';
5+
6+
function updateEditor(delta) {
7+
if (delta.action === 'insert' && (delta.lines[0] === '.' || delta.lines[0] === ' ')) {
8+
showCompletionSuggestion();
9+
}
10+
11+
// Recover from errors TODO(avh): only do this if there's an error
12+
createModule().then((Module) => {
13+
// Keep your existing Module setup
14+
Module.print = window.customPrint;
15+
Module.printErr = window.customPrint;
16+
window.Module = Module;
17+
console.log("updateEditor() - Module ready");
18+
});
19+
20+
if (window.Module && window.Module.executeKernel) {
21+
console.log("Executing kernel");
22+
window.terminal.clear();
23+
window.Module.executeKernel(editor.getValue());
24+
} else {
25+
console.log("updateEditor() - Module not ready");
26+
}
27+
}
28+
29+
function initEditor(initial_content) {
30+
editor = ace.edit("editor");
31+
editor.setTheme("ace/theme/monokai");
32+
editor.session.setMode("ace/mode/javascript");
33+
editor.setOptions({
34+
fontSize: "14px",
35+
showPrintMargin: false,
36+
// disable showing errors in gutter, Ace's WGSL parser is out of date
37+
showGutter: false,
38+
highlightActiveLine: true,
39+
wrap: true,
40+
});
41+
editor.setKeyboardHandler("ace/keyboard/vim");
42+
editor.setValue(initial_content);
43+
window.addEventListener('resize', function() {
44+
editor.resize();
45+
});
46+
// document.getElementById('language').addEventListener('change', function(e) {
47+
// let mode = "ace/mode/" + e.target.value;
48+
// editor.session.setMode(mode);
49+
// });
50+
51+
editor.session.on('change', updateEditor);
52+
53+
completionTippy = tippy(document.getElementById('editor'), {
54+
content: 'Loading...',
55+
trigger: 'manual',
56+
placement: 'top-start',
57+
arrow: true,
58+
interactive: true
59+
});
60+
61+
// Override the default tab behavior
62+
editor.commands.addCommand({
63+
name: 'insertCompletion',
64+
bindKey: {win: 'Tab', mac: 'Tab'},
65+
exec: function(editor) {
66+
if (currentCompletion) {
67+
editor.insert(currentCompletion);
68+
currentCompletion = '';
69+
completionTippy.hide();
70+
} else {
71+
editor.indent();
72+
}
73+
}
74+
});
75+
}
76+
77+
async function showCompletionSuggestion() {
78+
const cursorPosition = editor.getCursorPosition();
79+
const screenPosition = editor.renderer.textToScreenCoordinates(cursorPosition.row, cursorPosition.column);
80+
81+
completionTippy.setContent('Loading...');
82+
completionTippy.setProps({
83+
getReferenceClientRect: () => ({
84+
width: 0,
85+
height: 0,
86+
top: screenPosition.pageY,
87+
bottom: screenPosition.pageY,
88+
left: screenPosition.pageX,
89+
right: screenPosition.pageX,
90+
})
91+
});
92+
completionTippy.show();
93+
94+
try {
95+
const response = await fetch('/complete', {
96+
method: 'POST',
97+
headers: {
98+
'Content-Type': 'application/json',
99+
},
100+
body: JSON.stringify({
101+
code: editor.getValue(),
102+
row: cursorPosition.row,
103+
column: cursorPosition.column
104+
}),
105+
});
106+
107+
if (!response.ok) {
108+
throw new Error(`HTTP error! status: ${response.status}`);
109+
}
110+
111+
const data = await response.json();
112+
currentCompletion = data.completion;
113+
completionTippy.setContent(`${currentCompletion} (Press Tab to insert)`);
114+
} catch (error) {
115+
console.error('Error:', error);
116+
completionTippy.setContent('Error fetching completion');
117+
currentCompletion = '';
118+
}
119+
120+
setTimeout(() => {
121+
if (currentCompletion) {
122+
completionTippy.hide();
123+
currentCompletion = '';
124+
}
125+
}, 5000);
126+
}

‎experimental/fasthtml/components/code_editor.py‎

Lines changed: 20 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,33 @@
11
# Adapted from: https://github.com/AnswerDotAI/fasthtml-example/tree/baa67c5b2ca4d4a9ba091b9f9b72b8a2de384a37/code_editor
22

33
from fasthtml.common import *
4-
from .toolbar import Toolbar
54
import json
65

7-
def editor_script(initial_content: str) -> Script:
8-
return Script("""
9-
let editor;
10-
let completionTippy;
11-
let currentCompletion = '';
12-
13-
function initEditor() {
14-
editor = ace.edit("editor");
15-
editor.setTheme("ace/theme/monokai");
16-
editor.session.setMode("ace/mode/javascript");
17-
editor.setOptions({
18-
fontSize: "14px",
19-
showPrintMargin: false,
20-
// disable showing errors in gutter, Ace's WGSL parser is out of date
21-
showGutter: false,
22-
highlightActiveLine: true,
23-
wrap: true,
24-
});
25-
editor.setKeyboardHandler("ace/keyboard/vim");
26-
27-
editor.setValue(""" + json.dumps(initial_content) + ");" +
28-
"""
29-
window.addEventListener('resize', function() {
30-
editor.resize();
31-
});
32-
document.getElementById('language').addEventListener('change', function(e) {
33-
let mode = "ace/mode/" + e.target.value;
34-
editor.session.setMode(mode);
35-
});
36-
37-
editor.session.on('change', function(delta) {
38-
if (delta.action === 'insert' && (delta.lines[0] === '.' || delta.lines[0] === ' ')) {
39-
showCompletionSuggestion();
40-
}
41-
42-
// Recover from errors TODO(avh): only do this if there's an error
43-
createModule().then((Module) => {
44-
// Keep your existing Module setup
45-
Module.print = window.customPrint;
46-
Module.printErr = window.customPrint;
47-
window.Module = Module;
48-
console.log("Module ready");
49-
});
50-
51-
if (window.Module && window.Module.executeKernel) {
52-
console.log("Executing kernel");
53-
window.terminal.clear();
54-
window.Module.executeKernel(editor.getValue());
55-
} else {
56-
console.log("Module not ready");
57-
}
58-
59-
});
60-
61-
completionTippy = tippy(document.getElementById('editor'), {
62-
content: 'Loading...',
63-
trigger: 'manual',
64-
placement: 'top-start',
65-
arrow: true,
66-
interactive: true
67-
});
68-
69-
// Override the default tab behavior
70-
editor.commands.addCommand({
71-
name: 'insertCompletion',
72-
bindKey: {win: 'Tab', mac: 'Tab'},
73-
exec: function(editor) {
74-
if (currentCompletion) {
75-
editor.insert(currentCompletion);
76-
currentCompletion = '';
77-
completionTippy.hide();
78-
} else {
79-
editor.indent();
80-
}
81-
}
82-
});
83-
}
84-
85-
async function showCompletionSuggestion() {
86-
const cursorPosition = editor.getCursorPosition();
87-
const screenPosition = editor.renderer.textToScreenCoordinates(cursorPosition.row, cursorPosition.column);
88-
89-
completionTippy.setContent('Loading...');
90-
completionTippy.setProps({
91-
getReferenceClientRect: () => ({
92-
width: 0,
93-
height: 0,
94-
top: screenPosition.pageY,
95-
bottom: screenPosition.pageY,
96-
left: screenPosition.pageX,
97-
right: screenPosition.pageX,
98-
})
99-
});
100-
completionTippy.show();
101-
102-
try {
103-
const response = await fetch('/complete', {
104-
method: 'POST',
105-
headers: {
106-
'Content-Type': 'application/json',
107-
},
108-
body: JSON.stringify({
109-
code: editor.getValue(),
110-
row: cursorPosition.row,
111-
column: cursorPosition.column
112-
}),
113-
});
114-
115-
if (!response.ok) {
116-
throw new Error(`HTTP error! status: ${response.status}`);
117-
}
118-
119-
const data = await response.json();
120-
currentCompletion = data.completion;
121-
completionTippy.setContent(`${currentCompletion} (Press Tab to insert)`);
122-
} catch (error) {
123-
console.error('Error:', error);
124-
completionTippy.setContent('Error fetching completion');
125-
currentCompletion = '';
126-
}
6+
def Toolbar():
7+
return Div(
8+
Select(
9+
Option("WGSL", value="wgsl"),
10+
Option("C++", value="c++"),
11+
id="language",
12+
cls="mr-2 p-2 border rounded"
13+
),
14+
cls="bg-gray-200 p-4 shadow-md flex items-center w-full"
15+
)
12716

128-
setTimeout(() => {
129-
if (currentCompletion) {
130-
completionTippy.hide();
131-
currentCompletion = '';
132-
}
133-
}, 5000);
134-
}
17+
def editor_script(initial_content: str) -> str:
18+
with open("components/code_editor.js", 'r') as file:
19+
file_content = file.read()
20+
initial_content = json.dumps(initial_content)
21+
return(f"""{file_content}
22+
document.addEventListener('DOMContentLoaded', () => {{
23+
initEditor({initial_content});
24+
updateEditor("");
25+
}});""")
13526

136-
document.addEventListener('DOMContentLoaded', initEditor);
137-
""")
13827

13928
def CodeEditor(initial_content: str):
14029
return (
14130
Div(
142-
Toolbar(),
14331
Div(
14432
Div(id="editor", style="height: 90vh; width: 100vw;"),
14533
Script("""
@@ -154,5 +42,5 @@ def CodeEditor(initial_content: str):
15442
# cls="flex flex-col h-screen w-full", style="height: 100vh; overflow: hidden;"
15543
style="height: 100vh; overflow: hidden;"
15644
),
157-
editor_script(initial_content)
45+
Script(editor_script(initial_content))
15846
)

‎experimental/fasthtml/components/toolbar.py‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎experimental/fasthtml/run.cpp‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,7 @@ void executeKernel(const char *kernelCode) {
5454
inputArr[i], outputArr[i]);
5555
js_print(buffer);
5656
}
57-
snprintf(buffer, sizeof(buffer), " ...");
58-
js_print(buffer);
57+
js_print(" ...");
5958
for (int i = N - 10; i < N; ++i) {
6059
snprintf(buffer, sizeof(buffer), " [%d] kernel(%.1f) = %.4f", i,
6160
inputArr[i], outputArr[i]);

0 commit comments

Comments
 (0)