MeltuiヘッドレスUIおよびTailWindCSS CSSフレームワークを使用して、Svelteで書かれたRich Text Editor（WysiWyg）。
Tiptap Editor（ヘッドレスエディター）とProsemirrorの上に構築されています。使いやすく、開発し、保守します。 AI APIと統合し、ライティングエクスペリエンスを向上させるのに役立つプロンプトエンジン。
Dark/Lightテーマはサポートされ、カスタマイズ可能です。
//npm
npm install @nextlint/svelte
//yarn
yarn add @nextlint/svelte
//pnmp
npm add @nextlint/svelteNexltint Editorは、MeltuiのヘッドレスのSvelteコンポーネントを使用し、Tailwindcssでスタイルを整えています。テーマトークンは、Svelte Shadcnから継承されています。
すでにプロジェクトにShadCNセットアップがある場合は、このパートをスキップできます。
pnpm add -D tailwindcss postcss autoprefixer sass
npx tailwindcss init -p tailwind.config.jsおよびpostcss.config.jsが作成されました
// more detail at https://www.shadcn-svelte.com/docs/installation/manual
/** @type {import('tailwindcss').Config} */
module . exports = {
content : [
'./src/**/*.{svelte,js}' ,
'./node_modules/@nextlint/svelte/dist/**/*.{svelte,ts}'
] ,
theme : {
extend : {
colors : {
border : 'hsl(var(--border) / <alpha-value>)' ,
input : 'hsl(var(--input) / <alpha-value>)' ,
ring : 'hsl(var(--ring) / <alpha-value>)' ,
background : 'hsl(var(--background) / <alpha-value>)' ,
foreground : 'hsl(var(--foreground) / <alpha-value>)' ,
primary : {
DEFAULT : 'hsl(var(--primary) / <alpha-value>)' ,
foreground : 'hsl(var(--primary-foreground) / <alpha-value>)'
} ,
secondary : {
DEFAULT : 'hsl(var(--secondary) / <alpha-value>)' ,
foreground : 'hsl(var(--secondary-foreground) / <alpha-value>)'
} ,
destructive : {
DEFAULT : 'hsl(var(--destructive) / <alpha-value>)' ,
foreground : 'hsl(var(--destructive-foreground) / <alpha-value>)'
} ,
muted : {
DEFAULT : 'hsl(var(--muted) / <alpha-value>)' ,
foreground : 'hsl(var(--muted-foreground) / <alpha-value>)'
} ,
accent : {
DEFAULT : 'hsl(var(--accent) / <alpha-value>)' ,
foreground : 'hsl(var(--accent-foreground) / <alpha-value>)'
} ,
popover : {
DEFAULT : 'hsl(var(--popover) / <alpha-value>)' ,
foreground : 'hsl(var(--popover-foreground) / <alpha-value>)'
} ,
card : {
DEFAULT : 'hsl(var(--card) / <alpha-value>)' ,
foreground : 'hsl(var(--card-foreground) / <alpha-value>)'
}
} ,
borderRadius : {
lg : 'var(--radius)' ,
md : 'calc(var(--radius) - 2px)' ,
sm : 'calc(var(--radius) - 4px)'
} ,
fontFamily : {
sans : [ 'Inter' ]
}
}
} ,
plugins : [ ]
} ;テーマはCSSトークンを介してカスタマイズできます。デフォルトのトークンは、editortheme.scssにあります。
デフォルトのテーマを使用するには、 SvelteEditorコンポーネントをThemeThemeでラップする必要があります。
< script lang = " ts " >
import { SvelteEditor } from ' @nextlint/svelte/EditorTheme ' ;
import EditorTheme from ' @nextlint/svelte/EditorTheme ' ;
</ script >
< div class = " editor " >
< EditorTheme >
< SvelteEditor content = " " placeholder = " Start editing... " />
</ EditorTheme >
</ div > EditorTheme Basicalyは、 EditorTheme.scssで定義するデフォルトのテーマをインポートするだけです。
< script lang = " ts " >
import ' ./EditorTheme.scss ' ;
</ script >
//EditorTheme.svelte
< slot /> NEXLTINTエディターは、既存のプラグインがインストールされているヘッドレスエディターであるnextlint/coreを使用して、TIPTAPおよびProsemirrorプラグインシステムと互換性のあるUIフレームワークで使用できます。
NextLint Svelte自体には、Svelteと構成可能なプラグインが完全に記述されています
サポートアップロード/埋め込み/UNSPLASH API
| 名前 | タイプ | 説明 |
|---|---|---|
content | Content | エディターのコンテンツを初期化します |
onChange | (editor:Editor)=>void | エディターが変更されると、コールバックが呼び出されます |
placeholder? | String | プレースホルダーは、編集者が空になると表示されます |
onCreated? | (editor:Editor)=>void | エディターが作成されたときにコールバックが1回トリガーされます |
plugins? | PluginsOptions | プラグインオプションをカスタマイズします |
extensions? | Extensions | エディター拡張機能をカスタマイズします |
タイプ： HTMLContent | JSONContent | JSONContent[] | null
コンテンツを初期化すると、JSONCONTENTまたはHTMLマークアップにすることができます。
// Can be string
< SvelteEditor
content = "<p>this is a paragraph content</p>"
/ >
// which is equal
< SvelteEditor
...
content = { {
type : 'docs'
attrs : { } ,
content : [ {
type : 'paragraph' ,
attrs : { } ,
content : [ {
type : 'text' ,
text : 'this is a paragraph content'
} ]
} ]
} }
/ >タイプ： String | undefinedデフォルト： undefined
プレースホルダーは、エディターのコンテンツが空のときに表示されます
< SvelteEditor ... content = " " placeholder = " Press 'space' to trigger AI prompt " />タイプ：（ (editor: Editor)=>void
エディターが変更されると、コールバックが発生します（状態または選択）
< script lang = " ts " >
let editor;
</ script >
< SvelteEditor
...
onChange ={ _editor => {
editor = _editor ;
}}
/>タイプ：（ (editor: Editor)=>void | undefinedデフォルト： undefined
編集者が初期化を終了すると、コールバックが発生します
< SvelteEditor
...
onCreated ={ editor => {
console . log ( ' The editor is created and ready to use ! ' );
}}
/>タイプ： PluginOptions | undefinedデフォルト： undefined
type PluginOptions = {
image ?: ImagePluginOptions ;
gpt ?: AskOptions ;
dropCursor ?: DropcursorOptions ;
codeBlock ?: NextlintCodeBlockOptions ;
} ;タイプ： ImagePluginOptions|undefinedデフォルト： undefined
Handleupload関数とセットアップAPIキーを設定して、Unsplashから画像を取得する
< SvelteEditor
...
plugins ={
image : {
handleUpload :( file ) => {
// handle upload here
const blob = new Blob ([ file ]);
const previewUrl = URL . createObjectURL ( blob );
return previewUrl ;
},
unsplash : {
accessKey : ' UNPLASH_API_KEY '
}
},
}
/>タイプ： AskOptions|undefinedデフォルト： undefined
空の行でプロンプトをトリガーし、エディターから質問を取得し、この構成を介してハンドル関数を呼び出し、結果をエディターに追加します。エディターのAIアウト側と統合することを許可します。
< SvelteEditor
...
plugins ={
ask : async ( question : string ) => {
// config any AI tool to get the result and return
// the result to the editor
return ' result from any AI Backend '
}
}
/>タイプ： DropcursorOptions|undefinedデフォルト： undefined
構成DropCursorの色/幅/クラス。
< SvelteEditor
...
plugins ={
dropCursor : {
width : ' 2px ' ,
color : ' #000 ' ,
}
}
/>タイプ： NextlintCodeBlockOptions|undefined
デフォルト：
{
themes : {
dark : 'github-dark' ,
light : 'github-light'
} ,
langs : [ ]
} codeBlockテーマはtheme小道具と同期します。
< SvelteEditor
//....
content ={ ' ' }
onChange ={ editor . set }
theme = " light "
plugins ={{
codeBlock : {
langs : [ ' c ' , ' sh ' , ' javascript ' , ' html ' , ' typescript ' ],
themes : {
dark : ' vitesse-dark ' ,
light : ' vitesse-light '
}
}
}}
/>貢献ガイドラインに従ってください
MITライセンス（MIT）。詳細については、ライセンスファイルをご覧ください。
