experiments in a post-browser web
fix(editor): read vim mode from prefs key and remove toolbar checkbox
The editor was reading api.settings.getKey('vimMode') but the Settings
app stores vim mode under the 'prefs' key as {vimMode: true}. Changed
to read getKey('prefs') and extract .vimMode from the result object.
Removed the vim mode checkbox from the editor toolbar entirely - it
belongs in the Settings app only. Added listener for
editor:settings-changed pubsub to live-reload vim mode when changed
in Settings.
+30
-101
-29
extensions/editor/editor-layout.js
-29
extensions/editor/editor-layout.js
···
13
13
constructor(options) {
14
14
this.container = options.container;
15
15
this.onContentChange = options.onContentChange;
16
-
this.onVimModeChange = options.onVimModeChange;
17
16
this.initialContent = options.initialContent || '';
18
17
this.vimMode = options.vimMode || false;
19
18
···
90
89
91
90
this.toolbar.appendChild(sidebarToggles);
92
91
93
-
// Vim mode toggle
94
-
this.vimToggle = document.createElement('label');
95
-
this.vimToggle.className = 'vim-toggle';
96
-
this.vimToggle.title = 'Toggle vim keybindings';
97
-
98
-
this.vimCheckbox = document.createElement('input');
99
-
this.vimCheckbox.type = 'checkbox';
100
-
this.vimCheckbox.checked = this.vimMode;
101
-
this.vimCheckbox.addEventListener('change', () => {
102
-
this.updateVimModeState(this.vimCheckbox.checked);
103
-
});
104
-
105
-
const vimLabel = document.createElement('span');
106
-
vimLabel.textContent = 'Vim';
107
-
108
-
this.vimToggle.appendChild(this.vimCheckbox);
109
-
this.vimToggle.appendChild(vimLabel);
110
-
this.toolbar.appendChild(this.vimToggle);
111
-
112
92
// Save status indicator (shown when editing datastore items)
113
93
this.saveStatus = document.createElement('span');
114
94
this.saveStatus.id = 'save-status';
···
320
300
this.statusLine.hide();
321
301
}
322
302
}
323
-
324
-
// Notify parent of vim mode change for persistence
325
-
if (this.onVimModeChange) {
326
-
this.onVimModeChange(this.vimMode);
327
-
}
328
303
}
329
304
330
305
/**
···
477
452
*/
478
453
setVimMode(enabled) {
479
454
this.updateVimModeState(enabled);
480
-
// Keep checkbox in sync with programmatic changes
481
-
if (this.vimCheckbox) {
482
-
this.vimCheckbox.checked = enabled;
483
-
}
484
455
}
485
456
486
457
/**
-26
extensions/editor/home.css
-26
extensions/editor/home.css
···
353
353
border-top: 1px solid var(--base02);
354
354
}
355
355
356
-
.vim-toggle {
357
-
display: flex;
358
-
align-items: center;
359
-
gap: 6px;
360
-
cursor: pointer;
361
-
font-size: 12px;
362
-
color: var(--base04);
363
-
user-select: none;
364
-
}
365
-
366
-
.vim-toggle:hover {
367
-
color: var(--base05);
368
-
}
369
-
370
-
.vim-toggle input {
371
-
width: 14px;
372
-
height: 14px;
373
-
margin: 0;
374
-
accent-color: var(--base0D);
375
-
cursor: pointer;
376
-
}
377
-
378
-
.vim-toggle span {
379
-
font-family: var(--theme-font-mono, monospace);
380
-
}
381
-
382
356
.sidebar-toggles {
383
357
display: flex;
384
358
gap: 6px;
+30
-46
extensions/editor/home.js
+30
-46
extensions/editor/home.js
···
18
18
// Editor layout instance
19
19
let editorLayout = null;
20
20
21
-
// Settings key for vim mode preference
22
-
const SETTINGS_KEY = 'editor.vimMode';
21
+
// Settings storage key (matches how Settings app stores under 'prefs' key)
22
+
const PREFS_STORAGE_KEY = 'prefs';
23
23
24
24
// Autosave state
25
25
let currentItemId = null;
···
146
146
return;
147
147
}
148
148
149
-
// Load vim mode preference from extension settings API, fallback to localStorage cache
149
+
// Load vim mode preference from extension settings API (Settings app stores under 'prefs' key)
150
150
let vimMode = false;
151
151
try {
152
152
if (api?.settings?.getKey) {
153
-
const result = await api.settings.getKey('vimMode');
154
-
if (result.success && result.data !== undefined && result.data !== null) {
155
-
vimMode = !!result.data;
156
-
debug && console.log('[editor] Loaded vimMode from datastore:', vimMode);
153
+
const result = await api.settings.getKey(PREFS_STORAGE_KEY);
154
+
if (result.success && result.data && typeof result.data === 'object') {
155
+
vimMode = !!result.data.vimMode;
156
+
debug && console.log('[editor] Loaded vimMode from prefs:', vimMode);
157
157
} else {
158
-
// Fallback to localStorage cache
159
-
vimMode = localStorage.getItem(SETTINGS_KEY) === 'true';
160
-
debug && console.log('[editor] Loaded vimMode from localStorage fallback:', vimMode);
158
+
debug && console.log('[editor] No prefs found in datastore, using default vimMode:', vimMode);
161
159
}
162
-
} else {
163
-
vimMode = localStorage.getItem(SETTINGS_KEY) === 'true';
164
-
debug && console.log('[editor] Loaded vimMode from localStorage (no settings API):', vimMode);
165
160
}
166
161
} catch (err) {
167
-
// Last resort fallback to localStorage
168
-
try {
169
-
vimMode = localStorage.getItem(SETTINGS_KEY) === 'true';
170
-
} catch {}
171
-
debug && console.log('[editor] Failed to load settings, used localStorage fallback:', err);
162
+
debug && console.log('[editor] Failed to load settings:', err);
172
163
}
173
164
174
165
// Check URL params for content, file path, or itemId
···
223
214
initialContent,
224
215
vimMode,
225
216
onContentChange: handleContentChange,
226
-
onVimModeChange: handleVimModeChange,
227
217
});
228
218
229
219
// Show save status indicator if editing a datastore item
···
242
232
});
243
233
}
244
234
235
+
// Listen for settings changes from Settings app to live-reload vim mode
236
+
if (api?.subscribe) {
237
+
api.subscribe('editor:settings-changed', async () => {
238
+
debug && console.log('[editor] Settings changed, reloading vim mode');
239
+
try {
240
+
if (api?.settings?.getKey) {
241
+
const result = await api.settings.getKey(PREFS_STORAGE_KEY);
242
+
if (result.success && result.data && typeof result.data === 'object') {
243
+
const newVimMode = !!result.data.vimMode;
244
+
if (editorLayout) {
245
+
editorLayout.setVimMode(newVimMode);
246
+
}
247
+
debug && console.log('[editor] Updated vimMode from settings:', newVimMode);
248
+
}
249
+
}
250
+
} catch (err) {
251
+
debug && console.log('[editor] Failed to reload settings:', err);
252
+
}
253
+
}, api.scopes.GLOBAL);
254
+
}
255
+
245
256
debug && console.log('[editor] Editor initialized');
246
257
};
247
258
···
332
343
// Schedule autosave if editing a datastore item
333
344
if (currentItemId) {
334
345
scheduleAutosave(content);
335
-
}
336
-
};
337
-
338
-
/**
339
-
* Handle vim mode changes - persist to extension settings API and localStorage cache
340
-
*/
341
-
const handleVimModeChange = (enabled) => {
342
-
// Write to localStorage as fast cache for next init
343
-
try {
344
-
localStorage.setItem(SETTINGS_KEY, enabled ? 'true' : 'false');
345
-
} catch (err) {
346
-
debug && console.log('[editor] Failed to cache vimMode to localStorage:', err);
347
-
}
348
-
349
-
// Write to extension settings API (datastore) as source of truth
350
-
if (api?.settings?.setKey) {
351
-
api.settings.setKey('vimMode', enabled).then(result => {
352
-
if (result.success) {
353
-
console.log('[editor] Saved vimMode to datastore:', enabled);
354
-
} else {
355
-
console.error('[editor] Failed to save vimMode to datastore:', result.error);
356
-
}
357
-
}).catch(err => {
358
-
console.error('[editor] Failed to save vimMode to datastore:', err);
359
-
});
360
-
} else {
361
-
console.log('[editor] Saved vimMode to localStorage only (no settings API):', enabled);
362
346
}
363
347
};
364
348