JosLe/logic-gates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace verify textarea with Open IDE button + fix gutter line numbers

Browse Source 
- Hide the inline verify textarea, show a clean "Open IDE" button instead
- Add white-space:pre to gutter div so line numbers render one per line
- Match gutter font-family with textarea for consistent alignment

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jose Luis
2026-03-20 18:08:21 +01:00
parent 06807801d0
commit 9d218c8728
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
editor.html
View File

@@ -126,10 +126,10 @@ body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', syste
#code-editor-gutter { #code-editor-gutter {
width: 48px; padding: 12px 8px 12px 0; width: 48px; padding: 12px 8px 12px 0;
background: #181825; text-align: right; background: #181825; text-align: right;
font-family: 'Cascadia Code', 'Fira Code', monospace; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
font-size: 13px; line-height: 1.6; font-size: 13px; line-height: 1.6;
color: #555; user-select: none; overflow: hidden; color: #555; user-select: none; overflow: hidden;
flex-shrink: 0; flex-shrink: 0; white-space: pre;
} }
/* Main textarea */ /* Main textarea */
@@ -992,9 +992,10 @@ function updateProps() {
const portsStr = (ent.ports || []).map(p => `${p.name}:${p.dir}`).join(', '); const portsStr = (ent.ports || []).map(p => `${p.name}:${p.dir}`).join(', ');
html += propText('Ports', 'ports', portsStr); html += propText('Ports', 'ports', portsStr);
html += `<div class="prop-row" style="font-size:10px;color:#888;">Format: A:out, B:out, C:in</div>`; html += `<div class="prop-row" style="font-size:10px;color:#888;">Format: A:out, B:out, C:in</div>`;
// Verify code editor with expand button // Verify code — hidden textarea + "Open IDE" button
const verifyCode = ent.verify || `(test) => {\n return test({A:0, B:0}).C === 0\n && test({A:1, B:1}).C === 1;\n}`; const verifyCode = ent.verify || `(test) => {\n return test({A:0, B:0}).C === 0\n && test({A:1, B:1}).C === 1;\n}`;
html += `<div class="prop-row" style="align-items:flex-start;"><label>Verify (JS)</label><textarea id="verify-textarea" data-prop="verify" style="font-family:monospace;font-size:11px;min-height:80px;white-space:pre;">${esc(verifyCode)}</textarea><button class="btn-expand-code" id="btn-expand-verify" title="Open fullscreen editor (Ctrl+E)">⛶</button></div>`; html += `<textarea id="verify-textarea" data-prop="verify" style="display:none;">${esc(verifyCode)}</textarea>`;
html += `<div class="prop-row"><label>Verify (JS)</label><button class="btn-expand-code" id="btn-expand-verify" style="flex:1;padding:6px 12px;font-size:12px;">⚡ Open IDE</button></div>`;
} }
} }