feat: Add Helix keybindings and Nix development environment

Add support for Helix editor keybindings in the REPL, providing users with a modern, selection-first modal editing experience as an alternative to Vim, Emacs, and VSCode keybindings. Helix Keybindings Integration: - Add codemirror-helix@^0.5.0 dependency to @strudel/codemirror - Import and register helix keybindings in keybindings.mjs - Add 'Helix' option to keybindings selector in Settings UI - Create comprehensive user documentation at technical-manual/helix.mdx - Update developer documentation with keybinding integration pattern The Helix mode provides selection-first editing (select → action) which differs from Vim's action-motion paradigm, offering an alternative workflow for modal editing enthusiasts. Documentation: - Update CLAUDE.md with Helix support and keybinding addition process - Create helix.mdx with user-facing documentation and command reference - Update CHANGELOG.md with December 2025 entry Testing: Run `pnpm i` to install new dependencies, then `pnpm dev` to test. Verify Helix mode works in Settings → Keybindings → Helix.
2026-07-13 06:19:33 -04:00 · 2025-12-08 09:44:02 +01:00
parent d7bf5db8be
commit ec73c48e2e
6 changed files with 114 additions and 3 deletions
@@ -2,6 +2,10 @@

 NOTE: you can generate this with `node warm.js`. it might still not be perfectly sorted...

