@vimee/shiki-editor

Shiki による構文ハイライト付きのフル機能 Vim エディターコンポーネント。

インストール

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

使い方

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	型	デフォルト	説明
`content`	`string`	（必須）	エディターコンテンツ
`highlighter`	`HighlighterGeneric`	（必須）	Shiki ハイライターインスタンス
`lang`	`string`	（必須）	言語識別子
`theme`	`string`	（必須）	Shiki テーマ名
`shikiOptions`	`Record<string, unknown>`	—	追加の Shiki オプション
`cursorPosition`	`string`	`"1:1"`	初期カーソル位置（1ベース）
`onChange`	`(content: string) => void`	—	コンテンツ変更コールバック
`onYank`	`(text: string) => void`	—	ヤンクコールバック
`onSave`	`(content: string) => void`	—	保存コールバック
`onModeChange`	`(mode: VimMode) => void`	—	モード変更コールバック
`onAction`	`(action: VimAction, key: string) => void`	—	アクションコールバック
`className`	`string`	—	コンテナ CSS クラス
`readOnly`	`boolean`	`false`	編集を無効にする
`autoFocus`	`boolean`	`false`	マウント時に自動フォーカス
`indentStyle`	`"space" \| "tab"`	`"space"`	インデント文字
`indentWidth`	`number`	`2`	インデント幅
`showLineNumbers`	`boolean`	`true`	行番号を表示

サブコンポーネント

このパッケージは、カスタムレイアウト用の個別サブコンポーネントもエクスポートしています：

<Cursor /> — エディターカーソルをレンダリング
<Line /> — ハイライトされた1行をレンダリング
<StatusLine /> — Vim ステータスバーをレンダリング

フック

useShikiTokens(highlighter, content, lang, theme, extraOptions?) — Shiki でコンテンツをトークナイズ
computeSelectionInfo(cursor, visualAnchor, buffer) — ビジュアル選択範囲を計算

CSS

ベーススタイルをインポート：

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