Fix syntax coloring, modernize toolbar UI, and clean up CSS
- Fix Monarch tokenizer loading: await initLinter() before editor creation so loadScript() doesn't clobber window.define during lazy tokenizer init - Fix JSX/TSX coloring: use file URIs with proper extensions (.jsx/.tsx) so Monaco enables JSX tokenization via the TypeScript language service - Modernize toolbar: move settings to gear popover, replace text buttons with SVG icons, consolidate toggle checkboxes into compact group - Clean up CSS: remove duplicate toggle classes, dead selectors, orphaned rules
This commit is contained in:
root
@@ -21,71 +21,115 @@
|
||||
<option value="wasm">WASM</option>
|
||||
</select>
|
||||
<input type="text" id="title-input" placeholder="Untitled" spellcheck="false">
|
||||
<select id="layout-mode">
|
||||
<option value="default">Default</option>
|
||||
<option value="top-bottom">Top / Bottom</option>
|
||||
<option value="editor-only">Editor Only</option>
|
||||
<option value="preview-only">Preview Only</option>
|
||||
</select>
|
||||
<select id="keybinding-mode">
|
||||
<option value="default">Default</option>
|
||||
<option value="vim">Vim</option>
|
||||
<option value="emacs">Emacs</option>
|
||||
</select>
|
||||
<select id="editor-theme">
|
||||
<option value="vs-dark">VS Dark</option>
|
||||
<option value="vs">VS Light</option>
|
||||
<option value="hc-black">High Contrast</option>
|
||||
<option value="monokai">Monokai</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
<option value="github-dark">GitHub Dark</option>
|
||||
</select>
|
||||
<select id="editor-font" title="Editor font">
|
||||
<option value="default">Default Font</option>
|
||||
<option value="Fira Code">Fira Code</option>
|
||||
<option value="JetBrains Mono">JetBrains Mono</option>
|
||||
<option value="Source Code Pro">Source Code Pro</option>
|
||||
<option value="IBM Plex Mono">IBM Plex Mono</option>
|
||||
<option value="Cascadia Code">Cascadia Code</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<div class="tags-input-wrap">
|
||||
<input type="text" id="tags-input" placeholder="Add tags..." list="tags-datalist" spellcheck="false">
|
||||
<input type="text" id="tags-input" placeholder="Tags..." list="tags-datalist" spellcheck="false">
|
||||
<datalist id="tags-datalist"></datalist>
|
||||
<div id="tags-display" class="tags-display"></div>
|
||||
</div>
|
||||
<select id="preview-theme" title="Preview background theme">
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
<button id="btn-templates" class="btn-secondary" title="Starter templates gallery">Templates</button>
|
||||
<button id="btn-resources" class="btn-secondary" title="External CSS/JS resources">Resources</button>
|
||||
<button id="btn-shortcuts" class="btn-secondary" title="Keyboard shortcuts (?)" aria-label="Keyboard shortcuts">?</button>
|
||||
<label class="tailwind-toggle" title="Enable Tailwind CSS">
|
||||
<input type="checkbox" id="tailwind-checkbox">
|
||||
Tailwind
|
||||
</label>
|
||||
<label class="listed-toggle" title="Show in browse page">
|
||||
<input type="checkbox" id="listed-checkbox" checked>
|
||||
Listed
|
||||
</label>
|
||||
<label class="format-save-toggle" title="Auto-format code on save">
|
||||
<input type="checkbox" id="format-save-checkbox">
|
||||
Fmt
|
||||
</label>
|
||||
<label class="auto-run-toggle" title="Auto-run on change">
|
||||
<input type="checkbox" id="auto-run-checkbox" checked>
|
||||
Auto
|
||||
</label>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<div class="toolbar-toggles">
|
||||
<label class="toolbar-toggle" title="Enable Tailwind CSS">
|
||||
<input type="checkbox" id="tailwind-checkbox">
|
||||
<span>TW</span>
|
||||
</label>
|
||||
<label class="toolbar-toggle" title="Auto-run on change">
|
||||
<input type="checkbox" id="auto-run-checkbox" checked>
|
||||
<span>Auto</span>
|
||||
</label>
|
||||
<label class="toolbar-toggle" title="Auto-format on save">
|
||||
<input type="checkbox" id="format-save-checkbox">
|
||||
<span>Fmt</span>
|
||||
</label>
|
||||
<label class="toolbar-toggle" title="Show in browse page">
|
||||
<input type="checkbox" id="listed-checkbox" checked>
|
||||
<span>Listed</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button id="btn-run" title="Run (Ctrl+Enter)">Run</button>
|
||||
<button id="btn-save" title="Save (Ctrl+S)">Save</button>
|
||||
<button id="btn-fork" title="Fork">Fork</button>
|
||||
<button id="btn-history" title="Version history" class="btn-secondary">History</button>
|
||||
<button id="btn-embed" title="Embed code generator" class="btn-secondary">Embed</button>
|
||||
<button id="btn-collection" title="Add to collection" class="btn-secondary">Collection</button>
|
||||
<button id="btn-export" title="Export standalone HTML" class="btn-secondary">Export</button>
|
||||
<button id="btn-qr" title="QR code" class="btn-secondary">QR</button>
|
||||
<button id="btn-fork" class="btn-secondary" title="Fork">Fork</button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<button id="btn-templates" class="btn-icon" title="Starter templates">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
||||
</button>
|
||||
<button id="btn-resources" class="btn-icon" title="External resources">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
||||
</button>
|
||||
<button id="btn-history" class="btn-icon" title="Version history">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</button>
|
||||
<button id="btn-embed" class="btn-icon" title="Embed code">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
||||
</button>
|
||||
<button id="btn-export" class="btn-icon" title="Export HTML">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
</button>
|
||||
<button id="btn-collection" class="btn-icon" title="Collections">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
|
||||
</button>
|
||||
<button id="btn-qr" class="btn-icon" title="QR code">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="8" height="8" rx="1"/><rect x="14" y="2" width="8" height="8" rx="1"/><rect x="2" y="14" width="8" height="8" rx="1"/><rect x="14" y="14" width="4" height="4"/><line x1="22" y1="14" x2="22" y2="22"/><line x1="14" y1="22" x2="22" y2="22"/></svg>
|
||||
</button>
|
||||
<div class="toolbar-divider"></div>
|
||||
<div class="settings-popover-wrap">
|
||||
<button id="btn-settings" class="btn-icon" title="Settings">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||||
</button>
|
||||
<div id="settings-popover" class="settings-popover hidden">
|
||||
<div class="settings-group">
|
||||
<label class="settings-label">Layout</label>
|
||||
<select id="layout-mode">
|
||||
<option value="default">Default</option>
|
||||
<option value="top-bottom">Top / Bottom</option>
|
||||
<option value="editor-only">Editor Only</option>
|
||||
<option value="preview-only">Preview Only</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label class="settings-label">Theme</label>
|
||||
<select id="editor-theme">
|
||||
<option value="vs-dark">VS Dark</option>
|
||||
<option value="vs">VS Light</option>
|
||||
<option value="hc-black">High Contrast</option>
|
||||
<option value="monokai">Monokai</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
<option value="github-dark">GitHub Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label class="settings-label">Font</label>
|
||||
<select id="editor-font" title="Editor font">
|
||||
<option value="default">Default Font</option>
|
||||
<option value="Fira Code">Fira Code</option>
|
||||
<option value="JetBrains Mono">JetBrains Mono</option>
|
||||
<option value="Source Code Pro">Source Code Pro</option>
|
||||
<option value="IBM Plex Mono">IBM Plex Mono</option>
|
||||
<option value="Cascadia Code">Cascadia Code</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label class="settings-label">Keybindings</label>
|
||||
<select id="keybinding-mode">
|
||||
<option value="default">Default</option>
|
||||
<option value="vim">Vim</option>
|
||||
<option value="emacs">Emacs</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label class="settings-label">Preview</label>
|
||||
<select id="preview-theme" title="Preview background">
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label class="settings-label">Shortcuts</label>
|
||||
<button id="btn-shortcuts" class="btn-small">View all</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user