Skip to content

Feature: VIM Keymap Support and Raycast (Apple Tahoe) Blur Theme - #1

Draft
Lunchb0ne wants to merge 1 commit into
mainfrom
feature/vim-and-raycast-theme-11963200240831025744
Draft

Feature: VIM Keymap Support and Raycast (Apple Tahoe) Blur Theme#1
Lunchb0ne wants to merge 1 commit into
mainfrom
feature/vim-and-raycast-theme-11963200240831025744

Conversation

@Lunchb0ne

@Lunchb0ne Lunchb0ne commented May 26, 2026

Copy link
Copy Markdown
Owner
  1. Proper VIM support: Added VIM support utilizing @replit/codemirror-vim. Injected the vim() extension, updated settings.keymap.enum configuration, exposed Vim via Settings drop-down, and addressed PR Draft: implement vim keymap (Resolves Issue #24)  heyman/heynote#51 issues by protecting block delimiters from being mistakenly deleted by vim events in src/editor/block/block.js using transaction filters.
  2. Blur/Transparent Theme (Apple Tahoe design language / Raycast like): Added a new raycast theme that utilizes native transparent + vibrancy (under-window) capabilities in BrowserWindow on Mac and backgroundMaterial (acrylic) on Windows. Created matching translucent syntax highlight themes.

PR created automatically by Jules for task 11963200240831025744 started by @Lunchb0ne

Summary by Sourcery

Add Vim keymap support and a new translucent Raycast theme with platform-specific window effects.

New Features:

  • Introduce a Vim keymap option alongside existing keymaps and wire it into the editor settings.
  • Add a Raycast translucent theme with matching CodeMirror syntax highlighting and UI colors, selectable from settings.

Bug Fixes:

  • Prevent code block delimiters from being deleted by Vim-initiated edit events in the editor.

Enhancements:

  • Update keymap extension handling to load Vim-specific extensions when Vim is selected.
  • Adjust Electron window configuration to support transparent, vibrant backgrounds for the Raycast theme on macOS and acrylic background material on Windows.
  • Allow theme switching logic to apply the Raycast editor theme dynamically based on the selected app theme.

Build:

  • Add @replit/codemirror-vim as a new runtime dependency.

@google-labs-jules

Copy link
Copy Markdown

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@sourcery-ai

sourcery-ai Bot commented May 26, 2026

Copy link
Copy Markdown

Reviewer's Guide

Implements VIM keymap support alongside existing keymaps and introduces a new translucent "raycast" theme that wires Electron window transparency/vibrancy to matching CSS and CodeMirror syntax themes, while hardening block delimiter protection for vim-initiated edits.

Sequence diagram for selecting the raycast theme at runtime

sequenceDiagram
    actor User
    participant SettingsVue as Settings.vue
    participant IPC as ipcRenderer
    participant Main as electron main index.ts
    participant Win as BrowserWindow

    User->>SettingsVue: select theme raycast
    SettingsVue->>IPC: invoke dark-mode:set("raycast")
    IPC->>Main: dark-mode:set("raycast")
    Main->>Main: CONFIG.set("theme", "raycast")
    Main->>Main: nativeTheme.themeSource = "raycast"
    Main->>Win: setBackgroundColor("#00000000")
    alt isMac
        Main->>Win: setVibrancy("under-window")
    else isWindows
        Main->>Win: setBackgroundMaterial("acrylic")
    end
Loading

File-Level Changes

Change Details Files
Add Vim keymap support integrated with existing keymap infrastructure and settings.
  • Extend config schema and Settings UI to allow selecting a new "vim" keymap option.
  • Adjust keymap composition logic to recognize the "vim" keymap while keeping existing default/emacs bindings ordering intact.
  • Change keymap extension construction to instantiate the CodeMirror vim() extension (with status bar) when the vim keymap is selected.
  • Wire Vim selection through existing settings plumbing so the chosen keymap persists and is applied on editor creation.
electron/config.js
src/components/settings/Settings.vue
src/editor/keymap.js
package.json
package-lock.json
Protect block delimiters from being removed by Vim-driven edits using CodeMirror transaction filters.
  • Detect vim-originated userEvent annotations on transactions.
  • Extend the existing changeFilter that already protects delimiters on search/replace to also treat vim userEvents as protected operations.
  • Ensure block delimiter ranges are always pushed into the protected set when a vim delete-like command is executed.
src/editor/block/block.js
Introduce a new translucent "raycast" theme that drives Electron window effects and a matching CodeMirror theme/highlight style.
  • Add a new raycast theme branch to Electron BrowserWindow creation, setting transparent background, vibrancy/visualEffectState on macOS and acrylic backgroundMaterial on Windows when the theme is raycast.
  • Update runtime dark-mode set handler to recompute and apply background color/material/vibrancy based on whether raycast is active, with platform-specific logic.
  • Define CSS custom properties and base styles for the raycast window theme, including transparent body background and light-on-dark colors.
  • Create a dedicated CodeMirror raycast editor theme and syntax HighlightStyle, including translucent panels, selections, block backgrounds, and math result styling, marked as dark.
  • Integrate the new heynoteRaycast theme into the editor theme compartment selection and update Settings UI to expose a "Raycast / Translucent" theme option.
electron/main/index.ts
src/css/base.sass
src/editor/theme/raycast.js
src/editor/editor.js
src/components/settings/Settings.vue

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant