Add editor experience features: auto-run, layouts, resizable panels, Emmet, vim/emacs

- Auto-run toggle with localStorage persistence (toolbar checkbox)
- Layout selector: default, top/bottom, editor-only, preview-only
- Resizable panels via drag dividers with double-click reset
- Emmet abbreviation expansion for HTML, CSS, and JSX
- Vim and Emacs keybinding modes with lazy-loaded CDN libraries
- Shared preferences module for localStorage management
- Editor hooks for tab switch and mode change callbacks
This commit is contained in:
root
2026-02-26 11:19:14 -06:00
parent 463b563423
commit 7f51af17a3
8 changed files with 407 additions and 7 deletions

View File

@@ -19,8 +19,23 @@
<option value="svelte">Svelte</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>
</div>
<div class="toolbar-right">
<label class="auto-run-toggle" title="Auto-run on change">
<input type="checkbox" id="auto-run-checkbox" checked>
Auto
</label>
<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>
@@ -31,11 +46,14 @@
<div class="panel panel-editor">
<div class="tab-bar" id="tab-bar"></div>
<div id="editor-area" class="editor-area"></div>
<div id="vim-status-bar" class="vim-status-bar"></div>
</div>
<div class="divider divider-col" id="divider-col"></div>
<div class="panel panel-preview">
<div class="panel-label">Preview</div>
<iframe id="preview-frame" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
<div class="divider divider-row" id="divider-row"></div>
<div class="panel panel-console">
<div class="panel-label">Console <button id="btn-clear-console" class="btn-small">Clear</button></div>
<div id="console-output"></div>