Spaces:
Sleeping
Sleeping
little bit of normalization
Browse files- src/components/Editor.js +27 -5
src/components/Editor.js
CHANGED
|
@@ -20,6 +20,13 @@ function draw() {
|
|
| 20 |
ellipse(mouseX, mouseY, 50, 50);
|
| 21 |
}`;
|
| 22 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 23 |
const getIframeContent = (userCode) => `
|
| 24 |
<!DOCTYPE html>
|
| 25 |
<html>
|
|
@@ -78,6 +85,7 @@ const getIframeContent = (userCode) => `
|
|
| 78 |
|
| 79 |
export default function Editor() {
|
| 80 |
const [code, setCode] = useState(INITIAL_CODE);
|
|
|
|
| 81 |
const [prompt, setPrompt] = useState("");
|
| 82 |
const iframeRef = useRef(null);
|
| 83 |
const [selectedModel, setSelectedModel] = useState("gemini-2.0-flash");
|
|
@@ -115,11 +123,15 @@ export default function Editor() {
|
|
| 115 |
}, [code]);
|
| 116 |
|
| 117 |
const updatePreview = useCallback(() => {
|
| 118 |
-
|
| 119 |
-
|
| 120 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 121 |
}
|
| 122 |
-
}, [code]);
|
| 123 |
|
| 124 |
// Now generateCode can safely use the functions defined above
|
| 125 |
const generateCode = useCallback(async () => {
|
|
@@ -174,6 +186,13 @@ export default function Editor() {
|
|
| 174 |
}
|
| 175 |
}, [code, updatePreview, autoSave, handleScreenshot, handleSaveCode]);
|
| 176 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 177 |
// Update the message handler to be more specific
|
| 178 |
useEffect(() => {
|
| 179 |
const handleMessage = (event) => {
|
|
@@ -205,7 +224,10 @@ export default function Editor() {
|
|
| 205 |
height="100vh"
|
| 206 |
theme={vscodeDark}
|
| 207 |
extensions={[javascript()]}
|
| 208 |
-
onChange={(value) =>
|
|
|
|
|
|
|
|
|
|
| 209 |
/>
|
| 210 |
</div>
|
| 211 |
<div id="canvas-column" className="w-1/2 bg-white">
|
|
|
|
| 20 |
ellipse(mouseX, mouseY, 50, 50);
|
| 21 |
}`;
|
| 22 |
|
| 23 |
+
const normalizeCode = (code) => {
|
| 24 |
+
// Remove all comments (both single line and multi-line)
|
| 25 |
+
const noComments = code.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, '');
|
| 26 |
+
// Remove all non-syntactic whitespace and newlines
|
| 27 |
+
return noComments.replace(/\s+/g, ' ').trim();
|
| 28 |
+
};
|
| 29 |
+
|
| 30 |
const getIframeContent = (userCode) => `
|
| 31 |
<!DOCTYPE html>
|
| 32 |
<html>
|
|
|
|
| 85 |
|
| 86 |
export default function Editor() {
|
| 87 |
const [code, setCode] = useState(INITIAL_CODE);
|
| 88 |
+
const [normalizedCode, setNormalizedCode] = useState(normalizeCode(INITIAL_CODE));
|
| 89 |
const [prompt, setPrompt] = useState("");
|
| 90 |
const iframeRef = useRef(null);
|
| 91 |
const [selectedModel, setSelectedModel] = useState("gemini-2.0-flash");
|
|
|
|
| 123 |
}, [code]);
|
| 124 |
|
| 125 |
const updatePreview = useCallback(() => {
|
| 126 |
+
const newNormalizedCode = normalizeCode(code);
|
| 127 |
+
if (newNormalizedCode !== normalizedCode) {
|
| 128 |
+
setNormalizedCode(newNormalizedCode);
|
| 129 |
+
if (iframeRef.current) {
|
| 130 |
+
const iframe = iframeRef.current;
|
| 131 |
+
iframe.srcdoc = getIframeContent(code);
|
| 132 |
+
}
|
| 133 |
}
|
| 134 |
+
}, [code, normalizedCode]);
|
| 135 |
|
| 136 |
// Now generateCode can safely use the functions defined above
|
| 137 |
const generateCode = useCallback(async () => {
|
|
|
|
| 186 |
}
|
| 187 |
}, [code, updatePreview, autoSave, handleScreenshot, handleSaveCode]);
|
| 188 |
|
| 189 |
+
// Initial load effect
|
| 190 |
+
useEffect(() => {
|
| 191 |
+
if (iframeRef.current) {
|
| 192 |
+
iframeRef.current.srcdoc = getIframeContent(code);
|
| 193 |
+
}
|
| 194 |
+
}, []);
|
| 195 |
+
|
| 196 |
// Update the message handler to be more specific
|
| 197 |
useEffect(() => {
|
| 198 |
const handleMessage = (event) => {
|
|
|
|
| 224 |
height="100vh"
|
| 225 |
theme={vscodeDark}
|
| 226 |
extensions={[javascript()]}
|
| 227 |
+
onChange={(value) => {
|
| 228 |
+
setCode(value);
|
| 229 |
+
updatePreview();
|
| 230 |
+
}}
|
| 231 |
/>
|
| 232 |
</div>
|
| 233 |
<div id="canvas-column" className="w-1/2 bg-white">
|