@vimee/shiki-editor

A full-featured Vim editor component with syntax highlighting powered by Shiki.

Installation

npm install @vimee/core @vimee/react @vimee/shiki-editor shiki

Usage

import { use } from "react";
import { Vim } from "@vimee/shiki-editor";
import { createHighlighter } from "shiki";
import "@vimee/shiki-editor/styles.css";

const highlighterPromise = createHighlighter({
  themes: ["github-dark"],
  langs: ["typescript"],
});

function App() {
  const highlighter = use(highlighterPromise);

  return (
    <Vim
      content="const hello = 'world';"
      highlighter={highlighter}
      lang="typescript"
      theme="github-dark"
      onChange={(content) => console.log(content)}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | (required) | Editor content | | highlighter | HighlighterGeneric | (required) | Shiki highlighter instance | | lang | string | (required) | Language identifier | | theme | string | (required) | Shiki theme name | | shikiOptions | Record<string, unknown> | — | Extra Shiki options | | cursorPosition | string | "1:1" | Initial cursor (1-based) | | onChange | (content: string) => void | — | Content change callback | | onYank | (text: string) => void | — | Yank callback | | onSave | (content: string) => void | — | Save callback | | onModeChange | (mode: VimMode) => void | — | Mode change callback | | onAction | (action: VimAction, key: string) => void | — | Action callback | | className | string | — | Container CSS class | | readOnly | boolean | false | Disable editing | | autoFocus | boolean | false | Auto-focus on mount | | indentStyle | "space" \| "tab" | "space" | Indent character | | indentWidth | number | 2 | Indent width | | showLineNumbers | boolean | true | Show line numbers |

Sub-components

The package also exports individual sub-components for custom layouts:

• <Cursor /> — Renders the editor cursor
• <Line /> — Renders a single highlighted line
• <StatusLine /> — Renders the Vim status bar

Hooks

• useShikiTokens(highlighter, content, lang, theme, extraOptions?) — Tokenize content with Shiki
• computeSelectionInfo(cursor, visualAnchor, buffer) — Compute visual selection ranges

CSS

Import the base styles:

import "@vimee/shiki-editor/styles.css";