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

22
public/js/preferences.js Normal file
View File

@@ -0,0 +1,22 @@
const PREFIX = 'fiddle_';
const DEFAULTS = {
autoRun: true,
layout: 'default',
keybindings: 'default',
panelSizes: null,
};
export function getPref(key) {
const raw = localStorage.getItem(PREFIX + key);
if (raw === null) return DEFAULTS[key] ?? null;
try { return JSON.parse(raw); } catch { return raw; }
}
export function setPref(key, value) {
localStorage.setItem(PREFIX + key, JSON.stringify(value));
}
export function removePref(key) {
localStorage.removeItem(PREFIX + key);
}