@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";