+## december 2025
+
+- 2025-12-08 Add Helix keybindings support to REPL editor - Added `codemirror-helix` package integration, enabling Helix editor keybindings as a new option in the REPL settings alongside Vim, Emacs, and VSCode modes
+
 ## november 2025

 - 2025-11-27T22:03:53+01:00 [perf] in `noise`, let noiseMix do the disconnect when it exists by jeromew in: [#1783](https://codeberg.org/uzu/strudel/pulls/1783) 
@@ -6,6 +6,7 @@ import { emacs } from '@replit/codemirror-emacs';
 import { vim, Vim } from '@replit/codemirror-vim';
 // import { vim } from './vim_test.mjs';
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
+import { helix } from 'codemirror-helix';
 import { logger } from '@strudel/core';

 const vscodePlugin = ViewPlugin.fromClass(
@@ -127,6 +128,7 @@ try {
 const keymaps = {
  vim,
  emacs,
+  helix,
  codemirror: () => keymap.of(defaultKeymap),
  vscode: vscodeExtension,
 };
@@ -44,6 +44,7 @@
    "@replit/codemirror-emacs": "^6.1.0",
    "@replit/codemirror-vim": "^6.3.0",
    "@replit/codemirror-vscode-keymap": "^6.0.2",
+    "codemirror-helix": "^0.5.0",
    "@strudel/core": "workspace:*",
    "@strudel/draw": "workspace:*",
    "@strudel/tonal": "workspace:*",
@@ -41,7 +41,7 @@ importers:
        version: 2.2.7
      '@vitest/coverage-v8':
        specifier: 3.0.4
-        version: 3.0.4(vitest@3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(@vitest/ui@3.0.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.7.0))
+        version: 3.0.4(vitest@3.0.4)
      '@vitest/ui':
        specifier: ^3.0.4
        version: 3.0.4(vitest@3.0.4)
@@ -221,6 +221,9 @@ importers:
      '@tonaljs/tonal':
        specifier: ^4.10.0
        version: 4.10.0
+      codemirror-helix:
+        specifier: ^0.5.0
+        version: 0.5.0(@codemirror/commands@6.8.0)(@codemirror/language@6.10.8)(@codemirror/search@6.5.8)(@codemirror/state@6.5.1)(@codemirror/view@6.36.2)
      nanostores:
        specifier: ^0.11.3
        version: 0.11.3
@@ -3536,6 +3539,15 @@ packages:
    resolution: {integrity: sha512-FMabTRlc5t5zjdenF6mS0MBeFZm0XqHqeOkcskKFb/LYCcRQ5fVgLOHVc4Lq9CqABd9zhjwPjMBCJvMCziSVtA==}
    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}

+  codemirror-helix@0.5.0:
+    resolution: {integrity: sha512-hI56hf9VGz53H1YvL6H1GC7HtP6te8vX+MsIHaE9J7Q3PQ6KFapKtIRg6lqSH898ikHWpMCPu42r6HJN0IfVLA==}
+    peerDependencies:
+      '@codemirror/commands': ^6.0.0
+      '@codemirror/language': ^6.0.0
+      '@codemirror/search': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+
  collapse-white-space@2.1.0:
    resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}

@@ -10554,7 +10566,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@vitest/coverage-v8@3.0.4(vitest@3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(@vitest/ui@3.0.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.7.0))':
+  '@vitest/coverage-v8@3.0.4(vitest@3.0.4)':
    dependencies:
      '@ampproject/remapping': 2.3.0
      '@bcoe/v8-coverage': 1.0.2
@@ -11254,6 +11266,14 @@ snapshots:

  cmd-shim@6.0.3: {}

+  codemirror-helix@0.5.0(@codemirror/commands@6.8.0)(@codemirror/language@6.10.8)(@codemirror/search@6.5.8)(@codemirror/state@6.5.1)(@codemirror/view@6.36.2):
+    dependencies:
+      '@codemirror/commands': 6.8.0
+      '@codemirror/language': 6.10.8
+      '@codemirror/search': 6.5.8
+      '@codemirror/state': 6.5.1
+      '@codemirror/view': 6.36.2
+
  collapse-white-space@2.1.0: {}

  color-convert@2.0.1:
@@ -0,0 +1,84 @@
+---
+title: Helix Keybindings
+layout: ../../layouts/MainLayout.astro
+---
+
+# Helix Keybindings in the REPL
+
+The Strudel REPL supports [Helix editor](https://helix-editor.com/) keybindings through the `codemirror-helix` extension. Helix is a post-modern modal text editor with a focus on selection-first editing and multiple cursors.
+
+## Enabling Helix Mode
+
+1. Open the Settings panel in the REPL (click the settings icon or use the keyboard shortcut)
+2. Find the "Keybindings" section
+3. Select "Helix" from the available options
+
+## Key Differences from Vim
+
+Helix uses a selection-first approach, which means:
+
+- **Selection → Action** (Helix) vs **Action → Motion** (Vim)
+- For example, to delete a word in Helix: `w` (select word) → `d` (delete)
+- In Vim, it would be: `dw` (delete word)
+
+## Common Helix Commands
+
+### Normal Mode
+
+- `i` — Enter insert mode before selection
+- `a` — Enter insert mode after selection
+- `v` — Enter visual/select mode
+- `w` — Select next word
+- `e` — Select to end of word
+- `b` — Select previous word
+- `x` — Select/extend line
+- `d` — Delete selection
+- `c` — Change selection (delete and enter insert mode)
+- `y` — Yank (copy) selection
+- `p` — Paste after selection
+- `u` — Undo
+- `U` — Redo
+- `/` — Search
+- `n` — Select next search match
+- `N` — Select previous search match
+
+### Movement
+
+- `h, j, k, l` — Move left, down, up, right
+- `gg` — Go to start of document
+- `ge` — Go to end of document
+- `{` / `}` — Move to previous/next paragraph
+- `%` — Match bracket
+
+### Multi-cursor
+
+- `C` — Duplicate cursor to line below
+- `Alt-C` — Duplicate cursor to line above
+- `,` — Remove primary cursor
+- `Alt-,` — Remove all secondary cursors
+
+## Strudel-Specific Features
+
+Currently, Helix mode in Strudel provides standard Helix keybindings. Unlike Vim mode, there are no custom Strudel-specific commands (like `:w` to evaluate) yet.
+
+To evaluate code while in Helix mode, use the standard shortcuts:
+- `Ctrl+Enter` or `Alt+Enter` — Evaluate code
+- `Alt+.` — Stop playback
+
+## Resources
+
+- [Helix Documentation](https://docs.helix-editor.com/)
+- [Helix Keymap](https://docs.helix-editor.com/keymap.html)
+- [codemirror-helix on npm](https://www.npmjs.com/package/codemirror-helix)
+- [codemirror-helix on GitLab](https://gitlab.com/_rvidal/codemirror-helix)
+
+## Notes
+
+- The `codemirror-helix` extension is described as an "initial version" and may not implement all Helix features
+- Behavior may differ slightly from the native Helix editor
+- If you encounter issues, you can switch back to other keybinding modes in Settings
+- The keybinding preference is saved in your browser's local storage
+
+## Contributing
+
+If you'd like to add Strudel-specific Helix commands (similar to Vim's `:w` for evaluate), contributions are welcome! See the implementation in `/packages/codemirror/keybindings.mjs` for reference.
@@ -220,7 +220,7 @@ export function SettingsTab({ started }) {
        <ButtonGroup
          value={keybindings}
          onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
-          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs', vscode: 'VSCode' }}
+          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs', helix: 'Helix', vscode: 'VSCode' }}
        ></ButtonGroup>
      </FormItem>
      <FormItem label="Panel Position">