Novel: Notion-style WYSIWYG Editor with AI-Powered Autocompletion
はじめに
Novelは、AIによる自動補完機能を備えたNotionスタイルのWYSIWYGエディタです。TiptapとVercel AI SDKを使用して構築されており、直感的な操作で文書作成をサポートします。この記事では、Novelの特徴、インストール方法、基本的な使用方法について詳しく解説します。
特徴
スラッシュメニューとバブルメニュー
Novelでは、スラッシュメニューとバブルメニューを使用して、必要な機能にすばやくアクセスできます。これにより、作業の効率が大幅に向上します。
AI自動補完
AIによる自動補完機能は、++を入力することでアクティブになります。また、スラッシュメニューから選択することも可能です。これにより、タイピングの手間を省き、スムーズな文書作成が実現します。
画像のアップロード
ドラッグ＆ドロップやコピー＆ペーストで画像を簡単にアップロードできます。スラッシュメニューから選択することもでき、直感的に操作できます。
ツイートの追加
スラッシュメニューからコマンドを使用して、ツイートを文書に追加することができます。これにより、リアルタイムの情報を簡単に取り入れることができます。
数学記号のLaTeX表現
Novelでは、LaTeXを使用して数学記号を表現できます。例えば、以下のような数式を簡単に挿入できます。
- E=mc²
- a² = b² + c²
- f^(ξ) = ∫_{−∞}^{∞} f(x)e^{−2πixξ} dx
- A = [ a c; b d ]
- ∑_{i=0}^{n} x_i
インストール方法
Novelを使用するには、以下のコマンドを実行してNPMパッケージをインストールします。
npm i novel
使用例
以下のようにインポートして、エディタをアプリケーションに組み込むことができます。
import { Editor } from "novel";
export default function App() {
return (
<Editor />
);
}
まとめ
Novelは、AIによる自動補完機能を搭載した使いやすいWYSIWYGエディタです。直感的な操作で文書作成をサポートし、さまざまな機能を提供しています。ぜひ、GitHubでスターを付けたり、Vercelにデプロイしてみてください！
